@multiplatform.one/components 7.7.6 → 7.10.0

package/src/feedback/notify.ts

@@ -45,6 +45,7 @@ export function notify(event: NotifyEvent): NotifyRoute {
     surface: route.surface,
     severity: route.severity,
     scope: route.scope,
+    region: route.region,
     title: route.title,
     body: route.body,
     action: route.action,

package/src/feedback/route.ts

@@ -20,6 +20,8 @@ export interface NotifyAction {
 export interface NotifyEvent {
   severity: NotifySeverity;
   scope: NotifyScope;
+  /** Target one inline region instead of broadcasting to every region of the scope. */
+  region?: string;
   /** Escalate to a blocking dialog (error/warning only). Ignored for info/success. */
   blocking?: boolean;
   action?: NotifyAction;
@@ -40,6 +42,7 @@ export interface NotifyRoute {
   surface: NotifySurface;
   severity: NotifySeverity;
   scope: NotifyScope;
+  region?: string;
   /** Toast intent (info → accent). Banner/alert/dialog use `severity` as Alert intent. */
   toastIntent: NotifyToastIntent;
   title?: string;
@@ -81,6 +84,7 @@ export function routeNotify(event: NotifyEvent): NotifyRoute {
   const base = {
     severity,
     scope,
+    ...(event.region != null ? { region: event.region } : {}),
     toastIntent,
     title,
     body,

package/src/feedback/store.ts

@@ -10,6 +10,7 @@ export interface FeedbackEntry {
   surface: Exclude<NotifySurface, "toast">;
   severity: NotifySeverity;
   scope: NotifyScope;
+  region?: string;
   title?: string;
   body: string;
   action?: NotifyAction;
@@ -64,6 +65,12 @@ export function dismissFeedbackBySurface(surface: FeedbackEntry["surface"]): voi
   if (entries.length !== before) emit();
 }
 
+export function dismissFeedbackByRegion(region: string): void {
+  const before = entries.length;
+  entries = entries.filter((entry) => entry.region !== region);
+  if (entries.length !== before) emit();
+}
+
 /** Hard-reset (tests / story decorators). */
 export function resetFeedback(): void {
   entries = [];

package/src/icons/lucide.ts

@@ -1,5 +1,5 @@
 /** Thin re-export so apps/packages/features never import @tamagui/lucide-icons-2. */
-export { Eye, EyeOff, Github, Info, Mail } from "@tamagui/lucide-icons-2";
+export { Eye, EyeOff, Github, Info, Mail, Pencil } from "@tamagui/lucide-icons-2";
 // 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.

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/images/SvgUri/index.native.ts

@@ -1,6 +1,14 @@
-import { SvgUri as RNSvgUri } from "react-native-svg";
-import { styled } from "tamagui";
+import { SvgUri as RNSvgUri, type UriProps } from "react-native-svg";
+import { styled, type TamaguiComponent } from "tamagui";
+import type { StackStyleBase, TamaDefer, TamaguiComponentPropsBaseBase } from "@tamagui/core";
 
-export const SvgUri = styled(RNSvgUri, { name: "SvgUri", uri: null, color: "$color" });
+export const SvgUri: TamaguiComponent<
+  TamaDefer,
+  unknown,
+  TamaguiComponentPropsBaseBase & UriProps,
+  StackStyleBase,
+  {},
+  {}
+> = styled(RNSvgUri, { name: "SvgUri", uri: null, color: "$color" });
 
 export type SvgUriProps = React.ComponentProps<typeof SvgUri>;

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.stories.tsx

@@ -77,7 +77,7 @@ export const MultipleActions: Story = {
         action={
           <>
             <Button>Create record</Button>
-            <Button variant="outlined">Learn more</Button>
+            <Button>Learn more</Button>
           </>
         }
       />
@@ -132,7 +132,7 @@ export const NoResults: Story = {
       <EmptyState
         {...args}
         icon={<MagnifyingGlassIcon size={40} />}
-        action={<Button variant="outlined">Clear filters</Button>}
+        action={<Button>Clear filters</Button>}
       />
     </PageCanvas>
   ),

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/Page.weight.spec.tsx

@@ -0,0 +1,75 @@
+import { defaultConfig } from "@tamagui/config/v5";
+import { createTamagui, TamaguiProvider } from "tamagui";
+import type { ReactElement } from "react";
+import { defaultHeadingFont, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { PageHeader } from "./page";
+
+const config = createTamagui({
+  ...defaultConfig,
+  fonts: { ...defaultConfig.fonts, heading: defaultHeadingFont },
+});
+function renderWithProviders(node: ReactElement) {
+  return render(
+    <TamaguiProvider config={config} defaultTheme="light">
+      {node}
+    </TamaguiProvider>,
+  );
+}
+afterEach(cleanup);
+
+describe("PageHeader rendered Tamagui title recipes", () => {
+  for (const scale of ["moderate", "display"] as const) {
+    for (const weight of ["regular", "bold"] as const) {
+      it(`${scale} preserves ${weight} independently of size`, () => {
+        renderWithProviders(
+          <Preset overrides={{ pageTitleScale: scale, fontWeight: weight }}>
+            <PageHeader title="Measured title" />
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Measured title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "26px" : "40px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H1");
+        expect(title).toHaveAttribute("data-font-weight-knob", weight);
+        expect(title.className).toContain("font_heading");
+      });
+
+      it(`${scale}/${weight} survives nested overrides and a titleScale eject`, () => {
+        renderWithProviders(
+          <Preset
+            overrides={{
+              pageTitleScale: scale,
+              fontWeight: weight === "bold" ? "regular" : "bold",
+            }}
+          >
+            <Preset overrides={{ fontWeight: weight }}>
+              <PageHeader
+                title="Nested title"
+                headingLevel={2}
+                titleScale={scale === "moderate" ? "display" : "moderate"}
+              />
+            </Preset>
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Nested title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "40px" : "26px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H2");
+      });
+    }
+  }
+
+  it("preserves the consumer heading eject and wrapper props", () => {
+    renderWithProviders(
+      <PageHeader
+        heading={<h3 style={{ fontWeight: 600 }}>Custom</h3>}
+        data-testid="eject"
+        padding={7}
+      />,
+    );
+    expect(getComputedStyle(screen.getByRole("heading")).fontWeight).toBe("600");
+    expect(getComputedStyle(screen.getByTestId("eject")).paddingTop).toBe("7px");
+  });
+});

package/src/layouts/PageHeader.stories.tsx

@@ -67,7 +67,7 @@ export const WithActions: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -83,7 +83,7 @@ export const WithNav: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -155,8 +155,8 @@ export const LongTitleNarrow: Story = {
         actions={
           <>
             <Button>First action</Button>
-            <Button variant="outlined">Second action</Button>
-            <Button variant="outlined">Third action</Button>
+            <Button>Second action</Button>
+            <Button>Third action</Button>
           </>
         }
       />

package/src/layouts/PageTemplates.stories.tsx

@@ -68,7 +68,7 @@ export const DetailPage: StoryObj<typeof DetailPageLayout> = {
       sizeClass="expanded"
       title="Bulbasaur"
       subtitle="Pokemon · #0001"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       toolbarTrailing={<Button theme="accent">Edit</Button>}
       aside={<ContentBox label="Aside (meta / timeline) ⅓" minHeight={240} />}
     >
@@ -82,7 +82,7 @@ export const DetailPageCompact: StoryObj<typeof DetailPageLayout> = {
     <DetailPageLayout
       sizeClass="compact"
       title="Bulbasaur"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       aside={<ContentBox label="Aside — stacked below, never hidden" minHeight={140} />}
     >
       <ContentBox label="Main content" minHeight={200} />

package/src/layouts/PaneScaffold.spec.tsx

@@ -13,6 +13,37 @@ import * as Layouts from "./index";
 
 afterEach(cleanup);
 
+const originalInnerWidth = window.innerWidth;
+
+/** Drive the real size-class path from a viewport width (setup reads it at render). */
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+}
+
+afterEach(() => setViewportWidth(originalInnerWidth));
+
+/**
+ * Rail | (centre | inspector) — the three-region page the kit composes from
+ * two scaffolds. `sizeClass` is set on the OUTER one only, so this also
+ * covers whether the class reaches the inner scaffold.
+ */
+function ThreeRegionPage(props: {
+  sizeClass?: "compact" | "medium" | "expanded" | "large" | "xl";
+}) {
+  return (
+    <PaneScaffold
+      sizeClass={props.sizeClass}
+      primary={<Paragraph>Rail</Paragraph>}
+      secondary={
+        <PaneScaffold
+          primary={<Paragraph>Centre</Paragraph>}
+          secondary={<Paragraph>Inspector</Paragraph>}
+        />
+      }
+    />
+  );
+}
+
 describe("layouts index exports (W11)", () => {
   it("exports PaneScaffold canonical layouts + ReadingWidth", () => {
     expect(Layouts.PaneScaffold).toBe(PaneScaffold);
@@ -24,7 +55,7 @@ describe("layouts index exports (W11)", () => {
 });
 
 describe("PaneScaffold", () => {
-  it("shows one pane on compact/medium", () => {
+  it("stacks both panes below the two-pane budget", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="compact"
@@ -33,8 +64,34 @@ describe("PaneScaffold", () => {
       />,
     );
     const root = screen.getByTestId("pane-scaffold");
-    expect(root).toHaveAttribute("data-panes", "1");
-    expect(screen.getByText("List")).toBeInTheDocument();
+    expect(root).toHaveAttribute("data-panes", "2");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByTestId("pane-primary")).toHaveTextContent("List");
+    expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
+  });
+
+  it("drops the sash when stacked (nothing to drag with a thumb)", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-sash", "false");
+    expect(screen.queryByTestId("pane-sash")).not.toBeInTheDocument();
+  });
+
+  it("narrowLayout=swap drops the inactive pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        narrowLayout="swap"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
     expect(screen.queryByText("Detail")).not.toBeInTheDocument();
   });
 
@@ -66,12 +123,27 @@ describe("PaneScaffold", () => {
     expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
   });
 
-  it("maxPanes=1 ejects to single column even when expanded", () => {
+  it("maxPanes=1 takes the narrow path even when expanded", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="xl"
         maxPanes={1}
         primary={<Paragraph>Only</Paragraph>}
+        secondary={<Paragraph>Also</Paragraph>}
+      />,
+    );
+    const root = screen.getByTestId("pane-scaffold");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Also")).toBeInTheDocument();
+  });
+
+  it("maxPanes=1 with activePane drops the other pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="xl"
+        maxPanes={1}
+        activePane="primary"
+        primary={<Paragraph>Only</Paragraph>}
         secondary={<Paragraph>Hidden</Paragraph>}
       />,
     );
@@ -80,7 +152,64 @@ describe("PaneScaffold", () => {
   });
 });
 
+// MPO-235: two scaffolds are how the kit builds three regions, and a phone
+// rendered only the outer primary — the centre and inspector were unreachable.
+describe("PaneScaffold nesting (MPO-235)", () => {
+  it("renders all three regions at a 402pt viewport", () => {
+    setViewportWidth(402);
+    renderWithProviders(<ThreeRegionPage />);
+
+    expect(screen.getByText("Rail")).toBeInTheDocument();
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+      expect(node).toHaveAttribute("data-size-class", "compact");
+    }
+    expect(screen.queryAllByTestId("pane-sash")).toHaveLength(0);
+  });
+
+  it("passes the outer size class to the inner scaffold", () => {
+    // Viewport stays wide: only the outer override may narrow the inner one.
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage sizeClass="compact" />);
+
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+    for (const node of screen.getAllByTestId("pane-scaffold")) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+    }
+  });
+
+  it("still splits both scaffolds when the viewport is wide", () => {
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage />);
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "split");
+    }
+    expect(screen.getAllByTestId("pane-sash")).toHaveLength(2);
+  });
+});
+
 describe("ListDetailLayout", () => {
+  it("keeps the swap idiom on compact: list only until an item is picked", () => {
+    renderWithProviders(
+      <ListDetailLayout
+        sizeClass="compact"
+        list={<Paragraph>Items</Paragraph>}
+        detail={<Paragraph>Item 1</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
+    expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+  });
+
   it("flips to detail when selected on compact", () => {
     renderWithProviders(
       <ListDetailLayout
@@ -96,6 +225,17 @@ describe("ListDetailLayout", () => {
 });
 
 describe("SupportingPaneLayout", () => {
+  it("stacks the supporting pane on compact instead of hiding it", () => {
+    renderWithProviders(
+      <SupportingPaneLayout sizeClass="compact" supporting={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Body</Paragraph>
+      </SupportingPaneLayout>,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Meta")).toBeInTheDocument();
+  });
+
   it("renders side-by-side at large", () => {
     renderWithProviders(
       <SupportingPaneLayout sizeClass="large" supporting={<Paragraph>Meta</Paragraph>}>