@multiplatform.one/forms 7.77.1 → 7.77.2

package/src/Button/IconButtonGroup.tsx

@@ -1,10 +1,15 @@
 import { radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
 import { isWeb, Theme, View, XStack, type XStackProps } from "tamagui";
 import { loadGlassView } from "./glass";
 import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
 import { isAppleTouchWeb, WebGlassFace } from "./webGlass";
-import { IconButtonGroupContext, IconButtonGroupRegistry } from "./iconButtonGroupContext";
+import {
+  IconButtonGroupContext,
+  IconButtonGroupRegistry,
+  IconButtonGroupSurfaceContext,
+  type IconButtonGroupSurface,
+} from "./iconButtonGroupContext";
 
 /**
  * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
@@ -12,6 +17,12 @@ import { IconButtonGroupContext, IconButtonGroupRegistry } from "./iconButtonGro
  */
 export const ICON_BUTTON_GLASS_MERGE_PX = 22;
 
+type MeasurableView = {
+  measureInWindow?: (
+    callback: (x: number, y: number, width: number, height: number) => void,
+  ) => void;
+};
+
 export interface IconButtonGroupProps extends XStackProps {
   /** Over imagery or video: the group shares one material capsule. */
   plate?: "media";
@@ -35,6 +46,22 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
     setMembers((count) => count + 1);
     return () => setMembers((count) => count - 1);
   }, []);
+  const capsuleRef = useRef<MeasurableView | null>(null);
+  const surface = useMemo<IconButtonGroupSurface>(
+    () => ({
+      measure(callback) {
+        const node = capsuleRef.current;
+        if (typeof node?.measureInWindow !== "function") {
+          callback(null);
+          return;
+        }
+        node.measureInWindow((x, y, width, height) =>
+          callback(width > 0 && height > 0 ? { x, y, width, height, radius: height / 2 } : null),
+        );
+      },
+    }),
+    [],
+  );
   if (plate === "media") {
     return (
       <IconButtonGroupContext.Provider value="media">
@@ -95,11 +122,15 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
     );
   }
   const GlassView = bar ? loadGlassView() : null;
+  const capsule = GlassView != null && members > 0;
+  // The capsule hugs its buttons with the web twin's $2 end inset and $1 gap,
+  // so its first and last items never sit on its curve (FZ-8550).
   const row = (
     <XStack
       alignItems="center"
-      data-mp-icon-button-group={GlassView && members > 0 ? "glass" : bar ? "bar" : "row"}
+      data-mp-icon-button-group={capsule ? "glass" : bar ? "bar" : "row"}
       {...rest}
+      {...(capsule ? { paddingHorizontal: "$2" as const, gap: "$1" as const } : null)}
     >
       {children}
     </XStack>
@@ -108,28 +139,32 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
   return (
     <IconButtonGroupRegistry.Provider value={register}>
       <IconButtonGroupContext.Provider value="glass">
-        <View
-          position="relative"
-          flexShrink={1}
-          minWidth={0}
-          onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
-        >
-          {members > 0 ? (
-            <GlassView
-              glassEffectStyle="regular"
-              pointerEvents="none"
-              style={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                borderRadius: capsuleHeight / 2,
-              }}
-            />
-          ) : null}
-          {row}
-        </View>
+        <IconButtonGroupSurfaceContext.Provider value={members > 0 ? surface : null}>
+          <View
+            ref={capsuleRef as never}
+            collapsable={false}
+            position="relative"
+            flexShrink={1}
+            minWidth={0}
+            onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
+          >
+            {members > 0 ? (
+              <GlassView
+                glassEffectStyle="regular"
+                pointerEvents="none"
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                  borderRadius: capsuleHeight / 2,
+                }}
+              />
+            ) : null}
+            {row}
+          </View>
+        </IconButtonGroupSurfaceContext.Provider>
       </IconButtonGroupContext.Provider>
     </IconButtonGroupRegistry.Provider>
   );

package/src/Button/circleGlyph.ts

@@ -4,3 +4,21 @@
  * ratio, never a small glyph lost in a big plate.
  */
 export const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+
