@multiplatform.one/theme 7.11.0 → 7.15.0

package/README.md

@@ -66,8 +66,28 @@ Rules that keep knobs sound:
 - Resolution order: Preset → intent → intent+component → size → density →
   reduced-motion → `resolveKnobs()` override callback.
 
-Full standard: `agent-os/standards/frontend/knobs-system.md` in the
-[multiplatform.one repo](https://gitlab.com/bitspur/frappe/multiplatform.one).
+A surface that only reaches part of the theme matrix ships only that part.
+Themes are CSS in the served document, so the full 1,580-theme matrix is paid
+for on every page. `subset` filters which themes exist, never what one
+contains:
+
+```ts
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+
+export const themeConfig = createDefaultThemeConfig({
+  subset: {
+    components: ["Button", "Input", "TextArea", "Card", "ListItem"],
+    tints: ["accent", "active", "alt1", "alt2", "error", "success", "warning"],
+  },
+});
+```
+
+A dropped component sub-theme does not crash, it renders in its parent's
+colours, so list everything the surface renders and enters. `subsetThemes`
+is the same filter as a pure function over a built matrix.
+
+Full standard: `docs/standards/frontend/knobs-system.md` in the
+[multiplatform.one repo](https://git.corp.bitspur.com/multiplatform.one/mpo).
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.11.0",
+  "version": "7.15.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -12,7 +12,7 @@
   "author": "BitSpur",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "url": "git+https://git.corp.bitspur.com/multiplatform.one/mpo.git",
     "directory": "public/theme"
   },
   "source": "src/index.ts",
@@ -44,8 +44,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "7.11.0",
-    "@multiplatform.one/store": "7.11.0",
+    "@multiplatform.one/platform": "7.15.0",
+    "@multiplatform.one/store": "7.15.0",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -57,8 +57,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.11.0",
-    "@multiplatform.one/test-utils": "7.11.0",
+    "@multiplatform.one/config": "7.15.0",
+    "@multiplatform.one/test-utils": "7.15.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

@@ -155,3 +155,105 @@ describe("font weight provenance", () => {
     expect(measured()?.fontWeight?.offScale).toBe(true);
   });
 });
+
+function laidOut(el: HTMLElement, width: number, height: number) {
+  Object.defineProperty(el, "offsetWidth", { configurable: true, value: width });
+  Object.defineProperty(el, "offsetHeight", { configurable: true, value: height });
+  return el;
+}
+
+describe("BINARY parts measure 0 or their own h/2 (DG-RAD-03)", () => {
+  const binary = { "data-radius-resolution": "BINARY" };
+
+  it.each([
+    ["switch track", 88, 44, 22],
+    ["bold thumb", 40, 40, 20],
+    ["default thumb", 38, 38, 19],
+  ])("accepts a %s at h/2", (_part, width, height, radius) => {
+    laidOut(specimen(`border-radius:${radius}px`, binary), width, height);
+    expect(measured()?.violations).toEqual([]);
+    expect(measured()?.borderRadius?.knob).toBe("BINARY 0 | h/2");
+  });
+
+  it("accepts a square BINARY part at none", () => {
+    laidOut(specimen("border-radius:0", binary), 88, 44);
+    expect(measured()?.violations ?? []).toEqual([]);
+  });
+
+  it.each([
+    ["an intermediate radius", "border-radius:9px"],
+    ["the uncapped token", "border-radius:50px"],
+    ["h/2 of the longer edge", "border-radius:44px"],
+    ["one corner off h/2", "border-radius:22px 22px 22px 16px"],
+    ["a percentage", "border-radius:50%"],
+  ])("rejects %s", (_label, style) => {
+    laidOut(specimen(style, binary), 88, 44);
+    expect(measured()?.borderRadius?.offScale).toBe(true);
+    expect(measured()?.violations.length).toBeGreaterThan(0);
+  });
+
+  it("keeps an undeclared h/2 radius off-scale", () => {
+    laidOut(specimen("border-radius:22px"), 88, 44);
+    expect(measured()?.borderRadius?.offScale).toBe(true);
+  });
+});
+
+describe("declared capped containers beyond Card (DG-RAD-04)", () => {
+  const declared = (container: string, radius: string, space: 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"));
+    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");
+  });
+
+  it("accepts a TextArea box at the cap whatever its field inset", () => {
+    specimen("border-radius:13px;padding:0", declared("TextArea", "full", "small"));
+    expect(measured()?.violations).toEqual([]);
+    expect(measured()?.borderRadius?.knob).toBe("TextArea min(radius:full, panelPadding:small)");
+  });
+
+  it("audits a TextArea box's own padding on the ordinary scale", () => {
+    specimen("border-radius:9px;padding:15px", declared("TextArea", "medium", "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")],
+  ])("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"));
+    expect(measured()?.violations.join(" ")).toContain('"Tile" is not a container');
+  });
+});
+
+describe("element labels hold nothing a knob or a mount writes", () => {
+  it("drops React useId ids and Tamagui atomic classes", () => {
+    const el = specimen("border-radius:12px");
+    el.id = "_r_3i_";
+    el.className = "is_View _borderStartStartRadius-0hover-c-radius-12 _outlineWidth-0focus-0px";
+    expect(measured()).toBeUndefined();
+    const found = audit().elements.find((entry) => entry.label.startsWith("div"));
+    expect(found?.label).toBe("div.is_View");
+  });
+
+  it("keeps an authored id", () => {
+    specimen("border-radius:12px");
+    expect(audit().elements[0]?.label).toBe("div#specimen");
+  });
+});

