@multiplatform.one/components 7.11.0 → 7.15.0

package/src/layouts/PaneScaffold.tsx

@@ -6,6 +6,12 @@
  * resolved size class rides a context down, so an inner scaffold reflows with
  * the outer one instead of splitting inside a stacked column.
  *
+ * The seam runs on one axis. `orientation="horizontal"` (the default) puts the
+ * panes side by side; `orientation="vertical"` puts `secondary` under
+ * `primary` (a console under a source pane, an editor under a page). The sash,
+ * its clamps, keyboard handling and the controlled-fraction contract are the
+ * same code with the axis swapped; only the dimension it reads changes.
+ *
  * Devs declare pane roles; the scaffold picks 1 vs 2 columns from the
  * canonical layout size class (`expanded` @ 860 = two-pane budget).
  *
@@ -64,10 +70,17 @@ const DEFAULT_MAX_FRACTION = 0.8;
 // ── PaneScaffold ──────────────────────────────────────────────────────────
 
 export type PaneRole = "primary" | "secondary";
+export type PaneOrientation = "horizontal" | "vertical";
 
 export interface PaneScaffoldProps extends Omit<XStackProps, "children"> {
   primary: ReactNode;
   secondary?: ReactNode;
+  /**
+   * Axis of the seam. `horizontal` (default) sets the panes side by side;
+   * `vertical` docks `secondary` under `primary`. A vertical scaffold splits
+   * the height its parent gives it, so the parent must be bounded.
+   */
+  orientation?: PaneOrientation;
   /**
    * Which pane to show when `narrowLayout` is `swap`. Default: `primary`.
    * List-detail on compact typically flips to `secondary` once an item is
@@ -122,6 +135,7 @@ const PaneSizeClassContext = createContext<LayoutSizeClass | null>(null);
 export function PaneScaffold({
   primary,
   secondary,
+  orientation = "horizontal",
   activePane: activePaneProp,
   narrowLayout: narrowLayoutProp,
   maxPanes: maxPanesProp,
@@ -150,6 +164,7 @@ export function PaneScaffold({
   // secondary by default leaves that content unreachable on a phone.
   const narrowLayout = narrowLayoutProp ?? (activePaneProp === undefined ? "stack" : "swap");
   const stacked = !split && hasSecondary && narrowLayout === "stack";
+  const vertical = orientation === "vertical";
   const [primaryFlex, secondaryFlex] = paneFlex;
 
   // flexBasis auto, not the flex:1 shorthand's 0%: react-native-web resets
@@ -170,6 +185,7 @@ export function PaneScaffold({
         data-testid="pane-scaffold"
         data-panes="2"
         data-pane-layout="stack"
+        data-orientation={orientation}
         data-size-class={sizeClass}
         data-sash="false"
         {...rest}
@@ -212,6 +228,7 @@ export function PaneScaffold({
         data-testid="pane-scaffold"
         data-panes="1"
         data-pane-layout="single"
+        data-orientation={orientation}
         data-size-class={sizeClass}
         {...rest}
       >
@@ -221,6 +238,7 @@ export function PaneScaffold({
   } else {
     content = (
       <XStack
+        flexDirection={vertical ? "column" : "row"}
         flexGrow={1}
         flexShrink={1}
         flexBasis="auto"
@@ -233,12 +251,14 @@ export function PaneScaffold({
         data-testid="pane-scaffold"
         data-panes="2"
         data-pane-layout="split"
+        data-orientation={orientation}
         data-size-class={sizeClass}
         data-sash={resizable ? "true" : "false"}
         {...rest}
       >
         {resizable ? (
           <ResizablePanes
+            vertical={vertical}
             primary={primary}
             secondary={secondary}
             primaryFlex={primaryFlex}
@@ -254,7 +274,7 @@ export function PaneScaffold({
               flex={primaryFlex}
               minWidth={0}
               minHeight={0}
-              {...(gapped ? undefined : paneHairlineEnd)}
+              {...(gapped ? undefined : vertical ? paneHairlineBottom : paneHairlineEnd)}
               data-testid="pane-primary"
             >
               {primary}
@@ -287,7 +307,21 @@ function clampFraction(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
 
+function axisSize(
+  vertical: boolean,
+  rect: { width?: number; height?: number } | null | undefined,
+): number {
+  return (vertical ? rect?.height : rect?.width) ?? 0;
+}
+
+function pointerPos(vertical: boolean, e: any): number {
+  return vertical
+    ? (e.clientY ?? e.nativeEvent?.pageY ?? 0)
+    : (e.clientX ?? e.nativeEvent?.pageX ?? 0);
+}
+
 function ResizablePanes({
+  vertical,
   primary,
   secondary,
   primaryFlex,
@@ -297,6 +331,7 @@ function ResizablePanes({
   fraction: fractionProp,
   onFractionChange,
 }: {
+  vertical: boolean;
   primary: ReactNode;
   secondary: ReactNode;
   primaryFlex: number;
@@ -308,23 +343,24 @@ function ResizablePanes({
 }) {
   const sashId = useId();
   const rtl = useDirection() === "rtl";
-  const dirSign = rtl ? -1 : 1;
+  // RTL mirrors the inline axis only; a vertical seam has no mirror.
+  const dirSign = !vertical && rtl ? -1 : 1;
   const defaultFraction = primaryFlex / Math.max(primaryFlex + secondaryFlex, 1);
   const [uncontrolled, setUncontrolled] = useState(defaultFraction);
   const fraction = clampFraction(fractionProp ?? uncontrolled, minFraction, maxFraction);
   const [hot, setHot] = useState(false);
   const [kbFocus, setKbFocus] = useState(false);
   const [dragging, setDragging] = useState(false);
-  const widthRef = useRef(0);
+  const sizeRef = useRef(0);
   const rowRef = useRef<any>(null);
-  const dragRef = useRef<{ startX: number; startFraction: number; moved: boolean } | null>(null);
+  const dragRef = useRef<{ start: number; startFraction: number; moved: boolean } | null>(null);
   const lastTapRef = useRef(0);
+  const resizeCursor = vertical ? "row-resize" : "col-resize";
 
-  const measureWidth = () => {
-    const node = rowRef.current;
-    const rect = node?.getBoundingClientRect?.();
-    if (rect?.width) widthRef.current = rect.width;
-  };
+  const measureSize = useCallback(() => {
+    const size = axisSize(vertical, rowRef.current?.getBoundingClientRect?.());
+    if (size) sizeRef.current = size;
+  }, [vertical]);
 
   ensureKeyboardModalityTracking();
 
@@ -356,22 +392,16 @@ function ResizablePanes({
     const prevUserSelect = document.body.style.userSelect;
     const prevCursor = document.documentElement.style.cursor;
     document.body.style.userSelect = "none";
-    document.documentElement.style.cursor = "col-resize";
+    document.documentElement.style.cursor = resizeCursor;
 
     const onMove = (e: PointerEvent) => {
       const session = dragRef.current;
-      let width = widthRef.current;
-      if (width <= 0) {
-        const rect = rowRef.current?.getBoundingClientRect?.();
-        if (rect?.width) {
-          width = rect.width;
-          widthRef.current = width;
-        }
-      }
-      if (!session || width <= 0) return;
-      const dx = (e.clientX - session.startX) * dirSign;
-      if (Math.abs(dx) > 2) session.moved = true;
-      commit(session.startFraction + dx / width);
+      if (sizeRef.current <= 0) measureSize();
+      const size = sizeRef.current;
+      if (!session || size <= 0) return;
+      const delta = (pointerPos(vertical, e) - session.start) * dirSign;
+      if (Math.abs(delta) > 2) session.moved = true;
+      commit(session.startFraction + delta / size);
     };
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", finishDrag);
@@ -383,7 +413,7 @@ function ResizablePanes({
       window.removeEventListener("pointerup", finishDrag);
       window.removeEventListener("pointercancel", finishDrag);
     };
-  }, [commit, dirSign, dragging, finishDrag]);
+  }, [commit, dirSign, dragging, finishDrag, measureSize, resizeCursor, vertical]);
 
   const onSashPointerDown = (e: any) => {
     if (e.button != null && e.button !== 0) return;
@@ -394,9 +424,9 @@ function ResizablePanes({
     } catch {
       /* native / no capture */
     }
