@form-engine-ts/react 4.3.2 → 4.5.0

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   createLocalStorageSubmissionAttemptStore: () => createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved: () => isTranslationUnresolved,
+  resolveChoiceFieldLayout: () => resolveChoiceFieldLayout,
   resolveFieldEditorControls: () => resolveFieldEditorControls,
   resolveFieldTypeSelectOptions: () => resolveFieldTypeSelectOptions,
   resolveInitialFieldType: () => resolveInitialFieldType,
@@ -37,7 +38,8 @@ __export(index_exports, {
   useField: () => useField,
   useForm: () => useForm,
   useFormBuilder: () => useFormBuilder,
-  useSubmissionReceipts: () => useSubmissionReceipts
+  useSubmissionReceipts: () => useSubmissionReceipts,
+  useTranslationWorkspace: () => useTranslationWorkspace
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -233,8 +235,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) {
@@ -257,8 +271,23 @@ function useFormBuilder({
   onChange,
   policy,
   idFactory = defaultIdFactory,
-  factories = {}
+  factories = {},
+  fieldEditorMode = "all",
+  activeFieldId: controlledActiveFieldId,
+  defaultActiveFieldId,
+  onActiveFieldChange
 }) {
+  const [internalActiveFieldId, setInternalActiveFieldId] = (0, import_react.useState)(
+    defaultActiveFieldId ?? (fieldEditorMode === "single" ? schema.fields[0]?.id : void 0)
+  );
+  const activeFieldId = controlledActiveFieldId ?? internalActiveFieldId;
+  const setActiveFieldId = (0, import_react.useCallback)(
+    (fieldId) => {
+      if (controlledActiveFieldId === void 0) setInternalActiveFieldId(fieldId);
+      onActiveFieldChange?.(fieldId);
+    },
+    [controlledActiveFieldId, onActiveFieldChange]
+  );
   const createId = (0, import_react.useCallback)(
     (kind, existingIds) => {
       const rawId = idFactory(kind, existingIds);
@@ -371,9 +400,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 = (0, import_react.useCallback)(
     (fieldId) => {
@@ -381,15 +411,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 = (0, import_react.useCallback)(
     (fieldId, targetIndex) => {
@@ -402,8 +436,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 };
@@ -827,6 +861,14 @@ function useFormBuilder({
     const result = (0, import_core.validateFormSchema)(schema, policy === void 0 ? {} : { policy });
     return result.valid ? [] : result.issues;
   }, [policy, schema]);
+  const getFieldEditorProps = (0, import_react.useCallback)(
+    (fieldId) => ({
+      isActive: activeFieldId === fieldId,
+      isVisible: fieldEditorMode === "all" || activeFieldId === fieldId,
+      onSelect: () => setActiveFieldId(fieldId)
+    }),
+    [activeFieldId, fieldEditorMode, setActiveFieldId]
+  );
   return {
     schema,
     addField,
@@ -848,7 +890,10 @@ function useFormBuilder({
     setLocaleTranslation,
     addLocale,
     setDefaultLocale,
-    validationIssues
+    validationIssues,
+    ...activeFieldId === void 0 ? {} : { activeFieldId },
+    setActiveFieldId,
+    getFieldEditorProps
   };
 }
 
@@ -1501,7 +1546,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;
@@ -1678,7 +1726,12 @@ function FormBuilder({
   slots,
   sectionOrder,
   disableDefaultStyles = false,
-  unstyled = false
+  unstyled = false,
+  fieldEditorMode = "all",
+  activeFieldId,
+  defaultActiveFieldId,
+  onActiveFieldChange,
+  submissionSettingsOptions
 }) {
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
@@ -1701,7 +1754,11 @@ 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] = (0, import_react2.useState)("");
   const [newLocale, setNewLocale] = (0, import_react2.useState)("");
@@ -2041,6 +2098,47 @@ function FormBuilder({
                 ] })
               }
             ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              Section,
+              {
+                className: builderClass("form-engine-builder__submission-settings"),
+                title: translate("builder.submissionSettings"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               TextInput,
               {
@@ -2439,9 +2537,25 @@ function FormBuilder({
             ) : null }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: builderClass("form-engine-builder__question-preview"),
+                    "data-field-id": field.id,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: editorState.onSelect, children: field.title })
+                  },
+                  field.id
+                );
+              }
               if (FieldEditorSlot !== void 0) {
                 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   FieldEditorSlot,
@@ -3149,8 +3263,232 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
-// src/receipt.ts
+// src/hooks/useTranslationWorkspace.ts
+var import_core4 = require("@form-engine-ts/core");
 var import_react4 = require("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: (0, import_core4.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] = (0, import_react4.useState)(schema);
+  const [selectedLocale, setSelectedLocale] = (0, import_react4.useState)(targetLocale ?? "");
+  const [isTranslating, setIsTranslating] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)();
+  const currentSchema = onChange === void 0 ? draftSchema : schema;
+  const targetLocales = (0, import_react4.useMemo)(() => {
+    const locales = (0, import_core4.collectSchemaLocales)(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 = (0, import_react4.useMemo)(
+    () => activeLocale.length === 0 ? [] : (0, import_core4.collectTranslationSlots)(currentSchema, activeLocale),
+    [activeLocale, currentSchema]
+  );
+  const summary = (0, import_react4.useMemo)(() => {
+    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 = (0, import_react4.useCallback)(
+    (next) => {
+      setDraftSchema(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const setTranslation = (0, import_react4.useCallback)(
+    (slot, text) => {
+      if (readOnly) return;
+      commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+    },
+    [commit, currentSchema, readOnly, sourceLocale]
+  );
+  const addLocale = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(
+    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 (0, import_core4.populateSchemaTranslations)(
+          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 = (0, import_react4.useCallback)(
+    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
+var import_react5 = require("react");
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3221,19 +3559,19 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = (0, import_react4.useMemo)(() => {
+  const stableQueries = (0, import_react5.useMemo)(() => {
     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] = (0, import_react4.useState)({
+  const [state, setState] = (0, import_react5.useState)({
     receipts: /* @__PURE__ */ new Map(),
     isLoading: stableQueries.length > 0,
     error: null
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     let active = true;
     if (stableQueries.length === 0) {
       setState({ receipts: /* @__PURE__ */ new Map(), isLoading: false, error: null });
@@ -3267,9 +3605,17 @@ function useSubmissionReceipts(store, queries) {
 }
 
 // src/renderer.tsx
-var import_core4 = require("@form-engine-ts/core");
-var import_react5 = require("react");
+var import_core5 = require("@form-engine-ts/core");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("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
@@ -3297,51 +3643,98 @@ function GroupedChoiceDescription({ props }) {
 function GroupedChoiceError({ props }) {
   return props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderChoiceGroup(groupProps) });
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "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__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
+            field.title,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)(
-          "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__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
-                field.title,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: inputId, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "input",
-                  {
-                    id: inputId,
-                    name: field.id,
-                    type: "checkbox",
-                    checked: value === true,
-                    "aria-label": field.title,
-                    onChange: (event) => setValue(event.currentTarget.checked)
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.title })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceError, { props })
-            ]
-          }
-        )
+    if (isGroupedChoiceField) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChoiceGroupFrame,
+        {
+          props,
+          className: choiceGroupClassName,
+          slotProps: choiceGroupSlotProps,
+          renderChoiceGroup,
+          disabled,
+          readOnly,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                id: inputId,
+                name: field.id,
+                type: "checkbox",
+                checked: value === true,
+                "aria-label": field.title,
+                disabled,
+                readOnly,
+                onChange: (event) => setValue(event.currentTarget.checked)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.title })
+          ] }) })
+        }
       );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
@@ -3367,56 +3760,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__ */ (0, import_jsx_runtime3.jsxs)(
-          "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__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
-                field.title,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
-                const optionId = `${inputId}-${index}`;
-                const checked = value === option.id;
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: optionId, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "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__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
-                ] }, option.id);
-              }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceError, { props })
-            ]
-          }
-        )
+    if (isGroupedChoiceField) {
+      const isRadio = field.type === "radio";
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChoiceGroupFrame,
+        {
+          props,
+          className: choiceGroupClassName,
+          slotProps: choiceGroupSlotProps,
+          renderChoiceGroup,
+          disabled,
+          readOnly,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: optionId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "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__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+            ] }, option.id);
+          }) })
+        }
       );
     }
     if (field.type === "radio") {
@@ -3553,6 +3945,7 @@ function DefaultField({
         ...ariaProps,
         id: inputId,
         name: field.id,
+        disabled,
         value: typeof value === "string" ? value : "",
         onChange: (event) => setValue(event.currentTarget.value || void 0),
         children: [
@@ -3576,6 +3969,20 @@ function DefaultField({
       }
     );
   }
+  if (isGroupedChoiceField) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ChoiceGroupFrame,
+      {
+        props,
+        className: choiceGroupClassName,
+        slotProps: choiceGroupSlotProps,
+        renderChoiceGroup,
+        disabled,
+        readOnly,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: control })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
     label,
     control,
@@ -3696,6 +4103,7 @@ function ContextFormRenderer({
   onDraftSave,
   successRenderMode = "append",
   appearance,
+  slotProps,
   groupedChoiceFields = false,
   submissionConfirmation,
   submissionConfirmationRenderMode,
@@ -3709,42 +4117,41 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
-  const isGroupedMode = appearance?.choiceField === "grouped" || groupedChoiceFields;
-  const prefix = (0, import_react5.useId)().replace(/:/g, "");
-  const formRef = (0, import_react5.useRef)(null);
-  const loadedDraftKey = (0, import_react5.useRef)(null);
-  const [draftRestored, setDraftRestored] = (0, import_react5.useState)(false);
-  const [currentPageIndex, setCurrentPageIndex] = (0, import_react5.useState)(0);
-  const [focusFieldId, setFocusFieldId] = (0, import_react5.useState)(null);
-  const [confirmation, setConfirmation] = (0, import_react5.useState)(null);
-  const [guardMessage, setGuardMessage] = (0, import_react5.useState)(null);
-  const [guardsPending, setGuardsPending] = (0, import_react5.useState)(false);
-  const [receipt, setReceipt] = (0, import_react5.useState)(null);
-  const [completionData, setCompletionData] = (0, import_react5.useState)(null);
-  const [receiptLoaded, setReceiptLoaded] = (0, import_react5.useState)(receiptStore === void 0);
-  const rendererSubmissionInFlight = (0, import_react5.useRef)(false);
-  const fallbackAttemptId = (0, import_react5.useRef)(null);
-  const completionRef = (0, import_react5.useRef)(null);
-  const confirmationRef = (0, import_react5.useRef)(null);
+  const prefix = (0, import_react6.useId)().replace(/:/g, "");
+  const formRef = (0, import_react6.useRef)(null);
+  const loadedDraftKey = (0, import_react6.useRef)(null);
+  const [draftRestored, setDraftRestored] = (0, import_react6.useState)(false);
+  const [currentPageIndex, setCurrentPageIndex] = (0, import_react6.useState)(0);
+  const [focusFieldId, setFocusFieldId] = (0, import_react6.useState)(null);
+  const [confirmation, setConfirmation] = (0, import_react6.useState)(null);
+  const [guardMessage, setGuardMessage] = (0, import_react6.useState)(null);
+  const [guardsPending, setGuardsPending] = (0, import_react6.useState)(false);
+  const [receipt, setReceipt] = (0, import_react6.useState)(null);
+  const [completionData, setCompletionData] = (0, import_react6.useState)(null);
+  const [receiptLoaded, setReceiptLoaded] = (0, import_react6.useState)(receiptStore === void 0);
+  const rendererSubmissionInFlight = (0, import_react6.useRef)(false);
+  const fallbackAttemptId = (0, import_react6.useRef)(null);
+  const completionRef = (0, import_react6.useRef)(null);
+  const confirmationRef = (0, import_react6.useRef)(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = (0, import_react5.useMemo)(
+  const visiblePageIndexes = (0, import_react6.useMemo)(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
     [form.pageVisibility, pages]
   );
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
-  const visibleValues = (0, import_react5.useMemo)(() => (0, import_core4.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = (0, import_react5.useMemo)(
+  const visibleValues = (0, import_react6.useMemo)(() => (0, import_core5.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = (0, import_react6.useMemo)(
     () => 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 = (0, import_react5.useCallback)(
+  const resolveMessage = (0, import_react6.useCallback)(
     (key, fallback) => {
       const defaultText = fallback ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
       const configured = messages[key];
@@ -3752,15 +4159,15 @@ function ContextFormRenderer({
     },
     [form.locale, messageResolver, messages]
   );
-  const fieldTranslate = (0, import_react5.useCallback)(
+  const fieldTranslate = (0, import_react6.useCallback)(
     (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 = (0, import_react5.useCallback)(() => {
+  const focusSubmitButton = (0, import_react6.useCallback)(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let active = true;
     if (receiptStore === void 0) {
       setReceipt(null);
@@ -3781,14 +4188,14 @@ function ContextFormRenderer({
       active = false;
     };
   }, [form.schema.id, form.schema.version, receiptStore]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
       return;
     }
     if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   }, [currentPageIndex, pages, visiblePageIndexes]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (focusFieldId === null) return;
     const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
       (element) => element.dataset.fieldId === focusFieldId
@@ -3800,11 +4207,11 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isReplaceMode || form.submitStatus !== "success") return;
     completionRef.current?.focus();
   }, [form.submitStatus, isReplaceMode]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
@@ -3836,7 +4243,7 @@ function ContextFormRenderer({
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
   }, [confirmation, confirmationRenderMode, focusSubmitButton]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
     if (loadedDraftKey.current === loadIdentity) return;
@@ -3848,7 +4255,7 @@ function ContextFormRenderer({
     form.restoreValues(draft.values);
     setDraftRestored(true);
   }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (form.submitStatus === "success") return;
     const timeout = globalThis.setTimeout(() => {
       onDraftSave?.(form.values);
@@ -3904,7 +4311,7 @@ function ContextFormRenderer({
     if (rendererSubmissionInFlight.current || submitState === "submitting" || submitState === "success" || confirmation !== null && !guardsConfirmed) {
       return { status: "cancelled" };
     }
-    const validation = (0, import_core4.validateAnswers)(form.schema, form.values);
+    const validation = (0, import_core5.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
@@ -4206,7 +4613,7 @@ function ContextFormRenderer({
                 ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
               };
               if (slots.renderField !== void 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Fragment, { children: slots.renderField({
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Fragment, { children: slots.renderField({
                   question: field,
                   value: form.values[field.id],
                   onChange: (value) => {
@@ -4216,7 +4623,18 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props, groupedChoiceFields: isGroupedMode }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
+              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                DefaultField,
+                {
+                  ...props,
+                  groupedChoiceFields,
+                  appearance,
+                  choiceGroupSlotProps: slotProps?.choiceGroup,
+                  renderChoiceGroup: slots.renderChoiceGroup,
+                  disabled: interactionLocked
+                },
+                field.id
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: fieldClassName, children: fieldChildren });
@@ -4356,6 +4774,7 @@ function FormRenderer(props) {
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved,
+  resolveChoiceFieldLayout,
   resolveFieldEditorControls,
   resolveFieldTypeSelectOptions,
   resolveInitialFieldType,
@@ -4364,5 +4783,6 @@ function FormRenderer(props) {
   useField,
   useForm,
   useFormBuilder,
-  useSubmissionReceipts
+  useSubmissionReceipts,
+  useTranslationWorkspace
 });