@multiplatform.one/forms 7.71.0 → 7.72.0

package/dist/jsx/shared/floatingList.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","floatingList_exports","ScrollArrow","SyncFocusToOpen","clampDropdownRadius","scrollArrowThreshold","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_theme2","import_tamagui","import_InputParts","dropdownMaxRadiusTokenNum","fieldRadius","startsWith","num","Number","parseInt","slice","param","open","setFocused","FocusContext","useStyledContext","useEffect","direction","scrollRef","visible","arrowScrollDirRef","isUp","animationFrameRef","useRef","lastTimeRef","resumeTimerRef","hoveringRef","activeRef","selfScrollingRef","resumeDelay","stopLoop","useCallback","current","cancelAnimationFrame","startLoop","performance","now","tick","tick1","el","elapsed","px","Math","min","max","scrollTop","scrollHeight","clientHeight","requestAnimationFrame","openTimestampRef","handlePointerEnter","wasOverOnOpen","clearTimeout","setTimeout","handlePointerLeave","onScroll","onScroll2","addEventListener","passive","removeEventListener"],"sources":["../../../src/shared/floatingList.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","floatingList_exports","ScrollArrow","SyncFocusToOpen","clampDropdownRadius","scrollArrowThreshold","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_theme2","import_tamagui","import_InputParts","dropdownMaxRadiusTokenNum","fieldRadius","startsWith","num","Number","parseInt","slice","param","open","setFocused","FocusContext","useStyledContext","useEffect","direction","scrollRef","visible","arrowScrollDirRef","topOffset","bottomOffset","isUp","animationFrameRef","useRef","lastTimeRef","resumeTimerRef","hoveringRef","activeRef","selfScrollingRef","resumeDelay","stopLoop","useCallback","current","cancelAnimationFrame","startLoop","performance","now","tick","tick1","el","elapsed","px","Math","min","max","scrollTop","scrollHeight","clientHeight","requestAnimationFrame","openTimestampRef","handlePointerEnter","wasOverOnOpen","clearTimeout","setTimeout","handlePointerLeave","onScroll","onScroll2","addEventListener","passive","removeEventListener","panelFill","setPanelFill","useState","getComputedStyle","fill","backgroundColor"],"sources":["../../../src/shared/floatingList.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.71.0",
+  "version": "7.72.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.71.0",
-    "@multiplatform.one/router": "^7.71.0",
-    "@multiplatform.one/table-primitives": "^7.71.0",
-    "@multiplatform.one/theme": "^7.71.0",
+    "@multiplatform.one/platform": "^7.72.0",
+    "@multiplatform.one/router": "^7.72.0",
+    "@multiplatform.one/table-primitives": "^7.72.0",
+    "@multiplatform.one/theme": "^7.72.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +80,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.71.0",
-    "@multiplatform.one/storybook": "7.71.0",
-    "@multiplatform.one/test-utils": "7.71.0",
+    "@multiplatform.one/config": "7.72.0",
+    "@multiplatform.one/storybook": "7.72.0",
+    "@multiplatform.one/test-utils": "7.72.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/Button/index.tsx

