@multiplatform.one/components 7.4.1 → 7.5.0

package/src/Tabs/index.tsx

@@ -11,19 +11,23 @@
  *   (indicator slide), elevation (thumb)
  * - intent: accent (default indicator hue) / error / warning / success
  * - overflow: horizontal scroll with web edge fades when tabs exceed width
+ *   (RTL-aware: CSSOM `scrollLeft` is 0 → −range; G10 hairline on the
+ *   underline strip, not a knob-driven border)
  * - lazyMount: panels mount on first visit and stay mounted (state preserved)
  * - fill: root + panel host grow into a bounded parent (Tabs contract,
  *   docs/theme-propagation-spec.md)
  *
  * LC-71: selected = underline or sliding fill; unselected have zero chrome;
  * keyboard ring on the focused tab only. LC-72: underline rounds only the
- * strip's outer top corners; contained clips to the track.
+ * strip's outer top corners; contained clips to the track. LC-49: one
+ * tab stop. LC-82: label strings ride Text.
  */
 
 import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   getGroupPosition,
+  hairline,
   keyboardFocusRingProps,
   pressTargetHitSlop,
   stackEdgeRadius,
@@ -36,15 +40,28 @@ import {
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
+import { useDirection } from "../hooks/useDirection";
 import { useTranslation } from "../shared/i18n";
+import { wrapBareTextChildren } from "../shared/textRidesText";
 import type { GetProps, ThemeName } from "tamagui";
-import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled } from "tamagui";
+import {
+  ScrollView,
+  Tabs as TamaguiTabs,
+  Text,
+  Theme,
+  View,
+  YStack,
+  isWeb,
+  styled,
+  withStaticProperties,
+} from "tamagui";
 import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
 
 export type TabsVariant = "underline" | "contained";
 export type TabsSize = "$2" | "$3" | "$4" | "$5";
