@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -15,6 +15,7 @@
  */
 import { waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, type Knobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
 import {
   type PanelWidthMode,
@@ -364,3 +365,83 @@ describe("FloatingPanel drawn radius (MPO-129)", () => {
     expect(measureDrawnRadius(wrapper)).toBeNull();
   });
 });
+
+/**
+ * CONTAINER-CAP (MPO-56). Part 2b files floating panels under DG-RAD-04: the
+ * class value on the panel's own padding is the ceiling, and the trigger's
+ * drawn arc (above) only ever lowers it.
+ */
+function RadiusHarness({ open, compact }: { open: boolean; compact?: boolean }) {
+  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false, compact });
+  return (
+    <div
+      data-testid="radius-trigger"
+      data-radius={String(panel.dropdownRadius)}
+      ref={panel.setReferenceRef}
+    />
+  );
+}
+
+function panelRadius(overrides: Partial<Knobs>, compact?: boolean) {
+  const result = renderWithProviders(
+    <Preset overrides={overrides}>
+      <RadiusHarness open={false} compact={compact} />
+    </Preset>,
+  );
+  const radius = result.getByTestId("radius-trigger").getAttribute("data-radius");
+  result.unmount();
+  return radius;
+}
+
+describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-56)", () => {
+  it("takes the token while it fits the padding", () => {
+    expect(panelRadius({ borderRadius: "none" })).toBe("0");
+    expect(panelRadius({ borderRadius: "medium", space: "medium" })).toBe("9");
+    expect(panelRadius({ borderRadius: "large", space: "medium" })).toBe("16");
+  });
+
+  it("caps full at the padding, and large under space small", () => {
+    expect(panelRadius({ borderRadius: "full", space: "medium" })).toBe("18");
+    expect(panelRadius({ borderRadius: "full", space: "large" })).toBe("32");
+    expect(panelRadius({ borderRadius: "large", space: "small" })).toBe("13");
+  });
+
+  it("caps at the compact step's padding for a compact panel", () => {
+    expect(panelRadius({ borderRadius: "full", space: "medium" }, true)).toBe("13");
+    expect(panelRadius({ borderRadius: "large", space: "medium" }, true)).toBe("13");
+  });
+
+  it("keeps a smaller drawn trigger arc once open, never a larger one", async () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <RadiusHarness open={false} />
+      </Preset>,
+    );
+    const anchor = result.getByTestId("radius-trigger");
+    mockRect(anchor, { x: 0, y: 0, width: 240, height: 20 });
+    Object.assign(anchor.style, {
+      borderTopLeftRadius: "10px",
+      backgroundColor: "rgb(255, 255, 255)",
+    });
+    result.rerender(
+      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <RadiusHarness open />
+      </Preset>,
+    );
+    await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("10"));
+
+    Object.assign(anchor.style, { borderTopLeftRadius: "50px" });
+    mockRect(anchor, { x: 0, y: 0, width: 240, height: 44 });
+    result.rerender(
+      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <RadiusHarness open={false} />
+      </Preset>,
+    );
+    result.rerender(
+      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <RadiusHarness open />
+      </Preset>,
+    );
+    await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("18"));
+  });
+});

package/src/FloatingPanel/useFloatingPanel.ts

@@ -1,6 +1,11 @@
 import type { Middleware, Placement } from "@floating-ui/react";
 import { autoUpdate, offset, shift, size, useFloating } from "@floating-ui/react";
