@multiplatform.one/forms 7.80.0 → 7.81.1

package/dist/jsx/FloatingPanel/iconEcho.native.js

@@ -1,116 +0,0 @@
-"use strict";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var iconEcho_exports = {};
-__export(iconEcho_exports, {
-  ICON_ECHO_TEST_ID: () => ICON_ECHO_TEST_ID,
-  iconEchoElement: () => iconEchoElement,
-  iconEchoOverlays: () => iconEchoOverlays
-});
-module.exports = __toCommonJS(iconEcho_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("@phosphor-icons/react");
-var import_react2 = require("react");
-var import_theme = require("@multiplatform.one/theme");
-var import_tamagui = require("tamagui");
-var import_circleGlyph = require("../Button/circleGlyph.native.js");
-var import_t = require("../shared/t.native.js");
-var ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
-var DROPPED_PROPS = ["id", "onLongPress", "onKeyDown", "onContextMenu", "aria-haspopup", "aria-expanded", "aria-controls", "aria-describedby", "tooltip"];
-function iconEchoOverlays(kind, up) {
-  return kind === "close" && !up;
-}
-function iconEchoElement(trigger, kind, onClose, surface) {
-  var echo = echoOf(trigger, kind, onClose);
-  if (echo == null || !surface) return echo;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SurfaceContext.Provider, {
-    ...surface,
-    children: echo
-  });
-}
-function echoOf(trigger, _kind, onClose) {
-  if (! /* @__PURE__ */(0, import_react2.isValidElement)(trigger)) return null;
-  var props = trigger.props;
-  var label = (0, import_t.t)("Close");
-  var dropped = Object.fromEntries(DROPPED_PROPS.map(function (name) {
-    return [name, void 0];
-  }));
-  if (props.icon != null) {
-    return /* @__PURE__ */(0, import_react2.cloneElement)(trigger, {
-      ...dropped,
-      ref: null,
-      icon: import_react.XIcon,
-      "aria-label": label,
-      onPress: onClose,
-      testID: ICON_ECHO_TEST_ID,
-      "data-testid": ICON_ECHO_TEST_ID
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CircleClose, {
-    label,
-    onClose
-  });
-}
-var avatarPlate = "$selectedBackground";
-var circleGlyphFallbackPx = 18;
-function CircleClose(param) {
-  var {
-    label,
-    onClose
-  } = param;
-  var _ref;
-  var _theme_selectedColor, _theme_color;
-  var theme = (0, import_tamagui.useTheme)();
-  var [side, setSide] = (0, import_react2.useState)(0);
-  var ink = (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    role: "button",
-    "aria-label": label,
-    tabIndex: 0,
-    cursor: "pointer",
-    width: "100%",
-    height: "100%",
-    borderRadius: 1e5,
-    backgroundColor: avatarPlate,
-    alignItems: "center",
-    justifyContent: "center",
-    pressStyle: {
-      opacity: 0.6
-    },
-    onPress: onClose,
-    onLayout: function onLayout(event) {
-      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));
-    },
-    testID: ICON_ECHO_TEST_ID,
-    "data-testid": ICON_ECHO_TEST_ID,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-      size: side > 0 ? Math.round(side * import_circleGlyph.ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,
-      weight: "bold",
-      color: ink,
-      ...(0, import_circleGlyph.boldStroke)("bold", typeof ink === "string" ? ink : void 0),
-      "aria-hidden": true
-    })
-  });
-}
-//# sourceMappingURL=iconEcho.native.js.map

package/dist/jsx/FloatingPanel/iconEcho.native.js.map