+/**
+ * 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 GLYPH_BOLD_STROKE_UNITS = 8;
+
+export function boldStroke(weight: "regular" | "bold", color = "currentColor") {
+  return weight === "bold"
+    ? {
+        stroke: color,
+        strokeWidth: GLYPH_BOLD_STROKE_UNITS,
+        strokeLinejoin: "round" as const,
+      }
+    : undefined;
+}

package/src/Button/iconButtonGroupContext.ts

@@ -30,3 +30,28 @@ export function useIconButtonGroupMember(iconOnly: boolean): void {
     [iconOnly, register],
   );
 }
+
+/**
+ * The window frame and corner radius of the plate an `IconButtonGroup` paints
+ * (a native Liquid Glass capsule). Native has no DOM to walk, so a panel
+ * opening from a grouped button reads the plate it covers here (LC-112,
+ * FZ-8550).
+ */
+export interface IconButtonGroupPlate {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+}
+
+export interface IconButtonGroupSurface {
+  /** Answers once: the plate, or null when it cannot be measured. */
+  measure(callback: (plate: IconButtonGroupPlate | null) => void): void;
+}
+
+export const IconButtonGroupSurfaceContext = createContext<IconButtonGroupSurface | null>(null);
+
+export function useIconButtonGroupSurface(): IconButtonGroupSurface | null {
+  return useContext(IconButtonGroupSurfaceContext);
+}

package/src/Button/index.tsx

