@multiplatform.one/forms 7.79.0 → 7.81.0

package/src/Button/Button.glassPress.spec.tsx

@@ -0,0 +1,117 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 (FZ-8666): on native iOS a bar button's press is the system's. Clay
+ * on rv_c6369c2bab2ffea0: "Like actually use liquid glass it should have the
+ * same animated you know when you push it resizes like don't try to
+ * re-implement that let the native API do it." The glass is interactive and
+ * holds the glyph, and MPO layers no press fade, scale or resize on it. A bar
+ * glyph with no glass keeps MPO's press dim, which proves the instrument.
+ */
+
+import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { IconButton, IconButtonGroup } from "./index";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+
+const glass = vi.hoisted(() => ({ available: true }));
+vi.mock("./glass", () => {
+  function FakeGlassView({
+    glassEffectStyle,
+    isInteractive,
+    colorScheme: _colorScheme,
+    children,
+    ...props
+  }: Record<string, unknown>) {
+    return (
+      <div
+        data-glass=""
+        data-effect={glassEffectStyle as string}
+        data-interactive={String(isInteractive)}
+        {...props}
+      >
+        {children as never}
+      </div>
+    );
+  }
+  function FakeGlassContainer({ children }: { children?: unknown }) {
+    return <div data-glass-container="">{children as never}</div>;
+  }
+  return {
+    loadGlassView: () => (glass.available ? FakeGlassView : null),
+    loadGlassContainer: () => (glass.available ? FakeGlassContainer : null),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  glass.available = true;
+});
+
+const houseConfig = createDefaultThemeConfig();
+
+/** A press class that fades, scales or resizes the button. */
+const PRESS_MOTION = /^_(o|opacity|transform|scale|w|width|h|height)-0active-/;
+
+function Glyph({ size }: { size?: number }) {
+  return <svg data-glyph="" width={size} height={size} />;
+}
+
+function barRender(ui: ReactElement) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme="light" disableInjectCSS>
+      <Surface bar>{ui}</Surface>
+    </TamaguiProvider>,
+  );
+}
+
+function pressMotion(el: Element): string[] {
+  return Array.from(el.classList).filter((c) => PRESS_MOTION.test(c));
+}
+
+describe("LC-176: native glass answers its own press (FZ-8666)", () => {
+  it("a lone bar button sits in interactive glass with no MPO press motion", () => {
+    barRender(<IconButton icon={Glyph} aria-label="Search" />);
+    const button = screen.getByLabelText("Search");
+    expect(button.getAttribute("data-mp-icon-button")).toBe("glass");
+    const glassView = button.querySelector("[data-glass]")!;
+    expect(glassView.getAttribute("data-interactive")).toBe("true");
+    expect(glassView.querySelector("[data-glyph]")).not.toBeNull();
+    expect(pressMotion(button)).toEqual([]);
+  });
+
+  it("a bar group's buttons sit in one interactive capsule with no MPO press motion", () => {
+    barRender(
+      <IconButtonGroup>
+        <IconButton icon={Glyph} aria-label="Archive" />
+        <IconButton icon={Glyph} aria-label="Delete" />
+      </IconButtonGroup>,
+    );
+    const capsule = document.querySelector("[data-glass-container] [data-glass]")!;
+    expect(capsule.getAttribute("data-effect")).toBe("regular");
+    expect(capsule.getAttribute("data-interactive")).toBe("true");
+    for (const name of ["Archive", "Delete"]) {
+      const button = screen.getByLabelText(name);
+      expect(capsule.contains(button)).toBe(true);
+      expect(pressMotion(button)).toEqual([]);
+    }
+  });
+
+  it("without the glass module the bar glyph keeps MPO's press dim", () => {
+    glass.available = false;
+    barRender(<IconButton icon={Glyph} aria-label="Search" />);
+    const button = screen.getByLabelText("Search");
+    expect(button.getAttribute("data-mp-icon-button")).not.toBe("glass");
+    expect(pressMotion(button).some((c) => /^_(o|opacity)-0active-/.test(c))).toBe(true);
+  });
+});

package/src/Button/Button.iconButton.spec.tsx

@@ -112,6 +112,45 @@ function rest(el: Element, prefix: string): string[] {
     .sort();
 }
 