+export type TabsDirection = "ltr" | "rtl";
 
 export interface TabsItem {
   /** Unique value identifying the tab (used for value/onChange) */
@@ -113,6 +130,8 @@ export interface TabsProps {
   loop?: boolean;
   /** Disable the whole tab strip */
   disabled?: boolean;
+  /** Accessible name of the tablist. Defaults to the translated "Tabs". */
+  ariaLabel?: string;
 }
 
 interface TabLayout {
@@ -122,6 +141,48 @@ interface TabLayout {
   height: number;
 }
 
+/**
+ * Physical overflow fades for the tab strip.
+ *
+ * CSSOM `scrollLeft` runs 0 → −(scrollWidth − clientWidth) under RTL
+ * (rtl-audit U1). Normalize so a rest-state strip still fades the inline-end
+ * edge instead of both-or-neither.
+ */
+export function tabsOverflowFades(
+  offset: number,
+  viewport: number,
+  content: number,
+  direction: TabsDirection,
+  threshold = 4,
+): { left: boolean; right: boolean } {
+  const range = Math.max(content - viewport, 0);
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  const fromRight = minScrollLeft + range - offset;
+  return { left: fromLeft > threshold, right: fromRight > threshold };
+}
+
+export function tabsScrollIntoViewX(
+  layout: TabLayout,
+  offset: number,
+  viewport: number,
+  content: number,
+  direction: TabsDirection,
+  pad = 32,
+): number | undefined {
+  const range = Math.max(content - viewport, 0);
+  if (range <= 0) return undefined;
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  let targetFromLeft: number | undefined;
+  if (layout.x < fromLeft + pad) {
+    targetFromLeft = Math.max(0, layout.x - pad);
+  } else if (layout.x + layout.width > fromLeft + viewport - pad) {
+    targetFromLeft = Math.min(range, layout.x + layout.width - viewport + pad);
+  }
+  return targetFromLeft === undefined ? undefined : targetFromLeft + minScrollLeft;
+}
+
 // Tabbing into the strip focuses the tablist container first; tamagui's
 // roving-focus group then redirects focus to the current tab from inside a
 // focusin handler. Chromium drops keyboard modality on that script focus, so
@@ -159,15 +220,6 @@ const StripWrapper = styled(View, {
   name: "MpTabsStrip",
   width: "100%",
   position: "relative",
-
-  variants: {
-    underline: {
-      true: {
-        borderBottomWidth: 1,
-        borderColor: componentColors.surface.border,
-      },
-    },
-  } as const,
 });
 
 const TabsList = styled(TamaguiTabs.List, {
@@ -210,7 +262,9 @@ const UnderlineIndicator = styled(View, {
   position: "absolute",
   bottom: 0,
   height: 2,
-  borderRadius: 1,
+  // Token scale (design-audit): 0, not a 1px radius that isn't a stop.
+  // A 2px selection mark is a rectangle sitting on the G10 hairline.
+  borderRadius: 0,
   backgroundColor: "$color9",
 });
 
@@ -237,7 +291,7 @@ const TabLabel = styled(Text, {
 
 // ── Tabs Component ────────────────────────────────────────────
 
-export function Tabs({
+function TabsRoot({
   items,
   value,
   defaultValue,
@@ -254,8 +308,10 @@ export function Tabs({
   activationMode = "automatic",
   loop = true,
   disabled = false,
+  ariaLabel,
 }: TabsProps) {
   const { t } = useTranslation();
+  const direction = useDirection();
   const intent =
     (accent && "accent") ||
     (error && "error") ||
@@ -324,27 +380,19 @@ export function Tabs({
   const [fades, setFades] = React.useState({ left: false, right: false });
   const updateFades = () => {
     const { offset, viewport, content } = scrollMetrics.current;
-    const left = offset > 4;
-    const right = content - viewport - offset > 4;
-    setFades((prev) => (prev.left === left && prev.right === right ? prev : { left, right }));
+    const next = tabsOverflowFades(offset, viewport, content, direction);
+    setFades((prev) => (prev.left === next.left && prev.right === next.right ? prev : next));
   };
 
   // Scroll the newly active tab into view when it is clipped
   React.useEffect(() => {
     if (!activeLayout) return;
     const { offset, viewport, content } = scrollMetrics.current;
-    if (content <= viewport) return;
-    const pad = 32;
-    let target: number | undefined;
-    if (activeLayout.x < offset + pad) {
-      target = Math.max(0, activeLayout.x - pad);
-    } else if (activeLayout.x + activeLayout.width > offset + viewport - pad) {
-      target = Math.min(content - viewport, activeLayout.x + activeLayout.width - viewport + pad);
-    }
+    const target = tabsScrollIntoViewX(activeLayout, offset, viewport, content, direction);
     if (target !== undefined) {
       scrollRef.current?.scrollTo({ x: target, animated: true });
     }
-  }, [activeLayout]);
+  }, [activeLayout, direction]);
 
   const isUnderline = variant === "underline";
   const indicatorTheme = (intent ?? "accent") as ThemeName;
@@ -356,7 +404,7 @@ export function Tabs({
   const slop = Math.max(0, Math.ceil((MIN_PRESS_TARGET - sizePx) / 2));
   const tabHitSlop = pressTargetHitSlop(sizePx);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const outerRadiusToken = knobProps.borderRadiusOuter.borderRadius;
+  const outerRadiusToken = knobProps.borderRadiusNested.borderRadius;
   const transition = knobProps.transition;
   const enabledCount = items.length;
   const activeIndex = items.findIndex((i) => i.value === currentValue);
@@ -384,6 +432,7 @@ export function Tabs({
         <UnderlineIndicator
           x={activeLayout.x}
           width={activeLayout.width}
+          data-tabs-indicator="underline"
           {...(transition ? { transition } : undefined)}
         />
       </Theme>
@@ -395,6 +444,7 @@ export function Tabs({
           width={activeLayout.width}
           height={activeLayout.height}
           backgroundColor={selectedTint ?? "$color4"}
+          data-tabs-indicator="thumb"
           {...thumbRadius}
           {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
           {...(transition ? { transition } : undefined)}
@@ -405,6 +455,8 @@ export function Tabs({
 
   if (items.length === 0) return null;
 
+  const tabListLabel = ariaLabel ?? t("Tabs");
+
   return (
     <TamaguiTabs
       value={currentValue}
@@ -419,11 +471,18 @@ export function Tabs({
       {...(fill ? fillProps : undefined)}
       data-tabs-variant={variant}
       data-tabs-fill={fill ? "true" : undefined}
+      data-tabs-dir={direction}
       data-size-token={visualSizeToken}
       data-density={knobProps.density}
       data-visual-px={sizePx}
     >
-      <StripWrapper underline={isUnderline}>
+      <StripWrapper
+        {...(isUnderline
+          ? { ...hairline.bottom, borderColor: componentColors.surface.border }
+          : undefined)}
+        data-fade-left={fades.left ? "true" : undefined}
+        data-fade-right={fades.right ? "true" : undefined}
+      >
         <ScrollView
           ref={scrollRef}
           horizontal
@@ -449,7 +508,7 @@ export function Tabs({
         >
           <TabsList
             loop={loop}
-            aria-label={t("Tabs")}
+            aria-label={tabListLabel}
             data-tabs-list={variant}
             data-size-token={visualSizeToken}
             data-density={knobProps.density}
@@ -463,7 +522,7 @@ export function Tabs({
                   gap: 0,
                   // Full fragment spread (AGENTS.md knob rule) so the
                   // cornerSmoothing class rides along with the radius.
-                  ...knobProps.borderRadiusOuter,
+                  ...knobProps.borderRadiusNested,
                 })}
           >
             {indicator}
@@ -574,7 +633,7 @@ export function Tabs({
                             : componentColors.text.secondary
                       }
                     >
-                      {item.label}
+                      {wrapBareTextChildren(item.label, (label) => label)}
                     </TabLabel>
                     {item.badge}
                   </View>
@@ -632,9 +691,12 @@ export function Tabs({
   );
 }
 
-// Re-export primitive parts for advanced composition
-Tabs.List = TamaguiTabs.List;
-Tabs.Tab = TamaguiTabs.Tab;
-Tabs.Content = TamaguiTabs.Content;
+TabsRoot.displayName = "Tabs";
+
+export const Tabs = withStaticProperties(TabsRoot, {
+  List: TamaguiTabs.List,
+  Tab: TamaguiTabs.Tab,
+  Content: TamaguiTabs.Content,
+});
 
 export type TabsTriggerProps = GetProps<typeof Trigger>;

package/src/Text.spec.tsx

@@ -0,0 +1,246 @@
+/**
+ * House Text knob wiring (MPO-20) — bodyFont / fontWeight / textAccent reach
+ * the TEXT NODE, on the props channel that serves every platform.
+ *
+ * Measurement discipline (the MPO-40/44/48 lesson): every font/weight/ink
+ * assertion here reads the TEXT NODE — the element `screen.getByText`
+ * returns, guarded to not be the wrapping frame — never the frame. jsdom/
+ * happy-dom cannot cascade Tamagui's class-based CSS, so assertions compare
+ * the atomic style classes the props emit on that node (`_col-` color,
+ * `_fow-` fontWeight, `_fos-`/`_lh-` size — the pageTitleScale.spec.tsx
+ * technique) and the font-scope class (`font_body` / `font_mono`) for
+ * family. Between knob flips and against explicit-prop renders of the
+ * same value. Hashed class names are compared by identity only.
+ *
+ * WEB arm: the default module graph (isWeb true).
+ * NATIVE arm: `@multiplatform.one/platform` mocked to isWeb:false on a fresh
+ * module graph (the resolveKnobs.spec.ts elevation-native pattern), with
+ * Preset/render/Text all imported from that same graph. FontKnobStyles'
+ * CSS-variable rescue is absent in BOTH arms (renderWithProviders mounts no
+ * theme provider), so a flip that reaches the node proves the PROPS channel
+ * — the only channel native has.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { XStack } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "./Text";
+
+afterEach(cleanup);
+
+const LABEL = "Measure the text node";
+
+function classesByPrefix(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+/** Tamagui font-scope class on the TEXT NODE (`font_body` / `font_mono` / …). */
+function fontScopeClass(el: Element): string {
+  return (
+    String((el as HTMLElement).className || "")
+      .split(" ")
+      .find((c) => c.startsWith("font_")) ?? ""
+  );
+}
+
+/** Render, read the TEXT NODE's prefixed classes, clean up. */
+function renderTextClasses(node: React.ReactElement, prefixes: string[]): string[] {
+  renderWithProviders(node);
+  const textNode = screen.getByText(LABEL);
+  const classes = classesByPrefix(textNode, prefixes);
+  cleanup();
+  return classes;
+}
+
+describe("house Text — textAccent reaches the text node (MPO-20)", () => {
+  it("changes colour on a textAccent flip", () => {
+    const high = renderTextClasses(
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(high).not.toHaveLength(0);
+    expect(low).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+
+  it("low and medium share the AA legibility floor ($color11)", () => {
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const medium = renderTextClasses(
+      <Preset overrides={{ textAccent: "medium" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(low).toEqual(medium);
+  });
+
+  it("measures the TEXT NODE, never the frame (MPO-44 discipline)", () => {
+    renderWithProviders(
+      <XStack data-testid="frame">
+        <Text>{LABEL}</Text>
+      </XStack>,
+    );
+    const textNode = screen.getByText(LABEL);
+    const frame = screen.getByTestId("frame");
+    expect(textNode).not.toBe(frame);
+    expect(frame.contains(textNode)).toBe(true);
+    // The ink/weight/family live on the text node; the frame carries none.
+    expect(classesByPrefix(textNode, ["_col-", "_fow-", "_ff-"])).not.toHaveLength(0);
+    expect(classesByPrefix(frame, ["_col-", "_fow-", "_ff-"])).toHaveLength(0);
+  });
+});
+
+describe("house Text — fontWeight and bodyFont reach the text node", () => {
+  it("changes weight on a fontWeight flip, pinned to the 400/700 label law", () => {
+    const regular = renderTextClasses(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const bold = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    // Identity-pin the values without hardcoding hashed class names: the
+    // knob's rendering must equal an explicit render of the lawful weight
+    // (labels are 400, bold 700 — 500/600 are not label weights).
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    const explicit700 = renderTextClasses(<Text fontWeight="700">{LABEL}</Text>, ["_fow-"]);
+    expect(regular).not.toHaveLength(0);
+    expect(regular).not.toEqual(bold);
+    expect(regular).toEqual(explicit400);
+    expect(bold).toEqual(explicit700);
+  });
+
+  it("changes family on a bodyFont flip (props, not the web-only CSS rescue)", () => {
+    // Family lives on the font-scope class (`font_body` / `font_mono`), not
+    // the shared `_ff-f-family` token class — measure that on the TEXT NODE.
+    const scope = (node: React.ReactElement) => {
+      renderWithProviders(node);
+      const cls = fontScopeClass(screen.getByText(LABEL));
+      cleanup();
+      return cls;
+    };
+    const sans = scope(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    const mono = scope(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    expect(sans).toBe("font_body");
+    expect(mono).toBe("font_mono");
+  });
+
+  it("default label ramp is 400 at 14/25 on the TEXT NODE", () => {
+    // tamagui-rendered-reference.md §9: $4 / $true labels are Inter 14/25
+    // weight 400. Identity-pin against an explicit render so hashed classes
+    // never leak into the assertion.
+    const byDefault = renderTextClasses(<Text>{LABEL}</Text>, ["_fos-", "_lh-", "_fow-"]);
+    const explicit = renderTextClasses(
+      <Text fontSize={14} lineHeight={25} fontWeight="400">
+        {LABEL}
+      </Text>,
+      ["_fos-", "_lh-", "_fow-"],
+    );
+    expect(byDefault).not.toHaveLength(0);
+    expect(byDefault).toEqual(explicit);
+  });
+
+  it("explicit consumer props still eject (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text fontWeight="400">{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    expect(ejected).toEqual(explicit400);
+  });
+});
+
+describe("house Text — NATIVE environment (isWeb false, fresh module graph)", () => {
+  it("textAccent and fontWeight flips still reach the text node", async () => {
+    vi.resetModules();
+    vi.doMock("@multiplatform.one/platform", async (importOriginal) => ({
+      ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+      isWeb: false,
+      isNative: true,
+    }));
+    try {
+      // Everything must come from the SAME fresh graph: a Preset from the
+      // old graph would provide a context the fresh Text never reads.
+      const [{ Text: NativeText }, { Preset: NativePreset }, testUtils, testingLibrary] =
+        await Promise.all([
+          import("./Text"),
+          import("@multiplatform.one/theme"),
+          import("@multiplatform.one/test-utils"),
+          import("@testing-library/react"),
+        ]);
+
+      const renderNative = (node: React.ReactElement, prefixes: string[]): string[] => {
+        testUtils.renderWithProviders(node);
+        const el = testingLibrary.screen.getByText(LABEL);
+        const classes = classesByPrefix(el, prefixes);
+        testingLibrary.cleanup();
+        return classes;
+      };
+
+      const high = renderNative(
+        <NativePreset overrides={{ textAccent: "high" }}>
+          <NativeText>{LABEL}</NativeText>
+        </NativePreset>,
+        ["_col-"],
+      );
+      const low = renderNative(
+        <NativePreset overrides={{ textAccent: "low" }}>
+          <NativeText>{LABEL}</NativeText>
+        </NativePreset>,
+        ["_col-"],
+      );
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+
+      const regular = renderNative(
+        <NativePreset overrides={{ fontWeight: "regular" }}>
+          <NativeText>{LABEL}</NativeText>
+        </NativePreset>,
+        ["_fow-"],
+      );
+      const bold = renderNative(
+        <NativePreset overrides={{ fontWeight: "bold" }}>
+          <NativeText>{LABEL}</NativeText>
+        </NativePreset>,
+        ["_fow-"],
+      );
+      expect(regular).not.toHaveLength(0);
+      expect(regular).not.toEqual(bold);
+    } finally {
+      vi.doUnmock("@multiplatform.one/platform");
+      vi.resetModules();
+    }
+  });
+});

package/src/Text.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Preset } from "@multiplatform.one/theme";
+import { YStack } from "tamagui";
+import { Text } from "./Text";
+import { Paragraph, SizableText } from "./Text";
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "House body text (MPO-20). Spreads knobProps.body and the textAccent ink as props, so bodyFont/fontWeight/textAccent restyle it on every platform. Default label ramp is 400 at 14/25. App text rides this, never raw tamagui typography (AN-8).",
+      },
+    },
+  },
+  argTypes: {
+    children: { control: "text" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  name: "Main",
+  args: {
+    children: "Body text follows the bodyFont, fontWeight and textAccent knobs.",
+  },
+};
+
+export const Voices: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Text>Text — unsized body voice.</Text>
+      <SizableText size="$5">SizableText — sized body voice.</SizableText>
+      <Paragraph>Paragraph — flowing copy voice with the body size default.</Paragraph>
+    </YStack>
+  ),
+};
+
+export const TextAccentFlip: Story = {
+  name: "textAccent flip (high vs low)",
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>high — full ink ($color).</Text>
+      </Preset>
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>low — muted ink on the AA floor ($color11).</Text>
+      </Preset>
+    </YStack>
+  ),
+};
+
+export const FontWeightFlip: Story = {
+  name: "fontWeight flip (regular vs bold)",
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>regular — labels are 400 (500/600 are not label weights).</Text>
+      </Preset>
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>bold — 700.</Text>
+      </Preset>
+    </YStack>
+  ),
+};

package/src/Text.tsx

@@ -0,0 +1,85 @@
+/**
+ * House body-text voices for the components catalog — Text, SizableText,
+ * Paragraph and Anchor (MPO-20, LC-70 CURATED-REEXPORT-IS-CATALOG).
+ *
+ * Before this module the barrel re-exported the RAW tamagui typography
+ * primitives under bare names, registered as "typography substrate" rows in
+ * ./knobImmuneExports.ts. That registry claim was a lie in three parts:
+ * FontKnobStyles rescues family/leading/tracking on WEB ONLY (CSS variables),
+ * fontWeight and textAccent reach the primitives on NO platform, and on
+ * native nothing reaches them at all. AN-8 ("never render app text through
+ * bare typography") was unfollowable — there was no house Text to follow it
+ * with.
+ *
+ * ARCHITECTURE (Button/Spinner shadow precedent): the thinnest legal shape
+ * is a wrapper that spreads the COMPLETE knob fragments onto the raw
+ * primitive and forwards consumer props LAST (STD-EJECT-LAST). The
+ * fragments are props, not CSS, so the same code path styles web AND native
+ * — the text node itself carries fontFamily/fontWeight/color on every
+ * platform (the MPO-44/48 lesson: the frame is not the text node).
+ *
+ * Knob channels wired here:
+ *  - bodyFont   → knobProps.body.fontFamily  (every platform, not just web)
+ *  - fontWeight → knobProps.body.fontWeight  (regular 400 / bold 700 —
+ *    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.
+ *
+ * Default body/label ramp (tamagui-rendered-reference.md §9, the $4 / $true
+ * stop): 14px / 25px / 400. createInterFont's size+10 table yields 14/24;
+ * house Text and Paragraph pin the measured 14/25 pair as props on the
+ * TEXT NODE so the leading lands on every platform. SizableText keeps the
+ * size-token scale. Consumer size/lineHeight/fontWeight ejects still win.
+ *
+ * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
+ * TamaguiParagraph / TamaguiAnchor (./tamagui.ts escape hatches, LC-45).
+ */
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  Anchor as RawAnchor,
+  type AnchorProps,
+  Paragraph as RawParagraph,
+  type ParagraphProps,
+  SizableText as RawSizableText,
+  type SizableTextProps,
+  Text as RawText,
+  type TextProps,
+} from "tamagui";
+
+export type { AnchorProps, ParagraphProps, SizableTextProps, TextProps };
+
+/** Measured $4 label ramp — Inter 14/25, weight from the fontWeight knob. */
+const LABEL_RAMP = { fontSize: 14, lineHeight: 25 } as const;
+
+export function Text(props: TextProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RawText {...LABEL_RAMP} {...knobProps.body} color={knobProps.textAccentColor} {...props} />
+  );
+}
+
+export function SizableText(props: SizableTextProps) {
+  const { knobProps } = useResolvedKnobs();
+  return <RawSizableText {...knobProps.body} color={knobProps.textAccentColor} {...props} />;
+}
+
+export function Paragraph(props: ParagraphProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RawParagraph
+      {...LABEL_RAMP}
+      {...knobProps.body}
+      color={knobProps.textAccentColor}
+      {...props}
+    />
+  );
+}
+
+export function Anchor(props: AnchorProps) {
+  const { knobProps } = useResolvedKnobs();
+  return <RawAnchor {...knobProps.body} {...props} />;
+}