@multiplatform.one/theme 7.34.4 → 7.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.34.4",
+  "version": "7.36.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -38,14 +38,29 @@
       "source": "./src/audit/index.ts",
       "types": "./types/audit/index.d.ts",
       "default": "./src/audit/index.ts"
+    },
+    "./scale-attribute": {
+      "source": "./src/theme/scale/scaleAttribute.ts",
+      "types": "./types/theme/scale/scaleAttribute.d.ts",
+      "default": "./src/theme/scale/scaleAttribute.ts"
+    },
+    "./design-tokens": {
+      "source": "./src/audit/designTokens.ts",
+      "types": "./types/audit/designTokens.d.ts",
+      "default": "./src/audit/designTokens.ts"
+    },
+    "./motion": {
+      "source": "./src/theme/motionTiming.ts",
+      "types": "./types/theme/motionTiming.d.ts",
+      "default": "./src/theme/motionTiming.ts"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.34.4",
-    "@multiplatform.one/store": "^7.34.4",
+    "@multiplatform.one/platform": "^7.36.0",
+    "@multiplatform.one/store": "^7.36.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -58,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.34.4",
-    "@multiplatform.one/test-utils": "7.34.4",
+    "@multiplatform.one/config": "7.36.0",
+    "@multiplatform.one/test-utils": "7.36.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/audit/constraintAudit.spec.ts

@@ -1,12 +1,17 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { defaultConfig } from "@tamagui/config/v5";
 import { defaultHeadingFont } from "../theme/defaults/fonts";
+import { fontCategoryStacks } from "../theme/fontCategoryStacks";
 import { defaultKnobs } from "../theme/knobs";
 import { resolveKnobs } from "../theme/resolveKnobs";
+import { deriveRecipeInputs } from "../theme/scale/deriveRecipeInputs";
+import { generateScale } from "../theme/scale/generateScale";
+import { defaultScaleInputs } from "../theme/scale/scaleInputs";
 import { GAP_KNOB, GAP_LG_KNOB, runConstraintAudit } from "./constraintAudit";
 
 afterEach(() => {
   document.body.innerHTML = "";
+  delete (globalThis as { __MPO_SCALE__?: unknown }).__MPO_SCALE__;
 });
 
 // Deliberately loses module scope, like Playwright page.evaluate.
@@ -27,34 +32,48 @@ function measured() {
   return audit().elements.find((el) => el.id === "specimen");
 }
 
-function card(radius: string, space: string, tier = "content") {
+function card(radius: string, tier = "content") {
   return {
     "data-constraint-container": "Card",
     "data-tier": tier,
     "data-radius-knob": radius,
-    "data-space-knob": space,
   };
 }
 
+function recipeGaps(scale: ReturnType<typeof generateScale>) {
+  const { tokenTable, chipTokenTable } = deriveRecipeInputs(scale);
+  return [
+    ...new Set(
+      [...Object.values(tokenTable), ...Object.values(chipTokenTable)].map((row) => row.radius),
+    ),
+  ].sort((a, b) => a - b);
+}
+
+function publish(scale: ReturnType<typeof generateScale>) {
+  (globalThis as { __MPO_SCALE__?: unknown }).__MPO_SCALE__ = {
+    ...scale,
+    controlGaps: recipeGaps(scale),
+  };
+}
+
+const tokens = generateScale(defaultScaleInputs).tokens;
+const inset = tokens.space.$4;
+
 describe("Card container cap, independently measured against canonical stops", () => {
   for (const tier of ["content", "elevated"]) {
     for (const [radius, stop] of Object.entries({
       none: 0,
-      small: 5,
-      medium: 9,
-      large: 16,
-      full: 50,
+      small: tokens.radius[4],
+      medium: tokens.radius[6],
+      large: tokens.radius[8],
+      full: tokens.radius[12],
     })) {
-      for (const [space, inset] of Object.entries({ small: 13, medium: 18, large: 32 })) {
-        it(`${tier}/${radius}/${space} accepts all four capped corners`, () => {
-          specimen(
-            `border-radius:${Math.min(stop, inset)}px;padding:${inset}px`,
-            card(radius, space, tier),
-          );
-          expect(measured()?.violations).toEqual([]);
-          expect(measured()?.paddingTop?.value).toBe(inset);
-        });
-      }
+      it(`${tier}/${radius} accepts all four corners capped at the panelPadding role`, () => {
+        specimen(`border-radius:${Math.min(stop, inset)}px;padding:${inset}px`, card(radius, tier));
+        expect(measured()?.violations).toEqual([]);
+        expect(measured()?.paddingTop?.value).toBe(inset);
+        expect(measured()?.paddingTop?.knob).toBe("Card panelPadding");
+      });
     }
   }
 
@@ -65,30 +84,22 @@ describe("Card container cap, independently measured against canonical stops", (
       "border-radius:13px;padding:13px",
       { "data-tier": "content" },
     ],
-    ["16 exceeds 13 inset", "border-radius:16px;padding:13px", card("large", "small")],
-    ["wrong last corner", "border-radius:13px 13px 13px 9px;padding:13px", card("full", "small")],
-    ["nonzero at none", "border-radius:5px;padding:13px", card("none", "small")],
-    ["arbitrary matching inset", "border-radius:14px;padding:14px", card("full", "small")],
-    ["wrong canonical inset", "border-radius:18px;padding:18px", card("full", "small")],
-    ["missing inset", "border-radius:0;padding:0", card("none", "small")],
-    [
-      "wrong individual inset",
-      "border-radius:13px;padding:13px 18px 13px 13px",
-      card("full", "small"),
-    ],
-    ["percent radius cannot bypass cap", "border-radius:50%;padding:13px", card("full", "small")],
-    [
-      "elliptical corner cannot bypass cap",
-      "border-radius:13px / 16px;padding:13px",
-      card("full", "small"),
-    ],
+    ["a 13px inset is not the panelPadding role", "border-radius:13px;padding:13px", card("full")],
+    ["radius past the inset", "border-radius:24px;padding:18px", card("full")],
+    ["wrong last corner", "border-radius:18px 18px 18px 9px;padding:18px", card("full")],
+    ["nonzero at none", "border-radius:5px;padding:18px", card("none")],
+    ["arbitrary matching inset", "border-radius:14px;padding:14px", card("full")],
+    ["missing inset", "border-radius:0;padding:0", card("none")],
+    ["wrong individual inset", "border-radius:16px;padding:16px 13px 16px 16px", card("full")],
+    ["percent radius cannot bypass cap", "border-radius:50%;padding:18px", card("full")],
+    ["elliptical corner cannot bypass cap", "border-radius:18px / 24px;padding:18px", card("full")],
   ])("rejects %s", (_label, style, attrs) => {
     specimen(style, attrs);
     expect(measured()?.violations.length).toBeGreaterThan(0);
   });
 
   it("leaves ordinary control radius rules intact", () => {
-    specimen("border-radius:16px;padding:13px");
+    specimen("border-radius:14px;padding:16px");
     expect(measured()?.violations).toEqual([]);
   });
 
@@ -98,33 +109,138 @@ describe("Card container cap, independently measured against canonical stops", (
     "border-bottom-right-radius",
     "border-bottom-left-radius",
   ])("rejects a wrong %s even when every radius is on the generic scale", (corner) => {
-    const el = specimen("border-radius:9px;padding:13px", card("medium", "small"));
-    el.style.setProperty(corner, "5px");
+    const el = specimen("border-radius:14px;padding:16px", card("medium"));
+    el.style.setProperty(corner, "4px");
     expect(measured()?.borderRadius?.offScale).toBe(true);
     expect(measured()?.violations).toHaveLength(1);
   });
 });
 
-describe("canonical gapLg parity in the serialized audit", () => {
-  for (const space of ["small", "medium", "large"] as const) {
-    it(space, () => {
-      const token = resolveKnobs({ ...defaultKnobs, space }).knobProps.gapLg.gap;
-      const px = defaultConfig.tokens.space[token as keyof typeof defaultConfig.tokens.space];
-      expect(GAP_LG_KNOB[space]).toBe(px);
-      const gapToken = resolveKnobs({ ...defaultKnobs, space }).knobProps.gap.gap;
-      const gapPx = defaultConfig.tokens.space[gapToken as keyof typeof defaultConfig.tokens.space];
-      expect(GAP_KNOB[space]).toBe(gapPx);
-      specimen(`row-gap:${px}px;column-gap:${gapPx}px`);
-      expect(measured()?.rowGap?.offScale).toBe(false);
-      expect(measured()?.columnGap?.offScale).toBe(false);
-    });
-  }
-  it.each([22, 25, 31, 33])("rejects non-recipe gap %i", (gap) => {
+describe("spacing-role parity in the serialized audit", () => {
+  const { knobProps } = resolveKnobs(defaultKnobs);
+  const px = (token: string) => tokens.space[token as keyof typeof tokens.space];
+
+  it("the module tables are the resolver's roles", () => {
+    expect(GAP_KNOB).toEqual({ gapSm: px(knobProps.gapSm.gap), gap: px(knobProps.gap.gap) });
+    expect(GAP_LG_KNOB).toEqual({ gapLg: px(knobProps.gapLg.gap) });
+  });
+
+  it.each([
+    ["gapSm", knobProps.gapSm.gap],
+    ["gap", knobProps.gap.gap],
+    ["gapLg", knobProps.gapLg.gap],
+  ])("accepts the %s role", (_role, token) => {
+    specimen(`row-gap:${px(token)}px`);
+    expect(measured()?.rowGap?.offScale).toBe(false);
+  });
+
+  it("accepts the panelPadding role as a surface inset", () => {
+    specimen(`border-radius:8px;padding:${px(knobProps.panelPadding.padding)}px`);
+    expect(measured()?.paddingTop?.offScale).toBe(false);
+  });
+
+  it.each([18, 22, 25, 31, 33])("rejects non-role gap %i", (gap) => {
     specimen(`row-gap:${gap}px`);
     expect(measured()?.rowGap?.offScale).toBe(true);
   });
 });
 
+describe("the serialized audit reads the page's published scale", () => {
+  it("module tables are the default generated scale's tokens", () => {
+    const { space } = generateScale(defaultScaleInputs).tokens;
+    expect(GAP_KNOB).toEqual({ gapSm: space.$2, gap: space.$3 });
+    expect(GAP_LG_KNOB).toEqual({ gapLg: space.$5 });
+  });
+
+  it("without a published scale its fallbacks are the default scale", () => {
+    specimen(`row-gap:${generateScale(defaultScaleInputs).tokens.space.$3}px`);
+    expect(measured()?.rowGap?.offScale).toBe(false);
+  });
+
+  it("a published scale moves the role px with it", () => {
+    const scale = generateScale({ control: 44, type: 15 });
+    specimen(`row-gap:${scale.tokens.space.$3}px`);
+    expect(measured()?.rowGap?.offScale).toBe(true);
+    publish(scale);
+    expect(measured()?.rowGap?.offScale).toBe(false);
+  });
+
+  it("a control's inner gap is the published scale's $radius at any size key (LC-75)", () => {
+    const scale = generateScale({ control: 42, type: 15, radius: 0.3 });
+    const gap3 = scale.tokens.radius["3"];
+    expect(gap3).toBe(10);
+    specimen(`row-gap:${gap3}px`);
+    expect(measured()?.rowGap?.offScale).toBe(true);
+    publish(scale);
+    expect(measured()?.rowGap?.offScale).toBe(false);
+  });
+
+  it("rejects a radius that the published recipe does not use as a gap", () => {
+    const scale = generateScale({ control: 42, type: 15, radius: 0.3 });
+    const gap = scale.tokens.radius["7"];
+    expect(recipeGaps(scale)).not.toContain(gap);
+    publish(scale);
+    specimen(`row-gap:${gap}px`);
+    expect(measured()?.rowGap?.offScale).toBe(true);
+  });
+
+  it("uses the published recipe gaps instead of reconstructing them from radius tokens", () => {
+    const scale = generateScale({ control: 42, type: 15, radius: 0.3 });
+    (globalThis as { __MPO_SCALE__?: unknown }).__MPO_SCALE__ = { ...scale, controlGaps: [23] };
+    specimen("row-gap:23px");
+    expect(measured()?.rowGap?.offScale).toBe(false);
+    document.getElementById("specimen")!.style.rowGap = `${scale.tokens.radius["3"]}px`;
+    expect(measured()?.rowGap?.offScale).toBe(true);
+  });
+
+  it("keeps the serialized fallback exactly equal to the default recipe gaps", () => {
+    const fallback = runConstraintAudit.toString().match(/controlGaps\s*\?\?\s*(\[[^\]]*\])/);
+    expect(fallback).not.toBeNull();
+    expect(JSON.parse(fallback![1])).toEqual(recipeGaps(generateScale(defaultScaleInputs)));
+  });
+
+  it("a Card on a published scale caps at that scale's panelPadding", () => {
+    const scale = generateScale({ control: 36, type: 14 });
+    const scaleInset = scale.tokens.space.$4;
+    publish(scale);
+    specimen(`border-radius:${scaleInset}px;padding:${scaleInset}px`, card("full"));
+    expect(measured()?.violations).toEqual([]);
+  });
+});
+
+describe("font family provenance", () => {
+  it.each(Object.entries(fontCategoryStacks))(
+    "accepts the canonical %s stack",
+    (_category, stack) => {
+      specimen(`font-family:${stack}`).textContent = "Configured typography";
+      for (const run of [audit, runConstraintAudit]) {
+        const entry = run().elements.find((el) => el.id === "specimen");
+        expect(entry?.fontFamily?.offScale).toBe(false);
+        expect(entry?.violations).toEqual([]);
+      }
+    },
+  );
+
+  it("recognizes Slate's configured primary font as mono", () => {
+    specimen(`font-family:${fontCategoryStacks.mono}`).textContent = "Slate heading";
+    expect(measured()?.fontFamily).toMatchObject({ knob: "mono", offScale: false });
+  });
+
+  it.each(["Papyrus", "ui-serif", "Fira Code", "'Comic Neue', monospace"])(
+    "rejects unregistered primary family %s",
+    (stack) => {
+      specimen(`font-family:${stack}`).textContent = "Unregistered typography";
+      for (const run of [audit, runConstraintAudit]) {
+        const entry = run().elements.find((el) => el.id === "specimen");
+        expect(entry?.fontFamily?.offScale).toBe(true);
+        expect(entry?.violations).toEqual([
+          expect.stringContaining("is not a registered font token"),
+        ]);
+      }
+    },
+  );
+});
+
 describe("font weight provenance", () => {
   it("pins the configured heading source behind the self-contained whitelist", () => {
     expect([...new Set(Object.values(defaultHeadingFont.weight).map(Number))].sort()).toEqual([
@@ -137,6 +253,33 @@ describe("font weight provenance", () => {
     expect(measured()?.fontWeight).toMatchObject({ value: weight, unit: "", offScale: false });
     expect(measured()?.fontWeight?.knob).toContain("configured heading");
   });
+  it.each([600, 800])("accepts semantic headings at %i in both audit entry paths", (weight) => {
+    for (const tag of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
+      const el = document.createElement(tag);
+      el.id = "specimen";
+      el.style.fontWeight = String(weight);
+      document.body.replaceChildren(el);
+      for (const run of [audit, runConstraintAudit]) {
+        expect(run().elements.find((entry) => entry.id === "specimen")?.fontWeight?.offScale).toBe(
+          false,
+        );
+      }
+    }
+  });
+  it.each([
+    ["role", "heading"],
+    ["class", "font_headingSerif"],
+  ])("accepts heading provenance %s=%s", (attribute, value) => {
+    specimen("font-weight:800", { [attribute]: value });
+    expect(measured()?.fontWeight?.offScale).toBe(false);
+  });
+  it("rejects a plain span at 600", () => {
+    const el = document.createElement("span");
+    el.id = "specimen";
+    el.style.fontWeight = "600";
+    document.body.append(el);
+    expect(measured()?.fontWeight?.offScale).toBe(true);
+  });
   it.each([500, 650, 900])("rejects unconfigured weight %i", (weight) => {
     specimen(`font-weight:${weight}`, { class: "font_heading" });
     expect(measured()?.fontWeight?.offScale).toBe(true);
@@ -199,93 +342,89 @@ describe("BINARY parts measure 0 or their own h/2 (DG-RAD-03)", () => {
 });
 
 describe("declared capped containers beyond Card (DG-RAD-04)", () => {
-  const declared = (container: string, radius: string, space: string) => ({
+  const declared = (container: string, radius: string) => ({
     "data-constraint-container": container,
     "data-radius-knob": radius,
-    "data-space-knob": space,
   });
 
   it("accepts a PageSection surface capped at its own panelPadding", () => {
-    specimen("border-radius:13px;padding:13px", declared("PageSection", "full", "small"));
+    specimen("border-radius:16px;padding:16px", declared("PageSection", "full"));
     expect(measured()?.violations).toEqual([]);
   });
 
   it("measures a PageSection surface inset like a Card's", () => {
-    specimen("border-radius:13px;padding:12px", declared("PageSection", "full", "small"));
-    expect(measured()?.violations.join(" ")).toContain("PageSection panelPadding:small");
+    specimen("border-radius:18px;padding:12px", declared("PageSection", "full"));
+    expect(measured()?.violations.join(" ")).toContain("PageSection panelPadding");
   });
 
   it("accepts a TextArea box at the cap whatever its field inset", () => {
-    specimen("border-radius:13px;padding:0", declared("TextArea", "full", "small"));
+    specimen("border-radius:16px;padding:0", declared("TextArea", "full"));
     expect(measured()?.violations).toEqual([]);
-    expect(measured()?.borderRadius?.knob).toBe("TextArea min(radius:full, panelPadding:small)");
+    expect(measured()?.borderRadius?.knob).toBe("TextArea min(radius:full, panelPadding)");
   });
 
   it("audits a TextArea box's own padding on the ordinary scale", () => {
-    specimen("border-radius:9px;padding:15px", declared("TextArea", "medium", "medium"));
+    specimen("border-radius:9px;padding:15px", declared("TextArea", "medium"));
     expect(measured()?.violations.join(" ")).toContain("paddingTop: 15px is off-scale");
   });
 
   it.each([
-    ["the uncapped token", "border-radius:50px", declared("TextArea", "full", "small")],
-    ["a cap for another space", "border-radius:18px", declared("TextArea", "full", "small")],
-    ["the token past the cap", "border-radius:16px", declared("TextArea", "large", "small")],
-    ["an unknown radius stop", "border-radius:13px", declared("TextArea", "round", "small")],
+    ["the uncapped token", "border-radius:50px", declared("TextArea", "full")],
+    ["a cap off the panelPadding role", "border-radius:13px", declared("TextArea", "full")],
+    ["a radius past the cap", "border-radius:24px", declared("TextArea", "full")],
+    ["an unknown radius stop", "border-radius:13px", declared("TextArea", "round")],
   ])("rejects %s", (_label, style, attrs) => {
     specimen(style, attrs);
     expect(measured()?.borderRadius?.offScale).toBe(true);
   });
 
   it("names a container the audit does not know instead of trusting it", () => {
-    specimen("border-radius:13px;padding:13px", declared("Tile", "full", "small"));
+    specimen("border-radius:13px;padding:13px", declared("Tile", "full"));
     expect(measured()?.violations.join(" ")).toContain('"Tile" is not a container');
   });
 });
 
 describe("stacked rows cap their outer corners and square the inner ones (MPO-56)", () => {
-  const row = (position: string, radius: string, space: string) => ({
+  const row = (position: string, radius: string) => ({
     "data-constraint-container": "StackedRow",
     "data-stack-position": position,
     "data-radius-knob": radius,
-    "data-space-knob": space,
   });
   const corners = (tl: number, tr: number, br: number, bl: number) =>
     `border-top-left-radius:${tl}px;border-top-right-radius:${tr}px;` +
-    `border-bottom-right-radius:${br}px;border-bottom-left-radius:${bl}px;padding:7px 13px`;
+    `border-bottom-right-radius:${br}px;border-bottom-left-radius:${bl}px;padding:6px 12px`;
 
   it.each([
-    ["first", corners(13, 13, 0, 0)],
+    ["first", corners(16, 16, 0, 0)],
     ["middle", corners(0, 0, 0, 0)],
-    ["last", corners(0, 0, 13, 13)],
-    ["only", corners(13, 13, 13, 13)],
-  ])("accepts a %s row capped at the row padding", (position, style) => {
-    specimen(style, row(position, "large", "small"));
+    ["last", corners(0, 0, 16, 16)],
+    ["only", corners(16, 16, 16, 16)],
+  ])("accepts a %s row capped at the panelPadding role", (position, style) => {
+    specimen(style, row(position, "full"));
     expect(measured()?.violations).toEqual([]);
   });
 
   it("names the stop it resolved on an outer corner", () => {
-    specimen(corners(18, 18, 0, 0), row("first", "full", "medium"));
-    expect(measured()?.borderTopLeftRadius?.knob).toBe(
-      "StackedRow min(radius:full, panelPadding:medium)",
-    );
+    specimen(corners(16, 16, 0, 0), row("first", "full"));
+    expect(measured()?.borderTopLeftRadius?.knob).toBe("StackedRow min(radius:full, panelPadding)");
   });
 
   it.each([
-    ["an uncapped outer corner", corners(16, 16, 0, 0), row("first", "large", "small")],
-    ["a rounded inner corner", corners(13, 13, 13, 0), row("first", "large", "small")],
-    ["a rounded middle row", corners(13, 0, 0, 0), row("middle", "large", "small")],
-    ["a missing position", corners(13, 13, 13, 13), row("", "large", "small")],
+    ["an uncapped outer corner", corners(24, 24, 0, 0), row("first", "full")],
+    ["a rounded inner corner", corners(16, 16, 16, 0), row("first", "full")],
+    ["a rounded middle row", corners(16, 0, 0, 0), row("middle", "full")],
+    ["a missing position", corners(16, 16, 16, 16), row("", "full")],
   ])("rejects %s", (_label, style, attrs) => {
     specimen(style, attrs);
     expect(measured()?.borderRadius?.offScale).toBe(true);
   });
 
   it("says which corner is inner", () => {
-    specimen(corners(0, 0, 13, 9), row("last", "large", "small"));
+    specimen(corners(0, 0, 16, 9), row("last", "full"));
     expect(measured()?.violations).toEqual([
-      "borderBottomLeftRadius: 9px does not match StackedRow cap (13px)",
+      "borderBottomLeftRadius: 9px does not match StackedRow cap (16px)",
     ]);
-    specimen(corners(9, 0, 13, 13), row("last", "large", "small")).id = "other";
+    specimen(corners(9, 0, 16, 16), row("last", "full")).id = "other";
     const other = audit().elements.find((el) => el.id === "other");
     expect(other?.violations).toEqual([
       "borderTopLeftRadius: 9px is an inner corner of a last StackedRow (0px)",
@@ -313,17 +452,16 @@ describe("a fixed-padding container caps at the padding it has (DG-RAD-04, MPO-5
   const own = (radius: string) => ({
     "data-constraint-container": "OwnInset",
     "data-radius-knob": radius,
-    "data-space-knob": "medium",
   });
 
-  it("accepts full capped at its own 13px padding whatever the space stop", () => {
-    specimen("border-radius:13px;padding:13px", own("full"));
+  it("accepts full capped at its own 12px padding", () => {
+    specimen("border-radius:12px;padding:12px", own("full"));
     expect(measured()?.violations).toEqual([]);
     expect(measured()?.borderRadius?.knob).toBe("OwnInset min(radius:full, own padding)");
   });
 
   it("accepts the token while it fits", () => {
-    specimen("border-radius:9px;padding:13px", own("medium"));
+    specimen("border-radius:8px;padding:12px", own("small"));
     expect(measured()?.violations).toEqual([]);
   });
 
@@ -335,3 +473,52 @@ describe("a fixed-padding container caps at the padding it has (DG-RAD-04, MPO-5
     expect(measured()?.borderRadius?.offScale).toBe(true);
   });
 });
+
+describe("container and field keys on every scale", () => {
+  for (const [control, type] of [
+    [40, 15],
+    [44, 15],
+    [36, 14],
+  ]) {
+    for (const [stop, controlKey, containerKey] of [
+      ["none", 0, 0],
+      ["small", 2, 4],
+      ["medium", 4, 6],
+      ["large", 6, 8],
+      ["full", 12, 12],
+    ] as const) {
+      for (const part of ["Card", "PageSection", "StackedRow", "OwnInset", "TextArea"]) {
+        it(`${part}/${stop} reads ${control}/${type} by key`, () => {
+          const scale = generateScale({ control, type });
+          publish(scale);
+          const pad = scale.tokens.space.$4;
+          const radius = scale.tokens.radius[part === "TextArea" ? controlKey : containerKey];
+          specimen(`border-radius:${Math.min(radius, pad)}px;padding:${pad}px`, {
+            "data-constraint-container": part,
+            "data-radius-knob": stop,
+            "data-tier": "content",
+            "data-stack-position": "only",
+          });
+          expect(measured()?.violations).toEqual([]);
+        });
+      }
+    }
+  }
+
+  it("every serialized fallback equals its generated default token", () => {
+    const fallbacks = [
+      ...runConstraintAudit.toString().matchAll(/_(radius|space|size)\("([^"]+)", ([\d.]+)\)/g),
+    ];
+    expect(fallbacks.length).toBeGreaterThan(20);
+    for (const [, group, key, value] of fallbacks) {
+      const table = tokens[group as keyof typeof tokens] as Record<string, number>;
+      expect(Number(value), `${group}/${key}`).toBe(table[group === "radius" ? key : `$${key}`]);
+    }
+  });
+
+  it.each([20, 16])("container radius %i is on the generic radius scale", (radius) => {
+    specimen(`border-radius:${radius}px`);
+    expect(measured()?.borderRadius?.offScale).toBe(false);
+    expect(measured()?.borderRadius?.knob).toContain("container");
+  });
+});