@@ -1 +0,0 @@
-{"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","iconEcho_exports","ICON_ECHO_TEST_ID","iconEchoElement","iconEchoOverlays","module","exports","import_jsx_runtime","require","import_react","import_react2","import_theme","import_tamagui","import_circleGlyph","import_t","DROPPED_PROPS","kind","up","trigger","onClose","surface","echo","echoOf","jsx","SurfaceContext","Provider","children","_kind","isValidElement","props","label","t","dropped","fromEntries","map","icon","cloneElement","ref","XIcon","onPress","testID","CircleClose","avatarPlate"],"sources":["../../../src/FloatingPanel/iconEcho.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAcC,cAAA;AACvB,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAA0C;AACnD,IAAAC,iBAAmB,GAAAJ,MAAA,CAAYK,mBAAA;AAC/B,IAAAC,YAAS,GAAAN,MAAY,CAAAO,SAAA,CAAAC,cAAA;AACrB,IAAAC,QAAS,GAAAA,CAAAC,MAAS,EAAAC,GAAA;EAoDT,SAAAC,IAAA,IAAAD,GAAA,EAzCFZ,SAAM,CAAAW,MAAA,EAAAE,IAAoB;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAEjC;AAAsB,IACpBC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EACA,IAAAF,IAAA,WAAAA,IAAA,wBAAAA,IAAA;IACA,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GACA,KAAAX,YAAA,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACAnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACA;EACA,OAAAE,EAAA;AAAA;AACA,IACAM,YAAA,GAAAC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AACF,IAAAE,gBAAA;AAQOhB,QAAA,CAASgB,gBAAA,EAAiB;EAC/BC,iBAAgB,EAAAA,CAAA,KAAAA,iBAAY;EAC9BC,eAAA,EAAAA,CAAA,KAAAA,eAAA;EAWOC,gBAAS,EAAAA,CAAA,KACdA;AAKA;AACAC,MAAI,CAAAC,OAAQ,GAAAR,YAAS,CAAAG,gBAAgB;AACrC,IAAAM,kBAAO,GAAAC,OAAC,oBAAe;AACzB,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,aAAgB,GAAAF,OAAoB,QAAiB;AACnD,IAAAG,YAAK,GAAAH,OAAe,2BAAiB;AACrC,IAAAI,cAAc,GAAAJ,OAAQ;AACtB,IAAAK,kBAAgB,GAAOL,OAAA;AACvB,IAAAM,QAAM,GAAAN,OAAU,wBAAO,CAAY;AACnC,IAAAN,iBAAkB,6BAAM;AACtB,IAAAa,aAAO,IAA+D,IACpE,EAAG,aACE,aACC,iBACN,EAAc,eACL,iBACD,iBACR,EAAe,kBAChB,EACH,UACA;AACF,SAAAX,iBAAAY,IAAA,EAAAC,EAAA;EAGA,OAAMD,IAAA,YAAc,KAAAC,EAAA;AAGpB;AAOA,SAASd,eAAcA,CAAAe,OAAO,EAAAF,IAAQ,EAAAG,OAA2C,EAAAC,OAAA;EAC/E,IAAAC,IAAM,GAAAC,MAAQ,CAAAJ,OAAS,EAAAF,IAAA,EAAAG,OAAA;EACvB,IAAAE,IAAO,QAAM,IAAO,CAAAD,OAAI,SAAUC,IAAA;EAClC,OAAM,eAAY,IAAAd,kBAAsB,CAAMgB,GAAA,EAAAZ,YAAO,CAAAa,cAAA,CAAAC,QAAA;IACrD,GAAAL,OACE;IAACM,QAAA,EAAAL;EAAA;AAAA;AACM,SACLC,OAAAJ,OAAY,EAAAS,KAAA,EAAAR,OAAA;EAAA,IACZ,iBAAU,IAAAT,aAAA,CAAAkB,cAAA,EAAAV,OAAA;EAAA,IACVW,KAAA,GAAOX,OAAA,CAAAW,KAAA;EAAA,IACPC,KAAA,GAAM,IAAAhB,QAAA,CAAAiB,CAAA;EAAA,IACNC,OAAA,GAAOxD,MAAA,CAAAyD,WAAA,CAAAlB,aAAA,CAAAmB,GAAA,WAAA9C,IAAA;IAAA,OACP,CACAA,IAAA,EACA,OAAW;EACI;EACY,IAC3ByC,KAAA,CAAAM,IAAS;IAAA,OACT,eACE,IAAAzB,aAAiB,CAAA0B,YAAM,EAAAlB,OAAY;MAErC,GAAAc,OAAQ;MACRK,GAAA;MAEAF,IAAA,EAAA1B,YAAA,CAAA6B,KAAA;MAAA,YAAC,EAAAR,KAAA;MAAAS,OAAA,EAAApB,OAAA;MAAAqB,MACC,EAAAtC,iBAAiB;MAAoD,aAC9D,EAAAA;IAAA;EACA;EACyD,sBACrD,IAAAK,kBAAA,CAAAgB,GAAA,EAAAkB,WAAA;IAAAX,KAAA;IAAAX;EACb;AAAA;AAGN,IAAAuB,WAAA","ignoreList":[]}

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

