@form-engine-ts/react 2.6.0 → 2.7.0

package/README.md

@@ -116,3 +116,10 @@ translation lifecycle.
 Validation runs before `beforeSubmit`. A `"cancel"` result does not call `onSubmit` and preserves values and drafts.
 Header, page-header, field, navigation, submit, validation-summary, completion, and submit-error slots can replace the
 default UI. The localized `completionMessage` is displayed after a successful submission.
+
+Pass ordered `submissionGuards` to allow, block, or require confirmation before `onSubmit`. Confirmation receives all
+guard findings through `renderSubmissionConfirmation`. A `receiptStore` prevents accidental repeat submissions and can
+be created with the SSR-safe `createLocalStorageSubmissionReceiptStore`; `renderAlreadySubmitted` customizes its return
+state. Text controls forward schema `minLength`, `maxLength`, and `pattern` constraints to the DOM, and
+`renderCharacterCount` can replace the default count. Guard evaluation, confirmation, receipt persistence, and provider
+submission share an in-flight lock so rapid clicks cannot submit twice.

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
+  createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType: () => resolveInitialFieldType,
   useField: () => useField,
   useForm: () => useForm,
@@ -2225,6 +2226,7 @@ function FormProvider({
   const [submitStatus, setSubmitStatus] = (0, import_react3.useState)("idle");
   const [submitError, setSubmitError] = (0, import_react3.useState)(null);
   const [validationPageIndex, setValidationPageIndex] = (0, import_react3.useState)(null);
+  const submissionInFlight = (0, import_react3.useRef)(false);
   const visibility = (0, import_react3.useMemo)(() => (0, import_core3.calculateFieldVisibility)(validSchema, values), [validSchema, values]);
   const pageVisibility = (0, import_react3.useMemo)(() => (0, import_core3.calculatePageVisibility)(validSchema, values), [validSchema, values]);
   (0, import_react3.useEffect)(() => {
@@ -2278,6 +2280,7 @@ function FormProvider({
   }, [initialValues]);
   const submit = (0, import_react3.useCallback)(
     async (beforeSubmit) => {
+      if (submissionInFlight.current) return { status: "cancelled" };
       const validation = (0, import_core3.validateAnswers)(validSchema, values);
       if (!validation.valid) {
         setErrors(issuesByField(validation.issues));
@@ -2290,12 +2293,13 @@ function FormProvider({
       setValidationPageIndex(null);
       setSubmitError(null);
       const visibleValues = (0, import_core3.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);
         if (resetOnSuccess) setValues({ ...initialValues });
         setSubmitStatus("success");
@@ -2305,6 +2309,8 @@ function FormProvider({
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
+      } finally {
+        submissionInFlight.current = false;
       }
     },
     [initialValues, onSubmit, resetOnSuccess, validSchema, values]
@@ -2365,6 +2371,64 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/receipt.ts
+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.");
+  return {
+    async get(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;
+      }
+    },
+    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));
+    }
+  };
+}
+
 // src/renderer.tsx
 var import_core4 = require("@form-engine-ts/core");
 var import_react4 = require("react");
@@ -2482,11 +2546,17 @@ function DefaultField(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(
       "textarea",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         placeholder: field.placeholderKey === void 0 ? void 0 : translate(field.placeholderKey),
@@ -2499,6 +2569,7 @@ function DefaultField(props) {
       "input",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         type: "number",
@@ -2543,6 +2614,11 @@ function DefaultField(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
   ] });
 }
@@ -2578,6 +2654,8 @@ function ContextFormRenderer({
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
+  submissionGuards = [],
+  receiptStore,
   slots = {}
 }) {
   const form = useForm();
@@ -2587,6 +2665,11 @@ function ContextFormRenderer({
   const [draftRestored, setDraftRestored] = (0, import_react4.useState)(false);
   const [currentPageIndex, setCurrentPageIndex] = (0, import_react4.useState)(0);
   const [focusFieldId, setFocusFieldId] = (0, import_react4.useState)(null);
+  const [confirmation, setConfirmation] = (0, import_react4.useState)(null);
+  const [guardMessage, setGuardMessage] = (0, import_react4.useState)(null);
+  const [receipt, setReceipt] = (0, import_react4.useState)(null);
+  const [receiptLoaded, setReceiptLoaded] = (0, import_react4.useState)(receiptStore === void 0);
+  const rendererSubmissionInFlight = (0, import_react4.useRef)(false);
   const pages = form.schema.pages;
   const visiblePageIndexes = (0, import_react4.useMemo)(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
@@ -2595,6 +2678,29 @@ function ContextFormRenderer({
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
+  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  const interactionLocked = submitState === "confirming" || submitState === "submitting";
+  (0, import_react4.useEffect)(() => {
+    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]);
   (0, import_react4.useEffect)(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
@@ -2644,6 +2750,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);
@@ -2652,34 +2759,120 @@ 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, (0, import_core4.selectVisibleAnswers)(form.schema, form.values));
+      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 = (0, import_core4.validateAnswers)(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 ?? "Submission blocked because sensitive data was detected.");
+          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 storedReceipt = {
+          formId: form.schema.id,
+          formVersion: form.schema.version,
+          submittedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
+      receipt,
+      ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "status", children: [
+      "Already submitted.",
+      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: "Submit another response" })
+    ] }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
     slots.renderHeader?.({
       title: form.schema.title,
@@ -2727,7 +2920,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__ */ (0, import_jsx_runtime3.jsx)(import_react4.Fragment, { children: slots.renderField({
@@ -2742,6 +2936,16 @@ function ContextFormRenderer({
       const Component = components[field.type];
       return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
     }) }),
+    guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
+    confirmation === null ? null : slots.renderSubmissionConfirmation?.({
+      findings: confirmation.findings,
+      onConfirm: confirmSubmission,
+      onCancel: cancelSubmission
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-submission-confirmation", role: "dialog", "aria-modal": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation.message ?? "Sensitive data may be included. Confirm before submitting." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: confirmSubmission, children: "Confirm submission" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: "Cancel" })
+    ] }),
     validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
       validationIssues.length,
       " validation error",
@@ -2764,7 +2968,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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
         canPrev ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2772,11 +2978,12 @@ function ContextFormRenderer({
           {
             className: "btn-prev",
             type: "button",
+            disabled: interactionLocked,
             onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
             children: form.translate("form.back")
           }
         ) : null,
-        canNext ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", onClick: handleNext, children: form.translate("form.next") }) : null
+        canNext ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
       ] }),
       canNext ? null : renderSubmitButton()
     ] }),
@@ -2833,6 +3040,7 @@ function FormRenderer(props) {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,
   useField,
   useForm,

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentType, MouseEvent } from 'react';
 import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
 /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
 type BuilderPolicy = FormPolicy;
@@ -84,6 +85,21 @@ interface FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
+interface SubmissionReceipt {
+    readonly formId: string;
+    readonly formVersion: number;
+    readonly submissionId?: string;
+    readonly submittedAt: string;
+}
+interface SubmissionReceiptStore {
+    get(formId: string, formVersion: number): Promise<SubmissionReceipt | null>;
+    save(receipt: SubmissionReceipt): Promise<void>;
+    remove(formId: string, formVersion: number): Promise<void>;
+}
+declare function createLocalStorageSubmissionReceiptStore(options?: {
+    readonly namespace?: string;
+}): SubmissionReceiptStore;
+
 interface ComponentBaseProps {
     readonly id?: string;
     readonly className?: string;
@@ -249,6 +265,19 @@ type SubmitResult = {
     readonly status: "error";
     readonly error: Error;
 };
+type SubmissionGuardResult = {
+    readonly status: "allow";
+} | {
+    readonly status: "confirm";
+    readonly findings: readonly SensitiveDataFinding[];
+    readonly message?: string;
+} | {
+    readonly status: "block";
+    readonly findings: readonly SensitiveDataFinding[];
+    readonly message?: string;
+};
+type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
+type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
 interface FormRendererSlots {
     readonly renderHeader?: (props: {
         readonly title: string;
@@ -287,6 +316,24 @@ interface FormRendererSlots {
         readonly error: Error;
         readonly onRetry?: () => void;
     }) => ReactNode;
+    readonly renderSubmissionConfirmation?: (props: {
+        readonly findings: readonly SensitiveDataFinding[];
+        readonly onConfirm: () => void;
+        readonly onCancel: () => void;
+    }) => ReactNode;
+    readonly renderAlreadySubmitted?: (props: {
+        readonly receipt: SubmissionReceipt;
+        readonly onReset?: () => void;
+    }) => ReactNode;
+    readonly renderCharacterCount?: (props: {
+        readonly fieldId: string;
+        readonly current: number;
+        readonly max: number;
+    }) => ReactNode;
+}
+interface SubmissionProtectionProps {
+    readonly submissionGuards?: readonly SubmissionGuard[];
+    readonly receiptStore?: SubmissionReceiptStore;
 }
 type BeforeSubmit = (values: Readonly<Record<string, unknown>>) => "continue" | "cancel" | Promise<"continue" | "cancel">;
 
@@ -365,9 +412,10 @@ interface FieldComponentProps {
     readonly inputId: string;
     readonly errorId: string;
     readonly helpId: string;
+    readonly renderCharacterCount?: FormRendererSlots["renderCharacterCount"];
 }
 type FieldComponents = Partial<Record<FieldType, ComponentType<FieldComponentProps>>>;
-interface FormRendererPresentationProps {
+interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly components?: FieldComponents;
     readonly className?: string;
     readonly successMessageKey?: string;
@@ -388,4 +436,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormSubmitState, type InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptStore, type SubmitResult, type SubmitStatus, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, useField, useForm, useFormBuilder };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentType, MouseEvent } from 'react';
 import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
 /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
 type BuilderPolicy = FormPolicy;
@@ -84,6 +85,21 @@ interface FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
+interface SubmissionReceipt {
+    readonly formId: string;
+    readonly formVersion: number;
+    readonly submissionId?: string;
+    readonly submittedAt: string;
+}
+interface SubmissionReceiptStore {
+    get(formId: string, formVersion: number): Promise<SubmissionReceipt | null>;
+    save(receipt: SubmissionReceipt): Promise<void>;
+    remove(formId: string, formVersion: number): Promise<void>;
+}
+declare function createLocalStorageSubmissionReceiptStore(options?: {
+    readonly namespace?: string;
+}): SubmissionReceiptStore;
+
 interface ComponentBaseProps {
     readonly id?: string;
     readonly className?: string;
@@ -249,6 +265,19 @@ type SubmitResult = {
     readonly status: "error";
     readonly error: Error;
 };
+type SubmissionGuardResult = {
+    readonly status: "allow";
+} | {
+    readonly status: "confirm";
+    readonly findings: readonly SensitiveDataFinding[];
+    readonly message?: string;
+} | {
+    readonly status: "block";
+    readonly findings: readonly SensitiveDataFinding[];
+    readonly message?: string;
+};
+type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
+type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
 interface FormRendererSlots {
     readonly renderHeader?: (props: {
         readonly title: string;
@@ -287,6 +316,24 @@ interface FormRendererSlots {
         readonly error: Error;
         readonly onRetry?: () => void;
     }) => ReactNode;
+    readonly renderSubmissionConfirmation?: (props: {
+        readonly findings: readonly SensitiveDataFinding[];
+        readonly onConfirm: () => void;
+        readonly onCancel: () => void;
+    }) => ReactNode;
+    readonly renderAlreadySubmitted?: (props: {
+        readonly receipt: SubmissionReceipt;
+        readonly onReset?: () => void;
+    }) => ReactNode;
+    readonly renderCharacterCount?: (props: {
+        readonly fieldId: string;
+        readonly current: number;
+        readonly max: number;
+    }) => ReactNode;
+}
+interface SubmissionProtectionProps {
+    readonly submissionGuards?: readonly SubmissionGuard[];
+    readonly receiptStore?: SubmissionReceiptStore;
 }
 type BeforeSubmit = (values: Readonly<Record<string, unknown>>) => "continue" | "cancel" | Promise<"continue" | "cancel">;
 
@@ -365,9 +412,10 @@ interface FieldComponentProps {
     readonly inputId: string;
     readonly errorId: string;
     readonly helpId: string;
+    readonly renderCharacterCount?: FormRendererSlots["renderCharacterCount"];
 }
 type FieldComponents = Partial<Record<FieldType, ComponentType<FieldComponentProps>>>;
-interface FormRendererPresentationProps {
+interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly components?: FieldComponents;
     readonly className?: string;
     readonly successMessageKey?: string;
@@ -388,4 +436,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormSubmitState, type InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptStore, type SubmitResult, type SubmitStatus, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, useField, useForm, useFormBuilder };

package/dist/index.js

@@ -2179,7 +2179,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 +2207,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 +2261,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,12 +2274,13 @@ 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);
         if (resetOnSuccess) setValues({ ...initialValues });
         setSubmitStatus("success");
@@ -2287,6 +2290,8 @@ function FormProvider({
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
+      } finally {
+        submissionInFlight.current = false;
       }
     },
     [initialValues, onSubmit, resetOnSuccess, validSchema, values]
@@ -2347,8 +2352,67 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/receipt.ts
+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.");
+  return {
+    async get(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;
+      }
+    },
+    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));
+    }
+  };
+}
+
 // src/renderer.tsx
 import {
+  selectVisibleAnswers as selectVisibleAnswers2,
   validateAnswers as validateAnswers2
 } from "@form-engine-ts/core";
 import {
@@ -2356,7 +2420,7 @@ import {
   useEffect as useEffect2,
   useId,
   useMemo as useMemo3,
-  useRef,
+  useRef as useRef2,
   useState as useState3
 } from "react";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2473,11 +2537,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 +2560,7 @@ function DefaultField(props) {
       "input",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         type: "number",
@@ -2534,6 +2605,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,15 +2645,22 @@ 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 formRef = useRef2(null);
+  const loadedDraftKey = useRef2(null);
   const [draftRestored, setDraftRestored] = useState3(false);
   const [currentPageIndex, setCurrentPageIndex] = useState3(0);
   const [focusFieldId, setFocusFieldId] = useState3(null);
+  const [confirmation, setConfirmation] = useState3(null);
+  const [guardMessage, setGuardMessage] = useState3(null);
+  const [receipt, setReceipt] = useState3(null);
+  const [receiptLoaded, setReceiptLoaded] = useState3(receiptStore === void 0);
+  const rendererSubmissionInFlight = useRef2(false);
   const pages = form.schema.pages;
   const visiblePageIndexes = useMemo3(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
@@ -2586,6 +2669,29 @@ function ContextFormRenderer({
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
+  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  const interactionLocked = submitState === "confirming" || submitState === "submitting";
+  useEffect2(() => {
+    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]);
   useEffect2(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
@@ -2635,6 +2741,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 +2750,120 @@ 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, selectVisibleAnswers2(form.schema, form.values));
+      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 ?? "Submission blocked because sensitive data was detected.");
+          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 storedReceipt = {
+          formId: form.schema.id,
+          formVersion: form.schema.version,
+          submittedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        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: [
+      "Already submitted.",
+      receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: "Submit another response" })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs2("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
     slots.renderHeader?.({
       title: form.schema.title,
@@ -2718,7 +2911,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 +2927,16 @@ 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,
+      onConfirm: confirmSubmission,
+      onCancel: cancelSubmission
+    }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-submission-confirmation", role: "dialog", "aria-modal": "true", children: [
+      /* @__PURE__ */ jsx3("p", { children: confirmation.message ?? "Sensitive data may be included. Confirm before submitting." }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: confirmSubmission, children: "Confirm submission" }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: "Cancel" })
+    ] }),
     validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
       validationIssues.length,
       " validation error",
@@ -2755,7 +2959,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 +2969,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()
     ] }),
@@ -2823,6 +3030,7 @@ export {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,
   useField,
   useForm,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,14 +42,15 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "2.6.0"
+    "@form-engine-ts/core": "2.7.0",
+    "@form-engine-ts/privacy": "2.7.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"