@form-engine-ts/react 2.7.0 → 2.9.0

package/README.md

@@ -123,3 +123,14 @@ be created with the SSR-safe `createLocalStorageSubmissionReceiptStore`; `render
 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.
+
+Receipt persistence is best-effort: `onReceiptError` observes storage failures while the successful completion screen is
+preserved. Pass an SSR-safe `createLocalStorageSubmissionAttemptStore()` as `attemptStore` to reserve an ID immediately
+before submission. Renderer injects it as `attemptId` and `submissionId`, retains it after a failed request, promotes it
+to the receipt after success, and then clears the attempt. Custom receipt stores may omit `getBatch`; the hook falls back
+to concurrent `get` calls.

package/dist/index.cjs

@@ -23,14 +23,116 @@ __export(index_exports, {
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
+  createLocalStorageSubmissionAttemptStore: () => createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType: () => resolveInitialFieldType,
+  submissionReceiptQueryKey: () => submissionReceiptQueryKey,
   useField: () => useField,
   useForm: () => useForm,
-  useFormBuilder: () => useFormBuilder
+  useFormBuilder: () => useFormBuilder,
+  useSubmissionReceipts: () => useSubmissionReceipts
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/attempt.ts
+function attemptKey(namespace, formId, formVersion) {
+  return `${namespace}:${formId}:v${formVersion}`;
+}
+function browserStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function parseAttempt(serialized) {
+  try {
+    const value = JSON.parse(serialized);
+    if (typeof value !== "object" || value === null || !("attemptId" in value) || typeof value.attemptId !== "string" || value.attemptId.length === 0 || !("formId" in value) || typeof value.formId !== "string" || !("formVersion" in value) || typeof value.formVersion !== "number" || !Number.isSafeInteger(value.formVersion) || !("createdAt" in value) || typeof value.createdAt !== "string" || !Number.isFinite(Date.parse(value.createdAt))) {
+      return null;
+    }
+    return {
+      attemptId: value.attemptId,
+      formId: value.formId,
+      formVersion: value.formVersion,
+      createdAt: value.createdAt
+    };
+  } catch {
+    return null;
+  }
+}
+function defaultAttemptId() {
+  const randomUuid = globalThis.crypto?.randomUUID;
+  if (typeof randomUuid === "function") return randomUuid.call(globalThis.crypto);
+  return `attempt-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function createLocalStorageSubmissionAttemptStore(options = {}) {
+  const namespace = options.namespace ?? "form_engine_attempt";
+  if (namespace.trim().length === 0) throw new TypeError("Attempt namespace must not be empty.");
+  const memory = /* @__PURE__ */ new Map();
+  const inFlight = /* @__PURE__ */ new Map();
+  const get = async (formId, formVersion) => {
+    const key = attemptKey(namespace, formId, formVersion);
+    const remembered = memory.get(key);
+    if (remembered !== void 0) return remembered;
+    const storage = browserStorage();
+    if (storage === null) return null;
+    try {
+      const serialized = storage.getItem(key);
+      if (serialized === null) return null;
+      const attempt = parseAttempt(serialized);
+      if (attempt === null || attempt.formId !== formId || attempt.formVersion !== formVersion) return null;
+      memory.set(key, attempt);
+      return attempt;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    get,
+    async getOrCreate(formId, formVersion, idFactory = defaultAttemptId) {
+      const key = attemptKey(namespace, formId, formVersion);
+      const pending = inFlight.get(key);
+      if (pending !== void 0) return pending;
+      const create = (async () => {
+        const existing = await get(formId, formVersion);
+        if (existing !== null) return existing;
+        const attemptId = idFactory();
+        if (typeof attemptId !== "string" || attemptId.trim().length === 0) {
+          throw new TypeError("Attempt idFactory must return a non-empty string.");
+        }
+        const attempt = {
+          attemptId,
+          formId,
+          formVersion,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        memory.set(key, attempt);
+        try {
+          browserStorage()?.setItem(key, JSON.stringify(attempt));
+        } catch {
+        }
+        return attempt;
+      })();
+      inFlight.set(key, create);
+      try {
+        return await create;
+      } finally {
+        inFlight.delete(key);
+      }
+    },
+    async clear(formId, formVersion) {
+      const key = attemptKey(namespace, formId, formVersion);
+      memory.delete(key);
+      try {
+        browserStorage()?.removeItem(key);
+      } catch {
+      }
+    }
+  };
+}
+
 // src/builder.tsx
 var import_core2 = require("@form-engine-ts/core");
 var import_react2 = require("react");
@@ -972,6 +1074,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}}",
@@ -1137,7 +1242,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;
@@ -1440,6 +1545,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,
           {
@@ -2279,7 +2420,7 @@ function FormProvider({
     setSubmitError(null);
   }, [initialValues]);
   const submit = (0, import_react3.useCallback)(
-    async (beforeSubmit) => {
+    async (beforeSubmit, prepareSubmission) => {
       if (submissionInFlight.current) return { status: "cancelled" };
       const validation = (0, import_core3.validateAnswers)(validSchema, values);
       if (!validation.valid) {
@@ -2300,10 +2441,11 @@ function FormProvider({
           setSubmitStatus("idle");
           return { status: "cancelled" };
         }
-        await onSubmit(visibleValues);
+        const submissionValues = prepareSubmission === void 0 ? visibleValues : await prepareSubmission(visibleValues);
+        const response = await onSubmit(submissionValues);
         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);
@@ -2372,10 +2514,14 @@ function useField(fieldId) {
 }
 
 // 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() {
+function browserStorage2() {
   if (typeof window === "undefined") return null;
   try {
     return window.localStorage;
@@ -2403,35 +2549,90 @@ function parseReceipt(serialized) {
 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 = browserStorage2();
+    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 {
-    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;
-      }
+    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();
+      const storage = browserStorage2();
       if (storage === null) return;
       storage.setItem(receiptKey(namespace, receipt.formId, receipt.formVersion), JSON.stringify(receipt));
     },
     async remove(formId, formVersion) {
-      const storage = browserStorage();
+      const storage = browserStorage2();
       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 }));
+    const load = store.getBatch?.(stableQueries) ?? Promise.all(stableQueries.map((query) => store.get(query.formId, query.formVersion))).then(
+      (receipts) => new Map(
+        receipts.flatMap(
+          (receipt) => receipt === null ? [] : [[submissionReceiptQueryKey(receipt.formId, receipt.formVersion), receipt]]
+        )
+      )
+    );
+    void load.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(
@@ -2656,31 +2857,34 @@ function ContextFormRenderer({
   onDraftSave,
   submissionGuards = [],
   receiptStore,
+  attemptStore,
+  onReceiptError,
   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 [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 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);
+  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_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     let active = true;
     if (receiptStore === void 0) {
       setReceipt(null);
@@ -2701,14 +2905,14 @@ function ContextFormRenderer({
       active = false;
     };
   }, [form.schema.id, form.schema.version, receiptStore]);
-  (0, import_react4.useEffect)(() => {
+  (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
@@ -2719,7 +2923,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;
@@ -2731,7 +2935,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);
@@ -2764,7 +2968,7 @@ function ContextFormRenderer({
     let confirmationMessage;
     let requiresConfirmation = false;
     for (const guard of guards) {
-      const result = await guard(form.schema, (0, import_core4.selectVisibleAnswers)(form.schema, form.values));
+      const result = await guard(form.schema, visibleValues);
       if (result.status === "allow") continue;
       findings.push(...result.findings);
       if (result.status === "block") {
@@ -2794,7 +2998,7 @@ function ContextFormRenderer({
       try {
         const guardResult = await runSubmissionGuards(submissionGuards);
         if (guardResult.status === "block") {
-          setGuardMessage(guardResult.message ?? "Submission blocked because sensitive data was detected.");
+          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
           return { status: "cancelled" };
         }
         if (guardResult.status === "confirm") {
@@ -2812,7 +3016,18 @@ function ContextFormRenderer({
     setGuardMessage(null);
     rendererSubmissionInFlight.current = true;
     try {
-      const result = await form.submit(beforeSubmit);
+      let submissionAttempt;
+      const result = await form.submit(
+        beforeSubmit,
+        attemptStore === void 0 ? void 0 : async (values) => {
+          submissionAttempt = await attemptStore.getOrCreate(form.schema.id, form.schema.version);
+          return {
+            ...values,
+            attemptId: submissionAttempt.attemptId,
+            submissionId: submissionAttempt.attemptId
+          };
+        }
+      );
       if (result.status === "invalid") {
         const invalidPageIndex = pages?.findIndex(
           (page) => firstInvalidFieldId === void 0 ? false : page.questionIds.includes(firstInvalidFieldId)
@@ -2823,13 +3038,30 @@ function ContextFormRenderer({
       }
       if (result.status !== "success") return result;
       if (receiptStore !== void 0) {
+        const response = result.response;
+        const submissionId = response?.submissionId ?? submissionAttempt?.attemptId;
         const storedReceipt = {
           formId: form.schema.id,
           formVersion: form.schema.version,
-          submittedAt: (/* @__PURE__ */ new Date()).toISOString()
+          submittedAt: response?.submittedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+          ...submissionId === void 0 ? {} : { submissionId }
         };
-        await receiptStore.save(storedReceipt);
-        setReceipt(storedReceipt);
+        try {
+          await receiptStore.save(storedReceipt);
+          setReceipt(storedReceipt);
+        } catch (cause) {
+          const error = cause instanceof Error ? cause : new Error(String(cause));
+          try {
+            onReceiptError?.(error, storedReceipt);
+          } catch {
+          }
+        }
+      }
+      if (attemptStore !== void 0 && submissionAttempt !== void 0) {
+        try {
+          await attemptStore.clear(form.schema.id, form.schema.version);
+        } catch {
+        }
       }
       if (autoSaveKey !== void 0 && typeof globalThis.localStorage !== "undefined") {
         globalThis.localStorage.removeItem(autoSaveKey);
@@ -2869,8 +3101,8 @@ function ContextFormRenderer({
       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" })
+      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: [
@@ -2924,7 +3156,7 @@ function ContextFormRenderer({
         ...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) => {
@@ -2939,12 +3171,15 @@ function ContextFormRenderer({
     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 ?? "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" })
+      /* @__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,
@@ -3001,6 +3236,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 = {
@@ -3040,9 +3281,12 @@ function FormRenderer(props) {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,
+  submissionReceiptQueryKey,
   useField,
   useForm,
-  useFormBuilder
+  useFormBuilder,
+  useSubmissionReceipts
 });