@multiplatform.one/theme 7.4.1 → 7.5.0

package/src/theme/radiusClassTable.generated.ts

@@ -0,0 +1,121 @@
+/**
+ * GENERATED from docs/design-guidelines.md §13 "Radius resolution" (DG-RAD-01..05)
+ * by scripts/radius-class-registry.mjs — DO NOT EDIT BY HAND.
+ *
+ * Regenerate: node scripts/radius-class-registry.mjs --emit
+ * Verify:     node scripts/radius-class-registry.mjs --check
+ *
+ * The doctrine is the source; this module is the resolver's copy of it. Editing the
+ * resolution here instead of in the doctrine is exactly the drift the generator exists
+ * to prevent (the same contract as scripts/radius-identity-registry.mjs).
+ */
+
+export const RADIUS_RESOLUTION_STOPS = ["none", "small", "medium", "large", "full"] as const;
+
+/** The `borderRadius` knob stops as the doctrine table spells them. */
+export type RadiusResolutionStop = (typeof RADIUS_RESOLUTION_STOPS)[number];
+
+/**
+ * One doctrine table cell. `px` is a literal resolved radius; `half-height` is the
+ * part's own painted height over two (a true circle/pill); `min-token-padding` and
+ * `padding` are the CONTAINER-CAP spellings (Axiom 1 CLIP: never exceed own padding).
+ */
+export type RadiusResolutionCell =
+  | { readonly kind: "px"; readonly px: number }
+  | { readonly kind: "half-height" }
+  | { readonly kind: "min-token-padding"; readonly tokenPx: number }
+  | { readonly kind: "padding" };
+
+export type RadiusResolutionRow = Readonly<Record<RadiusResolutionStop, RadiusResolutionCell>>;
+
+/** DG-RAD-01..04 — resolved radius per class per stop. */
+export const RADIUS_RESOLUTION_TABLE = {
+  DEFAULT: {
+    none: { kind: "px", px: 0 },
+    small: { kind: "px", px: 5 },
+    medium: { kind: "px", px: 9 },
+    large: { kind: "px", px: 16 },
+    full: { kind: "px", px: 50 },
+  },
+  "CIRCULAR-AT-FULL": {
+    none: { kind: "px", px: 0 },
+    small: { kind: "px", px: 5 },
+    medium: { kind: "px", px: 9 },
+    large: { kind: "px", px: 16 },
+    full: { kind: "half-height" },
+  },
+  BINARY: {
+    none: { kind: "px", px: 0 },
+    small: { kind: "half-height" },
+    medium: { kind: "half-height" },
+    large: { kind: "half-height" },
+    full: { kind: "half-height" },
+  },
+  "CONTAINER-CAP": {
+    none: { kind: "px", px: 0 },
+    small: { kind: "min-token-padding", tokenPx: 5 },
+    medium: { kind: "min-token-padding", tokenPx: 9 },
+    large: { kind: "min-token-padding", tokenPx: 16 },
+    full: { kind: "padding" },
+  },
+} as const satisfies Record<string, RadiusResolutionRow>;
+
+/** A part is in exactly one class; DEFAULT unless the doctrine assigns otherwise. */
+export type RadiusResolutionClass = keyof typeof RADIUS_RESOLUTION_TABLE;
+
+export interface RadiusOverrideEntry {
+  /** the component name as the doctrine's override table spells it */
+  readonly component: string;
+  readonly cells: RadiusResolutionRow;
+  /** the recorded reason the class would destroy meaning (the DG-RAD-05 bar) */
+  readonly why: string;
+}
+
+/**
+ * DG-RAD-05 — declared per-component overrides. A row here WINS over the part's
+ * resolution class, and sweeps PASS these measurements instead of flagging them.
+ */
+export const RADIUS_OVERRIDE_TABLE: readonly RadiusOverrideEntry[] = [
+  {
+    component: "Checkbox",
+    cells: {
+      none: { kind: "px", px: 0 },
+      small: { kind: "px", px: 5 },
+      medium: { kind: "px", px: 5 },
+      large: { kind: "px", px: 5 },
+      full: { kind: "px", px: 5 },
+    },
+    why: "CIRCULAR-AT-FULL kin by shape (20×20), but a circular checkbox reads as a radio — a semantic collision. Clamped at `$2` = 5, never h/2 (R2b DECIDED 2026-08-28: \"NO. Checkbox never becomes full circle.\")",
+  },
+  {
+    component: "Radio disc",
+    cells: {
+      none: { kind: "half-height" },
+      small: { kind: "half-height" },
+      medium: { kind: "half-height" },
+      large: { kind: "half-height" },
+      full: { kind: "half-height" },
+    },
+    why: "R2b inverted: a square radio reads as a checkbox — the identical collision, mirrored. The disc's circle IS its meaning, so it stays round at every stop including `none` (R2c DECIDED 2026-08-28: always round — identity)",
+  },
+];
+
+/**
+ * The resolver's layering, as doctrine spells it: a declared knob-immunity
+ * (R-PILL / R-IDENTITY, LC-60/D-09) wins, then a declared override, then the class.
+ */
+export const RADIUS_RESOLUTION_COMPOSITION = ["immunity", "override", "class"] as const;
+
+export interface OpenRadiusAdjudication {
+  readonly id: string;
+  readonly text: string;
+}
+
+/**
+ * Adjudications still open (MPO-56 AC-6): sweeps must EXCLUDE these parts
+ * from cell assertions and REPORT the exclusion — never silently skip it.
+ * An empty list is the closed state (R2 leftovers closed by RULINGS-2026-08-28).
+ */
+export const OPEN_RADIUS_ADJUDICATIONS: readonly OpenRadiusAdjudication[] = [
+
+];

