@multiplatform.one/components 7.4.1 → 7.5.0

package/src/tamagui.ts

@@ -22,13 +22,17 @@
 //   rawness is visible and greppable at the import site.
 // - The curation is locked by tamagui.spec.ts — update both together.
 
-// Layout primitives (no house replacement)
+// Layout primitives (no house replacement).
+// Separator left this list 2026-08-28 (MPO-47): the raw primitive painted
+// nothing on every measured board (96/96 transparent boxes) — the bare name
+// is the house Separator re-exported via index.ts (1px painted line in
+// $borderColor, quiet = opacity 0.5). Raw stays reachable as
+// TamaguiSeparator below.
 export {
   Circle,
   Group,
   ListItem,
   ScrollView,
-  Separator,
   Spacer,
   Square,
   View,
@@ -38,8 +42,15 @@ export {
   YStack,
 } from "tamagui";
 
-// Text primitives (no house replacement)
-export { Anchor, H1, H2, H3, H4, H5, H6, Heading, Paragraph, SizableText, Text } from "tamagui";
+// Text primitives: NONE re-exported raw anymore (MPO-20). The former
+// "typography substrate" registry rows were the single biggest knob hole in
+// the catalog: FontKnobStyles rescues family/leading/tracking on WEB ONLY,
+// fontWeight/textAccent/pageTitleScale reached the raw primitives on NO
+// platform, and on native nothing did. Bare Text/SizableText/Paragraph/
+// Anchor are the house shadows in ./Text.tsx and bare Heading/H1–H6 the
+// house shadows in ./Heading.tsx, spreading knobProps.body / .heading /
+// .pageTitle (and textAccent ink) as PROPS so the knobs reach the text node
+// on every platform. Raw stays reachable via the Tamagui* hatches below.
 
 // Actions / feedback primitives: NONE re-exported raw anymore.
 // Button is a house shadow (./Button.tsx over the forms Button — LC-18/LC-54,
@@ -51,7 +62,13 @@ export { Anchor, H1, H2, H3, H4, H5, H6, Heading, Paragraph, SizableText, Text }
 
 // Overlay composition roots — the house DialogContent / PopoverContent /
 // SheetFrame surfaces are designed to compose inside these raw roots.
-export { Adapt, AlertDialog, Dialog, Popover, Portal, PortalProvider, Sheet } from "tamagui";
+//
+// Adapt is off this list (R9 G8 DROP). Compact vs regular overlays use the
+// 860 pivot: useViewportGtSm / AdaptivePopup / FloatingPanel (Dialog or
+// Sheet, one shared child tree). Tamagui Menu / create-menu stay off this
+// list (R9 G7). Tamagui Link stays off this list — house Text/Heading owns
+// link chrome (R9 G11).
+export { AlertDialog, Dialog, Popover, Portal, PortalProvider, Sheet } from "tamagui";
 
 // Providers / theme / animation
 export { AnimatePresence, TamaguiProvider, Theme } from "tamagui";
@@ -79,9 +96,10 @@ export {
   withStaticProperties,
 } from "tamagui";
 
-// Types for the allowlisted surface
+// Types for the allowlisted surface. Typography Props types (TextProps,
+// HeadingProps, …) ride the house modules (./Text.tsx, ./Heading.tsx) so the
+// bare type names track the house components, same as ButtonProps.
 export type {
-  AnchorProps,
   CircleProps,
   ColorTokens,
   DialogProps,
@@ -89,14 +107,11 @@ export type {
   GetProps,
   GetRef,
   GroupProps,
-  HeadingProps,
   ListItemProps,
-  ParagraphProps,
   PopoverProps,
   RadiusTokens,
   ScrollViewProps,
   SheetProps,
-  SizableTextProps,
   SizeTokens,
   SpaceTokens,
   SquareProps,
@@ -104,7 +119,6 @@ export type {
   TamaguiElement,
   TamaguiProviderProps,
   TamaguiTextElement,
-  TextProps,
   ThemeName,
   ThemeProps,
   ViewProps,
@@ -113,11 +127,12 @@ export type {
 } from "tamagui";
 
 // Explicit raw escape hatches (TamaguiToast precedent): these primitives are
-// EXCLUDED under their bare names because @multiplatform.one/forms owns the
-// house version. Deliberate, correctly-composed raw usage (playground
-// showcases, settings toggles that compose Thumb/Indicator themselves)
-// imports the prefixed name so the choice is explicit at the call site.
-// Prefer the forms field for new code.
+// EXCLUDED under their bare names because a house version owns the name —
+// @multiplatform.one/forms for the fields, ./Separator for the rule.
+// Deliberate, correctly-composed raw usage (playground showcases, settings
+// toggles that compose Thumb/Indicator themselves) imports the prefixed name
+// so the choice is explicit at the call site. Prefer the house part for new
+// code.
 export {
   Button as TamaguiButton,
   Checkbox as TamaguiCheckbox,
@@ -126,9 +141,29 @@ export {
   Progress as TamaguiProgress,
   RadioGroup as TamaguiRadioGroup,
   Select as TamaguiSelect,
+  Separator as TamaguiSeparator,
   Slider as TamaguiSlider,
   Spinner as TamaguiSpinner,
   Switch as TamaguiSwitch,
   TextArea as TamaguiTextArea,
   ToggleGroup as TamaguiToggleGroup,
 } from "tamagui";
+
+// Typography escape hatches (MPO-20): the bare names are the knob-consuming
+// house shadows (./Text.tsx, ./Heading.tsx). Deliberate raw usage — styled()
+// bases, specimens, code that must not consume the knob channel — imports
+// the prefixed name so the rawness is visible at the import site. App text
+// NEVER rides these (AN-8; mpo-conventions/no-raw-typography lints it).
+export {
+  Anchor as TamaguiAnchor,
+  H1 as TamaguiH1,
+  H2 as TamaguiH2,
+  H3 as TamaguiH3,
+  H4 as TamaguiH4,
+  H5 as TamaguiH5,
+  H6 as TamaguiH6,
+  Heading as TamaguiHeading,
+  Paragraph as TamaguiParagraph,
+  SizableText as TamaguiSizableText,
+  Text as TamaguiText,
+} from "tamagui";

package/src/views/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { Meter } from "../Meter";
 import { BarChart } from "../charts/BarChart";
 import { LineChart } from "../charts/LineChart";
 import { PieChart } from "../charts/PieChart";
@@ -126,7 +127,8 @@ export interface ChartConfig {
 }
 
 /**
- * Grafana bar-gauge / Polaris progress / Frappe percentage number-card.
+ * Dashboard bar-gauge card. The rail is Meter — position within bounds,
+ * not Progress (activity toward completion). See `Meter`.
  */
 export interface ProgressConfig {
   id: string;
@@ -500,41 +502,23 @@ export interface ProgressCardProps extends Omit<YStackProps, "children"> {
 }
 
 export function ProgressCard({ config, ...stackProps }: ProgressCardProps) {
-  const { knobProps, nested } = useWidgetChrome();
-  const { px } = nested;
+  const { knobProps } = useWidgetChrome();
   const max = config.max && config.max > 0 ? config.max : 100;
   const pct = Math.max(0, Math.min(100, (config.value / max) * 100));
-  const trackHeight = Math.max(6, Math.round(px / 4));
   const label =
     config.format === "number" ? formatNumber(config.value) : formatPercent(Math.round(pct));
 
   return (
     <Card width="100%" elevation={knobProps.elevation} {...knobProps.surface} {...stackProps}>
-      <XStack justifyContent="space-between" alignItems="baseline" {...knobProps.gap}>
-        <Text {...knobProps.label} color={componentColors.text.muted} flex={1}>
-          {config.title}
-        </Text>
-        <Text color="$color" {...knobProps.label}>
-          {label}
-        </Text>
-      </XStack>
-      <YStack
-        height={trackHeight}
-        backgroundColor="$color4"
-        overflow="hidden"
-        {...knobProps.borderRadius}
-        role="progressbar"
-        aria-valuenow={config.value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-label={config.title}
-      >
-        <YStack
-          height="100%"
-          width={`${pct}%`}
-          backgroundColor={(config.color || "$accentBackground") as any}
-        />
-      </YStack>
+      <Meter
+        label={config.title}
+        value={config.value}
+        min={0}
+        max={max}
+        format={config.format ?? "percent"}
+        layout="adjacent"
+        valueLabel={label}
+      />
     </Card>
   );
 }

package/src/views/Gantt.spec.tsx

@@ -608,4 +608,27 @@ describe("GanttView", () => {
       expect(document.querySelector('[data-gantt-skeleton="true"]')).toBeNull();
     });
   });
+
+  describe("design-law (MPO-60)", () => {
+    function atoms(el: Element, prefixes: string[]): string[] {
+      return String((el as HTMLElement).className || "")
+        .split(" ")
+        .filter((c) => prefixes.some((p) => c.startsWith(p)))
+        .sort();
+    }
+
+    it("task and axis labels ride the fontWeight knob — never 500 or 600", () => {
+      const { container } = renderWithProviders(<GanttView tasks={tasks} />);
+      const taskName = screen.getByText("Implementation");
+      const axis = screen.getByText("Task");
+      for (const node of [taskName, axis]) {
+        const weight = atoms(node, ["_fow-"]);
+        expect(weight.length).toBeGreaterThan(0);
+        expect(weight.join(" ")).not.toMatch(/500|600|weight-5|weight-6|fow-5|fow-6/);
+      }
+      const frame = container.querySelector("[data-gantt-view]") as HTMLElement;
+      expect(frame.getAttribute("data-size")).toBeTruthy();
+      expect(frame.getAttribute("data-density")).toBeTruthy();
+    });
+  });
 });

package/src/views/Gantt.tsx

@@ -228,6 +228,8 @@ const SKELETON_BARS = [
 
 function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeight: number }) {
   const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const edgePad = knobProps.panelPadding.padding;
   return (
     <YStack width="100%" aria-busy aria-label={t("Loading")} {...{ "data-gantt-skeleton": "true" }}>
       <XStack
@@ -236,7 +238,7 @@ function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeigh
         {...hairline.bottom}
         borderColor="$borderColor"
       >
-        <XStack width={labelWidth} paddingHorizontal="$3">
+        <XStack width={labelWidth} paddingHorizontal={edgePad}>
           <Skeleton width={64} height={12} />
         </XStack>
         <Skeleton width={220} height={12} />
@@ -249,7 +251,7 @@ function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeigh
           {...(i < SKELETON_BARS.length - 1 ? hairline.bottom : null)}
           borderColor={componentColors.divider}
         >
-          <XStack width={labelWidth} paddingHorizontal="$3">
+          <XStack width={labelWidth} paddingHorizontal={edgePad}>
             <Skeleton width={i % 2 === 0 ? 96 : 72} height={12} />
           </XStack>
           <YStack marginLeft={bar.x}>
@@ -282,14 +284,14 @@ function BarIntentWrap({
 
 /** Title ink on a filled bar — paper or ink, whichever clears AA on the fill. */
 function GanttBarLabel({ title, fill }: { title: string; fill: string }) {
+  const { knobProps } = useResolvedKnobs();
   const ink = useReadableTextOn(fill);
   return (
     <Text
       color={ink ?? "$color1"}
-      fontSize="$1"
-      fontWeight="600"
+      {...knobProps.label}
       numberOfLines={1}
-      paddingHorizontal="$2"
+      paddingHorizontal={knobProps.control.paddingHorizontal}
       pointerEvents="none"
       zIndex={1}
       aria-hidden
@@ -311,7 +313,7 @@ function GanttTaskName({
 }) {
   const ink = useReadableTextOn(selected ? "$accentBackground" : undefined);
   return (
-    <Text {...body} fontSize="$2" numberOfLines={1} color={selected && ink ? ink : "$color"}>
+    <Text {...body} numberOfLines={1} color={selected && ink ? ink : "$color"}>
       {title}
     </Text>
   );
@@ -445,9 +447,7 @@ export function GanttView({
   const rangeLabel = useMemo(() => formatRangeLabel(range), [range]);
   const months = useMemo(() => monthBands(range, pxPerDay), [range, pxPerDay]);
   const weekends = useMemo(() => weekendColumns(range, pxPerDay), [range, pxPerDay]);
-  const todayColX = showToday
-    ? dateToX(startOfDay(new Date()), range.start, pxPerDay)
-    : null;
+  const todayColX = showToday ? dateToX(startOfDay(new Date()), range.start, pxPerDay) : null;
 
   const changeZoom = useCallback(
     (next: GanttZoom) => {
@@ -932,7 +932,7 @@ export function GanttView({
             top={barInset}
             height={barHeight}
             {...knobProps.borderRadius}
-            borderWidth={1}
+            borderWidth={knobProps.inputSurface.borderWidth}
             borderColor="$accentColor"
             backgroundColor="$accentBackground"
             opacity={0.25}
@@ -963,9 +963,7 @@ export function GanttView({
           tabIndex={0}
           aria-label={ganttTaskAccessibleLabel(task)}
           // LC-71: one ring on the bar (the perceived control), keyboard-only.
-          {...(isBarFocused && barKeyboardRing
-            ? keyboardFocusRingProps
-            : { outlineWidth: 0 })}
+          {...(isBarFocused && barKeyboardRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
           onFocus={() => {
             setFocusedBarId(task.id);
             setBarKeyboardRing(wasKeyboardFocus());
@@ -1031,14 +1029,14 @@ export function GanttView({
               {...(rtl ? { right: 0 } : { left: 0 })}
               backgroundColor="$background"
               {...knobProps.borderRadius}
-              borderWidth={1}
+              borderWidth={knobProps.inputSurface.borderWidth}
               borderColor="$borderColor"
-              paddingHorizontal="$2"
+              paddingHorizontal={knobProps.control.paddingHorizontal}
               pointerEvents="none"
               zIndex={4}
               {...{ "data-gantt-drag-label": "true" }}
             >
-              <Text fontSize="$1" color="$color" numberOfLines={1}>
+              <Text {...knobProps.label} color="$color" numberOfLines={1}>
                 {formatSpanLabel(previewSpan)}
               </Text>
             </XStack>
@@ -1124,7 +1122,11 @@ export function GanttView({
         elevation={knobProps.elevation}
         // LC-72 CONTAINER-CLIP: the frame rounds and clips; rows stay square.
         {...knobProps.containerRadius}
-        {...{ "data-gantt-view": zoom }}
+        {...{
+          "data-gantt-view": zoom,
+          "data-size": knobProps.size,
+          "data-density": knobProps.density,
+        }}
       >
         {/* Header */}
         {(showNavigation || showZoomSwitcher) && (
@@ -1176,16 +1178,12 @@ export function GanttView({
             flexShrink={0}
             height={axisHeight}
             alignItems="center"
-            paddingHorizontal="$3"
+            paddingHorizontal={knobProps.panelPadding.padding}
             {...hairlineEnd}
             borderColor="$borderColor"
             {...{ backgroundColor: componentColors.surface.background }}
           >
-            <Text
-              {...knobProps.label}
-              color={componentColors.text.muted}
-              numberOfLines={1}
-            >
+            <Text {...knobProps.label} color={componentColors.text.muted} numberOfLines={1}>
               {t("Task")}
             </Text>
           </XStack>
@@ -1240,7 +1238,6 @@ export function GanttView({
                     top={2}
                     width={Math.max(0, band.width - 8)}
                     {...knobProps.label}
-                    fontWeight="600"
                     color={componentColors.text.secondary}
                     numberOfLines={1}
                   >
@@ -1255,9 +1252,7 @@ export function GanttView({
                   {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
                   top={axisHeight / 2}
                   {...knobProps.label}
-                  color={
-                    tick.major ? componentColors.text.secondary : componentColors.text.muted
-                  }
+                  color={tick.major ? componentColors.text.secondary : componentColors.text.muted}
                   numberOfLines={1}
                 >
                   {formatDayOfMonth(tick.date)}
@@ -1292,7 +1287,7 @@ export function GanttView({
                     key={task.id}
                     height={rowHeight}
                     alignItems="center"
-                    paddingHorizontal="$3"
+                    paddingHorizontal={knobProps.panelPadding.padding}
                     {...(last ? null : hairline.bottom)}
                     borderColor={minorGridColor}
                     backgroundColor={

package/src/views/ImageGrid.spec.tsx

@@ -0,0 +1,37 @@
+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 } from "vitest";
+import { ImageGrid } from "./ImageGrid";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+describe("ImageGrid live-media tile (R11 / media-19)", () => {
+  it("does not paint a status pip; tile radius stays UNCLAMPED", () => {
+    const src = readFileSync(join(here, "ImageGrid.tsx"), "utf8");
+    expect(src).not.toMatch(
+      /capContainerRadius\(|knobProps\.containerRadius|knobProps\.cardSurface/,
+    );
+    expect(src).toContain("knobProps.borderRadius");
+    expect(src).not.toMatch(/data-status-pip|StatusPip|statusPip/);
+
+    renderWithProviders(
+      <ImageGrid
+        items={[
+          { id: "1", title: "Photo A" },
+          { id: "2", title: "Photo B" },
+        ]}
+        columns={2}
+        renderItem={(item) => <div>{item.title}</div>}
+        height={400}
+      />,
+    );
+    const cells = document.querySelectorAll('[role="gridcell"]');
+    expect(cells.length).toBe(2);
+    for (const cell of cells) {
+      expect(cell.querySelector("[data-status-pip]")).toBeNull();
+      expect(cell.getAttribute("data-media-tile")).toBe("image-grid");
+    }
+  });
+});

package/src/views/ImageGrid.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import { resolveChartPalette } from "@multiplatform.one/theme";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { Image, Text, YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
+import { Image } from "../images/Image";
 import { ImageGrid } from "./ImageGrid";
 
 interface ImageItem {
@@ -59,16 +60,31 @@ const meta: Meta = {
   title: "Components/ImageGrid",
   parameters: {
     status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Live-media tiles: unclamped `borderRadius` (media-19, not CONTAINER-CAP). No status pip on the photograph (R11 / DL-1). Nested hue is opt-in — ImageGrid does not wrap Tint (R12).",
+      },
+    },
   },
 };
 
 export default meta;
 
 function PhotoPlate({ item }: { item: ImageItem }) {
-  // No tile-owned radius (G-15 story honesty): ImageGrid's card frame
-  // clips items at the knob radius — a pinned $3 held a 7px arc at
-  // borderRadius:none (UX-P06 "ImageGrid tiles br=7").
-  return <Image src={item.src} alt={item.alt} width="100%" aspectRatio={1} objectFit="cover" />;
+  // Catalog Image (LC-56). No tile-owned radius (G-15 story honesty):
+  // ImageGrid's card frame clips items at the knob radius — a pinned $3
+  // held a 7px arc at borderRadius:none (UX-P06 "ImageGrid tiles br=7").
+  return (
+    <Image
+      src={item.src}
+      alt={item.alt}
+      width="100%"
+      aspectRatio={1}
+      objectFit="cover"
+      borderRadius={0}
+    />
+  );
 }
 
 export const Default = {

package/src/views/ImageGrid.tsx

@@ -149,6 +149,8 @@ function ImageGridSkeleton({
  * LC-71 ring rides this node (inset — overflow clips children to radius),
  * never the padded cell and never the grid. Hover veil is pointer-only;
  * keyboard focus is ring-only (no fill wash over the image).
+ * R11: no status pip on the media; radius UNCLAMPED (not CONTAINER-CAP).
+ * R12: this module does not wrap Tint — nested hue is opt-in at the caller.
  */
 function ImageGridTile({
   id,
@@ -159,8 +161,7 @@ function ImageGridTile({
   columns,
   colIndex,
   rowIndex,
-  radius,
-  radiusClassName,
+  radiusFragment,
   onPress,
   children,
 }: {
@@ -172,11 +173,11 @@ function ImageGridTile({
   columns: number;
   colIndex: number;
   rowIndex: number;
-  radius: string | number;
-  radiusClassName?: string;
+  radiusFragment: { borderRadius?: string | number; className?: string };
   onPress?: () => void;
   children: React.ReactNode;
 }) {
+  const radius = radiusFragment.borderRadius;
   const [hovered, setHovered] = useState(false);
   return (
     <View width={`${100 / columns}%` as any} padding={cellPadding} role="presentation">
@@ -189,9 +190,10 @@ function ImageGridTile({
         aria-rowindex={rowIndex}
         aria-selected={isFocused}
         data-focused={isFocused || undefined}
+        data-media-tile="image-grid"
         position="relative"
-        borderRadius={radius}
-        {...(radiusClassName ? { className: radiusClassName } : {})}
+        {...radiusFragment}
+        borderWidth={0}
         cursor={clickable ? "pointer" : undefined}
         {...(showRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
         // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
@@ -264,7 +266,7 @@ export function ImageGrid<T>({
 }: ImageGridProps<T>) {
   const { t } = useTranslation();
   const emptyMessage = emptyMessageProp ?? t("No items found");
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "ImageGrid" });
   const isRTL = useDirection() === "rtl";
   // Flex `gap` on a single-child cell wrapper is a no-op, so gutters come
   // from half-gutter padding on every cell (works on web and native — no
@@ -399,8 +401,10 @@ export function ImageGrid<T>({
   const effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
   const showKeyboardRing = effectiveFocused >= 0 && wasKeyboardFocus();
   const rowCount = Math.ceil(items.length / columns);
-  const radius = knobProps.borderRadius.borderRadius;
-  const radiusClassName = knobProps.borderRadius.className;
+  // media-19 UNCLAMPED: spread the scale radius fragment, never
+  // `containerRadius` / `cardSurface` (R11). Tile has no padding for
+  // CONTAINER-CAP to bite on.
+  const radiusFragment = knobProps.borderRadius;
 
   const gridBody =
     items.length === 0 ? null : (
@@ -453,8 +457,7 @@ export function ImageGrid<T>({
                       columns={columns}
                       colIndex={col + 1}
                       rowIndex={row + 1}
-                      radius={radius}
-                      radiusClassName={radiusClassName}
+                      radiusFragment={radiusFragment}
                       onPress={
                         onItemClick
                           ? () => {