@form-engine-ts/react 2.6.0 → 2.8.0

package/dist/index.js

@@ -945,6 +945,9 @@ var FIELD_TYPES = [
 ];
 var BUILDER_DEFAULTS = {
   "builder.formBuilder": "Form builder",
+  "builder.basicSettings": "Basic settings",
+  "builder.formTitle": "Form title",
+  "builder.formDescription": "Form description",
   "builder.moveUp": "Move {{title}} up",
   "builder.moveDown": "Move {{title}} down",
   "builder.delete": "Delete {{title}}",
@@ -1110,7 +1113,7 @@ function FormBuilder({
 }) {
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = GUARDED_COMPONENTS;
-  const { Button, Checkbox, ErrorMessage, Fieldset, IconButton, Section, Select, TextInput } = components;
+  const { Button, Checkbox, ErrorMessage, Fieldset, IconButton, Section, Select, TextArea, TextInput } = components;
   const ToolbarSlot = slots?.toolbar;
   const FieldEditorSlot = slots?.fieldEditor;
   const OptionEditorSlot = slots?.optionEditor;
@@ -1413,6 +1416,42 @@ function FormBuilder({
         }
       },
       children: /* @__PURE__ */ jsxs(Fieldset, { className: "form-engine-builder__controls", disabled: readOnly, children: [
+        /* @__PURE__ */ jsx(
+          Section,
+          {
+            className: "form-engine-builder__basic-settings",
+            headingId: "builder-basic-settings-heading",
+            title: translate("builder.basicSettings"),
+            children: /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+              /* @__PURE__ */ jsxs("label", { children: [
+                translate("builder.formTitle"),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    name: "title",
+                    required: true,
+                    error: schema.title.trim().length === 0,
+                    helperText: schema.title.trim().length === 0 ? translate("builder.required") : "",
+                    value: schema.title,
+                    onChange: (value) => setSourceText({ kind: "form" }, "title", value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                translate("builder.formDescription"),
+                /* @__PURE__ */ jsx(
+                  TextArea,
+                  {
+                    name: "description",
+                    rows: 3,
+                    value: schema.description ?? "",
+                    onChange: (value) => setSourceText({ kind: "form" }, "description", value)
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
         pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
           Section,
           {
@@ -2179,7 +2218,7 @@ import {
   validateAnswers,
   validatePageAnswers
 } from "@form-engine-ts/core";
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FormContext = createContext2(null);
 function issuesByField(issues) {
@@ -2207,6 +2246,7 @@ function FormProvider({
   const [submitStatus, setSubmitStatus] = useState2("idle");
   const [submitError, setSubmitError] = useState2(null);
   const [validationPageIndex, setValidationPageIndex] = useState2(null);
+  const submissionInFlight = useRef(false);
   const visibility = useMemo2(() => calculateFieldVisibility(validSchema, values), [validSchema, values]);
   const pageVisibility = useMemo2(() => calculatePageVisibility(validSchema, values), [validSchema, values]);
   useEffect(() => {
@@ -2260,6 +2300,7 @@ function FormProvider({
   }, [initialValues]);
   const submit = useCallback2(
     async (beforeSubmit) => {
+      if (submissionInFlight.current) return { status: "cancelled" };
       const validation = validateAnswers(validSchema, values);
       if (!validation.valid) {
         setErrors(issuesByField(validation.issues));
@@ -2272,21 +2313,24 @@ function FormProvider({
       setValidationPageIndex(null);
       setSubmitError(null);
       const visibleValues = selectVisibleAnswers(validSchema, values);
+      submissionInFlight.current = true;
       try {
+        setSubmitStatus("submitting");
         if (beforeSubmit !== void 0 && await beforeSubmit(visibleValues) === "cancel") {
           setSubmitStatus("idle");
           return { status: "cancelled" };
         }
-        setSubmitStatus("submitting");
-        await onSubmit(visibleValues);
+        const response = await onSubmit(visibleValues);
         if (resetOnSuccess) setValues({ ...initialValues });
         setSubmitStatus("success");
-        return { status: "success" };
+        return response === void 0 ? { status: "success" } : { status: "success", response };
       } catch (cause) {
         const error = cause instanceof Error ? cause : new Error(String(cause));
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
+      } finally {
+        submissionInFlight.current = false;
       }
     },
     [initialValues, onSubmit, resetOnSuccess, validSchema, values]
@@ -2347,17 +2391,128 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/receipt.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+function submissionReceiptQueryKey(formId, formVersion) {
+  return `${formId}:v${formVersion}`;
+}
+function receiptKey(namespace, formId, formVersion) {
+  return `${namespace}:${formId}:v${formVersion}`;
+}
+function browserStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function parseReceipt(serialized) {
+  try {
+    const value = JSON.parse(serialized);
+    if (typeof value !== "object" || value === null || !("formId" in value) || typeof value.formId !== "string" || !("formVersion" in value) || typeof value.formVersion !== "number" || !Number.isSafeInteger(value.formVersion) || !("submittedAt" in value) || typeof value.submittedAt !== "string" || !Number.isFinite(Date.parse(value.submittedAt)) || "submissionId" in value && value.submissionId !== void 0 && typeof value.submissionId !== "string") {
+      return null;
+    }
+    const submissionId = "submissionId" in value && typeof value.submissionId === "string" ? value.submissionId : void 0;
+    return {
+      formId: value.formId,
+      formVersion: value.formVersion,
+      submittedAt: value.submittedAt,
+      ...submissionId === void 0 ? {} : { submissionId }
+    };
+  } catch {
+    return null;
+  }
+}
+function createLocalStorageSubmissionReceiptStore(options = {}) {
+  const namespace = options.namespace ?? "form_engine_receipt";
+  if (namespace.trim().length === 0) throw new TypeError("Receipt namespace must not be empty.");
+  const get = async (formId, formVersion) => {
+    const storage = browserStorage();
+    if (storage === null) return null;
+    try {
+      const serialized = storage.getItem(receiptKey(namespace, formId, formVersion));
+      if (serialized === null) return null;
+      const receipt = parseReceipt(serialized);
+      return receipt?.formId === formId && receipt.formVersion === formVersion ? receipt : null;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    get,
+    async getBatch(queries) {
+      const receipts = await Promise.all(queries.map((query) => get(query.formId, query.formVersion)));
+      return new Map(
+        receipts.flatMap(
+          (receipt) => receipt === null ? [] : [[submissionReceiptQueryKey(receipt.formId, receipt.formVersion), receipt]]
+        )
+      );
+    },
+    async save(receipt) {
+      const storage = browserStorage();
+      if (storage === null) return;
+      storage.setItem(receiptKey(namespace, receipt.formId, receipt.formVersion), JSON.stringify(receipt));
+    },
+    async remove(formId, formVersion) {
+      const storage = browserStorage();
+      if (storage === null) return;
+      storage.removeItem(receiptKey(namespace, formId, formVersion));
+    }
+  };
+}
+function useSubmissionReceipts(store, queries) {
+  const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
+  const stableQueries = useMemo3(() => {
+    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({
+    receipts: /* @__PURE__ */ new Map(),
+    isLoading: stableQueries.length > 0,
+    error: null
+  });
+  useEffect2(() => {
+    let active = true;
+    if (stableQueries.length === 0) {
+      setState({ receipts: /* @__PURE__ */ new Map(), isLoading: false, error: null });
+      return () => {
+        active = false;
+      };
+    }
+    setState((current) => ({ ...current, isLoading: true, error: null }));
+    void store.getBatch(stableQueries).then((receipts) => {
+      if (active) setState({ receipts, isLoading: false, error: null });
+    }).catch((cause) => {
+      if (!active) return;
+      setState({
+        receipts: /* @__PURE__ */ new Map(),
+        isLoading: false,
+        error: cause instanceof Error ? cause : new Error(String(cause))
+      });
+    });
+    return () => {
+      active = false;
+    };
+  }, [stableQueries, store]);
+  return state;
+}
+
 // src/renderer.tsx
 import {
+  selectVisibleAnswers as selectVisibleAnswers2,
   validateAnswers as validateAnswers2
 } from "@form-engine-ts/core";
 import {
   Fragment as Fragment2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useId,
-  useMemo as useMemo3,
-  useRef,
-  useState as useState3
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState4
 } from "react";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function describedBy(field, error, helpId, errorId) {
@@ -2473,11 +2628,17 @@ function DefaultField(props) {
     /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
   ] });
   let control;
+  const textConstraints = field.type === "text" || field.type === "textarea" ? {
+    minLength: field.minLength,
+    maxLength: field.maxLength,
+    ...field.pattern === void 0 ? {} : { pattern: field.pattern }
+  } : {};
   if (field.type === "textarea") {
     control = /* @__PURE__ */ jsx3(
       "textarea",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         placeholder: field.placeholderKey === void 0 ? void 0 : translate(field.placeholderKey),
@@ -2490,6 +2651,7 @@ function DefaultField(props) {
       "input",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         type: "number",
@@ -2534,6 +2696,11 @@ function DefaultField(props) {
   return /* @__PURE__ */ jsxs2("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
     label,
     control,
+    (field.type === "text" || field.type === "textarea") && field.maxLength !== void 0 ? props.renderCharacterCount?.({
+      fieldId: field.id,
+      current: typeof value === "string" ? value.length : 0,
+      max: field.maxLength
+    }) : null,
     /* @__PURE__ */ jsx3(FieldMessage, { props })
   ] });
 }
@@ -2569,31 +2736,62 @@ function ContextFormRenderer({
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
+  submissionGuards = [],
+  receiptStore,
   slots = {}
 }) {
   const form = useForm();
   const prefix = useId().replace(/:/g, "");
-  const formRef = useRef(null);
-  const loadedDraftKey = useRef(null);
-  const [draftRestored, setDraftRestored] = useState3(false);
-  const [currentPageIndex, setCurrentPageIndex] = useState3(0);
-  const [focusFieldId, setFocusFieldId] = useState3(null);
+  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 [receipt, setReceipt] = useState4(null);
+  const [receiptLoaded, setReceiptLoaded] = useState4(receiptStore === void 0);
+  const rendererSubmissionInFlight = useRef2(false);
   const pages = form.schema.pages;
-  const visiblePageIndexes = useMemo3(
+  const visiblePageIndexes = useMemo4(
     () => 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);
-  useEffect2(() => {
+  const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  const interactionLocked = submitState === "confirming" || submitState === "submitting";
+  useEffect3(() => {
+    let active = true;
+    if (receiptStore === void 0) {
+      setReceipt(null);
+      setReceiptLoaded(true);
+      return () => {
+        active = false;
+      };
+    }
+    setReceiptLoaded(false);
+    void receiptStore.get(form.schema.id, form.schema.version).then((stored) => {
+      if (active) setReceipt(stored);
+    }).catch(() => {
+      if (active) setReceipt(null);
+    }).finally(() => {
+      if (active) setReceiptLoaded(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [form.schema.id, form.schema.version, receiptStore]);
+  useEffect3(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
       return;
     }
     if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   }, [currentPageIndex, pages, visiblePageIndexes]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (focusFieldId === null) return;
     const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
       (element) => element.dataset.fieldId === focusFieldId
@@ -2604,7 +2802,7 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
     if (loadedDraftKey.current === loadIdentity) return;
@@ -2616,7 +2814,7 @@ function ContextFormRenderer({
     form.restoreValues(draft.values);
     setDraftRestored(true);
   }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (form.submitStatus === "success") return;
     const timeout = globalThis.setTimeout(() => {
       onDraftSave?.(form.values);
@@ -2635,6 +2833,7 @@ function ContextFormRenderer({
     if (fieldId !== void 0) setFocusFieldId(fieldId);
   };
   const handleNext = () => {
+    if (interactionLocked) return;
     const result = form.validatePage(currentPageIndex);
     if (!result.valid) {
       focusFirstIssue(result.issues[0]?.fieldId);
@@ -2643,34 +2842,122 @@ function ContextFormRenderer({
     const nextPageIndex = visiblePageIndexes[activeVisibleIndex + 1];
     if (nextPageIndex !== void 0) setCurrentPageIndex(nextPageIndex);
   };
-  const submitValues = async () => {
+  const runSubmissionGuards = async (guards) => {
+    const findings = [];
+    let confirmationMessage;
+    let requiresConfirmation = false;
+    for (const guard of guards) {
+      const result = await guard(form.schema, visibleValues);
+      if (result.status === "allow") continue;
+      findings.push(...result.findings);
+      if (result.status === "block") {
+        return {
+          status: "block",
+          findings,
+          ...result.message === void 0 ? {} : { message: result.message }
+        };
+      }
+      requiresConfirmation = true;
+      confirmationMessage ??= result.message;
+    }
+    return !requiresConfirmation ? { status: "allow" } : {
+      status: "confirm",
+      findings,
+      ...confirmationMessage === void 0 ? {} : { message: confirmationMessage }
+    };
+  };
+  const submitValues = async (guardsConfirmed = false) => {
+    if (rendererSubmissionInFlight.current || confirmation !== null && !guardsConfirmed) {
+      return { status: "cancelled" };
+    }
     const validation = validateAnswers2(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
-    const result = await form.submit(beforeSubmit);
-    if (result.status === "invalid") {
-      const invalidPageIndex = pages?.findIndex(
-        (page) => firstInvalidFieldId === void 0 ? false : page.questionIds.includes(firstInvalidFieldId)
-      );
-      if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
-      focusFirstIssue(firstInvalidFieldId);
-      return result;
+    if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
+      rendererSubmissionInFlight.current = true;
+      try {
+        const guardResult = await runSubmissionGuards(submissionGuards);
+        if (guardResult.status === "block") {
+          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
+          return { status: "cancelled" };
+        }
+        if (guardResult.status === "confirm") {
+          setGuardMessage(null);
+          setConfirmation({
+            findings: guardResult.findings,
+            ...guardResult.message === void 0 ? {} : { message: guardResult.message }
+          });
+          return { status: "cancelled" };
+        }
+      } finally {
+        rendererSubmissionInFlight.current = false;
+      }
     }
-    if (result.status !== "success") return result;
-    if (autoSaveKey !== void 0 && typeof globalThis.localStorage !== "undefined") {
-      globalThis.localStorage.removeItem(autoSaveKey);
-      setDraftRestored(false);
+    setGuardMessage(null);
+    rendererSubmissionInFlight.current = true;
+    try {
+      const result = await form.submit(beforeSubmit);
+      if (result.status === "invalid") {
+        const invalidPageIndex = pages?.findIndex(
+          (page) => firstInvalidFieldId === void 0 ? false : page.questionIds.includes(firstInvalidFieldId)
+        );
+        if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
+        focusFirstIssue(firstInvalidFieldId);
+        return result;
+      }
+      if (result.status !== "success") return result;
+      if (receiptStore !== void 0) {
+        const response = result.response;
+        const storedReceipt = {
+          formId: form.schema.id,
+          formVersion: form.schema.version,
+          submittedAt: response?.submittedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+          ...response?.submissionId === void 0 ? {} : { submissionId: response.submissionId }
+        };
+        await receiptStore.save(storedReceipt);
+        setReceipt(storedReceipt);
+      }
+      if (autoSaveKey !== void 0 && typeof globalThis.localStorage !== "undefined") {
+        globalThis.localStorage.removeItem(autoSaveKey);
+        setDraftRestored(false);
+      }
+      setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
+      return result;
+    } finally {
+      rendererSubmissionInFlight.current = false;
     }
-    setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
-    return result;
   };
   const handleSubmit = (event) => {
     event.preventDefault();
+    if (interactionLocked) return;
     void submitValues();
   };
+  const confirmSubmission = () => {
+    setConfirmation(null);
+    void submitValues(true);
+  };
+  const cancelSubmission = () => {
+    setConfirmation(null);
+  };
+  const resetReceipt = async () => {
+    if (receiptStore === void 0) return;
+    await receiptStore.remove(form.schema.id, form.schema.version);
+    setReceipt(null);
+    form.reset();
+  };
   const validationIssues = Object.values(form.errors).filter((issue) => issue !== void 0);
   const canPrev = pages !== void 0 && activeVisibleIndex > 0;
   const canNext = pages !== void 0 && activeVisibleIndex < visiblePageIndexes.length - 1;
-  const renderSubmitButton = () => slots.renderSubmitButton?.({ isSubmitting: form.isSubmitting, onSubmit: () => void submitValues() }) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: form.isSubmitting, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
+  const renderSubmitButton = () => slots.renderSubmitButton?.({ isSubmitting: interactionLocked, onSubmit: () => void submitValues() }) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: interactionLocked, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
+  if (!receiptLoaded) return null;
+  if (receipt !== null) {
+    return /* @__PURE__ */ jsx3("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
+      receipt,
+      ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
+    }) ?? /* @__PURE__ */ jsxs2("div", { role: "status", children: [
+      form.translate("form.alreadySubmitted"),
+      receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs2("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
     slots.renderHeader?.({
       title: form.schema.title,
@@ -2718,7 +3005,8 @@ function ContextFormRenderer({
         translate: form.translate,
         inputId: `${prefix}-${field.id}`,
         errorId: `${prefix}-${field.id}-error`,
-        helpId: `${prefix}-${field.id}-help`
+        helpId: `${prefix}-${field.id}-help`,
+        ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
       };
       if (slots.renderField !== void 0) {
         return /* @__PURE__ */ jsx3(Fragment2, { children: slots.renderField({
@@ -2733,6 +3021,19 @@ function ContextFormRenderer({
       const Component = components[field.type];
       return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
     }) }),
+    guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
+    confirmation === null ? null : slots.renderSubmissionConfirmation?.({
+      findings: confirmation.findings,
+      message: confirmation.message ?? form.translate("form.confirmSensitiveData"),
+      schema: form.schema,
+      visibleValues,
+      onConfirm: confirmSubmission,
+      onCancel: cancelSubmission
+    }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-submission-confirmation", role: "dialog", "aria-modal": "true", children: [
+      /* @__PURE__ */ jsx3("p", { children: confirmation.message ?? form.translate("form.confirmSensitiveData") }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
+    ] }),
     validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
       validationIssues.length,
       " validation error",
@@ -2755,7 +3056,9 @@ function ContextFormRenderer({
         totalPages: visiblePageIndexes.length,
         canPrev,
         canNext,
-        onPrev: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
+        onPrev: () => {
+          if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
+        },
         onNext: handleNext
       }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
         canPrev ? /* @__PURE__ */ jsx3(
@@ -2763,11 +3066,12 @@ function ContextFormRenderer({
           {
             className: "btn-prev",
             type: "button",
+            disabled: interactionLocked,
             onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
             children: form.translate("form.back")
           }
         ) : null,
-        canNext ? /* @__PURE__ */ jsx3("button", { className: "btn-next", type: "button", onClick: handleNext, children: form.translate("form.next") }) : null
+        canNext ? /* @__PURE__ */ jsx3("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
       ] }),
       canNext ? null : renderSubmitButton()
     ] }),
@@ -2785,6 +3089,12 @@ var RENDERER_MESSAGES = {
   "form.next": "Next",
   "form.step": "Step {{current}} / {{total}}",
   "form.draftRestored": "Draft restored",
+  "form.submissionBlocked": "Submission blocked because sensitive data was detected.",
+  "form.confirmSensitiveData": "Sensitive data may be included. Confirm before submitting.",
+  "form.confirmSubmission": "Confirm submission",
+  "form.cancelSubmission": "Cancel",
+  "form.alreadySubmitted": "Already submitted.",
+  "form.submitAnother": "Submit another response",
   "validation.required": "This field is required."
 };
 var defaultRendererTranslator = {
@@ -2823,8 +3133,11 @@ export {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,
+  submissionReceiptQueryKey,
   useField,
   useForm,
-  useFormBuilder
+  useFormBuilder,
+  useSubmissionReceipts
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,14 +42,15 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "2.6.0"
+    "@form-engine-ts/core": "2.8.0",
+    "@form-engine-ts/privacy": "2.8.0"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",
     "react-dom": ">=18.2 <20"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --clean --external react --external react/jsx-runtime --external @form-engine-ts/core",
+    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --clean --external react --external react/jsx-runtime --external @form-engine-ts/core --external @form-engine-ts/privacy",
     "check": "biome check . && tsc --noEmit",
     "test": "vitest run --globals",
     "typecheck": "tsc --noEmit"