@@ -80,10 +80,10 @@ 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 { boldStroke, GLYPH_BOLD_STROKE_UNITS, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "./circleGlyph";
 import { useIconButtonGroupGround, useIconButtonGroupMember } from "./iconButtonGroupContext";
 
-export { ICON_BUTTON_CIRCLE_GLYPH_RATIO };
+export { GLYPH_BOLD_STROKE_UNITS, ICON_BUTTON_CIRCLE_GLYPH_RATIO };
 
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
@@ -466,24 +466,6 @@ 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;
 
-/**
- * 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 GLYPH_BOLD_STROKE_UNITS = 8;
-
-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,

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

@@ -8,10 +8,11 @@ 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 { 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";
@@ -98,6 +99,31 @@ function AddPanel({ kind = "close", header = false }: { kind?: IconEcho; header?
   );
 }
 
+/** 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");
 
@@ -294,4 +320,38 @@ describe("LC-112 icon trigger echo on the web (FZ-8480)", () => {
     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/FloatingPanel.menuFace.native.spec.tsx

@@ -9,7 +9,13 @@ import { PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
 import { Button } from "../Button";
+import {
+  IconButtonGroupSurfaceContext,
+  type IconButtonGroupPlate,
+  type IconButtonGroupSurface,
+} from "../Button/iconButtonGroupContext";
 import { Input as InputParts } from "../InputParts";
 import { OverlayStackProvider } from "../shared/overlayStack";
 import { MENU_MIN_WIDTH, type CompactFace } from "./compactFace";
@@ -540,3 +546,101 @@ describe("LC-112 icon trigger echo on native (FZ-8480, rv_2607879d3bdaf9bf)", ()
     expect(glyphPath(iconEcho())).not.toBe(glyphPath(live));
   });
 });
+
+const capsuleSurface = (plate: IconButtonGroupPlate): IconButtonGroupSurface => ({
+  measure: (callback) => callback(plate),
+});
+
+describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)", () => {
+  const plate = { x: 200, y: 50, width: 174, height: 44, radius: 22 };
+
+  it("covers the whole capsule from context at its radius; only the pressed trigger shows, as its X", () => {
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(plate)}>
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    const left = parseFloat(panel.style.left);
+    const top = parseFloat(panel.style.top);
+    // The panel's frame contains the capsule's: same top edge, both ends.
+    expect(top).toBe(plate.y);
+    expect(left).toBeLessThanOrEqual(plate.x);
+    expect(left + MENU_MIN_WIDTH).toBeGreaterThanOrEqual(plate.x + plate.width);
+    expect(left).toBe(plate.x + plate.width - MENU_MIN_WIDTH);
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(plate.radius));
+    // The band is the capsule's height; the X keeps the trigger's own box.
+    const band = iconBand() as HTMLElement;
+    expect(band.style.height).toBe(`${plate.height}px`);
+    const box = band.firstElementChild as HTMLElement;
+    expect(box.style.width).toBe(`${trigger.width}px`);
+    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${trigger.x - left}px`);
+    // Only the pressed trigger shows, as an X; nothing else of the group.
+    const echoes = document.querySelectorAll('[data-testid="floating-panel-icon-echo"]');
+    expect(echoes).toHaveLength(1);
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(echoes[0] as Element)).toBe(glyphPath(x.container));
+    x.unmount();
+  });
+
+  it("takes the capsule's width as its floor when the capsule is wider than the menu", () => {
+    const wide = { x: 16, y: 50, width: 358, height: 44, radius: 22 };
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(wide)}>
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    expect(panel.style.minWidth).toBe(`${wide.width}px`);
+    layout(panel, wide.width, 180);
+    expect(panel.style.left).toBe(`${wide.x}px`);
+  });
+
+  it("waits for the capsule before it shows, so it never opens on the button alone first", () => {
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    let answer: ((plate: IconButtonGroupPlate | null) => void) | null = null;
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider
+        value={{
+          measure: (callback) => {
+            answer = callback;
+          },
+        }}
+      >
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    expect(panel.style.opacity).toBe("0");
+    act(() => answer?.(plate));
+    expect(panel.style.opacity).toBe("1");
+    expect(panel.style.left).toBe(`${plate.x + plate.width - MENU_MIN_WIDTH}px`);
+  });
+
+  it("covers a 32pt avatar at its 44pt target, so its centre is the row-icon column (FZ-8480)", () => {
+    trigger = { x: 100, y: 56, width: 32, height: 32 };
+    const result = renderWithProviders(<EchoMenu kind="menu" />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    const inset = (MIN_PRESS_TARGET - trigger.width) / 2;
+    expect(panel.style.left).toBe(`${trigger.x - inset}px`);
+    expect(panel.style.top).toBe(`${trigger.y - inset}px`);
+    const band = iconBand() as HTMLElement;
+    expect(band.style.height).toBe(`${MIN_PRESS_TARGET}px`);
+    const box = band.firstElementChild as HTMLElement;
+    expect(box.style.width).toBe(`${trigger.width}px`);
+    expect(box.style.marginTop).toBe(`${inset}px`);
+    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${inset}px`);
+    // The X's centre sits half a press target in: where a row's leading
+    // glyph centres (row inset plus half its 18pt slot, on the frame border).
+    expect(inset + trigger.width / 2).toBe(MIN_PRESS_TARGET / 2);
+  });
+});

package/src/FloatingPanel/coverRect.ts

@@ -0,0 +1,42 @@
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import type { TriggerRect } from "./pointAnchor";
+
+/**
+ * The 44pt box an icon trigger is pressed in, centred on the trigger
+ * (LC-176). A trigger drawn smaller than its target (a 32pt avatar) is
+ * covered at its target, so the panel's row-icon column, which centres on
+ * a 44pt start inset, runs through the trigger's centre and the X drawn on
+ * it (FZ-8480 GAP). A trigger at least that big is its own box.
+ */
+export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): TriggerRect {
+  const width = Math.max(trigger.width, min);
+  const height = Math.max(trigger.height, min);
+  return {
+    x: trigger.x - (width - trigger.width) / 2,
+    y: trigger.y - (height - trigger.height) / 2,
+    width,
+    height,
+  };
+}
+
+/**
+ * The surface a panel opened from an icon trigger covers (LC-112, FZ-8480
+ * Round 37): the plate the trigger sits on. In a grouped glass capsule
+ * that is the capsule (FZ-8550); a lone trigger is its press target.
+ */
+export function iconCoverRect(trigger: TriggerRect, group: TriggerRect | null): TriggerRect {
+  return group ?? pressTargetRect(trigger);
+}
+
+/**
+ * Where the trigger sits inside the surface its panel covers: the X box's
+ * offset from the cover's top, and the band's height. Null when the cover is
+ * the trigger itself.
+ */
+export function echoInCover(
+  trigger: TriggerRect,
+  cover: TriggerRect,
+): { top: number; height: number } | null {
+  if (cover.y === trigger.y && cover.height === trigger.height) return null;
+  return { top: trigger.y - cover.y, height: cover.height };
+}

package/src/FloatingPanel/iconEcho.tsx

@@ -2,7 +2,7 @@ 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 { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
+import { boldStroke, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
 import { t } from "../shared/t";
 
 /**
@@ -83,10 +83,15 @@ 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). */
+/**
+ * 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"
@@ -110,7 +115,8 @@ function CircleClose({ label, onClose }: { label: string; onClose: () => void })
       <XIcon
         size={side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx}
         weight="bold"
-        color={theme.selectedColor?.val ?? theme.color?.val}
+        color={ink}
+        {...boldStroke("bold", typeof ink === "string" ? ink : undefined)}
         aria-hidden
       />
     </View>