@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -1,3 +1,4 @@
+import { getTokens, getVariableValue } from "tamagui";
 /**
  * The FloatingPanel family's anchoring and width contract (MPO-38, Clay's
  * ruling 2026-08-28).
@@ -13,7 +14,11 @@
  * content) — the floor that keeps a panel from coming out narrower than the
  * control that opened it.
  */
-import { waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset, type Knobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
@@ -21,6 +26,7 @@ import {
   type PanelWidthMode,
   measureDrawnRadius,
   panelAnchorOffset,
+  panelCoverOffset,
   resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
@@ -85,22 +91,86 @@ async function openAgainstTrigger(
 const trigger = { x: 16, y: 16, width: 240, height: 44 };
 
 describe("FloatingPanel anchoring (MPO-38 cover ruling)", () => {
-  it("attaches to the trigger with no gap", () => {
-    // The house token IS the contract; a member cannot opt back into 4px
-    // without changing the token every member reads.
+  // Clay, 2026-10-23: "That's not how it works it goes over the trigger".
+  // The family opens OVER its trigger like Select: the panel's top edge sits
+  // on the trigger's top edge, never on its bottom edge and never 4px clear.
+  it("has no gap of its own: the cover offset is minus the trigger's height", () => {
     expect(panelAnchorOffset).toBe(0);
+    expect(panelCoverOffset(44)).toBe(-44);
   });
 
-  it("places the panel top on the trigger's bottom edge, not 4px below it", async () => {
+  it("places the panel's top edge on the trigger's top edge", async () => {
     const result = await openAgainstTrigger({}, trigger);
     await waitFor(() => {
       const y = Number(result.getByTestId("anchor-floating").dataset.panelY);
-      // trigger.bottom = 16 + 44 = 60. Anything larger is daylight.
-      expect(y).toBe(60);
+      // trigger.top = 16. 60 (trigger.bottom) was the old attach-below rule.
+      expect(y).toBe(trigger.y);
     });
   });
 });
 
+describe("FloatingPanel and DropdownMenu open over their trigger (MPO-38 cover ruling)", () => {
+  // DropdownMenu IS FloatingPanel with its cover contract (at-least-trigger,
+  // contentPadding none); forms cannot import components, so the menu's
+  // panel is exercised through the exact props it passes. The components
+  // DropdownMenu spec measures the real menu the same way.
+  const coverTrigger = { x: 120, y: 200, width: 180, height: 36 };
+
+  function PanelHarness(props: {
+    widthMode?: PanelWidthMode;
+    contentPadding?: "default" | "none";
+  }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <FloatingPanel
+        open={open}
+        onOpenChange={setOpen}
+        trigger={<Button>Actions</Button>}
+        {...props}
+      >
+        <Text>Rename</Text>
+        <Text>Delete</Text>
+      </FloatingPanel>
+    );
+  }
+
+  async function openPanel(props: Parameters<typeof PanelHarness>[0]) {
+    const result = renderWithProviders(<PanelHarness {...props} />);
+    const reference = result.container.querySelector("[data-fp-reference]") as HTMLElement;
+    mockRect(reference, coverTrigger);
+    const button = result.container.querySelector("[role='button']") as HTMLElement;
+    fireEvent.mouseDown(button, { detail: 1 });
+    fireEvent.mouseUp(button, { detail: 1 });
+    fireEvent.click(button, { detail: 1 });
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeTruthy();
+    });
+    return document.querySelector('[data-testid="floating-panel-viewport"]') as HTMLElement;
+  }
+
+  it.each([
+    ["FloatingPanel", {}],
+    ["DropdownMenu", { widthMode: "at-least-trigger", contentPadding: "none" }],
+  ] as const)("%s: the panel's top edge equals the trigger's top edge", async (_name, props) => {
+    const viewport = await openPanel(props);
+    await waitFor(() => expect(viewport.style.top).toBe(`${coverTrigger.y}px`));
+    // It grows out of the trigger: the transform origin is the trigger's edge.
+    expect(viewport.style.transformOrigin.startsWith("top")).toBe(true);
+  });
+
+  it("the trigger's own label is the panel's first row, presentation only", async () => {
+    const viewport = await openPanel({});
+    const echo = viewport.querySelector("[data-fp-trigger-row]") as HTMLElement;
+    expect(echo).toBeTruthy();
+    expect(echo.textContent).toContain("Actions");
+    expect(echo.getAttribute("aria-hidden")).toBe("true");
+    const firstRow = Array.from(viewport.children).find((el) =>
+      (el as HTMLElement).textContent?.trim(),
+    );
+    expect(firstRow).toBe(echo);
+  });
+});
+
 describe("FloatingPanel width modes (MPO-38)", () => {
   it("resolves the deprecated boolean onto the three modes", () => {
     expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
@@ -371,8 +441,8 @@ describe("FloatingPanel drawn radius (MPO-129)", () => {
  * 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 });
+function RadiusHarness({ open }: { open: boolean }) {
+  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false });
   return (
     <div
       data-testid="radius-trigger"
@@ -382,10 +452,10 @@ function RadiusHarness({ open, compact }: { open: boolean; compact?: boolean })
   );
 }
 
-function panelRadius(overrides: Partial<Knobs>, compact?: boolean) {
+function panelRadius(overrides: Partial<Knobs>) {
   const result = renderWithProviders(
     <Preset overrides={overrides}>
-      <RadiusHarness open={false} compact={compact} />
+      <RadiusHarness open={false} />
     </Preset>,
   );
   const radius = result.getByTestId("radius-trigger").getAttribute("data-radius");
@@ -394,26 +464,23 @@ function panelRadius(overrides: Partial<Knobs>, compact?: boolean) {
 }
 
 describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-56)", () => {
-  it("takes the token while it fits the padding", () => {
+  it("takes the larger container key until it reaches the padding cap", () => {
     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");
+    expect(panelRadius({ borderRadius: "medium" })).toBe("14");
+    expect(panelRadius({ borderRadius: "large" })).toBe(
+      String(getVariableValue(getTokens().space.$4)),
+    );
   });
 
-  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("caps full at the panelPadding role", () => {
+    expect(panelRadius({ borderRadius: "full" })).toBe(
+      String(getVariableValue(getTokens().space.$4)),
+    );
   });
 
   it("keeps a smaller drawn trigger arc once open, never a larger one", async () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open={false} />
       </Preset>,
     );
@@ -424,7 +491,7 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
       backgroundColor: "rgb(255, 255, 255)",
     });
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open />
       </Preset>,
     );
@@ -433,12 +500,12 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
     Object.assign(anchor.style, { borderTopLeftRadius: "50px" });
     mockRect(anchor, { x: 0, y: 0, width: 240, height: 44 });
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open={false} />
       </Preset>,
     );
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open />
       </Preset>,
     );

package/src/FloatingPanel/useFloatingPanel.ts

@@ -1,6 +1,9 @@
+import { motionDurationMs, motionFor } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import type { Middleware, Placement } from "@floating-ui/react";
 import { autoUpdate, offset, shift, size, useFloating } from "@floating-ui/react";
 import {
+  OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   radiusStopFromToken,
   resolveRadiusClass,
@@ -16,7 +19,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { getTokenValue } from "tamagui";
+import { getTokenValue, type TransitionProp } from "tamagui";
 import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
 import { containsAcrossPanels } from "../shared/panelPortal";
 
@@ -37,15 +40,25 @@ function roundToDevicePixel(value: number): number {
   return Math.round(value * dpr) / dpr;
 }
 
-export const panelAnimationDuration = 180;
-export const panelGrowDuration = 200;
+export const panelAnimationDuration = motionDurationMs(motionFor("quick").overlay.transition);
+export const panelGrowDuration = panelAnimationDuration;
 export const panelViewportPadding = 10;
-/** Gap between trigger and panel. Clay's cover ruling (MPO-38) makes this
- * ZERO for the FloatingPanel family: the panel attaches to the trigger it
- * was opened from. Aliased to the house token so there is one source
- * (Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
+/** Gap between trigger and panel: ZERO for the FloatingPanel family (one
+ * source, Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
 export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
 
+/**
+ * Cover ruling (Clay, 2026-10-23: "it goes over the trigger"). A panel opened
+ * from a control opens OVER it, like Select: its top edge sits on the
+ * trigger's top edge (a drop-up's bottom edge on the trigger's bottom), the
+ * trigger's own label/value is the panel's first row, and it grows out of the
+ * trigger. Expressed as floating-ui's main-axis offset: minus the trigger's
+ * height, plus the attach gap (0). Free overlays keep their gap instead.
+ */
+export function panelCoverOffset(referenceHeight: number): number {
+  return panelAnchorOffset - referenceHeight;
+}
+
 /**
  * How a panel's width relates to the trigger it opened from (MPO-38).
  * Three declared modes, not a boolean:
@@ -58,7 +71,16 @@ export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
  *   narrower than the control you clicked is not reachable.
  */
 export type PanelWidthMode = "fit-content" | "match-trigger" | "at-least-trigger";
-export const panelTransition = `opacity ${panelAnimationDuration}ms ease-out, transform ${panelAnimationDuration}ms ease-out, top ${panelGrowDuration}ms ease-out, max-height ${panelGrowDuration}ms ease-out, height ${panelGrowDuration}ms ease-out`;
+export function panelTransitionFor(transition: TransitionProp | undefined): string {
+  if (!transition) return "none";
+  const timing =
+    cssAnimationConfig[transition as keyof typeof cssAnimationConfig] ?? cssAnimationConfig.medium;
+  return ["opacity", "transform", "top", "max-height", "height"]
+    .map((property) => `${property} ${timing}`)
+    .join(", ");
+}
+
+export const panelTransition = panelTransitionFor(motionFor("quick").overlay.transition);
 
 // ── Options ───────────────────────────────────────────────────
 
@@ -98,18 +120,13 @@ 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;
   /**
    * The panel opens at a point, not from the trigger's box (ContextMenu). It
    * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
    * value instead of dropping to the trigger's drawn arc.
    */
   freeOverlay?: boolean;
+  cover?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -155,6 +172,7 @@ export interface UseFloatingPanelReturn {
    */
   dropdownRadius: string | number;
   hasBorder: boolean;
+  panelTransition: string;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
 }
 
@@ -230,11 +248,12 @@ export function useFloatingPanel({
   wheelGrowRef,
   widthMode: widthModeProp,
   fitContent,
-  compact,
   freeOverlay = false,
+  cover = true,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
-  const { knobProps } = useResolvedKnobs({ compact });
+  // An overlay floats over the page: it never inherits a painted ancestor.
+  const { knobProps } = useResolvedKnobs({ painted: false });
   const hasBorder = knobProps.borderRadius.borderWidth > 0;
   // 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
@@ -325,9 +344,9 @@ export function useFloatingPanel({
       if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
       closingTimerRef.current = setTimeout(() => {
         setMounted(false);
-      }, panelAnimationDuration);
+      }, motionDurationMs(knobProps.motion.overlay.transition));
     }
-  }, [open, setupForOpen]);
+  }, [open, setupForOpen, knobProps.motion.overlay.transition]);
 
   useEffect(
     () => () => {
@@ -339,8 +358,15 @@ export function useFloatingPanel({
   // ── Floating UI setup ─────────────────────────────────────
 
   const defaultMiddleware: Middleware[] = [
-    // Cover ruling (MPO-38): the family ATTACHES to its trigger. Zero.
-    offset({ mainAxis: OVERLAY_ATTACH_GAP }),
+    // Cover ruling: the family opens OVER its trigger (top edge on the
+    // trigger's top edge). A free overlay keeps the anchor gap.
+    offset(({ rects }) =>
+      freeOverlay
+        ? OVERLAY_ANCHOR_GAP
+        : cover
+          ? panelCoverOffset(rects.reference.height)
+          : panelAnchorOffset,
+    ),
     // Horizontal collision handling: panels anchored near the right viewport
     // edge (e.g. a ColorPicker in the last table column) shift back into view
     // instead of clipping. Vertical placement is handled by computePlacement.
@@ -519,6 +545,7 @@ export function useFloatingPanel({
     setMounted,
     dropdownRadius,
     hasBorder,
+    panelTransition: panelTransitionFor(knobProps.motion.overlay.transition),
     knobProps,
   };
 }

package/src/Form/Form.stories.tsx

@@ -73,10 +73,6 @@ const meta: Meta<typeof Form> = {
       control: "number",
       description: "Debounce time for URL sync in milliseconds",
     },
-    compact: {
-      control: "boolean",
-      description: "Nested scale — compact density for dialogs/overlays (LC-73)",
-    },
   },
 };
 

package/src/Form/form.spec.tsx

@@ -3,9 +3,10 @@ import { act, fireEvent, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { FORM_READABLE_WIDTH, Surface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Button } from "../Button";
 import { Input } from "../fields/Input";
+import { Select } from "../fields/Select";
 import { Form, FormActions, useFormContext } from "./index";
 
 // Mock @multiplatform.one/router at top level
@@ -373,45 +374,91 @@ describe("Form", () => {
   });
 
   describe("layout recipes (DG-FORM-01/06, LC-73)", () => {
-    it("owns vertical rhythm from the space recipe, not sizeToken", () => {
+    it("owns vertical rhythm from the within-group role, not sizeToken", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ size: "large", space: "small" }}>
+        <Surface size="$5">
           <Form onSubmit={vi.fn()} aria-label="Layout Form">
             <YStack>Content</YStack>
           </Form>
-        </Preset>,
+        </Surface>,
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
-      expect(layout?.getAttribute("data-gap")).toBe("$2");
-      expect(layout?.getAttribute("data-size")).toBe("large");
-      expect(layout?.getAttribute("data-density")).toBe("comfortable");
+      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(layout?.getAttribute("data-size-token")).toBe("$5");
+      expect(layout?.hasAttribute("data-density")).toBe(false);
     });
 
-    it("compact nested scale steps space without changing size (density≠size)", () => {
+    it("size forwards a token to every field and keeps the rhythm on the role", () => {
       const result = renderWithProviders(
-        <Form compact onSubmit={vi.fn()}>
-          <YStack>Content</YStack>
+        <Form size="$3" onSubmit={vi.fn()}>
+          <Button action="submit" size="$5">
+            Save
+          </Button>
         </Form>,
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
-      expect(layout?.getAttribute("data-nested")).toBe("true");
-      expect(layout?.getAttribute("data-density")).toBe("compact");
-      expect(layout?.getAttribute("data-size")).toBe("medium");
-      expect(layout?.getAttribute("data-gap")).toBe("$2");
+      expect(layout?.getAttribute("data-size-token")).toBe("$3");
+      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(result.getByRole("button").getAttribute("data-size-token")).toBe("$3");
+    });
+
+    it('<Form size="$3"> renders every Input, Select trigger and submit Button at the $3 recipe', () => {
+      const recipe = sizeRecipeForToken("$3");
+      const options = ["a", "b", "c", "d", "e"].map((value) => ({ label: value, value }));
+      const result = renderWithProviders(
+        <Form size="$3" onSubmit={vi.fn()}>
+          <Input label="Name" name="name" />
+          <Select label="Pick" name="pick" options={options} />
+          <Button action="submit">Save</Button>
+        </Form>,
+      );
+      const inputBox = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const input = result.container.querySelector("input") as HTMLElement;
+      const trigger = result.container.querySelector("[role='combobox']") as HTMLElement;
+      const submit = result.getByRole("button") as HTMLElement;
+      expect(inputBox.className).toContain(`_h-${recipe.height}px`);
+      expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
+      expect(trigger.className).toContain(`_h-${recipe.height}px`);
+      expect(submit.className).toContain(`_h-${recipe.height}px`);
+      expect(submit.className).toContain(`_pl-${recipe.paddingHorizontal}px`);
+    });
+
+    it("the form column is the readable width token and its actions hug their label", () => {
+      const result = renderWithProviders(
+        <Form onSubmit={vi.fn()}>
+          <Input label="Name" name="name" />
+          <Button action="submit">Save</Button>
+        </Form>,
+      );
+      const layout = result.container.querySelector("[data-mpo-form-layout]") as HTMLElement;
+      expect(FORM_READABLE_WIDTH).toBeGreaterThanOrEqual(480);
+      expect(FORM_READABLE_WIDTH).toBeLessThanOrEqual(640);
+      expect(layout.className).toContain(`_maw-${FORM_READABLE_WIDTH}px`);
+      const submit = result.getByRole("button") as HTMLElement;
+      expect(submit.className).toContain("_als-flex-start");
+    });
+
+    it("a Form maxWidth ejects the readable width", () => {
+      const result = renderWithProviders(
+        <Form onSubmit={vi.fn()} maxWidth="100%">
+          <YStack>Content</YStack>
+        </Form>,
+      );
+      const layout = result.container.querySelector("[data-mpo-form-layout]") as HTMLElement;
+      expect(layout.className).not.toContain(`_maw-${FORM_READABLE_WIDTH}px`);
     });
 
-    it("FormActions hugs content and uses the space recipe", () => {
+    it("FormActions hugs content and uses the within-group role", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ space: "small", size: "large" }}>
+        <Surface size="$5">
           <FormActions>
             <Button action="submit">Save</Button>
           </FormActions>
-        </Preset>,
+        </Surface>,
       );
       const actions = result.container.querySelector("[data-mpo-form-actions]");
-      expect(actions?.getAttribute("data-gap")).toBe("$2");
-      expect(actions?.getAttribute("data-size")).toBe("large");
-      expect(actions?.getAttribute("data-density")).toBe("comfortable");
+      expect(actions?.getAttribute("data-gap")).toBe("$3");
+      expect(actions?.getAttribute("data-size-token")).toBe("$5");
     });
   });
 });

package/src/Form/index.tsx

@@ -1,5 +1,5 @@
 import { useUrlState } from "@multiplatform.one/router";
-import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { FORM_READABLE_WIDTH, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type FormApi, type FormOptions, useForm } from "@tanstack/react-form";
 import {
   type FormEvent,
@@ -13,6 +13,7 @@ import {
 import {
   Form as TamaguiForm,
   type FormProps as TamaguiFormProps,
+  type SizeTokens,
   XStack,
   YStack,
   isWeb,
@@ -86,7 +87,7 @@ export function useFormSaveMode(): FormSaveModeContextValue {
 
 export interface FormProps<TFormData, _TFormValidator = any> extends Omit<
   TamaguiFormProps,
-  "onSubmit"
+  "onSubmit" | "size"
 > {
   children: ReactNode;
   form?: FormApi<TFormData, any, any, any, any, any, any, any, any, any, any, any>;
@@ -111,12 +112,11 @@ export interface FormProps<TFormData, _TFormValidator = any> extends Omit<
    */
   validateOn?: FormValidateOn;
   /**
-   * Nested scale (LC-73). Steps space/density down one level and wraps
-   * descendants in a compact density Preset so fields inherit the same
-   * gaps without a per-field `compact` prop. Density/space still own
-   * gaps; size still owns control height (density≠size).
+   * Control size token every field in the form renders at (Tamagui's own
+   * `size`, e.g. `"$3"`), forwarded through a `<Surface>` ceiling (LC-78).
+   * Omitted = the ambient token. Spacing stays on the roles.
    */
-  compact?: boolean;
+  size?: SizeTokens;
   /**
    * Desk/record surfaces where the form IS the route (DG-ACT-06). Renders
    * {@link ContextualSaveBar} and puts fields in declarative save mode —
@@ -212,11 +212,11 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
   showErrorSummary = true,
   errorSummaryTitle,
   validateOn = "submit",
-  compact,
+  size,
   saveBar,
   ...tamaguiFormProps
 }: FormProps<TFormData, TFormValidator>) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs(size === undefined ? undefined : { size });
   const requiredMarkMode = mapHouseRequiredMarking(knobProps.requiredMarking);
   const formAutofocusOn = knobProps.formAutofocus === "on";
 
@@ -324,11 +324,12 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
               <YStack
                 data-mpo-form-layout=""
                 data-gap={knobProps.gap.gap}
-                data-density={knobProps.density}
-                data-size={knobProps.size}
-                data-nested={compact ? "true" : undefined}
+                data-size-token={knobProps.sizeToken}
                 width="100%"
                 minWidth={0}
+                // A readable column: fields and actions read as one group on a
+                // wide screen. `maxWidth` on the Form ejects (e.g. "100%").
+                maxWidth={(tamaguiFormProps.maxWidth as never) ?? FORM_READABLE_WIDTH}
                 {...knobProps.gap}
                 {...(tamaguiFormProps.flex != null ? { flex: tamaguiFormProps.flex as never } : {})}
               >
@@ -351,7 +352,7 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
     </FormContext.Provider>
   );
 
-  return compact ? <Preset overrides={{ density: "compact" }}>{formNode}</Preset> : formNode;
+  return size === undefined ? formNode : <Surface size={size}>{formNode}</Surface>;
 }
 
 export interface FormActionsProps {
@@ -371,8 +372,7 @@ export function FormActions({ children, gap }: FormActionsProps) {
     <XStack
       data-mpo-form-actions=""
       data-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       alignSelf="flex-start"
       alignItems="center"