@multiplatform.one/components 7.81.2 → 7.82.0

package/src/layouts/PageHeader.stories.tsx

@@ -1,27 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons ignored
 // the knobs and pinned a non-house radius (UX-P06).
-import { Button, IconButton, Progress } from "@multiplatform.one/forms";
+import { Button, IconButton } from "@multiplatform.one/forms";
 import {
-  CopyIcon,
-  DotsThreeIcon,
+  CpuIcon,
+  DatabaseIcon,
   MagnifyingGlassIcon,
+  MemoryIcon,
   PlusIcon,
   SignOutIcon,
-  TrashIcon,
   UserIcon,
 } from "@phosphor-icons/react";
 import { Preset } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { XStack, YStack } from "tamagui";
+import { Circle, Theme, View, XStack, YStack } from "tamagui";
 import { Avatar } from "../Avatar";
 import { Card } from "../Card";
+import { themed } from "../icons/themed";
+import { Chip } from "../Chip";
+import { CodeBlock } from "../code/CodeBlock";
 import { DropdownMenu } from "../DropdownMenu";
 import { Popover } from "../Popover";
 import { SchemeToggle } from "../SchemeToggle";
 import { PopoverContent } from "../surfaces";
 import { Tabs } from "../Tabs";
-import { PageBackButton, PageHeader, Screen, ScreenToolbar } from "./page";
+import { PageBackButton, PageHeader, PageSection, Screen, ScreenToolbar } from "./page";
 import { Paragraph, SizableText } from "../Text";
 
 const meta: Meta<typeof PageHeader> = {
@@ -174,23 +177,237 @@ export const LongTitleNarrow: Story = {
   ),
 };
 
