@multiplatform.one/components 7.11.0 → 7.15.0

package/src/SheetModal/SheetModal.detentLayout.spec.tsx

@@ -0,0 +1,173 @@
+/**
+ * MPO-68 / MPO-299: what the native sheet lays out at a settled detent.
+ *
+ * The iOS simulator run on 965825866 dragged a sheet to a lower detent: it
+ * kept its full height and slid it below the screen, or under the keyboard,
+ * so the tail of a list inside it was unreachable.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Animated, PanResponder, type PanResponderCallbacks } from "react-native";
+import { Text } from "tamagui";
+import { resolveSheetDetents } from "./detents";
+import type { SheetModalProps } from "./index";
+import { SheetModal } from "./index.native";
+
+const keyboard = vi.hoisted(() => ({ inset: 0 }));
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+vi.mock("../shared/useKeyboardInset", () => ({ useKeyboardInset: () => keyboard.inset }));
+
+let pan: PanResponderCallbacks;
+let springs: Array<{ toValue: number; done?: (result: { finished: boolean }) => void }>;
+
+beforeEach(() => {
+  keyboard.inset = 0;
+  springs = [];
+  vi.spyOn(PanResponder, "create").mockImplementation((config) => {
+    pan = config;
+    return { panHandlers: {} } as never;
+  });
+  vi.spyOn(Animated, "spring").mockImplementation((_value, config) => ({
+    start: (done) => {
+      springs.push({ toValue: config.toValue as number, done });
+    },
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+  vi.spyOn(Animated, "timing").mockImplementation(() => ({
+    start: (done) => done?.({ finished: true }),
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function px(value: string) {
+  return Number.parseFloat(value);
+}
+
+function open(props: Partial<SheetModalProps> = {}) {
+  const view = renderWithProviders(
+    <SheetModal open onOpenChange={() => {}} scrollable {...props}>
+      <Text>row</Text>
+    </SheetModal>,
+  );
+  const frame = view.getByTestId("sheet-modal-frame");
+  const full = px(frame.style.maxHeight);
+  return { view, frame, full };
+}
+
+/** react-native-web keeps the onLayout handler on the node; call it the way a device layout would. */
+function layout(element: HTMLElement, height: number) {
+  const handler = (element as unknown as Record<string, (event: unknown) => void>)
+    .__reactLayoutHandler;
+  act(() => handler({ nativeEvent: { layout: { x: 0, y: 0, width: 390, height } } }));
+}
+
+function drag(dy: number) {
+  act(() => {
+    pan.onPanResponderGrant?.({} as never, {} as never);
+    pan.onPanResponderMove?.({} as never, { dy } as never);
+    pan.onPanResponderRelease?.({} as never, { dy, vy: 0 } as never);
+  });
+}
+
+function settle() {
+  const last = springs[springs.length - 1];
+  act(() => last.done?.({ finished: true }));
+  return last;
+}
+
+describe("a native sheet at rest on a lower detent", () => {
+  it("is laid out at the detent height, not slid down at full height", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    expect(lower).toBeLessThan(full);
+    drag(full - lower);
+    expect(settle().toValue).toBe(full - lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("gives a filled body the detent as its definite height", () => {
+    const { frame, full } = open({ fill: true });
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.height)).toBe(lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+  });
+
+  it("ends above the keyboard when the keyboard is up", () => {
+    keyboard.inset = 300;
+    const { frame, full } = open();
+    expect(frame.parentElement?.style.paddingBottom).toBe("300px");
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("grows back to full height under a still top edge when a drag picks it up", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(full);
+    expect(frame.style.transform).toContain(`translateY(${full - lower}px)`);
+    act(() => pan.onPanResponderRelease?.({} as never, { dy: -(full - lower), vy: 0 } as never));
+    expect(settle().toValue).toBe(0);
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+
+  it("keeps its top edge when the keyboard moved the max height under it", () => {
+    const { view, frame, full } = open();
+    layout(frame, full);
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    keyboard.inset = 300;
+    view.rerender(
+      <SheetModal open onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>,
+    );
+    const lifted = 844 - 300 - 48;
+    expect(px(frame.style.maxHeight)).toBe(Math.min(lifted, lower));
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(lifted);
+    expect(frame.style.transform).toContain(`translateY(${lifted - lower}px)`);
+  });
+
+  it("keeps the drag when a scroll inside the sheet asks for the touch", () => {
+    open();
+    expect(pan.onPanResponderTerminationRequest?.({} as never, {} as never)).toBe(false);
+  });
+
+  it("forgets the rest height when the sheet closes and opens again", () => {
+    const { view, frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    const sheet = (next: boolean) => (
+      <SheetModal open={next} onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>
+    );
+    view.rerender(sheet(false));
+    view.rerender(sheet(true));
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+});

package/src/SheetModal/SheetModal.touch.spec.tsx

@@ -0,0 +1,63 @@
+/**
+ * MPO-299: an owned ScrollView inside the native sheet never scrolled on
+ * the iOS simulator, while the same swipe scrolled the Combobox sheet.
+ *
+ * On native, tamagui turns a press or focus-visible pseudo into a JS
+ * responder claim (`onStartShouldSetResponder` returning true). A surface
+ * holding that claim takes every touch that starts on plain content inside
+ * it, and a responder ancestor stops the ScrollView's own pan.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal } from "./index.native";
+
+const stacks = vi.hoisted(() => new Map<string, Record<string, unknown>>());
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+}));
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("tamagui")>();
+  const React = await import("react");
+  const YStack = React.forwardRef((props: Record<string, unknown>, ref) => {
+    if (typeof props.testID === "string") stacks.set(props.testID, props);
+    return React.createElement(actual.YStack as never, { ...props, ref });
+  });
+  return { ...actual, YStack };
+});
+
+afterEach(() => {
+  cleanup();
+  stacks.clear();
+});
+
+const claimsResponder = [
+  "pressStyle",
+  "focusStyle",
+  "focusVisibleStyle",
+  "onPress",
+  "onPressIn",
+  "onPressOut",
+  "onLongPress",
+];
+
+it("keeps every native sheet stack out of the touch responder", () => {
+  for (const fill of [false, true]) {
+    renderWithProviders(
+      <SheetModal open onOpenChange={() => {}} fill={fill} scrollable>
+        <Text>row</Text>
+      </SheetModal>,
+    );
+    for (const id of ["sheet-modal-surface", "sheet-modal-content"]) {
+      const stack = stacks.get(id);
+      expect(stack, id).toBeDefined();
+      for (const key of claimsResponder) expect(stack, `${id} ${key}`).not.toHaveProperty(key);
+    }
+    cleanup();
+    stacks.clear();
+  }
+});

package/src/SheetModal/index.native.tsx

@@ -10,7 +10,15 @@
  * height with a large-detent cap. LC-71: the frame is not a control.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Animated,
   Easing,
@@ -23,6 +31,7 @@ import {
   View as RNView,
   useWindowDimensions,
 } from "react-native";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
@@ -62,6 +71,7 @@ export function SheetModal({
   const { knobProps } = useResolvedKnobs();
   const { height: windowHeight } = useWindowDimensions();
   const keyboardInset = useKeyboardInset();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
   const [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -71,11 +81,12 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  // MPO-64: the sheet ends above the keyboard rather than running under it.
+  // MPO-64: the sheet ends above the keyboard rather than running under it,
+  // and below the status bar with a strip of backdrop still showing.
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
     minSheetHeight,
-    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - backdropStrip)),
+    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - topInset - backdropStrip)),
   );
 
   /*
@@ -127,8 +138,59 @@ export function SheetModal({
   const presentationRef = useRef(0);
   const activeRef = useRef(false);
 
+  /*
+   * MPO-68 / MPO-299: a sheet at rest below full height is LAID OUT at that
+   * height. Translating a full-height frame down pushed its bottom off the
+   * screen, or under the keyboard, and the scroll owner inside still measured
+   * the full height, so the tail could never be scrolled into view.
+   *
+   * `frameCap` rides the same Animated.View as `translateY`, so the swap
+   * between "full height, translated" and "detent height, at 0" lands in one
+   * commit and the top edge does not move. `restHeightRef` is null at full
+   * height; a gesture always runs uncapped, in `travel` coordinates.
+   */
+  const frameCap = useRef(new Animated.Value(maxHeight)).current;
+  const maxHeightRef = useRef(maxHeight);
+  const restHeightRef = useRef<number | null>(null);
+  // The last uncapped layout, and whether it filled the max height. A capped
+  // frame measures only its cap, so when the keyboard moves the max height
+  // under a resting sheet, its full height is re-derived from these.
+  const naturalRef = useRef(0);
+  const filledRef = useRef(false);
+
+  useLayoutEffect(() => {
+    maxHeightRef.current = maxHeight;
+    const rest = restHeightRef.current;
+    frameCap.setValue(rest === null ? maxHeight : Math.min(maxHeight, rest));
+    if (rest !== null && naturalRef.current > 0) {
+      setMeasuredHeight(filledRef.current ? maxHeight : Math.min(naturalRef.current, maxHeight));
+    }
+  }, [frameCap, maxHeight]);
+
+  const restAt = useCallback(
+    (height: number) => {
+      restHeightRef.current = height;
+      frameCap.setValue(Math.min(maxHeightRef.current, height));
+      restRef.current = 0;
+      translateY.setValue(0);
+    },
+    [frameCap, translateY],
+  );
+
+  const releaseRest = useCallback(() => {
+    const rest = restHeightRef.current;
+    if (rest === null) return;
+    restHeightRef.current = null;
+    const offset = Math.max(0, travelRef.current - Math.min(maxHeightRef.current, rest));
+    frameCap.setValue(maxHeightRef.current);
+    restRef.current = offset;
+    translateY.setValue(offset);
+  }, [frameCap, translateY]);
+
   const settleTo = useCallback(
-    (toValue: number, velocity = 0) => {
+    (height: number, velocity = 0) => {
+      const presentation = presentationRef.current;
+      const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
       Animated.spring(translateY, {
         toValue,
@@ -141,9 +203,12 @@ export function SheetModal({
         // Modal does not advance on the New Architecture, and the drag path
         // already writes this value from JS.
         useNativeDriver: false,
-      }).start();
+      }).start(({ finished }) => {
+        if (!finished || toValue === 0) return;
+        if (activeRef.current && presentation === presentationRef.current) restAt(height);
+      });
     },
-    [translateY],
+    [restAt, translateY],
   );
 
   const dismiss = useCallback(
@@ -171,10 +236,15 @@ export function SheetModal({
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dy) > 2,
+        // Lifting a rest cap can scroll the list inside, and a scroll lets
+        // any ancestor ScrollView the finger started under claim the touch,
+        // ending the drag and blurring a focused input on release.
+        onPanResponderTerminationRequest: () => false,
         onPanResponderGrant: () => {
           translateY.stopAnimation((value) => {
             if (typeof value === "number" && Number.isFinite(value)) restRef.current = value;
           });
+          releaseRest();
         },
         onPanResponderMove: (_evt, g) => {
           const next = restRef.current + g.dy;
@@ -199,11 +269,11 @@ export function SheetModal({
               best = height;
             }
           }
-          settleTo(tvl - best, g.vy);
+          settleTo(best, g.vy);
         },
-        onPanResponderTerminate: () => settleTo(restRef.current),
+        onPanResponderTerminate: () => settleTo(travelRef.current - restRef.current),
       }),
-    [dismiss, settleTo, translateY],
+    [dismiss, releaseRest, settleTo, translateY],
   );
 
   /*
@@ -246,6 +316,8 @@ export function SheetModal({
   useEffect(() => {
     presentationRef.current += 1;
     activeRef.current = open;
+    restHeightRef.current = null;
+    frameCap.setValue(maxHeightRef.current);
     if (open) {
       enter();
     } else {
@@ -265,7 +337,7 @@ export function SheetModal({
       }
       translateY.stopAnimation();
     };
-  }, [open, enter, translateY]);
+  }, [open, enter, frameCap, translateY]);
 
   return (
     <Modal
@@ -287,8 +359,12 @@ export function SheetModal({
         </Pressable>
         <Animated.View
           onLayout={(e) => {
+            if (restHeightRef.current !== null) return;
             const h = Math.round(e.nativeEvent.layout.height);
-            if (h > 0 && h !== measuredHeight) setMeasuredHeight(h);
+            if (h <= 0) return;
+            naturalRef.current = h;
+            filledRef.current = h >= maxHeightRef.current - 1;
+            if (h !== measuredHeight) setMeasuredHeight(h);
           }}
           testID="sheet-modal-frame"
           style={{
@@ -296,10 +372,10 @@ export function SheetModal({
             // the sheet cannot give way to the keyboard.
             flexShrink: 1,
             minHeight: 0,
-            maxHeight,
+            maxHeight: frameCap,
             // The cap is already keyboard- and window-aware; fill only asks
             // for it as a definite height rather than an upper bound.
-            ...(fill ? { height: maxHeight } : null),
+            ...(fill ? { height: frameCap } : null),
             transform: [{ translateY }],
           }}
         >
@@ -311,13 +387,15 @@ export function SheetModal({
             borderBottomRightRadius={0}
             elevation={knobProps.elevation}
             maxHeight={maxHeight}
-            {...(fill ? { ...fillSlot, flexShrink: 1 } : null)}
+            flexShrink={1}
+            minHeight={0}
+            {...(fill ? fillSlot : null)}
             paddingTop="$2"
             paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
             overflow="hidden"
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={{ outlineWidth: 0 }}
+            // No focus or press pseudo on this surface: on native tamagui
+            // turns one into a touch-responder claim, and a responder here
+            // takes every drag from the ScrollView inside (MPO-299).
             accessibilityViewIsModal
             onAccessibilityEscape={close}
           >

package/src/Tabs/Tabs.hydration.spec.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+/**
+ * MPO-279: on touch mobile web the server cannot know the device, so it renders
+ * pointer-sized tabs. Hydration has to reproduce that markup, then adopt the
+ * touch floor; a first client render at touch size is an attribute mismatch
+ * React never patches.
+ */
+import { TestProviders } from "@multiplatform.one/test-utils";
+import { act } from "react";
+import { hydrateRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+const host = vi.hoisted(() => {
+  vi.stubGlobal("matchMedia", () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+  }));
+  return { web: true, touch: false };
+});
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  get isWeb() {
+    return host.web;
+  },
+  get isTouchable() {
+    return !host.web && host.touch;
+  },
+  get isWebTouchable() {
+    return host.web && host.touch;
+  },
+}));
+
+const items = [
+  { value: "address", label: "Address & Contact", content: <>address panel</> },
+  { value: "settings", label: "Settings", content: <>settings panel</> },
+];
+
+function Fixture() {
+  return (
+    <TestProviders>
+      <Tabs items={items} defaultValue="address" />
+    </TestProviders>
+  );
+}
+
+/** Every `_h-` height atom painted inside each tab, in document order. */
+function tabHeights(root: ParentNode): string[][] {
+  return [...root.querySelectorAll('[role="tab"]')].map((tab) =>
+    [tab, ...tab.querySelectorAll("*")].flatMap((node) =>
+      [...node.classList].filter((name) => /^_h-\d/.test(name)),
+    ),
+  );
+}
+
+let container: HTMLDivElement;
+let root: Root | undefined;
+let errors: unknown[];
+
+beforeEach(() => {
+  host.web = true;
+  host.touch = false;
+  errors = [];
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.spyOn(console, "error").mockImplementation((...args) => errors.push(args));
+  container = document.createElement("div");
+  document.body.append(container);
+});
+
+afterEach(async () => {
+  if (root) await act(async () => root?.unmount());
+  root = undefined;
+  container.remove();
+  vi.restoreAllMocks();
+});
+
+async function hydrate() {
+  await act(async () => {
+    root = hydrateRoot(container, <Fixture />, {
+      onRecoverableError: (error) => errors.push(error),
+    });
+  });
+}
+
+const hydrationErrors = () =>
+  errors.filter((error) => /hydration|hydrated|didn't match/i.test(String(error)));
+
+describe("Tabs sizing through hydration (MPO-279)", () => {
+  it("keeps the server's pointer-sized tabs through hydration, then adopts the touch floor", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverTabs = [...container.querySelectorAll('[role="tab"]')];
+    const serverHeights = tabHeights(container);
+    expect(serverHeights.flat()).not.toHaveLength(0);
+
+    host.touch = true;
+    await hydrate();
+
+    expect(hydrationErrors()).toEqual([]);
+    expect([...container.querySelectorAll('[role="tab"]')]).toEqual(serverTabs);
+    const clientHeights = tabHeights(container);
+    expect(clientHeights).not.toEqual(serverHeights);
+    for (const heights of clientHeights) expect(heights).toContain("_h-48px");
+  });
+
+  it("leaves pointer sizing alone on a pointer device", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverHeights = tabHeights(container);
+    await hydrate();
+    expect(hydrationErrors()).toEqual([]);
+    expect(tabHeights(container)).toEqual(serverHeights);
+  });
+
+  it("sizes native tabs to the touch floor on the first render", () => {
+    host.web = false;
+    host.touch = true;
+    container.innerHTML = renderToString(<Fixture />);
+    for (const heights of tabHeights(container)) expect(heights).toContain("_h-48px");
+  });
+});

package/src/Tabs/index.tsx

@@ -37,6 +37,7 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   type GroupPosition,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
@@ -492,7 +493,7 @@ function TabsRoot({
             x={activeLayout.x}
             width={activeLayout.width}
             data-tabs-indicator="underline"
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       ) : (
@@ -508,7 +509,7 @@ function TabsRoot({
             {...(knobProps.elevation !== undefined
               ? { elevation: knobProps.elevation }
               : undefined)}
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       )

package/src/Text.spec.tsx

@@ -21,10 +21,10 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, useAccentOnSurface } from "@multiplatform.one/theme";
 import { XStack } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
-import { Text } from "./Text";
+import { Anchor, Text } from "./Text";
 
 afterEach(cleanup);
 
@@ -181,6 +181,36 @@ describe("house Text — fontWeight and bodyFont reach the text node", () => {
   });
 });
 
+describe("house Anchor — link chrome is house Text's, in the accent (MPO-21 G11-A)", () => {
+  function AccentProbe({ onInk }: { onInk: (ink: string) => void }) {
+    onInk(useAccentOnSurface());
+    return null;
+  }
+
+  it("paints the AA-safe accent ink, not tamagui's link colour", () => {
+    let ink = "";
+    const anchor = renderTextClasses(
+      <>
+        <AccentProbe onInk={(value) => (ink = value)} />
+        <Anchor href="#">{LABEL}</Anchor>
+      </>,
+      ["_col-"],
+    );
+    expect(ink).not.toBe("");
+    const accented = renderTextClasses(<Anchor color={ink as never}>{LABEL}</Anchor>, ["_col-"]);
+    const body = renderTextClasses(<Text>{LABEL}</Text>, ["_col-"]);
+    expect(anchor).not.toHaveLength(0);
+    expect(anchor).toEqual(accented);
+    expect(anchor).not.toEqual(body);
+  });
+
+  it("a consumer colour still ejects (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(<Anchor color="$color9">{LABEL}</Anchor>, ["_col-"]);
+    const explicit = renderTextClasses(<Text color="$color9">{LABEL}</Text>, ["_col-"]);
+    expect(ejected).toEqual(explicit);
+  });
+});
+
 // The NATIVE arm lives in ./Text.native.spec.tsx. It used to sit here as a
 // `vi.resetModules()` + dynamic-import block, but that returned a SPLIT module
 // graph — a fresh `renderWithProviders` over a stale `useResolvedKnobs` — and

package/src/Text.tsx

@@ -24,10 +24,10 @@
  *    500/600 are not label weights; see tamagui-rendered-reference.md §9)
  *  - textAccent → knobProps.textAccentColor  (high $color / medium+low
  *    $color11, the AA legibility floor) on Text/SizableText/Paragraph.
