@multiplatform.one/components 7.4.1 → 7.5.0

package/src/feedback/ConfirmDialog.spec.tsx

@@ -1,10 +1,11 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { __resetDevWarnSeen } from "@multiplatform.one/theme";
-import { act, fireEvent, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 import { useState } from "react";
+import { SizableText } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ConfirmDialog } from "./ConfirmDialog";
-import { notify, NotifyHost } from "./index";
+import { notify, NotifyHost, NotifyRegion } from "./index";
 import { getFeedback, resetFeedback } from "./store";
 import { resetToasts } from "../Toast/store";
 
@@ -365,3 +366,115 @@ describe("notify() blocking → ConfirmDialog (W7)", () => {
     });
   });
 });
+
+function atoms(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function weightAtoms(el: Element): string[] {
+  return atoms(el, ["_fow-"]);
+}
+
+describe("ConfirmDialog action labels — weight 400 on the TEXT NODE (R7 / §6.1)", () => {
+  afterEach(cleanup);
+
+  it("Continue and Cancel are weight 400 on the text node, never the press floor", () => {
+    renderWithProviders(<SizableText fontWeight="400">pin-400</SizableText>);
+    const explicit400 = weightAtoms(screen.getByText("pin-400"));
+    cleanup();
+    renderWithProviders(<SizableText fontWeight="600">pin-600</SizableText>);
+    const explicit600 = weightAtoms(screen.getByText("pin-600"));
+    cleanup();
+
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        title="Leave this page?"
+        body="Edits will be discarded."
+        confirmLabel="Continue"
+        cancelLabel="Cancel"
+      />,
+    );
+
+    for (const label of ["Continue", "Cancel"]) {
+      const floor = buttonByLabel(label) as HTMLElement;
+      const textNode = screen.getByText(label);
+      expect(textNode).not.toBe(floor);
+      expect(floor.contains(textNode)).toBe(true);
+      const weight = weightAtoms(textNode);
+      expect(weight.length).toBeGreaterThan(0);
+      expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+      expect(weight).toEqual(explicit400);
+      expect(weight).not.toEqual(explicit600);
+      expect(weightAtoms(floor)).toHaveLength(0);
+    }
+    expect(alertdialog()?.getAttribute("data-density")).toBeTruthy();
+    expect(alertdialog()?.getAttribute("data-size")).toBeTruthy();
+  });
+});
+
+describe("NotifyHost action labels — weight 400 on the TEXT NODE (R7 / §6.1)", () => {
+  afterEach(cleanup);
+
+  it("banner Retry is weight 400 on the text node", () => {
+    renderWithProviders(<SizableText fontWeight="400">Retry</SizableText>);
+    const explicit400 = weightAtoms(screen.getByText("Retry"));
+    cleanup();
+    renderWithProviders(<SizableText fontWeight="600">Retry</SizableText>);
+    const explicit600 = weightAtoms(screen.getByText("Retry"));
+    cleanup();
+
+    renderWithProviders(
+      <NotifyHost toastViewport={false}>
+        <div>host</div>
+      </NotifyHost>,
+    );
+    act(() => {
+      notify({
+        severity: "error",
+        scope: "page",
+        title: "Save failed",
+        body: "The server rejected the request.",
+        action: { label: "Retry", onPress: vi.fn() },
+      });
+    });
+
+    const textNode = screen.getByText("Retry");
+    const weight = weightAtoms(textNode);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+    expect(weight).toEqual(explicit400);
+    expect(weight).not.toEqual(explicit600);
+  });
+
+  it("inline section Retry is weight 400 on the text node", () => {
+    renderWithProviders(<SizableText fontWeight="400">Retry</SizableText>);
+    const explicit400 = weightAtoms(screen.getByText("Retry"));
+    cleanup();
+
+    renderWithProviders(
+      <NotifyHost toastViewport={false}>
+        <NotifyRegion scope="section" />
+      </NotifyHost>,
+    );
+    act(() => {
+      notify({
+        severity: "info",
+        scope: "section",
+        title: "Address check",
+        body: "Confirm the shipping address.",
+        action: { label: "Retry", onPress: vi.fn() },
+      });
+    });
+
+    const textNode = screen.getByText("Retry");
+    expect(textNode.tagName).not.toBe("BUTTON");
+    const weight = weightAtoms(textNode);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight).toEqual(explicit400);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+});

package/src/feedback/ConfirmDialog.tsx

@@ -27,7 +27,7 @@ import {
 } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Dialog, Paragraph, XStack, YStack, type TamaguiElement } from "tamagui";