+describe("LC-176: one ink on a bold glyph (FZ-8649)", () => {
+  function Inked({ color, stroke }: { color?: string; stroke?: string }) {
+    return <svg data-glyph="" data-color={color} data-stroke={stroke} />;
+  }
+
+  it.each(SCHEMES)("%s: a bar glyph takes the bar tint on its fill and its stroke", (scheme) => {
+    houseRender(
+      <Surface bar>
+        <Button chromeless icon={Inked} aria-label="Menu" />
+        <Button chromeless icon={<Inked />} aria-label="Bell" />
+      </Surface>,
+      scheme,
+    );
+    for (const label of ["Menu", "Bell"]) {
+      const ink = glyphOf(label).getAttribute("data-color");
+      expect(ink).toBeTruthy();
+      expect(ink).not.toBe("currentColor");
+      expect(glyphOf(label).getAttribute("data-stroke")).toBe(ink);
+    }
+  });
+
+  it("a caller's colour stays on the fill and the stroke", () => {
+    houseRender(
+      <Surface bar>
+        <Button chromeless icon={<Inked color="red" />} aria-label="Bell" />
+      </Surface>,
+      "light",
+    );
+    expect(glyphOf("Bell").getAttribute("data-color")).toBe("red");
+    expect(glyphOf("Bell").getAttribute("data-stroke")).toBe("red");
+  });
+
+  it("a content glyph has no bar tint to pass, so it keeps currentColor", () => {
+    houseRender(<Button icon={Inked} aria-label="More" />, "light");
+    expect(glyphOf("More").hasAttribute("data-color")).toBe(false);
+    expect(glyphOf("More").getAttribute("data-stroke")).toBe("currentColor");
+  });
+});
+
 describe("LC-176: an icon-only Button is a bare glyph", () => {
   it.each(SCHEMES)("%s: in a bar, no fill and no border at rest, the bar tint as ink", (scheme) => {
     houseRender(

package/src/Button/IconButtonGroup.spec.tsx

@@ -76,7 +76,7 @@ function houseRender(ui: ReactElement) {
 }
 
 describe("LC-176: IconButtonGroup", () => {
-  it("with the web face switched on, iOS Safari's bar group is one capsule behind bare glyphs", () => {
+  it("iOS Safari's bar group is one capsule behind bare glyphs", () => {
     vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
     glass.available = true;
     houseRender(

package/src/Button/glass.spec.ts

@@ -1,9 +1,8 @@
 /**
  * @vitest-environment jsdom
  *
- * LC-176 / LC-266 (FZ-8666): no browser can draw Liquid Glass, so no browser
- * draws glass, iOS Safari included. The drawn face stays behind one switch in
- * `glass.ts` until Clay answers the compare.
+ * LC-176 / LC-266 (FZ-8666): iOS Safari keeps the drawn glass face (Clay's
+ * pick A on rv_c6369c2bab2ffea0); every other browser draws plain glyphs.
  */
 
 import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
@@ -20,6 +19,8 @@ const IPHONE =
 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();
+/** A press class that fades, scales or resizes the button. */
+const PRESS_MOTION = /^_(o|opacity|transform|scale|w|width|h|height)-0active-/;
 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";
 
@@ -61,7 +62,23 @@ function renderBar(ui: ReturnType<typeof createElement>) {
   );
 }
 
-describe("no glass on the web (LC-176)", () => {
+function renderBarRow() {
+  renderBar(
+    createElement(
+      "div",
+      null,
+      createElement(
+        IconButtonGroup,
+        null,
+        createElement(IconButton, { icon: Glyph, "aria-label": "Search" }),
+        createElement(IconButton, { icon: Glyph, "aria-label": "More" }),
+      ),
+      createElement(IconButton, { icon: Glyph, "aria-label": "Back" }),
+    ),
+  );
+}
+
+describe("glass on the web (LC-176)", () => {
   afterEach(() => {
     cleanup();
     vi.unstubAllGlobals();
@@ -70,25 +87,38 @@ describe("no glass on the web (LC-176)", () => {
   it.each([
     ["iOS Safari", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 }],
     ["iPadOS Safari", { userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 5 }],
+  ])(
+    "%s draws the glass face: one capsule for a bar group, a circle for a lone button",
+    (_browser, nav) => {
+      vi.stubGlobal("navigator", nav);
+      expect(loadGlassView()).toBe(WebGlassFace);
+      expect(loadGlassContainer()).toBeNull();
+      renderBarRow();
+      const capsule = document.querySelector("[data-mp-glass-capsule]");
+      expect(capsule).not.toBeNull();
+      expect(capsule!.querySelectorAll('[data-mp-glass="web"]')).toHaveLength(1);
+      expect(document.querySelectorAll('[data-mp-glass="web"]')).toHaveLength(2);
+      for (const name of ["Search", "More"])
+        expect(screen.getByLabelText(name).getAttribute("data-mp-icon-button")).not.toBe("glass");
+      const back = screen.getByLabelText("Back");
+      expect(back.getAttribute("data-mp-icon-button")).toBe("glass");
+      expect(back.querySelector('[data-mp-glass="web"]')).not.toBeNull();
+      // WebKit gives web content no system press: the face takes the web press
+      // plate, and nothing resizes or fades it.
+      const pressed = Array.from(back.classList).filter((c) => c.includes("0active-"));
+      expect(pressed.some((c) => c.startsWith("_bg-0active-"))).toBe(true);
+      expect(pressed.filter((c) => PRESS_MOTION.test(c))).toEqual([]);
+    },
+  );
+
+  it.each([
     ["desktop Safari", { userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 0 }],
     ["Android Chrome", { userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 }],
   ])("%s loads no glass and draws the plain glyph", (_browser, nav) => {
     vi.stubGlobal("navigator", nav);
     expect(loadGlassView()).toBeNull();
     expect(loadGlassContainer()).toBeNull();
-    renderBar(
-      createElement(
-        "div",
-        null,
-        createElement(
-          IconButtonGroup,
-          null,
-          createElement(IconButton, { icon: Glyph, "aria-label": "Search" }),
-          createElement(IconButton, { icon: Glyph, "aria-label": "More" }),
-        ),
-        createElement(IconButton, { icon: Glyph, "aria-label": "Back" }),
-      ),
-    );
+    renderBarRow();
     expect(document.querySelector("[data-mp-glass]")).toBeNull();
     expect(document.querySelector("[data-mp-glass-capsule]")).toBeNull();
     expect(document.querySelector('[data-mp-icon-button-group="bar"]')).not.toBeNull();
@@ -97,7 +127,7 @@ describe("no glass on the web (LC-176)", () => {
   });
 });
 
-describe("the drawn web face behind the switch", () => {
+describe("the drawn web face", () => {
   afterEach(cleanup);
 
   it("sits under the glyph it backs, which stays its sibling", () => {

package/src/Button/glass.ts

@@ -20,20 +20,13 @@ export type GlassContainerComponent = ComponentType<{
 export { isAppleTouchWeb } from "./webGlass";
 
 /**
- * LC-176 (FZ-8666): iOS Safari cannot draw Liquid Glass, so it draws no glass.
- * This is the one switch for the drawn face Clay asked for on
- * rv_3bb3f1f65d6b981f, off since his note on rv_d481d34557e702ef, until he
- * answers rv_c6369c2bab2ffea0.
- */
-const iosSafariGlassFace = false;
-
-/**
- * LC-176: the system Liquid Glass an icon button sits in on a bar. Only native
- * iOS 26 has it, from expo-glass-effect (`glass.native.ts`; Android probes
- * null), so the web draws the plain glyph.
+ * LC-176: the Liquid Glass an icon button sits in on a bar. Native iOS 26 has
+ * the system's, from expo-glass-effect (`glass.native.ts`; Android probes
+ * null). On the web only iOS Safari takes the drawn glass face (Clay's pick A
+ * on rv_c6369c2bab2ffea0, FZ-8666); every other browser draws the plain glyph.
  */
 export function loadGlassView(): GlassViewComponent | null {
-  return iosSafariGlassFace && isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
+  return isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
 }
 
 /** LC-176: the system's Liquid Glass container. Only iOS has it. */

package/src/Button/index.tsx

@@ -465,28 +465,40 @@ export function iconButtonGlyphPx(rowLinePx: number | undefined): number {
 /** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
 const INLINE_GLYPH_RATIO = 1.2;
 
+/**
+ * `ink` is the bar tint. It goes to the glyph as well as to its stroke, because
+ * a `themed` glyph fills with the theme's text colour unless told otherwise and
+ * the stroke would then outline it in a second colour (FZ-8649).
+ */
 function withGlyphWeight(
   icon: IconLike | undefined,
   size: number,
   weight: "regular" | "bold",
   floor = false,
+  ink?: string | null,
 ): IconLike | undefined {
   if (icon == null || icon === false) return icon;
+  const tint = ink ?? undefined;
   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, {
       ...(own == null || (floor && typeof own === "number" && own < size) ? { size } : undefined),
       ...(icon.props.weight == null ? { weight } : undefined),
-      ...boldStroke(resolved, icon.props.color),
+      ...(icon.props.color == null && tint ? { color: tint } : undefined),
+      ...boldStroke(resolved, icon.props.color ?? tint),
     });
   }
   if (typeof icon === "function" || (typeof icon === "object" && "$$typeof" in icon)) {
-    return createElement(icon as ComponentType<{ size?: number; weight?: string }>, {
-      size,
-      weight,
-      ...boldStroke(weight),
-    });
+    return createElement(
+      icon as ComponentType<{ size?: number; weight?: string; color?: string }>,
+      {
+        size,
+        weight,
+        ...(tint ? { color: tint } : undefined),
+        ...boldStroke(weight, tint),
+      },
+    );
   }
   return icon;
 }
@@ -850,8 +862,8 @@ export function Button({
   const labelLine = labelLinePx(knobProps.body.fontFamily);
   const glyphFloor = iconButtonGlyphPx(labelLine);
   // LC-176: on iOS 26 a bar's icon button sits in system Liquid Glass, the
-  // native bar button. Elsewhere, and on a binary without the module, it stays
-  // the bare tinted glyph; nothing re-creates the glass (FZ-8666).
+  // native bar button, and iOS Safari draws its web face. Elsewhere, and on a
+  // binary without the module, it stays the bare tinted glyph (FZ-8666).
   const glassGroup = groupGround === "glass";
   const GlassView =
     iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill && !glassGroup
@@ -911,7 +923,7 @@ export function Button({
   const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
   const glyph =
     barGlyph || inlineGlyph || framedCircle
-      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor)
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
       : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
@@ -998,7 +1010,7 @@ export function Button({
   ) : null;
   const glyphAfter =
     iconAfter && (barGlyph || inlineGlyph || framedCircle)
-      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>

package/src/Button/webGlass.ts

@@ -24,10 +24,11 @@ const webGlassBlur = {
 } as const;
 
 /**
- * LC-176: the drawn face `loadGlassView` can give iOS Safari, one circle for a
- * lone button or one capsule for an `IconButtonGroup`. Off by default: the
- * compare in `glass.ts` decides whether it stays. Its children stay siblings
- * above the layer (absolute, z -1 in the button's stacking context).
+ * LC-176: the drawn face `loadGlassView` gives iOS Safari, one circle for a
+ * lone button or one capsule for an `IconButtonGroup`. WebKit gives web content
+ * no system glass and no system press, so it takes the web press plate and
+ * nothing animates its size. Its children stay siblings above the layer
+ * (absolute, z -1 in the button's stacking context).
  */
 export function WebGlassFace({ style, children }: { style?: unknown; children?: ReactNode }) {
   const dark = isDarkThemeName(useThemeName());

package/src/FloatingPanel/FloatingPanel.iconCover.spec.tsx

@@ -0,0 +1,279 @@
+/**
+ * LC-112 icon trigger cover (FZ-8665 Round 45, reversing Round 37's X): a
+ * panel that covers the icon button it opened from sits exactly over the
+ * surface that button is seen on and repeats nothing. Its content starts at
+ * its top edge, a press outside closes it, and Escape closes it on the web.
+ */
+import { PlusIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { useState } from "react";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text, XStack } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+import { PanelHeader } from "./PanelHeader";
+
+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 AddPanel({ header = false }: { header?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      compactFace="menu"
+      triggerEcho={false}
+      iconCover
+      coverAlign="auto"
+      widthMode="fit-content"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Button icon={PlusIcon} aria-label="Add node" />}
+    >
+      {header ? (
+        <PanelHeader>
+          <Text>Add a node</Text>
+        </PanelHeader>
+      ) : (
+        <Text>Add a node</Text>
+      )}
+      <Button>Copy</Button>
+    </FloatingPanel>
+  );
+}
+
+/** An account menu opened from a 32pt avatar: a trigger with no `icon`. */
+function AvatarPanel() {
+  return (
+    <FloatingPanel
+      open
+      onOpenChange={() => {}}
+      anchorMode="cover-trigger"
+      compactFace="menu"
+      triggerEcho={false}
+      iconCover
+      coverAlign="auto"
+      widthMode="fit-content"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={
+        <span role="button" aria-label="Account">
+          AD
+        </span>
+      }
+    >
+      <Text>Sign out</Text>
+    </FloatingPanel>
+  );
+}
+
+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();
+});
+
+const buttonsIn = (panel: HTMLElement) =>
+  within(panel)
+    .getAllByRole("button")
+    .map((button) => button.textContent || button.getAttribute("aria-label"));
+
+/** Whatever sits above the content in the panel: a hidden scroll arrow at most. */
+const aboveContent = (panel: HTMLElement) => {
+  const children = [...panel.children] as HTMLElement[];
+  const content = children.findIndex((child) => child.textContent?.includes("Add a node"));
+  expect(content).toBeGreaterThanOrEqual(0);
+  return children.slice(0, content);
+};
+
+describe("LC-112 icon trigger cover on the web (FZ-8665)", () => {
+  const viewportWidth = () => document.documentElement.clientWidth || window.innerWidth;
+
+  it("covers the + from the button's top trailing corner and repeats nothing", 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);
+    expect(panel.style.top).toBe(`${button.y}px`);
+    expect(panel.style.left).toBe(`${button.x + button.width - 240}px`);
+    expect(within(panel).queryByRole("button", { name: "Close" })).toBeNull();
+    expect(within(panel).queryByRole("button", { name: "Add node" })).toBeNull();
+    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(panel.querySelector("[data-fp-icon-echo]")).toBeNull();
+  });
+
+  it("starts the content at the panel's top edge, with no band above it", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    for (const element of aboveContent(panel)) {
+      expect(element.textContent).toBe("");
+      expect(element.querySelector("button, [role='button']")).toBeNull();
+      expect(element.style.height).toBe("");
+    }
+  });
+
+  it("covers a grouped trigger's whole plate, with both edges, and shows none of its buttons", 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 />
+      </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`);
+    expect(panel.style.minWidth).toBe(`${plate.width}px`);
+    expect(buttonsIn(panel)).toEqual(["Copy"]);
+  });
+
+  it("closes on a press outside the panel", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    await open(result);
+    fireEvent.click(document.body);
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+  });
+
+  it("closes on Escape and hands focus back to the button", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const trigger = result.getByRole("button", { name: "Add node" });
+    trigger.focus();
+    await open(result);
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("puts a panel's title on the panel's normal padding, keeping clear of nothing", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 240);
+    const result = renderWithProviders(
+      <>
+        <AddPanel header />
+        <XStack
+          data-testid="normal-padding"
+          alignItems="center"
+          gap="$2"
+          paddingLeft="$4"
+          paddingRight="$4"
+          paddingTop="$4"
+        />
+      </>,
+    );
+    const panel = await open(result);
+    const header = panel.querySelector<HTMLElement>("[data-fp-panel-header]") as HTMLElement;
+    expect(header.className).toBe(result.getByTestId("normal-padding").className);
+    expect(header.style.minHeight).toBe("");
+  });
+
+  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("gives a keyboard its content and no extra stop", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    expect(buttonsIn(panel)).toEqual(["Copy"]);
+  });
+
+  it("opens up from the button's bottom edge near the bottom, still covering it", 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`);
+    expect(panel.style.transformOrigin).toBe("bottom left");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("covers a 32pt avatar at its 44pt target, its centre on the row-icon column (FZ-8480 GAP)", async () => {
+    const avatar = { x: 100, y: 18, width: 32, height: 32 };
+    measure(avatar, 240);
+    const result = renderWithProviders(<AvatarPanel />);
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+    const inset = (MIN_PRESS_TARGET - avatar.width) / 2;
+    expect(panel.style.left).toBe(`${avatar.x - inset}px`);
+    expect(panel.style.top).toBe(`${avatar.y - inset}px`);
+    // The avatar's centre sits half a press target in, the centre of a menu
+    // row's leading glyph slot.
+    expect(inset + avatar.width / 2).toBe(MIN_PRESS_TARGET / 2);
+  });
+});