-// FZ-8020 LC-176: the SHC console Nodes screen with every icon-button
-// context, drawn by the platform with no use-site paint. Its bar (back,
-// search, add) takes the accent, on Liquid Glass on iOS 26; content actions
-// (the inline copy, the card's overflow) are bold glyphs in the text colour;
-// the delete keeps its intent ink; the tile's favourite rides the media plate.
-function Meter({ label, value, detail }: { label: string; value: number; detail: string }) {
+// FZ-8442: the SHC console's Nodes screen as it is now (shc
+// features/console/src/manage/app/NodesPane.tsx and ManageApp.tsx's
+// NodesPlace): sites as sections, each node a front panel whose whole face
+// links to its detail, where the verbs live. The "+" opens one panel over
+// itself holding the join command as a code block (LC-112, LC-267). The bar
+// keeps every LC-176 icon-button context.
+const faceplate = {
+  ear: 18,
+  screw: 9,
+  slot: 1.5,
+  led: 14,
+  ledGap: 2,
+  digitWidth: 8,
+  digitHeight: 14,
+  segment: 2,
+  digitGap: 2,
+  window: 6,
+} as const;
+const LED_COUNT = 20;
+const bayGlyph = { cpu: themed(CpuIcon), memory: themed(MemoryIcon), disk: themed(DatabaseIcon) };
+
+function Screw({ angle }: { angle: number }) {
+  const inner = faceplate.screw - 2;
+  return (
+    <Circle
+      size={faceplate.screw}
+      borderWidth={1}
+      borderColor="$color9"
+      backgroundColor="$color6"
+      position="relative"
+    >
+      <View
+        position="absolute"
+        top={(inner - faceplate.slot) / 2}
+        left={0}
+        width={inner}
+        height={faceplate.slot}
+        backgroundColor="$color11"
+        rotate={`${angle}deg`}
+      />
+    </Circle>
+  );
+}
+
+function RackEar({ side, angles }: { side: "left" | "right"; angles: [number, number] }) {
+  return (
+    <YStack
+      width={faceplate.ear}
+      alignSelf="stretch"
+      alignItems="center"
+      justifyContent="space-between"
+      paddingVertical="$3"
+      backgroundColor="$color4"
+      borderColor="$color6"
+      borderLeftWidth={side === "right" ? 1 : 0}
+      borderRightWidth={side === "left" ? 1 : 0}
+      aria-hidden
+    >
+      <Screw angle={angles[0]} />
+      <Screw angle={angles[1]} />
+    </YStack>
+  );
+}
+
+const segmentsOf: Record<string, string> = {
+  "0": "abcdef",
+  "1": "bc",
+  "2": "abdeg",
+  "3": "abcdg",
+  "4": "bcfg",
+  "5": "acdfg",
+  "6": "acdefg",
+  "7": "abc",
+  "8": "abcdefg",
+  "9": "abcdfg",
+};
+
+function segmentBox(name: string, width: number) {
+  const { digitHeight: h, segment: t } = faceplate;
+  const middle = (h - t) / 2;
+  const stroke = (h + t) / 2;
+  const boxes: Record<string, { top: number; left: number; width: number; height: number }> = {
+    a: { top: 0, left: 0, width, height: t },
+    b: { top: 0, left: width - t, width: t, height: stroke },
+    c: { top: middle, left: width - t, width: t, height: stroke },
+    d: { top: h - t, left: 0, width, height: t },
+    e: { top: middle, left: 0, width: t, height: stroke },
+    f: { top: 0, left: 0, width: t, height: stroke },
+    g: { top: middle, left: 0, width, height: t },
+  };
+  return boxes[name]!;
+}
+
+function AddressDisplay({ address }: { address: string }) {
+  return (
+    <Theme name="dark">
+      <XStack
+        role="img"
+        aria-label={address}
+        alignItems="center"
+        gap={faceplate.digitGap}
+        backgroundColor="$color1"
+        borderColor="$color6"
+        borderWidth={1}
+        borderRadius="$2"
+        padding={faceplate.window}
+      >
+        {[...address].map((char, index) => {
+          if (char === "." || char === ":")
+            return (
+              <YStack
+                key={index}
+                width={faceplate.segment}
+                height={faceplate.digitHeight}
+                justifyContent={char === "." ? "flex-end" : "space-evenly"}
+              >
+                <View
+                  width={faceplate.segment}
+                  height={faceplate.segment}
+                  backgroundColor="$blue10"
+                />
+                {char === ":" ? (
+                  <View
+                    width={faceplate.segment}
+                    height={faceplate.segment}
+                    backgroundColor="$blue10"
+                  />
+                ) : null}
+              </YStack>
+            );
+          const width = char === "1" ? faceplate.segment : faceplate.digitWidth;
+          return (
+            <View key={index} width={width} height={faceplate.digitHeight} position="relative">
+              {[...(segmentsOf[char] ?? "")].map((name) => (
+                <View
+                  key={name}
+                  position="absolute"
+                  {...segmentBox(name, width)}
+                  backgroundColor="$blue10"
+                />
+              ))}
+            </View>
+          );
+        })}
+      </XStack>
+    </Theme>
+  );
+}
+
+const ledInk = { lit: "$color11", warning: "$orange9", critical: "$red9" } as const;
+const lampAt = (index: number) =>
+  index >= LED_COUNT * 0.9 ? "critical" : index >= LED_COUNT * 0.7 ? "warning" : "lit";
+
+function LedBar({
+  bay,
+  label,
+  percent,
+  amount,
+}: {
+  bay: keyof typeof bayGlyph;
+  label: string;
+  percent: number;
+  amount: string;
+}) {
+  const lit = Math.round((percent / 100) * LED_COUNT);
+  const Glyph = bayGlyph[bay];
   return (
-    <YStack gap="$2">
-      <XStack justifyContent="space-between">
-        <SizableText color="$color11">{label}</SizableText>
-        <SizableText>{detail}</SizableText>
+    <YStack gap="$1.5" role="meter" aria-label={label} aria-valuenow={percent}>
+      <XStack alignItems="center" gap="$2">
+        <Glyph size={16} weight="bold" color="$color11" />
+        <SizableText flex={1} size="$2" fontVariant={["tabular-nums"]} numberOfLines={1}>
+          {amount}
+        </SizableText>
+        <SizableText size="$2" fontWeight="700" fontVariant={["tabular-nums"]}>
+          {`${percent}%`}
+        </SizableText>
+      </XStack>
+      <XStack gap={faceplate.ledGap} aria-hidden>
+        {Array.from({ length: LED_COUNT }, (_, index) => (
+          <View
+            key={index}
+            flex={1}
+            height={faceplate.led}
+            borderRadius={1}
+            backgroundColor={ledInk[lampAt(index)]}
+            opacity={index < lit ? 1 : 0.18}
+          />
+        ))}
       </XStack>
-      <Progress value={value} />
     </YStack>
   );
 }
 
+function NodeFaceplate() {
+  return (
+    <Card padding="$0" overflow="hidden" flexDirection="row" alignItems="stretch">
+      <RackEar side="left" angles={[38, 121]} />
+      <YStack flex={1} gap="$3" padding="$3">
+        <XStack alignItems="center" justifyContent="space-between" gap="$2.5">
+          <XStack gap="$1.5" alignItems="center" aria-hidden>
+            <Circle size="$0.75" backgroundColor="$green9" />
+            <Circle size="$0.5" backgroundColor="$green9" />
+          </XStack>
+          <AddressDisplay address="10.64.96.1:4003" />
+        </XStack>
+        <XStack alignItems="center" gap="$2.5">
+          <SizableText size="$4" fontWeight="700" numberOfLines={1}>
+            incus01
+          </SizableText>
+          <SizableText size="$1" fontWeight="600">
+            incus
+          </SizableText>
+        </XStack>
+        <LedBar bay="cpu" label="CPU" percent={12} amount="2.83/24 cores" />
+        <LedBar bay="memory" label="Memory" percent={41} amount="25.3/61.9 GiB" />
+        <LedBar bay="disk" label="Disk" percent={74} amount="352/476 GiB" />
+        <XStack gap="$1.5" flexWrap="wrap">
+          <Chip size="$2">AMD Ryzen 9 7900</Chip>
+          <Chip size="$2">x86_64</Chip>
+        </XStack>
+        <Avatar.Group max={7} size={36} circular={false}>
+          {["pokemon", "keycloak", "nextcloud", "fizzy", "gitlab", "openobserve"].map((app) => (
+            <Avatar key={app} name={app} />
+          ))}
+        </Avatar.Group>
+      </YStack>
+      <RackEar side="right" angles={[92, 7]} />
+    </Card>
+  );
+}
+
 // LC-112 (FZ-8665 Round 45): each icon trigger's panel covers its button with
 // no X, and a press outside closes it. The join panel's title sits on the
 // panel's padding.
@@ -209,7 +426,7 @@ function AddNode() {
           </Popover.Header>
           <YStack paddingHorizontal="$4" gap="$3">
             <Paragraph color="$color11">Run this on the new machine.</Paragraph>
-            <SizableText fontFamily="$mono">shc node join</SizableText>
+            <CodeBlock language="text">shc node join</CodeBlock>
           </YStack>
         </YStack>
       </PopoverContent>
@@ -258,26 +475,9 @@ function NodesScreen() {
       }
     >
       <PageHeader title="Nodes" divider={false} actions={<AddNode />} />
-      <XStack alignItems="center">
-        <SizableText fontFamily="$mono" color="$color11">
-          shc node join
-        </SizableText>
-        <IconButton inline icon={CopyIcon} aria-label="Copy" />
-      </XStack>
-      <Card gap="$4">
-        <XStack justifyContent="space-between" alignItems="center">
-          <SizableText size="$6" fontWeight="600">
-            incus01
-          </SizableText>
-          <XStack alignItems="center">
-            <IconButton icon={DotsThreeIcon} aria-label="More for incus01" />
-            <IconButton error icon={TrashIcon} aria-label="Remove incus01" />
-          </XStack>
-        </XStack>
-        <SizableText color="$color11">10.64.96.1:4003</SizableText>
-        <Meter label="CPU" value={12} detail="2.83/24 cores  12%" />
-        <Meter label="Mem" value={41} detail="25.3/61.9 GiB  41%" />
-      </Card>
+      <PageSection title="Unplaced" description="1 node" headingLevel={3}>
+        <NodeFaceplate />
+      </PageSection>
     </Screen>
   );
 }

