@multiplatform.one/forms 7.72.0 → 7.74.0

package/src/Button/glass.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 / LC-266: on the web only iOS Safari takes the glass face (Clay on
+ * rv_3bb3f1f65d6b981f).
+ */
+
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { cleanup, render } from "@testing-library/react";
+import { createElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isAppleTouchWeb, loadGlassView } from "./glass";
+
+const IPHONE =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1";
+const MAC_SAFARI =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15";
+const houseConfig = createDefaultThemeConfig();
+const PIXEL =
+  "Mozilla/5.0 (Linux; Android 15; Pixel 9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36";
+
+describe("isAppleTouchWeb", () => {
+  it("an iPhone's Safari takes the glass face", () => {
+    expect(isAppleTouchWeb({ userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 })).toBe(
+      true,
+    );
+  });
+
+  it("iPadOS reports a Mac with touch, and is iOS", () => {
+    expect(
+      isAppleTouchWeb({ userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 5 }),
+    ).toBe(true);
+  });
+
+  it("a Mac, an Android phone and no navigator draw the bare glyph", () => {
+    expect(
+      isAppleTouchWeb({ userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 0 }),
+    ).toBe(false);
+    expect(isAppleTouchWeb({ userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 })).toBe(
+      false,
+    );
+    expect(isAppleTouchWeb(undefined)).toBe(false);
+  });
+});
+
+describe("loadGlassView on the web", () => {
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it("iOS Safari's glass circle sits under the glyph it backs", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    const Glass = loadGlassView();
+    expect(Glass).not.toBeNull();
+    const { container } = render(
+      createElement(
+        TamaguiProvider,
+        { config: houseConfig.tamagui, defaultTheme: "light", disableInjectCSS: true },
+        createElement(Glass!, { style: { position: "absolute" } }),
+      ),
+    );
+    const face = container.querySelector('[data-mp-glass="web"]') as HTMLElement | null;
+    expect(face).not.toBeNull();
+    expect(face!.style.zIndex).toBe("-1");
+  });
+
+  it("every other browser draws the bare glyph", () => {
+    vi.stubGlobal("navigator", { userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 });
+    expect(loadGlassView()).toBeNull();
+  });
+});

