@multiplatform.one/components 7.83.2 → 7.84.0

package/src/appShell/TabHost.native.tsx

@@ -15,21 +15,23 @@
  * (Material bottom navigation, PNG template icons) is built and switched off
  * until an Android build proves it (FZ-8140).
  *
+ * A page's bottom accessory (LC-174, e.g. a DataTable pager) rides the
+ * system bar too: on iOS 26, where the binary carries RNSTabsBottomAccessory,
+ * it is UITabBarController's bottom accessory, the system's own glass capsule
+ * above the bar (FZ-7995). Anywhere else it stays in the page's slot, which
+ * sits above the bar.
+ *
  * The bar's clearance is the inset this host publishes, as with the MPO
  * TabBar, so a Screen pads by it whether or not it scrolls. Each tab screen
  * leaves its scroll view's inset adjustment off: react-native-screens would
  * otherwise flip the first scroll view to `automatic`, and UIKit would add
  * the bar's height a second time (FZ-8640).
  */
-import {
-  useAccentTintedSurface,
-  useGlyphColor,
-  useIdentityInkOnSurface,
-} from "@multiplatform.one/theme";
+import { useAccentTintedSurface, useActiveTabInk, useGlyphColor } from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
 import { type ImageSourcePropType, Platform, UIManager } from "react-native";
-import { YStack } from "tamagui";
-import { setBottomChromeInset } from "./bottomChrome";
+import { XStack, YStack } from "tamagui";
+import { setBottomChromeInset, setFloatingBarMounted, useBottomAccessory } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
 import { type TabBarItem, tabBarInactiveInk } from "./TabBar";
 import { MpoTabHost, type TabHostProps } from "./MpoTabHost";
@@ -42,6 +44,12 @@ export const nativeTabsComponents = ["RNSTabsHost", "RNSTabsScreen"] as const;
 /** Points the system tab bar covers above the home-indicator band. */
 export const nativeTabBarHeight = 49;
 
+/** The Fabric component behind UITabBarController's bottom accessory (iOS 26). */
+export const nativeTabsAccessoryComponent = "RNSTabsBottomAccessory";
+
+/** Points the bottom accessory's capsule adds above the system bar, its gap included. */
+export const nativeTabsAccessoryHeight = 56;
+
 type ImageIcon = { type: "imageSource"; imageSource: ImageSourcePropType };
 type IconProp = { ios?: { type: "sfSymbol"; name: string }; android?: ImageIcon };
 
@@ -66,6 +74,7 @@ export interface NativeTabs {
     tabBarBackgroundColor?: string;
     tabBarItemActiveIndicatorColor?: string;
     experimentalControlNavigationStateInJS?: boolean;
+    bottomAccessory?: (environment: "regular" | "inline") => ReactNode;
     onNativeFocusChange?: (event: { nativeEvent: { tabKey: string } }) => void;
   }>;
   Screen: ComponentType<{
@@ -107,13 +116,39 @@ export function resolveNativeTabs(
   }
 }
 
+/**
+ * True when the system bar can host the page's bottom accessory: iOS 26 or
+ * later (UITabAccessory) and a binary that carries react-native-screens'
+ * accessory view. Otherwise the accessory stays in the page's slot.
+ */
+export function resolveNativeAccessory(
+  sources: Pick<NativeTabsSources, "hasComponent">,
+  os: string,
+  version: string | number,
+): boolean {
+  if (os !== "ios" || Number.parseInt(String(version), 10) < 26) return false;
+  try {
+    return sources.hasComponent(nativeTabsAccessoryComponent);
+  } catch {
+    return false;
+  }
+}
+
 let cached: NativeTabs | null | undefined;
+let cachedAccessory: boolean | undefined;
 
 function loadNativeTabs(): NativeTabs | null {
   if (cached === undefined) cached = resolveNativeTabs(appSources, Platform.OS);
   return cached;
 }
 