-import { OVERLAY_ATTACH_GAP, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  OVERLAY_ATTACH_GAP,
+  radiusStopFromToken,
+  resolveRadiusClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import {
   type Dispatch,
   type RefObject,
@@ -11,7 +16,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { getTokenValue } from "tamagui";
 import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
+import { containsAcrossPanels } from "../shared/panelPortal";
 
 // React Native defines a `window` global without DOM event methods, so a bare
 // `typeof window` check is not enough — the floating cores mount this hook on
@@ -91,6 +98,12 @@ export interface UseFloatingPanelOptions {
    * An explicit `widthMode` always wins.
    */
   fitContent?: boolean;
+  /**
+   * The panel's content sits one density step below the page (LC-73), as
+   * the calendar does. Its padding, and so its CONTAINER-CAP radius, resolve
+   * at the compact space step.
+   */
+  compact?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -130,9 +143,9 @@ export interface UseFloatingPanelReturn {
   setMounted: Dispatch<SetStateAction<boolean>>;
 
   /**
-   * Panel corner radius: the trigger's measured drawn radius (px) once open
-   * — arcs must coincide with the trigger at the shared corner region — or
-   * the clamped radius token before measurement / off-DOM.
+   * Panel corner radius: CONTAINER-CAP on the panel's own padding (DG-RAD-04),
+   * lowered to the trigger's measured drawn radius once open when that arc
+   * is smaller, so the panel never rounds past the control it hangs from.
    */
   dropdownRadius: string | number;
   hasBorder: boolean;
@@ -211,16 +224,28 @@ export function useFloatingPanel({
   wheelGrowRef,
   widthMode: widthModeProp,
   fitContent,
+  compact,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ compact });
   const hasBorder = knobProps.borderRadius.borderWidth > 0;
-  // Radius equality (see measureDrawnRadius): once the trigger has been
-  // measured on open, the panel wears the trigger's drawn radius in px so
-  // the arcs coincide at the shared corner region; the clamped token is
-  // only the pre-measurement / non-DOM fallback.
+  // Part 2b files floating panels under CONTAINER-CAP, so the class value is
+  // the ceiling. Below it the panel keeps the trigger's drawn arc (see
+  // measureDrawnRadius) once measured on open.
   const [measuredRadius, setMeasuredRadius] = useState<number | null>(null);
-  const dropdownRadius = measuredRadius ?? clampDropdownRadius(knobProps.borderRadius.borderRadius);
+  const radiusStop = radiusStopFromToken(knobProps.borderRadius.borderRadius);
+  const panelPadPx = getTokenValue(
+    knobProps.panelPadding.padding as Parameters<typeof getTokenValue>[0],
+    "space",
+  );
+  const radiusCap =
+    radiusStop && typeof panelPadPx === "number"
+      ? resolveRadiusClass("CONTAINER-CAP", radiusStop, { paddingPx: panelPadPx })
+      : undefined;
+  const dropdownRadius =
+    radiusCap === undefined
+      ? (measuredRadius ?? clampDropdownRadius(knobProps.borderRadius.borderRadius))
+      : Math.min(measuredRadius ?? radiusCap, radiusCap);
 
   // ── State ─────────────────────────────────────────────────
 
@@ -399,16 +424,18 @@ export function useFloatingPanel({
         if (atTop || atBottom) e.preventDefault();
         return;
       }
+      // A nested panel is portaled outside this one; its own lock decides.
+      if (containsAcrossPanels(floatingEl, e.target)) return;
       e.preventDefault();
     };
     const preventKeyScroll = (e: KeyboardEvent) => {
-      if (floatingEl.contains(e.target as Node)) return;
+      if (containsAcrossPanels(floatingEl, e.target)) return;
       if (["ArrowDown", "ArrowUp", "Space", "PageDown", "PageUp", "Home", "End"].includes(e.code)) {
         e.preventDefault();
       }
     };
     const preventTouchScroll = (e: TouchEvent) => {
-      if (floatingEl.contains(e.target as Node)) return;
+      if (containsAcrossPanels(floatingEl, e.target)) return;
       e.preventDefault();
     };
 

package/src/FloatingPanel/viewportHydration.spec.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { act, useState } from "react";
+import { renderToString } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { TestProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Select } from "../fields/Select";
+import { Combobox } from "../fields/Combobox";
+import { FloatingPanel, useViewportGtSm } from "./index";
+
+const options = ["Alpha", "Beta", "Gamma", "Delta"].map((label) => ({ label, value: label }));
+function Fixture({ kind }: { kind: string }) {
+  const [open, setOpen] = useState(false);
+  const wide = useViewportGtSm();
+  const [value, setValue] = useState("Alpha");
+  return (
+    <TestProviders>
+      <span data-wide={String(wide)} />
+      <output>{value}</output>
+      {kind === "Select" ? (
+        <Select
+          aria-label="Choice"
+          options={options}
+          value={value}
+          onValueChange={(next) => setValue(String(next))}
+        />
+      ) : kind === "Combobox" ? (
+        <Combobox
+          aria-label="Choice"
+          options={options}
+          value={value}
+          onValueChange={(next) => setValue(String(next))}
+        />
+      ) : (
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          trigger={<button type="button">Open</button>}
+        >
+          <span>Panel contents</span>
+        </FloatingPanel>
+      )}
+    </TestProviders>
+  );
+}
+
+describe("viewport hydration", () => {
+  it.each(
+    ["Select", "Combobox", "FloatingPanel"].flatMap((kind) =>
+      [390, 640, 641, 1200].map((width) => ({ kind, width })),
+    ),
+  )("hydrates $kind at $width pixels before adapting", async ({ kind, width }) => {
+    const browserWindow = window;
+    const scrollTo = vi.spyOn(browserWindow, "scrollTo").mockImplementation(() => {});
+    Object.defineProperty(browserWindow, "innerWidth", {
+      configurable: true,
+      value: width,
+      writable: true,
+    });
+    let html: string;
+    vi.stubGlobal("window", undefined);
+    try {
+      html = renderToString(<Fixture kind={kind} />);
+    } finally {
+      vi.stubGlobal("window", browserWindow);
+    }
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    document.body.append(container);
+    const errors: unknown[] = [];
+    const spy = vi.spyOn(console, "error").mockImplementation((...args) => errors.push(args));
+    let root: ReturnType<typeof hydrateRoot> | undefined;
+    try {
+      await act(async () => {
+        root = hydrateRoot(container, <Fixture kind={kind} />, {
+          onRecoverableError: (error) => errors.push(error),
+        });
+      });
+      expect(
+        errors.filter((error) => /hydration|hydrated|didn't match/i.test(String(error))),
+      ).toEqual([]);
+      expect(container.querySelector("[data-wide]")?.getAttribute("data-wide")).toBe(
+        String(width > 640),
+      );
+      if (width === 1200 && kind !== "FloatingPanel") {
+        const trigger = container.querySelector('[role="combobox"]')!;
+        await act(async () => {
+          fireEvent.mouseDown(trigger, { detail: 1 });
+          fireEvent.mouseUp(trigger, { detail: 1 });
+          fireEvent.click(trigger, { detail: 1 });
+        });
+        await waitFor(() =>
+          expect(document.querySelectorAll('[role="option"]').length).toBeGreaterThan(0),
+        );
+        const beta = [...document.querySelectorAll('[role="option"]')].find((option) =>
+          option.textContent?.includes("Beta"),
+        )!;
+        await act(async () => {
+          fireEvent.mouseDown(beta, { detail: 1 });
+          fireEvent.mouseUp(beta, { detail: 1 });
+          fireEvent.click(beta, { detail: 1 });
+        });
+        await waitFor(() => expect(container.querySelector("output")?.textContent).toBe("Beta"));
+      }
+      await act(async () => {
+        window.innerWidth = 390;
+        fireEvent(window, new Event("resize"));
+      });
+      expect(container.querySelector("[data-wide]")?.getAttribute("data-wide")).toBe("false");
+    } finally {
+      await act(async () => root?.unmount());
+      spy.mockRestore();
+      scrollTo.mockRestore();
+      container.remove();
+    }
+  });
+});

package/src/Form/index.tsx

@@ -20,6 +20,7 @@ import {
 import { ContextualSaveBar, type ContextualSaveBarProps } from "../ContextualSaveBar";
 import { ErrorSummary, collectFormFieldErrors, type ErrorSummaryItem } from "../ErrorSummary";
 import { RequiredMarkingContext, mapHouseRequiredMarking } from "../requiredMarking";
+import { getFormSubmission } from "./submissionController";
 import { type FormValidateOn, resolveEffectiveValidateOn } from "./validateOn";
 
 export type { FormValidateOn } from "./validateOn";
@@ -276,7 +277,7 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
       // Guard against double-fire while a submission is already in flight
       if (form.state.isSubmitting) return;
       // Trigger Tanstack Form's handleSubmit which calls our onSubmit callback
-      void form.handleSubmit();
+      void getFormSubmission(form).submit();
     },
     [form],
   );

package/src/Form/submission.spec.tsx

@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "../Button";
+import { Input } from "../fields/Input";
+import { Form, useFormContext } from "./index";
+
+const refusal = "The record changed. Refresh and retry.";
+
+describe("shared form submission outcome", () => {
+  it.each(["html", "action", "save", "shortcut"] as const)(
+    "%s submission exposes failure, retains edits and can retry without changing its success policy",
+    async (route) => {
+      const submit = vi.fn().mockRejectedValueOnce(new Error(refusal)).mockResolvedValue(undefined);
+      const saved = vi.fn();
+      let isDirty = () => false;
+      function DirtyProbe() {
+        const form = useFormContext();
+        isDirty = () => form.state.isDirty;
+        return null;
+      }
+      const view = renderWithProviders(
+        <Form
+          formOptions={{ defaultValues: { name: "Original" } }}
+          onSubmit={submit}
+          saveBar={{ forceVisible: true, onSaved: saved }}
+        >
+          <DirtyProbe />
+          <Input name="name" label="Name" />
+          <button type="submit">Submit HTML</button>
+          <Button action="submit">Submit action</Button>
+        </Form>,
+      );
+      fireEvent.change(view.getByLabelText("Name"), { target: { value: "Edited" } });
+      const activate = () => {
+        if (route === "shortcut") fireEvent.keyDown(document, { key: "s", ctrlKey: true });
+        else
+          fireEvent.click(
+            view.getByRole("button", {
+              name:
+                route === "html" ? "Submit HTML" : route === "action" ? "Submit action" : "Save",
+            }),
+          );
+      };
+      await act(async () => activate());
+      await waitFor(() => expect(view.getByText(/Couldn't save/).textContent).toContain(refusal));
+      expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Edited");
+      expect(submit).toHaveBeenCalledTimes(1);
+      expect(saved).not.toHaveBeenCalled();
+      await act(async () => activate());
+      await waitFor(() => expect(submit).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(view.queryByText(/Couldn't save/)).toBeNull());
+      expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Edited");
+      expect(saved).toHaveBeenCalledTimes(route === "save" || route === "shortcut" ? 1 : 0);
+      expect(isDirty()).toBe(route === "html" || route === "action");
+    },
+  );
+
+  it("allows only one transport call when HTML, action and Save activate together", async () => {
+    let finish!: () => void;
+    const submit = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const saved = vi.fn();
+    const view = renderWithProviders(
+      <Form onSubmit={submit} saveBar={{ forceVisible: true, onSaved: saved }}>
+        <button type="submit">Submit HTML</button>
+        <Button action="submit">Submit action</Button>
+      </Form>,
+    );
+    await act(async () => {
+      fireEvent.click(view.getByRole("button", { name: "Submit HTML" }));
+      fireEvent.click(view.getByRole("button", { name: "Submit action" }));
+      fireEvent.click(view.getByRole("button", { name: "Save" }));
+      fireEvent.keyDown(document, { key: "s", ctrlKey: true });
+    });
+    await waitFor(() => expect(submit).toHaveBeenCalledTimes(1));
+    await act(async () => finish());
+    expect(submit).toHaveBeenCalledTimes(1);
+    expect(saved).not.toHaveBeenCalled();
+  });
+
+  it("routes explicit form targets and standalone actions to the matching form only", async () => {
+    const firstSubmit = vi.fn();
+    const secondSubmit = vi.fn().mockRejectedValue(new Error(refusal));
+    function Harness() {
+      const first = useForm({
+        defaultValues: { name: "First" } as Record<string, unknown>,
+        onSubmit: firstSubmit,
+      });
+      const second = useForm({
+        defaultValues: { name: "Second" } as Record<string, unknown>,
+        onSubmit: secondSubmit,
+      });
+      return (
+        <>
+          <Form form={first} saveBar={{ forceVisible: true }} testID="first">
+            <Button action="submit" form={second}>
+              Target second
+            </Button>
+          </Form>
+          <Form form={second} saveBar={{ forceVisible: true }} testID="second">
+            <Input name="name" label="Second name" />
+          </Form>
+          <Button action="submit" form={second}>
+            Standalone submit
+          </Button>
+        </>
+      );
+    }
+    const view = renderWithProviders(<Harness />);
+    await act(async () => fireEvent.click(view.getByRole("button", { name: "Target second" })));
+    await waitFor(() =>
+      expect(within(view.getByTestId("second")).getByText(/Couldn't save/)).toBeTruthy(),
+    );
+    expect(within(view.getByTestId("first")).queryByText(/Couldn't save/)).toBeNull();
+    await act(async () => fireEvent.click(view.getByRole("button", { name: "Standalone submit" })));
+    await waitFor(() => expect(secondSubmit).toHaveBeenCalledTimes(2));
+    expect(firstSubmit).not.toHaveBeenCalled();
+  });
+
+  it("does not mark a form-level validation refusal saved", async () => {
+    const submit = vi.fn();
+    const saved = vi.fn();
+    const view = renderWithProviders(
+      <Form
+        formOptions={{
+          defaultValues: { name: "Original" },
+          validators: { onSubmit: () => "Review the form" },
+        }}
+        onSubmit={submit}
+        saveBar={{ forceVisible: true, onSaved: saved }}
+      >
+        <Input name="name" label="Name" />
+      </Form>,
+    );
+    fireEvent.change(view.getByLabelText("Name"), { target: { value: "Edited" } });
+    await act(async () => fireEvent.click(view.getByRole("button", { name: "Save" })));
+    expect(submit).not.toHaveBeenCalled();
+    expect(saved).not.toHaveBeenCalled();
+    expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Edited");
+  });
+});

package/src/Form/submissionController.spec.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from "vitest";
+import { getFormSubmission } from "./submissionController";
+
+describe("submission controller", () => {
+  it("shares one guarded attempt per form and keeps other forms independent", async () => {
+    let finish!: () => void;
+    const form = {
+      state: { isSubmitting: false, isSubmitSuccessful: false },
+      handleSubmit: vi.fn(async () => {
+        await new Promise<void>((resolve) => {
+          finish = resolve;
+        });
+        form.state.isSubmitSuccessful = true;
+      }),
+    };
+    const other = {
+      state: { isSubmitting: false, isSubmitSuccessful: false },
+      handleSubmit: vi.fn(async () => {}),
+    };
+    const controller = getFormSubmission(form);
+    expect(getFormSubmission(form)).toBe(controller);
+    expect(getFormSubmission(other)).not.toBe(controller);
+    const first = controller.submit();
+    const duplicate = controller.submit();
+    await Promise.resolve();
+    expect(form.handleSubmit).toHaveBeenCalledTimes(1);
+    expect(await duplicate).toBe("busy");
+    finish();
+    expect(await first).toBe("success");
+    expect(other.handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("captures sync throws, exposes stable reactive snapshots and unsubscribes", async () => {
+    const form = {
+      state: { isSubmitting: false, isSubmitSuccessful: false },
+      handleSubmit: vi.fn(() => {
+        throw new Error("Service unavailable");
+      }),
+    };
+    const controller = getFormSubmission(form);
+    const initial = controller.getSnapshot();
+    expect(controller.getSnapshot()).toBe(initial);
+    const listener = vi.fn();
+    const unsubscribe = controller.subscribe(listener);
+    expect(await controller.submit()).toBe("failed");
+    expect(controller.getSnapshot().error).toBe("Service unavailable");
+    expect(controller.getSnapshot()).toBe(controller.getSnapshot());
+    expect(listener).toHaveBeenCalled();
+    unsubscribe();
+    listener.mockClear();
+    controller.clearError();
+    expect(controller.getSnapshot().error).toBeNull();
+    expect(listener).not.toHaveBeenCalled();
+    expect(await controller.submit()).toBe("failed");
+    expect(form.handleSubmit).toHaveBeenCalledTimes(2);
+  });
+
+  it("clears a prior refusal when retry starts and does not treat validation as success", async () => {
+    const form = {
+      state: { isSubmitting: false, isSubmitSuccessful: false },
+      handleSubmit: vi
+        .fn<() => Promise<void>>()
+        .mockRejectedValueOnce(new Error("Try again"))
+        .mockResolvedValue(undefined),
+    };
+    const controller = getFormSubmission(form);
+    expect(await controller.submit()).toBe("failed");
+    const retry = controller.submit();
+    expect(controller.getSnapshot().error).toBeNull();
+    expect(await retry).toBe("invalid");
+    expect(form.handleSubmit).toHaveBeenCalledTimes(2);
+  });
+});

package/src/Form/submissionController.ts

@@ -0,0 +1,59 @@
+interface SubmissionForm {
+  handleSubmit(): Promise<void>;
+  state: { isSubmitting: boolean; isSubmitSuccessful: boolean };
+}
+
+type SubmissionOutcome = "success" | "invalid" | "failed" | "busy";
+type SubmissionSnapshot = Readonly<{ error: string | null; submitting: boolean }>;
+
+const controllers = new WeakMap<SubmissionForm, ReturnType<typeof createSubmissionController>>();
+
+/** Keep UI submission failures shared without changing the caller's FormApi. */
+export function getFormSubmission(form: SubmissionForm) {
+  let controller = controllers.get(form);
+  if (!controller) {
+    controller = createSubmissionController(form);
+    controllers.set(form, controller);
+  }
+  return controller;
+}
+
+function createSubmissionController(form: SubmissionForm) {
+  let snapshot: SubmissionSnapshot = { error: null, submitting: false };
+  const listeners = new Set<() => void>();
+
+  const update = (error: string | null, submitting = snapshot.submitting) => {
+    if (snapshot.error === error && snapshot.submitting === submitting) return;
+    snapshot = { error, submitting };
+    listeners.forEach((listener) => listener());
+  };
+  const reportError = (error: unknown) => {
+    const text = error instanceof Error ? error.message : String(error);
+    update(text || "network unreachable");
+  };
+
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    clearError: () => update(null),
+    reportError,
+    submit(): Promise<SubmissionOutcome> {
+      // Set the guard before invoking user code, including synchronous throws.
+      if (snapshot.submitting || form.state.isSubmitting) return Promise.resolve("busy");
+      update(null, true);
+      return Promise.resolve()
+        .then(() => form.handleSubmit())
+        .then((): SubmissionOutcome => (form.state.isSubmitSuccessful ? "success" : "invalid"))
+        .catch((error): SubmissionOutcome => {
+          reportError(error);
+          return "failed";
+        })
+        .finally(() => update(snapshot.error, false));
+    },
+  };
+}

package/src/Form/submissionDiscard.spec.tsx

@@ -0,0 +1,41 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { expect, it } from "vitest";
+import { Button } from "../Button";
+import { Input } from "../fields/Input";
+import { Form } from "./index";
+
+const refusal = "The record changed. Refresh and retry.";
+
+it("keeps a refusal while editing, then clears it on discard or reset", async () => {
+  const view = renderWithProviders(
+    <Form
+      formOptions={{ defaultValues: { name: "Original" } }}
+      onSubmit={async () => {
+        throw new Error(refusal);
+      }}
+      saveBar={{ forceVisible: true }}
+    >
+      <Input name="name" label="Name" />
+      <Button action="submit">Submit action</Button>
+      <Button action="reset">Reset form</Button>
+    </Form>,
+  );
+  fireEvent.change(view.getByLabelText("Name"), { target: { value: "Edited" } });
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit action" })));
+  await waitFor(() => expect(view.getByText(/Couldn't save/)).toBeTruthy());
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Discard" })));
+  const keep = await view.findByRole("button", { name: "Keep editing" });
+  await act(async () => fireEvent.click(keep));
+  expect(view.getByText(/Couldn't save/)).toBeTruthy();
+  expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Edited");
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Discard" })));
+  const confirm = await view.findByRole("button", { name: "Discard changes" });
+  await act(async () => fireEvent.click(confirm));
+  await waitFor(() => expect(view.queryByText(/Couldn't save/)).toBeNull());
+  expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Original");
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit action" })));
+  await waitFor(() => expect(view.getByText(/Couldn't save/)).toBeTruthy());
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Reset form" })));
+  await waitFor(() => expect(view.queryByText(/Couldn't save/)).toBeNull());
+});