package/src/Button/glass.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from "react";
+import { isAppleTouchWeb, WebGlassFace } from "./webGlass";
 
 /** The slice of expo-glass-effect's `GlassView` an icon button draws. */
 export type GlassViewComponent = ComponentType<{
@@ -15,13 +16,17 @@ export type GlassContainerComponent = ComponentType<{
   children?: ReactNode;
 }>;
 
+export { isAppleTouchWeb } from "./webGlass";
+
 /**
  * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
- * Only iOS has it (`glass.native.ts`; the native module is Apple-only, so Android probes null); web, Android and GNOME draw the bare
- * tinted glyph.
+ * Native iOS draws it from expo-glass-effect (`glass.native.ts`; Android
+ * probes null). On the web only iOS Safari takes the glass face (Clay on
+ * rv_3bb3f1f65d6b981f: "Is there a way to have the buttons at the bottom be
+ * liquid glass if it's an iPhone"); every other browser draws the bare glyph.
  */
 export function loadGlassView(): GlassViewComponent | null {
-  return null;
+  return isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
 }
 
 /**

package/src/Button/iconButtonGroupContext.ts

@@ -4,7 +4,8 @@ const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : us
 
 /**
  * LC-176: the ground an `IconButtonGroup` paints under its buttons. `media`
- * is one shared material capsule and `glass` one shared Liquid Glass capsule,
+ * is one shared material capsule and `glass` one shared glass capsule (Liquid
+ * Glass on iOS 26, its web twin in iOS Safari),
  * so a button inside draws its bare glyph instead of its own circle.
  */
 export type IconButtonGroupGround = "media" | "glass" | null;

package/src/Button/index.tsx

@@ -34,7 +34,7 @@ import {
   ensureKeyboardModalityTracking,
   useBarSurface,
   useElevatedSurface,
-  useIdentityInkOnSurface,
+  useGlyphTintOnSurface,
   useResolvedKnobs,
   useTouchSurface,
   type ControlTier,
@@ -76,8 +76,11 @@ import { useControlGrouped } from "../shared/groupContext";
 import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { loadGlassView } from "./glass";
 import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+import { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "./circleGlyph";
 import { useIconButtonGroupGround, useIconButtonGroupMember } from "./iconButtonGroupContext";
 
+export { ICON_BUTTON_CIRCLE_GLYPH_RATIO };
+
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
  * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, icon, gap and radius
@@ -437,32 +440,48 @@ export function iconButtonGlyphPx(rowLinePx: number | undefined): number {
   return Math.max(ICON_BUTTON_GLYPH_PX, Math.round(rowLinePx / PHOSPHOR_INK_RATIO));
 }
 
+/** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
+const INLINE_GLYPH_RATIO = 1.2;
+
 /**
- * LC-176: a glyph on a circle the caller asked for (`circular`, `outlined`)
- * fills this share of the circle, the iOS Settings and Contacts leading-icon
- * ratio, never a small glyph lost in a big plate.
+ * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
+ * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
+ * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
+ * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
  */
-export const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+export const GLYPH_BOLD_STROKE_UNITS = 8;
 
-/** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
-const INLINE_GLYPH_RATIO = 1.2;
+function boldStroke(weight: "regular" | "bold", color = "currentColor") {
+  return weight === "bold"
+    ? {
+        stroke: color,
+        strokeWidth: GLYPH_BOLD_STROKE_UNITS,
+        strokeLinejoin: "round" as const,
+      }
+    : undefined;
+}
 
 function withGlyphWeight(
   icon: IconLike | undefined,
   size: number,
   weight: "regular" | "bold",
+  floor = false,
 ): IconLike | undefined {
   if (icon == null || icon === false) return icon;
-  if (isValidElement<{ size?: number; weight?: string }>(icon)) {
+  if (isValidElement<{ size?: number; weight?: string; color?: string }>(icon)) {
+    const resolved = (icon.props.weight ?? weight) as "regular" | "bold";
+    const own = icon.props.size;
     return cloneElement(icon, {
-      ...(icon.props.size == null ? { size } : undefined),
+      ...(own == null || (floor && typeof own === "number" && own < size) ? { size } : undefined),
       ...(icon.props.weight == null ? { weight } : undefined),
+      ...boldStroke(resolved, icon.props.color),
     });
   }
   if (typeof icon === "function" || (typeof icon === "object" && "$$typeof" in icon)) {
     return createElement(icon as ComponentType<{ size?: number; weight?: string }>, {
       size,
       weight,
+      ...boldStroke(weight),
     });
   }
   return icon;
@@ -572,7 +591,7 @@ export function Button({
   const parentScopeTheme = useTheme();
   const pageOutlineColor = parentScopeTheme.outlineColor?.val as string | undefined;
   const hostAccentInk = useAccentOnSurface();
-  const hostIdentityInk = useIdentityInkOnSurface();
+  const glyphTint = useGlyphTintOnSurface();
   const grouped = useControlGrouped();
   // LC-176 ICON-BUTTON: with no label, the button is its glyph. It paints no
   // plate at rest and takes the bar tint, unless the caller asked for a frame
@@ -697,7 +716,7 @@ export function Button({
   // Accent and intent buttons, chromeless, and grouped segments keep their
   // own contracts.
   const tier: ControlTier | undefined =
-    activeThemeName || chromeless || grouped
+    activeThemeName || chromeless || grouped || mediaPlate
       ? undefined
       : barSurface
         ? "plain"
@@ -810,7 +829,13 @@ export function Button({
   // The media plate is its own state ground; a toggle over media shows its
   // state in the glyph.
   const selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate;
-  const barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
+  // A glyph alone holds 3:1; beside a label both take the label's AA tint.
+  const barInk =
+    accentInk && chromeless && !selectedFill && !unavailable
+      ? labelled
+        ? glyphTint.label
+        : glyphTint.glyph
+      : null;
   const inlineGlyph = iconButton && inline === true && !nested;
   // LC-176: back's caret beside its label is a bar glyph too, and so is the
   // glyph on a plate (media, or the overlay's confirm).
@@ -828,6 +853,17 @@ export function Button({
       ? loadGlassView()
       : null;
   const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
+  // LC-176: a glyph on a plate takes the plate's on-colour at full strength,
+  // never the frame's quieter default: white on the media material, the text
+  // colour on a neutral circle.
+  const plateInk =
+    unavailable || barInk || outlinedInk
+      ? undefined
+      : mediaPlate || (iconButton && groupGround === "media")
+        ? "$color12"
+        : framedCircle && !activeThemeName
+          ? hostScoped({ color: "$color12" }).color
+          : undefined;
   const framedCirclePx =
     touch && typeof sizeProp !== "number"
       ? Math.max(sizeTokenPx(resolvedSize), MIN_PRESS_TARGET)
@@ -841,13 +877,22 @@ export function Button({
         : barGlyph
           ? touch
             ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize)
-            : // A pointer toolbar keeps its token box (LC-54); the glyph fills it
-              // up to the same floor.
-              Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
+            : iconButton
+              ? // A bare glyph has no plate to inset from, so it takes its box
+                // less a 2pt optical margin, up to the row's glyph: the SHC
+                // "+" at $3 reaches the bar's glyph, a $2 copy beside mono
+                // text stays in proportion.
+                Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 4))
+              : // A pointer toolbar keeps its token box (LC-54); the glyph fills
+                // it up to the same floor.
+                Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
           : recipe.iconSize;
+  // LC-176: a bar glyph is never smaller than its row, whatever px the caller
+  // passed (the DataTable toolbar's 14pt token icons).
+  const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
   const glyph =
     barGlyph || inlineGlyph || framedCircle
-      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight)
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor)
       : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
@@ -912,6 +957,7 @@ export function Button({
     props.color ??
     (unavailable ? disabledText.color : undefined) ??
     barInk ??
+    plateInk ??
     (textColor
       ? outlinedOnHost
         ? hostScoped({ color: textColor }).color
@@ -933,7 +979,7 @@ export function Button({
   ) : null;
   const glyphAfter =
     iconAfter && (barGlyph || inlineGlyph || framedCircle)
-      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>
@@ -1098,6 +1144,10 @@ export function Button({
       {...(inlineGlyph ? { marginInlineStart: "$2" as const } : undefined)}
       // The glass rounds itself, unclipped.
       {...(GlassView ? { borderRadius: 100000 } : undefined)}
+      // On the web the absolute glass circle needs its button as the
+      // containing block and stacking context, or it fills the page and
+      // paints over the glyph.
+      {...(GlassView && isWeb ? { position: "relative" as const, zIndex: 0 } : undefined)}
       {...(confirmPlate ? { borderRadius: 100000 } : undefined)}
       {...(mediaPlate
         ? {
@@ -1117,6 +1167,7 @@ export function Button({
       // text/icon color (currentColor) to the hue's readable text tier.
       {...(outlinedInk ? { color: outlinedInk } : undefined)}
       {...(barInk ? { color: barInk } : undefined)}
+      {...(plateInk ? { color: plateInk } : undefined)}
       // LC-40 DISABLED-VISIBLE: keepLabel washes the chrome (muted fill/
       // border) while label/glyphs re-anchor to the lowest AA text tier
       // (`color` inherits into currentColor icons); dimWhole dims the

package/src/Button/webGlass.ts

@@ -0,0 +1,42 @@
+import { isDarkThemeName } from "@multiplatform.one/theme";
+import { createElement } from "react";
+import { useThemeName, YStack } from "tamagui";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+
+type GlassNavigator = { userAgent?: string; platform?: string; maxTouchPoints?: number };
+
+/**
+ * LC-266: iOS Safari, iPadOS included (it reports itself as a Mac with a
+ * touch screen). The one place web asks which platform it is on, so an iPhone
+ * user gets the iPhone's bar buttons in the browser too.
+ */
+export function isAppleTouchWeb(
+  nav: GlassNavigator | undefined = typeof navigator === "undefined" ? undefined : navigator,
+): boolean {
+  if (!nav) return false;
+  if (/iPhone|iPad|iPod/.test(nav.userAgent ?? "")) return true;
+  return /Mac/.test(nav.platform ?? nav.userAgent ?? "") && (nav.maxTouchPoints ?? 0) > 1;
+}
+
+const webGlassMarker = { "data-mp-glass": "web" };
+
+/**
+ * LC-176: the Liquid Glass face iOS Safari draws under a bar's icon buttons,
+ * one circle for a lone button or one capsule for an `IconButtonGroup`. It is
+ * a layer under the glyphs (absolute, z -1 in the button's stacking context):
+ * a near-white material in light and a raised grey in dark, edged by a soft
+ * drop shadow alone, with the media plate's blur.
+ */
+export function WebGlassFace({ style }: { style?: unknown }) {
+  const dark = isDarkThemeName(useThemeName());
+  return createElement(YStack, {
+    pointerEvents: "none",
+    backgroundColor: dark ? "$color4" : "$color1",
+    opacity: 0.92,
+    shadowColor: "$shadowColor",
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 3 },
+    ...webGlassMarker,
+    style: { ...(style as object), zIndex: -1, ...MEDIA_PLATE_WEB_STYLE },
+  });
+}

package/src/FloatingPanel/FloatingPanel.iconEcho.spec.tsx

@@ -0,0 +1,297 @@
+/**
+ * LC-112 icon trigger echo (FZ-8480, Clay's rv_2607879d3bdaf9bf): a panel
+ * that covers the icon button it opened from draws that button again in its
+ * exact spot, same size and plate, as an X (Round 37: every icon trigger,
+ * the + and a menu's button alike). It closes the panel and reads "Close".
+ */
+import { PlusIcon, XIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, render, waitFor, within } from "@testing-library/react";
+import { useState } from "react";
+import { Surface, useBarSurface } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+import { usePanelIconEchoBox } from "./echoContext";
+import { PanelHeader } from "./PanelHeader";
+import type { IconEcho } from "./iconEcho";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+function measure(trigger: Rect, panelWidth = 240, panelHeight = 160, surface?: Rect) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  const rect = {
+    ...trigger,
+    top: trigger.y,
+    left: trigger.x,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  };
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference")) return rect;
+      if (surface && this.hasAttribute("data-fp-cover-surface")) {
+        return {
+          ...surface,
+          top: surface.y,
+          left: surface.x,
+          right: surface.x + surface.width,
+          bottom: surface.y + surface.height,
+          toJSON: () => ({}),
+        };
+      }
+      return original.call(this);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelWidth : 0;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelHeight : 0;
+    },
+  );
+}
+
+function EchoBoxProbe() {
+  const box = usePanelIconEchoBox();
+  return box ? (
+    <span
+      data-testid="echo-box"
+      data-height={box.height}
+      data-left={box.left}
+      data-right={box.right}
+    />
+  ) : null;
+}
+
+function AddPanel({ kind = "close", header = false }: { kind?: IconEcho; header?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      compactFace="menu"
+      triggerEcho={false}
+      iconEcho={kind}
+      coverAlign="auto"
+      widthMode="fit-content"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Button icon={PlusIcon} aria-label="Add node" />}
+    >
+      {header ? (
+        <PanelHeader>
+          <Text>Add a node</Text>
+          <EchoBoxProbe />
+        </PanelHeader>
+      ) : (
+        <Text>Add a node</Text>
+      )}
+      <Button>Copy</Button>
+    </FloatingPanel>
+  );
+}
+
+const glyphPath = (node: Element | null | undefined) =>
+  node?.querySelector("svg path")?.getAttribute("d");
+
+async function open(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.click(result.getByRole("button", { name: "Add node" }), { detail: 0 });
+  const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+  await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+  return panel;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("LC-112 icon trigger echo on the web (FZ-8480)", () => {
+  const viewportWidth = () => document.documentElement.clientWidth || window.innerWidth;
+
+  it("draws the + again as an X on the button's exact box at the panel's top trailing corner", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 240);
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    const panelLeft = button.x + button.width - 240;
+    expect(panel.style.top).toBe(`${button.y}px`);
+    expect(panel.style.left).toBe(`${panelLeft}px`);
+    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
+    expect(row.style.order).toBe("-1");
+    expect(row.style.height).toBe(`${button.height}px`);
+    // The X shares the content's first row, like a sheet's close button: it
+    // takes no height of its own.
+    expect(row.getAttribute("data-fp-icon-echo")).toBe("overlay");
+    const borderTop = parseFloat(getComputedStyle(panel).borderTopWidth) || 0;
+    expect(row.style.marginBottom).toBe(`${-(button.height - borderTop)}px`);
+    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
+    expect(box.style.width).toBe(`${button.width}px`);
+    expect(box.style.height).toBe(`${button.height}px`);
+    expect(box.style.marginLeft).toBe(`${button.x - panelLeft}px`);
+    const echo = within(panel).getByRole("button", { name: "Close" });
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(echo)).toBe(glyphPath(x.container));
+    x.unmount();
+    expect(glyphPath(echo)).not.toBe(glyphPath(result.getByRole("button", { name: "Add node" })));
+    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
+  });
+
+  it("renders the echo on the trigger's bar surface, so it keeps the bar button's plate", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    function BarProbe({ icon: _icon, ...rest }: { icon?: unknown; [key: string]: unknown }) {
+      const bar = useBarSurface();
+      const press = rest.onPress as (() => void) | undefined;
+      return (
+        <button
+          type="button"
+          aria-label={rest["aria-label"] as string}
+          data-bar={String(bar)}
+          onClick={() => press?.()}
+        />
+      );
+    }
+    const result = renderWithProviders(
+      <Surface bar>
+        <FloatingPanel
+          open
+          onOpenChange={() => {}}
+          anchorMode="cover-trigger"
+          compactFace="menu"
+          triggerEcho={false}
+          iconEcho="close"
+          coverAlign="auto"
+          widthMode="fit-content"
+          triggerSizing="content"
+          trigger={<BarProbe icon={PlusIcon} aria-label="Add node" />}
+        >
+          <Text>Add a node</Text>
+        </FloatingPanel>
+      </Surface>,
+    );
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    expect(within(panel).getByRole("button", { name: "Close" }).getAttribute("data-bar")).toBe(
+      "true",
+    );
+  });
+
+  it("covers a grouped trigger's whole plate, only the pressed trigger showing as its X", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    const plate = { x: button.x - 100, y: 12, width: 144, height: 44 };
+    measure(button, 120, 160, plate);
+    const result = renderWithProviders(
+      <div data-fp-cover-surface="">
+        <Button icon={PlusIcon} aria-label="Search" />
+        <AddPanel kind="menu" />
+      </div>,
+    );
+    const panel = await open(result);
+    // The plate is wider than the menu, so the menu takes the plate's width
+    // and both edges.
+    expect(panel.style.left).toBe(`${plate.x}px`);
+    expect(panel.style.top).toBe(`${plate.y}px`);
+    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
+    // The band covers the whole plate; the group's other buttons are covered,
+    // not echoed.
+    expect(row.getAttribute("data-fp-icon-echo")).toBe("band");
+    expect(row.style.height).toBe(`${plate.height}px`);
+    expect(row.querySelector("[data-fp-group-echo]")).toBeNull();
+    expect(within(panel).queryByRole("button", { name: "Search" })).toBeNull();
+    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
+    expect(box.style.marginLeft).toBe(`${button.x - plate.x}px`);
+    expect(within(panel).getByRole("button", { name: "Close" })).toBeTruthy();
+  });
+
+  it("closes the panel when the echo is pressed", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    fireEvent.click(within(panel).getByRole("button", { name: "Close" }));
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+  });
+
+  it("turns a menu trigger into an X too, in its own band", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel kind="menu" />);
+    const panel = await open(result);
+    const echo = within(panel).getByRole("button", { name: "Close" });
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(echo)).toBe(glyphPath(x.container));
+    x.unmount();
+    // A menu's rows run the full width, so its X takes its own band.
+    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
+    expect(row.getAttribute("data-fp-icon-echo")).toBe("band");
+    expect(row.style.marginBottom).toBe("");
+  });
+
+  it("puts a panel header on the X's line, clear of the X", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 240);
+    const result = renderWithProviders(<AddPanel header />);
+    const panel = await open(result);
+    expect(panel.querySelector("[data-fp-panel-header]")).toBeTruthy();
+    const box = await within(panel).findByTestId("echo-box");
+    // The header takes the X's height, and the X sits at the end edge, so it
+    // keeps the X's whole box clear there: from the X's start to the panel's end.
+    const panelLeft = button.x + button.width - 240;
+    expect(box.dataset.height).toBe(`${button.height}`);
+    expect(box.dataset.left).toBe("0");
+    expect(box.dataset.right).toBe(`${240 - (button.x - panelLeft)}`);
+  });
+
+  it("keeps a content-sized trigger on a centring row's line", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const centred = renderWithProviders(
+      <div style={{ display: "flex", flexDirection: "row", alignItems: "center", height: 60 }}>
+        <AddPanel />
+      </div>,
+    );
+    const inRow = centred.container.querySelector<HTMLElement>(
+      "[data-fp-reference]",
+    ) as HTMLElement;
+    await waitFor(() => expect(getComputedStyle(inRow).alignSelf).not.toBe("flex-start"));
+    centred.unmount();
+    const column = renderWithProviders(
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "stretch" }}>
+        <AddPanel />
+      </div>,
+    );
+    const inColumn = column.container.querySelector<HTMLElement>(
+      "[data-fp-reference]",
+    ) as HTMLElement;
+    expect(getComputedStyle(inColumn).alignSelf).toBe("flex-start");
+  });
+
+  it("comes last in the document, so a keyboard open lands on the content first", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    const buttons = within(panel).getAllByRole("button");
+    expect(buttons.map((b) => b.textContent || b.getAttribute("aria-label"))).toEqual([
+      "Copy",
+      "Close",
+    ]);
+  });
+
+  it("opens up from the button's bottom edge near the bottom, the echo on the bottom row", async () => {
+    const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
+    measure(button, 240, 300);
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    const frame = getComputedStyle(panel);
+    const borders =
+      (parseFloat(frame.borderTopWidth) || 0) + (parseFloat(frame.borderBottomWidth) || 0);
+    expect(parseFloat(panel.style.top) + 300 + borders).toBe(button.y + button.height);
+    expect(panel.style.left).toBe(`${button.x}px`);
+    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
+    expect(row.style.order).toBe("1");
+    expect(panel.style.transformOrigin).toBe("bottom left");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+});