@multiplatform.one/components 7.8.0 → 7.10.0

package/src/Quote/index.tsx

@@ -66,8 +66,6 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
     compact === undefined ? { component: "Quote" } : { component: "Quote", compact },
   );
   const railWidth = quoteRailWidth(knobProps.borderRadius.borderWidth);
-  const citeColor =
-    knobProps.textAccentColor === "$color" ? componentColors.text.muted : knobProps.textAccentColor;
 
   return (
     <QuoteFrame
@@ -106,7 +104,7 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
                 key={key}
                 render="cite"
                 {...knobProps.label}
-                color={citeColor}
+                color={knobProps.textAccentColor}
                 fontStyle="normal"
               >
                 — {label}

package/src/Tabs/index.tsx

@@ -645,12 +645,12 @@ function TabsRoot({
                 fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}
                 color={
                   isDisabled
-                    ? componentColors.text.muted
+                    ? disabledState.textKnobProps.color
                     : isActive
                       ? variant === "contained" && onSelectedTint
                         ? onSelectedTint
                         : componentColors.text.primary
-                      : componentColors.text.secondary
+                      : knobProps.textAccentColor
                 }
               >
                 {wrapBareTextChildren(item.label, (label) => label)}

package/src/Toast/Toast.spec.tsx

@@ -1,15 +1,19 @@
 import { fireEvent, screen, act, cleanup } from "@testing-library/react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Button, SizableText, Theme, useTheme, YStack } from "tamagui";
+import { Button, SizableText, TamaguiProvider, useTheme, YStack } from "tamagui";
 import {
   __resetDevWarnSeen,
   aaTextContrastRatio,
-  contrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
   normalizeToHex,
   Preset,
-  relativeLuminance,
   useAccentOnSurface,
 } from "@multiplatform.one/theme";
 import { Toast, ToastViewport, useToast, nativeToastA11y, nativeToastControlA11y } from "./index";
@@ -514,35 +518,91 @@ function tokenVal(theme: ReturnType<typeof useTheme>, key: string): string {
   return typeof raw === "string" ? raw : "";
 }
 
-function ContrastProbe({ intent }: { intent: "accent" | "success" | "warning" | "error" }) {
-  const onSurface = useAccentOnSurface();
-  const theme = useTheme();
-  const paper = tokenVal(theme, "background") || tokenVal(theme, "color1");
-  const color11 = tokenVal(theme, "color11");
-  const fg =
-    intent === "accent"
-      ? onSurface.startsWith("$")
-        ? tokenVal(theme, onSurface.slice(1)) || onSurface
-        : onSurface
-      : color11;
+const TOAST_INTENTS = ["accent", "success", "warning", "error"] as const;
+const CONTRAST_SCHEMES = ["light", "dark"] as const;
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+/**
+ * The HOUSE config, not the stock one `renderWithProviders` mounts. The
+ * intent sub-themes the Toast wraps in (`light_warning`, ...) exist only
+ * there; under stock the wrap falls back to the base ramp and the arm
+ * certifies a pair the product never paints.
+ */
+function ContrastScheme({
+  scheme,
+  children,
+}: {
+  scheme: (typeof CONTRAST_SCHEMES)[number];
+  children: ReactNode;
+}) {
   return (
-    <>
-      <span data-testid="contrast-probe" data-fg={fg} data-bg={paper} />
-      <Toast
-        title="Archived"
-        intent={intent}
-        action={{ label: ACTION, onPress: () => {} }}
-        onDismiss={() => {}}
-      />
-    </>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{children}</YStack>
+    </TamaguiProvider>
   );
 }
 
-function measuredRatio(fg: string, bg: string): number {
-  const f = normalizeToHex(fg);
-  const b = normalizeToHex(bg);
-  if (!f || !b) return Number.NaN;
-  return contrastRatio(relativeLuminance(f), relativeLuminance(b));
+/**
+ * Accent toasts stay on the BASE theme and take their ink from
+ * `useAccentOnSurface()` -- a picked value, not a token the label can name in
+ * a class. Stamp it from inside the theme the Toast mounts in.
+ */
+function AccentInkProbe() {
+  const onSurface = useAccentOnSurface();
+  const theme = useTheme();
+  const ink = onSurface.startsWith("$")
+    ? tokenVal(theme, onSurface.slice(1)) || onSurface
+    : onSurface;
+  return <span data-testid="accent-ink" data-fg={ink} />;
+}
+
+/**
+ * The RESTING atom for a prefix. Tamagui spells state atoms `_o-0hover-1` /
+ * `_bg-0active-color5`, so a bare prefix read picks up hover paint and
+ * certifies a surface nobody rests on.
+ */
+function restAtom(node: Element, prefix: string): string | undefined {
+  for (const cls of Array.from(node.classList)) {
+    if (!cls.startsWith(prefix)) continue;
+    const value = cls.slice(prefix.length);
+    if (/^\d*(hover|active|focus|press|disabled)/.test(value)) continue;
+    return value;
+  }
+  return undefined;
+}
+
+/** `_o-0--9` is Tamagui's atom for 0.9; no resting atom means no rest dim. */
+function restOpacity(node: Element): number {
+  const atom = restAtom(node, "_o-");
+  if (atom === undefined) return 1;
+  const value = Number(atom.replaceAll("--", "."));
+  return Number.isFinite(value) ? value : 1;
+}
+
+/**
+ * The ink as PAINTED. An opacity on the press target multiplies the label
+ * toward the fill under it, so the token pair is not what a reader sees:
+ * MPO-128's warning action measures 4.66:1 as tokens and 3.88:1 as pixels.
+ */
+function paintedInk(ink: string, ground: string, alpha: number): string {
+  const f = normalizeToHex(ink);
+  const b = normalizeToHex(ground);
+  if (!f || !b) return ink;
+  if (alpha >= 1) return f;
+  const channel = (offset: number) =>
+    Math.round(
+      Number.parseInt(f.slice(offset, offset + 2), 16) * alpha +
+        Number.parseInt(b.slice(offset, offset + 2), 16) * (1 - alpha),
+    )
+      .toString(16)
+      .padStart(2, "0");
+  return `#${channel(1)}${channel(3)}${channel(5)}`;
 }
 
 describe("Toast overlay shadow (standalone === viewport)", () => {
@@ -694,28 +754,40 @@ describe("Toast action label weight and contrast (TEXT NODE)", () => {
     expect(screen.getByTestId("toast").contains(textNode)).toBe(true);
   });
 
-  it.each(["accent", "success", "warning", "error"] as const)(
-    "%s action label clears 4.5:1 vs its pill in light and dark",
+  it.each(TOAST_INTENTS)(
+    "%s action label clears the AA floor AS PAINTED, in light and dark",
     (intent) => {
-      for (const scheme of ["light", "dark"] as const) {
+      for (const scheme of CONTRAST_SCHEMES) {
         renderWithProviders(
-          <Theme name={scheme}>
-            <ContrastProbe intent={intent} />
-          </Theme>,
-        );
-        const probe = screen.getByTestId("contrast-probe");
-        const fg = probe.getAttribute("data-fg") ?? "";
-        const bg = probe.getAttribute("data-bg") ?? "";
-        const label = screen.getByText(ACTION);
-        const pill = label.parentElement as HTMLElement;
-        const labelColor = (label as HTMLElement).style.color;
-        const pillBg = (pill as HTMLElement).style.backgroundColor;
-        const fromProbe = measuredRatio(fg, bg);
-        const fromNodes = measuredRatio(labelColor || fg, pillBg || bg);
-        const ratio = Number.isFinite(fromNodes) ? fromNodes : fromProbe;
-        expect(ratio, `${scheme} ${intent} ${fg} on ${bg}`).toBeGreaterThanOrEqual(
-          aaTextContrastRatio,
+          <ContrastScheme scheme={scheme}>
+            <AccentInkProbe />
+            <Toast
+              title="Archived"
+              intent={intent}
+              action={{ label: ACTION, onPress: () => {} }}
+              onDismiss={() => {}}
+            />
+          </ContrastScheme>,
         );
+        // Non-accent intents ride their hue sub-theme; accent stays on base.
+        const theme = houseThemes[intent === "accent" ? scheme : `${scheme}_${intent}`];
+        const groundToken = restAtom(screen.getByTestId("toast"), "_bg-");
+        const inkToken = restAtom(screen.getByText(ACTION), "_col-");
+        const ground = theme?.[groundToken ?? ""] ?? "";
+        const ink =
+          intent === "accent"
+            ? (screen.getByTestId("accent-ink").getAttribute("data-fg") ?? "")
+            : (theme?.[inkToken ?? ""] ?? "");
+        const where = `${scheme} ${intent}: ${inkToken ?? "?"} on ${groundToken ?? "?"}`;
+        expect(ground, `${where} -- the toast frame paints no resting fill`).toBeTruthy();
+        expect(ink, `${where} -- the action label emits no resting ink`).toBeTruthy();
+        const alpha = restOpacity(screen.getByLabelText(ACTION));
+        const report = measureContrast({
+          foreground: paintedInk(ink, ground, alpha),
+          background: ground,
+          label: `${where} at rest opacity ${alpha}`,
+        });
+        expect(report.ratio, report.label).toBeGreaterThanOrEqual(aaTextContrastRatio);
         cleanup();
       }
     },

package/src/Toast/index.tsx

@@ -283,12 +283,14 @@ const ToastActionTarget = styled(View, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
-  opacity: 0.9,
+  // No REST dim. The label is $color11 — the lowest AA-safe step of the hue —
+  // sitting straight on the toast fill, so it carries no headroom for a
+  // multiplier: 0.9 composited every light intent under 4.5 (MPO-128). Hover
+  // and press read off the pill's own fill instead.
   outlineWidth: 0,
-  hoverStyle: { opacity: 1 },
   pressStyle: { opacity: 0.95 },
   focusStyle: { outlineWidth: 0 },
-  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
 });
 
 const ToastActionPill = styled(View, {

package/src/TreeSelect/index.tsx

@@ -66,6 +66,14 @@ export interface TreeSelectProps extends Omit<GetProps<typeof YStack>, "children
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   defaultExpandedIds?: string[];
+  /**
+   * MPO-283 — accessible name for the trigger. `GetProps<typeof YStack>`
+   * already admitted this prop, but it landed on the outer wrapper, which is
+   * not an accessibility element on iOS, so nothing read it. It is routed to
+   * the trigger now. `aria-label` is accepted as an alias.
+   */
+  accessibilityLabel?: string;
+  "aria-label"?: string;
 }
 
 function defaultNodeIcon(hasChildren: boolean, isExpanded: boolean, iconSize: number) {
@@ -134,6 +142,24 @@ function TreeSelectRows({
             aria-expanded={hasChildren ? isExpanded : undefined}
             aria-selected={isSelected}
             aria-level={depth + 1}
+            // MPO-283: the aria-* above are web-only. Without the RN spellings
+            // a row is not an accessibility element on iOS, so the whole tree
+            // came back as loose StaticText with no role and no selected state.
+            // `role` is overridden too: RN prefers it over accessibilityRole,
+            // and `treeitem` leaves the element out of the iOS tree the same
+            // way `radio` does (measured, iOS 26.2).
+            {...(!isWeb
+              ? {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel: node.label,
+                  accessibilityState: {
+                    selected: isSelected,
+                    ...(hasChildren ? { expanded: isExpanded } : undefined),
+                  },
+                }
+              : undefined)}
             data-treeselect-row={node.id}
             data-treeselect-index={String(index)}
             data-depth={String(depth)}
@@ -181,6 +207,16 @@ function TreeSelectRows({
                     ? t("Collapse {{label}}", { label: node.label })
                     : t("Expand {{label}}", { label: node.label })
                 }
+                // MPO-283: the aria-label above never reaches native.
+                {...(!isWeb
+                  ? {
+                      accessible: true,
+                      accessibilityRole: "button" as const,
+                      accessibilityLabel: isExpanded
+                        ? t("Collapse {{label}}", { label: node.label })
+                        : t("Expand {{label}}", { label: node.label }),
+                    }
+                  : undefined)}
                 width={expandIconSize}
                 height={expandIconSize}
                 alignItems="center"
@@ -321,6 +357,7 @@ function Trigger({
   triggerRef,
   sizeToken,
   borderRadius,
+  accessibilityLabel,
 }: {
   display?: string;
   placeholder: string;
@@ -328,6 +365,7 @@ function Trigger({
   disabled: boolean;
   id?: string;
   labelled: boolean;
+  accessibilityLabel?: string;
   onToggle: () => void;
   triggerRef: (node: HTMLElement | null) => void;
   sizeToken: string;
@@ -349,8 +387,21 @@ function Trigger({
         role="combobox"
         aria-haspopup="tree"
         aria-expanded={open}
-        aria-label={labelled ? undefined : placeholder}
+        aria-label={accessibilityLabel ?? (labelled ? undefined : placeholder)}
         id={id}
+        // MPO-283 (same family as ToggleGroup / RadioGroup): every semantic on
+        // this trigger above is a web attribute, and tamagui does not map any
+        // of them onto React Native, so on iOS the control reached the
+        // accessibility tree with no role, no name and no expanded state.
+        {...(!isWeb
+          ? {
+              accessible: true,
+              role: "button" as const,
+              accessibilityRole: "button" as const,
+              accessibilityLabel: accessibilityLabel ?? display ?? placeholder,
+              accessibilityState: { disabled, expanded: open },
+            }
+          : undefined)}
         tabIndex={disabled || open ? -1 : 0}
         disabled={disabled}
         cursor={disabled ? "not-allowed" : "pointer"}
@@ -582,6 +633,7 @@ function FloatingTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -599,6 +651,7 @@ function FloatingTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -695,6 +748,7 @@ function FloatingTreeSelect({
         triggerRef={panel.setReferenceRef}
         sizeToken={sizeToken}
         borderRadius={borderRadius}
+        accessibilityLabel={accessibilityLabel}
       />
       {panel.mounted && (
         <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
@@ -772,6 +826,7 @@ function SheetTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -789,6 +844,7 @@ function SheetTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -844,6 +900,7 @@ function SheetTreeSelect({
           }}
           sizeToken={sizeToken}
           borderRadius={borderRadius}
+          accessibilityLabel={accessibilityLabel}
         />
       }
       header={
@@ -902,6 +959,8 @@ export function TreeSelect({
   onOpenChange,
   defaultExpandedIds,
   id: idProp,
+  accessibilityLabel,
+  "aria-label": ariaLabel,
   ...stackProps
 }: TreeSelectProps) {
   if (isWeb) ensureKeyboardModalityTracking();
@@ -965,6 +1024,7 @@ export function TreeSelect({
     sizeToken: String(knobProps.sizeToken),
     borderRadius: knobProps.borderRadius.borderRadius,
     loading,
+    accessibilityLabel: accessibilityLabel ?? ariaLabel,
   };
 
   const core = shouldUseSheet ? (

package/src/charts/PieChart.tsx

@@ -1,7 +1,6 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n";
 import { Text, XStack, YStack, type YStackProps } from "tamagui";
-import { componentColors } from "../componentColors";
 import { ChartDataFrame } from "./ChartDataView";
 import { ChartSurface } from "./ChartSurface";
 import { chartDatumText, describeChart, describeDatum } from "./accessibility";
@@ -169,7 +168,7 @@ export function PieChart({
                 {...chartWebProps({ "data-mpo-chart-datum-label": "true" })}
                 {...knobProps.body}
                 fontSize="$2"
-                color={componentColors.text.muted}
+                color={knobProps.textAccentColor}
                 flex={1}
                 numberOfLines={1}
               >

package/src/code/HighlightedCode/index.tsx

@@ -77,7 +77,7 @@ export function HighlightedCode({
           >
             {showLineNumbers && (
               <Text
-                color={componentColors.text.secondary}
+                color={knobProps.textAccentColor}
                 fontSize={resolvedFontSize}
                 width={gutterWidth}
                 data-line-number=""

package/src/componentColors.ts

@@ -30,15 +30,17 @@ export const componentColors = {
     border: "$color7",
   },
 
-  /** Text color levels. muted sits on the $color11 tier — the lowest ramp
-   * step that keeps secondary text AA-readable on color1/2 surfaces. */
+  /** Text color levels. */
   text: {
     // MPO-19 X5: was `$color12`, a second answer to what `resolveKnobs`'
     // `textAccent: high` already resolves to. `$color` IS the theme's ink,
     // and it tracks a sub-theme where the raw ramp step does not.
     primary: "$color",
-    secondary: "$color11",
-    muted: "$color11",
+    // MPO-154: `secondary` and `muted` were the same mistake one tier down —
+    // a static `$color11` read into 85 `color` props, which pinned every
+    // helper, caption and inactive label dim at `textAccent: high`. Secondary
+    // text takes `useResolvedKnobs().knobProps.textAccentColor`, which is
+    // `$color11` at low/medium (the AA floor) and `$color` at high.
     subtle: "$color8",
   },
 

package/src/images/Image/ImageFrame.tsx

@@ -11,7 +11,6 @@ import {
   type GroupPosition,
 } from "@multiplatform.one/theme";
 import { Image as TamaguiImage, View, isWeb } from "tamagui";
-import { componentColors } from "../../componentColors";
 import { Skeleton } from "../../Skeleton";
 import { isThumbnailSize, thumbnailPx as resolveThumbnailPx } from "./shared";
 import type { ImagePlaceholder, ImageProps } from "./types";
@@ -51,6 +50,7 @@ function glyphSize(px: number): number {
 }
 
 function DefaultFallback({ px }: { px: number }) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <View
       data-image-fallback=""
@@ -61,7 +61,7 @@ function DefaultFallback({ px }: { px: number }) {
       justifyContent="center"
       backgroundColor="$color3"
     >
-      <ImageIcon size={glyphSize(px)} color={componentColors.text.muted} />
+      <ImageIcon size={glyphSize(px)} color={knobProps.textAccentColor} />
     </View>
   );
 }

package/src/layouts/AsyncBoundary.tsx

@@ -18,7 +18,6 @@ import { createContext, useContext, useEffect, useRef, type ReactNode } from "re
 import { useTranslation } from "../shared/i18n";
 import { XStack, YStack, type YStackProps } from "tamagui";
 import { Alert } from "../Alert";
-import { componentColors } from "../componentColors";
 import { Skeleton } from "../Skeleton";
 import { Text } from "../Text";
 import { EmptyState } from "./page";
@@ -320,7 +319,7 @@ function AsyncPendingBar() {
       {...knobProps.gap}
     >
       <Spinner size="small" aria-hidden />
-      <Text {...knobProps.label} color={componentColors.text.muted}>
+      <Text {...knobProps.label} color={knobProps.textAccentColor}>
         {t("Updating...")}
       </Text>
     </XStack>

package/src/layouts/EmptyState.spec.tsx

@@ -1,6 +1,20 @@
+import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
 import { EmptyState } from "./EmptyState";
+import { KPICard } from "../views/Dashboard";
+
+afterEach(cleanup);
+
+const RADIUS_STOPS = ["none", "small", "medium", "large", "full"] as const;
+
+function radiusAtoms(el: Element): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => /^_(btlr|btrr|bbrr|bblr)-/.test(c))
+    .sort();
+}
 
 describe("EmptyState", () => {
   it("does not pin compact, so the density knob restyles the frame", () => {
@@ -28,3 +42,46 @@ describe("EmptyState", () => {
     expect(container.textContent).toContain("Records you add will show up here.");
   });
 });
+
+/**
+ * RULINGS-2026-08-28 R2e (MPO-106 D4): an icon well rides the radius scale
+ * (DEFAULT); R-PILL is reserved for a well that IS a count badge. EmptyState
+ * declared R-PILL and painted 1000, so its well stayed a circle at every
+ * stop while KPICard's well — the dialect the ruling picked — rode the scale.
+ */
+describe("EmptyState icon well radius (R2e)", () => {
+  it.each(RADIUS_STOPS)("at radius %s the well matches KPICard's well", (borderRadius) => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius }}>
+        <>
+          <EmptyState title="Nothing here" icon={<span data-testid="empty-icon">i</span>} />
+          <KPICard
+            config={{ id: "k", title: "K", value: 1, icon: <span data-testid="kpi-icon">i</span> }}
+          />
+        </>
+      </Preset>,
+    );
+    const emptyWell = screen.getByTestId("empty-icon").parentElement as HTMLElement;
+    const kpiWell = screen.getByTestId("kpi-icon").parentElement as HTMLElement;
+    expect(radiusAtoms(emptyWell)).not.toHaveLength(0);
+    expect(radiusAtoms(emptyWell)).toEqual(radiusAtoms(kpiWell));
+    // A knob-immunity declaration is what licensed the circle; the well is
+    // not immune, so it must carry none.
+    expect(emptyWell.getAttribute("data-radius-class")).toBeNull();
+  });
+
+  it("squares at radius none rather than staying a circle", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <EmptyState title="Nothing here" icon={<span data-testid="empty-icon">i</span>} />
+      </Preset>,
+    );
+    const well = screen.getByTestId("empty-icon").parentElement as HTMLElement;
+    expect(radiusAtoms(well)).toEqual([
+      "_bblr-t-radius-0",
+      "_bbrr-t-radius-0",
+      "_btlr-t-radius-0",
+      "_btrr-t-radius-0",
+    ]);
+  });
+});

package/src/layouts/EmptyState.tsx

@@ -9,7 +9,6 @@
  */
 import {
   Intent,
-  radiusClassProps,
   readingWidthStyle,
   useResolvedKnobs,
   warnBannedErrorWords,
@@ -69,18 +68,23 @@ export function EmptyState({
     warnBannedErrorWords(description, { component: "EmptyState" });
   }
 
+  const {
+    borderColor: _wellEdgeColor,
+    borderWidth: _wellEdgeWidth,
+    ...wellRadius
+  } = knobProps.borderRadius;
+
   const well = icon ? (
     <YStack
       alignItems="center"
       justifyContent="center"
       backgroundColor={componentColors.interactive.background}
-      // R-PILL icon well: always a circle; its inset scales with the
-      // size knob (spec: empty icon well consumes sizeToken). Declared so
-      // the `radius:none` sweep licenses the circle instead of guessing
-      // from its geometry (D-09 / LC-60).
-      {...radiusClassProps("R-PILL", "empty icon well")}
+      // R2e: an icon well rides the radius scale (DEFAULT), the same
+      // resolution KPICard's well takes. Only the radius half of the
+      // fragment applies — the well paints no edge. Its inset still scales
+      // with the size knob (spec: empty icon well consumes sizeToken).
+      {...wellRadius}
       padding={knobProps.sizeToken as any}
-      borderRadius={1000}
       aria-hidden
       {...(!isWeb ? { accessibilityElementsHidden: true } : null)}
     >

package/src/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Input } from "@multiplatform.one/forms";
 import { Paragraph, YStack } from "tamagui";
-import { componentColors } from "../../componentColors";
+import { Text } from "../../Text";
 import { KeyboardAvoidingWrapper } from "./index";
 
 const meta: Meta<typeof KeyboardAvoidingWrapper> = {
@@ -27,10 +27,10 @@ export const Default: Story = {
     <KeyboardAvoidingWrapper>
       <YStack>
         <Paragraph>Content inside KeyboardAvoidingWrapper</Paragraph>
-        <Paragraph color={componentColors.text.muted}>
+        <Text>
           On native, this shifts content when the keyboard appears. On web, it is a simple
           passthrough wrapper.
-        </Paragraph>
+        </Text>
         <Input label="Test input" placeholder="Focus to test keyboard avoidance" />
       </YStack>
     </KeyboardAvoidingWrapper>

package/src/layouts/PaneScaffold.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { Paragraph, Text, YStack } from "tamagui";
+import { Text as HouseText } from "../Text";
 import { componentColors } from "../componentColors";
 import {
   FeedLayout,
@@ -43,11 +44,7 @@ function PaneFill({ label, hint, muted }: { label: string; hint?: string; muted?
       gap="$2"
     >
       <Paragraph fontWeight="600">{label}</Paragraph>
-      {hint ? (
-        <Text color={componentColors.text.muted} fontSize="$2">
-          {hint}
-        </Text>
-      ) : null}
+      {hint ? <HouseText fontSize="$2">{hint}</HouseText> : null}
     </YStack>
   );
 }
@@ -274,9 +271,7 @@ export const ProseReadingWidth: StoryObj<typeof ReadingWidth> = {
         </Paragraph>
       </ReadingWidth>
       <ReadingWidth measure="none">
-        <Paragraph color={componentColors.text.muted}>
-          Ejected measure (full width of parent).
-        </Paragraph>
+        <HouseText>Ejected measure (full width of parent).</HouseText>
       </ReadingWidth>
     </YStack>
   ),