@form-engine-ts/react 4.4.0 → 4.6.0

package/dist/index.cjs

@@ -38,7 +38,8 @@ __export(index_exports, {
   useField: () => useField,
   useForm: () => useForm,
   useFormBuilder: () => useFormBuilder,
-  useSubmissionReceipts: () => useSubmissionReceipts
+  useSubmissionReceipts: () => useSubmissionReceipts,
+  useTranslationWorkspace: () => useTranslationWorkspace
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -234,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) {
@@ -258,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);
@@ -372,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) => {
@@ -382,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) => {
@@ -403,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 };
@@ -828,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,
@@ -849,7 +890,10 @@ function useFormBuilder({
     setLocaleTranslation,
     addLocale,
     setDefaultLocale,
-    validationIssues
+    validationIssues,
+    ...activeFieldId === void 0 ? {} : { activeFieldId },
+    setActiveFieldId,
+    getFieldEditorProps
   };
 }
 
@@ -1502,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;
@@ -1679,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 = {
@@ -1702,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)("");
@@ -2042,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,
               {
@@ -2440,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,
@@ -3150,8 +3263,294 @@ 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 validateLocaleByPolicy(locale, currentLocales, policy) {
+  if (locale.length === 0) {
+    return {
+      valid: false,
+      error: { type: "invalid_locale_format", message: "Locale must not be empty." }
+    };
+  }
+  try {
+    Intl.getCanonicalLocales(locale);
+  } catch {
+    return {
+      valid: false,
+      error: { type: "invalid_locale_format", message: `Locale "${locale}" is not a valid BCP 47 locale.` }
+    };
+  }
+  if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(locale)) {
+    return {
+      valid: false,
+      error: { type: "locale_not_allowed", message: `Locale "${locale}" is not allowed by the form policy.` }
+    };
+  }
+  if (policy?.maxLocales !== void 0 && !currentLocales.includes(locale) && currentLocales.length >= policy.maxLocales) {
+    return {
+      valid: false,
+      error: {
+        type: "max_locales_exceeded",
+        message: `At most ${policy.maxLocales} locales are allowed by the form policy.`
+      }
+    };
+  }
+  return { valid: true };
+}
+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,
+  policy,
+  validateLocale
+}) {
+  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) return { success: false, error: "Workspace is read-only." };
+      const normalized = locale.trim();
+      const currentLocales = [
+        .../* @__PURE__ */ new Set([
+          ...currentSchema.defaultLocale === void 0 ? [] : [currentSchema.defaultLocale],
+          sourceLocale,
+          ...(0, import_core4.collectSchemaLocales)(currentSchema).allUniqueLocales
+        ])
+      ];
+      const validation = validateLocale?.(normalized, currentLocales) ?? validateLocaleByPolicy(normalized, currentLocales, policy);
+      if (!validation.valid) return { success: false, error: validation.error?.message ?? "Locale is not valid." };
+      const alreadyRegistered = normalized === sourceLocale || normalized === currentSchema.defaultLocale || (currentSchema.supportedLocales ?? []).includes(normalized);
+      if (alreadyRegistered) {
+        setSelectedLocale(normalized);
+        return { success: true };
+      }
+      commit({
+        ...currentSchema,
+        supportedLocales: [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], normalized])]
+      });
+      setSelectedLocale(normalized);
+      return { success: true };
+    },
+    [commit, currentSchema, policy, readOnly, sourceLocale, validateLocale]
+  );
+  const isAddLocaleAllowed = (0, import_react4.useCallback)(
+    (locale) => {
+      if (readOnly) return false;
+      const normalized = locale.trim();
+      const currentLocales = [
+        .../* @__PURE__ */ new Set([
+          ...currentSchema.defaultLocale === void 0 ? [] : [currentSchema.defaultLocale],
+          sourceLocale,
+          ...(0, import_core4.collectSchemaLocales)(currentSchema).allUniqueLocales
+        ])
+      ];
+      return (validateLocale?.(normalized, currentLocales) ?? validateLocaleByPolicy(normalized, currentLocales, policy)).valid;
+    },
+    [currentSchema, policy, readOnly, sourceLocale, validateLocale]
+  );
+  const removeLocale = (0, import_react4.useCallback)(
+    (locale) => {
+      if (readOnly || locale === sourceLocale || locale === currentSchema.defaultLocale) return;
+      commit((0, import_core4.removeLocaleFromSchema)(currentSchema, 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,
+    isAddLocaleAllowed,
+    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}`;
 }
@@ -3222,19 +3621,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 });
@@ -3268,8 +3667,8 @@ 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) {
@@ -3780,41 +4179,41 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
-  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];
@@ -3822,15 +4221,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);
@@ -3851,14 +4250,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
@@ -3870,11 +4269,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();
@@ -3906,7 +4305,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;
@@ -3918,7 +4317,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);
@@ -3974,7 +4373,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;
@@ -4276,7 +4675,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) => {
@@ -4446,5 +4845,6 @@ function FormRenderer(props) {
   useField,
   useForm,
   useFormBuilder,
-  useSubmissionReceipts
+  useSubmissionReceipts,
+  useTranslationWorkspace
 });