-    measureWidth();
+    measureSize();
     dragRef.current = {
-      startX: e.clientX ?? e.nativeEvent?.pageX ?? 0,
+      start: pointerPos(vertical, e),
       startFraction: fraction,
       moved: false,
     };
@@ -406,21 +436,23 @@ function ResizablePanes({
 
   const onSashPointerMove = (e: any) => {
     if (!dragRef.current || isWeb) return;
-    const width = widthRef.current;
-    if (width <= 0) return;
-    const x = e.clientX ?? e.nativeEvent?.pageX ?? 0;
-    const dx = (x - dragRef.current.startX) * dirSign;
-    if (Math.abs(dx) > 2) dragRef.current.moved = true;
-    commit(dragRef.current.startFraction + dx / width);
+    const size = sizeRef.current;
+    if (size <= 0) return;
+    const delta = (pointerPos(vertical, e) - dragRef.current.start) * dirSign;
+    if (Math.abs(delta) > 2) dragRef.current.moved = true;
+    commit(dragRef.current.startFraction + delta / size);
   };
 
+  const keyBack = vertical ? "ArrowUp" : "ArrowLeft";
+  const keyForward = vertical ? "ArrowDown" : "ArrowRight";
+
   const onSashKeyDown = (e: any) => {
     const key = e.key as string;
     const step = e.shiftKey ? FRACTION_STEP_LARGE : FRACTION_STEP;
-    if (key === "ArrowLeft") {
+    if (key === keyBack) {
       e.preventDefault?.();
       commit(fraction - step * dirSign);
-    } else if (key === "ArrowRight") {
+    } else if (key === keyForward) {
       e.preventDefault?.();
       commit(fraction + step * dirSign);
     } else if (key === "Home") {
@@ -437,10 +469,12 @@ function ResizablePanes({
 
   const percent = Math.round(fraction * 100);
   const lineHot = hot || dragging || kbFocus;
+  const sashOverhang = -(SASH_VISUAL - hairlineWidth) / 2;
 
   return (
     <XStack
       ref={rowRef}
+      flexDirection={vertical ? "column" : "row"}
       flexGrow={1}
       flexShrink={1}
       flexBasis="auto"
@@ -449,7 +483,7 @@ function ResizablePanes({
       width="100%"
       alignItems="stretch"
       onLayout={(e) => {
-        widthRef.current = e.nativeEvent.layout.width;
+        sizeRef.current = axisSize(vertical, e.nativeEvent.layout);
       }}
     >
       <YStack
@@ -463,7 +497,7 @@ function ResizablePanes({
         {primary}
       </YStack>
       <YStack
-        width={hairlineWidth}
+        {...(vertical ? { height: hairlineWidth } : { width: hairlineWidth })}
         flexGrow={0}
         flexShrink={0}
         alignSelf="stretch"
@@ -472,16 +506,26 @@ function ResizablePanes({
       >
         <YStack
           position="absolute"
-          top={0}
-          bottom={0}
-          width={SASH_VISUAL}
-          left={-(SASH_VISUAL - hairlineWidth) / 2}
-          alignItems="center"
-          cursor="col-resize"
+          {...(vertical
+            ? {
+                left: 0,
+                right: 0,
+                height: SASH_VISUAL,
+                top: sashOverhang,
+                justifyContent: "center" as const,
+              }
+            : {
+                top: 0,
+                bottom: 0,
+                width: SASH_VISUAL,
+                left: sashOverhang,
+                alignItems: "center" as const,
+              })}
+          cursor={resizeCursor}
           userSelect="none"
           tabIndex={0}
           role="separator"
-          aria-orientation="vertical"
+          aria-orientation={vertical ? "horizontal" : "vertical"}
           aria-controls={sashId}
           aria-valuemin={Math.round(minFraction * 100)}
           aria-valuemax={Math.round(maxFraction * 100)}
@@ -508,12 +552,21 @@ function ResizablePanes({
           onBlur={() => setKbFocus(false)}
           onKeyDown={onSashKeyDown}
         >
-          <YStack
-            flex={1}
-            width={lineHot ? 2 : hairlineWidth}
-            backgroundColor={lineHot ? "$accentBackground" : "$borderColor"}
-            {...(lineHot ? undefined : hairline.vline)}
-          />
+          {vertical ? (
+            <YStack
+              alignSelf="stretch"
+              height={lineHot ? 2 : hairlineWidth}
+              backgroundColor={lineHot ? "$accentBackground" : "$borderColor"}
+              {...(lineHot ? undefined : hairline.line)}
+            />
+          ) : (
+            <YStack
+              flex={1}
+              width={lineHot ? 2 : hairlineWidth}
+              backgroundColor={lineHot ? "$accentBackground" : "$borderColor"}
+              {...(lineHot ? undefined : hairline.vline)}
+            />
+          )}
         </YStack>
       </YStack>
       <YStack

package/src/layouts/page.designLaw.spec.tsx

@@ -161,3 +161,23 @@ describe("density unpinned (LC-76)", () => {
     expect(screen.getByTestId("inner-section").getAttribute("data-density")).toBe("compact");
   });
 });
+
+describe("PageSection surface declares its container cap (DG-RAD-04)", () => {
+  it("the painted surface carries the knob stops its radius resolved from", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "full", space: "small" }}>
+        <PageSection surface title="Details" data-testid="details">
+          <></>
+        </PageSection>
+      </Preset>,
+    );
+    const surface = document.querySelector('[data-constraint-container="PageSection"]');
+    expect(surface?.getAttribute("data-radius-knob")).toBe("full");
+    expect(surface?.getAttribute("data-space-knob")).toBe("small");
+  });
+
+  it("a section without a surface makes no claim", () => {
+    renderWithProviders(<PageSection title="Plain" />);
+    expect(document.querySelector("[data-constraint-container]")).toBeNull();
+  });
+});

package/src/layouts/page.tsx

@@ -19,6 +19,7 @@ import {
   MIN_PRESS_TARGET,
   Preset,
   Surface,
+  containerCapProps,
   hairline,
   layoutBreakpoints,
   resolvePageTitleScale,
@@ -396,6 +397,7 @@ export function PageSection({
         ...knobProps.surface,
         ...knobProps.containerRadius,
         ...knobProps.panelPadding,
+        ...containerCapProps("PageSection", knobProps.borderRadius.borderRadius, knobProps.space),
       } as Partial<YStackProps>)
     : {};
 

package/src/layouts/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type React from "react";
 import { Fragment, useId, useState } from "react";
@@ -168,9 +169,7 @@ export function Sidebar({
                           cursor={pressable ? "pointer" : "default"}
                           userSelect="none"
                           onPress={item.onPress}
-                          {...(knobProps.transition
-                            ? { transition: knobProps.transition }
-                            : undefined)}
+                          {...transitionProps(knobProps.transition)}
                           {...(pressable
                             ? {
                                 role: "button" as const,

package/src/overlayElevation.spec.tsx

@@ -28,14 +28,16 @@ afterEach(cleanup);
 // same hole MPO-40 / MPO-44 / MPO-48 all fell through, one layer further in:
 // the fragment reaches the frame and still never reaches the pixel.
 
-/** Reference §8, tamagui-rendered-reference.md — the one dialog shadow. */
-const referenceOverlayShadow = "0px 12px 24px rgba(0,0,0,0.12)";
+/** Reference §8 dialog shadow: the overlay ladder's `$5` stop (MPO-99). */
+const dialogStopPaint = "0 12px 24px rgba(0,0,0,0.12)";
 /** Same §8 geometry and alpha, hue inverted — LC-85 forbids a dark umbra. */
-const referenceOverlayShadowDark = "0px 12px 24px rgba(255,255,255,0.12)";
-/** `webShadowLight.$1` — the in-page control stop every Button carries. */
-const controlStopPaint = "0 1px 2px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08)";
-/** `webShadowLight.$2` — `elevatedSurface`'s own overlay paint. */
-const elevatedSurfacePaint = "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)";
+const dialogStopPaintDark = "0 12px 24px rgba(255,255,255,0.12)";
+/** Reference §8 popper shadow: the overlay ladder's `$3` stop (MPO-99). */
+const popperStopPaint = "0 4px 8px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08)";
+/** `webShadowLight.$2` — the overlay ladder's default `small` stop. */
+const overlaySmallPaint = "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)";
+/** `webShadowLight.$4` — the control stop at elevation large. */
+const controlLargePaint = "0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)";
 
 function frame(id: string): HTMLElement {
   const el = document.querySelector(`[data-testid="${id}"]`);
@@ -61,9 +63,9 @@ function bgAtoms(id: string): string[] {
     .filter((c) => c.startsWith("_bg-"));
 }
 
-function renderDialogsBesideAButton() {
+function renderDialogsBesideAButton(elevation?: "small" | "medium" | "large") {
   renderWithProviders(
-    <Preset>
+    <Preset overrides={elevation ? { elevation } : undefined}>
       <Button testID="control">Save</Button>
       <Dialog modal open>
         <Dialog.Portal>
@@ -79,61 +81,49 @@ function renderDialogsBesideAButton() {
   );
 }
 
-describe("overlay elevation is a different distance off the surface (MPO-49)", () => {
-  it("DialogContent PAINTS the reference §8 shadow, not the $2 fragment underneath it", () => {
-    renderDialogsBesideAButton();
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadow);
-    expect(paintedShadow("dialog")).not.toBe(elevatedSurfacePaint);
-    expect(paintedShadow("dialog")).not.toBe(controlStopPaint);
+describe("overlay elevation is a different distance off the surface (MPO-49, MPO-96, MPO-99)", () => {
+  it("DialogContent paints the overlay ladder, reaching the reference §8 dialog shadow at large", () => {
+    renderDialogsBesideAButton("large");
+    expect(paintedShadow("dialog")).toBe(dialogStopPaint);
+    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
+    expect(paintedShadow("control")).toBe(controlLargePaint);
+  });
+
+  it("at medium the overlay paints the §8 popper stop, not the control's $2", () => {
+    renderDialogsBesideAButton("medium");
+    expect(paintedShadow("dialog")).toBe(popperStopPaint);
+    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
   });
 
-  it("the atom and the inline style agree — no dead §8 class over a live $2 paint", () => {
+  it("at the default stop the control is flat and the overlay still lifts", () => {
     renderDialogsBesideAButton();
-    // The atom half alone does NOT discriminate: it reads `_bxsh-0px12px24px…`
-    // with the defect present too, which is why a class-only probe passes
-    // against a frame painting `$2`. Pair it with the painted value.
+    expect(paintedShadow("control")).toBe("");
+    expect(paintedShadow("dialog")).toBe(overlaySmallPaint);
+  });
+
+  it("the atom and the inline style agree — no dead class under a different live paint", () => {
+    renderDialogsBesideAButton("large");
+    // The atom half alone does not discriminate (a class can name one shadow
+    // while the inline style paints another), so pair it with the painted value.
     expect(shadowAtoms("dialog")).toHaveLength(1);
     expect(shadowAtoms("dialog")[0]).toMatch(/^_bxsh-0px12px24px/);
     expect(paintedShadow("dialog")).toContain("12px 24px");
-  });
-
-  it("the dialog shadow differs from the Button shadow, and the Button keeps the $1 stop", () => {
-    renderDialogsBesideAButton();
-    // "differs" alone does not discriminate: with the defect present the
-    // dialog paints `$2` and the Button `$1`, which also differ. The §8 value
-    // itself is pinned by the first case in this file; here the control side
-    // is pinned to `$1` so a Button regression cannot fake this one either.
-    expect(paintedShadow("control")).toBe(controlStopPaint);
-    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
     expect(shadowAtoms("dialog")).not.toEqual(shadowAtoms("control"));
   });
 
-  it("AlertDialogContent wears the same §8 shadow — one dialog row, one distance", () => {
+  it("AlertDialogContent wears the same ladder stop as DialogContent — one dialog row, one distance", () => {
     // Tamagui's AlertDialog.Content IS Dialog.Content, and reference §8
     // carries a single dialog row. confirm-dialog-{destructive,gated,warning}
     // render through this frame.
-    renderDialogsBesideAButton();
-    expect(paintedShadow("alertdialog")).toBe(referenceOverlayShadow);
+    renderDialogsBesideAButton("large");
+    expect(paintedShadow("alertdialog")).toBe(dialogStopPaint);
     expect(paintedShadow("alertdialog")).toBe(paintedShadow("dialog"));
   });
 
   it("dark inverts the hue and keeps the §8 geometry; the ground steps up the ramp (LC-85)", () => {
-    renderWithProviders(
-      <Preset>
-        <Dialog modal open>
-          <Dialog.Portal>
-            <DialogContent testID="dialog">dialog</DialogContent>
-          </Dialog.Portal>
-        </Dialog>
-      </Preset>,
-    );
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadow);
-    expect(bgAtoms("dialog")).toEqual(["_bg-background"]);
-    cleanup();
-
     renderWithProviders(
       <Theme name="dark">
-        <Preset>
+        <Preset overrides={{ elevation: "large" }}>
           <Dialog modal open>
             <Dialog.Portal>
               <DialogContent testID="dialog">dialog</DialogContent>
@@ -143,12 +133,10 @@ describe("overlay elevation is a different distance off the surface (MPO-49)", (
       </Theme>,
     );
     // LC-85 DARK-ELEVATION-TINT: light-coloured shadow, never a black umbra.
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadowDark);
-    expect(paintedShadow("dialog")).not.toBe(referenceOverlayShadow);
+    expect(paintedShadow("dialog")).toBe(dialogStopPaintDark);
     expect(paintedShadow("dialog")).not.toMatch(/rgba\(0,\s*0,\s*0/);
     // resolveKnobs owns the dark ground: `overlayFill` steps the filled rest
-    // fill up the ramp under dark + elevation (LC-85). Asserted so a later
-    // change to that rule shows up here rather than silently on a board.
-    expect(bgAtoms("dialog")).toEqual(["_bg-color2"]);
+    // fill up the ramp under dark + elevation (LC-85).
+    expect(bgAtoms("dialog")).toEqual(["_bg-color4"]);
   });
 });

package/src/surfaces.spec.tsx

@@ -88,14 +88,14 @@ describe("SheetFrame overlay chrome", () => {
 });
 
 describe("DialogContent overlay elevation (MPO-49)", () => {
-  it("binds overlayElevation, elevate=false, and the §8 overlay shadow — not Tamagui $1 elevate", () => {
+  it("binds the overlay ladder through elevatedSurface with elevate=false, and hardcodes no shadow (MPO-99)", () => {
     const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "surfaces.tsx"), "utf8");
     const start = src.indexOf("// ── DialogContent");
     const end = src.indexOf("// ── DialogOverlay");
     const dialog = src.slice(start, end);
     expect(dialog).toContain("elevate={false}");
-    expect(dialog).toContain("overlayElevationShadow");
-    expect(dialog).toContain("rgba(0,0,0,0.12)");
+    expect(dialog).not.toContain("overlayElevationShadow");
+    expect(dialog).not.toContain("rgba(0,0,0,0.12)");
     expect(dialog).toContain("elevatedSurface");
     expect(dialog).toContain("containerRadius");
     expect(dialog).toContain("panelPadding");
@@ -122,9 +122,12 @@ describe("DialogContent overlay elevation (MPO-49)", () => {
 //   dialog elevation     defect Button/control `$1` -> `_bxsh-0px1px2px…`
 //                        fixed  reference §8        -> `_bxsh-0px12px24px…`
 //
+// Since MPO-99 the §8 value is the overlay ladder's `$5` stop, which the
+// dialog reaches at elevation large; the control paints `$4` there.
+//
 // A "differs from the Button" assertion does NOT discriminate: the Button
 // paints `0 6px 12px` from its own source in both states, so that comparison
-// passes with the defect present. Assert against the $1 CONTROL stop.
+// passes with the defect present. Assert against the CONTROL stop.
 
 function atomsWithPrefix(el: Element | null, prefix: string): string[] {
   if (!el) return [];
@@ -134,9 +137,9 @@ function atomsWithPrefix(el: Element | null, prefix: string): string[] {
     .sort();
 }
 
-/** The `$1` control paint — `webShadowLight.$1`, "0 1px 2px …" (resolveKnobs.ts). */
-const controlStopShadowAtom = /^_bxsh-0px1px2px/;
-/** Rendered reference §8 DialogContent — `rgba(0,0,0,0.12) 0 12px 24px`. */
+/** The `$4` control paint at elevation large — `webShadowLight.$4`, "0 10px 20px …". */
+const controlStopShadowAtom = /^_bxsh-0px10px20px/;
+/** The `$5` overlay stop at elevation large — reference §8 dialog shadow, "0 12px 24px …". */
 const overlayStopShadowAtom = /^_bxsh-0px12px24px/;
 
 describe("surfaces address $background at the FRAME (MPO-19 X5/X6)", () => {
@@ -164,9 +167,9 @@ describe("surfaces address $background at the FRAME (MPO-19 X5/X6)", () => {
 });
 
 describe("DialogContent paints the OVERLAY elevation stop, not the control one (MPO-49)", () => {
-  it("renders the reference §8 shadow and not the Button $1 stop", () => {
+  it("renders the reference §8 shadow at elevation large and not the Button $4 stop (MPO-99)", () => {
     renderWithProviders(
-      <Preset>
+      <Preset overrides={{ elevation: "large" }}>
         <Button testID="mpo-button-control">Save</Button>
         <Dialog modal open>
           <Dialog.Portal>
@@ -184,7 +187,7 @@ describe("DialogContent paints the OVERLAY elevation stop, not the control one (
     const dialogShadow = atomsWithPrefix(dialog, "_bxsh-");
     expect(dialogShadow, "DialogContent paints exactly one shadow atom").toHaveLength(1);
     expect(dialogShadow[0], "dialog wears the §8 overlay shadow").toMatch(overlayStopShadowAtom);
-    expect(dialogShadow[0], "dialog must not wear the $1 control stop").not.toMatch(
+    expect(dialogShadow[0], "dialog must not wear the $4 control stop").not.toMatch(
       controlStopShadowAtom,
     );
     expect(dialogShadow, "dialog and control are different distances off the surface").not.toEqual(

package/src/surfaces.tsx

@@ -7,7 +7,6 @@ import {
   Popover,
   Sheet,
   View,
-  isWeb,
   type DialogContentProps as TamaguiDialogContentProps,
   type DialogOverlayProps as TamaguiDialogOverlayProps,
   type TamaguiElement,
@@ -103,42 +102,16 @@ export const DialogContent = forwardRef<
   );
 });
 
-/**
- * Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1,
- * and not the `$2` fragment `elevatedSurface` carries either: that fragment's
- * web paint arrives as an INLINE style (`elevationPaint` emits
- * `style.boxShadow`, and Tamagui stamps `!important` only on pseudo atoms),
- * so a shadow expressed only as `shadow*` props is a dead class atom under a
- * live `$2` paint. The §8 value must land on the `style` prop too, replacing
- * the fragment's. Dark inverts the hue and keeps the geometry — LC-85
- * DARK-ELEVATION-TINT forbids a black umbra on a dark ground.
- */
-const overlayElevationShadow = {
-  light: {
-    shadowColor: "rgba(0,0,0,0.12)",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 1,
-    shadowRadius: 24,
-    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(0,0,0,0.12)" } } : null),
-  },
-  dark: {
-    shadowColor: "rgba(255,255,255,0.12)",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 1,
-    shadowRadius: 24,
-    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(255,255,255,0.12)" } } : null),
-  },
-} as const;
-
 const DialogContentInner = forwardRef<
   TamaguiElement,
   TamaguiDialogContentProps & { children?: ReactNode }
 >(function DialogContentInner({ children, ...props }, ref) {
   const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
   // ThemeableStack unstyled:false defaults `elevate: true`, which paints
-  // getElevation(size) — `$true` is the same $1 stop every Button carries.
-  // Bind the §8 overlay shadow instead. Geometry (panelPadding 18,
-  // containerRadius 9, border 1px) stays on the recipe fragments below.
+  // getElevation(size) — `$true` is a control stop. `elevate={false}` leaves
+  // the overlay ladder in `elevatedSurface` as the only shadow (MPO-99).
+  // Geometry (panelPadding 18, containerRadius 9, border 1px) stays on the
+  // recipe fragments below.
   return (
     <Dialog.Content
       ref={ref}
@@ -147,7 +120,6 @@ const DialogContentInner = forwardRef<
       {...knobProps.panelPadding}
       {...knobProps.gap}
       elevate={false}
-      {...overlayElevationShadow[knobProps.scheme]}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}
@@ -227,7 +199,6 @@ const AlertDialogContentInner = forwardRef<
       {...knobProps.panelPadding}
       {...knobProps.gap}
       elevate={false}
-      {...overlayElevationShadow[knobProps.scheme]}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}