@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/AdaptivePopup/index.tsx

@@ -4,7 +4,17 @@ import {
   ensureFocusVisibleRing,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { Dialog, isWeb, Sheet, Unspaced, useMedia, View, VisuallyHidden, XStack, YStack } from "tamagui";
+import {
+  Dialog,
+  isWeb,
+  Sheet,
+  Unspaced,
+  useMedia,
+  View,
+  VisuallyHidden,
+  XStack,
+  YStack,
+} from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
@@ -83,14 +93,6 @@ export function pickAdaptivePopupFace(options: {
   return "dialog";
 }
 
-/** Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1. */
-const overlayElevationShadow = {
-  shadowColor: "rgba(0,0,0,0.12)",
-  shadowOffset: { width: 0, height: 12 },
-  shadowOpacity: 1,
-  shadowRadius: 24,
-} as const;
-
 function readRtl(): boolean {
   return (
     isWeb &&
@@ -389,7 +391,6 @@ export function AdaptivePopup({
             {...drawerRadius}
             elevate={false}
             elevation={knobProps.elevatedSurface.elevation}
-            {...overlayElevationShadow}
             backgroundColor="$background"
             {...overlayFrameFocus}
             transition={knobProps.transition}

package/src/Button/Button.borderLadder.spec.tsx

@@ -0,0 +1,82 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-134: the borderWidth knob reaches an outlined Button. The frame's
+ * `outlined` styled variant used to hard-set `borderWidth: 1`, which beat
+ * `borderWidth={resolvedBorderWidth}` on Tamagui prop order and pinned every
+ * outlined Button at 1px while a filled one walked 0 / 0.5 / 1 / 2. The
+ * resolver owns the floor (DG-BOR-01): `none` under `fillStyle: outlined`
+ * is the 0.5 hairline, and `large` is 2 for filled and outlined alike, so the
+ * two keep the box parity the frame's comment promises.
+ *
+ * jsdom cannot cascade Tamagui CSS — assertions read the atomic border-width
+ * class the FRAME emits, the same idiom as Button.filledBorder.spec.tsx.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const STOPS = ["none", "small", "medium", "large"] as const;
+
+function widthAtoms(): string[] {
+  return String(screen.getByRole("button").className || "")
+    .split(/\s+/)
+    .filter((c) => c.startsWith("_btw-"))
+    .sort();
+}
+
+function renderAt(stop: (typeof STOPS)[number], outlined: boolean): string[] {
+  renderWithProviders(
+    <Preset overrides={{ fillStyle: outlined ? "outlined" : "filled", borderWidth: stop }}>
+      <Button>Restart</Button>
+    </Preset>,
+  );
+  const atoms = widthAtoms();
+  cleanup();
+  return atoms;
+}
+
+describe("Button borderWidth ladder (MPO-134)", () => {
+  it("outlined walks the ladder: hairline at none and small, 1 at medium, 2 at large", () => {
+    expect(renderAt("none", true)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("small", true)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("medium", true)).toEqual(["_btw-1px"]);
+    expect(renderAt("large", true)).toEqual(["_btw-2px"]);
+  });
+
+  it("outlined at none and at large no longer emit the same edge", () => {
+    expect(renderAt("none", true)).not.toEqual(renderAt("large", true));
+  });
+
+  it("filled walks the same ladder, chromeless at none", () => {
+    expect(renderAt("none", false)).toEqual(["_btw-0px"]);
+    expect(renderAt("small", false)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("medium", false)).toEqual(["_btw-1px"]);
+    expect(renderAt("large", false)).toEqual(["_btw-2px"]);
+  });
+
+  it("the outlined prop and a filled sibling share one width at every stop", () => {
+    for (const stop of STOPS) {
+      renderWithProviders(
+        <Preset overrides={{ borderWidth: stop }}>
+          <Button outlined>Save draft</Button>
+        </Preset>,
+      );
+      const outlined = widthAtoms();
+      cleanup();
+      renderWithProviders(
+        <Preset overrides={{ borderWidth: stop }}>
+          <Button>Publish</Button>
+        </Preset>,
+      );
+      const filled = widthAtoms();
+      cleanup();
+      expect(outlined, stop).toEqual(filled);
+    }
+  });
+});

package/src/Button/Button.labelInk.spec.tsx

@@ -185,7 +185,10 @@ describe("Button MPO-40 outlined intent label ink", () => {
         ),
       ]),
     );
-    expect(measured, `light.color2 is ${ground}`).toEqual({
+    const displayed = Object.fromEntries(
+      Object.entries(measured).map(([intent, ratio]) => [intent, Math.round(ratio * 100) / 100]),
+    );
+    expect(displayed, `light.color2 is ${ground}`).toEqual({
       error: 4.95,
       warning: 4.56,
       success: 4.55,

package/src/Button/Button.lc71.spec.tsx

@@ -94,6 +94,23 @@ describe("Button nested scale (LC-73)", () => {
     expect(frame.getAttribute("data-mp-press-slop")).toBe("6");
     expect(frame.getAttribute("style") ?? "").not.toMatch(/width:\s*44px/);
   });
+
+  it("pads a nested circle 0, so its label fits the 32px box (MPO-371)", () => {
+    renderWithProviders(
+      <>
+        <Button nested circular aria-label="day">
+          12
+        </Button>
+        <Button nested>Nested</Button>
+      </>,
+    );
+    const [circle, pill] = screen.getAllByRole("button");
+    const circleAtoms = (circle.getAttribute("class") ?? "").split(/\s+/);
+    expect(circleAtoms).toEqual(expect.arrayContaining(["_w-32px", "_h-32px", "_btlr-100000px"]));
+    expect(circleAtoms).toEqual(expect.arrayContaining(["_pl-0px", "_pr-0px"]));
+    expect(circleAtoms).not.toContain("_pl-18px");
+    expect((pill.getAttribute("class") ?? "").split(/\s+/)).toContain("_pl-18px");
+  });
 });
 
 describe("Button LC-71 RING-ANATOMY + selected fill", () => {

package/src/Button/Button.radiusLaw.spec.tsx

@@ -0,0 +1,153 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-162: the seeded knob fuzz for the Button frame's radius, judged in
+ * jsdom against docs/design/knob-laws.md § Radius › Button (default,
+ * outlined): honour at none/small/large/full, remap at medium to the
+ * size-recipe radius. The combos are `node scripts/knob-fuzz.mjs
+ * MPO-162-button 5` verbatim, painted in both schemes at $2/$3/$4/$6.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { type Knobs, Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { Theme } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const STOP_PX = { none: 0, small: 5, medium: 9, large: 16, full: 50 } as const;
+const RECIPE_RADIUS = { $2: 5, $3: 7, $4: 9, $6: 16 } as const;
+const SCHEMES = ["light", "dark"] as const;
+const TOKENS = ["$2", "$3", "$4", "$6"] as const;
+
+type Stop = keyof typeof STOP_PX;
+type Token = keyof typeof RECIPE_RADIUS;
+type Combo = Partial<Knobs> & { borderRadius: Stop };
+
+const COMBOS: Combo[] = [
+  {
+    fillStyle: "filled",
+    borderRadius: "none",
+    borderWidth: "large",
+    elevation: "none",
+    space: "medium",
+    size: "large",
+    textAccent: "high",
+    headingFont: "pixel",
+    bodyFont: "mono",
+    fontWeight: "regular",
+    animation: "lazy",
+  },
+  {
+    fillStyle: "filled",
+    borderRadius: "small",
+    borderWidth: "none",
+    elevation: "large",
+    space: "large",
+    size: "small",
+    textAccent: "low",
+    headingFont: "cursive",
+    bodyFont: "serif",
+    fontWeight: "bold",
+    animation: "snappy",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "full",
+    borderWidth: "none",
+    elevation: "medium",
+    space: "small",
+    size: "small",
+    textAccent: "medium",
+    headingFont: "condensed",
+    bodyFont: "handwriting",
+    fontWeight: "bold",
+    animation: "medium",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "medium",
+    borderWidth: "none",
+    elevation: "small",
+    space: "medium",
+    size: "large",
+    textAccent: "medium",
+    headingFont: "pixel",
+    bodyFont: "pixel",
+    fontWeight: "regular",
+    animation: "lazy",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "large",
+    borderWidth: "small",
+    elevation: "small",
+    space: "large",
+    size: "medium",
+    textAccent: "low",
+    headingFont: "slab",
+    bodyFont: "pixel",
+    fontWeight: "regular",
+    animation: "medium",
+  },
+];
+
+function lawRadius(stop: Stop, token: Token): number {
+  return stop === "medium" ? RECIPE_RADIUS[token] : STOP_PX[stop];
+}
+
+const RADIUS_TOKEN_PX: Record<string, number> = {
+  "0": 0,
+  "2": 5,
+  "3": 7,
+  "4": 9,
+  "5": 10,
+  "6": 16,
+  "12": 50,
+};
+
+function radiusPx(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const px = c.match(/^_btlr-(\d+)px$/);
+    if (px) found = Number(px[1]);
+    const tok = c.match(/^_btlr-t-radius-(\d+)$/);
+    if (tok) found = RADIUS_TOKEN_PX[tok[1]] ?? found;
+  }
+  return found;
+}
+
+function paint(combo: Combo, scheme: (typeof SCHEMES)[number], token: Token): number | null {
+  renderWithProviders(
+    <Theme name={scheme}>
+      <Preset overrides={combo}>
+        <Button size={token} icon={<span>i</span>}>
+          Restart
+        </Button>
+      </Preset>
+    </Theme>,
+  );
+  const px = radiusPx(screen.getByRole("button"));
+  cleanup();
+  return px;
+}
+
+describe("MPO-162 Button frame radius: seeded fuzz against knob-laws.md § Radius › Button", () => {
+  for (const [i, combo] of COMBOS.entries()) {
+    const expected =
+      combo.borderRadius === "medium"
+        ? "the size-recipe radius 5/7/9/16"
+        : `${STOP_PX[combo.borderRadius]}px at every size`;
+    for (const scheme of SCHEMES) {
+      it(`combo ${i + 1} ${scheme}: borderRadius ${combo.borderRadius} paints ${expected}`, () => {
+        for (const token of TOKENS) {
+          expect(paint(combo, scheme, token), `${token} ${scheme}`).toBe(
+            lawRadius(combo.borderRadius, token),
+          );
+        }
+      });
+    }
+  }
+});

package/src/Button/index.tsx

@@ -26,6 +26,7 @@ import {
   type SizeRecipeRadiusStop,
 } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
+import { getFormSubmission } from "../Form/submissionController";
 import { useFormField } from "../shared/utils";
 import {
   Button as TamaguiButton,
@@ -201,7 +202,6 @@ export const ButtonFrame = styled(View, {
       true: {
         backgroundColor: "transparent",
         borderColor: "$borderColor",
-        borderWidth: 1,
         hoverStyle: { backgroundColor: "transparent" },
         pressStyle: { backgroundColor: "transparent" },
       },
@@ -463,8 +463,11 @@ export function Button({
     // Explained disable keeps the frame press-able (aria-disabled, focusable)
     // so the activation guard lives here, not in pointerEvents.
     if (isDisabled) return;
-    if (action === "submit" && resolvedForm) resolvedForm.handleSubmit();
-    if (action === "reset" && resolvedForm) resolvedForm.reset();
+    if (action === "submit" && resolvedForm) void getFormSubmission(resolvedForm).submit();
+    if (action === "reset" && resolvedForm) {
+      getFormSubmission(resolvedForm).clearError();
+      resolvedForm.reset();
+    }
     onPress?.(e as Parameters<NonNullable<TamaguiButtonProps["onPress"]>>[0]);
   };
 
@@ -676,7 +679,11 @@ export function Button({
       selected={selectedFill || undefined}
       {...(!isCircular || nested
         ? {
-            paddingHorizontal: padX,
+            // A nested circle skips the tamagui `circular` variant, which is
+            // what zeroes a page circle's padding; padX inside its fixed
+            // nestedControl box leaves the label 0px and widens the circle
+            // into a pill (MPO-371).
+            paddingHorizontal: isCircular ? 0 : padX,
             height: visualPx,
             minHeight: visualPx,
           }

package/src/Chip/Chip.spec.tsx

@@ -49,6 +49,29 @@ describe("Chip", () => {
     expect(result.container.querySelector("[aria-label='Remove']")).not.toBeNull();
   });
 
+  it("dismiss end-cap is CIRCULAR-AT-FULL: the token below full, a circle at full (DG-RAD-02)", () => {
+    const atoms = (borderRadius: "none" | "small" | "large" | "full") => {
+      const result = renderWithProviders(
+        <Preset overrides={{ borderRadius }}>
+          <Chip onDismiss={() => {}}>Tag</Chip>
+        </Preset>,
+      );
+      const button = result.container.querySelector("[aria-label='Remove Tag']") as HTMLElement;
+      const ring = button.querySelector(".mp-chip-dismiss-ring") as HTMLElement;
+      const found = [button, ring].map((el) =>
+        String(el.className)
+          .split(" ")
+          .filter((c) => c.startsWith("_btlr-")),
+      );
+      result.unmount();
+      return found;
+    };
+    expect(atoms("none")).toEqual([["_btlr-0px"], ["_btlr-0px"]]);
+    expect(atoms("small")).toEqual([["_btlr-5px"], ["_btlr-5px"]]);
+    expect(atoms("large")).toEqual([["_btlr-16px"], ["_btlr-16px"]]);
+    expect(atoms("full")).toEqual([["_btlr-1000px"], ["_btlr-1000px"]]);
+  });
+
   // COLOR: the ✕ glyph must receive a RESOLVED ink. Passing the raw token
   // string ("$color12") as the SVG fill attribute never resolved — invalid
   // CSS falls back to initial black, which measured 1.32:1 against the dark

package/src/Chip/index.tsx

@@ -6,6 +6,8 @@ import {
   ensureCompositeFocusRing,
   ensureFocusVisibleRing,
   pressTargetHitSlop,
+  radiusStopFromToken,
+  resolveRadiusClass,
   sizeRecipeForToken,
   stackRadiusProps,
   useResolvedKnobs,
@@ -421,6 +423,12 @@ export function Chip({
       ? colors.border
       : "transparent";
   const iconSize = chipIconSize(resolvedSize);
+  // DG-RAD-02 CIRCULAR-AT-FULL. The end-cap stretches to the pill's height,
+  // so full is a circle of whatever box it lays out to (1000 paints h/2).
+  const dismissStop = radiusStopFromToken(knobProps.borderRadius.borderRadius);
+  let dismissRadius: string | number = knobProps.borderRadius.borderRadius;
+  if (dismissStop === "full") dismissRadius = 1000;
+  else if (dismissStop) dismissRadius = resolveRadiusClass("CIRCULAR-AT-FULL", dismissStop);
   // The ✕ glyph ink must be a RESOLVED color: the raw token string passed as
   // the SVG `fill` attribute never resolved (invalid CSS ⇒ initial black ⇒
   // 1.32:1 on the dark tint — the "invisible ✕" regression). useTheme gives
@@ -546,10 +554,7 @@ export function Chip({
           tabIndex={0}
           className="mp-chip-dismiss"
           size={resolvedSize}
-          // Dismiss is R-BINARY (spec Chip dismiss): square in the radius
-          // `none` world, a full circle everywhere else — the fixed $1 arc
-          // was knob-dead on both legs (UX-P06 "ChipDismiss br=3").
-          borderRadius={knobProps.pointy ? 0 : 1000}
+          borderRadius={dismissRadius}
           // Coarse-pointer floor: expand the touch area to 44×44 via hitSlop
           // (unpainted, no layout) instead of growing the box.
           hitSlop={pressTargetHitSlop(CHIP_DISMISS_MIN_TARGET_FINE)}
@@ -581,10 +586,9 @@ export function Chip({
               right={-dismissFloorOutset}
             />
           )}
-          {/* R-BINARY on the painted ring too — same dial as the outline. */}
           <DismissRing
             className="mp-chip-dismiss-ring"
-            borderRadius={knobProps.pointy ? 0 : 1000}
+            borderRadius={dismissRadius}
             hoverStyle={{ backgroundColor: colors.dismissHover }}
             pressStyle={{ backgroundColor: colors.dismissPress }}
           >

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -119,6 +119,29 @@ describe("ContextualSaveBar", () => {
     expect(savebar()).toBeNull();
   });
 
+  it.each(["Refused", "Refused.", "Refused?", "Refused!", "Refused。"])(
+    "separates refusal copy once for %s",
+    async (refusal) => {
+      const result = renderWithProviders(
+        <Form
+          saveBar
+          formOptions={{ defaultValues: { name: "svc" } }}
+          onSubmit={async () => {
+            throw new Error(refusal);
+          }}
+        >
+          <Input name="name" label="Name" />
+        </Form>,
+      );
+      await act(async () => typeIn(result.container.querySelector("input")!, "other"));
+      await act(async () => fireEvent.click(barButton("Save")));
+      const displayed = /[.!?。]$/u.test(refusal) ? refusal : `${refusal}.`;
+      await waitFor(() =>
+        expect(savebar()?.textContent).toContain(`${displayed} Edits are kept on this page.`),
+      );
+    },
+  );
+
   it.each([undefined, "Review changes"])(
     "shows the complete narrow-form refusal with custom status %s",
     async (message) => {
@@ -141,6 +164,7 @@ describe("ContextualSaveBar", () => {
       await act(async () => typeIn(input, "svc-billing"));
       await act(async () => fireEvent.click(barButton("Save")));
       await waitFor(() => expect(savebar()?.textContent).toContain(refusal));
+      expect(savebar()?.textContent).not.toContain("retry..");
       const status = savebar()!.querySelector('[role="status"]')!;
       expect(getComputedStyle(status).whiteSpace).not.toBe("nowrap");
       expect(getComputedStyle(status).textOverflow).not.toBe("ellipsis");

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -1,6 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { YStack } from "tamagui";
+import { useState } from "react";
+import { SizableText, YStack } from "tamagui";
+import { Button } from "../Button";
 import { Checkbox } from "../fields/Checkbox";
 import { Input } from "../fields/Input";
 import { RadioGroup } from "../fields/RadioGroup";
@@ -108,3 +110,37 @@ export const NarrowRefusal: Story = {
     </YStack>
   ),
 };
+
+function SubmissionPathsFixture() {
+  const [calls, setCalls] = useState(0);
+  return (
+    <YStack gap="$3" width={360} maxWidth="100%" padding="$4">
+      <SizableText data-testid="submit-calls">onSubmit calls: {calls}</SizableText>
+      <Form
+        saveBar={{ forceVisible: true, onSaved: action("onSaved") }}
+        formOptions={{ defaultValues: { name: "service-example" } }}
+        onSubmit={async (values) => {
+          setCalls((count) => count + 1);
+          action("onSubmit")(values);
+          throw new Error("The record changed. Refresh and retry.");
+        }}
+      >
+        <Input name="name" label="Service name" />
+        <Button action="submit">Submit</Button>
+      </Form>
+    </YStack>
+  );
+}
+
+export const SubmissionPaths: Story = {
+  name: "Submission paths",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Every path into one refusing onSubmit: Enter in the field (HTML submit), Submit (Button action=submit), Save, and Cmd/Ctrl-S. The counter shows how many times onSubmit ran, so each activation must add exactly one and every path must show the same failure.",
+      },
+    },
+  },
+  render: () => <SubmissionPathsFixture />,
+};

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import { useResolvedKnobs, warnCancelDisabled } from "@multiplatform.one/theme";
 import { useEffect } from "react";
-import { Dialog, Paragraph, XStack, isWeb } from "tamagui";
+import { Dialog, Paragraph, XStack } from "tamagui";
 import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose } from "../shared/focusManagement";
@@ -61,6 +61,8 @@ export function UnsavedChangesDialog({
           maxWidth={440}
           padding="$4"
           gap="$4"
+          {...knobProps.elevatedSurface}
+          elevate={false}
           backgroundColor="$background"
           borderColor="$borderColor"
           borderWidth={1}
@@ -71,16 +73,6 @@ export function UnsavedChangesDialog({
           data-mp-savebar-guard=""
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
-          {...(isWeb
-            ? {
-                boxShadow: "0 12px 24px rgba(0,0,0,0.12)",
-              }
-            : {
-                shadowColor: "#000",
-                shadowOpacity: 0.12,
-                shadowRadius: 24,
-                shadowOffset: { width: 0, height: 12 },
-              })}
         >
           <Dialog.Title {...knobProps.body} fontSize="$4">
             {t("Discard unsaved changes?")}

package/src/ContextualSaveBar/index.tsx

@@ -1,10 +1,11 @@
 import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplatform.one/theme";
 import { Store, useStore } from "@tanstack/react-store";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { AnimatePresence, Text, XStack, isWeb } from "tamagui";
 import { Button } from "../Button";
 import { collectFormFieldErrors } from "../ErrorSummary";
 import { useFormContext } from "../Form";
+import { getFormSubmission } from "../Form/submissionController";
 import { Spinner } from "../Spinner";
 import { formCommonColors } from "../shared/colorRamps";
 import { t } from "../shared/t";
@@ -86,8 +87,10 @@ function statusCopy(args: {
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
-      text: t("Couldn't save — {{error}}. Edits are kept on this page.", {
-        error: args.saveError,
+      text: t("Couldn't save — {{error}} Edits are kept on this page.", {
+        error: /[.!?。！？]$/u.test(args.saveError.trimEnd())
+          ? args.saveError.trimEnd()
+          : `${args.saveError.trimEnd()}.`,
       }),
       failed: true,
     };
@@ -138,7 +141,12 @@ export function ContextualSaveBar({
   const form = useFormContext();
   const { knobProps, elevation } = useResolvedKnobs();
   const snap = useSaveBarSnapshot();
-  const [saveError, setSaveError] = useState<string | null>(null);
+  const submission = getFormSubmission(form);
+  const { error: saveError } = useSyncExternalStore(
+    submission.subscribe,
+    submission.getSnapshot,
+    submission.getSnapshot,
+  );
   const [discardOpen, setDiscardOpen] = useState(false);
 
   const stagedDirty = dirtyCount(snap.fieldMeta);
@@ -161,9 +169,8 @@ export function ContextualSaveBar({
 
   const handleSave = useCallback(async () => {
     if (snap.isSubmitting) return;
-    setSaveError(null);
     try {
-      await form.handleSubmit();
+      if ((await submission.submit()) !== "success") return;
       const errors = fieldErrorCount((form.store.state.fieldMeta ?? {}) as FieldMetaMap);
       if (errors > 0) return;
       const values = form.store.state.values as Record<string, unknown>;
@@ -177,18 +184,17 @@ export function ContextualSaveBar({
       onSaved?.(values);
       restoreFocusToForm();
     } catch (error) {
-      const text = error instanceof Error ? error.message : String(error);
-      setSaveError(text || "network unreachable");
+      submission.reportError(error);
     }
-  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting]);
+  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting, submission]);
 
   const handleDiscardCommit = useCallback(() => {
-    setSaveError(null);
+    submission.clearError();
     form.reset();
     setDiscardOpen(false);
     if (blocker.state === "blocked") blocker.proceed();
     restoreFocusToForm();
-  }, [blocker, form, restoreFocusToForm]);
+  }, [blocker, form, restoreFocusToForm, submission]);
 
   const handleKeepEditing = useCallback(() => {
     setDiscardOpen(false);