package/src/layouts/barTitleSpan.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * LC-157 (FZ-8442): the bar's inline title is centred on the bar while it
+ * fits clear of both side groups, and slides into the span between them when
+ * the wider group would touch it (Clay's "Inbox" beside four trailing glyphs).
+ */
+import { describe, expect, it } from "vitest";
+import { BAR_TITLE_GAP, barTitleSpan, sideExtents } from "./barTitleSpan";
+
+describe("bar title span (LC-157, FZ-8442)", () => {
+  it("centres on the bar when the title fits clear of both groups", () => {
+    const span = barTitleSpan({ row: 358, leftEnd: 44, rightStart: 314, title: 60 });
+    expect(span.left).toBe(span.right);
+    expect(span.left).toBe(44 + BAR_TITLE_GAP);
+  });
+
+  it("slides between the groups when centring would hide it", () => {
+    const span = barTitleSpan({ row: 358, leftEnd: 44, rightStart: 130, title: 45 });
+    expect(span).toEqual({ left: 44 + BAR_TITLE_GAP, right: 358 - 130 + BAR_TITLE_GAP });
+    expect(358 - span.left - span.right).toBeGreaterThanOrEqual(45);
+  });
+
+  it("reads the groups by side, so a right-to-left bar mirrors", () => {
+    const ltr = sideExtents(358, { x: 16, width: 44 }, { x: 250, width: 92 });
+    const rtl = sideExtents(358, { x: 298, width: 44 }, { x: 16, width: 92 });
+    expect(ltr).toEqual({ leftEnd: 60, rightStart: 250 });
+    expect(rtl).toEqual({ leftEnd: 108, rightStart: 298 });
+  });
+
+  it("an empty group takes no room", () => {
+    expect(sideExtents(358, { x: 16, width: 44 }, { x: 342, width: 0 })).toEqual({
+      leftEnd: 60,
+      rightStart: 0,
+    });
+  });
+});

package/src/layouts/barTitleSpan.ts

@@ -0,0 +1,44 @@
+/** The space kept between the bar's inline title and either side group. */
+export const BAR_TITLE_GAP = 8;
+
+export interface BarTitleBox {
+  /** The bar row's width. */
+  row: number;
+  /** Where the group on the left ends, from the row's left edge; 0 when empty. */
+  leftEnd: number;
+  /** Where the group on the right starts, from the row's left edge; 0 when empty. */
+  rightStart: number;
+  /** The title's natural one-line width. */
+  title: number;
+}
+
+/**
+ * Where the bar's inline title sits. Like UIKit it is centred on the bar
+ * while it fits clear of both side groups; when the wider group would touch
+ * it, it centres in the span left between the groups instead of vanishing.
+ */
+export function barTitleSpan(box: BarTitleBox): { left: number; right: number } {
+  const left = box.leftEnd + BAR_TITLE_GAP;
+  const right = (box.rightStart ? box.row - box.rightStart : 0) + BAR_TITLE_GAP;
+  const centred = Math.max(left, right);
+  return box.row - 2 * centred >= box.title ? { left: centred, right: centred } : { left, right };
+}
+
+type Extent = { x: number; width: number };
+
+/** The bar's two side groups as physical left and right extents (RTL-safe). */
+export function sideExtents(
+  row: number,
+  a: Extent,
+  b: Extent,
+): Pick<BarTitleBox, "leftEnd" | "rightStart"> {
+  const groups = [a, b].filter((group) => group.width > 0);
+  let leftEnd = 0;
+  let rightStart = 0;
+  for (const group of groups) {
+    if (group.x + group.width / 2 < row / 2)
+      leftEnd = Math.max(leftEnd, Math.ceil(group.x + group.width));
+    else rightStart = rightStart ? Math.min(rightStart, Math.floor(group.x)) : Math.floor(group.x);
+  }
+  return { leftEnd, rightStart };
+}

package/src/layouts/glyphCentre.spec.tsx

@@ -0,0 +1,218 @@
+/**
+ * LC-176 (FZ-8442): a glyph on a glass circle sits at the circle's centre.
+ * Clay on the Kitchen Sink SHC Nodes story: "the icons inside of these are
+ * aligned wrong". The back caret was pulled toward the bar's edge and the "+"
+ * pushed past its circle's centre.
+ *
+ * jsdom has no layout, so the ink centre is computed: the offset each box
+ * between the glyph and its circle adds (a margin moves a centred child by
+ * half of it, a translate by all of it), plus where the glyph's ink sits in
+ * its 256-unit Phosphor grid, read from the rendered path.
+ */
+import { IconButton } from "@multiplatform.one/forms";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Surface } from "@multiplatform.one/theme";
+import { PlusIcon, XIcon } from "@phosphor-icons/react";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PageBackButton, ScreenToolbar } from "./page";
+
+const IPHONE =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1";
+const GRID = 256;
+const TOLERANCE_PT = 0.5;
+
+type Box = { minX: number; maxX: number; minY: number; maxY: number };
+
+function arcExtremes(
+  box: Box,
+  from: [number, number],
+  r: number,
+  large: number,
+  sweep: number,
+  to: [number, number],
+) {
+  const [x1, y1] = from;
+  const [x2, y2] = to;
+  const mx = (x1 - x2) / 2;
+  const my = (y1 - y2) / 2;
+  const d2 = mx * mx + my * my;
+  const radius = Math.max(r, Math.sqrt(d2));
+  const k = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, radius ** 2 / d2 - 1));
+  const cx = k * my + (x1 + x2) / 2;
+  const cy = -k * mx + (y1 + y2) / 2;
+  const start = Math.atan2(y1 - cy, x1 - cx);
+  let delta = Math.atan2(y2 - cy, x2 - cx) - start;
+  if (sweep && delta < 0) delta += 2 * Math.PI;
+  if (!sweep && delta > 0) delta -= 2 * Math.PI;
+  for (const angle of [0, Math.PI / 2, Math.PI, -Math.PI / 2]) {
+    let t = angle - start;
+    while (t < 0) t += 2 * Math.PI;
+    while (t >= 2 * Math.PI) t -= 2 * Math.PI;
+    const within = delta >= 0 ? t <= delta : t >= 2 * Math.PI + delta || t === 0;
+    if (within) include(box, cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
+  }
+}
+
+function include(box: Box, x: number, y: number) {
+  box.minX = Math.min(box.minX, x);
+  box.maxX = Math.max(box.maxX, x);
+  box.minY = Math.min(box.minY, y);
+  box.maxY = Math.max(box.maxY, y);
+}
+
+/** The ink box of an SVG path made of the commands Phosphor uses. */
+function inkBox(d: string): Box {
+  const box: Box = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity };
+  const tokens = d.match(/[a-zA-Z]|-?(?:\d*\.\d+|\d+)(?:e-?\d+)?/g) ?? [];
+  let i = 0;
+  let command = "";
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  const num = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    if (/[a-zA-Z]/.test(tokens[i]!)) command = tokens[i++]!;
+    const rel = command === command.toLowerCase();
+    const ox = rel ? x : 0;
+    const oy = rel ? y : 0;
+    switch (command.toUpperCase()) {
+      case "M":
+        x = ox + num();
+        y = oy + num();
+        startX = x;
+        startY = y;
+        include(box, x, y);
+        command = rel ? "l" : "L";
+        break;
+      case "L":
+        x = ox + num();
+        y = oy + num();
+        include(box, x, y);
+        break;
+      case "H":
+        x = ox + num();
+        include(box, x, y);
+        break;
+      case "V":
+        y = oy + num();
+        include(box, x, y);
+        break;
+      case "C": {
+        for (let n = 0; n < 2; n++) include(box, ox + num(), oy + num());
+        x = ox + num();
+        y = oy + num();
+        include(box, x, y);
+        break;
+      }
+      case "A": {
+        const r = num();
+        num();
+        num();
+        const large = num();
+        const sweep = num();
+        const to: [number, number] = [ox + num(), oy + num()];
+        arcExtremes(box, [x, y], r, large, sweep, to);
+        [x, y] = to;
+        include(box, x, y);
+        break;
+      }
+      case "Z":
+        x = startX;
+        y = startY;
+        break;
+      default:
+        throw new Error(`inkBox: unhandled path command ${command}`);
+    }
+  }
+  return box;
+}
+
+const px = (value: string | undefined) => Number.parseFloat(value || "0") || 0;
+
+function translate(transform: string, axis: "X" | "Y") {
+  const one = transform.match(new RegExp(`translate${axis}\\((-?[\\d.]+)px\\)`));
+  if (one) return Number(one[1]);
+  const both = transform.match(/translate\((-?[\d.]+)px(?:,\s*(-?[\d.]+)px)?\)/);
+  if (!both) return 0;
+  return axis === "X" ? Number(both[1]) : Number(both[2] ?? 0);
+}
+
+/** How far the glyph's ink centre sits from its circle's centre, in pt. */
+function inkOffset(button: HTMLElement) {
+  const svg = button.querySelector("svg");
+  if (!svg) throw new Error("no glyph");
+  const size = Number(svg.getAttribute("width"));
+  const scale = size / GRID;
+  const box = inkBox(
+    Array.from(svg.querySelectorAll("path"))
+      .map((path) => path.getAttribute("d") ?? "")
+      .join(" "),
+  );
+  let dx = ((box.minX + box.maxX) / 2 - GRID / 2) * scale;
+  let dy = ((box.minY + box.maxY) / 2 - GRID / 2) * scale;
+  const frame = getComputedStyle(button);
+  dx += (px(frame.paddingLeft) - px(frame.paddingRight)) / 2;
+  dy += (px(frame.paddingTop) - px(frame.paddingBottom)) / 2;
+  for (let el: Element | null = svg; el && el !== button; el = el.parentElement) {
+    const style = getComputedStyle(el);
+    dx +=
+      (px(style.marginLeft) +
+        px(style.marginInlineStart) -
+        px(style.marginRight) -
+        px(style.marginInlineEnd)) /
+        2 +
+      translate(style.transform, "X");
+    dy += (px(style.marginTop) - px(style.marginBottom)) / 2 + translate(style.transform, "Y");
+  }
+  return { dx, dy, size };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  cleanup();
+});
+
+describe("glyph centre == glass circle centre (LC-176, FZ-8442)", () => {
+  it("the ink box reads Phosphor's bold glyphs where they draw", () => {
+    const plus = inkBox(
+      "M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z",
+    );
+    expect([plus.minX, plus.maxX, plus.minY, plus.maxY].map(Math.round)).toEqual([
+      28, 228, 28, 228,
+    ]);
+    const caret = inkBox(
+      "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z",
+    );
+    expect(Math.round((caret.minX + caret.maxX) / 2)).toBe(120);
+  });
+
+  it("off glass the back caret keeps its optical pull, so the measure sees margins", () => {
+    renderWithProviders(<ScreenToolbar leading={<PageBackButton />} />);
+    const back = screen.getByLabelText("Back");
+    expect(back.getAttribute("data-mp-icon-button")).not.toBe("glass");
+    const { dx, size } = inkOffset(back);
+    expect(dx).toBeLessThan(-size * 0.05);
+  });
+
+  it("back caret, + and ✕ sit at their circle's centre within 0.5pt on iPhone", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    renderWithProviders(
+      <Surface bar>
+        <ScreenToolbar
+          leading={<PageBackButton />}
+          trailing={<IconButton icon={PlusIcon} aria-label="Add node" edge="end" />}
+        />
+        <IconButton icon={XIcon} aria-label="Close" edge="start" />
+      </Surface>,
+    );
+    for (const name of ["Back", "Add node", "Close"]) {
+      const button = screen.getByLabelText(name);
+      expect(button.getAttribute("data-mp-icon-button"), name).toBe("glass");
+      const { dx, dy } = inkOffset(button);
+      expect(Math.abs(dx), `${name} dx`).toBeLessThanOrEqual(TOLERANCE_PT);
+      expect(Math.abs(dy), `${name} dy`).toBeLessThanOrEqual(TOLERANCE_PT);
+    }
+  });
+});