@multiplatform.one/components 7.81.2 → 7.82.1

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 {
@@ -52,7 +58,7 @@ import {
   YStack,
   isWeb,
 } from "tamagui";
-import { useBottomChromeInset } from "../appShell/bottomChrome";
+import { BottomChromeClearance } from "../appShell/BottomChromeClearance";
 import { componentColors, sectionHeading } from "../componentColors";
 import { useDirection } from "../hooks/useDirection";
 import { useTranslation } from "../shared/i18n";
@@ -280,7 +286,6 @@ function PageShell({
   const scrollState = useScreenScrollController();
   useReportScreenScroll(scrollState.state, Boolean(topBar));
   const [accessories] = useState(createBottomAccessoryStore);
-  const chromeInset = useBottomChromeInset();
   const inset = noPadding ? null : (knobProps.panelPadding.padding as string);
   const cap = maxWidth && !bleed ? maxWidth : null;
 
@@ -330,15 +335,7 @@ function PageShell({
 
   // The floating tab bar covers the bottom of the screen; content scrolls
   // under it, and this clears its last row.
-  const chromeClearance =
-    chromeInset > 0 ? (
-      <YStack
-        height={chromeInset}
-        flexShrink={0}
-        aria-hidden
-        data-testid="screen-chrome-clearance"
-      />
-    ) : null;
+  const chromeClearance = <BottomChromeClearance testID="screen-chrome-clearance" />;
 
   if (!scroll) {
     return shell(
@@ -655,11 +652,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 +759,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 +773,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 +788,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 +799,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 +824,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 +856,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 +866,7 @@ function PinnedTopBar({
             alignItems="center"
             flexShrink={1000}
             minWidth={0}
-            onLayout={measureSide("leading")}
+            onLayout={titleSpan.measureLeading}
           >
             {leading}
           </XStack>
@@ -794,29 +879,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 +915,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 +933,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/types/appShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/appShell/AppShell.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAepF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,mBAAmB;IAClC,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,uEAAuE;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iGAAiG;IACjG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,wEAAwE;AACxE,wBAAgB,aAAa,CAC3B,YAAY,EAAE,SAAS,mBAAmB,EAAE,EAC5C,IAAI,EAAE,MAAM,GACX;IAAE,WAAW,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAQnE;AAiKD,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAc,EACd,QAAQ,EACR,MAAoB,GACrB,EAAE,aAAa,2CAiQf"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/appShell/AppShell.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAepF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,mBAAmB;IAClC,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,uEAAuE;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iGAAiG;IACjG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,wEAAwE;AACxE,wBAAgB,aAAa,CAC3B,YAAY,EAAE,SAAS,mBAAmB,EAAE,EAC5C,IAAI,EAAE,MAAM,GACX;IAAE,WAAW,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAQnE;AAiKD,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAc,EACd,QAAQ,EACR,MAAoB,GACrB,EAAE,aAAa,2CA0Pf"}

package/types/appShell/BottomChromeClearance.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Ends a scroll view's content with the height the bottom chrome covers, so
+ * content scrolls under a translucent tab bar and its last row still clears it.
+ * Renders nothing when no bar is mounted. One per scroll view: `Screen` ends
+ * its own content with one.
+ */
+export declare function BottomChromeClearance({ testID }: {
+    testID?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BottomChromeClearance.d.ts.map

package/types/appShell/BottomChromeClearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomChromeClearance.d.ts","sourceRoot":"","sources":["../../src/appShell/BottomChromeClearance.tsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,MAA2B,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,kDAKzF"}

package/types/appShell/bottomChrome.d.ts

@@ -9,17 +9,7 @@
 import { type ReactNode } from "react";
 /** Publish (or with null, withdraw) one floating bar's covered height. */
 export declare function setBottomChromeInset(id: symbol, next: number | null): void;
-/**
- * A region whose frame already ends above the bottom chrome, so nothing in it
- * pads by the inset again.
- */
-export declare function BottomChromeCleared({ children }: {
-    children?: ReactNode;
-}): import("react").FunctionComponentElement<import("react").ProviderProps<boolean>>;
-/**
- * Points of screen the bottom chrome covers; 0 when no floating tab bar is
- * mounted, or inside a `BottomChromeCleared` region.
- */
+/** Points of screen the bottom chrome covers; 0 when no floating tab bar is mounted. */
 export declare function useBottomChromeInset(): number;
 /** Publish (or with null, withdraw) a page's bottom accessory. The latest wins. */
 export declare function setBottomAccessory(id: symbol, node: ReactNode | null): void;

package/types/appShell/bottomChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottomChrome.d.ts","sourceRoot":"","sources":["../../src/appShell/bottomChrome.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAGL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AA4Bf,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,QAEnE;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,oFAEzE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAI7C;AAKD,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,QAEpE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,SAAS,CAE9C;AAED,sEAAsE;AACtE,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,QAEjE;AAED,uEAAuE;AACvE,wBAAgB,qBAAqB,IAAI,OAAO,CAE/C"}
+{"version":3,"file":"bottomChrome.d.ts","sourceRoot":"","sources":["../../src/appShell/bottomChrome.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AA4B7D,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,QAEnE;AAED,wFAAwF;AACxF,wBAAgB,oBAAoB,IAAI,MAAM,CAE7C;AAKD,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,QAEpE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,SAAS,CAE9C;AAED,sEAAsE;AACtE,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,QAEjE;AAED,uEAAuE;AACvE,wBAAgB,qBAAqB,IAAI,OAAO,CAE/C"}

package/types/appShell/index.d.ts

@@ -8,4 +8,5 @@ export type { AppEntry } from "./appTile";
 export * from "./SettingsSplit";
 export * from "./AppShell";
 export { useBottomChromeInset } from "./bottomChrome";
+export { BottomChromeClearance } from "./BottomChromeClearance";
 //# sourceMappingURL=index.d.ts.map

package/types/appShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/appShell/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/appShell/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/types/code/CodeBlock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/code/CodeBlock/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA2CH,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAa,EACb,QAAgB,EAChB,KAAK,EACL,eAAe,EAAE,mBAAmB,EACpC,cAAmB,EACnB,WAAW,EACX,IAAI,GACL,EAAE,cAAc,2CAiJhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/code/CodeBlock/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA4CH,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAa,EACb,QAAgB,EAChB,KAAK,EACL,eAAe,EAAE,mBAAmB,EACpC,cAAmB,EACnB,WAAW,EACX,IAAI,GACL,EAAE,cAAc,2CAgKhB"}

package/types/layouts/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/layouts/EmptyState.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAGL,KAAK,UAAU,EAMf,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAKjB,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IAChE,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AA6ED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,OAAe,EACf,MAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CA2GjB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/layouts/EmptyState.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAGL,KAAK,UAAU,EAKf,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAIjB,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IAChE,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AA+CD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,OAAe,EACf,MAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CA2GjB"}