package/src/audit/constraintAudit.ts

@@ -568,10 +568,15 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
 
   function elementLabel(el: Element): string {
     const tag = el.tagName.toLowerCase();
-    const id = el.id ? `#${el.id}` : "";
-    // Only take non-hash classes (Tamagui hash classes start with _ or are short hashes)
+    // Labels are part of the no-breakage signature, so nothing a knob or a
+    // render order writes may reach them: React useId ids renumber per mount,
+    // and Tamagui atomic classes (always `_`-prefixed) spell resolved values.
+    const generatedId = /^(?:_r_[0-9a-z]+_|:r[0-9a-z]+:|«r[0-9a-z]+»)$/.test(el.id);
+    const id = el.id && !generatedId ? `#${el.id}` : "";
     const classes = Array.from(el.classList)
-      .filter((c) => c.length > 3 && !/^[_a-z0-9]{1,8}-/.test(c) && !/^\d/.test(c))
+      .filter(
+        (c) => c.length > 3 && !c.startsWith("_") && !/^[_a-z0-9]{1,8}-/.test(c) && !/^\d/.test(c),
+      )
       .slice(0, 3)
       .join(".");
     const cls = classes ? `.${classes}` : "";
@@ -729,12 +734,28 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
 
     let hasAnyProp = false;
 
-    // Axiom 1 / DG-RAD-04: only the documented padded Card tiers own this
-    // cap. Provenance is declarative; every inset and corner is still measured.
-    const cardContainer =
-      el.getAttribute("data-constraint-container") === "Card" &&
-      ["content", "elevated"].includes(el.getAttribute("data-tier") ?? "");
-    if (cardContainer) {
+    // Axiom 1 / DG-RAD-04: only a declared padded container owns the cap.
+    // Provenance is declarative; every corner is still measured, and so is the
+    // inset of the containers whose own padding IS the panelPadding knob.
+    const containerName = el.getAttribute("data-constraint-container");
+    const ownsInset = containerName === "Card" || containerName === "PageSection";
+    const capContainer =
+      containerName === "Card"
+        ? ["content", "elevated"].includes(el.getAttribute("data-tier") ?? "")
+        : containerName === "PageSection" || containerName === "TextArea";
+    if (containerName !== null && containerName !== "Card" && !capContainer) {
+      entry.violations.push(
+        `data-constraint-container: "${containerName}" is not a container the cap audit knows`,
+      );
+    }
+    const binaryPart = el.getAttribute("data-radius-resolution") === "BINARY";
+    const corners = [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomRightRadius",
+      "borderBottomLeftRadius",
+    ] as const;
+    if (capContainer) {
       const radiusKnob = el.getAttribute("data-radius-knob") ?? "";
       const spaceKnob = el.getAttribute("data-space-knob") ?? "";
       const radiusStop = Object.hasOwn(_BORDER_RADIUS_KNOB, radiusKnob)
@@ -745,30 +766,28 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
         : undefined;
       const paddingSides = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"] as const;
       const measuredInsets = paddingSides.map((prop) => parsePx(style[prop]));
-      for (const [index, prop] of paddingSides.entries()) {
-        const value = measuredInsets[index];
-        const offScale = inset === undefined || value !== inset;
-        entry[prop] = {
-          value: value ?? 0,
-          unit: "px",
-          knob: `Card panelPadding:${spaceKnob}`,
-          offScale,
-        };
-        if (offScale)
-          entry.violations.push(
-            `${prop}: ${style[prop]} does not match Card panelPadding:${spaceKnob} (${inset ?? "unknown"}px)`,
-          );
+      if (ownsInset) {
+        for (const [index, prop] of paddingSides.entries()) {
+          const value = measuredInsets[index];
+          const offScale = inset === undefined || value !== inset;
+          entry[prop] = {
+            value: value ?? 0,
+            unit: "px",
+            knob: `${containerName} panelPadding:${spaceKnob}`,
+            offScale,
+          };
+          if (offScale)
+            entry.violations.push(
+              `${prop}: ${style[prop]} does not match ${containerName} panelPadding:${spaceKnob} (${inset ?? "unknown"}px)`,
+            );
+        }
       }
       const expected =
-        radiusStop === undefined || inset === undefined || measuredInsets.some((v) => v === null)
+        radiusStop === undefined ||
+        inset === undefined ||
+        (ownsInset && measuredInsets.some((v) => v === null))
           ? undefined
-          : Math.min(radiusStop, inset, ...(measuredInsets as number[]));
-      const corners = [
-        "borderTopLeftRadius",
-        "borderTopRightRadius",
-        "borderBottomRightRadius",
-        "borderBottomLeftRadius",
-      ] as const;
+          : Math.min(radiusStop, inset, ...(ownsInset ? (measuredInsets as number[]) : []));
       for (const prop of corners) {
         const raw = style[prop];
         // A corner may have two elliptical axes. Percentages are not px caps.
@@ -779,13 +798,13 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
         const result = {
           value: parsePx(raw) ?? 0,
           unit: "px",
-          knob: `Card min(radius:${radiusKnob}, panelPadding:${spaceKnob})`,
+          knob: `${containerName} min(radius:${radiusKnob}, panelPadding:${spaceKnob})`,
           offScale,
         };
         entry[prop] = result;
         if (offScale)
           entry.violations.push(
-            `${prop}: ${raw} does not match Card cap (${expected ?? "unknown"}px)`,
+            `${prop}: ${raw} does not match ${containerName} cap (${expected ?? "unknown"}px)`,
           );
       }
       entry.borderRadius = {
@@ -793,6 +812,32 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
         offScale: corners.some((prop) => entry[prop]?.offScale),
       };
       hasAnyProp = true;
+    } else if (binaryPart) {
+      // DG-RAD-03: square, or a pill/circle of the part's own shorter edge,
+      // at every stop and in every state. Layout size, not the transformed
+      // box, so a translated thumb measures the same as a resting one.
+      const box = el as HTMLElement;
+      const half = Math.min(box.offsetWidth, box.offsetHeight) / 2;
+      const measuredCorners = corners.map((prop) => style[prop].trim().split(/\s+/));
+      if (measuredCorners.some((axes) => axes.some((axis) => parsePx(axis) !== 0))) {
+        for (const [index, prop] of corners.entries()) {
+          const raw = style[prop];
+          const offScale = measuredCorners[index].some((axis) => {
+            if (!/^\d+(?:\.\d+)?(?:px)?$/.test(axis)) return true;
+            const value = parsePx(axis) ?? 0;
+            // offsetWidth/offsetHeight round to whole px; the painted h/2 does not.
+            return value !== 0 && Math.abs(value - half) > 0.5;
+          });
+          entry[prop] = { value: parsePx(raw) ?? 0, unit: "px", knob: "BINARY 0 | h/2", offScale };
+          if (offScale)
+            entry.violations.push(`${prop}: ${raw} is neither 0 nor BINARY h/2 (${half}px)`);
+        }
+        entry.borderRadius = {
+          ...entry.borderTopLeftRadius!,
+          offScale: corners.some((prop) => entry[prop]?.offScale),
+        };
+        hasAnyProp = true;
+      }
     } else if (!isPercentageBorderRadius(el)) {
       // Ordinary controls and identity recipes retain their existing scales.
       const br = parsePx(style.borderTopLeftRadius || style.borderRadius);
@@ -839,7 +884,7 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
     // Only check padding on elements that look like surfaces (have border-radius
     // or border-width already audited). Padding on all elements creates too many
     // false positives from browser defaults and third-party components.
-    if (!cardContainer && (entry.borderRadius || entry.borderWidth)) {
+    if (!(capContainer && ownsInset) && (entry.borderRadius || entry.borderWidth)) {
       const sides = [
         ["paddingTop", style.paddingTop],
         ["paddingRight", style.paddingRight],

package/src/figma/figmaTokens.spec.ts

@@ -183,8 +183,7 @@ describe("buildFigmaTokens", () => {
     it("exports platform-normalized elevation modes", () => {
       const { modes } = result.knobs.elevation;
       expect(modes.none).toEqual({ sizeToken: null, px: null });
-      expect(modes.small.sizeToken).toBe("$1");
-      expect(modes.small.px).toBe((defaultConfig.tokens.size as Record<string, number>).$1);
+      expect(modes.small).toEqual({ sizeToken: null, px: null });
       expect(modes.medium.sizeToken).toBe("$2");
       expect(modes.large.sizeToken).toBe("$4");
     });

package/src/numbers.spec.ts

@@ -1,5 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { formatCurrency, formatNumber, formatPercent, resolveCurrencyCode } from "./numbers";
+import {
+  currencyAffix,
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  resolveCurrencyCode,
+} from "./numbers";
 
 // Pin locale so assertions don't depend on the host machine.
 const enUS = { locale: "en-US" } as const;
@@ -110,3 +116,23 @@ describe("resolveCurrencyCode", () => {
     expect(resolveCurrencyCode(undefined)).toBeUndefined();
   });
 });
+
+describe("currencyAffix (money editor glyph, MPO-221)", () => {
+  it("takes the glyph and its side from the locale's money register", () => {
+    expect(currencyAffix("USD", "en-US")).toEqual({ glyph: "$", position: "leading" });
+    expect(currencyAffix("EUR", "de-DE")).toEqual({ glyph: "€", position: "trailing" });
+  });
+
+  it("resolves a Frappe-style symbol through its code", () => {
+    expect(currencyAffix("₹", "en-IN")).toEqual({ glyph: "₹", position: "leading" });
+  });
+
+  it("returns a symbol with no known code as itself, leading", () => {
+    expect(currencyAffix("Fr", "en-US")).toEqual({ glyph: "Fr", position: "leading" });
+  });
+
+  it("returns nothing without a currency", () => {
+    expect(currencyAffix(undefined)).toBeUndefined();
+    expect(currencyAffix("")).toBeUndefined();
+  });
+});

package/src/numbers.ts

@@ -76,6 +76,46 @@ export function resolveCurrencyCode(symbol: string | undefined): string | undefi
   return CURRENCY_SYMBOL_TO_CODE[symbol];
 }
 
+export interface CurrencyAffix {
+  glyph: string;
+  /** Which side of the amount the locale writes the glyph on. */
+  position: "leading" | "trailing";
+}
+
+/**
+ * The glyph a money field writes beside its amount ("$", "€", "₹"), and on
+ * which side, for a code or a Frappe-style symbol. The money register's own
+ * placement, so an editor and `formatCurrency` agree. A symbol with no known
+ * code comes back as itself, leading.
+ */
+export function currencyAffix(
+  currency: string | undefined,
+  locale?: string,
+): CurrencyAffix | undefined {
+  if (!currency) return undefined;
+  const code = resolveCurrencyCode(currency);
+  if (code) {
+    try {
+      const parts = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: code,
+        currencyDisplay: "narrowSymbol",
+      }).formatToParts(1);
+      const glyphIndex = parts.findIndex((part) => part.type === "currency");
+      const amountIndex = parts.findIndex((part) => part.type === "integer");
+      if (glyphIndex !== -1) {
+        return {
+          glyph: parts[glyphIndex].value,
+          position: amountIndex !== -1 && glyphIndex > amountIndex ? "trailing" : "leading",
+        };
+      }
+    } catch {
+      // A malformed code falls through to the literal glyph below.
+    }
+  }
+  return { glyph: currency, position: "leading" };
+}
+
 interface CoercedNumber {
   num: number;
 }

package/src/theme/Surface.spec.tsx

@@ -1,3 +1,4 @@
+import { TestProviders } from "@multiplatform.one/test-utils";
 /**
  * Surface context — nested size/density step-down (LC-68).
  */
@@ -117,7 +118,11 @@ describe("Surface nesting (LC-68)", () => {
 describe("useResolvedKnobs inside Surface", () => {
   it("size=small density=compact → sizeToken $3, compact gap, small desktop control height", () => {
     const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(Surface, { size: "small", density: "compact" }, children);
+      createElement(
+        TestProviders,
+        null,
+        createElement(Surface, { size: "small", density: "compact" }, children),
+      );
     const { result } = renderHook(() => useResolvedKnobs(), { wrapper });
     expect(result.current.knobProps.size).toBe("small");
     expect(result.current.knobProps.sizeToken).toBe("$3");
@@ -128,7 +133,7 @@ describe("useResolvedKnobs inside Surface", () => {
 
   it("a large size request inside a medium Surface resolves medium", () => {
     const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(Surface, { size: "medium" }, children);
+      createElement(TestProviders, null, createElement(Surface, { size: "medium" }, children));
     const { result } = renderHook(() => useResolvedKnobs({ size: "$5" }), { wrapper });
     expect(result.current.knobProps.size).toBe("medium");
     expect(result.current.knobProps.sizeToken).toBe("$4");
@@ -136,7 +141,7 @@ describe("useResolvedKnobs inside Surface", () => {
 
   it("Surface size is inherited as the subtree default (lg over global medium)", () => {
     const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(Surface, { size: "lg" }, children);
+      createElement(TestProviders, null, createElement(Surface, { size: "lg" }, children));
     const { result } = renderHook(() => useResolvedKnobs(), { wrapper });
     expect(result.current.knobProps.size).toBe("large");
     expect(result.current.knobProps.sizeToken).toBe("$5");
@@ -144,7 +149,7 @@ describe("useResolvedKnobs inside Surface", () => {
 
   it("compact:false inside a compact Surface stays compact and still steps space", () => {
     const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(Surface, { density: "compact" }, children);
+      createElement(TestProviders, null, createElement(Surface, { density: "compact" }, children));
     const { result } = renderHook(() => useResolvedKnobs({ compact: false }), { wrapper });
     expect(result.current.knobProps.density).toBe("compact");
     expect(result.current.knobProps.gap).toEqual({ gap: "$2" });

package/src/theme/createDefaultThemeConfig.ts

@@ -18,6 +18,7 @@ import { type SizeRecipeInputs } from "./recipeInputs";
 import { type ThemeConfig, createThemeConfig } from "./shared";
 import { assertResolvableThemeValues } from "./themeValue";
 import { getGeneratedSizeRecipes, getSizeRecipeInputs, setSizeRecipeInputs } from "./sizeRecipes";
+import { type ThemeSubset, subsetThemes } from "./subsetThemes";
 
 /**
  * The Tamagui era this theme config resolves against (MPO-19 X13; rendered
@@ -66,6 +67,12 @@ export interface CreateDefaultThemeConfigOptions {
    * theme-builder).
    */
   recipeInputs?: Partial<SizeRecipeInputs>;
+  /**
+   * Ship only the themes this surface can reach (`10` AC-6). Applied to the
+   * built matrix, after `additionalThemes`, so a subset filters which themes
+   * exist and never changes what one contains. See `subsetThemes`.
+   */
+  subset?: ThemeSubset;
 }
 
 /**
@@ -136,7 +143,7 @@ export function createDefaultThemeConfig(
   // theming. This optimization breaks builds served outside Tamagui's SSR
   // pipeline (e.g. the Frappe SPA) where runtime JS themes are required.
   // Always keep themes to ensure TamaguiProvider has valid theme data.
-  const themes = builtThemes;
+  const themes = options.subset ? subsetThemes(builtThemes, options.subset) : builtThemes;
   return createThemeConfig(
     {
       ...defaultConfig,

package/src/theme/index.ts

@@ -30,10 +30,13 @@ export * from "./resolveKnobs";
 export * from "./shared";
 export * from "./themeValue";
 export * from "./sizeRecipes";
+export * from "./subsetThemes";
 export * from "./Surface";
 export * from "./tileSizes";
+export * from "./transitionProps";
 
 export * from "./theme";
 export * from "./Tint";
 export * from "./useResolvedKnobs";
 export * from "./useTheme";
+export * from "./useTouchSurface";

package/src/theme/intent.spec.tsx

@@ -4,7 +4,9 @@ import { renderToString } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 // Mock Tamagui's <Theme> so we can inspect the chosen theme name
-vi.mock("tamagui", () => ({
+vi.mock("tamagui", async (importOriginal) => ({
+  useDidFinishSSR: (await importOriginal<typeof import("tamagui")>()).useDidFinishSSR,
+  // These tests inspect intent names with a fixed light scheme.
   useThemeName: () => "light",
   Theme: ({ name, children }: { name: string; children: ReactNode }) =>
     createElement("div", { "data-tamagui-theme": name }, children),
@@ -214,8 +216,8 @@ describe("useResolvedKnobs with Intent", () => {
       ),
     );
 
-    // "error" → Button: { elevation: "small" } → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // "error" → Button: { elevation: "small" }, and small paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
   });
 
   it("resolves component-specific intent overrides via explicit option", () => {
@@ -223,8 +225,8 @@ describe("useResolvedKnobs with Intent", () => {
 
     renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
 
-    // "error" → Button: { elevation: "small" } → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // "error" → Button: { elevation: "small" }, and small paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
   });
 
   it("preset intent overrides take precedence over defaultIntents", () => {
@@ -287,8 +289,8 @@ describe("useResolvedKnobs with Intent", () => {
 
     renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
 
-    // Default knobs: elevation "small" → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // Default knobs: elevation "small" paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
     expect(capture.result.knobProps.textAccent).toBe("high");
   });
 });

package/src/theme/layoutTokensHooks.spec.tsx

@@ -1,3 +1,4 @@
+import { TestProviders } from "@multiplatform.one/test-utils";
 /**
  * Layout hook specs — the live half of layoutTokens (DG-LAY-01/03): the
  * viewport-driven `useLayoutSizeClass`, the pane budget `useMultiPane`, and
@@ -148,8 +149,8 @@ describe("useMultiPane", () => {
 describe("useSemanticGaps", () => {
   it("maps within-group to knob gap and between-groups to the large gap", () => {
     setViewportWidth(1000);
-    const { result: knobs } = renderHook(() => useResolvedKnobs());
-    const { result } = renderHook(() => useSemanticGaps());
+    const { result: knobs } = renderHook(() => useResolvedKnobs(), { wrapper: TestProviders });
+    const { result } = renderHook(() => useSemanticGaps(), { wrapper: TestProviders });
     expect(result.current.withinGroup).toEqual(knobs.current.knobProps.gap);
     expect(result.current.betweenGroups).toEqual(knobs.current.knobProps.gapLg);
     // The roles must differ, or grouping hierarchy is invisible.

package/src/theme/radiusClass.ts

@@ -81,6 +81,24 @@ export function radiusClassProps(
   return { "data-radius-class": radiusClass, "data-radius-part": part };
 }
 
+export interface RadiusResolutionDeclaration {
+  "data-radius-resolution": "BINARY";
+}
+
+/**
+ * Declare that a part resolves through the BINARY row (DG-RAD-03), so the
+ * constraint audit measures it as 0 or half its own shorter edge. The token
+ * scale has no h/2 value, so an undeclared thumb or track reads off-scale at
+ * every stop. Spread it only where the painted radius IS the resolved one: a
+ * consumer radius override ejects the part from the class.
+ *
+ * @example
+ * <StyledSwitch.Thumb {...radiusResolutionProps("BINARY")} borderRadius={thumbRadius} />
+ */
+export function radiusResolutionProps(radiusClass: "BINARY"): RadiusResolutionDeclaration {
+  return { "data-radius-resolution": radiusClass };
+}
+
 // ── Radius resolution (DG-RAD-01..05) ─────────────────────────
 
 /**