@multiplatform.one/components 7.81.1 → 7.82.0

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);
+    }
+  });
+});

package/src/layouts/navBar.spec.tsx

@@ -8,10 +8,10 @@
  * jsdom has no layout: the large title's geometry is stubbed through
  * getBoundingClientRect, and scrolling sets scrollTop on the scroll element.
  */
-import { ICON_BUTTON_GLYPH_PX } from "@multiplatform.one/forms";
+import { ICON_BUTTON_GLYPH_PX, IconButton } from "@multiplatform.one/forms";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset, useGlyphTintOnSurface } from "@multiplatform.one/theme";
-import { SlidersHorizontalIcon } from "@phosphor-icons/react";
+import { PlusIcon, SlidersHorizontalIcon } from "@phosphor-icons/react";
 import { act, cleanup, fireEvent, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -269,3 +269,59 @@ describe("bar glyphs carry their weight (LC-176)", () => {
     expect(screen.getByLabelText("Back").closest("[data-mp-icon-button-group]")).toBeNull();
   });
 });
+
+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";
+
+describe("inline bar title and glyphs on glass (FZ-8442)", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("a title is centred in the flow toolbar and shown at rest, clear of the back control", () => {
+    renderWithProviders(
+      <ScreenToolbar
+        leading={<PageBackButton />}
+        title="Inbox"
+        trailing={<PageBarButton icon={SlidersHorizontalIcon} aria-label="Filter" />}
+      />,
+    );
+    const title = document.querySelector("[data-bar-title]") as HTMLElement;
+    expect(title.textContent).toBe("Inbox");
+    expect(title.getAttribute("aria-hidden")).not.toBe("true");
+    const back = screen.getByLabelText("Back");
+    expect(title.contains(back)).toBe(false);
+    expect(back.parentElement?.contains(title)).toBe(false);
+  });
+
+  it("the pinned bar shows a given title at rest", () => {
+    renderWithProviders(
+      <Screen topBar={<ScreenToolbar leading={<PageBackButton />} title="Inbox" />}>
+        <div style={{ height: 2000 }} />
+      </Screen>,
+    );
+    const title = document.querySelector("[data-top-bar] [data-bar-title]") as HTMLElement;
+    expect(title.textContent).toBe("Inbox");
+    expect(title.getAttribute("aria-hidden")).not.toBe("true");
+  });
+
+  it("on glass the back caret drops its pull and a lone + keeps its own circle", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    renderWithProviders(
+      <Screen topBar={<ScreenToolbar leading={<PageBackButton />} />}>
+        <PageHeader
+          title="Nodes"
+          actions={<IconButton icon={PlusIcon} aria-label="Add node" edge="end" />}
+        />
+      </Screen>,
+    );
+    const back = screen.getByLabelText("Back");
+    expect(back.getAttribute("data-mp-icon-button")).toBe("glass");
+    const caret = back.querySelector("svg")!;
+    const pull = Math.round(Number(caret.getAttribute("width")) * (72 / 256));
+    expect(Array.from(caret.parentElement!.classList).some((c) => c.includes(`-${pull}px`))).toBe(
+      false,
+    );
+    const add = screen.getByLabelText("Add node");
+    expect(add.getAttribute("data-mp-icon-button")).toBe("glass");
+    expect(add.closest("[data-mp-glass-capsule]")).toBeNull();
+  });
+});

package/src/layouts/page.tsx

@@ -33,9 +33,15 @@ import {
   type PageTitleScale,
   type ParentScreen,
 } from "@multiplatform.one/theme";
-import { Button, IconButtonGroup, type ButtonProps } from "@multiplatform.one/forms";
+import {
+  Button,
+  IconButtonGroup,
+  useGlyphOnPlate,
+  type ButtonProps,
+} from "@multiplatform.one/forms";
 import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