- *    Anchor keeps tamagui's link ink: link chrome has no owning LC rule yet
- *    (the former registry row's ADJUDICATION-CANDIDATE stands, tracked in
- *    the MR), and painting body accent over it would silently restyle every
- *    link before that adjudication.
+ *  - link ink → Anchor paints the accent, as the most chromatic step of the
+ *    theme's accent ramp that still clears AA on both page surfaces
+ *    (`useAccentOnSurface`). House Text owns link chrome (Clay 2026-09-26,
+ *    MPO-21 G11-A); a consumer `color` still ejects.
  *
  * Default body/label ramp (tamagui-rendered-reference.md §9, the $4 / $true
  * stop): 14px / 25px / 400. createInterFont's size+10 table yields 14/24;
@@ -38,7 +38,7 @@
  * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
  * TamaguiParagraph / TamaguiAnchor (./tamagui.ts escape hatches, LC-45).
  */
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   Anchor as RawAnchor,
   type AnchorProps,
@@ -81,5 +81,6 @@ export function Paragraph(props: ParagraphProps) {
 
 export function Anchor(props: AnchorProps) {
   const { knobProps } = useResolvedKnobs();
-  return <RawAnchor {...knobProps.body} {...props} />;
+  const linkInk = useAccentOnSurface();
+  return <RawAnchor {...knobProps.body} color={linkInk} {...props} />;
 }