@multiplatform.one/forms 7.77.1 → 7.78.0

package/src/Button/index.tsx

@@ -79,11 +79,10 @@ import { warnBareDisabled, warnPositiveTabIndex, warnSizeRecipeEscape } from "..
 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 +465,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,
@@ -868,9 +849,9 @@ export function Button({
     (labelled && chromeless && accentInk === true && edge === "start");
   const labelLine = labelLinePx(knobProps.body.fontFamily);
   const glyphFloor = iconButtonGlyphPx(labelLine);
-  // LC-176: on iOS 26 a bar's icon button floats on Liquid Glass, the native
-  // bar button. Elsewhere, and on a binary without the module, it stays the
-  // bare tinted glyph.
+  // 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).
   const glassGroup = groupGround === "glass";
   const GlassView =
     iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill && !glassGroup
@@ -1113,7 +1094,8 @@ export function Button({
   // A plain button is ink on the bar: no shadow at rest (E-FLAT).
   const plainTier = tier === "plain";
   // LC-176: hover and press light a soft plate on web; on native the glyph
-  // dims, as an iOS bar button does. The media plate deepens instead.
+  // dims, and on glass the system answers the press instead. The media plate
+  // deepens instead.
   const glyphState = iconButton && !selectedFill;
   const iconHover = glyphState
     ? isWeb
@@ -1125,7 +1107,9 @@ export function Button({
   const iconPress = glyphState
     ? isWeb
       ? hostScoped({ backgroundColor: "$backgroundPress" })
-      : { backgroundColor: "transparent", opacity: ICON_BUTTON_PRESS_OPACITY }
+      : GlassView || glassGroup
+        ? { backgroundColor: "transparent" }
+        : { backgroundColor: "transparent", opacity: ICON_BUTTON_PRESS_OPACITY }
     : mediaPlate
       ? { backgroundColor: "$shadow5" }
       : undefined;
@@ -1192,7 +1176,6 @@ export function Button({
         ? {
             borderRadius: 100000,
             backgroundColor: "$shadow4",
-            ...(isWeb ? { style: MEDIA_PLATE_WEB_STYLE } : undefined),
           }
         : undefined)}
       {...(edge && !inlineGlyph && chromeless && !selectedFill && !isCircular
@@ -1363,8 +1346,8 @@ export function Button({
       {GlassView ? (
         <GlassView
           glassEffectStyle="regular"
-          isInteractive
-          pointerEvents="none"
+          isInteractive={!unavailable}
+          colorScheme={darkScheme ? "dark" : "light"}
           style={{
             position: "absolute",
             top: glassInset,
@@ -1372,10 +1355,15 @@ export function Button({
             bottom: glassInset,
             left: glassInset,
             borderRadius: visualPx / 2,
+            alignItems: "center",
+            justifyContent: "center",
           }}
-        />
-      ) : null}
-      {iconElement}
+        >
+          {iconElement}
+        </GlassView>
+      ) : (
+        iconElement
+      )}
       {labelContent}
       {iconAfterElement}
     </ButtonFrame>
@@ -1444,5 +1432,5 @@ export function IconButton(props: IconButtonProps) {
   return <Button {...props} />;
 }
 
-export { IconButtonGroup, ICON_BUTTON_GLASS_MERGE_PX } from "./IconButtonGroup";
+export { IconButtonGroup } from "./IconButtonGroup";
 export type { IconButtonGroupProps } from "./IconButtonGroup";

package/src/Button/webGlass.ts

@@ -1,7 +1,6 @@
 import { isDarkThemeName } from "@multiplatform.one/theme";
-import { createElement } from "react";
+import { createElement, Fragment, type ReactNode } from "react";
 import { useThemeName, YStack } from "tamagui";
-import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
 
 type GlassNavigator = { userAgent?: string; platform?: string; maxTouchPoints?: number };
 
@@ -19,24 +18,32 @@ export function isAppleTouchWeb(
 }
 
 const webGlassMarker = { "data-mp-glass": "web" };
+const webGlassBlur = {
+  backdropFilter: "blur(16px) saturate(180%)",
+  WebkitBackdropFilter: "blur(16px) saturate(180%)",
+} as const;
 
 /**
- * LC-176: the Liquid Glass face iOS Safari draws under a bar's icon buttons,
- * one circle for a lone button or one capsule for an `IconButtonGroup`. It is
- * a layer under the glyphs (absolute, z -1 in the button's stacking context):
- * a near-white material in light and a raised grey in dark, edged by a soft
- * drop shadow alone, with the media plate's blur.
+ * 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).
  */
-export function WebGlassFace({ style }: { style?: unknown }) {
+export function WebGlassFace({ style, children }: { style?: unknown; children?: ReactNode }) {
   const dark = isDarkThemeName(useThemeName());
-  return createElement(YStack, {
-    pointerEvents: "none",
-    backgroundColor: dark ? "$color4" : "$color1",
-    opacity: 0.92,
-    shadowColor: "$shadowColor",
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 3 },
-    ...webGlassMarker,
-    style: { ...(style as object), zIndex: -1, ...MEDIA_PLATE_WEB_STYLE },
-  });
+  return createElement(
+    Fragment,
+    null,
+    createElement(YStack, {
+      pointerEvents: "none",
+      backgroundColor: dark ? "$color4" : "$color1",
+      opacity: 0.92,
+      shadowColor: "$shadowColor",
+      shadowRadius: 10,
+      shadowOffset: { width: 0, height: 3 },
+      ...webGlassMarker,
+      style: { ...(style as object), zIndex: -1, ...webGlassBlur },
+    }),
+    children,
+  );
 }

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>