package/src/theme/recipeInputs.ts

@@ -1,19 +1,20 @@
 /**
- * Size-recipe INPUTS (LC-70 RECIPE-INPUTS).
+ * Size-recipe INPUTS (LC-80 RECIPE-INPUTS).
  *
- * Stored numbers are the source of truth. Tables (heights, recipes,
- * box/type/icon variants, touch heights) are DERIVED — never handwritten.
- * Radius is stored on inputs (`radiusPx`) and MUST NOT appear on recipes
- * or variants; it stays on the borderRadius knob.
+ * Stored numbers are the source of truth. Derived projections (heights,
+ * recipes, box/type/icon variants, touch heights, radii) are never
+ * handwritten at a call site. The DEFAULT ladder is the measured Tamagui
+ * v5 table (`tokenTable`): padX / font / icon / radius per size token,
+ * gap == radius at every stop. A linear ratio is only the fallback when
+ * a theme sets `{ baseHeight }` and drops the table — it is not the
+ * default ladder and is not a signed-off divergence (MPO-46 / R6).
+ *
+ * Radius steps with the size token. The borderRadius knob is an override
+ * that retargets gap through `applyRadiusStop` (gap == radius at every
+ * knob stop too). `radiusPx` on inputs is the $4 / medium default (9).
  *
  * Tamagui `createThemes` / theme-builder still emits COLOR palettes only.
  * Do not stuff recipe keys into `getTheme()` / `themes`.
- *
- * DEFAULT uses `tokenHeights` pinned to the stock Tamagui `$size` scale as
- * measured on tamagui.dev ($4=44, $3=36, $5=52, $6=64 — MPO-13 C1/C2: the
- * recipe key and the raw token now agree). `{ baseHeight: 40 }` (no
- * tokenHeights / sizeFactors) regenerates geometrically from
- * `baseHeight * stepRatio ** step`.
  */
 
 import {
@@ -50,6 +51,31 @@ export type SizeRecipeRatios = {
   gap: number;
 };
 
+/** Per-token channels on the measured ladder. Gap is not stored — it equals `radius`. */
+export type SizeRecipeTokenChannels = {
+  paddingHorizontal: number;
+  fontSize: number;
+  iconSize: number;
+  radius: number;
+};
+
+export type SizeRecipeTokenTable = Partial<Record<SizeRecipeToken, SizeRecipeTokenChannels>>;
+
+/**
+ * borderRadius knob stops (px). Mirrors the v5 radius tokens the knob
+ * already resolves ($0/$2/$4/$6/$12 = 0/5/9/16/50). `applyRadiusStop`
+ * retargets recipe.gap to the same number so gap == radius at every stop.
+ */
+export const SIZE_RECIPE_RADIUS_STOPS = {
+  none: 0,
+  small: 5,
+  medium: 9,
+  large: 16,
+  full: 50,
+} as const;
+
+export type SizeRecipeRadiusStop = keyof typeof SIZE_RECIPE_RADIUS_STOPS;
+
 export type SizeRecipeInputs = {
   baseHeight: number;
   stepRatio: number;
@@ -61,6 +87,21 @@ export type SizeRecipeInputs = {
    * `tokenHeights` is omitted. Factors are `stepRatio ** exponent` otherwise.
    */
   sizeFactors?: Partial<Record<SizeRecipeToken, number>>;
+  /**
+   * Measured per-token channels (padX / font / icon / radius). When
+   * present, enumerable recipes read this table and set gap = radius.
+   * `{ baseHeight }` without an explicit tokenTable drops it so the
+   * geometric fallback can run.
+   */
+  tokenTable?: SizeRecipeTokenTable;
+  /** Same-height tighter family (Chip / `recipeFamily="controlCompact"`). */
+  compactTokenTable?: SizeRecipeTokenTable;
+  /**
+   * Input padX (one space half-step below the button at the same token).
+   * $4 = 16 vs the button's 18. Stored on inputs so the generator remains
+   * the single writer; Input consumes this, not a second handwritten map.
+   */
+  inputPadX?: Partial<Record<SizeRecipeToken, number>>;
   ratios: SizeRecipeRatios;
   compactRatios: SizeRecipeRatios;
   radiusPx: number;
@@ -103,6 +144,8 @@ export type SizeRecipeTables = {
   typeVariants: Record<string, SizeRecipeTypeVariant>;
   iconVariants: Record<string, SizeRecipeIconVariant>;
   heightVariants: Record<string, { height: number }>;
+  /** Size-stepped radius (px). Gap on the matching recipe equals this value. */
+  radii: Record<string, number>;
 };
 
 export type SizeRecipeFamily = SizeRecipeTables & { name: SizeRecipeFamilyName };
@@ -118,6 +161,7 @@ export type GeneratedSizeRecipes = {
   boxVariants: Record<string, SizeRecipeBoxVariant>;
   typeVariants: Record<string, SizeRecipeTypeVariant>;
   iconVariants: Record<string, SizeRecipeIconVariant>;
+  radii: Record<string, number>;
   families: RecipeFamilies;
   /** Tile-size ladder (MPO-31) — derived from `inputs.tile` over the measured defaults. */
   tiles: TileSizeLadder;
@@ -168,40 +212,100 @@ export const defaultSizeFactors: Record<SizeRecipeToken, number> = {
   $6: 64 / 44,
 };
 
-// Anchored at the measured $4/$true control: height 44, padX 18
-// ($space.true), font 14, icon 16, gap 9 (gap tracks $radius.true). The
-// ratio model is linear, so steps away from $4 approximate Tamagui's
-// hand-tuned ramp rather than matching it exactly.
-const DEFAULT_RATIOS: SizeRecipeRatios = {
+/**
+ * Measured Tamagui v5 Button ladder (rendered reference §6.1) plus the
+ * integer token-scale fills for stops the site did not photograph.
+ *
+ * padX = `$space` at the same key (2/4/7/10/13/16/18/24/32).
+ * radius = `$radius` at the same key (3/5/7/9/10/16); half-steps sit
+ * halfway on that scale (4/6/8) because v5 has no $1.5/$2.5/$3.5 radius.
+ * font = Inter body at the same key (11/12/13/14/16/18); half-steps take
+ * the next integer stop.
+ * icon steps with size and keeps the existing $4 = 16 contract.
+ * $2/$3/$4/$6 padX / font / radius are the photographed values (7/13/18/32,
+ * 12/13/14/18, 5/7/9/16).
+ */
+export const TAMAGUI_CONTROL_SIZE_TABLE: Record<SizeRecipeToken, SizeRecipeTokenChannels> = {
+  $1: { paddingHorizontal: 2, fontSize: 11, iconSize: 10, radius: 3 },
+  "$1.5": { paddingHorizontal: 4, fontSize: 12, iconSize: 11, radius: 4 },
+  $2: { paddingHorizontal: 7, fontSize: 12, iconSize: 12, radius: 5 },
+  "$2.5": { paddingHorizontal: 10, fontSize: 13, iconSize: 14, radius: 6 },
+  $3: { paddingHorizontal: 13, fontSize: 13, iconSize: 14, radius: 7 },
+  "$3.5": { paddingHorizontal: 16, fontSize: 14, iconSize: 15, radius: 8 },
+  $4: { paddingHorizontal: 18, fontSize: 14, iconSize: 16, radius: 9 },
+  $true: { paddingHorizontal: 18, fontSize: 14, iconSize: 16, radius: 9 },
+  $5: { paddingHorizontal: 24, fontSize: 16, iconSize: 18, radius: 10 },
+  $6: { paddingHorizontal: 32, fontSize: 18, iconSize: 20, radius: 16 },
+};
+
+/**
+ * Input padX — `getSpace(val, { shift: -1 })` on the v5 space scale
+ * (rendered reference §6.2). $2/$3/$4 are the photographed 4/10/16;
+ * $4 is 16 against the button's 18.
+ */
+export const TAMAGUI_INPUT_PADX: Record<SizeRecipeToken, number> = {
+  $1: 1,
+  "$1.5": 2,
+  $2: 4,
+  "$2.5": 7,
+  $3: 10,
+  "$3.5": 13,
+  $4: 16,
+  $true: 16,
+  $5: 21,
+  $6: 24,
+};
+
+/**
+ * controlCompact: same height / radius (so gap == radius) as control;
+ * padX is the Input table (one space half-step tighter); font/icon sit
+ * one type step below the control table.
+ */
+export const TAMAGUI_COMPACT_SIZE_TABLE: Record<SizeRecipeToken, SizeRecipeTokenChannels> = {
+  $1: { paddingHorizontal: 1, fontSize: 10, iconSize: 9, radius: 3 },
+  "$1.5": { paddingHorizontal: 2, fontSize: 11, iconSize: 10, radius: 4 },
+  $2: { paddingHorizontal: 4, fontSize: 11, iconSize: 11, radius: 5 },
+  "$2.5": { paddingHorizontal: 7, fontSize: 12, iconSize: 12, radius: 6 },
+  $3: { paddingHorizontal: 10, fontSize: 12, iconSize: 13, radius: 7 },
+  "$3.5": { paddingHorizontal: 13, fontSize: 13, iconSize: 14, radius: 8 },
+  $4: { paddingHorizontal: 16, fontSize: 13, iconSize: 14, radius: 9 },
+  $true: { paddingHorizontal: 16, fontSize: 13, iconSize: 14, radius: 9 },
+  $5: { paddingHorizontal: 21, fontSize: 14, iconSize: 16, radius: 10 },
+  $6: { paddingHorizontal: 24, fontSize: 16, iconSize: 18, radius: 16 },
+};
+
+// Geometric fallback only — used when `{ baseHeight }` drops tokenTable.
+// Anchored at the measured $4 so a doubled baseHeight still doubles $4.
+const FALLBACK_RATIOS: SizeRecipeRatios = {
   padX: 18 / 44,
   font: 14 / 44,
   icon: 16 / 44,
   gap: 9 / 44,
 };
 
-// One space step and one type step below control at the same height:
-// $4 compact = padX 13 ($space.3), font 13 ($3 label), icon 14, gap 7
-// ($space.2).
-const DEFAULT_COMPACT_RATIOS: SizeRecipeRatios = {
-  padX: 13 / 44,
+const FALLBACK_COMPACT_RATIOS: SizeRecipeRatios = {
+  padX: 16 / 44,
   font: 13 / 44,
   icon: 14 / 44,
-  gap: 7 / 44,
+  gap: 9 / 44,
 };
 
 export const DEFAULT_SIZE_RECIPE_INPUTS: SizeRecipeInputs = {
   // Tamagui `$size.true` = 44 — the iOS touch minimum, measured on every
-  // tamagui.dev button and input (MPO-13 C2; was 32).
+  // tamagui.dev button and input (MPO-13 C2).
   baseHeight: 44,
   stepRatio: 1.25,
   tokenSteps: { ...SIZE_TOKEN_EXPONENTS },
   tokenHeights: { ...DEFAULT_TOKEN_HEIGHTS },
   sizeFactors: { ...defaultSizeFactors },
-  ratios: { ...DEFAULT_RATIOS },
-  compactRatios: { ...DEFAULT_COMPACT_RATIOS },
-  // Tamagui `$radius.true` = 9, matching the borderRadius knob's medium
-  // stop ($4 = 9px) — the stored input no longer contradicts the knob
-  // (MPO-13 C3; was 6).
+  tokenTable: { ...TAMAGUI_CONTROL_SIZE_TABLE },
+  compactTokenTable: { ...TAMAGUI_COMPACT_SIZE_TABLE },
+  inputPadX: { ...TAMAGUI_INPUT_PADX },
+  ratios: { ...FALLBACK_RATIOS },
+  compactRatios: { ...FALLBACK_COMPACT_RATIOS },
+  // Tamagui `$radius.true` = 9 — the $4 / medium default. Per-token
+  // radii live on tokenTable; this is the knob's medium stop and the
+  // $4 table row, not a flat radius for every size.
   radiusPx: 9,
   touchFloor: 44,
 };
@@ -212,12 +316,31 @@ export const TOUCH_HEIGHT_FLOOR = DEFAULT_SIZE_RECIPE_INPUTS.touchFloor;
 
 const MD_TOUCH_MIN = 48;
 
+function cloneTokenTable(table?: SizeRecipeTokenTable): SizeRecipeTokenTable | undefined {
+  if (!table) return undefined;
+  const next: SizeRecipeTokenTable = {};
+  for (const token of SIZE_RECIPE_TOKENS) {
+    const row = table[token];
+    if (row) next[token] = { ...row };
+  }
+  return next;
+}
+
+function clonePadX(
+  table?: Partial<Record<SizeRecipeToken, number>>,
+): Partial<Record<SizeRecipeToken, number>> | undefined {
+  return table ? { ...table } : undefined;
+}
+
 export function cloneSizeRecipeInputs(inputs: SizeRecipeInputs): SizeRecipeInputs {
   return {
     ...inputs,
     tokenSteps: { ...inputs.tokenSteps },
     tokenHeights: inputs.tokenHeights ? { ...inputs.tokenHeights } : undefined,
     sizeFactors: inputs.sizeFactors ? { ...inputs.sizeFactors } : undefined,
+    tokenTable: cloneTokenTable(inputs.tokenTable),
+    compactTokenTable: cloneTokenTable(inputs.compactTokenTable),
+    inputPadX: clonePadX(inputs.inputPadX),
     ratios: { ...inputs.ratios },
     compactRatios: { ...inputs.compactRatios },
     tile: inputs.tile ? cloneTileSizeInputs(inputs.tile) : undefined,
@@ -225,14 +348,17 @@ export function cloneSizeRecipeInputs(inputs: SizeRecipeInputs): SizeRecipeInput
 }
 
 /**
- * Fill defaults. `{ baseHeight: 36 }` drops handwritten tokenHeights/sizeFactors
- * so every token regenerates from stepRatio.
+ * Fill defaults. `{ baseHeight: 36 }` drops handwritten tokenHeights /
+ * sizeFactors / token tables so every token regenerates from stepRatio.
  */
 export function resolveSizeRecipeInputs(partial: Partial<SizeRecipeInputs> = {}): SizeRecipeInputs {
   const scalingOverride =
     partial.baseHeight != null || partial.stepRatio != null || partial.tokenSteps != null;
   const hasTokenHeights = Object.prototype.hasOwnProperty.call(partial, "tokenHeights");
   const hasSizeFactors = Object.prototype.hasOwnProperty.call(partial, "sizeFactors");
+  const hasTokenTable = Object.prototype.hasOwnProperty.call(partial, "tokenTable");
+  const hasCompactTable = Object.prototype.hasOwnProperty.call(partial, "compactTokenTable");
+  const hasInputPadX = Object.prototype.hasOwnProperty.call(partial, "inputPadX");
 
   const resolved: SizeRecipeInputs = {
     baseHeight: partial.baseHeight ?? DEFAULT_SIZE_RECIPE_INPUTS.baseHeight,
@@ -260,6 +386,26 @@ export function resolveSizeRecipeInputs(partial: Partial<SizeRecipeInputs> = {})
     resolved.sizeFactors = { ...DEFAULT_SIZE_RECIPE_INPUTS.sizeFactors };
   }
 
+  if (hasTokenTable) {
+    resolved.tokenTable = partial.tokenTable ? cloneTokenTable(partial.tokenTable) : undefined;
+  } else if (!scalingOverride) {
+    resolved.tokenTable = cloneTokenTable(DEFAULT_SIZE_RECIPE_INPUTS.tokenTable);
+  }
+
+  if (hasCompactTable) {
+    resolved.compactTokenTable = partial.compactTokenTable
+      ? cloneTokenTable(partial.compactTokenTable)
+      : undefined;
+  } else if (!scalingOverride) {
+    resolved.compactTokenTable = cloneTokenTable(DEFAULT_SIZE_RECIPE_INPUTS.compactTokenTable);
+  }
+
+  if (hasInputPadX) {
+    resolved.inputPadX = partial.inputPadX ? clonePadX(partial.inputPadX) : undefined;
+  } else if (!scalingOverride) {
+    resolved.inputPadX = clonePadX(DEFAULT_SIZE_RECIPE_INPUTS.inputPadX);
+  }
+
   return resolved;
 }
 
@@ -282,15 +428,37 @@ export function sizeRecipeFromHeight(
   height: number,
   ratios: SizeRecipeRatios = DEFAULT_SIZE_RECIPE_INPUTS.ratios,
 ): SizeRecipe {
+  const gap = Math.round(height * ratios.gap);
   return {
     height,
     paddingHorizontal: Math.round(height * ratios.padX),
     fontSize: Math.round(height * ratios.font),
     iconSize: Math.round(height * ratios.icon),
-    gap: Math.round(height * ratios.gap),
+    gap,
   };
 }
 
+export function recipeFromTokenChannels(
+  height: number,
+  channels: SizeRecipeTokenChannels,
+): SizeRecipe {
+  return {
+    height,
+    paddingHorizontal: channels.paddingHorizontal,
+    fontSize: channels.fontSize,
+    iconSize: channels.iconSize,
+    gap: channels.radius,
+  };
+}
+
+/** Retarget inner gap to a borderRadius knob stop so gap == that stop's radius. */
+export function applyRadiusStop<T extends { gap: number }>(
+  recipe: T,
+  stop: SizeRecipeRadiusStop,
+): T {
+  return { ...recipe, gap: SIZE_RECIPE_RADIUS_STOPS[stop] };
+}
+
 function generateTouchHeights(
   heights: Record<string, number>,
   inputs: SizeRecipeInputs,
@@ -326,9 +494,18 @@ function generateTouchHeights(
   return heightsTouch;
 }
 
+function channelsForToken(
+  token: string,
+  table: SizeRecipeTokenTable | undefined,
+): SizeRecipeTokenChannels | undefined {
+  if (!table) return undefined;
+  return table[token as SizeRecipeToken] ?? (token === "$true" ? table.$4 : undefined);
+}
+
 export function generateSizeRecipeTables(
   inputs: SizeRecipeInputs,
   ratios: SizeRecipeRatios = inputs.ratios,
+  table: SizeRecipeTokenTable | undefined = inputs.tokenTable,
 ): SizeRecipeTables {
   const tokens = SIZE_RECIPE_TOKENS;
   const heights: Record<string, number> = {};
@@ -346,11 +523,17 @@ export function generateSizeRecipeTables(
   const typeVariants: Record<string, SizeRecipeTypeVariant> = {};
   const iconVariants: Record<string, SizeRecipeIconVariant> = {};
   const heightVariants: Record<string, { height: number }> = {};
+  const radii: Record<string, number> = {};
 
   for (const token of tokens) {
-    const recipe = sizeRecipeFromHeight(heights[token], ratios);
+    const channels = channelsForToken(token, table);
+    const recipe = channels
+      ? recipeFromTokenChannels(heights[token], channels)
+      : sizeRecipeFromHeight(heights[token], ratios);
+    const radius = channels ? channels.radius : recipe.gap;
     recipes[token] = recipe;
     recipesTouch[token] = sizeRecipeFromHeight(touchHeights[token], ratios);
+    radii[token] = radius;
     boxVariants[token] = {
       height: recipe.height,
       paddingHorizontal: recipe.paddingHorizontal,
@@ -372,6 +555,7 @@ export function generateSizeRecipeTables(
     typeVariants,
     iconVariants,
     heightVariants,
+    radii,
   };
 }
 
@@ -379,10 +563,12 @@ export function createRecipeFamilies(
   inputs: SizeRecipeInputs | Partial<SizeRecipeInputs> = {},
 ): RecipeFamilies {
   const resolved = cloneSizeRecipeInputs(resolveSizeRecipeInputs(inputs));
-  const control = generateSizeRecipeTables(resolved, resolved.ratios);
-  // Same heights as control; tighter pad/font/icon/gap via compactRatios
-  // (padX 8/32, font 13/32, icon 14/32, gap 4/32). Not a 28px family.
-  const controlCompact = generateSizeRecipeTables(resolved, resolved.compactRatios);
+  const control = generateSizeRecipeTables(resolved, resolved.ratios, resolved.tokenTable);
+  const controlCompact = generateSizeRecipeTables(
+    resolved,
+    resolved.compactRatios,
+    resolved.compactTokenTable,
+  );
   return {
     control: { ...control, name: "control" },
     controlCompact: { ...controlCompact, name: "controlCompact" },
@@ -402,6 +588,7 @@ export function generateSizeRecipes(partial: Partial<SizeRecipeInputs> = {}): Ge
     boxVariants: control.boxVariants,
     typeVariants: control.typeVariants,
     iconVariants: control.iconVariants,
+    radii: control.radii,
     families,
     tiles: generateTileSizeLadder(resolveTileSizeInputs(inputs.tile ?? {})),
   };

package/src/theme/recipes.ts

@@ -23,9 +23,30 @@ export interface TextStateProps {
   fontSize?: string;
 }
 
-export interface ElevationStateProps {
+export interface ElevationPaintProps {
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  /** Web: raw boxShadow so paint does not depend on Tamagui's elevation variant. */
+  style?: { boxShadow: string };
+}
+
+export interface ElevationStateProps extends ElevationPaintProps {
   /** Size token on web ("$1"); numeric tokens.size value on native (RN-safe). */
   elevation?: string | number;
+  /** Dark-scheme surface tint (existing $color ramp). Light leaves this unset. */
+  backgroundColor?: string;
+}
+
+/**
+ * Complete elevation chrome to spread onto a raised frame (E-CONTROL wrappers,
+ * InputParts Box). Shadows + Android dp. No fill — filled inputs read
+ * `inputBackground`; overlays read `elevatedSurface.backgroundColor`.
+ */
+export interface ElevationChromeProps extends ElevationPaintProps {
+  /** Android dp (2/4/8), not the Tamagui size token. */
+  elevation?: number;
 }
 
 // ── Disabled state recipe (LC-40 DISABLED-VISIBLE) ───────────────────────
@@ -102,8 +123,8 @@ export interface KnobRecipe<T> {
  * Corner smoothing carrier (Axiom 15 OPTICS): radius-bearing fragments gain
  * `className: "mp-corner-smooth"` when `cornerSmoothing: "smooth"` (web
  * only) — the mounted stylesheet in `cornerSmoothing.ts` resolves it to
- * `corner-shape: squircle`, a Chromium 139+ progressive enhancement other
- * engines ignore. Absent at `round` and on native.
+ * `corner-shape: squircle` (computed `superellipse(2)` on Chromium 152).
+ * Engines without the property drop the declaration; native is absent.
  */
 export interface CornerSmoothingCarrier {
   className?: string;
@@ -115,7 +136,36 @@ export interface KnobProps {
     borderColor: string;
     borderWidth: number;
   } & CornerSmoothingCarrier;
+  /**
+   * The radius for chrome NESTED INSIDE a radius-bearing frame — a tab
+   * indicator inside a tab bar, a code block inside a card, a toast's action
+   * strip. It resolves one or more steps SMALLER than `borderRadius` at every
+   * knob stop (medium: `$3` inside `$4`, full: `$5` inside `$12`), because a
+   * child corner that matched its parent's would read as a second frame.
+   *
+   * 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.
+   */
+  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
+   * Tamagui paints and what the fill style means: the surface is the
+   * affordance, so a ring around it is a second one.
+   *
+   * MPO-19 X3: filled controls spread the `borderRadius` fragment, whose
+   * `borderColor` is `$borderColor`, so with the default `borderWidth: medium`
+   * every default Button carried a visible 1px ring that stock Tamagui does
+   * not draw. The width still resolves through the `borderWidth` knob — set it
+   * to `none` and both fragments go to 0.
+   */
+  controlBorderFilled: { borderColor: string; borderWidth: number };
+  /** An OUTLINED control's border: the outline IS the affordance, so it is at least a hairline. */
+  controlBorderOutlined: { borderColor: string; borderWidth: number };
   /**
    * Axiom 1 child-clip cap for padded containers (Card/Panel/DialogContent):
    * the radius token while it fits, or the padding px once it would exceed
@@ -124,6 +174,19 @@ export interface KnobProps {
   containerRadius: { borderRadius: string | number } & CornerSmoothingCarrier;
   /** Size token on web ("$1"); numeric tokens.size value on native (RN-safe). */
   elevation: string | number | undefined;
+  /**
+   * Overlay elevation token (dialogs, popovers, Panel). Distinct from
+   * `elevation` so an overlay over a scrim is not the same $1 stop every
+   * Button carries. Spread via `elevatedSurface`; do not reuse `elevation`.
+   */
+  overlayElevation: string | number | undefined;
+  /**
+   * Complete shadow fragment for E-CONTROL / wrapper Views. Spread whole.
+   * Empty when `elevation=none`. Android `elevation` here is dp (2/4/8).
+   */
+  elevationChrome: ElevationChromeProps;
+  /** Resolved scheme the fragments were built for (LC-85). */
+  scheme: "light" | "dark";
   surface: { backgroundColor: string; borderColor: string; borderWidth: number };
   /** Content tier (Bento content card): padded frame, no border, no shadow. Radius carries the container cap. */
   cardSurface: {
@@ -138,7 +201,8 @@ export interface KnobProps {
     borderWidth: number;
     borderRadius: string;
     elevation: string | number | undefined;
-  } & CornerSmoothingCarrier;
+  } & ElevationPaintProps &
+    CornerSmoothingCarrier;
   /** Feature/marketing tier (auth, hero cards): big radius + ultra-soft wide shadow. */
   featureSurface: {
     backgroundColor: string;