@multiplatform.one/components 7.4.0 → 7.5.0

package/src/images/Svg/Svg.stories.tsx

@@ -6,17 +6,23 @@ export default {
   component: Svg,
   parameters: {
     status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "SVG primitive. Owns no chrome (SF-TRANSPARENT). Default color is `$color`; marks use currentColor — never hardcoded hex.",
+      },
+    },
   },
 };
 
 export const main = {
   name: "Main",
   render: () => (
-    <Svg width={304} height={290}>
+    <Svg width={304} height={290} color="$color">
       <Path
         d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z"
-        fill="#FB2"
-        stroke="#BBB"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth={15}
         strokeLinejoin="round"
       />

package/src/images/Svg/index.native.ts

@@ -1,6 +1,6 @@
 import { Svg as RNSvg } from "react-native-svg";
 import { styled } from "tamagui";
 
-export const Svg = styled(RNSvg, { name: "Svg" });
+export const Svg = styled(RNSvg, { name: "Svg", color: "$color" });
 
 export type SvgProps = React.ComponentProps<typeof Svg>;

package/src/images/Svg/index.ts

@@ -3,6 +3,6 @@ import type { ComponentType } from "react";
 import type { Svg as RNSvg } from "react-native-svg";
 import { styled } from "tamagui";
 
-export const Svg = styled(TSvg as typeof RNSvg, { name: "Svg" });
+export const Svg = styled(TSvg as typeof RNSvg, { name: "Svg", color: "$color" });
 
 export type SvgProps = ComponentType<typeof Svg>;

package/src/images/Svg/svg.spec.tsx

@@ -1,11 +1,14 @@
 import { Circle } from "@tamagui/react-native-svg";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Svg } from "./index";
 describe("Svg Component", () => {
   it("renders without crashing", () => {
     const { container } = renderWithProviders(
       <Svg width={100} height={100}>
-        <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+        <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
       </Svg>,
     );
     expect(container).toBeTruthy();
@@ -13,7 +16,7 @@ describe("Svg Component", () => {
   it("accepts and applies custom dimensions", () => {
     const { getByTestId } = renderWithProviders(
       <Svg width={200} height={150} data-testid="custom-svg">
-        <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+        <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
       </Svg>,
     );
     const svgElement = getByTestId("custom-svg");
@@ -23,7 +26,7 @@ describe("Svg Component", () => {
   it("accepts and applies custom styles", () => {
     const { container } = renderWithProviders(
       <Svg data-testid="styled-svg" width={100} height={100} style={{ opacity: 0.5 }}>
-        <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+        <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
       </Svg>,
     );
     const svgElement = container.querySelector("svg");
@@ -33,7 +36,14 @@ describe("Svg Component", () => {
   it("renders children correctly", () => {
     const { getByTestId } = renderWithProviders(
       <Svg width={100} height={100}>
-        <Circle data-testid="circle-element" cx="50" cy="50" r="40" stroke="black" fill="none" />
+        <Circle
+          data-testid="circle-element"
+          cx="50"
+          cy="50"
+          r="40"
+          stroke="currentColor"
+          fill="none"
+        />
       </Svg>,
     );
     expect(getByTestId("circle-element")).toBeTruthy();
@@ -43,7 +53,7 @@ describe("Svg Component", () => {
     it("updates dimensions when props change", () => {
       const { getByTestId, rerender } = renderWithProviders(
         <Svg width={100} height={100} data-testid="dynamic-svg">
-          <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+          <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
         </Svg>,
       );
       const svgElement = getByTestId("dynamic-svg");
@@ -51,7 +61,7 @@ describe("Svg Component", () => {
       expect(svgElement.style.height).toBe("100px");
       rerender(
         <Svg width={200} height={150} data-testid="dynamic-svg">
-          <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+          <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
         </Svg>,
       );
       expect(svgElement.style.width).toBe("200px");
@@ -60,14 +70,14 @@ describe("Svg Component", () => {
     it("updates styles dynamically", () => {
       const { getByTestId, rerender } = renderWithProviders(
         <Svg data-testid="dynamic-style-svg" width={100} height={100} style={{ opacity: 0.5 }}>
-          <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+          <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
         </Svg>,
       );
       const svgElement = getByTestId("dynamic-style-svg");
       expect(svgElement.style.opacity).toBe("0.5");
       rerender(
         <Svg data-testid="dynamic-style-svg" width={100} height={100} style={{ opacity: 0.8 }}>
-          <Circle cx="50" cy="50" r="40" stroke="black" fill="none" />
+          <Circle cx="50" cy="50" r="40" stroke="currentColor" fill="none" />
         </Svg>,
       );
       expect(svgElement.style.opacity).toBe("0.8");
@@ -75,17 +85,43 @@ describe("Svg Component", () => {
     it("updates children dynamically", () => {
       const { getByTestId, rerender } = renderWithProviders(
         <Svg width={100} height={100}>
-          <Circle data-testid="dynamic-circle" cx="50" cy="50" r="40" stroke="black" fill="none" />
+          <Circle
+            data-testid="dynamic-circle"
+            cx="50"
+            cy="50"
+            r="40"
+            stroke="currentColor"
+            fill="none"
+          />
         </Svg>,
       );
       const circleElement = getByTestId("dynamic-circle");
       expect(circleElement.getAttribute("r")).toBe("40");
       rerender(
         <Svg width={100} height={100}>
-          <Circle data-testid="dynamic-circle" cx="50" cy="50" r="60" stroke="black" fill="none" />
+          <Circle
+            data-testid="dynamic-circle"
+            cx="50"
+            cy="50"
+            r="60"
+            stroke="currentColor"
+            fill="none"
+          />
         </Svg>,
       );
       expect(circleElement.getAttribute("r")).toBe("60");
     });
   });
+
+  it("defaults color to the scheme token, not a hardcoded fill", () => {
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "index.ts"), "utf8");
+    const stories = readFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), "Svg.stories.tsx"),
+      "utf8",
+    );
+    expect(src).toContain('color: "$color"');
+    expect(src).not.toMatch(/#[0-9A-Fa-f]{3,8}/);
+    expect(stories).not.toMatch(/#[0-9A-Fa-f]{3,8}/);
+    expect(stories).toContain("currentColor");
+  });
 });

package/src/images/SvgUri/SvgUri.spec.tsx

@@ -1,3 +1,6 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { describe, expect, it, vi } from "vitest";
 import { SvgUri } from "./index";
@@ -143,4 +146,15 @@ describe("SvgUri", () => {
     const svg = container.querySelector("svg");
     expect(svg).toBeInTheDocument();
   });
+
+  it("inherits scheme color and does not invent hex chrome", () => {
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "index.tsx"), "utf8");
+    const native = readFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), "index.native.ts"),
+      "utf8",
+    );
+    expect(src).toContain("getVariable(useTheme().color)");
+    expect(src).not.toMatch(/#[0-9A-Fa-f]{3,8}/);
+    expect(native).toContain('color: "$color"');
+  });
 });

package/src/images/SvgUri/SvgUri.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof SvgUri> = {
     docs: {
       description: {
         component:
-          "A component for loading and displaying SVG images from remote URLs with validation.",
+          "Remote SVG loader. Paint belongs to the document (caller-owned). The primitive owns no chrome and adds no hardcoded colors; currentColor follows `$color`.",
       },
     },
   },

package/src/images/SvgUri/index.native.ts

@@ -1,6 +1,6 @@
 import { SvgUri as RNSvgUri } from "react-native-svg";
 import { styled } from "tamagui";
 
-export const SvgUri = styled(RNSvgUri, { name: "SvgUri", uri: null });
+export const SvgUri = styled(RNSvgUri, { name: "SvgUri", uri: null, color: "$color" });
 
 export type SvgUriProps = React.ComponentProps<typeof SvgUri>;

package/src/images/SvgUri/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { getVariable, useTheme } from "tamagui";
 
 export function SvgUri({
   uri,
@@ -9,11 +10,10 @@ export function SvgUri({
   onLoad,
   fallback,
   accessibilityLabel,
-  ...props
 }: SvgUriProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState(false);
-  const [loaded, setLoaded] = useState(false);
+  const [, setLoaded] = useState(false);
 
   useEffect(() => {
     if (!uri) {
@@ -67,6 +67,8 @@ export function SvgUri({
     return () => controller.abort();
   }, [uri, width, height, preserveAspectRatio, accessibilityLabel]);
 
+  const color = getVariable(useTheme().color);
+
   if (!uri) return null;
   if (error) return fallback ?? null;
 
@@ -78,6 +80,7 @@ export function SvgUri({
         width: width != null ? width : undefined,
         height: height != null ? height : undefined,
         lineHeight: 0,
+        color: color || undefined,
       }}
     />
   );

package/src/index.ts

@@ -1,10 +1,26 @@
 export * from "./Alert";
+export {
+  SortableList,
+  SortableHandle,
+  SortableHandleWell,
+  SortableSessionProvider,
+  useSortableRows,
+} from "./SortableList";
+export type {
+  SortableListProps,
+  SortableDisabledStyle,
+  SortableSession,
+  UseSortableRowsOptions,
+} from "./SortableList";
 export * from "./Badge";
 export * from "./Carousel";
 export * from "./Chip";
 export * from "./DotIndicator";
 export * from "./DropdownMenu";
+export * from "./ContextMenu";
+export * from "./Meter";
 export * from "./ProgressSteps";
+export * from "./TreeSelect";
 export * from "./Quote";
 export * from "./Skeleton";
 export * from "./SkipLink";
@@ -24,6 +40,12 @@ export * from "./layouts/index";
 // MDX components are now in @multiplatform.one/markdown package
 export * from "./surfaces";
 export * from "./views/index";
+// Wizard is house-only: nothing in the curated ./tamagui surface shadows these
+// names, so without an explicit export the component is unreachable from the
+// package. @multiplatform.one/frappe-ui's SchemaWizard imports all four and
+// failed to build (MPO-85).
+export { Wizard } from "./Wizard";
+export type { WizardFormLike, WizardProps, WizardStatus, WizardStep } from "./Wizard";
 export { unwrapText } from "./utils/unwrapText";
 export { Pagination, getPaginationItems } from "./Pagination";
 export type { PaginationProps, PaginationItem } from "./Pagination";
@@ -55,17 +77,17 @@ export type {
 // (same pattern as Tabs/Tooltip) so the MP1 knob-aware surfaces shadow the
 // raw tamagui primitives (Card, CardHeader, CardFooter, DialogContent,
 // PopoverContent). The unthemed originals stay reachable via `tamagui`.
+export { Card, CardFooter, CardHeader } from "./Card";
+export type { CardFooterProps, CardHeaderProps, CardProps, SurfaceTier } from "./Card";
 export {
-  Card,
-  CardHeader,
-  CardFooter,
   DialogContent,
   DialogOverlay,
+  AlertDialogContent,
+  AlertDialogOverlay,
   PopoverContent,
   SheetFrame,
   Panel,
 } from "./surfaces";
-export type { CardProps, SurfaceTier } from "./surfaces";
 // Curated tamagui surface — replaces the old `export * from "tamagui"` star
 // export that leaked raw interactive primitives (Checkbox, Switch, Select, …)
 // under the house package name. See ./tamagui.ts for the allowlist rules and
@@ -77,8 +99,8 @@ export * from "./tamagui";
 export { Toast, ToastViewport, useToast } from "./Toast";
 export type { ToastProps, ToastViewportProps } from "./Toast";
 
-// lucide hamburger icon — alias bare `Menu` explicitly (tamagui's Menu is not
-// re-exported by the curated surface; the icon owns the bare name).
+// lucide hamburger icon — alias bare `Menu` explicitly. Tamagui Menu /
+// create-menu are unused leftovers and stay off the house barrel (R9 G7).
 export { MenuIcon as Menu, MenuIcon } from "./icons/lucide";
 
 // Raw @tamagui/toast primitives for consumers that need the imperative
@@ -91,6 +113,16 @@ export { Avatar, getInitials } from "./Avatar";
 export type { AvatarProps, AvatarSize } from "./Avatar";
 export { Fieldset } from "@multiplatform.one/forms";
 export type { FieldsetProps } from "@multiplatform.one/forms";
+export {
+  ContextualSaveBar,
+  clientKnownIdentity,
+  commitImmediateField,
+} from "@multiplatform.one/forms";
+export type {
+  ContextualSaveBarProps,
+  NavigationBlocker,
+  UseNavigationBlocker,
+} from "@multiplatform.one/forms";
 
 // Shadow tamagui Spinner with the knob-consuming forms Spinner (LC-70 census
 // 2026-08-13): raw Spinner keeps spinning at animation "none" /
@@ -108,6 +140,29 @@ export type { SpinnerProps } from "@multiplatform.one/forms";
 export { Button } from "./Button";
 export type { ButtonProps } from "./Button";
 
+// Shadow tamagui Text and Heading with the house versions. ./tamagui.ts says
+// so in its own words -- "Bare Text/SizableText/Paragraph/Anchor are the house
+// shadows in ./Text.tsx and bare Heading/H1-H6 the house shadows in
+// ./Heading.tsx" -- and exports only the Tamagui*-prefixed escape hatches.
+// 9ea1e403e removed these lines from this barrel, which left the bare names
+// exported by NOBODY: @multiplatform.one/backoffice and frappe-ui import them
+// and stopped building, and tamagui.spec.ts's "keeps house shadows as the
+// house versions" guardrail started failing. Raw stays reachable as
+// TamaguiText / TamaguiHeading / TamaguiH1 (MPO-85).
+export { Anchor, Paragraph, SizableText, Text } from "./Text";
+export type { AnchorProps, ParagraphProps, SizableTextProps, TextProps } from "./Text";
+export { H1, H2, H3, H4, H5, H6, Heading } from "./Heading";
+export type { HeadingProps } from "./Heading";
+
+// Shadow tamagui Separator with the house Separator (MPO-47): the raw
+// primitive painted NOTHING — 96 of 96 measured separators were transparent
+// 1px boxes. The house rule is a painted 1px line in $borderColor (measured
+// law §7.3: 1px never 0.5px; quiet = opacity 0.5, never a lighter colour).
+// The curated ./tamagui surface no longer exports the bare name; raw stays
+// reachable as TamaguiSeparator.
+export { Separator } from "./Separator";
+export type { SeparatorProps } from "./Separator";
+
 export type { ImageProps } from "./images/Image";
 export { Image } from "./images/Image";
 

package/src/knobImmuneExports.ts

@@ -33,27 +33,22 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
   Square: "geometric lego (fixed aspect); consumers spread knob fragments onto it",
   Circle: "geometric lego (identity circle by definition); radius knob story is N/A",
   ScrollView: "scroll container lego; no opinionated chrome, fragments ride the content",
-  Separator:
-    "token-driven hairline ($borderColor / hairline width); no knob channel maps to it today. ADJUDICATION-CANDIDATE: should borderWidth knob drive separator weight?",
+  // Separator left the registry 2026-08-28 (MPO-47): bare `Separator` is now
+  // a house implementation (./Separator — painted 1px line), so it no longer
+  // qualifies for a row (house implementations ARE the knob story). The
+  // weight-knob question stays an ADJUDICATION-CANDIDATE on the component
+  // header (MPO-21 G10 / G0-clay R9).
   ListItem:
     "raw list-row primitive consumed as lego by house list surfaces (List, sidebar, tags) which own the knob story. ADJUDICATION-CANDIDATE + BACKLOG: painted row with own padding/press states — deserves a house shadow or Tamagui* demotion once consumers migrate",
 
-  // ── Typography lego ───────────────────────────────────────────────────
-  // Text knobs (bodyFont, headingFont, fontWeight, textAccent) ride the
-  // knobProps.body / knobProps.heading fragments that composing surfaces
-  // spread; the primitives are the substrate those fragments land on.
-  Text: "typography substrate; font knobs ride knobProps.body/heading fragments spread by surfaces",
-  SizableText: "typography substrate; font knobs ride spread fragments",
-  Paragraph: "typography substrate; font knobs ride spread fragments",
-  Heading: "typography substrate; font knobs ride knobProps.heading fragments",
-  H1: "typography substrate; heading knobs ride knobProps.heading/pageTitle fragments",
-  H2: "typography substrate; heading knobs ride knobProps.heading fragments",
-  H3: "typography substrate; heading knobs ride knobProps.heading fragments",
-  H4: "typography substrate; heading knobs ride knobProps.heading fragments",
-  H5: "typography substrate; heading knobs ride knobProps.heading fragments",
-  H6: "typography substrate; heading knobs ride knobProps.heading fragments",
-  Anchor:
-    "text link substrate; typography knobs ride spread fragments. ADJUDICATION-CANDIDATE: link color/underline currently tamagui-default, no LC rule owns link chrome",
+  // ── Typography ────────────────────────────────────────────────────────
+  // NO rows. The former "typography substrate" claim (knobs ride fragments
+  // spread by composing surfaces) was measured false: FontKnobStyles rescued
+  // family/leading/tracking on web only, fontWeight/textAccent/pageTitleScale
+  // reached the raw primitives on no platform, and on native nothing did
+  // (MPO-20). Bare Text/SizableText/Paragraph/Anchor and Heading/H1–H6 are
+  // house shadows now (./Text.tsx, ./Heading.tsx) that spread the fragments
+  // as props on every platform; raw primitives ride the Tamagui* hatches.
 
   // ── Overlay composition roots ─────────────────────────────────────────
   // Logic shells with no painted frame of their own; the knob channel lands
@@ -64,7 +59,6 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
     "composition root; knobs land on house ConfirmDialog / DialogContent surfaces composed inside",
   Popover: "composition root; knobs land on house PopoverContent",
   Sheet: "composition root; knobs land on house SheetFrame",
-  Adapt: "platform adaptation control-flow component; renders nothing itself",
   Portal: "reparenting utility; renders children elsewhere, paints nothing",
   PortalProvider: "provider; paints nothing",
 

package/src/layouts/AsyncBoundary.spec.tsx

@@ -2,11 +2,14 @@
  * @vitest-environment jsdom
  */
 
-import { fireEvent, screen } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import type { ReactElement, ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { Text } from "tamagui";
+import { TamaguiProvider, Text, YStack } from "tamagui";
 import { Badge } from "../Badge";
+import { Text as HouseText } from "../Text";
 import {
   AsyncBoundary,
   resolveAsyncStatus,
@@ -208,6 +211,81 @@ describe("AsyncBoundary", () => {
   });
 });
 
+const houseConfig = createDefaultThemeConfig();
+const SCHEMES = ["light", "dark"] as const;
+
+function weightClasses(el: Element): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_fow-"))
+    .sort();
+}
+
+function SchemeWrap({
+  scheme,
+  children,
+}: {
+  scheme: (typeof SCHEMES)[number];
+  children: ReactNode;
+}) {
+  return (
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{children}</YStack>
+    </TamaguiProvider>
+  );
+}
+
+function renderInScheme(scheme: (typeof SCHEMES)[number], ui: ReactElement) {
+  return renderWithProviders(<SchemeWrap scheme={scheme}>{ui}</SchemeWrap>);
+}
+
+function expectRetryWeight400(pin: string[]) {
+  const node = screen.getByText("Retry");
+  expect(node.tagName).not.toBe("BUTTON");
+  expect(weightClasses(node)).toEqual(pin);
+  expect(node.className).toMatch(/_fow-400\b/);
+  expect(node.className).not.toMatch(/_fow-500\b/);
+  expect(node.className).not.toMatch(/_fow-600\b/);
+}
+
+describe("AsyncBoundary Retry label weight (MPO-48 / R7)", () => {
+  it.each(SCHEMES)("%s: first-load Retry TEXT NODE is weight 400, never 500/600", (scheme) => {
+    renderInScheme(scheme, <HouseText fontWeight="400">Retry-pin</HouseText>);
+    const pin = weightClasses(screen.getByText("Retry-pin"));
+    cleanup();
+
+    renderInScheme(scheme, <AsyncBoundary error compact onRetry={() => {}} />);
+    expectRetryWeight400(pin);
+  });
+
+  it.each(SCHEMES)("%s: stale-refetch Retry TEXT NODE is weight 400, never 500/600", (scheme) => {
+    renderInScheme(scheme, <HouseText fontWeight="400">Retry-pin</HouseText>);
+    const pin = weightClasses(screen.getByText("Retry-pin"));
+    cleanup();
+
+    const { rerender } = renderInScheme(
+      scheme,
+      <AsyncBoundary layout="list" onRetry={() => {}}>
+        <Text>Ready rows</Text>
+      </AsyncBoundary>,
+    );
+    rerender(
+      <SchemeWrap scheme={scheme}>
+        <AsyncBoundary
+          error="Network unreachable"
+          errorTitle="Couldn't load data"
+          layout="list"
+          onRetry={() => {}}
+        >
+          <Text>Ready rows</Text>
+        </AsyncBoundary>
+      </SchemeWrap>,
+    );
+
+    expectRetryWeight400(pin);
+  });
+});
+
 describe("AsyncBoundary layout skeletons", () => {
   it.each(["list", "table", "kanban", "dashboard", "generic"] as const)(
     "renders %s skeleton",

package/src/layouts/AsyncBoundary.tsx

@@ -16,10 +16,11 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { WarningCircleIcon } from "@phosphor-icons/react";
 import { createContext, useContext, useEffect, useRef, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Text, XStack, YStack, type YStackProps } from "tamagui";
+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";
 
 // ---------------------------------------------------------------------------
@@ -377,7 +378,7 @@ function defaultErrorBody({
       action={
         onRetry ? (
           <Button size={compact ? "$3" : "$4"} onPress={onRetry}>
-            {retryLabel}
+            <Text fontWeight="400">{retryLabel}</Text>
           </Button>
         ) : undefined
       }
@@ -429,6 +430,8 @@ export function AsyncBoundary({
   const { knobProps } = useResolvedKnobs({ compact });
   const status = resolveAsyncStatus({ loading, empty, error });
   const content = data ?? children;
+  // MPO-48 / R7: Retry is a §6.1 label — weight 400 on the TEXT NODE via
+  // house Text. Alert's actionLabel hardcodes 600; the action slot does not.
   const retryLabel = t("Retry");
 
   const emptyBody = defaultEmptyBody({ empty, compact, emptyTitle, emptyDescription });
@@ -469,8 +472,21 @@ export function AsyncBoundary({
             compact={compact}
             intent="error"
             title={copy.title}
-            actionLabel={onRetry ? retryLabel : undefined}
-            onAction={onRetry}
+            action={
+              onRetry ? (
+                <Text
+                  fontWeight="400"
+                  color="$color12"
+                  cursor="pointer"
+                  userSelect="none"
+                  role="button"
+                  tabIndex={0}
+                  onPress={onRetry}
+                >
+                  {retryLabel}
+                </Text>
+              ) : undefined
+            }
           >
             {copy.description}
           </Alert>