@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -6,7 +6,7 @@ import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Button, buttonDensityPad, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
+import { Button, buttonDensityFamily, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
 
 afterEach(cleanup);
 
@@ -52,8 +52,15 @@ describe("Button size recipes", () => {
 
 describe("Button density ≠ size", () => {
   it("compact tightens pad without shrinking recipe height", () => {
-    expect(buttonDensityPad(12, true)).toBe(10);
-    expect(buttonDensityPad(12, false)).toBe(12);
+    // Density picks the FAMILY; it never subtracts from the recipe (LC-79).
+    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
+    expect(buttonDensityFamily("control", false)).toBe("control");
+    expect(resolveButtonSizeRecipe("$4", "controlCompact").paddingHorizontal).toBeLessThan(
+      resolveButtonSizeRecipe("$4", "control").paddingHorizontal,
+    );
+    expect(resolveButtonSizeRecipe("$4", "controlCompact").height).toBe(
+      resolveButtonSizeRecipe("$4", "control").height,
+    );
     renderWithProviders(
       <Button compact size="$4">
         Save

package/src/Button/Button.stories.tsx

@@ -57,11 +57,12 @@ export const Basic: Story = {
       options: ["$2", "$3", "$4", "$5", "$6"],
       description: "Tamagui size token",
     },
-    variant: {
-      control: "select",
-      options: [undefined, "outlined"],
-      description: "Structural variant",
-    },
+    // The house fill channel is the `outlined` boolean. `variant="outlined"`
+    // is raw-tamagui API this component does not read (only the
+    // `@multiplatform.one/components` shim maps it), so a `variant` control
+    // here drove nothing — MPO-19 X3 measured the board's own "Outlined"
+    // specimen rendering as a filled button with a transparent edge.
+    outlined: { control: "boolean", description: "Outlined fill style" },
     chromeless: { control: "boolean", description: "Transparent, text-only style" },
     disabled: { control: "boolean", description: "Disable the button" },
     skeleton: { control: "boolean", description: "Show skeleton placeholder" },
@@ -88,21 +89,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>
   ),
 };
 
@@ -192,7 +211,7 @@ export const Comparison: Story = {
         <Button icon={Activity} onPress={pressed("custom.icon")}>
           With Icon
         </Button>
-        <Button variant="outlined" onPress={pressed("custom.outlined")}>
+        <Button outlined onPress={pressed("custom.outlined")}>
           Outlined
         </Button>
         <Button disabled disabledReason="Needs a completed draft">

package/src/Button/index.tsx

@@ -76,13 +76,18 @@ export function resolveButtonSizeRecipe(
   return sizeRecipeForToken(size == null ? "$true" : String(size), { family });
 }
 
-/** Density tightens pad/gap only — never height, type, or icon (density ≠ size). */
-export function buttonDensityPad(padX: number, densityTight: boolean): number {
-  return densityTight ? Math.max(8, padX - 2) : padX;
-}
-
-export function buttonDensityGap(gap: number, densityTight: boolean): number {
-  return densityTight ? Math.max(4, gap - 1) : gap;
+/**
+ * Density selects the recipe FAMILY, it does not subtract from the recipe
+ * (LC-79 / LC-80): control -> controlCompact, same heights, tighter ratios.
+ * A hand-set delta is a second density writer and it drifts from the
+ * generated table at every token but `$4` — it inverted at `$2`, where
+ * `max(8, 7 - 2)` painted a compact Button WIDER than a comfortable one.
+ */
+export function buttonDensityFamily(
+  family: RecipeFamilyName,
+  densityTight: boolean,
+): RecipeFamilyName {
+  return densityTight ? "controlCompact" : family;
 }
 
 /**
@@ -212,7 +217,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 +230,7 @@ export const ButtonFrame = styled(View, {
     outlined: {
       true: {
         backgroundColor: "transparent",
+        borderColor: "$borderColor",
         borderWidth: 1,
         hoverStyle: { backgroundColor: "transparent" },
         pressStyle: { backgroundColor: "transparent" },
@@ -412,8 +421,11 @@ export function Button({
     (warning && "warning") ||
     (success && "success") ||
     undefined;
-  // compact is density (pad/gap), not a size step — do not pass it through
-  // useResolvedKnobs, which would also step knobs.size.
+  // compact is density, not a size step — do not pass it through
+  // useResolvedKnobs (size stays on the size axis; LC-76). The PROP and the
+  // density knob share one channel: both pick the recipe FAMILY, the same
+  // way resolveKnobs picks it for every other control, so both land the
+  // same padX and the internals stay recipe-generated (LC-75 / LC-79).
   const { knobProps, control, text, disabledState } = useResolvedKnobs({
     intent,
     component: "Button",
@@ -425,10 +437,13 @@ export function Button({
   const grouped = useControlGrouped();
   const sizeProp = (props as { size?: SizeTokens | number }).size;
   const resolvedSize = sizeProp ?? knobProps.sizeToken;
-  const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily);
-  const densityTight = compact === true;
-  const padX = buttonDensityPad(recipe.paddingHorizontal, densityTight);
-  const innerGap = buttonDensityGap(recipe.gap, densityTight);
+  const densityTight = compact !== undefined ? compact === true : knobProps.density === "compact";
+  const recipe = resolveButtonSizeRecipe(
+    resolvedSize,
+    buttonDensityFamily(recipeFamily, densityTight),
+  );
+  const padX = recipe.paddingHorizontal;
+  const innerGap = recipe.gap;
   if (skeleton) {
     return (
       <View
@@ -469,10 +484,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 +504,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 +537,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 +652,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 +789,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);
+  });
+});

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -0,0 +1,72 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+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 { ContextualSaveBar } from "./index";
+
+const meta: Meta<typeof ContextualSaveBar> = {
+  title: "Forms/ContextualSaveBar",
+  component: ContextualSaveBar,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Declarative dirty-state Save/Discard bar (DG-ACT-06). Text, checkbox, and radio stage; Switch auto-commits and never raises the bar. Discard is never disabled (LC-30).",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContextualSaveBar>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => (
+    <Form
+      saveBar={{ onSaved: action("onSaved"), onAutoCommit: action("onAutoCommit") }}
+      formOptions={{
+        defaultValues: {
+          name: "svc",
+          agree: false,
+          env: "prod",
+          live: false,
+        },
+      }}
+      onSubmit={async (values) => {
+        action("onSubmit")(values);
+      }}
+    >
+      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
+        <Input name="name" label="Service name" />
+        <Checkbox name="agree" label="Notify on deploy" />
+        <RadioGroup
+          name="env"
+          label="Environment"
+          options={[
+            { label: "Prod", value: "prod" },
+            { label: "Stage", value: "stage" },
+          ]}
+        />
+        <Switch name="live" label="Live" />
+      </YStack>
+    </Form>
+  ),
+};
+
+export const ForceVisible: Story = {
+  name: "Force visible",
+  render: () => (
+    <Form formOptions={{ defaultValues: { name: "svc" } }}>
+      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
+        <Input name="name" label="Service name" />
+        <ContextualSaveBar forceVisible />
+      </YStack>
+    </Form>
+  ),
+};