@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/theme/recipeInputs.ts

@@ -3,20 +3,23 @@
  *
  * 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).
+ * handwritten at a call site. The default inputs are READ off the generated
+ * token scale (`scale/generateScale.ts`): height = `$size`, padX = `$space`,
+ * radius (and gap) = `$radius` at the same key, so a raw `$size`/`$space`
+ * prop and the recipe at that key are the same number. `{ control }` (and
+ * `{ type }`) regenerate every table from a new scale.
  *
  * Radius steps with the size token. The borderRadius knob overrides the
  * painted corners while internal gap stays on the size recipe. `radiusPx`
- * on inputs is the $4 / medium default (9).
+ * on inputs is `$radius.true`, the $4 / medium default.
  *
  * Tamagui `createThemes` / theme-builder still emits COLOR palettes only.
  * Do not stuff recipe keys into `getTheme()` / `themes`.
  */
 
+import { scaleRadiusPx } from "./scale/activeScale";
+import { generateScale } from "./scale/generateScale";
+import { SIZE_RECIPE_TOKENS, type SizeRecipeToken, defaultScaleInputs } from "./scale/scaleInputs";
 import {
   cloneTileSizeInputs,
   generateTileSizeLadder,
@@ -25,22 +28,10 @@ import {
   type TileSizeLadder,
 } from "./tileSizes";
 
-export const SIZE_RECIPE_TOKENS = [
-  "$1",
-  "$1.5",
-  "$2",
-  "$2.5",
-  "$3",
-  "$3.5",
-  "$4",
-  "$true",
-  "$5",
-  "$6",
-] as const;
-
-export type SizeRecipeToken = (typeof SIZE_RECIPE_TOKENS)[number];
-
-export type SizeRecipeFamilyName = "control" | "controlCompact";
+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;
 
@@ -61,49 +52,44 @@ export type SizeRecipeTokenChannels = {
 
 export type SizeRecipeTokenTable = Partial<Record<SizeRecipeToken, SizeRecipeTokenChannels>>;
 
+const defaultScale = generateScale(defaultScaleInputs);
+
 /**
- * borderRadius knob stops (px). Mirrors the v5 radius tokens the knob
- * already resolves ($0/$2/$4/$6/$12 = 0/5/9/16/50). These shape overrides
- * do not retarget the control's internal gap.
+ * borderRadius knob stops (px): the `$radius` tokens the knob resolves
+ * ($0/$2/$4/$6/$12). These shape overrides do not retarget the control's
+ * internal gap.
  */
 export const SIZE_RECIPE_RADIUS_STOPS = {
-  none: 0,
-  small: 5,
-  medium: 9,
-  large: 16,
-  full: 50,
+  none: defaultScale.tokens.radius[0],
+  small: defaultScale.tokens.radius[2],
+  medium: defaultScale.tokens.radius[4],
+  large: defaultScale.tokens.radius[6],
+  full: defaultScale.tokens.radius[12],
 } as const;
 
 export type SizeRecipeRadiusStop = keyof typeof SIZE_RECIPE_RADIUS_STOPS;
 
 export type SizeRecipeInputs = {
-  baseHeight: number;
-  stepRatio: number;
+  /** `$size.$4` px of the scale the tables were generated from (`ScaleInputs.control`). */
+  control: number;
+  /** Body `$true` px of that scale (`ScaleInputs.type`); the label/icon ladders follow it. */
+  type: number;
   tokenSteps: Record<string, number>;
-  /** Absolute desktop px. When omitted, heights come from baseHeight * stepRatio ** step (or sizeFactors). */
-  tokenHeights?: Record<string, number>;
-  /**
-   * Optional per-token scale relative to `baseHeight`. Used only when
-   * `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;
+  /** Desktop px per recipe key: `$size` at the key. */
+  tokenHeights: Record<string, number>;
+  /** Per-token channels (padX / font / icon / radius); recipes set gap = radius. */
+  tokenTable: SizeRecipeTokenTable;
+  /** Same-height tighter family (Chip / `recipeFamily="chip"`). */
+  chipTokenTable: 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
+   * $4 = 14 vs the button's 16. Stored on inputs so the generator remains
    * the single writer; Input consumes this, not a second handwritten map.
    */
-  inputPadX?: Partial<Record<SizeRecipeToken, number>>;
+  inputPadX: Partial<Record<SizeRecipeToken, number>>;
+  /** Channel / height at $4; sizes recipes for heights off the table (touch, numeric `size`). */
   ratios: SizeRecipeRatios;
-  compactRatios: SizeRecipeRatios;
+  chipRatios: SizeRecipeRatios;
   radiusPx: number;
   touchFloor: number;
   /**
@@ -167,245 +153,80 @@ export type GeneratedSizeRecipes = {
   tiles: TileSizeLadder;
 };
 
-export const SIZE_TOKEN_EXPONENTS: Record<SizeRecipeToken, number> = {
-  $1: -3,
-  "$1.5": -2.5,
-  $2: -2,
-  "$2.5": -1.5,
-  $3: -1,
-  "$3.5": -0.5,
-  $4: 0,
-  $true: 0,
-  $5: 1,
-  $6: 2,
-};
-
-// Stock Tamagui `$size` px as measured from the live tamagui.dev CSS vars
-// (MPO-13 fidelity pass): $1:20 $1.5:24 $2:28 $2.5:32 $3:36 $3.5:40
-// $4/$true:44 $5:52 $6:64. The recipe key "$4" and the raw Tamagui token
-// `$size.4` resolve to the SAME height — the C1 split (recipe 32 vs token
-// 44) is gone.
-const DEFAULT_TOKEN_HEIGHTS: Record<string, number> = {
-  $1: 20,
-  "$1.5": 24,
-  $2: 28,
-  "$2.5": 32,
-  $3: 36,
-  "$3.5": 40,
-  $4: 44,
-  $true: 44,
-  $5: 52,
-  $6: 64,
-};
-
-/** Lossless relative table: the stock Tamagui 20/24/28/32/36/40/44/52/64 ramp at baseHeight 44. */
-export const defaultSizeFactors: Record<SizeRecipeToken, number> = {
-  $1: 20 / 44,
-  "$1.5": 24 / 44,
-  $2: 28 / 44,
-  "$2.5": 32 / 44,
-  $3: 36 / 44,
-  "$3.5": 40 / 44,
-  $4: 1,
-  $true: 1,
-  $5: 52 / 44,
-  $6: 64 / 44,
-};
-
-/**
- * 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,
-};
-
-const FALLBACK_COMPACT_RATIOS: SizeRecipeRatios = {
-  padX: 16 / 44,
-  font: 13 / 44,
-  icon: 14 / 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).
-  baseHeight: 44,
-  stepRatio: 1.25,
-  tokenSteps: { ...SIZE_TOKEN_EXPONENTS },
-  tokenHeights: { ...DEFAULT_TOKEN_HEIGHTS },
-  sizeFactors: { ...defaultSizeFactors },
-  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,
-};
+export const DEFAULT_SIZE_RECIPE_INPUTS: SizeRecipeInputs = defaultScale.recipeInputs;
 
 export const defaultRecipeInputs = DEFAULT_SIZE_RECIPE_INPUTS;
 
 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;
+/** Rows of `over` replace rows of `base`; a `$4` override without `$true` carries to `$true`. */
+function mergeTokenTable(
+  base: SizeRecipeTokenTable,
+  over?: SizeRecipeTokenTable,
+): SizeRecipeTokenTable {
   const next: SizeRecipeTokenTable = {};
   for (const token of SIZE_RECIPE_TOKENS) {
-    const row = table[token];
+    const row = over?.[token] ?? (token === "$true" ? over?.$4 : undefined) ?? base[token];
     if (row) next[token] = { ...row };
   }
   return next;
 }
 
-function clonePadX(
-  table?: Partial<Record<SizeRecipeToken, number>>,
-): Partial<Record<SizeRecipeToken, number>> | undefined {
-  return table ? { ...table } : undefined;
+function mergeTokenHeights(
+  base: Record<string, number>,
+  over?: Record<string, number>,
+): Record<string, number> {
+  const next = { ...base, ...over };
+  if (over?.$4 != null && over.$true == null) next.$true = over.$4;
+  return next;
 }
 
 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),
+    tokenHeights: { ...inputs.tokenHeights },
+    tokenTable: mergeTokenTable(inputs.tokenTable),
+    chipTokenTable: mergeTokenTable(inputs.chipTokenTable),
+    inputPadX: { ...inputs.inputPadX },
     ratios: { ...inputs.ratios },
-    compactRatios: { ...inputs.compactRatios },
+    chipRatios: { ...inputs.chipRatios },
     tile: inputs.tile ? cloneTileSizeInputs(inputs.tile) : undefined,
   };
 }
 
 /**
- * Fill defaults. `{ baseHeight: 36 }` drops handwritten tokenHeights /
- * sizeFactors / token tables so every token regenerates from stepRatio.
+ * Fill defaults. `{ control }` / `{ type }` regenerate every table from a
+ * new scale; explicit tables, heights and ratios then merge over it per row.
  */
 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 base =
+    partial.control == null && partial.type == null
+      ? DEFAULT_SIZE_RECIPE_INPUTS
+      : generateScale({
+          ...defaultScaleInputs,
+          control: partial.control ?? DEFAULT_SIZE_RECIPE_INPUTS.control,
+          type: partial.type ?? DEFAULT_SIZE_RECIPE_INPUTS.type,
+        }).recipeInputs;
 
   const resolved: SizeRecipeInputs = {
-    baseHeight: partial.baseHeight ?? DEFAULT_SIZE_RECIPE_INPUTS.baseHeight,
-    stepRatio: partial.stepRatio ?? DEFAULT_SIZE_RECIPE_INPUTS.stepRatio,
-    tokenSteps: { ...DEFAULT_SIZE_RECIPE_INPUTS.tokenSteps, ...partial.tokenSteps },
-    ratios: { ...DEFAULT_SIZE_RECIPE_INPUTS.ratios, ...partial.ratios },
-    compactRatios: { ...DEFAULT_SIZE_RECIPE_INPUTS.compactRatios, ...partial.compactRatios },
-    radiusPx: partial.radiusPx ?? DEFAULT_SIZE_RECIPE_INPUTS.radiusPx,
-    touchFloor: partial.touchFloor ?? DEFAULT_SIZE_RECIPE_INPUTS.touchFloor,
+    control: base.control,
+    type: base.type,
+    tokenSteps: { ...base.tokenSteps, ...partial.tokenSteps },
+    tokenHeights: mergeTokenHeights(base.tokenHeights, partial.tokenHeights),
+    tokenTable: mergeTokenTable(base.tokenTable, partial.tokenTable),
+    chipTokenTable: mergeTokenTable(base.chipTokenTable, partial.chipTokenTable),
+    inputPadX: { ...base.inputPadX, ...partial.inputPadX },
+    ratios: { ...base.ratios, ...partial.ratios },
+    chipRatios: { ...base.chipRatios, ...partial.chipRatios },
+    radiusPx: partial.radiusPx ?? base.radiusPx,
+    touchFloor: partial.touchFloor ?? base.touchFloor,
   };
 
   if (partial.tile !== undefined) {
     resolved.tile = partial.tile ? resolveTileSizeInputs(partial.tile) : undefined;
   }
 
-  if (hasTokenHeights) {
-    resolved.tokenHeights = partial.tokenHeights ? { ...partial.tokenHeights } : undefined;
-    if (hasSizeFactors) {
-      resolved.sizeFactors = partial.sizeFactors ? { ...partial.sizeFactors } : undefined;
-    }
-  } else if (hasSizeFactors) {
-    resolved.sizeFactors = partial.sizeFactors ? { ...partial.sizeFactors } : undefined;
-  } else if (!scalingOverride) {
-    resolved.tokenHeights = { ...DEFAULT_SIZE_RECIPE_INPUTS.tokenHeights };
-    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;
 }
 
@@ -416,12 +237,7 @@ function clampHeight(value: number): number {
 }
 
 function heightForToken(token: string, inputs: SizeRecipeInputs): number {
-  const explicitPx = inputs.tokenHeights?.[token];
-  if (explicitPx != null) return clampHeight(explicitPx);
-  const factor = inputs.sizeFactors?.[token as SizeRecipeToken];
-  if (factor != null) return clampHeight(inputs.baseHeight * factor);
-  const step = inputs.tokenSteps[token] ?? 0;
-  return clampHeight(inputs.baseHeight * inputs.stepRatio ** step);
+  return clampHeight(inputs.tokenHeights[token] ?? inputs.control);
 }
 
 export function sizeRecipeFromHeight(
@@ -456,7 +272,7 @@ export function applyRadiusStop<T extends { gap: number }>(
   recipe: T,
   stop: SizeRecipeRadiusStop,
 ): T {
-  return { ...recipe, gap: SIZE_RECIPE_RADIUS_STOPS[stop] };
+  return { ...recipe, gap: scaleRadiusPx(SIZE_RECIPE_RADIUS_STOPS[stop]) };
 }
 
 /** Knob fragment token → stop name. Default medium is `$4`. */
@@ -482,7 +298,7 @@ export function resolveControlRadius(
   if (stop === "medium") {
     return { radius: recipe.gap, gap: recipe.gap };
   }
-  const px = SIZE_RECIPE_RADIUS_STOPS[stop];
+  const px = scaleRadiusPx(SIZE_RECIPE_RADIUS_STOPS[stop]);
   return { radius: px, gap: recipe.gap };
 }
 
@@ -491,32 +307,9 @@ function generateTouchHeights(
   inputs: SizeRecipeInputs,
   tokens: readonly string[],
 ): Record<string, number> {
-  const { touchFloor, tokenSteps } = inputs;
-  const mdDesktop = heights.$4 ?? inputs.baseHeight;
-  const floored: Record<string, number> = {};
-  for (const token of tokens) {
-    floored[token] = Math.max(heights[token], touchFloor);
-  }
-
-  let mdTouch = Math.max(floored.$4 ?? touchFloor, MD_TOUCH_MIN);
-  const below = tokens.filter((token) => (tokenSteps[token] ?? 0) < 0);
-  const maxBelow =
-    below.length > 0 ? Math.max(...below.map((token) => floored[token])) : touchFloor;
-  if (mdTouch <= maxBelow) {
-    const nextSmaller = heights.$3 ?? mdDesktop;
-    mdTouch = maxBelow + Math.max(mdDesktop - nextSmaller, 1);
-  }
-
   const heightsTouch: Record<string, number> = {};
   for (const token of tokens) {
-    const step = tokenSteps[token] ?? 0;
-    if (step < 0) {
-      heightsTouch[token] = floored[token];
-    } else if (step === 0) {
-      heightsTouch[token] = mdTouch;
-    } else {
-      heightsTouch[token] = Math.max(floored[token], mdTouch + (heights[token] - mdDesktop));
-    }
+    heightsTouch[token] = Math.max(heights[token], inputs.touchFloor);
   }
   return heightsTouch;
 }
@@ -533,13 +326,14 @@ export function generateSizeRecipeTables(
   inputs: SizeRecipeInputs,
   ratios: SizeRecipeRatios = inputs.ratios,
   table: SizeRecipeTokenTable | undefined = inputs.tokenTable,
+  heightOf: (token: SizeRecipeToken) => number = (token) => heightForToken(token, inputs),
 ): SizeRecipeTables {
   const tokens = SIZE_RECIPE_TOKENS;
   const heights: Record<string, number> = {};
   for (const token of tokens) {
-    heights[token] = heightForToken(token, inputs);
+    heights[token] = heightOf(token);
   }
-  if (inputs.tokenHeights?.$true == null) {
+  if (inputs.tokenHeights.$true == null) {
     heights.$true = heights.$4;
   }
 
@@ -559,7 +353,7 @@ export function generateSizeRecipeTables(
       : sizeRecipeFromHeight(heights[token], ratios);
     const radius = channels ? channels.radius : recipe.gap;
     recipes[token] = recipe;
-    recipesTouch[token] = sizeRecipeFromHeight(touchHeights[token], ratios);
+    recipesTouch[token] = { ...recipe, height: touchHeights[token] };
     radii[token] = radius;
     boxVariants[token] = {
       height: recipe.height,
@@ -586,19 +380,83 @@ export function generateSizeRecipeTables(
   };
 }
 
+/** Recipe keys in ladder order; `$true` reads as `$4`. */
+const RECIPE_LADDER = SIZE_RECIPE_TOKENS.filter((token) => token !== "$true");
+
+/** The recipe key one step below `token` on the ladder ($4 / $true -> $3.5, floor $1). */
+export function recipeKeyBelow(token: SizeRecipeToken): SizeRecipeToken {
+  const index = RECIPE_LADDER.indexOf(token === "$true" ? "$4" : token);
+  return RECIPE_LADDER[Math.max(0, index - 1)];
+}
+
+/** The recipe key one step above `token` on the ladder ($4 / $true -> $5, ceiling $6). */
+export function recipeKeyAbove(token: SizeRecipeToken): SizeRecipeToken {
+  const index = RECIPE_LADDER.indexOf(token === "$true" ? "$4" : token);
+  return RECIPE_LADDER[Math.min(RECIPE_LADDER.length - 1, index + 1)];
+}
+
+function ratiosOf(table: SizeRecipeTokenTable, height: number): SizeRecipeRatios {
+  const row = table.$4;
+  if (!row) return { padX: 0, font: 0, icon: 0, gap: 0 };
+  return {
+    padX: row.paddingHorizontal / height,
+    font: row.fontSize / height,
+    icon: row.iconSize / height,
+    gap: row.radius / height,
+  };
+}
+
+/**
+ * Row families read off the control table, never a second px source:
+ * - `menuRow` (menu / listbox / command rows): height one key below the
+ *   control token (36 at `$4`), padX the `$3` space, type and icon the
+ *   token's own.
+ * - `tab`: height and padX one key below, type and icon the token's own.
+ * Both lift to `touchFloor` on touch like every family.
+ */
+function deriveRowFamilyTables(inputs: SizeRecipeInputs): {
+  menuRow: SizeRecipeTokenTable;
+  tab: SizeRecipeTokenTable;
+} {
+  const menuRow: SizeRecipeTokenTable = {};
+  const tab: SizeRecipeTokenTable = {};
+  const rowPadX = inputs.tokenTable.$3?.paddingHorizontal;
+  for (const token of SIZE_RECIPE_TOKENS) {
+    const own = channelsForToken(token, inputs.tokenTable);
+    const below = channelsForToken(recipeKeyBelow(token), inputs.tokenTable);
+    if (!own || !below) continue;
+    menuRow[token] = { ...own, paddingHorizontal: rowPadX ?? below.paddingHorizontal };
+    tab[token] = { ...own, paddingHorizontal: below.paddingHorizontal };
+  }
+  return { menuRow, tab };
+}
+
 export function createRecipeFamilies(
   inputs: SizeRecipeInputs | Partial<SizeRecipeInputs> = {},
 ): RecipeFamilies {
   const resolved = cloneSizeRecipeInputs(resolveSizeRecipeInputs(inputs));
   const control = generateSizeRecipeTables(resolved, resolved.ratios, resolved.tokenTable);
-  const controlCompact = generateSizeRecipeTables(
+  const chip = generateSizeRecipeTables(resolved, resolved.chipRatios, resolved.chipTokenTable);
+  const rows = deriveRowFamilyTables(resolved);
+  const heightBelow = (token: SizeRecipeToken) => heightForToken(recipeKeyBelow(token), resolved);
+  const rowHeight = heightBelow("$4");
+  const menuRow = generateSizeRecipeTables(
+    resolved,
+    ratiosOf(rows.menuRow, rowHeight),
+    rows.menuRow,
+    heightBelow,
+  );
+  const tab = generateSizeRecipeTables(
     resolved,
-    resolved.compactRatios,
-    resolved.compactTokenTable,
+    ratiosOf(rows.tab, rowHeight),
+    rows.tab,
+    heightBelow,
   );
   return {
     control: { ...control, name: "control" },
-    controlCompact: { ...controlCompact, name: "controlCompact" },
+    chip: { ...chip, name: "chip" },
+    menuRow: { ...menuRow, name: "menuRow" },
+    tab: { ...tab, name: "tab" },
   };
 }