+import { barTitleSpan, sideExtents } from "./barTitleSpan";
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import type { ScrollViewProps as TamaguiScrollViewProps, XStackProps, YStackProps } from "tamagui";
 import {
@@ -655,11 +661,94 @@ export { EmptyState, type EmptyStateProps } from "./EmptyState";
 // ScreenToolbar — minimal back/edit-style screen toolbar
 // ---------------------------------------------------------------------------
 
-export interface ScreenToolbarProps extends XStackProps {
+export interface ScreenToolbarProps extends Omit<XStackProps, "title"> {
   /** Leading content (typically a back button). */
   leading?: ReactNode;
   /** Trailing content (typically primary/secondary actions). */
   trailing?: ReactNode;
+  /**
+   * The bar's inline title (the iOS inline navigation title): centred in the
+   * bar, clear of the wider side group, never set against the back control.
+   */
+  title?: string;
+}
+
+function useBarTitleSpan() {
+  const none = { x: 0, width: 0 };
+  const [box, setBox] = useState({ row: 0, leading: none, trailing: none, title: 0 });
+  const set = <K extends keyof typeof box>(key: K, value: (typeof box)[K]) =>
+    setBox((prev) =>
+      JSON.stringify(prev[key]) === JSON.stringify(value) ? prev : { ...prev, [key]: value },
+    );
+  const extent = (event: LayoutChangeEvent) => {
+    const { x, width } = event.nativeEvent.layout;
+    return { x, width };
+  };
+  return {
+    span: barTitleSpan({
+      row: box.row,
+      title: box.title,
+      ...sideExtents(box.row, box.leading, box.trailing),
+    }),
+    measureRow: (event: LayoutChangeEvent) => set("row", Math.floor(extent(event).width)),
+    measureLeading: (event: LayoutChangeEvent) => set("leading", extent(event)),
+    measureTrailing: (event: LayoutChangeEvent) => set("trailing", extent(event)),
+    measureTitle: (event: LayoutChangeEvent) => set("title", Math.ceil(extent(event).width)),
+  };
+}
+
+function BarTitle({
+  title,
+  span,
+  onTitleWidth,
+  shown = true,
+  ...rest
+}: {
+  title: string;
+  span: { left: number; right: number };
+  onTitleWidth: (event: LayoutChangeEvent) => void;
+  shown?: boolean;
+} & XStackProps) {
+  const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
+  const text = {
+    ...knobProps.body,
+    fontWeight: "600",
+    color: "$color12",
+    numberOfLines: 1,
+  } as const;
+  return (
+    <>
+      {shown ? (
+        <XStack
+          position="absolute"
+          top={0}
+          left={0}
+          opacity={0}
+          pointerEvents="none"
+          aria-hidden
+          onLayout={onTitleWidth}
+        >
+          <SizableText {...text}>{title}</SizableText>
+        </XStack>
+      ) : null}
+      <XStack
+        position="absolute"
+        top={0}
+        bottom={0}
+        left={span.left}
+        right={span.right}
+        alignItems="center"
+        justifyContent="center"
+        pointerEvents="none"
+        aria-hidden={!shown}
+        data-bar-title=""
+        opacity={shown ? 1 : 0}
+        {...rest}
+      >
+        <SizableText {...text}>{title}</SizableText>
+      </XStack>
+    </>
+  );
 }
 
 /**
@@ -679,8 +768,9 @@ export function ScreenToolbar(props: ScreenToolbarProps) {
   return slot ? <PinnedTopBar {...props} slot={slot} /> : <InlineToolbar {...props} />;
 }
 
-function InlineToolbar({ leading, trailing, children, ...rest }: ScreenToolbarProps) {
+function InlineToolbar({ leading, trailing, title, children, ...rest }: ScreenToolbarProps) {
   const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
+  const titleSpan = useBarTitleSpan();
   const insetToken = usePageChromeInset();
   const bleed = insetToken ? { marginHorizontal: negateSpaceToken(insetToken) as "$4" } : null;
   // LC-145: a phone top bar is one row; the leading group shrinks first.
@@ -692,8 +782,9 @@ function InlineToolbar({ leading, trailing, children, ...rest }: ScreenToolbarPr
         data-testid="screen-toolbar"
         justifyContent="space-between"
         alignItems="center"
-        flexWrap={oneRow ? "nowrap" : "wrap"}
+        flexWrap={oneRow || title ? "nowrap" : "wrap"}
         minHeight={MIN_PRESS_TARGET}
+        {...(title ? { position: "relative" as const, onLayout: titleSpan.measureRow } : null)}
         {...bleed}
         {...(insetToken ? { paddingHorizontal: insetToken as "$4" } : knobProps.panelPadding)}
         {...knobProps.gap}
@@ -706,6 +797,7 @@ function InlineToolbar({ leading, trailing, children, ...rest }: ScreenToolbarPr
           // Shrink weight, not a size: the back label gives way before the actions wrap.
           flexShrink={oneRow ? 1000 : 1}
           minWidth={0}
+          {...(title ? { onLayout: titleSpan.measureLeading } : null)}
         >
           {leading}
         </XStack>
@@ -716,9 +808,13 @@ function InlineToolbar({ leading, trailing, children, ...rest }: ScreenToolbarPr
           flexShrink={1}
           minWidth={0}
           justifyContent="flex-end"
+          {...(title ? { onLayout: titleSpan.measureTrailing } : null)}
         >
           {trailing}
         </IconButtonGroup>
+        {title ? (
+          <BarTitle title={title} span={titleSpan.span} onTitleWidth={titleSpan.measureTitle} />
+        ) : null}
       </XStack>
     </Surface>
   );
@@ -737,19 +833,16 @@ function InlineToolbar({ leading, trailing, children, ...rest }: ScreenToolbarPr
 function PinnedTopBar({
   leading,
   trailing,
+  title: inlineTitle,
   children,
   slot,
   ...rest
 }: ScreenToolbarProps & { slot: { inset: string | null; maxWidth: number | null } }) {
   const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
-  const { scrolled, collapsed, title } = useScreenScroll();
-  const [sides, setSides] = useState({ leading: 0, trailing: 0 });
-  const measureSide = (side: "leading" | "trailing") => (event: LayoutChangeEvent) => {
-    const width = Math.ceil(event.nativeEvent.layout.width);
-    setSides((prev) => (prev[side] === width ? prev : { ...prev, [side]: width }));
-  };
+  const { scrolled, collapsed, title: largeTitle } = useScreenScroll();
+  const titleSpan = useBarTitleSpan();
   const motion = transitionProps(knobProps.motion.control);
-  const clearance = Math.max(sides.leading, sides.trailing);
+  const title = inlineTitle ?? largeTitle;
   // LC-153: the pinned bar is a bar, so its neutral buttons paint plain.
   return (
     <Surface bar>
@@ -772,6 +865,7 @@ function PinnedTopBar({
           flexWrap="nowrap"
           // The collapsed title is placed against this row, not the page.
           position="relative"
+          onLayout={titleSpan.measureRow}
           paddingHorizontal={(slot.inset ?? knobProps.panelPadding.padding) as "$4"}
           {...knobProps.gap}
           {...rest}
@@ -781,7 +875,7 @@ function PinnedTopBar({
             alignItems="center"
             flexShrink={1000}
             minWidth={0}
-            onLayout={measureSide("leading")}
+            onLayout={titleSpan.measureLeading}
           >
             {leading}
           </XStack>
@@ -794,29 +888,18 @@ function PinnedTopBar({
             flexShrink={1}
             minWidth={0}
             justifyContent="flex-end"
-            onLayout={measureSide("trailing")}
+            onLayout={titleSpan.measureTrailing}
           >
             {trailing}
           </IconButtonGroup>
           {title ? (
-            <XStack
-              position="absolute"
-              top={0}
-              bottom={0}
-              left={clearance}
-              right={clearance}
-              alignItems="center"
-              justifyContent="center"
-              pointerEvents="none"
-              aria-hidden={!collapsed}
-              data-bar-title=""
-              opacity={collapsed ? 1 : 0}
+            <BarTitle
+              title={title}
+              span={titleSpan.span}
+              onTitleWidth={titleSpan.measureTitle}
+              shown={Boolean(inlineTitle) || collapsed}
               {...motion}
-            >
-              <SizableText {...knobProps.body} fontWeight="600" color="$color12" numberOfLines={1}>
-                {title}
-              </SizableText>
-            </XStack>
+            />
           ) : null}
         </XStack>
       </YStack>
@@ -841,8 +924,11 @@ function useTopBarControl() {
 // Phosphor's caret path starts 72 units into its 256 grid; back pulls by that
 // so the caret's point, not its box, lands on the title's leading edge.
 const CARET_OPTICAL_INSET = 72 / 256;
+// Its ink is centred 8 units toward the point, so on a glass circle it moves
+// back by that to sit at the circle's centre (FZ-8442).
+const CARET_INK_OFFSET = 8 / 256;
 
-function backCaret(Caret: typeof CaretLeftIcon) {
+function backCaret(Caret: typeof CaretLeftIcon, inkSign: 1 | -1) {
   return function BackCaret({
     size = 22,
     color,
@@ -856,16 +942,22 @@ function backCaret(Caret: typeof CaretLeftIcon) {
     strokeWidth?: number;
     strokeLinejoin?: "round";
   }) {
+    const plated = useGlyphOnPlate();
     return (
-      <XStack data-back-caret="" marginInlineStart={-Math.round(size * CARET_OPTICAL_INSET)}>
+      <XStack
+        data-back-caret=""
+        {...(plated
+          ? { x: inkSign * size * CARET_INK_OFFSET }
+          : { marginInlineStart: -Math.round(size * CARET_OPTICAL_INSET) })}
+      >
         <Caret size={size} color={color} weight={weight} {...stroke} />
       </XStack>
     );
   };
 }
 
-const BackCaretLeft = backCaret(CaretLeftIcon);
-const BackCaretRight = backCaret(CaretRightIcon);
+const BackCaretLeft = backCaret(CaretLeftIcon, 1);
+const BackCaretRight = backCaret(CaretRightIcon, -1);
 
 export interface PageBackButtonProps extends Omit<ButtonProps, "children"> {
   /** Where back goes, shown beside the caret (the list's name). */

package/src/views/ImageGrid.tsx

@@ -30,6 +30,7 @@ import {
   XStack,
   YStack,
   getTokenValue,
+  isWeb,
   useWindowDimensions,
   type YStackProps,
 } from "tamagui";
@@ -251,6 +252,7 @@ function ImageGridTile({
         data-focused={isFocused || undefined}
         data-media-tile="image-grid"
         position="relative"
+        flexGrow={1}
         {...radiusFragment}
         borderWidth={0}
         cursor={clickable ? "pointer" : undefined}
@@ -264,8 +266,23 @@ function ImageGridTile({
         onPress={onPress}
       >
         {/* Clip media to the radius; keep overflow off the ring node so
-            LC-71 outline is not severed (same split as Input.Box). */}
-        <View borderRadius={radius} overflow="hidden">
+            LC-71 outline is not severed (same split as Input.Box).
+            LC-179: every tile takes its row's height. On web the clip is a
+            one-cell grid so a card drawn inside stretches to that height. */}
+        <View
+          borderRadius={radius}
+          overflow="hidden"
+          flexGrow={1}
+          {...(isWeb
+            ? {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0, 1fr)",
+                  justifyItems: "stretch",
+                },
+              }
+            : undefined)}
+        >
           <MediaRadiusContext.Provider value={radius}>{children}</MediaRadiusContext.Provider>
         </View>
         {hovered && !showRing ? (

package/types/charts/BarChart.d.ts

@@ -3,7 +3,7 @@ import type { YStackProps } from "tamagui";
 import type { ChartDatum, ChartDatumEvents } from "./types";
 export interface BarChartProps extends ChartDatumEvents, Omit<YStackProps, "children" | "width" | "height"> {
     data: ChartDatum[];
-    /** Drawing height as a theme size token or pixels (default 200). */
+    /** Drawing height as a theme size token, pixels, or "fill" (default 200). */
     height?: ChartHeight;
     /** Explicit width bypasses responsive measurement. */
     width?: number;

package/types/charts/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/charts/BarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAc3C,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG5D,MAAM,WAAW,aACf,SAAQ,gBAAgB,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5E,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,oEAAoE;IACpE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAY,EACZ,KAAK,EACL,WAAmB,EACnB,KAAK,EACL,MAAM,EACN,SAAgB,EAChB,SAAgB,EAChB,QAAe,EACf,MAAU,EACV,cAAc,EACd,KAAK,EACL,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,GAAG,UAAU,EACd,EAAE,aAAa,2CA6Ff"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/charts/BarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAc3C,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG5D,MAAM,WAAW,aACf,SAAQ,gBAAgB,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5E,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAY,EACZ,KAAK,EACL,WAAmB,EACnB,KAAK,EACL,MAAM,EACN,SAAgB,EAChB,SAAgB,EAChB,QAAe,EACf,MAAU,EACV,cAAc,EACd,KAAK,EACL,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,GAAG,UAAU,EACd,EAAE,aAAa,2CAmGf"}

package/types/charts/ChartDataView.d.ts

@@ -14,9 +14,11 @@ export interface ChartDataViewProps {
 /** One complete, reachable data view. The ordinary chart keeps its short name. */
 export declare function ChartDataView({ data, title, valueFormatter, children }: ChartDataViewProps): import("react/jsx-runtime").JSX.Element;
 /** Shared chart implementations join a composed header instead of adding a second action. */
-export declare function ChartDataFrame({ data, title, valueFormatter, width, children, }: Omit<ChartDataViewProps, "children"> & {
+export declare function ChartDataFrame({ data, title, valueFormatter, width, fill, children, }: Omit<ChartDataViewProps, "children"> & {
     children: ReactNode;
     width?: number;
+    /** The chart flexes to its region's height (LC-215). */
+    fill?: boolean;
 }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export declare function useChartDataViewProps(): Record<string, unknown>;
 //# sourceMappingURL=ChartDataView.d.ts.map

package/types/charts/ChartDataView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartDataView.d.ts","sourceRoot":"","sources":["../../src/charts/ChartDataView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE,UAAU,EAAE,CAAC;QACnB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;KAC3C,KAAK,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2F1F;AAED,6FAA6F;AAC7F,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,cAAc,EACd,KAAK,EACL,QAAQ,GACT,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2UAchF;AAED,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAO/D"}
+{"version":3,"file":"ChartDataView.d.ts","sourceRoot":"","sources":["../../src/charts/ChartDataView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAanF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE,UAAU,EAAE,CAAC;QACnB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;KAC3C,KAAK,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2F1F;AAED,6FAA6F;AAC7F,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,cAAc,EACd,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,2UAkCA;AAsDD,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAO/D"}

package/types/charts/ChartSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSurface.d.ts","sourceRoot":"","sources":["../../src/charts/ChartSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3F;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,SAAS,CAAC;CAC1C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,iBAAiB,2CA6BnB"}
+{"version":3,"file":"ChartSurface.d.ts","sourceRoot":"","sources":["../../src/charts/ChartSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3F;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,SAAS,CAAC;CAC1C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,iBAAiB,2CAsCnB"}

package/types/charts/chartHeight.d.ts

@@ -1,4 +1,5 @@
 import { type SizeKey } from "@multiplatform.one/theme";
-export type ChartHeight = number | SizeKey;
+/** `"fill"` flexes the chart to the height its region hands it (LC-215). */
+export type ChartHeight = number | SizeKey | "fill";
 export declare function useChartHeight(height: ChartHeight | undefined, fallback: number): number;
 //# sourceMappingURL=chartHeight.d.ts.map

package/types/charts/chartHeight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartHeight.d.ts","sourceRoot":"","sources":["../../src/charts/chartHeight.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEhG,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIxF"}
+{"version":3,"file":"chartHeight.d.ts","sourceRoot":"","sources":["../../src/charts/chartHeight.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEhG,4EAA4E;AAC5E,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpD,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CASxF"}