@multiplatform.one/theme 7.90.5 → 8.0.0

package/src/theme/Surface.tsx

@@ -22,11 +22,6 @@ export type SurfaceSize = SizeTokens | "unset";
  * is part of the field: a bare tinted glyph, never glass or a plate, even when
  * the field sits in a bar (LC-176, FZ-8711). Any explicit `painted` resets it,
  * so a menu opened from that glyph is content again.
- *
- * `topBar`: the bar is the page's top bar (a navigation bar, a page header's
- * actions), not an overlay's header, so a confirm there is a bar glyph like
- * back and "…", never the overlay's filled ✓ (LC-176, FZ-8989). Any explicit
- * `bar` or `painted` resets it, so a sheet's own header bar is not a top bar.
  */
 export type SurfaceIntent = {
   size: SurfaceSize;
@@ -34,7 +29,6 @@ export type SurfaceIntent = {
   bar: boolean;
   elevated: boolean;
   field: boolean;
-  topBar: boolean;
 };
 
 export const SurfaceContext = createStyledContext<SurfaceIntent>({
@@ -43,7 +37,6 @@ export const SurfaceContext = createStyledContext<SurfaceIntent>({
   bar: false,
   elevated: false,
   field: false,
-  topBar: false,
 });
 
 /** True inside a bar (LC-153): neutral buttons there are plain, not tinted. */
@@ -56,11 +49,6 @@ export function useFieldSurface(): boolean {
   return SurfaceContext.useStyledContext().field ?? false;
 }
 
-/** True inside the page's top bar (LC-176): a confirm there is a bar glyph, not the overlay's ✓ plate. */
-export function useTopBarSurface(): boolean {
-  return SurfaceContext.useStyledContext().topBar ?? false;
-}
-
 /** True on an elevated ground (an overlay frame, an unnested Panel): controls step their wash up in dark. */
 export function useElevatedSurface(): boolean {
   return SurfaceContext.useStyledContext().elevated ?? false;
@@ -145,9 +133,7 @@ export function clampSurfaceSize(requested: SurfaceSize, parent: SurfaceSize): S
  * inherits it. `bar` marks a bar subtree (LC-153); omitted, it inherits unless
  * `painted` is given, which resets it. `elevated` marks a frame that paints
  * the elevated ground; omitted it inherits unless `painted` is given, which
- * resets it. `field` marks a text field's frame the same way. `topBar` marks
- * the page's top bar; omitted it inherits unless `bar` or `painted` is given,
- * which resets it. Either way a
+ * resets it. `field` marks a text field's frame the same way. Either way a
  * painted value opens a new surface with its own
  * inset, so the page gutter does not reach inside it (LC-146).
  *
@@ -160,7 +146,6 @@ export function Surface({
   bar,
   elevated,
   field,
-  topBar,
   children,
 }: {
   size?: SizeTokens;
@@ -168,7 +153,6 @@ export function Surface({
   bar?: boolean;
   elevated?: boolean;
   field?: boolean;
-  topBar?: boolean;
   children?: ReactNode;
 }) {
   const parent = SurfaceContext.useStyledContext();
@@ -177,8 +161,6 @@ export function Surface({
   const nextBar = bar ?? (painted === undefined ? (parent.bar ?? false) : false);
   const nextElevated = elevated ?? (painted === undefined ? (parent.elevated ?? false) : false);
   const nextField = field ?? (painted === undefined ? (parent.field ?? false) : false);
-  const nextTopBar =
-    topBar ?? (painted === undefined && bar === undefined ? (parent.topBar ?? false) : false);
   return (
     <SurfaceContext.Provider
       size={nextSize}
@@ -186,7 +168,6 @@ export function Surface({
       bar={nextBar}
       elevated={nextElevated}
       field={nextField}
-      topBar={nextTopBar}
     >
       {painted === undefined ? children : <PageGutter inset={null}>{children}</PageGutter>}
     </SurfaceContext.Provider>

package/src/theme/devtools/ColorLineVisualizer.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /**
  * Color palette visualizer for devtools.
  *

package/src/theme/devtools/ThemeDevtoolsPanel.tsx

@@ -372,7 +372,7 @@ function PinCheckbox({
 }) {
   return (
     <label
-      title={pinned ? "Pinned — random won't change this" : "Pin to protect from random"}
+      title={pinned ? "Pinned. Random won't change this" : "Pin to protect from random"}
       style={{
         position: "absolute" as const,
         top: 3,

package/src/theme/devtools/index.ts

@@ -0,0 +1,14 @@
+/**
+ * The theme devtools pieces that load without tamagui or React Native: knob
+ * definitions, knob icons, the snapshot builder and the colour-line
+ * visualizer. Exported as `@multiplatform.one/theme/devtools` for hosts such
+ * as the Storybook manager frame, which renders outside TamaguiProvider.
+ * ThemeDevtoolsPanel needs tamagui, so it stays on the package root.
+ */
+
+export * from "../knobs";
+export * from "../motionStops";
+export * from "./knobIcons";
+export * from "./buildSnapshot";
+export * from "./ColorLineVisualizer";
+export * from "./vizConstants";

package/src/theme/devtools/knobIcons.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 import React, { type ReactNode } from "react";
 
 /**

package/src/theme/mpo19Proof.spec.ts

@@ -279,9 +279,4 @@ describe("MPO-19 X12 — the nested radius is named for what it resolves to", ()
       expect(nested, `borderRadius: ${knob}`).toBeLessThanOrEqual(outer);
     }
   });
-
-  it("the old name is the SAME object, so the two cannot drift while both exist", () => {
-    const props = knobProps();
-    expect(props.borderRadiusOuter).toBe(props.borderRadiusNested);
-  });
 });

package/src/theme/nativePresetSwitch.ts

@@ -0,0 +1,32 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { usePresetContext } from "./PresetContext";
+import {
+  getStoredPreset,
+  recordPresetChoice,
+  setStoredPreset,
+  subscribeStoredPreset,
+} from "./presetStore";
+
+export interface PresetSwitch {
+  /** The provider's active preset; "default" when none is stored. */
+  presetName: string;
+  /** Switch the active preset without recording anyone's choice. */
+  applyPreset(name: string): void;
+  /** Switch and record it as this user's choice (no user = this device's signed-out choice). */
+  choosePreset(name: string, userId?: string | null): void;
+}
+
+export function usePresetSwitch(): PresetSwitch {
+  const context = usePresetContext();
+  const stored = useSyncExternalStore(subscribeStoredPreset, getStoredPreset, getStoredPreset);
+  const presetName = context?.presetName || stored.presetName || "default";
+  const applyPreset = useCallback((name: string) => setStoredPreset(name), []);
+  const choosePreset = useCallback(
+    (name: string, userId?: string | null) => {
+      recordPresetChoice(name, userId);
+      applyPreset(name);
+    },
+    [applyPreset],
+  );
+  return { presetName, applyPreset, choosePreset };
+}

package/src/theme/nativeSchemePreference.ts

@@ -0,0 +1,58 @@
+import { useEffect, useSyncExternalStore } from "react";
+import { Appearance } from "react-native";
+import { useDidFinishSSR } from "tamagui";
+import { isWeb } from "@multiplatform.one/platform";
+import { getStoredScheme, setStoredScheme, subscribeStoredScheme } from "./schemeStore";
+import type { ThemeScheme } from "./useTheme";
+
+export interface SchemePreference {
+  setting: ThemeScheme;
+  value: "light" | "dark";
+  set(scheme: ThemeScheme): void;
+}
+const serverScheme = (): ThemeScheme => "system";
+
+// RN's Appearance.setColorScheme("unspecified") writes "unspecified" into the
+// JS cache that getColorScheme/useColorScheme read, with no change event, so
+// System resolved light until the OS flipped (FZ-8708). The native scheme is
+// read once before the first override and then only from change events.
+let nativeScheme: "light" | "dark" | undefined;
+const nativeListeners = new Set<() => void>();
+
+function getNativeScheme(): "light" | "dark" {
+  if (nativeScheme === undefined) {
+    nativeScheme = Appearance.getColorScheme() === "dark" ? "dark" : "light";
+    Appearance.addChangeListener(({ colorScheme }) => {
+      if ((colorScheme !== "light" && colorScheme !== "dark") || colorScheme === nativeScheme) {
+        return;
+      }
+      nativeScheme = colorScheme;
+      nativeListeners.forEach((listener) => listener());
+    });
+  }
+  return nativeScheme;
+}
+
+function subscribeNativeScheme(listener: () => void) {
+  getNativeScheme();
+  nativeListeners.add(listener);
+  return () => {
+    nativeListeners.delete(listener);
+  };
+}
+
+export function useSchemePreference(): SchemePreference {
+  const setting = useSyncExternalStore(subscribeStoredScheme, getStoredScheme, serverScheme);
+  const os = useSyncExternalStore(subscribeNativeScheme, getNativeScheme, getNativeScheme);
+  const hydrated = useDidFinishSSR();
+  useEffect(() => {
+    if (isWeb) return;
+    getNativeScheme();
+    Appearance.setColorScheme(setting === "system" ? "unspecified" : setting);
+  }, [setting]);
+  return {
+    setting: hydrated ? setting : "system",
+    value: !hydrated ? "light" : setting === "system" ? os : setting,
+    set: setStoredScheme,
+  };
+}

package/src/theme/nativeTheme.tsx

@@ -0,0 +1,113 @@
+import { ToastProvider } from "@tamagui/toast";
+import { Fragment, useContext, useMemo, useSyncExternalStore } from "react";
+import {
+  type CreateTamaguiProps,
+  TamaguiProvider,
+  type TamaguiProviderProps,
+  Theme,
+} from "tamagui";
+import type { PropsWithChildren } from "react";
+import { CornerSmoothingStyles } from "./cornerSmoothing";
+import { FontKnobStyles } from "./FontKnobStyles";
+import type { Knobs } from "./knobs";
+import { PresetContext, type PresetContextValue } from "./PresetContext";
+import { getStoredPreset, subscribeStoredPreset } from "./presetStore";
+import { defaultPreset } from "./presets";
+import { resolveThemeScale, useActiveScale } from "./scale/useActiveScale";
+import { type ThemeConfig, getPreset } from "./shared";
+import { useSchemePreference } from "./useSchemePreference";
+
+// ---------------------------------------------------------------------------
+// ThemeProviderProps (simplified — knob-based theming)
+// ---------------------------------------------------------------------------
+
+export interface ThemeProviderProps<
+  T extends CreateTamaguiProps = CreateTamaguiProps,
+> extends PropsWithChildren<Omit<TamaguiProviderProps, "config" | "defaultTheme">> {
+  config?: {
+    tamagui: ReturnType<typeof import("tamagui").createTamagui<T>>;
+  } & Partial<Pick<ThemeConfig, "scales" | "defaultPreset">>;
+  systemTheme?: "light" | "dark";
+}
+
+// ---------------------------------------------------------------------------
+// ThemeProvider (simplified — TamaguiProvider + scheme + ToastProvider)
+// ---------------------------------------------------------------------------
+
+/**
+ * Native resolves token values (`.val`) at render and only theme subscribers
+ * re-render on a config change, so a preset whose scale differs remounts the
+ * subtree under the provider (keyed on the scale id). That is a settings-level
+ * action: local component state under the provider does not survive it.
+ * The preset persists in `@multiplatform.one/store` storage (`mp.preset`);
+ * first render waits for storage so a relaunch paints the stored scale.
+ */
+export function ThemeProvider<T extends CreateTamaguiProps>({
+  children,
+  config,
+  systemTheme,
+  ...tamaguiProps
+}: ThemeProviderProps<T>) {
+  const scheme = useSchemePreference();
+  const activeTheme = systemTheme ?? scheme.value;
+  const ancestor = useContext(PresetContext);
+  const stored = useSyncExternalStore(subscribeStoredPreset, getStoredPreset, getStoredPreset);
+  const presetName = (ancestor ? ancestor.presetName : stored.presetName) ?? config?.defaultPreset;
+  const scaleId = useActiveScale(config, presetName);
+  const scaleConfig = resolveThemeScale(config, presetName)?.tamagui() ?? config?.tamagui;
+
+  return (
+    <TamaguiProvider
+      {...tamaguiProps}
+      config={scaleConfig as TamaguiProviderProps["config"]}
+      defaultTheme={activeTheme}
+      disableInjectCSS={false}
+    >
+      {ancestor || stored.hydrated ? (
+        <Fragment key={scaleId}>
+          <ToastProvider>
+            <KnobBridge presetName={presetName} overrides={stored.overrides} scaleId={scaleId}>
+              {children}
+            </KnobBridge>
+          </ToastProvider>
+        </Fragment>
+      ) : null}
+    </TamaguiProvider>
+  );
+}
+
+function KnobBridge({
+  children,
+  presetName,
+  overrides,
+  scaleId,
+}: PropsWithChildren<{ presetName?: string; overrides: Partial<Knobs>; scaleId: string }>) {
+  const existingCtx = useContext(PresetContext);
+
+  const presetCtxValue = useMemo<PresetContextValue>(() => {
+    const base = (presetName ? getPreset(presetName) : undefined) ?? defaultPreset;
+    return {
+      preset: { ...base, knobs: { ...base.knobs, ...overrides } },
+      overrides,
+      presetName,
+      scaleId,
+    };
+  }, [presetName, overrides, scaleId]);
+
+  const tree = (
+    <>
+      <FontKnobStyles />
+      <CornerSmoothingStyles />
+      {children}
+    </>
+  );
+
+  const theme = (existingCtx ?? presetCtxValue).preset.theme;
+  const themedTree = theme ? <Theme name={theme}>{tree}</Theme> : tree;
+
+  if (existingCtx) {
+    return themedTree;
+  }
+
+  return <PresetContext.Provider value={presetCtxValue}>{themedTree}</PresetContext.Provider>;
+}

package/src/theme/nativeTransitionProps.ts

@@ -0,0 +1,74 @@
+import type { MotionRole } from "./motion";
+import type { TransitionProp } from "tamagui";
+import { animationConfig as nativeAnimationConfig } from "./animations/reactNative";
+
+/**
+ * Native twin of `transitionProps.ts`.
+ *
+ * The React Native driver resolves an undefined `transition` to an empty
+ * config and animates with a default spring (LC-59), so keeping the key at
+ * animation `none` would put motion on every part that is meant to be still.
+ * Native keeps omitting it until the driver has an instant token to pass.
+ */
+export function transitionProps(
+  role: MotionRole | TransitionProp | undefined,
+  extra: readonly string[] = [],
+): {
+  transition?: TransitionProp;
+  animateOnly?: string[];
+} {
+  const isRole = isMotionRole(role);
+  const transition = isRole ? role.transition : role;
+  if (transition === undefined) return {};
+  if (!isRole) return { transition };
+  const properties = [...role.animateOnly, ...extra].flatMap(
+    (property) => nativeLonghands[property] ?? [property],
+  );
+  if (typeof transition !== "string") return { transition, animateOnly: properties };
+  const exit = typeof role.exit === "string" && role.exit !== transition ? role.exit : undefined;
+  const clamp = isSpring(transition) && !presetBounce.has(transition);
+  if (!exit && !clamp) return { transition, animateOnly: properties };
+  return {
+    transition: [
+      transition,
+      { ...(clamp ? { overshootClamping: true } : {}), ...(exit ? { exit } : {}) },
+    ],
+    animateOnly: properties,
+  };
+}
+
+function isSpring(stop: string): boolean {
+  const config = nativeAnimationConfig[stop as keyof typeof nativeAnimationConfig] as
+    | { type?: string }
+    | undefined;
+  return config !== undefined && config.type !== "timing";
+}
+
+/**
+ * FZ-7919: tamagui expands `borderColor` into its four sides before the React
+ * Native driver sees the style, and the driver matches `animateOnly` by exact
+ * key. A render therefore painted the sides as static, while a pseudo state
+ * (the bubbled focus of a field's text input) animated them. The animated
+ * copy outranked the static one and held the previous focus or theme colour.
+ */
+const presetBounce = new Set(["bouncy", "superBouncy"]);
+
+const nativeLonghands: Record<string, readonly string[]> = {
+  borderColor: [
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+  ],
+};
+
+function isMotionRole(value: MotionRole | TransitionProp | undefined): value is MotionRole {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "transition" in value &&
+    "animateOnly" in value &&
+    Array.isArray(value.animateOnly)
+  );
+}

package/src/theme/recipeInputs.ts

@@ -32,8 +32,6 @@ export { SIZE_RECIPE_TOKENS, SIZE_TOKEN_EXPONENTS } from "./scale/scaleInputs";
 export type { SizeRecipeToken } from "./scale/scaleInputs";
 
 export type SizeRecipeFamilyName = "control" | "chip" | "menuRow" | "tab";
-/** @deprecated Use `SizeRecipeFamilyName`. */
-export type RecipeFamilyName = SizeRecipeFamilyName;
 
 export type SizeRecipeRatios = {
   padX: number;
@@ -99,9 +97,6 @@ export type SizeRecipeInputs = {
   tile?: Partial<TileSizeInputs>;
 };
 
-/** @deprecated Use `SizeRecipeInputs`. */
-export type RecipeInputs = SizeRecipeInputs;
-
 export type SizeRecipe = {
   height: number;
   paddingHorizontal: number;

package/src/theme/recipes.ts

@@ -4,7 +4,6 @@ import type {
   FontLetterSpacingTokens,
   FontLineHeightTokens,
   FontSizeTokens,
-  TransitionProp,
 } from "tamagui";
 import type { Knobs } from "./knobs";
 import type { HitSlopInsets } from "./layoutTokens";
@@ -186,12 +185,9 @@ export interface KnobProps {
    *
    * MPO-19 X12 (00 L9c): this was `borderRadiusOuter`, which named the
    * opposite of what it resolves to — every one of its consumers uses it for
-   * inner chrome, so the name told each of them the wrong story. Renamed;
-   * `borderRadiusOuter` stays as a deprecated alias for one release.
+   * inner chrome, so the name told each of them the wrong story. Renamed.
    */
   borderRadiusNested: { borderRadius: string } & CornerSmoothingCarrier;
-  /** @deprecated MPO-19 X12 — use `borderRadiusNested`. Removed after one release. */
-  borderRadiusOuter: { borderRadius: string } & CornerSmoothingCarrier;
   /**
    * A FILLED control's border. Same width as the outlined one, so switching
    * fill style never moves a layout by 2px, but `transparent` — which is what
@@ -380,8 +376,6 @@ export interface KnobProps {
   };
   textWeight: { fontWeight: string };
   motion: Record<MotionRoleName, MotionRole>;
-  /** @deprecated read a role from knobProps.motion */
-  transition: TransitionProp | undefined;
   outlined: boolean;
   pointy: boolean;
   textAccent: string;

package/src/theme/resolveKnobs.spec.ts

@@ -65,7 +65,6 @@ const defaultScaleTokens = generateScale(defaultScaleInputs).tokens;
 const expectedKnobPropKeys: (keyof KnobProps)[] = [
   "borderRadius",
   "borderRadiusNested",
-  "borderRadiusOuter",
   "containerRadius",
   "fieldRadius",
   "elevation",
@@ -99,7 +98,6 @@ const expectedKnobPropKeys: (keyof KnobProps)[] = [
   "body",
   "typography",
   "textWeight",
-  "transition",
   "outlined",
   "pointy",
   "textAccent",
@@ -1349,14 +1347,13 @@ describe("resolveKnobs", () => {
   // ── animation ─────────────────────────────────────────────
 
   describe("animation knob", () => {
-    it("resolves each role while keeping the deprecated control alias", () => {
+    it("resolves each role", () => {
       const { knobProps } = resolveKnobs(knobsWith({ animation: "quick" }));
       expect(knobProps.motion.control.transition).toBe("quick");
       expect(knobProps.motion.overlay.transition).toBe("quicker");
       expect(knobProps.motion.scrim.transition).toBe("slow");
       expect(knobProps.motion.reveal.transition).toBe("medium");
       expect(knobProps.motion.slide.transition).toBe("medium");
-      expect(knobProps.transition).toBe(knobProps.motion.control.transition);
       for (const role of Object.values(
         resolveKnobs(knobsWith({ animation: "none" })).knobProps.motion,
       ))
@@ -1364,17 +1361,17 @@ describe("resolveKnobs", () => {
     });
     it('"none" → transition is undefined', () => {
       const { knobProps } = resolveKnobs(knobsWith({ animation: "none" }));
-      expect(knobProps.transition).toBeUndefined();
+      expect(knobProps.motion.control.transition).toBeUndefined();
     });
 
     it('"bouncy" → transition is "bouncy"', () => {
       const { knobProps } = resolveKnobs(knobsWith({ animation: "bouncy" }));
-      expect(knobProps.transition).toBe("bouncy");
+      expect(knobProps.motion.control.transition).toBe("bouncy");
     });
 
     it('"quick" → transition is "quick"', () => {
       const { knobProps } = resolveKnobs(knobsWith({ animation: "quick" }));
-      expect(knobProps.transition).toBe("quick");
+      expect(knobProps.motion.control.transition).toBe("quick");
     });
   });
 

package/src/theme/resolveKnobs.ts

@@ -869,10 +869,6 @@ export function resolveKnobs(
       ...scaleSmoothing,
     },
     borderRadiusNested: nestedRadius,
-    // MPO-19 X12: the old name for the same fragment, kept for one release so
-    // an out-of-tree consumer does not break on the rename. Same object, so
-    // the two cannot drift while both exist.
-    borderRadiusOuter: nestedRadius,
     controlBorderFilled: { borderColor: "transparent", borderWidth: borderWidthValue },
     controlBorderOutlined: {
       borderColor: edge("$borderColor", Math.max(borderWidthValue, 1)),
@@ -992,7 +988,6 @@ export function resolveKnobs(
     },
     textWeight: { fontWeight: fontWeightValue },
     motion,
-    transition: motion.control.transition,
     outlined,
     pointy: knobs.borderRadius === "none",
     textAccent: knobs.textAccent,

package/src/theme/shared.tsx

@@ -3,7 +3,7 @@ import { type CreateTamaguiProps, createTamagui } from "tamagui";
 import type { Knobs } from "./knobs";
 import { defaultKnobs } from "./knobs";
 import type { Preset } from "./preset.types";
-import type { RecipeFamilies, RecipeInputs } from "./recipeInputs";
+import type { RecipeFamilies, SizeRecipeInputs } from "./recipeInputs";
 import type { ScaleFonts } from "./scale/generateScale";
 import { type ThemeScale, buildThemeScales } from "./scale/themeScales";
 
@@ -90,7 +90,7 @@ export type ThemeConfig<T extends CreateTamaguiProps = CreateTamaguiProps> = {
    * Size-recipe inputs + generated families (LC-70). Orthogonal to Tamagui
    * `themes` (those are color palettes from createThemes / theme-builder).
    */
-  recipeInputs?: RecipeInputs;
+  recipeInputs?: SizeRecipeInputs;
   recipeFamilies?: RecipeFamilies;
   /**
    * The token scales this config can switch to at runtime, keyed by preset
@@ -106,7 +106,7 @@ export interface ThemeConfigScaleOptions {
   /** The font map a scale's type tables produce. */
   fonts: (tables: ScaleFonts) => Record<string, GenericFont>;
   /** Consumer recipe overrides that are not scale-derived (tile ladder, touch floor). */
-  recipeOverrides?: Partial<RecipeInputs>;
+  recipeOverrides?: Partial<SizeRecipeInputs>;
 }
 
 /**
@@ -148,7 +148,7 @@ export function createThemeConfig<T extends CreateTamaguiProps>(
   options?: {
     presets?: Record<string, Preset>;
     defaultPreset?: string;
-    recipeInputs?: RecipeInputs;
+    recipeInputs?: SizeRecipeInputs;
     recipeFamilies?: RecipeFamilies;
     scale?: ThemeConfigScaleOptions;
   },

package/src/theme/sizeLadder.spec.ts

@@ -3,7 +3,6 @@ import { defaultScaleInputs } from "./scale/scaleInputs";
 import { describe, expect, it } from "vitest";
 import {
   DEFAULT_SIZE_RECIPE_INPUTS,
-  SIZE_RECIPE_RADII,
   SIZE_RECIPE_RADIUS_STOPS,
   applyRadiusStop,
   generateSizeRecipes,
@@ -25,7 +24,7 @@ describe("MPO-46 size ladder — generated table, not a ratio (R6)", () => {
       expect(recipe.paddingHorizontal, `${token} padX`).toBe(row.paddingHorizontal);
       expect(recipe.fontSize, `${token} label`).toBe(row.fontSize);
       expect(recipe.iconSize, `${token} icon`).toBe(row.iconSize);
-      expect(SIZE_RECIPE_RADII[token], `${token} radius`).toBe(row.radius);
+      expect(recipeFamilies.control.radii[token], `${token} radius`).toBe(row.radius);
       expect(DEFAULT_SIZE_RECIPE_INPUTS.tokenTable[token]).toEqual(row);
     }
   });
@@ -34,15 +33,15 @@ describe("MPO-46 size ladder — generated table, not a ratio (R6)", () => {
     const two = sizeRecipeForToken("$2");
     expect(two.paddingHorizontal).not.toBe(11);
     expect(two.fontSize).not.toBe(9);
-    expect(SIZE_RECIPE_RADII.$2).not.toBe(9);
-    expect(SIZE_RECIPE_RADII.$2).not.toBe(SIZE_RECIPE_RADII.$6);
+    expect(recipeFamilies.control.radii.$2).not.toBe(9);
+    expect(recipeFamilies.control.radii.$2).not.toBe(recipeFamilies.control.radii.$6);
   });
 
   it("Button / Select trigger / ListItem $4 is 40 / padX 16 / radius 8; Input padX is 14", () => {
     const button = sizeRecipes.$4;
     expect(button.height).toBe(40);
     expect(button.paddingHorizontal).toBe(16);
-    expect(SIZE_RECIPE_RADII.$4).toBe(8);
+    expect(recipeFamilies.control.radii.$4).toBe(8);
     expect(DEFAULT_SIZE_RECIPE_INPUTS.inputPadX.$4).toBe(14);
     expect(recipeFamilies.chip.recipes.$4.paddingHorizontal).toBe(14);
     expect(recipeFamilies.chip.recipes.$4.height).toBe(40);