@multiplatform.one/components 7.4.1 → 7.6.0

package/src/surfaces.tsx

@@ -2,18 +2,19 @@ import { Preset, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { createContext, forwardRef, useContext } from "react";
 import {
-  Card as TamaguiCard,
+  AlertDialog,
   Dialog,
   Popover,
   Sheet,
   View,
-  type CardProps as TamaguiCardProps,
+  isWeb,
   type DialogContentProps as TamaguiDialogContentProps,
   type DialogOverlayProps as TamaguiDialogOverlayProps,
   type TamaguiElement,
   type ViewProps,
-  withStaticProperties,
 } from "tamagui";
+export { Card, CardFooter, CardHeader } from "./Card";
+export type { CardFooterProps, CardHeaderProps, CardProps, SurfaceTier } from "./Card";
 
 /**
  * Knob-aware surface wrappers.
@@ -56,73 +57,7 @@ const overlayFrameFocusStyle = {
   outlineStyle: "none" as any,
 } as const;
 
-// ── Card ──────────────────────────────────────────────────────────────────
-
-/**
- * Bento surface tiers:
- * - `content` (default): padded frame, bg only — no border, no shadow.
- * - `elevated`: bordered + elevated (overlay grammar — popovers, dropdowns).
- * - `feature`: big radius + ultra-soft wide shadow (marketing/auth cards).
- *
- * Padding contract: Card owns the inset (knob `panelPadding`, so the space
- * knob scales it) on every tier — bare children never touch the border.
- * Header/Footer are zero-padding rows; vertical rhythm comes from the
- * Card's knob `gap`.
- */
-export type SurfaceTier = "content" | "elevated" | "feature";
-
-export interface CardProps extends TamaguiCardProps {
-  tier?: SurfaceTier;
-}
-
-function CardRoot({ children, tier = "content", ...props }: CardProps) {
-  const { knobProps } = useResolvedKnobs({ component: "Card" });
-  // Axiom 1 child-clip cap: the padded container's radius may not exceed its
-  // own inset. cardSurface carries the cap already; the elevated tier layers
-  // containerRadius over elevatedSurface (which other, row-owning overlays
-  // consume uncapped). The feature tier is a fixed Bento recipe (radius is
-  // not knob-driven), so the knob cap does not apply.
-  const tierProps =
-    tier === "elevated"
-      ? { ...knobProps.elevatedSurface, ...knobProps.containerRadius }
-      : tier === "feature"
-        ? knobProps.featureSurface
-        : knobProps.cardSurface;
-  // panelPadding first so tier recipes may override (feature uses a larger
-  // inset); elevatedSurface carries no padding of its own, so this is what
-  // keeps bare children off the border on that tier.
-  return (
-    <TamaguiCard {...knobProps.panelPadding} {...tierProps} {...knobProps.gap} {...props}>
-      <NestedScale density={knobProps.density}>{children}</NestedScale>
-    </TamaguiCard>
-  );
-}
-
-// padding={0} kills the tamagui size-variant default padding — the Card
-// frame already owns the inset (LC-09), so Header/Footer padding would
-// double it. heading/body/gap ride the nested scale of the Card children.
-export function CardHeader({ children, ...props }: ViewProps & { children?: ReactNode }) {
-  const { knobProps } = useResolvedKnobs({ component: "Card" });
-  return (
-    <TamaguiCard.Header padding={0} {...knobProps.heading} {...knobProps.gap} {...props}>
-      {children}
-    </TamaguiCard.Header>
-  );
-}
-
-export function CardFooter({ children, ...props }: ViewProps & { children?: ReactNode }) {
-  const { knobProps } = useResolvedKnobs({ component: "Card" });
-  return (
-    <TamaguiCard.Footer padding={0} {...knobProps.body} {...knobProps.gap} {...props}>
-      {children}
-    </TamaguiCard.Footer>
-  );
-}
-
-export const Card = withStaticProperties(CardRoot, {
-  Header: CardHeader,
-  Footer: CardFooter,
-});
+// Card / CardHeader / CardFooter live in ./Card (NestedScale only; no Tint — R12).
 
 // ── Dialog region context (DG-OVL-04) ───────────────────────────────────
 
@@ -132,7 +67,7 @@ export interface DialogRegionContextValue {
 }
 
 /**
- * `DialogContent` provides this automatically. Wrap custom dialog-like
+ * `DialogContent` and `AlertDialogContent` provide this automatically. Wrap custom dialog-like
  * surfaces (sheet-as-dialog, hand-rolled dialog chrome) so their action rows
  * inherit dialog rules such as the max-2-actions cap (DG-OVL-04).
  */
@@ -167,11 +102,42 @@ export const DialogContent = forwardRef<
   );
 });
 