@@ -7,6 +7,7 @@ import {
   createElement,
   isValidElement,
   useCallback,
+  useEffect,
   useId,
   useState,
   type ComponentType,
@@ -72,6 +73,7 @@ import { formatActionLabel } from "../actionLabel";
 import { formButtonColors, formCommonColors } from "../shared/colorRamps";
 import { warnBareDisabled, warnPositiveTabIndex, warnSizeRecipeEscape } from "../shared/devWarn";
 import { useControlGrouped } from "../shared/groupContext";
+import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { loadGlassView } from "./glass";
 import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
 import { useIconButtonGroupGround, useIconButtonGroupMember } from "./iconButtonGroupContext";
@@ -635,6 +637,17 @@ export function Button({
       : undefined;
   const paintedRadius = resolveControlRadius(recipe, radiusStop ?? "medium");
   const innerGap = paintedRadius.gap;
+  // LC-112 seamless cover (FZ-8438): a native menu covering this button
+  // repeats its arc, and the button's echo inside that menu draws no chrome.
+  const inPanelEcho = useInPanelEcho();
+  const reportRadius = usePanelTriggerRadiusReporter();
+  // A circle reports no cap: the menu takes half its short side.
+  const reportedRadius = circular ? Number.POSITIVE_INFINITY : paintedRadius.radius;
+  useEffect(() => {
+    if (reportRadius && !inPanelEcho && !Number.isNaN(reportedRadius)) {
+      reportRadius(reportedRadius);
+    }
+  }, [reportRadius, inPanelEcho, reportedRadius]);
   // The one Skeleton (forms), at the button's own recipe height.
   const boneHeight = nested ? knobProps.nestedControl.px : recipe.height;
   if (skeleton) {
@@ -1220,6 +1233,15 @@ export function Button({
             height: "100%",
           }
         : undefined)}
+      {...(inPanelEcho
+        ? {
+            borderColor: "transparent",
+            backgroundColor: "transparent",
+            elevation: undefined,
+            shadowColor: "transparent",
+            shadowOpacity: 0,
+          }
+        : undefined)}
       {...(resolvedRole ? { "data-mp-action-role": resolvedRole } : undefined)}
       {...(tier ? { "data-mp-tier": tier } : undefined)}
       {...(iconButton

package/src/FloatingPanel/FloatingPanel.echoStretch.spec.tsx

@@ -0,0 +1,67 @@
+/**
+ * LC-112 r3 (FZ-8438): when a consumer sets `panelWidth` and the panel opens
+ * wider than its field, the field's echo grows to the panel's end edge, so
+ * the value isn't cut short above rows that show it whole. A button echo, or
+ * an unset width, keeps the trigger's box.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { placeEchoOverTrigger } from "./index";
+
+function panel(field: boolean) {
+  const el = document.createElement("div");
+  const row = document.createElement("div");
+  row.setAttribute("data-fp-trigger-row", "");
+  row.style.width = "260px";
+  const visual = document.createElement("div");
+  const snapshot = document.createElement("div");
+  snapshot.style.width = "260px";
+  snapshot.appendChild(document.createElement(field ? "input" : "span"));
+  visual.appendChild(snapshot);
+  row.appendChild(visual);
+  el.appendChild(row);
+  document.body.appendChild(el);
+  return { el, row, snapshot };
+}
+
+const geometry = { triggerLeft: 16, triggerRight: 276, panelLeft: 16, panelWidth: 360 };
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("placeEchoOverTrigger stretch (LC-112 r3)", () => {
+  it("a field's echo grows from the field's start edge to the panel's end", () => {
+    const { el, row, snapshot } = panel(true);
+    placeEchoOverTrigger(el, geometry, { stretch: true });
+    expect(row.style.width).toBe("360px");
+    expect(snapshot.style.width).toBe("100%");
+    expect(row.style.translate).toBe("");
+  });
+
+  it("a panel slid to the start margin grows the echo only past the field's start", () => {
+    const { el, row } = panel(true);
+    placeEchoOverTrigger(el, { ...geometry, panelLeft: 10, panelWidth: 1420 }, { stretch: true });
+    expect(row.style.translate).toBe("6px 0");
+    expect(row.style.width).toBe("1414px");
+  });
+
+  it("an unset panelWidth keeps the trigger's box", () => {
+    const { el, row } = panel(true);
+    placeEchoOverTrigger(el, geometry);
+    expect(row.style.width).toBe("260px");
+  });
+
+  it("a button echo keeps its box, so a centred label never moves", () => {
+    const { el, row } = panel(false);
+    placeEchoOverTrigger(el, geometry, { stretch: true });
+    expect(row.style.width).toBe("260px");
+  });
+
+  it("a panel back at the trigger's width shrinks a stretched echo again", () => {
+    const { el, row, snapshot } = panel(true);
+    placeEchoOverTrigger(el, geometry, { stretch: true });
+    placeEchoOverTrigger(el, { ...geometry, panelWidth: 260 }, { stretch: true });
+    expect(row.style.width).toBe("260px");
+    expect(snapshot.style.width).toBe("");
+  });
+});

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -7,9 +7,12 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act } from "@testing-library/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { Button } from "../Button";
+import { Input as InputParts } from "../InputParts";
 import { OverlayStackProvider } from "../shared/overlayStack";
 import { MENU_MIN_WIDTH, type CompactFace } from "./compactFace";
+import type { PanelWidth } from "./panelWidth";
 import { FloatingPanel } from "./index.native";
 import { panelViewportPadding } from "./useFloatingPanel";
 
@@ -49,13 +52,22 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-function Menu({ face, attach = false }: { face?: CompactFace; attach?: boolean }) {
+function Menu({
+  face,
+  attach = false,
+  width,
+}: {
+  face?: CompactFace;
+  attach?: boolean;
+  width?: PanelWidth;
+}) {
   const [open, setOpen] = useState(false);
   return (
     <FloatingPanel
       open={open}
       onOpenChange={setOpen}
       compactFace={face}
+      {...(width === undefined ? null : { panelWidth: width })}
       {...(attach ? { anchorMode: "attach" as const, triggerEcho: false } : null)}
       triggerSizing="content"
       contentPadding="none"
@@ -207,6 +219,134 @@ describe("FloatingPanel native menu face (FZ-7830)", () => {
   });
 });
 
+function IconMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      coverAlign="auto"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Text>◐</Text>}
+      triggerA11y={{ label: "Appearance" }}
+    >
+      <Text>System</Text>
+    </FloatingPanel>
+  );
+}
+
+function ButtonMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      contentPadding="none"
+      trigger={<Button data-testid="pill">Status: All</Button>}
+      triggerA11y={{ label: "Filter status" }}
+    >
+      <Text>Open</Text>
+    </FloatingPanel>
+  );
+}
+
+function FieldMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      contentPadding="none"
+      trigger={
+        <InputParts>
+          <InputParts.Box data-testid="field-box">
+            <Text>United States</Text>
+          </InputParts.Box>
+        </InputParts>
+      }
+      triggerA11y={{ label: "Country" }}
+    >
+      <Text>Canada</Text>
+    </FloatingPanel>
+  );
+}
+
+const frame = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-surface"]');
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+const radiusAtoms = (px: number) =>
+  [`_bblr-${px}px`, `_bbrr-${px}px`, `_btlr-${px}px`, `_btrr-${px}px`].sort();
+
+describe("LC-112 seamless cover on native (FZ-8438)", () => {
+  it("opens an icon trigger's menu ON the button from its top trailing corner (rv_d86cc201997dffd4)", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<IconMenu />);
+    tap(result.getByRole("button", { name: "Appearance" }));
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+    expect(panel.style.left).toBe(`${trigger.x + trigger.width - MENU_MIN_WIDTH}px`);
+    expect(echo()).toBeNull();
+    expect(sheet()).toBeNull();
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(22));
+  });
+
+  it("keeps the shadow on an unclipped frame and clips inside it (FZ-8414)", () => {
+    const result = renderWithProviders(<IconMenu />);
+    tap(result.getByRole("button", { name: "Appearance" }));
+    const outer = frame() as HTMLElement;
+    expect(outer.className).not.toMatch(/(?:^| )_ox-hidden|_ov-hidden|_o-hidden/);
+    expect(getComputedStyle(outer).overflow).not.toBe("hidden");
+    const inner = outer.firstElementChild as HTMLElement;
+    expect(inner.className).toMatch(/hidden/);
+  });
+
+  it("echoes a field with no border or fill of its own and repeats the field's arc", () => {
+    trigger = { x: 20, y: 240, width: 300, height: 44 };
+    const result = renderWithProviders(<FieldMenu />);
+    const live = result.getByTestId("field-box");
+    const atom = corners(live).find((c) => c.startsWith("_btlr-")) as string;
+    expect(atom).toBeTruthy();
+    const token = atom.match(/^_btlr-t-radius-(.+)$/);
+    const drawn = token
+      ? Number(getVariableValue((getTokens().radius as Record<string, unknown>)[`$${token[1]}`]))
+      : Number(atom.match(/^_btlr-([\d.]+)px$/)?.[1]);
+    tap(result.getByRole("button", { name: "Country" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    const box = row.querySelector('[data-testid="field-box"]') as HTMLElement;
+    expect(box.className).toMatch(/_bbc-transparent/);
+    expect(box.className).toMatch(/_bg-transparent/);
+    expect(live.className).not.toMatch(/_bbc-transparent/);
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(Math.min(drawn, 22)));
+  });
+
+  it("echoes a labelled Button trigger with no border or fill of its own", () => {
+    trigger = { x: 20, y: 240, width: 140, height: 44 };
+    const result = renderWithProviders(<ButtonMenu />);
+    const live = result.getByTestId("pill");
+    tap(result.getByRole("button", { name: "Filter status" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    // The echo is the trigger's own box at the start edge, not the menu's width.
+    expect(row.style.width).toBe("140px");
+    expect(row.style.alignSelf).toBe("flex-start");
+    const pill = row.querySelector('[data-testid="pill"]') as HTMLElement;
+    expect(pill.className).toMatch(/_bbc-transparent|_btc-transparent/);
+    expect(pill.className).toMatch(/_bg-transparent/);
+    expect(live.className).not.toBe(pill.className);
+  });
+});
+
 /** The SHC account menu's shape: an avatar-sized trigger over rows that fill their width. */
 function AccountMenu() {
   const [open, setOpen] = useState(false);
@@ -263,3 +403,54 @@ describe("FloatingPanel native menu face width (FZ-8220)", () => {
     expect(menu()?.style.minWidth).toBe("320px");
   });
 });
+
+describe("FloatingPanel native menu face panelWidth (LC-112, FZ-8438 r3)", () => {
+  const room = 390 - 2 * panelViewportPadding;
+  const open = (width?: PanelWidth) => {
+    const result = renderWithProviders(<Menu face="menu" width={width} />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    return menu() as HTMLElement;
+  };
+
+  it('"content" is the default: the 250pt pull-down floor, up to the room', () => {
+    const panel = open();
+    expect(panel.style.minWidth).toBe(`${MENU_MIN_WIDTH}px`);
+    expect(panel.style.maxWidth).toBe(`${room}px`);
+    expect(panel.style.width).toBe("");
+  });
+
+  it('"trigger" is exactly the trigger\'s width', () => {
+    const panel = open("trigger");
+    expect([panel.style.minWidth, panel.style.width, panel.style.maxWidth]).toEqual([
+      "120px",
+      "120px",
+      "120px",
+    ]);
+  });
+
+  it('"screen" from a trigger in the gutter spans the gutters, start edge on the trigger\'s', () => {
+    const panel = open("screen");
+    const gutters = 390 - 2 * trigger.x;
+    expect(panel.style.width).toBe(`${gutters}px`);
+    layout(panel, gutters, 180);
+    expect(panel.style.left).toBe(`${trigger.x}px`);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+  });
+
+  it('"screen" from a trigger deep in the row fills the room, top edge on the trigger\'s', () => {
+    trigger = { x: 186, y: 240, width: 120, height: 44 };
+    const panel = open("screen");
+    expect(panel.style.width).toBe(`${room}px`);
+    layout(panel, room, 180);
+    expect(panel.style.left).toBe(`${panelViewportPadding}px`);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+  });
+
+  it("a number is a fixed width, capped at the room", () => {
+    expect(open(300).style.width).toBe("300px");
+  });
+
+  it("a number wider than the room stops at the margins", () => {
+    expect(open(900).style.width).toBe(`${room}px`);
+  });
+});

package/src/FloatingPanel/FloatingPanel.seamlessCover.spec.tsx

@@ -0,0 +1,237 @@
+/**
+ * LC-112 seamless cover (FZ-8438, Clay's rv_a07d4308a6c445b6 and
+ * rv_0ea65e640a0ef261 notes; rv_d86cc201997dffd4 for icon triggers). An open
+ * panel is ONE surface laid exactly over its trigger: same top edge, left
+ * edge and corner arc, the trigger's content echoed in place with no border,
+ * fill or divider of its own, drawn above the trigger.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+function measure(trigger: Rect, panelWidth = 240) {
+  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") || this.dataset.testid === "field") return rect;
+      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") ? 160 : 0;
+    },
+  );
+}
+
+/** A field the way a browser paints it: border, fill and a 10px arc. */
+function Field({ radius }: { radius: number }) {
+  return (
+    <div
+      data-testid="field"
+      role="combobox"
+      aria-expanded={false}
+      tabIndex={0}
+      style={{
+        borderTopLeftRadius: `${radius}px`,
+        borderRadius: `${radius}px`,
+        border: "1px solid rgb(200, 200, 200)",
+        borderBottom: "1px solid rgb(200, 200, 200)",
+        backgroundColor: "rgb(250, 250, 250)",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      Mar 5, 2026
+    </div>
+  );
+}
+
+function FieldPanel({ radius = 10 }: { radius?: number }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      contentPadding="none"
+      trigger={<Field radius={radius} />}
+    >
+      <Text>March 2026</Text>
+    </FloatingPanel>
+  );
+}
+
+function IconPanel({ align = "auto" }: { align?: "start" | "auto" }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      coverAlign={align}
+      widthMode="fit-content"
+      triggerSizing="content"
+      trigger={<Button aria-label="Appearance">◐</Button>}
+    >
+      <Text>System</Text>
+    </FloatingPanel>
+  );
+}
+
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+
+const radiusAtoms = (px: number) =>
+  [`_bblr-${px}px`, `_bbrr-${px}px`, `_btlr-${px}px`, `_btrr-${px}px`].sort();
+
+async function openField(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.click(result.getByTestId("field"), { detail: 0 });
+  const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+  return panel;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("LC-112 seamless cover: one surface over the field (FZ-8438)", () => {
+  const field = { x: 16, y: 42, width: 400, height: 40 };
+
+  it("lays the panel's top and start edges on the field's", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    await waitFor(() => expect(panel.style.top).toBe(`${field.y}px`));
+    expect(panel.style.left).toBe(`${field.x}px`);
+    const echo = panel.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo?.style.width).toBe(`${field.width}px`);
+    expect(echo?.style.height).toBe(`${field.height}px`);
+  });
+
+  it("draws the field's own arc at all four corners", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel radius={10} />);
+    const panel = await openField(result);
+    await waitFor(() => expect(corners(panel)).toEqual(radiusAtoms(10)));
+  });
+
+  it("keeps the field's arc past the container cap (full preset, 20px on a 40px field)", async () => {
+    measure(field);
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <FieldPanel radius={50} />
+      </Preset>,
+    );
+    const panel = await openField(result);
+    await waitFor(() => expect(corners(panel)).toEqual(radiusAtoms(20)));
+  });
+
+  it("echoes the field with no border, fill, shadow or divider of its own", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    const frame = await waitFor(() => {
+      const found = panel.querySelector<HTMLElement>("[data-fp-echo-frame]");
+      expect(found).not.toBeNull();
+      return found as HTMLElement;
+    });
+    expect(frame.textContent).toBe("Mar 5, 2026");
+    expect(frame.style.getPropertyValue("border-color")).toBe("transparent");
+    expect(frame.style.getPropertyPriority("border-color")).toBe("important");
+    expect(frame.style.getPropertyValue("background-color")).toBe("transparent");
+    expect(frame.style.getPropertyValue("box-shadow")).toBe("none");
+    const bottom = getComputedStyle(frame).borderBottomColor;
+    expect(["transparent", "rgba(0, 0, 0, 0)"]).toContain(bottom);
+    // Layout keeps the field's widths, so the echoed text sits where it did.
+    expect(getComputedStyle(frame).borderBottomWidth).toBe("1px");
+    const row = panel.querySelector<HTMLElement>("[data-fp-trigger-row]") as HTMLElement;
+    expect(row.style.backgroundColor).toBe(getComputedStyle(panel).backgroundColor);
+    // The live field keeps its chrome; only the echo drops it.
+    expect(result.getByTestId("field").style.backgroundColor).toBe("rgb(250, 250, 250)");
+  });
+
+  it("draws above the field: a fixed, stacked layer later in the document", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    await waitFor(() => expect(panel.style.top).toBe(`${field.y}px`));
+    expect(panel.style.position).toBe("fixed");
+    expect(Number(panel.style.zIndex)).toBeGreaterThan(0);
+    const live = result.getByTestId("field");
+    expect(live.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(live.contains(panel)).toBe(false);
+  });
+});
+
+describe("LC-112 icon trigger: the menu opens on its button (rv_d86cc201997dffd4)", () => {
+  it("opens from the button's top trailing corner at the end edge, with no echo row", async () => {
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const button = { x: viewportWidth - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    const result = renderWithProviders(<IconPanel />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.top).toBe(`${button.y}px`));
+    expect(panel.style.left).toBe(`${button.x + button.width - 200}px`);
+    expect(panel.style.transformOrigin).toBe("top right");
+    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("opens from the button's top leading corner where that fits", async () => {
+    const button = { x: 16, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    const result = renderWithProviders(<IconPanel />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.top).toBe(`${button.y}px`));
+    expect(panel.style.left).toBe(`${button.x}px`);
+    expect(panel.style.transformOrigin).toBe("top left");
+    expect(within(panel).queryByRole("button", { name: "Appearance" })).toBeNull();
+  });
+
+  it("slides up over its button near the bottom edge instead of opening a sheet", async () => {
+    const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
+    measure(button, 200);
+    const result = renderWithProviders(<IconPanel />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+    const top = parseFloat(panel.style.top);
+    expect(top).toBeLessThan(button.y);
+    expect(top + 160).toBeGreaterThanOrEqual(button.y + button.height);
+    expect(panel.style.left).toBe(`${button.x}px`);
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("never end-aligns a custom first row (triggerEcho off, coverAlign start): it collides to the sheet", async () => {
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const button = { x: viewportWidth - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    const result = renderWithProviders(<IconPanel align="start" />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    expect(await result.findByTestId("floating-panel-sheet")).toBeTruthy();
+  });
+});