@form-engine-ts/react 4.4.0 → 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,12 +3586,12 @@ 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";
@@ -3765,38 +4106,38 @@ function ContextFormRenderer({
   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];
@@ -3804,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();
   }, []);
@@ -4427,5 +4768,6 @@ export {
   useField,
   useForm,
   useFormBuilder,
-  useSubmissionReceipts
+  useSubmissionReceipts,
+  useTranslationWorkspace
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "4.4.0",
-    "@form-engine-ts/privacy": "4.4.0"
+    "@form-engine-ts/core": "4.5.0",
+    "@form-engine-ts/privacy": "4.5.0"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",