@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/Button/Button.filledBorder.spec.tsx

@@ -0,0 +1,74 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-19 X3 / W1-button-filled-border: a filled Button keeps a 1px
+ * TRANSPARENT border so filled and outlined share box geometry, and only
+ * the outlined variant paints `$borderColor` (tamagui-rendered-reference
+ * §6.1). jsdom cannot cascade Tamagui CSS — assertions read the atomic
+ * border-color / border-width / height classes the FRAME emits.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+function frame(): HTMLElement {
+  return screen.getByRole("button");
+}
+
+function atoms(el: HTMLElement, prefix: string): string[] {
+  return String(el.className || "")
+    .split(/\s+/)
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+describe("Button MPO-19 filled border is transparent", () => {
+  it("filled paints no visible edge; outlined does; boxes match", () => {
+    renderWithProviders(<Button>Filled</Button>);
+    const filled = frame();
+    const filledHeight = atoms(filled, "_h-");
+    const filledPad = [...atoms(filled, "_pr-"), ...atoms(filled, "_pl-")];
+    const filledWidth = atoms(filled, "_btw-");
+    expect(filled.className).toMatch(/_btc-transparent\b/);
+    expect(filled.className).toMatch(/_brc-transparent\b/);
+    expect(filled.className).toMatch(/_bbc-transparent\b/);
+    expect(filled.className).toMatch(/_blc-transparent\b/);
+    expect(filled.className).not.toMatch(/_btc-borderColor\b/);
+    expect(filledWidth).toEqual(["_btw-1px"]);
+    cleanup();
+
+    renderWithProviders(<Button outlined>Outlined</Button>);
+    const outlined = frame();
+    expect(outlined.className).toMatch(/_btc-borderColor\b/);
+    expect(outlined.className).toMatch(/_brc-borderColor\b/);
+    expect(outlined.className).toMatch(/_bbc-borderColor\b/);
+    expect(outlined.className).toMatch(/_blc-borderColor\b/);
+    expect(outlined.className).not.toMatch(/_btc-transparent\b/);
+    expect(atoms(outlined, "_btw-")).toEqual(filledWidth);
+    expect(atoms(outlined, "_h-")).toEqual(filledHeight);
+    expect([...atoms(outlined, "_pr-"), ...atoms(outlined, "_pl-")]).toEqual(filledPad);
+  });
+
+  it("intent filled Buttons keep the invisible 1px edge", () => {
+    renderWithProviders(<Button error>Destroy</Button>);
+    const filled = frame();
+    expect(filled.className).toMatch(/_btc-transparent\b/);
+    expect(atoms(filled, "_btw-")).toEqual(["_btw-1px"]);
+    expect(filled.className).toMatch(/_h-44px\b/);
+    cleanup();
+
+    renderWithProviders(
+      <Button outlined error>
+        Destroy
+      </Button>,
+    );
+    const outlined = frame();
+    expect(outlined.className).toMatch(/_btc-borderColor\b/);
+    expect(atoms(outlined, "_btw-")).toEqual(["_btw-1px"]);
+    expect(outlined.className).toMatch(/_h-44px\b/);
+  });
+});

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

@@ -0,0 +1,143 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-40 / W1-button-label-ink: outlined error/warning/success labels
+ * re-anchor to `$color11` on the LABEL TEXT NODE. The harness passed this
+ * defect for months by reading the frame (`color` inherits) while
+ * SizableText re-resolved `$color` — the on-fill foreground (measured
+ * ~1.03:1 on the page).
+ *
+ * jsdom cannot cascade Tamagui CSS, so the DOM arm reads the atomic
+ * classes the text node emits (`_col-color11`, `_fow-400`). Contrast is
+ * the theme-table arm: intent `$color11` vs the page `$background` in
+ * both schemes.
+ */
+
+import { render, cleanup, screen } from "@testing-library/react";
+import {
+  aaTextContrastRatio,
+  contrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  normalizeToHex,
+  relativeLuminance,
+} from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { TamaguiProvider, YStack } from "tamagui";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const INTENTS = ["error", "warning", "success"] as const;
+const SCHEMES = ["light", "dark"] as const;
+
+function houseRender(ui: React.ReactElement, theme: "light" | "dark" = "light") {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme={theme} disableInjectCSS>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function labelNode(text: string): HTMLElement {
+  return screen.getByText(text);
+}
+
+function contrastAgainstPage(ink: string, ground: string): number {
+  const inkHex = normalizeToHex(ink);
+  const groundHex = normalizeToHex(ground);
+  expect(inkHex, `ink ${ink}`).toBeTruthy();
+  expect(groundHex, `ground ${ground}`).toBeTruthy();
+  return contrastRatio(relativeLuminance(inkHex!), relativeLuminance(groundHex!));
+}
+
+describe("Button MPO-40 outlined intent label ink", () => {
+  it.each(SCHEMES)(
+    "%s: outlined intent labels emit $color11 on the TEXT NODE, never the on-fill $color",
+    (scheme) => {
+      houseRender(
+        <>
+          {INTENTS.map((intent) => (
+            <Button key={`o-${intent}`} outlined {...{ [intent]: true }}>
+              {`Outlined-${intent}`}
+            </Button>
+          ))}
+          {INTENTS.map((intent) => (
+            <Button key={`s-${intent}`} {...{ [intent]: true }}>
+              {`Solid-${intent}`}
+            </Button>
+          ))}
+        </>,
+        scheme,
+      );
+
+      for (const intent of INTENTS) {
+        const outlined = labelNode(`Outlined-${intent}`);
+        const solid = labelNode(`Solid-${intent}`);
+        // TEXT NODE — not the frame. The frame already carried $color11
+        // and hid this defect.
+        expect(outlined.tagName).not.toBe("BUTTON");
+        expect(outlined.className).toMatch(/_col-color11\b/);
+        expect(outlined.className).not.toMatch(/_col-color\b/);
+        expect(solid.className).toMatch(/_col-color\b/);
+        expect(solid.className).not.toMatch(/_col-color11\b/);
+      }
+    },
+  );
+
+  it.each(SCHEMES)("%s: label TEXT NODE weight is 400, never 500/600", (scheme) => {
+    houseRender(
+      <>
+        <Button>Filled-label</Button>
+        <Button outlined>Outlined-label</Button>
+        <Button outlined error>
+          Outlined-error-label
+        </Button>
+        <Button error>Solid-error-label</Button>
+      </>,
+      scheme,
+    );
+
+    for (const text of [
+      "Filled-label",
+      "Outlined-label",
+      "Outlined-error-label",
+      "Solid-error-label",
+    ]) {
+      const node = labelNode(text);
+      expect(node.className).toMatch(/_fow-400\b/);
+      expect(node.className).not.toMatch(/_fow-500\b/);
+      expect(node.className).not.toMatch(/_fow-600\b/);
+    }
+  });
+
+  it("intent $color11 vs page ground is >= 4.5:1 in both schemes; on-fill $color is not", () => {
+    for (const scheme of SCHEMES) {
+      const ground = houseThemes[scheme].background;
+      for (const intent of INTENTS) {
+        const ink = houseThemes[`${scheme}_${intent}`].color11;
+        const ratio = contrastAgainstPage(ink, ground);
+        expect(
+          ratio,
+          `${scheme}_${intent}.color11 ${ink} vs ${ground}`,
+        ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+
+        const onFill = houseThemes[`${scheme}_${intent}_Button`].color;
+        expect(
+          contrastAgainstPage(onFill, ground),
+          `${scheme}_${intent}_Button.color is the on-fill foreground`,
+        ).toBeLessThan(2);
+      }
+    }
+  });
+});

package/src/Button/Button.stories.tsx

@@ -88,21 +88,39 @@ export const Basic: Story = {
 export const Intents: Story = {
   name: "Intent variants",
   render: () => (
-    <XStack gap="$3" flexWrap="wrap" padding="$4">
-      <Button onPress={pressed("default")}>Default</Button>
-      <Button accent onPress={pressed("accent")}>
-        Accent
-      </Button>
-      <Button success onPress={pressed("success")}>
-        Success
-      </Button>
-      <Button warning onPress={pressed("warning")}>
-        Warning
-      </Button>
-      <Button error onPress={pressed("error")}>
-        Error
-      </Button>
-    </XStack>
+    <YStack gap="$3" padding="$4">
+      <XStack gap="$3" flexWrap="wrap">
+        <Button onPress={pressed("default")}>Default</Button>
+        <Button accent onPress={pressed("accent")}>
+          Accent
+        </Button>
+        <Button success onPress={pressed("success")}>
+          Success
+        </Button>
+        <Button warning onPress={pressed("warning")}>
+          Warning
+        </Button>
+        <Button error onPress={pressed("error")}>
+          Error
+        </Button>
+      </XStack>
+      {/* MPO-40: outlined intents keep the label on the hue's readable text
+          tier ($color11), never the solid sub-theme's on-fill foreground. */}
+      <XStack gap="$3" flexWrap="wrap">
+        <Button outlined onPress={pressed("outlined.default")}>
+          Default
+        </Button>
+        <Button outlined success onPress={pressed("outlined.success")}>
+          Success
+        </Button>
+        <Button outlined warning onPress={pressed("outlined.warning")}>
+          Warning
+        </Button>
+        <Button outlined error onPress={pressed("outlined.error")}>
+          Error
+        </Button>
+      </XStack>
+    </YStack>
   ),
 };
 

package/src/Button/index.tsx

@@ -212,7 +212,10 @@ export const ButtonFrame = styled(View, {
   flexWrap: "nowrap",
   flexDirection: "row",
   backgroundColor: "$background",
-  borderColor: "$borderColor",
+  // MPO-19 X3 / tamagui-rendered-reference §6.1: every button carries a 1px
+  // border with a TRANSPARENT colour so filled and outlined share identical
+  // box geometry — only the outlined variant paints `$borderColor`.
+  borderColor: "transparent",
   outlineWidth: 0,
   hoverStyle: {
     backgroundColor: "$backgroundHover",
@@ -222,6 +225,7 @@ export const ButtonFrame = styled(View, {
     outlined: {
       true: {
         backgroundColor: "transparent",
+        borderColor: "$borderColor",
         borderWidth: 1,
         hoverStyle: { backgroundColor: "transparent" },
         pressStyle: { backgroundColor: "transparent" },
@@ -413,7 +417,8 @@ export function Button({
     (success && "success") ||
     undefined;
   // compact is density (pad/gap), not a size step — do not pass it through
-  // useResolvedKnobs, which would also step knobs.size.
+  // useResolvedKnobs (size stays on the size axis; LC-76). The PROP and the
+  // density knob must share this channel so both land the same padX/gap.
   const { knobProps, control, text, disabledState } = useResolvedKnobs({
     intent,
     component: "Button",
@@ -426,7 +431,7 @@ export function Button({
   const sizeProp = (props as { size?: SizeTokens | number }).size;
   const resolvedSize = sizeProp ?? knobProps.sizeToken;
   const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily);
-  const densityTight = compact === true;
+  const densityTight = compact !== undefined ? compact === true : knobProps.density === "compact";
   const padX = buttonDensityPad(recipe.paddingHorizontal, densityTight);
   const innerGap = buttonDensityGap(recipe.gap, densityTight);
   if (skeleton) {
@@ -469,10 +474,7 @@ export function Button({
   outlined = outlined ?? knobProps.outlined;
   const isLow = knobProps.textAccent === "low";
   const isMedium = knobProps.textAccent === "medium";
-  const baseBorderWidth = knobProps.borderRadius.borderWidth;
-  // Filled buttons are theme-driven and borderless unless a knob asks for one;
-  // outlined always keeps at least a 1px hairline.
-  const resolvedBorderWidth = outlined ? Math.max(baseBorderWidth, 1) : baseBorderWidth;
+  const resolvedBorderWidth = knobProps.borderRadius.borderWidth;
   const [hovering, setHovering] = useState(false);
   const [pressing, setPressing] = useState(false);
   const handlePressIn = useCallback(() => {
@@ -492,6 +494,13 @@ export function Button({
     : isMedium
       ? formCommonColors.text
       : undefined;
+  // MPO-40: the outlined+intent frame re-anchors to `$color11` below, which
+  // reaches currentColor icons but NOT the label — SizableText re-resolves
+  // `$color` from the solid intent sub-theme, the ON-FILL foreground
+  // (measured 1.02–1.06:1 on the page in both schemes). At the default
+  // textAccent (`high`, textColor undefined) the label must re-anchor to the
+  // same readable text tier the frame uses.
+  const outlinedIntentInk = Boolean(outlined && intent && solidButtonIntents.has(intent));
 
   const resolvedRole: ButtonActionRole | undefined = actionRole ?? (accent ? "primary" : undefined);
   const labelFromParts =
@@ -518,10 +527,17 @@ export function Button({
       overflow="hidden"
       {...knobProps.body}
       {...(nested ? knobProps.label : { fontSize: recipe.fontSize })}
-      {...(textColor ? { color: textColor } : undefined)}
+      {...(textColor
+        ? { color: textColor }
+        : outlinedIntentInk
+          ? { color: "$color11" }
+          : undefined)}
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground and pins to the lowest AA tier (keepLabel keeps >=4.5:1).
       {...(isDisabled ? disabledState.textKnobProps : undefined)}
+      // Boards measure ink.weight on the TEXT NODE, never the frame.
+      // Regular 400 — SizableText size variants otherwise leak 500/600.
+      fontWeight="400"
       transition={knobProps.transition}
     >
       {label}
@@ -626,7 +642,13 @@ export function Button({
       transition={knobProps.transition}
       {...knobProps.borderRadius}
       borderWidth={resolvedBorderWidth}
+      // MPO-19 X3: the borderRadius knob fragment carries `$borderColor` for
+      // bordered chrome, but a filled Button's edge is transparent by contract
+      // (reference §6.1) — same-width invisible border keeps filled and
+      // outlined boxes identical without the filled one showing a ring.
+      borderColor={outlined ? "$borderColor" : "transparent"}
       size={resolvedSize}
+      {...(chromeless ? undefined : knobProps.elevationChrome)}
       elevation={knobProps.elevation}
       outlined={outlined}
       circular={!nested && isCircular ? true : undefined}
@@ -757,7 +779,7 @@ export function Button({
       data-mp-button-height={String(
         nested ? visualPx : isCircular ? Math.max(circularTokenPx, MIN_PRESS_TARGET) : visualPx,
       )}
-      data-mp-density={densityTight ? "compact" : knobProps.density}
+      data-mp-density={densityTight ? "compact" : "comfortable"}
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
       {iconElement}

package/src/Chip/index.tsx

@@ -186,6 +186,12 @@ export const ChipFrame = styled(View, {
   // borderRadius knob wins — no hardcoded base radius (same as Tags chips).
   ...chipFrameVariants.$3,
   overflow: "visible",
+  // Same box for every variant — see the components Chip: giving the border
+  // to `outline` alone makes an outlined chip 2px taller than a solid or
+  // subtle one at the same size token, which shows the moment the two sit in
+  // one row.
+  borderWidth: 1,
+  borderColor: "transparent",
 
   variants: {
     size: {
@@ -195,9 +201,7 @@ export const ChipFrame = styled(View, {
     variant: {
       solid: {},
       subtle: {},
-      outline: {
-        borderWidth: 1,
-      },
+      outline: {},
     },
   } as const,
 

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -0,0 +1,269 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Checkbox } from "../fields/Checkbox";
+import { Input } from "../fields/Input";
+import { RadioGroup } from "../fields/RadioGroup";
+import { Switch } from "../fields/Switch";
+import { Form } from "../Form";
+import { clientKnownIdentity, ContextualSaveBar, type NavigationBlocker } from "./index";
+
+function savebar(root: ParentNode = document.body): HTMLElement | null {
+  return root.querySelector("[data-mp-contextual-savebar]");
+}
+
+function barButton(label: string, root: ParentNode = document.body): HTMLElement {
+  const buttons = Array.from(root.querySelectorAll('[role="button"], button'));
+  const match = buttons.find((b) => b.textContent?.includes(label));
+  if (!match) throw new Error(`No button labelled "${label}"`);
+  return match as HTMLElement;
+}
+
+function alertdialog(): HTMLElement | null {
+  return document.body.querySelector('[role="alertdialog"]');
+}
+
+function typeIn(input: Element, value: string) {
+  fireEvent.change(input, { target: { value } });
+}
+
+describe("ContextualSaveBar", () => {
+  it("does not render when the form is clean", () => {
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { name: "svc" } }}>
+        <Input name="name" label="Service name" />
+      </Form>,
+    );
+    expect(savebar(result.container)).toBeNull();
+    expect(result.container.textContent).not.toContain("Unsaved changes");
+  });
+
+  it("appears from TanStack dirty state when a text field is edited", async () => {
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { name: "svc" } }}>
+        <Input name="name" label="Service name" />
+      </Form>,
+    );
+    const input = result.container.querySelector("input");
+    expect(input).toBeTruthy();
+    await act(async () => {
+      typeIn(input!, "svc-billing");
+    });
+    await waitFor(() => {
+      expect(savebar()).toBeTruthy();
+      expect(document.body.textContent).toContain("Unsaved changes");
+    });
+  });
+
+  it("appears when a checkbox is edited (DG-ACT-06 declarative)", async () => {
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { agree: false } }}>
+        <Checkbox name="agree" label="Notify on deploy" />
+      </Form>,
+    );
+    const box = result.getCheckbox();
+    expect(box).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(box!);
+    });
+    await waitFor(() => {
+      expect(savebar()).toBeTruthy();
+    });
+  });
+
+  it("appears when a radio is edited (DG-ACT-06 declarative)", async () => {
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { env: "prod" } }}>
+        <RadioGroup
+          name="env"
+          options={[
+            { label: "Prod", value: "prod" },
+            { label: "Stage", value: "stage" },
+          ]}
+        />
+      </Form>,
+    );
+    const radio = [...result.container.querySelectorAll('[role="radio"]')].find(
+      (node) => node.getAttribute("value") === "stage" || node.id.endsWith("-stage"),
+    );
+    expect(radio).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(radio!);
+    });
+    await waitFor(() => {
+      expect(savebar()).toBeTruthy();
+    });
+  });
+
+  it("does not appear when a Switch auto-commits (DG-ACT-06 / DG-CTRL-02)", async () => {
+    const onAutoCommit = vi.fn();
+    const result = renderWithProviders(
+      <Form
+        saveBar={{ onAutoCommit }}
+        formOptions={{ defaultValues: { live: false, name: "svc" } }}
+      >
+        <Switch name="live" label="Live" />
+        <Input name="name" label="Service name" />
+      </Form>,
+    );
+    const sw = result.getSwitch();
+    expect(sw).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(sw!);
+    });
+    await waitFor(() => {
+      expect(onAutoCommit).toHaveBeenCalledWith("live", true);
+    });
+    expect(savebar()).toBeNull();
+  });
+
+  it("clears after Save and after Discard confirm", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { name: "svc" } }} onSubmit={onSubmit}>
+        <Input name="name" label="Service name" />
+      </Form>,
+    );
+    const input = result.container.querySelector("input")!;
+    await act(async () => {
+      typeIn(input, "svc-billing");
+    });
+    await waitFor(() => expect(savebar()).toBeTruthy());
+
+    await act(async () => {
+      fireEvent.click(barButton("Save"));
+    });
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({ name: "svc-billing" });
+      expect(savebar()).toBeNull();
+    });
+
+    await act(async () => {
+      typeIn(input, "svc-other");
+    });
+    await waitFor(() => expect(savebar()).toBeTruthy());
+
+    await act(async () => {
+      fireEvent.click(barButton("Discard"));
+    });
+    await waitFor(() => expect(alertdialog()).toBeTruthy());
+    expect(alertdialog()?.textContent).toContain("Discard unsaved changes?");
+
+    await act(async () => {
+      fireEvent.click(barButton("Keep editing"));
+    });
+    await waitFor(() => expect(alertdialog()).toBeNull());
+    expect(savebar()).toBeTruthy();
+    expect((input as HTMLInputElement).value).toBe("svc-other");
+
+    await act(async () => {
+      fireEvent.click(barButton("Discard"));
+    });
+    await waitFor(() => expect(alertdialog()).toBeTruthy());
+    await act(async () => {
+      fireEvent.click(barButton("Discard changes"));
+    });
+    await waitFor(() => {
+      expect(alertdialog()).toBeNull();
+      expect(savebar()).toBeNull();
+    });
+    expect((input as HTMLInputElement).value).toBe("svc-billing");
+  });
+
+  it("never disables Discard while Save is in flight (LC-30)", async () => {
+    let finish!: () => void;
+    const hang = new Promise<void>((resolve) => {
+      finish = resolve;
+    });
+    const result = renderWithProviders(
+      <Form saveBar formOptions={{ defaultValues: { name: "svc" } }} onSubmit={() => hang}>
+        <Input name="name" label="Service name" />
+      </Form>,
+    );
+    await act(async () => {
+      typeIn(result.container.querySelector("input")!, "svc-billing");
+    });
+    await waitFor(() => expect(savebar()).toBeTruthy());
+
+    await act(async () => {
+      fireEvent.click(barButton("Save"));
+    });
+    await waitFor(() => {
+      expect(document.body.textContent).toContain("Saving");
+    });
+    const discard = barButton("Discard");
+    expect(discard.getAttribute("disabled")).toBeNull();
+    expect(discard.getAttribute("aria-disabled")).toBeNull();
+    expect(discard.getAttribute("data-disabled")).toBeNull();
+    finish();
+  });
+
+  it("fires the route-leave guard and Keep editing dismisses it", async () => {
+    function Harness() {
+      const [leaveArmed, setLeaveArmed] = useState(false);
+      const useBlocker = (shouldBlock: boolean): NavigationBlocker => {
+        if (leaveArmed && shouldBlock) {
+          return {
+            state: "blocked",
+            proceed: () => setLeaveArmed(false),
+            reset: () => setLeaveArmed(false),
+          };
+        }
+        return { state: "unblocked", proceed: () => {}, reset: () => {} };
+      };
+      return (
+        <>
+          <button type="button" data-testid="leave" onClick={() => setLeaveArmed(true)}>
+            Leave
+          </button>
+          <Form saveBar={{ useBlocker }} formOptions={{ defaultValues: { name: "svc" } }}>
+            <Input name="name" label="Service name" />
+          </Form>
+        </>
+      );
+    }
+
+    const result = renderWithProviders(<Harness />);
+    await act(async () => {
+      typeIn(result.container.querySelector("input")!, "svc-billing");
+    });
+    await waitFor(() => expect(savebar()).toBeTruthy());
+
+    await act(async () => {
+      fireEvent.click(result.container.querySelector('[data-testid="leave"]')!);
+    });
+    await waitFor(() => expect(alertdialog()).toBeTruthy());
+
+    await act(async () => {
+      fireEvent.click(barButton("Keep editing"));
+    });
+    await waitFor(() => expect(alertdialog()).toBeNull());
+    expect(savebar()).toBeTruthy();
+  });
+
+  it("Discard on the bar ignores a disabled request (LC-30)", () => {
+    renderWithProviders(
+      <Form formOptions={{ defaultValues: { name: "x" } }}>
+        <Input name="name" label="Name" />
+        <ContextualSaveBar forceVisible discardDisabled />
+      </Form>,
+    );
+    const discard = barButton("Discard");
+    expect(discard.getAttribute("disabled")).toBeNull();
+    expect(discard.getAttribute("aria-disabled")).toBeNull();
+    expect(discard.getAttribute("data-mp-cancel-disabled-ignored")).toBe("true");
+  });
+});
+
+describe("clientKnownIdentity (LC-64)", () => {
+  it("returns the client-owned identifier", () => {
+    expect(clientKnownIdentity("svc-billing-api")).toBe("svc-billing-api");
+  });
+
+  it("refuses a missing or envelope-dropped identity", () => {
+    expect(() => clientKnownIdentity(undefined)).toThrow(/client-known/i);
+    expect(() => clientKnownIdentity("")).toThrow(/client-known/i);
+    expect(() => clientKnownIdentity("undefined")).toThrow(/client-known/i);
+  });
+});