+function loadNativeAccessory(): boolean {
+  if (cachedAccessory === undefined) {
+    cachedAccessory = resolveNativeAccessory(appSources, Platform.OS, Platform.Version);
+  }
+  return cachedAccessory;
+}
+
 /** True when every item names the glyph this platform's system bar draws. */
 export function itemsHaveNativeIcons(items: readonly TabBarItem[], os = "ios"): boolean {
   const glyph = (item: TabBarItem) =>
@@ -130,15 +165,31 @@ export function nativeIconFor(item: TabBarItem): IconProp {
   };
 }
 
+/** The accessory's content inside the system capsule: one centred row. */
+function NativeAccessoryContent({ children }: { children: ReactNode }) {
+  return (
+    <XStack
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="$3"
+      data-testid="native-tab-accessory"
+    >
+      {children}
+    </XStack>
+  );
+}
+
 export function NativeTabHost({
   tabs,
   items,
   activeKey,
   onTabPress,
   children,
-}: TabHostProps & { tabs: NativeTabs }) {
+  hostsAccessory = false,
+}: TabHostProps & { tabs: NativeTabs; hostsAccessory?: boolean }) {
   const { Host, Screen } = tabs;
-  const accent = useIdentityInkOnSurface();
+  const accent = useActiveTabInk();
   const ink = useGlyphColor(tabBarInactiveInk);
   const surface = useGlyphColor("$color2");
   const indicator = useAccentTintedSurface();
@@ -147,11 +198,28 @@ export function NativeTabHost({
   const lastKey = useRef(activeKey ?? items[0]?.key);
   if (activeKey) lastKey.current = activeKey;
   const focusedKey = lastKey.current;
+  const hosting = hostsAccessory && Boolean(activeKey);
+  const pageAccessory = useBottomAccessory();
+  const accessory = hosting ? pageAccessory : null;
 
   useEffect(() => {
-    setBottomChromeInset(id, activeKey ? nativeTabBarHeight + deviceInset : null);
-  }, [activeKey, deviceInset, id]);
-  useEffect(() => () => setBottomChromeInset(id, null), [id]);
+    setBottomChromeInset(
+      id,
+      activeKey
+        ? nativeTabBarHeight + deviceInset + (accessory ? nativeTabsAccessoryHeight : 0)
+        : null,
+    );
+  }, [activeKey, accessory, deviceInset, id]);
+  useEffect(() => {
+    setFloatingBarMounted(id, hosting);
+  }, [hosting, id]);
+  useEffect(
+    () => () => {
+      setBottomChromeInset(id, null);
+      setFloatingBarMounted(id, false);
+    },
+    [id],
+  );
 
   return (
     <Host
@@ -164,6 +232,9 @@ export function NativeTabHost({
       tabBarBackgroundColor={surface}
       tabBarItemActiveIndicatorColor={indicator}
       experimentalControlNavigationStateInJS
+      bottomAccessory={
+        accessory ? () => <NativeAccessoryContent>{accessory}</NativeAccessoryContent> : undefined
+      }
       onNativeFocusChange={(event) => {
         const key = event.nativeEvent.tabKey;
         if (key !== activeKey) onTabPress(key);
@@ -199,5 +270,5 @@ export function NativeTabHost({
 export function TabHost(props: TabHostProps) {
   const tabs = loadNativeTabs();
   if (!tabs || !itemsHaveNativeIcons(props.items, Platform.OS)) return <MpoTabHost {...props} />;
-  return <NativeTabHost tabs={tabs} {...props} />;
+  return <NativeTabHost tabs={tabs} hostsAccessory={loadNativeAccessory()} {...props} />;
 }

package/src/icons/themedButtonInk.spec.tsx

@@ -0,0 +1,117 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-8577: a `themed` glyph inside a Button fills with the Button's ink on
+ * web, as it does on native. Before, an accentInk icon Button painted its
+ * frame in the bar tint while the svg filled with the theme's `var(--color)`,
+ * so the SHC console's search, graph and gauge glyphs drew near-black on web
+ * and purple on iOS. The same held for an intent icon button and a disabled
+ * one (FZ-8044, LC-40: the disabled twin keeps its ink, dimmed).
+ *
+ * jsdom cascades no Tamagui CSS, so the frame's ink is read from the rule
+ * behind its `_col-` class, and the glyph's from its own fill: either that
+ * ink itself or `currentColor`, which inherits it.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { Button } from "@multiplatform.one/forms";
+import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { themed } from "./themed";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const SearchGlyph = themed(MagnifyingGlassIcon);
+
+function renderUnder(ui: ReactElement, theme: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={theme}>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function ruleValue(className: string, property: string): string | null {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  return null;
+}
+
+function frameInk(label: string): string | null {
+  const frame = screen.getByLabelText(label);
+  const cls = Array.from(frame.classList).find(
+    (c) => c.startsWith("_col-") && !/^_col-0(hover|active|focus|press)/.test(c),
+  );
+  return cls ? ruleValue(cls, "color") : null;
+}
+
+function glyphFill(label: string): string | null {
+  const svg = screen.getByLabelText(label).querySelector("svg");
+  return svg?.getAttribute("fill") ?? null;
+}
+
+/** The glyph takes the frame's ink: the same value, or currentColor, which inherits it. */
+function expectGlyphTakesFrameInk(label: string) {
+  const ink = frameInk(label);
+  const fill = glyphFill(label);
+  expect(ink, `${label} frame ink`).toBeTruthy();
+  expect(fill, `${label} glyph fill`).toBeTruthy();
+  expect(fill).not.toBe("var(--color)");
+  if (fill !== "currentColor") expect(fill?.toLowerCase()).toBe(ink?.toLowerCase());
+}
+
+describe("FZ-8577: a themed glyph in a Button fills with the Button's ink on web", () => {
+  for (const theme of ["light_purple", "dark_purple", "light_blue", "dark_blue"]) {
+    it(`${theme}: an accentInk icon button in a bar`, () => {
+      renderUnder(
+        <Surface bar>
+          <Button chromeless accentInk icon={SearchGlyph} aria-label="Search" />
+        </Surface>,
+        theme,
+      );
+      expectGlyphTakesFrameInk("Search");
+    });
+
+    it(`${theme}: an accentInk icon button in content`, () => {
+      renderUnder(<Button chromeless accentInk icon={SearchGlyph} aria-label="Find" />, theme);
+      expectGlyphTakesFrameInk("Find");
+    });
+
+    it(`${theme}: an intent icon button`, () => {
+      renderUnder(<Button error icon={SearchGlyph} aria-label="Remove" />, theme);
+      expectGlyphTakesFrameInk("Remove");
+    });
+
+    it(`${theme}: a disabled accentInk icon button keeps the enabled twin's ink`, () => {
+      renderUnder(
+        <Surface bar>
+          <Button chromeless accentInk icon={SearchGlyph} aria-label="Next" />
+          <Button chromeless accentInk disabled icon={SearchGlyph} aria-label="Previous" />
+        </Surface>,
+        theme,
+      );
+      expectGlyphTakesFrameInk("Previous");
+      expect(frameInk("Previous")).toBe(frameInk("Next"));
+    });
+  }
+
+  it("a glyph with its own colour keeps it", () => {
+    renderUnder(
+      <Surface bar>
+        <Button chromeless accentInk icon={<SearchGlyph color="red" />} aria-label="Own" />
+      </Surface>,
+      "light_purple",
+    );
+    expect(glyphFill("Own")).toBe("red");
+  });
+});

package/src/layouts/PageTemplates.tsx

@@ -32,7 +32,7 @@ import {
 } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 import { XStack, YStack, isWeb, type SizeTokens } from "tamagui";
-import { PageHeader, Screen, ScreenToolbar, type ScreenProps } from "./page";
+import { PageHeader, PushedPage, Screen, ScreenToolbar, type ScreenProps } from "./page";
 import { SupportingPaneLayout } from "./PaneScaffold";
 import { useShellSidebarPanel } from "./shellSidebarSlot";
 
@@ -266,16 +266,19 @@ export function DetailPageLayout({
   return (
     // LC-157: the toolbar is the Screen's pinned top bar, so it stays put
     // while the record scrolls and takes the title once the header scrolls away.
-    <Screen
-      data-canonical="detail-page"
-      topBar={toolbar}
-      // LC-263: one readable column; a supporting pane gets the full width.
-      maxWidth={aside == null ? DETAIL_READABLE_WIDTH : undefined}
-      {...rest}
-    >
-      {renderTemplateHeader({ title, subtitle, actions, header, nav })}
-      {body}
-    </Screen>
+    // LC-270: a detail page is pushed, so on a phone its title starts there.
+    <PushedPage>
+      <Screen
+        data-canonical="detail-page"
+        topBar={toolbar}
+        // LC-263: one readable column; a supporting pane gets the full width.
+        maxWidth={aside == null ? DETAIL_READABLE_WIDTH : undefined}
+        {...rest}
+      >
+        {renderTemplateHeader({ title, subtitle, actions, header, nav })}
+        {body}
+      </Screen>
+    </PushedPage>
   );
 }
 

package/src/layouts/Screen.chromeClearance.spec.tsx

@@ -7,6 +7,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, screen } from "@testing-library/react";
 import { afterEach, expect, it } from "vitest";
 import { setBottomChromeInset } from "../appShell/bottomChrome";
+import { BottomAccessory } from "./bottomAccessory";
 import { Screen } from "./page";
 
 const bar = Symbol("bar");
@@ -39,3 +40,30 @@ it("clears the bar on a screen that does not scroll", () => {
   renderWithProviders(<Screen scroll={false}>row</Screen>);
   expect(screen.getByTestId("screen-chrome-clearance")).toBeTruthy();
 });
+
+it("hands the clearance to a slot accessory that stands on a bar it does not ride (FZ-7995)", () => {
+  act(() => setBottomChromeInset(bar, 83));
+  renderWithProviders(
+    <Screen>
+      row
+      <BottomAccessory>
+        <span data-testid="pager">pager</span>
+      </BottomAccessory>
+    </Screen>,
+  );
+  expect(screen.queryByTestId("screen-chrome-clearance")).toBeNull();
+  const lift = screen.getByTestId("bottom-accessory-lift");
+  expect(lift.contains(screen.getByTestId("pager"))).toBe(true);
+  expect(getComputedStyle(lift).paddingBottom === "83px" || /83px/.test(lift.outerHTML)).toBe(true);
+});
+
+it("grows its scrolling column to its content, so the clearance ends the content, not the viewport", () => {
+  act(() => setBottomChromeInset(bar, 77));
+  renderWithProviders(<Screen>row</Screen>);
+  const column = screen.getByTestId("screen");
+  const style = getComputedStyle(column);
+  const html = column.outerHTML;
+  expect(style.flexShrink === "0" || /_fs-0\b|flex-shrink: 0/.test(html)).toBe(true);
+  expect(style.flexBasis === "0px" || /_fb-0px\b|flex-basis: 0px/.test(html)).toBe(false);
+  expect(column.nextElementSibling).toBe(screen.getByTestId("screen-chrome-clearance"));
+});

package/src/layouts/bottomAccessory.tsx

@@ -4,7 +4,10 @@
  * UIPageControl under a paged list), not inline after the content.
  *
  * Under a floating TabBar the accessory moves into the bar, which floats it
- * as its own capsule above the tab capsule (LC-150). Otherwise a page shell
+ * as its own capsule above the tab capsule (LC-150), and under the system tab
+ * bar on iOS 26 into its bottom accessory (FZ-7995). A tab bar that hosts no
+ * accessory (the system bar before iOS 26) still covers the bottom of the
+ * screen, so the slot's bar stands on it instead of on the home indicator. Otherwise a page shell
  * (`Screen`) owns one bottom-accessory slot. Any component
  * hands it a control with `<BottomAccessory>`; the shell draws it in a bar
  * under its scroll view that stays put while the content scrolls, so the
@@ -30,7 +33,11 @@ import {
   type ReactNode,
 } from "react";
 import { YStack, isWeb } from "tamagui";
-import { setBottomAccessory, useFloatingBarMounted } from "../appShell/bottomChrome";
+import {
+  setBottomAccessory,
+  useBottomChromeInset,
+  useFloatingBarMounted,
+} from "../appShell/bottomChrome";
 import { componentColors } from "../componentColors";
 import { BottomSafeArea } from "./bottomSafeArea";
 
@@ -140,6 +147,15 @@ export function BottomAccessory({ children }: BottomAccessoryProps) {
 }
 
 /** A page shell's slot: the bar the registered accessories render in. */
+/** True while a page's slot holds an accessory. */
+export function useBottomAccessoryOccupied(store: BottomAccessoryStore): boolean {
+  return useSyncExternalStore(
+    store.subscribe,
+    () => store.getSnapshot().length > 0,
+    () => false,
+  );
+}
+
 export function BottomAccessoryHost({
   store,
   inset,
@@ -161,8 +177,8 @@ export function BottomAccessoryHost({
 }
 
 /**
- * The bar: the page's fill under a top hairline, and the home indicator's
- * inset below the controls.
+ * The bar: the page's fill under a top hairline, and below the controls the
+ * home indicator's inset, or in a page's slot the height a tab bar covers.
  */
 function BottomAccessoryBar({
   children,
@@ -176,6 +192,20 @@ function BottomAccessoryBar({
   hosted?: boolean;
 }) {
   const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
+  const chromeInset = useBottomChromeInset();
+  const lift = hosted && chromeInset > 0;
+  const controls = (
+    <YStack
+      width="100%"
+      {...(maxWidth ? { maxWidth, alignSelf: "center" as const } : null)}
+      alignItems="center"
+      paddingHorizontal={(inset ?? knobProps.panelPadding.padding) as "$4"}
+      paddingVertical={knobProps.gap.gap as "$2"}
+      {...knobProps.gap}
+    >
+      {children}
+    </YStack>
+  );
   return (
     <Surface bar>
       <YStack
@@ -188,18 +218,13 @@ function BottomAccessoryBar({
         borderColor={componentColors.divider as never}
         style={webSticky as never}
       >
-        <BottomSafeArea>
-          <YStack
-            width="100%"
-            {...(maxWidth ? { maxWidth, alignSelf: "center" as const } : null)}
-            alignItems="center"
-            paddingHorizontal={(inset ?? knobProps.panelPadding.padding) as "$4"}
-            paddingVertical={knobProps.gap.gap as "$2"}
-            {...knobProps.gap}
-          >
-            {children}
+        {lift ? (
+          <YStack width="100%" paddingBottom={chromeInset} data-testid="bottom-accessory-lift">
+            {controls}
           </YStack>
-        </BottomSafeArea>
+        ) : (
+          <BottomSafeArea>{controls}</BottomSafeArea>
+        )}
       </YStack>
     </Surface>
   );

package/src/layouts/page.tsx

@@ -40,7 +40,7 @@ import {
   type ButtonProps,
 } from "@multiplatform.one/forms";
 import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
-import { useState, type ReactNode } from "react";
+import { createContext, useContext, 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";
@@ -66,6 +66,7 @@ import { ScrollView } from "../ScrollView";
 import { KeyboardAvoidingWrapper } from "./KeyboardAvoidingWrapper";
 import {
   BottomAccessoryHost,
+  useBottomAccessoryOccupied,
   BottomAccessoryScope,
   createBottomAccessoryStore,
 } from "./bottomAccessory";
@@ -293,7 +294,10 @@ function PageShell({
     <YStack
       ref={scrollState.contentRoot as never}
       data-testid="screen"
-      flex={1}
+      // In a scroll view the column grows to its content (basis auto, no
+      // shrink): with flex 1 it was held to the viewport on web, its rows
+      // overflowed it, and the chrome clearance after it landed mid-list.
+      {...(scroll ? { flexGrow: 1, flexShrink: 0, flexBasis: "auto" as const } : { flex: 1 })}
       width="100%"
       {...(maxWidth && !bleed ? { maxWidth, alignSelf: "center" } : null)}
       {...(noPadding ? null : knobProps.panelPadding)}
@@ -334,8 +338,12 @@ function PageShell({
   };
 
   // The floating tab bar covers the bottom of the screen; content scrolls
-  // under it, and this clears its last row.
-  const chromeClearance = <BottomChromeClearance testID="screen-chrome-clearance" />;
+  // under it, and this clears its last row. A slot accessory stands on the bar
+  // and ends the scroll view above it, so it takes the clearance instead.
+  const accessoryOccupied = useBottomAccessoryOccupied(accessories);
+  const chromeClearance = accessoryOccupied ? null : (
+    <BottomChromeClearance testID="screen-chrome-clearance" />
+  );
 
   if (!scroll) {
     return shell(
@@ -416,6 +424,32 @@ export interface PageHeaderProps extends YStackProps {
   titleScale?: PageTitleScale;
 }
 
+const PushedPageContext = createContext<"inline" | "hero" | null>(null);
+
+/**
+ * LC-270 PUSHED-PAGE-INLINE-TITLE: marks a pushed page, a detail or form page
+ * reached through a back control. At compact width its title rides the top
+ * bar, centred between back and the actions, and its `PageHeader` draws no
+ * large title. Root pages keep LC-157's large title. `hero` is the App Store
+ * and Music variant: the page's own title (an identity block's name) stays in
+ * the content, the bar shows nothing at rest, and the same title fades into
+ * the bar once that name scrolls out of view (LC-157's measured collapse).
+ */
+export function PushedPage({ hero = false, children }: { hero?: boolean; children: ReactNode }) {
+  return (
+    <PushedPageContext.Provider value={hero ? "hero" : "inline"}>
+      {children}
+    </PushedPageContext.Provider>
+  );
+}
+
+/** True when the page's title belongs in its top bar from rest (LC-270). */
+export function useInlinePageTitle(): boolean {
+  const pushed = useContext(PushedPageContext);
+  const compact = useLayoutSizeClass() === "compact";
+  return pushed === "inline" && compact;
+}
+
 /**
  * Standard page header (Polaris Page / Primer PageHeader / Linear).
  *
@@ -452,24 +486,32 @@ export function PageHeader({
   // LC-157: the page title is the Screen's large title; its top bar shows it
   // once it scrolls away.
   const largeTitle = useLargeTitle(title, headingLevel === 1 && !heading);
+  // LC-270: a pushed page's title is in its top bar at compact width.
+  const inlineTitle = useInlinePageTitle() && headingLevel === 1;
+  // LC-143: a phone's page title takes the width its actions leave, on one
+  // line, so wide actions truncate it instead of breaking it into letters.
+  const compact = useLayoutSizeClass() === "compact";
   // D-11: the page-title step comes from the knob (`moderate` by default), so
   // one dial re-scales every composed screen; `titleScale` is the explicit
   // per-instance eject and resolves through the same table. The semantic tag
   // still follows headingLevel — the step is emphasis, not structure.
   const titleSize = titleScale ? resolvePageTitleScale(titleScale) : knobProps.pageTitle;
-  const titleNode =
-    heading ??
-    (title ? (
-      <TitleTag
-        margin={0}
-        {...largeTitle}
-        {...titleSize}
-        {...knobProps.heading}
-        {...(knobProps.heading.fontWeight ? { "data-font-weight-knob": "bold" } : null)}
-      >
-        {title}
-      </TitleTag>
-    ) : null);
+  const titleNode = inlineTitle
+    ? null
+    : (heading ??
+      (title ? (
+        <TitleTag
+          margin={0}
+          {...(compact ? { numberOfLines: 1 } : null)}
+          {...largeTitle}
+          {...titleSize}
+          {...knobProps.heading}
+          {...(knobProps.heading.fontWeight ? { "data-font-weight-knob": "bold" } : null)}
+        >
+          {title}
+        </TitleTag>
+      ) : null));
+  if (inlineTitle && !subtitle && !status && !actions && !nav && !children) return null;
 
   // When nav is present the strip's active indicator sits ON this rule, so
   // there is one hairline — not a second competing line. The header then
@@ -688,6 +730,9 @@ function useBarTitleSpan() {
   };
 }
 
+// LC-270: the pushed page's bar title is the page's heading.
+const pageTitleRole = { role: "heading", "aria-level": 1 } as const;
+
 function BarTitle({
   title,
   span,
@@ -766,6 +811,7 @@ function InlineToolbar({ leading, trailing, title, children, ...rest }: ScreenTo
   const bleed = insetToken ? { marginHorizontal: negateSpaceToken(insetToken) as "$4" } : null;
   // LC-145: a phone top bar is one row; the leading group shrinks first.
   const oneRow = useLayoutSizeClass() === "compact";
+  const pushedTitle = useInlinePageTitle();
   // LC-153: the toolbar is a bar, so its neutral buttons paint plain.
   return (
     <Surface bar>
@@ -804,7 +850,12 @@ function InlineToolbar({ leading, trailing, title, children, ...rest }: ScreenTo
           {trailing}
         </IconButtonGroup>
         {title ? (
-          <BarTitle title={title} span={titleSpan.span} onTitleWidth={titleSpan.measureTitle} />
+          <BarTitle
+            title={title}
+            span={titleSpan.span}
+            onTitleWidth={titleSpan.measureTitle}
+            {...(pushedTitle ? pageTitleRole : null)}
+          />
         ) : null}
       </XStack>
     </Surface>
@@ -834,6 +885,8 @@ function PinnedTopBar({
   const titleSpan = useBarTitleSpan();
   const motion = transitionProps(knobProps.motion.control);
   const title = inlineTitle ?? largeTitle;
+  // LC-270: a pushed page shows its title in the bar from rest, as its heading.
+  const pushedTitle = useInlinePageTitle();
   // LC-153: the pinned bar is a bar, so its neutral buttons paint plain.
   return (
     <Surface bar>
@@ -888,7 +941,8 @@ function PinnedTopBar({
               title={title}
               span={titleSpan.span}
               onTitleWidth={titleSpan.measureTitle}
-              shown={Boolean(inlineTitle) || collapsed}
+              shown={Boolean(inlineTitle) || collapsed || pushedTitle}
+              {...(pushedTitle ? pageTitleRole : null)}
               {...motion}
             />
           ) : null}

package/src/layouts/pageTitleOneLine.spec.tsx

@@ -0,0 +1,42 @@
+/**
+ * LC-143: on a phone a page title takes the width its actions leave, on one
+ * line with an ellipsis. Wide actions beside it (a view switcher, "…", Add)
+ * once squeezed the title column until it broke one letter per line.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PageHeader } from "./page";
+
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useLayoutSizeClass: () => layout.size };
+});
+
+afterEach(() => {
+  layout.size = "wide";
+  cleanup();
+});
+
+function header() {
+  return (
+    <PageHeader title="Pokemon" actions={<div style={{ width: 320 }}>List · Report · … · +</div>} />
+  );
+}
+
+describe("page title width (LC-143)", () => {
+  it("keeps a phone's page title on one line and truncates it beside wide actions", () => {
+    layout.size = "compact";
+    renderWithProviders(header());
+    const style = getComputedStyle(screen.getByRole("heading", { name: "Pokemon" }));
+    expect(style.textOverflow).toBe("ellipsis");
+    expect(style.whiteSpace).toBe("nowrap");
+  });
+
+  it("lets a wide screen's page title wrap", () => {
+    renderWithProviders(header());
+    const style = getComputedStyle(screen.getByRole("heading", { name: "Pokemon" }));
+    expect(style.textOverflow).not.toBe("ellipsis");
+  });
+});