+import { Dialog, Paragraph, SizableText, XStack, YStack, type TamaguiElement } from "tamagui";
 import { countActionsInTree } from "../shared/actionScan";
 import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
 import { DialogContent, DialogOverlay } from "../surfaces";
@@ -55,6 +55,16 @@ function isTextEntry(el: HTMLElement): boolean {
   return Boolean(el.querySelector("input, textarea, [contenteditable='true']"));
 }
 
+/** R7 / §6.1: action labels are weight 400 on the TEXT NODE, never 500/600. */
+function ActionLabel({ children }: { children: string }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <SizableText {...knobProps.body} {...knobProps.label} fontWeight="400" userSelect="none">
+      {children}
+    </SizableText>
+  );
+}
+
 function firstTabStop(root: HTMLElement): HTMLElement | null {
   const nodes = root.querySelectorAll<HTMLElement>(TAB_STOPS);
   for (const el of nodes) {
@@ -231,19 +241,21 @@ export function ConfirmDialog({
           // Test / automation hook for confirm tone (theme class names vary by runtime).
           data-tone={destructive ? "destructive" : warning ? "warning" : "default"}
           data-mp-confirm-dialog=""
+          data-density={knobProps.density}
+          data-size={knobProps.size}
           // Blocking confirm: no light-dismiss. Escape still cancels via
           // Dialog's default escape → onOpenChange(false).
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
           onOpenAutoFocus={handleOpenAutoFocus}
         >
-          <Dialog.Title {...knobProps.heading} fontSize="$6">
+          <Dialog.Title {...knobProps.label} {...knobProps.heading} color="$color12">
             {title}
           </Dialog.Title>
           {description != null ? (
             <Dialog.Description asChild>
               {typeof description === "string" || typeof description === "number" ? (
-                <Paragraph {...knobProps.body} size="$3" color="$color11">
+                <Paragraph {...knobProps.body} {...knobProps.label} color="$color12">
                   {description}
                 </Paragraph>
               ) : (
@@ -267,7 +279,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              {cancelLabel}
+              <ActionLabel>{cancelLabel}</ActionLabel>
             </Button>
             <Button
               compact
@@ -288,7 +300,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              {confirmLabel}
+              <ActionLabel>{confirmLabel}</ActionLabel>
             </Button>
           </XStack>
         </DialogContent>

package/src/feedback/NotifyHost.tsx

@@ -9,7 +9,7 @@ import { useMemo, useSyncExternalStore, type ReactNode } from "react";
 import { zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n";
-import { YStack } from "tamagui";
+import { SizableText, YStack } from "tamagui";
 import { Alert, type AlertIntent } from "../Alert";
 import { ToastViewport, type ToastViewportProps } from "../Toast";
 import { ConfirmDialog } from "./ConfirmDialog";
@@ -25,13 +25,49 @@ function useFeedbackEntries(): FeedbackEntry[] {
   return useSyncExternalStore(subscribeFeedback, getFeedback, getFeedback);
 }
 
+/**
+ * R7 / §6.1: Alert's convenience `actionLabel` hardcodes 600. The `action`
+ * slot plus a text node pinned at 400 is the Notify path (same trap as
+ * AsyncBoundary Retry).
+ */
+function NotifyActionLabel({ label, onPress }: { label: string; onPress: () => void }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <SizableText
+      {...knobProps.body}
+      {...knobProps.label}
+      fontWeight="400"
+      color="$color12"
+      userSelect="none"
+      cursor="pointer"
+      role="button"
+      tabIndex={0}
+      onPress={onPress}
+    >
+      {label}
+    </SizableText>
+  );
+}
+
+function notifyAction(entry: FeedbackEntry) {
+  return entry.action ? (
+    <NotifyActionLabel label={entry.action.label} onPress={entry.action.onPress} />
+  ) : undefined;
+}
+
 function BannerStack({ entries }: { entries: FeedbackEntry[] }) {
   // SP-GAP + SP-PAD (LC-18): the banner region's stack gap and page inset
   // ride the space knob through the complete fragments.
   const { knobProps } = useResolvedKnobs();
   if (entries.length === 0) return null;
   return (
-    <YStack {...knobProps.gap} width="100%" {...knobProps.panelPadding} zIndex={zIndex.loading}>
+    <YStack
+      {...knobProps.gap}
+      width="100%"
+      {...knobProps.panelPadding}
+      zIndex={zIndex.loading}
+      data-density={knobProps.density}
+    >
       {entries.map((entry) => (
         <Alert
           key={entry.id}
@@ -39,8 +75,7 @@ function BannerStack({ entries }: { entries: FeedbackEntry[] }) {
           title={entry.title}
           dismissible={entry.dismissible}
           onDismiss={() => dismissFeedback(entry.id)}
-          actionLabel={entry.action?.label}
-          onAction={entry.action?.onPress}
+          action={notifyAction(entry)}
         >
           {entry.body}
         </Alert>
@@ -99,17 +134,16 @@ export function NotifyRegion({
   );
   if (entries.length === 0) return null;
   return (
-    <YStack {...knobProps.gap} width="100%">
+    <YStack {...knobProps.gap} width="100%" data-density={knobProps.density}>
       {entries.map((entry) => (
         <Alert
           key={entry.id}
           intent={entry.severity as AlertIntent}
           title={entry.title}
-          compact={compact}
+          {...(compact != null ? { compact } : {})}
           dismissible={entry.dismissible}
           onDismiss={() => dismissFeedback(entry.id)}
-          actionLabel={entry.action?.label}
-          onAction={entry.action?.onPress}
+          action={notifyAction(entry)}
         >
           {entry.body}
         </Alert>

package/src/feedback/copy.ts

@@ -0,0 +1,23 @@
+/**
+ * Copy confirm channel (DG-FB-01 / LC-16). Success is a page toast; errors
+ * never toast. The glyph does not flip — notify() is the one confirm.
+ */
+import { copyToClipboard } from "../hooks/useClipboard";
+import { notify } from "./notify";
+
+export const COPY_OK = "Copied to clipboard.";
+export const COPY_FAIL = "Copy failed.";
+
+export function reportCopy(ok: boolean): void {
+  if (ok) {
+    notify({ severity: "success", scope: "page", body: COPY_OK });
+    return;
+  }
+  notify({ severity: "error", scope: "field", body: COPY_FAIL });
+}
+
+export async function copyAndNotify(text: string): Promise<boolean> {
+  const ok = await copyToClipboard(text).catch(() => false);
+  reportCopy(ok);
+  return ok;
+}

package/src/icons/CheckRegular.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof CheckRegular> = {
     docs: {
       description: {
         component:
-          "Check icon wrapped with themed(): resolves color from the theme (token name, theme key, or CSS color) and size from size tokens.",
+          "Check icon wrapped with themed(): colour comes from the active theme (or a theme key). Size follows numeric px or a size token. No structural knob applies (R-NONE).",
       },
     },
   },
@@ -26,14 +26,13 @@ export default meta;
 
 type Story = StoryObj<typeof CheckRegular>;
 
+function parseSize(size: unknown): number | string {
+  return /^\d+$/.test(String(size)) ? Number(size) : (size as string);
+}
+
 export const Default: Story = {
   name: "Main",
-  render: (args) => (
-    <CheckRegular
-      color={args.color}
-      size={/^\d+$/.test(String(args.size)) ? Number(args.size) : (args.size as any)}
-    />
-  ),
+  render: (args) => <CheckRegular color={args.color} size={parseSize(args.size)} />,
 };
 
 export const ColorModes: Story = {
@@ -48,8 +47,8 @@ export const ColorModes: Story = {
         <CheckRegular size={24} color="color10" />
       </XStack>
       <XStack gap="$4" alignItems="center">
-        <Paragraph width={160}>CSS tomato</Paragraph>
-        <CheckRegular size={24} color="tomato" />
+        <Paragraph width={160}>theme key color11</Paragraph>
+        <CheckRegular size={24} color="color11" />
       </XStack>
       <XStack gap="$4" alignItems="center">
         <Paragraph width={160}>green Theme wrapper</Paragraph>

package/src/icons/CheckRegular.tsx

@@ -2,7 +2,7 @@ import { Polyline, Rect, Svg } from "@tamagui/react-native-svg";
 import { memo } from "react";
 import { themed } from "./themed";
 
-function Icon({ color = "black", size = 24, ...otherProps }) {
+function Icon({ color = "currentColor", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />

package/src/icons/MinusRegular.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof MinusRegular> = {
     docs: {
       description: {
         component:
-          "Minus icon wrapped with themed(): used for indeterminate checkbox state; color and size resolve through the theme.",
+          "Minus icon wrapped with themed(): used for indeterminate checkbox state. Colour and size resolve through the theme — no black fallback.",
       },
     },
   },
@@ -26,14 +26,13 @@ export default meta;
 
 type Story = StoryObj<typeof MinusRegular>;
 
+function parseSize(size: unknown): number | string {
+  return /^\d+$/.test(String(size)) ? Number(size) : (size as string);
+}
+
 export const Default: Story = {
   name: "Main",
-  render: (args) => (
-    <MinusRegular
-      color={args.color}
-      size={/^\d+$/.test(String(args.size)) ? Number(args.size) : (args.size as any)}
-    />
-  ),
+  render: (args) => <MinusRegular color={args.color} size={parseSize(args.size)} />,
 };
 
 export const ColorModes: Story = {
@@ -48,8 +47,8 @@ export const ColorModes: Story = {
         <MinusRegular size={24} color="color10" />
       </XStack>
       <XStack gap="$4" alignItems="center">
-        <Paragraph width={160}>CSS tomato</Paragraph>
-        <MinusRegular size={24} color="tomato" />
+        <Paragraph width={160}>theme key color11</Paragraph>
+        <MinusRegular size={24} color="color11" />
       </XStack>
       <XStack gap="$4" alignItems="center">
         <Paragraph width={160}>green Theme wrapper</Paragraph>

package/src/icons/MinusRegular.tsx

@@ -2,7 +2,7 @@ import { Line, Rect, Svg } from "@tamagui/react-native-svg";
 import { memo } from "react";
 import { themed } from "./themed";
 
-function Icon({ color = "black", size = 24, ...otherProps }) {
+function Icon({ color = "currentColor", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />

package/src/icons/icons.spec.tsx

@@ -1,7 +1,12 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { describe, expect, it } from "vitest";
+import { CheckRegular } from "./CheckRegular";
 import { MinusRegular } from "./MinusRegular";
 
+function strokeOf(container: HTMLElement, selector: string) {
+  return container.querySelector(selector)?.getAttribute("stroke") ?? "";
+}
+
 describe("MinusRegular", () => {
   it("should render correctly", () => {
     const { container } = renderWithProviders(<MinusRegular />);
@@ -23,4 +28,48 @@ describe("MinusRegular", () => {
     expect(svg).toHaveAttribute("height", "48");
     expect(svg).toHaveAttribute("width", "48");
   });
+
+  it("does not default stroke to black or #000", () => {
+    const { container } = renderWithProviders(<MinusRegular />);
+    const stroke = strokeOf(container, "line");
+    expect(stroke).not.toBe("black");
+    expect(stroke.toLowerCase()).not.toBe("#000");
+    expect(stroke.toLowerCase()).not.toBe("#000000");
+    expect(stroke.length).toBeGreaterThan(0);
+  });
+
+  it("keeps the stroke centred at supported sizes", () => {
+    for (const size of [12, 16, 24, 48]) {
+      const { container } = renderWithProviders(<MinusRegular size={size} />);
+      const line = container.querySelector("line");
+      expect(line).toHaveAttribute("y1", "128");
+      expect(line).toHaveAttribute("y2", "128");
+      const svg = container.querySelector("svg");
+      expect(svg).toHaveAttribute("height", String(size));
+      expect(svg).toHaveAttribute("width", String(size));
+    }
+  });
+});
+
+describe("CheckRegular", () => {
+  it("should render correctly", () => {
+    const { container } = renderWithProviders(<CheckRegular />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("does not default stroke to black or #000", () => {
+    const { container } = renderWithProviders(<CheckRegular />);
+    const stroke = strokeOf(container, "polyline");
+    expect(stroke).not.toBe("black");
+    expect(stroke.toLowerCase()).not.toBe("#000");
+    expect(stroke.toLowerCase()).not.toBe("#000000");
+    expect(stroke.length).toBeGreaterThan(0);
+  });
+
+  it("should accept a theme token size", () => {
+    const { container } = renderWithProviders(<CheckRegular size={16} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("height", "16");
+    expect(svg).toHaveAttribute("width", "16");
+  });
 });

package/src/icons/lucide.ts

@@ -1,5 +1,6 @@
 /** Thin re-export so apps/packages/features never import @tamagui/lucide-icons-2. */
 export { Eye, EyeOff, Github, Info, Mail } from "@tamagui/lucide-icons-2";
-// Aliased: bare `Menu` collides with tamagui's Menu compound under `export *`.
-// Package root re-exports this as `Menu` after the tamagui star (see index.ts).
+// Aliased: bare `Menu` is the lucide hamburger. Tamagui Menu / create-menu
+// are unused leftovers and are not house barrel names (R9 G7). Package
+// root re-exports this as `Menu` after the curated tamagui surface.
 export { Menu as MenuIcon } from "@tamagui/lucide-icons-2";

package/src/icons/themed.tsx

@@ -2,19 +2,23 @@ import { isTouchSurface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import type { FC } from "react";
 import { getVariable, useProps, useTheme } from "tamagui";
 
+/**
+ * Theme-aware icon wrapper. Colour resolves theme key → caller colour →
+ * scheme-aware `theme.color`. Never black / `#000` (CheckRegular /
+ * MinusRegular contract: SVG defaults MUST NOT fall back to black).
+ */
 export function themed<A extends FC>(Component: A) {
   return ((props: any) => {
     const { color, disableTheme, size } = useProps(props);
     const theme = useTheme();
+    const fromTheme =
+      typeof color === "string" && color in theme ? theme[color as keyof typeof theme] : undefined;
+    const resolved = fromTheme || color || (!disableTheme ? theme.color : undefined);
+    const colorValue = resolved != null ? getVariable(resolved) : "currentColor";
     return (
       <Component
         {...props}
-        color={getVariable(
-          (color in theme ? theme[color] : undefined) ||
-            color ||
-            (!disableTheme ? theme.color : null) ||
-            "#000",
-        )}
+        color={colorValue}
         size={
           typeof size === "string"
             ? sizeRecipeForToken(size, { touch: isTouchSurface() }).iconSize

package/src/images/Image/Image.spec.tsx

@@ -1,8 +1,13 @@
 import { fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { describe, expect, it, vi } from "vitest";
 import { Image } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 const SRC = "https://example.com/photo.jpg";
 
 describe("Image", () => {
@@ -274,4 +279,23 @@ describe("Image", () => {
       );
     });
   });
+
+  describe("R11 / media-19 live-media tile", () => {
+    it("does not paint a status pip; frame radius stays UNCLAMPED", () => {
+      const src = [
+        readFileSync(join(here, "index.tsx"), "utf8"),
+        readFileSync(join(here, "ImageFrame.tsx"), "utf8"),
+      ].join("\n");
+      expect(src).not.toMatch(
+        /knobProps\.cardSurface|knobProps\.containerRadius|capContainerRadius\(/,
+      );
+      expect(src).not.toMatch(/data-status-pip|StatusPip|statusPip/);
+
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="live tile" width={120} height={80} />,
+      );
+      expect(container.querySelector("[data-status-pip]")).toBeNull();
+      expect(container.querySelector("[data-media-tile='image']")).toBeTruthy();
+    });
+  });
 });

package/src/images/Image/Image.stories.tsx

@@ -1,18 +1,43 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { resolveChartPalette } from "@multiplatform.one/theme";
 import { View, XStack, YStack } from "tamagui";
 import { Image } from "./index";
 
-const LANDSCAPE_IMG = "https://picsum.photos/id/10/800/400";
-const SQUARE_IMG = "https://picsum.photos/id/20/400/400";
-const SVG_IMG = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
-const GIF_IMG =
-  "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif";
+/**
+ * Self-contained plate (no network): a horizon + sun on a categorical solid.
+ * Embedded SVG pixels, not UI chrome — same honesty rule as ImageGrid.
+ */
+function plateSrc(color: string, seed: number, w = 400, h = 400): string {
+  const sunX = Math.round(w * 0.62) + (seed % 5) * 12;
+  const sunY = Math.round(h * 0.18) + (seed % 4) * 10;
+  const sunR = 28 + (seed % 3) * 6;
+  const horizon = Math.round(h * 0.55) + (seed % 5) * 10;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+      <rect width="${w}" height="${h}" fill="${color}"/>
+      <circle cx="${sunX}" cy="${sunY}" r="${sunR}" fill="white" fill-opacity="0.28"/>
+      <rect y="${horizon}" width="${w}" height="${h - horizon}" fill="black" fill-opacity="0.2"/>
+    </svg>`,
+  )}`;
+}
+
+const palette = resolveChartPalette({ scheme: "light" }).categorical;
+const LANDSCAPE_IMG = plateSrc(palette[0] ?? "#3b6ea8", 0, 800, 400);
+const SQUARE_IMG = plateSrc(palette[1] ?? "#6b4ea8", 1, 400, 400);
+const SVG_IMG = plateSrc(palette[2] ?? "#2a9d8f", 2, 200, 200);
+const GIF_IMG = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
 const meta: Meta<typeof Image> = {
   title: "Components/Image",
   component: Image,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Catalog Image is a media-19 tile: unclamped `borderRadius`, no status pip on the media (R11 / DL-1). Loading and error replace the tile wholesale. Nested hue is opt-in — Image does not wrap Tint (R12).",
+      },
+    },
   },
 };
 
@@ -84,7 +109,7 @@ export const ObjectFitContain: Story = {
 export const SvgImage: Story = {
   args: {
     src: SVG_IMG,
-    alt: "SVG logo",
+    alt: "SVG plate",
     width: 200,
     height: 200,
   },
@@ -93,7 +118,7 @@ export const SvgImage: Story = {
 export const GifImage: Story = {
   args: {
     src: GIF_IMG,
-    alt: "Animated globe",
+    alt: "GIF pixel",
     width: 200,
     height: 200,
   },

package/src/images/Image/ImageFrame.tsx

@@ -111,14 +111,13 @@ export function ImageFrame({
   const needsHitSlop = hasPress && visualPx != null && visualPx < MIN_PRESS_TARGET;
   const minTarget = hasPress && visualPx == null ? pressTargetStyle() : undefined;
 
+  // media-19: unclamped scale radius (R11). Never `containerRadius` /
+  // `cardSurface` — those carry CONTAINER-CAP padding a tile does not have.
   const radiusToken = knobProps.borderRadius.borderRadius;
   const radiusValue = (borderRadiusProp as string | number | undefined) ?? radiusToken;
   const radiusFragment = position
     ? stackRadiusProps(position, radiusValue, groupOrientation)
-    : {
-        borderRadius: radiusValue,
-        className: knobProps.borderRadius.className,
-      };
+    : { ...knobProps.borderRadius, borderRadius: radiusValue };
 
   const heightOnly =
     typeof height !== "undefined" &&
@@ -166,6 +165,7 @@ export function ImageFrame({
   const painted = (
     <View
       data-image-frame=""
+      data-media-tile="image"
       data-nested-px={thumbnailPx === nestedPx ? nestedPx : undefined}
       data-group-position={position}
       overflow="hidden"
@@ -176,13 +176,7 @@ export function ImageFrame({
       {...(!fill && frameAspect != null ? { aspectRatio: frameAspect as never } : null)}
       {...(heightOnly ? { width: "auto", alignSelf: "flex-start" } : null)}
       {...radiusFragment}
-      {...(framed
-        ? {
-            backgroundColor: knobProps.surface.backgroundColor,
-            borderColor: knobProps.surface.borderColor,
-            borderWidth: knobProps.surface.borderWidth,
-          }
-        : null)}
+      {...(framed ? knobProps.surface : { borderWidth: 0 })}
       {...(hasPress
         ? {
             cursor: disabled ? "not-allowed" : "pointer",