+/**
+ * Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1,
+ * and not the `$2` fragment `elevatedSurface` carries either: that fragment's
+ * web paint arrives as an INLINE style (`elevationPaint` emits
+ * `style.boxShadow`, and Tamagui stamps `!important` only on pseudo atoms),
+ * so a shadow expressed only as `shadow*` props is a dead class atom under a
+ * live `$2` paint. The §8 value must land on the `style` prop too, replacing
+ * the fragment's. Dark inverts the hue and keeps the geometry — LC-85
+ * DARK-ELEVATION-TINT forbids a black umbra on a dark ground.
+ */
+const overlayElevationShadow = {
+  light: {
+    shadowColor: "rgba(0,0,0,0.12)",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 1,
+    shadowRadius: 24,
+    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(0,0,0,0.12)" } } : null),
+  },
+  dark: {
+    shadowColor: "rgba(255,255,255,0.12)",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 1,
+    shadowRadius: 24,
+    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(255,255,255,0.12)" } } : null),
+  },
+} as const;
+
 const DialogContentInner = forwardRef<
   TamaguiElement,
   TamaguiDialogContentProps & { children?: ReactNode }
 >(function DialogContentInner({ children, ...props }, ref) {
   const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
+  // ThemeableStack unstyled:false defaults `elevate: true`, which paints
+  // getElevation(size) — `$true` is the same $1 stop every Button carries.
+  // Bind the §8 overlay shadow instead. Geometry (panelPadding 18,
+  // containerRadius 9, border 1px) stays on the recipe fragments below.
   return (
     <Dialog.Content
       ref={ref}
@@ -179,6 +145,8 @@ const DialogContentInner = forwardRef<
       {...knobProps.containerRadius}
       {...knobProps.panelPadding}
       {...knobProps.gap}
+      elevate={false}
+      {...overlayElevationShadow[knobProps.scheme]}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}
@@ -226,6 +194,73 @@ export const DialogOverlay = forwardRef<
   );
 });
 
+// ── AlertDialogContent (MPO-21 G6) ───────────────────────────────────────
+// Tamagui's AlertDialog.Content is Dialog.Content under a different name:
+// the styled frame bakes `elevate: true` (plus bg/border/radius/padding).
+// `unstyled` drops that chrome so elevatedSurface is the only surface source.
+
+export const AlertDialogContent = forwardRef<
+  TamaguiElement,
+  TamaguiDialogContentProps & { children?: ReactNode }
+>(function AlertDialogContent({ children, ...props }, ref) {
+  return (
+    <Surface size="md">
+      <AlertDialogContentInner ref={ref} {...props}>
+        {children}
+      </AlertDialogContentInner>
+    </Surface>
+  );
+});
+
+const AlertDialogContentInner = forwardRef<
+  TamaguiElement,
+  TamaguiDialogContentProps & { children?: ReactNode }
+>(function AlertDialogContentInner({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs({ component: "AlertDialogContent" });
+  return (
+    <AlertDialog.Content
+      ref={ref}
+      unstyled
+      {...knobProps.elevatedSurface}
+      {...knobProps.containerRadius}
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      elevate={false}
+      {...overlayElevationShadow[knobProps.scheme]}
+      transition={knobProps.transition}
+      enterStyle={overlayEnterExit}
+      exitStyle={overlayEnterExit}
+      {...overlayFrameFocus}
+      focusStyle={overlayFrameFocusStyle}
+      focusVisibleStyle={overlayFrameFocusStyle}
+      {...props}
+    >
+      <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+        <NestedScale density={knobProps.density}>{children}</NestedScale>
+      </DialogRegionContext.Provider>
+    </AlertDialog.Content>
+  );
+});
+
+export const AlertDialogOverlay = forwardRef<
+  TamaguiElement,
+  TamaguiDialogOverlayProps & { children?: ReactNode }
+>(function AlertDialogOverlay({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <AlertDialog.Overlay
+      ref={ref}
+      backgroundColor="$shadow6"
+      transition={knobProps.transition}
+      enterStyle={scrimFade}
+      exitStyle={scrimFade}
+      {...props}
+    >
+      {children}
+    </AlertDialog.Overlay>
+  );
+});
+
 // ── PopoverContent ───────────────────────────────────────────────────────
 // OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): free popovers size to
 // content, start-aligned to their anchor with the shared gap (the caller's
@@ -256,15 +291,22 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
 );
 
 // ── SheetFrame ───────────────────────────────────────────────────────────
