@form-engine-ts/react 2.6.0 → 2.8.0

package/README.md

@@ -116,3 +116,15 @@ 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.
+
+The Builder basic-settings section edits source `title` and `description` through the same policy-aware action pipeline.
+Submission confirmation slots receive the effective message, localized schema, and visible answers. An `onSubmit` result
+may provide `submissionId` and `submittedAt`, which Renderer copies into its receipt. Receipt stores support `getBatch`,
+and `useSubmissionReceipts` loads multiple form/version receipts for list and dashboard surfaces.

package/dist/index.cjs

@@ -23,10 +23,13 @@ __export(index_exports, {
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
+  createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType: () => resolveInitialFieldType,
+  submissionReceiptQueryKey: () => submissionReceiptQueryKey,
   useField: () => useField,
   useForm: () => useForm,
-  useFormBuilder: () => useFormBuilder
+  useFormBuilder: () => useFormBuilder,
+  useSubmissionReceipts: () => useSubmissionReceipts
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -971,6 +974,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}}",
@@ -1136,7 +1142,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;
@@ -1439,6 +1445,42 @@ function FormBuilder({
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Fieldset, { className: "form-engine-builder__controls", disabled: readOnly, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Section,
+          {
+            className: "form-engine-builder__basic-settings",
+            headingId: "builder-basic-settings-heading",
+            title: translate("builder.basicSettings"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.formTitle"),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.formDescription"),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  TextArea,
+                  {
+                    name: "description",
+                    rows: 3,
+                    value: schema.description ?? "",
+                    onChange: (value) => setSourceText({ kind: "form" }, "description", value)
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
         pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           Section,
           {
@@ -2225,6 +2267,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 +2321,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,21 +2334,24 @@ 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);
+        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]
@@ -2365,9 +2412,119 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/receipt.ts
+var import_react4 = require("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 = (0, import_react4.useMemo)(() => {
+    const parsed = JSON.parse(querySignature);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.flatMap(
+      (entry) => Array.isArray(entry) && typeof entry[0] === "string" && typeof entry[1] === "number" && Number.isSafeInteger(entry[1]) ? [{ formId: entry[0], formVersion: entry[1] }] : []
+    );
+  }, [querySignature]);
+  const [state, setState] = (0, import_react4.useState)({
+    receipts: /* @__PURE__ */ new Map(),
+    isLoading: stableQueries.length > 0,
+    error: null
+  });
+  (0, import_react4.useEffect)(() => {
+    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
 var import_core4 = require("@form-engine-ts/core");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function describedBy(field, error, helpId, errorId) {
   const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
@@ -2482,11 +2639,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 +2662,7 @@ function DefaultField(props) {
       "input",
       {
         ...ariaProps,
+        ...textConstraints,
         id: inputId,
         name: field.id,
         type: "number",
@@ -2543,6 +2707,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,31 +2747,62 @@ function ContextFormRenderer({
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
+  submissionGuards = [],
+  receiptStore,
   slots = {}
 }) {
   const form = useForm();
-  const prefix = (0, import_react4.useId)().replace(/:/g, "");
-  const formRef = (0, import_react4.useRef)(null);
-  const loadedDraftKey = (0, import_react4.useRef)(null);
-  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 prefix = (0, import_react5.useId)().replace(/:/g, "");
+  const formRef = (0, import_react5.useRef)(null);
+  const loadedDraftKey = (0, import_react5.useRef)(null);
+  const [draftRestored, setDraftRestored] = (0, import_react5.useState)(false);
+  const [currentPageIndex, setCurrentPageIndex] = (0, import_react5.useState)(0);
+  const [focusFieldId, setFocusFieldId] = (0, import_react5.useState)(null);
+  const [confirmation, setConfirmation] = (0, import_react5.useState)(null);
+  const [guardMessage, setGuardMessage] = (0, import_react5.useState)(null);
+  const [receipt, setReceipt] = (0, import_react5.useState)(null);
+  const [receiptLoaded, setReceiptLoaded] = (0, import_react5.useState)(receiptStore === void 0);
+  const rendererSubmissionInFlight = (0, import_react5.useRef)(false);
   const pages = form.schema.pages;
-  const visiblePageIndexes = (0, import_react4.useMemo)(
+  const visiblePageIndexes = (0, import_react5.useMemo)(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
     [form.pageVisibility, pages]
   );
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
-  (0, import_react4.useEffect)(() => {
+  const visibleValues = (0, import_react5.useMemo)(() => (0, import_core4.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  const interactionLocked = submitState === "confirming" || submitState === "submitting";
+  (0, import_react5.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_react5.useEffect)(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
       return;
     }
     if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   }, [currentPageIndex, pages, visiblePageIndexes]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (focusFieldId === null) return;
     const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
       (element) => element.dataset.fieldId === focusFieldId
@@ -2613,7 +2813,7 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
     if (loadedDraftKey.current === loadIdentity) return;
@@ -2625,7 +2825,7 @@ function ContextFormRenderer({
     form.restoreValues(draft.values);
     setDraftRestored(true);
   }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (form.submitStatus === "success") return;
     const timeout = globalThis.setTimeout(() => {
       onDraftSave?.(form.values);
@@ -2644,6 +2844,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 +2853,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 = (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 ?? 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__ */ (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: [
+      form.translate("form.alreadySubmitted"),
+      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
+    ] }) });
+  }
   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,10 +3016,11 @@ 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({
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Fragment, { children: slots.renderField({
           question: field,
           value: form.values[field.id],
           onChange: (value) => {
@@ -2742,6 +3032,19 @@ 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,
+      message: confirmation.message ?? form.translate("form.confirmSensitiveData"),
+      schema: form.schema,
+      visibleValues,
+      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 ?? form.translate("form.confirmSensitiveData") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
+    ] }),
     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 +3067,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 +3077,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()
     ] }),
@@ -2794,6 +3100,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 = {
@@ -2833,8 +3145,11 @@ function FormRenderer(props) {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,
+  submissionReceiptQueryKey,
   useField,
   useForm,
-  useFormBuilder
+  useFormBuilder,
+  useSubmissionReceipts
 });