@@ -1,357 +0,0 @@
-/**
- * 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 { MIN_PRESS_TARGET, Surface, useBarSurface } from "@multiplatform.one/theme";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Text } from "tamagui";
-import { Button } from "../Button";
-import { GLYPH_BOLD_STROKE_UNITS } from "../Button/circleGlyph";
-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>
-  );
-}
-
-/** An account menu opened from a 32pt avatar (no `icon`, so its X is a circle). */
-function AvatarPanel() {
-  return (
-    <FloatingPanel
-      open
-      onOpenChange={() => {}}
-      anchorMode="cover-trigger"
-      compactFace="menu"
-      triggerEcho={false}
-      iconEcho="menu"
-      coverAlign="auto"
-      widthMode="fit-content"
-      triggerSizing="content"
-      contentPadding="none"
-      trigger={
-        <span role="button" aria-label="Account">
-          AD
-        </span>
-      }
-    >
-      <Text>Sign out</Text>
-    </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();
-  });
-
-  it("strokes the avatar's X to the bar buttons' bold stem (FZ-8480 follow-up)", async () => {
-    measure({ x: 100, y: 12, width: 44, height: 44 });
-    const bar = renderWithProviders(<AddPanel kind="menu" />);
-    const barPanel = await open(bar);
-    const barX = within(barPanel).getByRole("button", { name: "Close" }).querySelector("svg");
-    expect(barX?.getAttribute("stroke-width")).toBe(String(GLYPH_BOLD_STROKE_UNITS));
-    bar.unmount();
-    const result = renderWithProviders(<AvatarPanel />);
-    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
-    const avatarX = within(panel).getByRole("button", { name: "Close" }).querySelector("svg");
-    expect(avatarX?.getAttribute("stroke-width")).toBe(barX?.getAttribute("stroke-width"));
-    expect(avatarX?.getAttribute("stroke-linejoin")).toBe("round");
-  });
-
-  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`);
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    expect(row.style.height).toBe(`${MIN_PRESS_TARGET}px`);
-    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
-    expect(box.style.width).toBe(`${avatar.width}px`);
-    expect(box.style.marginLeft).toBe(`${inset}px`);
-    expect(box.style.marginTop).toBe(`${inset}px`);
-    // The X'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);
-  });
-});

package/src/FloatingPanel/iconEcho.tsx

@@ -1,124 +0,0 @@
-import { XIcon } from "@phosphor-icons/react";
-import { cloneElement, isValidElement, useState, type ReactElement, type ReactNode } from "react";
-import { SurfaceContext, type SurfaceIntent } from "@multiplatform.one/theme";
-import { useTheme, View } from "tamagui";
-import { boldStroke, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
-import { t } from "../shared/t";
-
-/**
- * How a panel covering an icon-only trigger shows the pressed button (LC-112,
- * FZ-8480 Round 37): in its exact spot, turned into an X that closes the
- * panel, the way iOS morphs a + into an X. `"close"` lays the X over the
- * content's header row (a panel's title shares the X's line); `"menu"` gives
- * the X its own band above the rows, which run the panel's full width.
- */
-export type IconEcho = "close" | "menu";
-
-export const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
-
-const DROPPED_PROPS = [
-  "id",
-  "onLongPress",
-  "onKeyDown",
-  "onContextMenu",
-  "aria-haspopup",
-  "aria-expanded",
-  "aria-controls",
-  "aria-describedby",
-  "tooltip",
-] as const;
-
-/**
- * An X sits in the panel's corner over the content's header row, the way a
- * sheet's close button shares the row with its title; a menu's X takes its
- * own band above the rows. A panel that opened upward always gives the echo
- * its own band.
- */
-export function iconEchoOverlays(kind: IconEcho, up: boolean): boolean {
-  return kind === "close" && !up;
-}
-
-/**
- * The pressed trigger drawn again over its panel as an X: the same element
- * with the same size and plate and an X for its glyph, a fresh render that
- * shares none of the consumer's refs. It renders on the trigger's own
- * surface, so a bar button keeps its bar treatment (on iOS its own Liquid
- * Glass circle) inside the panel. Pressing it closes the panel, and it reads
- * "Close". A button (anything with an `icon`) is the control itself; any
- * other trigger (an avatar) becomes an X in a circle of its size.
- */
-export function iconEchoElement(
-  trigger: ReactNode,
-  kind: IconEcho,
-  onClose: () => void,
-  surface?: SurfaceIntent,
-): ReactNode {
-  const echo = echoOf(trigger, kind, onClose);
-  if (echo == null || !surface) return echo;
-  return <SurfaceContext.Provider {...surface}>{echo}</SurfaceContext.Provider>;
-}
-
-function echoOf(trigger: ReactNode, _kind: IconEcho, onClose: () => void): ReactNode {
-  if (!isValidElement(trigger)) return null;
-  const props = trigger.props as { icon?: unknown };
-  const label = t("Close");
-  const dropped = Object.fromEntries(DROPPED_PROPS.map((name) => [name, undefined]));
-  if (props.icon != null) {
-    return cloneElement(trigger as ReactElement<Record<string, unknown>>, {
-      ...dropped,
-      ref: null,
-      icon: XIcon,
-      "aria-label": label,
-      onPress: onClose,
-      testID: ICON_ECHO_TEST_ID,
-      "data-testid": ICON_ECHO_TEST_ID,
-    });
-  }
-  return <CircleClose label={label} onClose={onClose} />;
-}
-
-/** The plate an avatar draws by default, so its X keeps the avatar's circle. */
-const avatarPlate = "$selectedBackground";
-
-/** The X's glyph before the circle has measured itself. */
-const circleGlyphFallbackPx = 18;
-
-/**
- * An X in a circle the size of the trigger it replaces (an avatar), stroked
- * to the bar buttons' bold stem (LC-176), so every X in a bar reads at one
- * weight.
- */
-function CircleClose({ label, onClose }: { label: string; onClose: () => void }) {
-  const theme = useTheme();
-  const [side, setSide] = useState(0);
-  const ink = theme.selectedColor?.val ?? theme.color?.val;
-  return (
-    <View
-      role="button"
-      aria-label={label}
-      tabIndex={0}
-      cursor="pointer"
-      width="100%"
-      height="100%"
-      borderRadius={100000}
-      backgroundColor={avatarPlate}
-      alignItems="center"
-      justifyContent="center"
-      pressStyle={{ opacity: 0.6 }}
-      onPress={onClose}
-      onLayout={(event) =>
-        setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height))
-      }
-      testID={ICON_ECHO_TEST_ID}
-      data-testid={ICON_ECHO_TEST_ID}
-    >
-      <XIcon
-        size={side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx}
-        weight="bold"
-        color={ink}
-        {...boldStroke("bold", typeof ink === "string" ? ink : undefined)}
-        aria-hidden
-      />
-    </View>
-  );
-}

package/types/FloatingPanel/iconEcho.d.ts

@@ -1,29 +0,0 @@
-import { type ReactNode } from "react";
-import { type SurfaceIntent } from "@multiplatform.one/theme";
-/**
- * How a panel covering an icon-only trigger shows the pressed button (LC-112,
- * FZ-8480 Round 37): in its exact spot, turned into an X that closes the
- * panel, the way iOS morphs a + into an X. `"close"` lays the X over the
- * content's header row (a panel's title shares the X's line); `"menu"` gives
- * the X its own band above the rows, which run the panel's full width.
- */
-export type IconEcho = "close" | "menu";
-export declare const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
-/**
- * An X sits in the panel's corner over the content's header row, the way a
- * sheet's close button shares the row with its title; a menu's X takes its
- * own band above the rows. A panel that opened upward always gives the echo
- * its own band.
- */
-export declare function iconEchoOverlays(kind: IconEcho, up: boolean): boolean;
-/**
- * The pressed trigger drawn again over its panel as an X: the same element
- * with the same size and plate and an X for its glyph, a fresh render that
- * shares none of the consumer's refs. It renders on the trigger's own
- * surface, so a bar button keeps its bar treatment (on iOS its own Liquid
- * Glass circle) inside the panel. Pressing it closes the panel, and it reads
- * "Close". A button (anything with an `icon`) is the control itself; any
- * other trigger (an avatar) becomes an X in a circle of its size.
- */
-export declare function iconEchoElement(trigger: ReactNode, kind: IconEcho, onClose: () => void, surface?: SurfaceIntent): ReactNode;
-//# sourceMappingURL=iconEcho.d.ts.map

package/types/FloatingPanel/iconEcho.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconEcho.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/iconEcho.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK9E;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExC,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAc5D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAErE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,EACnB,OAAO,CAAC,EAAE,aAAa,GACtB,SAAS,CAIX"}