+// Overlay chrome (SF-OVERLAY / E-OVERLAY): elevatedSurface binds border +
+// elevation even at `none`. The modal scrim is not a substitute. Fill is
+// `$background` (scheme token — never an invented hex, and not the shared
+// recipe's `$color1`) so the sheet tracks the page. Motion driver lives on
+// the Frame; SheetModal also drives the Sheet root (LC-24).
 
 export const SheetFrame = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function SheetFrame({ children, ...props }, ref) {
     const { knobProps } = useResolvedKnobs({ component: "SheetFrame" });
     const frameProps = {
       ref,
-      ...knobProps.surface,
-      ...knobProps.borderRadius,
+      ...knobProps.elevatedSurface,
+      ...knobProps.containerRadius,
+      backgroundColor: "$background",
       ...knobProps.panelPadding,
+      transition: knobProps.transition,
       ...overlayFrameFocus,
       focusStyle: overlayFrameFocusStyle,
       focusVisibleStyle: overlayFrameFocusStyle,
@@ -314,9 +356,9 @@ export const Panel = forwardRef<TamaguiElement, ViewProps & { children?: ReactNo
 // These aliases keep old imports working; a later sweep removes them.
 
 /** @deprecated Use `CardProps` instead. */
-export type KnobCardProps = CardProps;
+export type { CardProps as KnobCardProps } from "./Card";
 /** @deprecated Use `Card` instead. */
-export const KnobCard = Card;
+export { Card as KnobCard } from "./Card";
 /** @deprecated Use `DialogContent` instead. */
 export const KnobDialogContent = DialogContent;
 /** @deprecated Use `PopoverContent` instead. */

package/src/tamagui.spec.ts

@@ -34,12 +34,19 @@ const EXCLUDED_BARE_NAMES = [
 ] as const;
 
 const ALLOWLIST_VALUE_NAMES = [
-  // layout
+  // layout. Separator left this list 2026-08-28 (MPO-47): a bare catalog name
+  // may not resolve to a raw primitive (LC-45 / LC-70), and the raw one is a
+  // `flex: 1` item that can absorb free space (DG-OVF-07). Bare `Separator` is
+  // the house painted rule in ./Separator; raw rides the TamaguiSeparator
+  // hatch. (It was silently restored here by the MPO-20 typography lane, which
+  // rewrote this file from a pre-MPO-47 copy — tamagui.ts and index.ts kept
+  // the house wiring, so this guardrail was asserting the opposite of the
+  // barrel and had been red ever since. MPO-78: CI runs `turbo run build`
+  // only, so nothing caught it.)
   "Circle",
   "Group",
   "ListItem",
   "ScrollView",
-  "Separator",
   "Spacer",
   "Square",
   "View",
@@ -47,25 +54,18 @@ const ALLOWLIST_VALUE_NAMES = [
   "XStack",
   "YGroup",
   "YStack",
-  // text
-  "Anchor",
-  "H1",
-  "H2",
-  "H3",
-  "H4",
-  "H5",
-  "H6",
-  "Heading",
-  "Paragraph",
-  "SizableText",
-  "Text",
+  // text: none left (MPO-20). The raw primitives were knob-dead on native
+  // and fontWeight/textAccent/pageTitleScale-dead everywhere — bare
+  // Text/SizableText/Paragraph/Anchor and Heading/H1–H6 are the house
+  // shadows in ./Text.tsx and ./Heading.tsx. Raw rides the TamaguiText /
+  // TamaguiHeading / TamaguiH1… escape hatches.
   // actions / feedback: none left. Button left this list 2026-08-13 (raw
   // primitive knob-dead, LC-18 — bare `Button` is the house shadow in
   // ./Button.tsx); Spinner followed the same day (LC-70 census: raw Spinner
   // spins at animation "none" — bare `Spinner` is the forms house version).
   // Raw rides the TamaguiButton / TamaguiSpinner escape hatches.
-  // overlay composition roots
-  "Adapt",
+  // overlay composition roots — Adapt is dropped (R9 G8); compact vs
+  // regular overlays use useViewportGtSm / AdaptivePopup / FloatingPanel.
   "AlertDialog",
   "Dialog",
   "Popover",
@@ -96,29 +96,53 @@ const ALLOWLIST_VALUE_NAMES = [
 ] as const;
 
 const ESCAPE_HATCHES: ReadonlyArray<[prefixed: string, raw: string]> = [
+  ["TamaguiAnchor", "Anchor"],
   ["TamaguiButton", "Button"],
   ["TamaguiCheckbox", "Checkbox"],
+  ["TamaguiH1", "H1"],
+  ["TamaguiH2", "H2"],
+  ["TamaguiH3", "H3"],
+  ["TamaguiH4", "H4"],
+  ["TamaguiH5", "H5"],
+  ["TamaguiH6", "H6"],
+  ["TamaguiHeading", "Heading"],
   ["TamaguiInput", "Input"],
   ["TamaguiLabel", "Label"],
+  ["TamaguiParagraph", "Paragraph"],
   ["TamaguiProgress", "Progress"],
   ["TamaguiRadioGroup", "RadioGroup"],
   ["TamaguiSelect", "Select"],
+  ["TamaguiSeparator", "Separator"],
+  ["TamaguiSizableText", "SizableText"],
   ["TamaguiSlider", "Slider"],
   ["TamaguiSpinner", "Spinner"],
   ["TamaguiSwitch", "Switch"],
+  ["TamaguiText", "Text"],
   ["TamaguiTextArea", "TextArea"],
   ["TamaguiToggleGroup", "ToggleGroup"],
 ];
 
 const HOUSE_SHADOWS = [
+  "Anchor",
   "Avatar",
   "Button",
   "Card",
   "Fieldset",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "Heading",
   "Image",
   "Menu",
+  "Paragraph",
+  "Separator",
+  "SizableText",
   "Spinner",
   "Tabs",
+  "Text",
   "Toast",
   "Tooltip",
 ];
@@ -164,6 +188,23 @@ describe("curated tamagui surface", () => {
       }
     }
   });
+
+  it("does not export Adapt (R9 G8 DROP)", () => {
+    expect(
+      (pkg as Record<string, unknown>).Adapt,
+      "Adapt is off the house barrel; useViewportGtSm / AdaptivePopup / FloatingPanel",
+    ).toBeUndefined();
+  });
+
+  it("keeps overlay composition roots Dialog, Sheet, Popover, and Portal", () => {
+    for (const name of ["Dialog", "Sheet", "Popover", "Portal"] as const) {
+      expect((pkg as Record<string, unknown>)[name], `barrel must keep "${name}"`).toBeDefined();
+      expect(
+        (pkg as Record<string, unknown>)[name],
+        `barrel "${name}" must be the tamagui export`,
+      ).toBe((tamagui as Record<string, unknown>)[name]);
+    }
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -184,6 +225,8 @@ type _NoSelectProps = import("./index").SelectProps;
 type _NoSliderProps = import("./index").SliderProps;
 // @ts-expect-error LabelProps is intentionally not exported (house: forms)
 type _NoLabelProps = import("./index").LabelProps;
+// @ts-expect-error Adapt is dropped from the house barrel (R9 G8)
+type _NoAdapt = import("./index").Adapt;
 
 type _HasViewProps = import("./index").ViewProps;
 type _HasXStackProps = import("./index").XStackProps;

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): a bare catalog name may not
+// resolve to a raw primitive (LC-45 / LC-70), and the raw one is a `flex: 1`
+// item that can absorb free space (DG-OVF-07). 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();
+    });
+  });
 });