@multiplatform.one/theme 7.4.1 → 7.6.0

package/src/theme/cornerSmoothing.spec.ts

@@ -1,27 +1,294 @@
-import { beforeEach, describe, expect, it } from "vitest";
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdtempSync, readdirSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createElement, type ReactNode } from "react";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { defaultPreset } from "./presets";
+import { PresetContext, type PresetContextValue } from "./PresetContext";
 import {
+  CORNER_SHAPE_CSS_VAR,
+  CORNER_SHAPE_ROUND,
+  CORNER_SHAPE_ROUND_COMPUTED,
+  CORNER_SHAPE_SMOOTH,
+  CORNER_SHAPE_SMOOTH_COMPUTED,
+  CORNER_SMOOTHING_ROOT_ATTR,
+  CORNER_SMOOTHING_STYLE_TAG_ID,
+  CornerSmoothingStyles,
+  applyRootCornerSmoothing,
   cornerSmoothClassName,
   cornerSmoothingCss,
+  cssSupportsCornerShape,
   ensureCornerSmoothingStyles,
+  isRoundComputedCornerShape,
+  isSmoothComputedCornerShape,
+  readComputedCornerShape,
 } from "./cornerSmoothing";
 
+/**
+ * Playwright's `chrome-headless-shell` builds, newest revision first.
+ *
+ * This is about coverage, not speed — an installed Chrome reaches `--dump-dom`
+ * in ~5s and is fine. The point is that a machine or a CI image with no Chrome
+ * installed but a Playwright cache present would otherwise take the held-out
+ * branch below and prove nothing, silently.
+ */
+function findHeadlessShells(): string[] {
+  const home = process.env.HOME ?? "";
+  const roots = [`${home}/Library/Caches/ms-playwright`, `${home}/.cache/ms-playwright`];
+  const found: { revision: number; bin: string }[] = [];
+  for (const root of roots) {
+    if (!existsSync(root)) continue;
+    for (const entry of readdirSync(root)) {
+      const revision = Number(entry.replace("chromium_headless_shell-", ""));
+      if (!entry.startsWith("chromium_headless_shell-") || Number.isNaN(revision)) continue;
+      for (const arch of ["mac-arm64", "mac-x64", "linux64"]) {
+        const bin = join(root, entry, `chrome-headless-shell-${arch}`, "chrome-headless-shell");
+        if (existsSync(bin)) found.push({ revision, bin });
+      }
+    }
+  }
+  return found.sort((a, b) => b.revision - a.revision).map((f) => f.bin);
+}
+
+function findChrome(): string | undefined {
+  const candidates = [
+    process.env.CHROME_BIN,
+    ...findHeadlessShells(),
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    `${process.env.HOME ?? ""}/.local/bin/google-chrome`,
+    "/usr/bin/google-chrome",
+    "/usr/bin/chromium",
+  ].filter((p): p is string => Boolean(p));
+  return candidates.find((p) => existsSync(p));
+}
+
 describe("cornerSmoothing (Axiom 15 OPTICS)", () => {
   it("scopes the squircle declaration to the fragment class", () => {
     expect(cornerSmoothClassName).toBe("mp-corner-smooth");
     expect(cornerSmoothingCss).toBe(".mp-corner-smooth { corner-shape: squircle; }");
+    expect(cornerSmoothingCss).toContain(`corner-shape: ${CORNER_SHAPE_SMOOTH}`);
   });
 
   describe("stylesheet mount", () => {
     beforeEach(() => {
-      document.getElementById("mp-corner-smoothing-styles")?.remove();
+      document.getElementById(CORNER_SMOOTHING_STYLE_TAG_ID)?.remove();
     });
 
     it("mounts the stylesheet once (idempotent)", () => {
       ensureCornerSmoothingStyles();
       ensureCornerSmoothingStyles();
-      const tags = document.querySelectorAll("#mp-corner-smoothing-styles");
+      const tags = document.querySelectorAll(`#${CORNER_SMOOTHING_STYLE_TAG_ID}`);
       expect(tags).toHaveLength(1);
       expect(tags[0]?.textContent).toBe(cornerSmoothingCss);
     });
   });
+
+  describe("support detection (measured, not assumed)", () => {
+    it("is false when the engine is missing (null) or has no supports()", () => {
+      expect(cssSupportsCornerShape(null)).toBe(false);
+      expect(cssSupportsCornerShape({ supports: undefined })).toBe(false);
+    });
+
+    it("is true only when the UA reports the squircle value", () => {
+      expect(cssSupportsCornerShape({ supports: () => true })).toBe(true);
+      expect(cssSupportsCornerShape({ supports: () => false })).toBe(false);
+    });
+
+    it("swallows a throwing supports() as unsupported", () => {
+      expect(
+        cssSupportsCornerShape({
+          supports: () => {
+            throw new Error("nope");
+          },
+        }),
+      ).toBe(false);
+    });
+  });
+
+  describe("computed-shape reader", () => {
+    it("prefers getPropertyValue over the camelCase IDL", () => {
+      expect(
+        readComputedCornerShape({
+          getPropertyValue: (name) => (name === "corner-shape" ? "superellipse(2)" : ""),
+          cornerShape: "round",
+        }),
+      ).toBe("superellipse(2)");
+    });
+
+    it("falls back to the IDL when the property channel is empty", () => {
+      expect(
+        readComputedCornerShape({
+          getPropertyValue: () => "",
+          cornerShape: "squircle",
+        }),
+      ).toBe("squircle");
+    });
+
+    it("treats specified squircle and computed superellipse(2) as smooth", () => {
+      expect(isSmoothComputedCornerShape("squircle")).toBe(true);
+      expect(isSmoothComputedCornerShape("superellipse(2)")).toBe(true);
+      expect(isSmoothComputedCornerShape(" SuperEllipse(2) ")).toBe(true);
+      expect(isSmoothComputedCornerShape("round")).toBe(false);
+      expect(isSmoothComputedCornerShape("superellipse(1)")).toBe(false);
+    });
+
+    it("treats round / superellipse(1) / empty as the unsupported-or-round stop", () => {
+      expect(isRoundComputedCornerShape("round")).toBe(true);
+      expect(isRoundComputedCornerShape("superellipse(1)")).toBe(true);
+      expect(isRoundComputedCornerShape("")).toBe(true);
+      expect(isRoundComputedCornerShape("normal")).toBe(true);
+      expect(isRoundComputedCornerShape("squircle")).toBe(false);
+    });
+
+    it("a class-marked node plus the mounted sheet is classifiable", () => {
+      ensureCornerSmoothingStyles();
+      const el = document.createElement("div");
+      el.className = cornerSmoothClassName;
+      el.style.borderRadius = "16px";
+      document.body.appendChild(el);
+      expect(document.getElementById(CORNER_SMOOTHING_STYLE_TAG_ID)?.textContent).toBe(
+        cornerSmoothingCss,
+      );
+      const computed = readComputedCornerShape(getComputedStyle(el));
+      // Measured 2026-08-28: this happy-dom applies `squircle`. An engine
+      // that drops the unknown declaration reads empty/round. Either stop
+      // is a measured result, not an assumed skip.
+      expect(isSmoothComputedCornerShape(computed) || isRoundComputedCornerShape(computed)).toBe(
+        true,
+      );
+      el.remove();
+    });
+  });
+
+  describe("root channel", () => {
+    afterEach(() => {
+      document.documentElement.removeAttribute(CORNER_SMOOTHING_ROOT_ATTR);
+      document.documentElement.style.removeProperty(CORNER_SHAPE_CSS_VAR);
+      cleanup();
+    });
+
+    it("publishes the live stop on <html>", () => {
+      applyRootCornerSmoothing("smooth");
+      expect(document.documentElement.getAttribute(CORNER_SMOOTHING_ROOT_ATTR)).toBe("smooth");
+      expect(document.documentElement.style.getPropertyValue(CORNER_SHAPE_CSS_VAR)).toBe(
+        CORNER_SHAPE_SMOOTH,
+      );
+      applyRootCornerSmoothing("round");
+      expect(document.documentElement.getAttribute(CORNER_SMOOTHING_ROOT_ATTR)).toBe("round");
+      expect(document.documentElement.style.getPropertyValue(CORNER_SHAPE_CSS_VAR)).toBe(
+        CORNER_SHAPE_ROUND,
+      );
+    });
+
+    it("CornerSmoothingStyles mounts the stylesheet and follows the preset stop", () => {
+      document.getElementById(CORNER_SMOOTHING_STYLE_TAG_ID)?.remove();
+      const value: PresetContextValue = {
+        preset: {
+          ...defaultPreset,
+          knobs: { ...defaultPreset.knobs, cornerSmoothing: "smooth" },
+        },
+      };
+      render(
+        createElement(
+          PresetContext.Provider,
+          { value },
+          createElement(CornerSmoothingStyles) as ReactNode,
+        ),
+      );
+      expect(document.getElementById(CORNER_SMOOTHING_STYLE_TAG_ID)?.textContent).toBe(
+        cornerSmoothingCss,
+      );
+      expect(document.documentElement.getAttribute(CORNER_SMOOTHING_ROOT_ATTR)).toBe("smooth");
+    });
+  });
+
+  describe("supporting browser (Chromium)", () => {
+    it("computed corner-shape DIFFERS between round and smooth", () => {
+      const chrome = findChrome();
+      if (!chrome) {
+        // Held-out: no Chromium binary. The happy-dom arm above records
+        // whatever this harness computes as measured, not assumed.
+        return;
+      }
+      const dir = mkdtempSync(join(tmpdir(), "mp-corner-shape-"));
+      const htmlPath = join(dir, "probe.html");
+      writeFileSync(
+        htmlPath,
+        `<!doctype html><style>
+html, body { margin: 0; padding: 0; }
+.box { position: absolute; top: 0; width: 132px; height: 84px; border-radius: 16px; }
+.round { left: 0; corner-shape: round; }
+.smooth { left: 200px; corner-shape: squircle; }
+.classy { left: 400px; }
+.${cornerSmoothClassName} { corner-shape: squircle; }
+</style>
+<div id="round" class="box round"></div>
+<div id="smooth" class="box smooth"></div>
+<div id="classy" class="box classy ${cornerSmoothClassName}"></div>
+<pre id="out"></pre>
+<script>
+const read = (el) => {
+  const cs = getComputedStyle(el);
+  return (cs.getPropertyValue("corner-shape") || cs.cornerShape || "").trim();
+};
+// Walk 1px..8px diagonally in from the top-left. "1" means the box owns that
+// pixel. This reads the PAINTED curve, so it fails if an engine parses
+// corner-shape but still draws the plain arc — a property echo cannot fake it.
+const cornerMask = (id, left) => {
+  let bits = "";
+  for (let d = 1; d <= 8; d++) {
+    const hit = document.elementFromPoint(left + d, d);
+    bits += hit && hit.id === id ? "1" : "0";
+  }
+  return bits;
+};
+const out = {
+  supportsSquircle: CSS.supports("corner-shape", "squircle"),
+  ua: navigator.userAgent,
+  round: read(document.getElementById("round")),
+  smooth: read(document.getElementById("smooth")),
+  classy: read(document.getElementById("classy")),
+  roundCorner: cornerMask("round", 0),
+  smoothCorner: cornerMask("smooth", 200),
+  classyCorner: cornerMask("classy", 400),
+};
+document.getElementById("out").textContent = JSON.stringify(out);
+</script>`,
+      );
+      const dump = execFileSync(
+        chrome,
+        ["--headless=new", "--disable-gpu", "--dump-dom", `file://${htmlPath}`],
+        { encoding: "utf8", timeout: 60_000 },
+      );
+      const match = dump.match(/<pre id="out">([\s\S]*?)<\/pre>/);
+      expect(match, "probe <pre id=out> missing from dump-dom").toBeTruthy();
+      const result = JSON.parse(match![1]) as {
+        supportsSquircle: boolean;
+        round: string;
+        smooth: string;
+        classy: string;
+        roundCorner: string;
+        smoothCorner: string;
+        classyCorner: string;
+      };
+      expect(result.supportsSquircle).toBe(true);
+      expect(isRoundComputedCornerShape(result.round)).toBe(true);
+      expect(isSmoothComputedCornerShape(result.smooth)).toBe(true);
+      expect(isSmoothComputedCornerShape(result.classy)).toBe(true);
+      expect(result.smooth).not.toBe(result.round);
+      expect([CORNER_SHAPE_SMOOTH, CORNER_SHAPE_SMOOTH_COMPUTED]).toContain(result.smooth);
+      expect([CORNER_SHAPE_ROUND, CORNER_SHAPE_ROUND_COMPUTED]).toContain(result.round);
+
+      // Geometry, not the property echo: the squircle claims corner pixels the
+      // arc leaves empty, and the class-driven cell paints the same curve as
+      // the hand-written one. Measured 2026-09-01 on Chromium 143/147/148/151
+      // and Chrome 152 — round "00011111", smooth "01111111". See
+      // docs/design/boards/W1-corner-smoothing/engines__corner-shape.json.
+      expect(result.smoothCorner).not.toBe(result.roundCorner);
+      expect(result.classyCorner).toBe(result.smoothCorner);
+      expect(result.smoothCorner.indexOf("1")).toBeLessThan(result.roundCorner.indexOf("1"));
+    });
+  });
 });

package/src/theme/cornerSmoothing.ts

@@ -3,9 +3,6 @@
  * circular-arc corners to continuous curvature — CSS
  * `corner-shape: squircle` (≡ `superellipse(2)`, ≈ Apple's continuous
  * corners / Figma smoothing 0.6) — as a WEB PROGRESSIVE ENHANCEMENT.
- * Chromium 139+ paints it; every other engine drops the unknown declaration
- * and keeps today's plain `border-radius` arc, so no `@supports` gate is
- * needed for correctness.
  *
  * Delivery is a class + one mounted stylesheet (the hairline pattern):
  * Tamagui strips unknown keys from the `style` prop (`style` is in
@@ -13,34 +10,174 @@
  * `className` into its atomic classes — so `resolveKnobs` attaches
  * `className: cornerSmoothClassName` to every radius-bearing fragment when
  * the knob is `smooth`, and this module owns the CSS those classes resolve
- * against.
+ * against. `CornerSmoothingStyles` (mounted from ThemeProvider, same seat
+ * as FontKnobStyles) re-asserts that stylesheet and publishes the live
+ * stop on `<html>` so probes do not have to guess whether the channel ran.
  *
- * Native twin: `cornerSmoothing.native.ts` (no CSS classes — native resolves
- * to `round` until a SquircleView adoption lands, phase 2).
+ * Measurement (2026-08-28):
+ * - Chrome 152: specified `squircle` computes as `superellipse(2)`;
+ *   specified `round` computes as `superellipse(1)`. Both
+ *   `getPropertyValue("corner-shape")` and the `cornerShape` IDL agree.
+ * - Chromium 147.0.7727.15: `CSS.supports("corner-shape","squircle")` is
+ *   TRUE — the gallery's old "Chromium 139+ only" caption is wrong. The
+ *   action-feedback Button strip still computed `round` at both stops
+ *   because those replicas never carried `.mp-corner-smooth`. The
+ *   knob-states sheet (which does) records `cornerShape: "squircle"` on
+ *   the smooth cell. Read computed values with
+ *   `readComputedCornerShape` and treat `superellipse(2)` as smooth.
+ * - happy-dom and engines without the property: `cssSupportsCornerShape()`
+ *   is false and computed `corner-shape` is empty — the silent fallback,
+ *   measured rather than assumed. Native has no `corner-shape`.
+ *
+ * Re-measured 2026-09-01 across seven engines — the matrix and the probe that
+ * produced it live in `docs/design/boards/W1-corner-smoothing/`:
+ * - The property is live from at least Chromium 143, four minor versions
+ *   below the 147 the INERT caption was shot on.
+ * - The computed serialization is NOT stable: it echoes the specified keyword
+ *   (`round` / `squircle`) through 151 and normalizes to `superellipse(1)` /
+ *   `superellipse(2)` from 152. Classify with the two helpers below; never
+ *   compare a raw string.
+ * - The painted corner differs at both stops on every Chromium, read as
+ *   geometry (`elementFromPoint` walking in from the corner), so the channel
+ *   is proven to paint and not merely to parse.
+ * - WebKit 26 and Firefox 148: `CSS.supports` false, computed `corner-shape`
+ *   empty, `border-radius` and the box footprint untouched, and the corner
+ *   byte-identical between the stops. Silent degradation on a real engine.
+ *
+ * Native twin: `cornerSmoothing.native.ts` (no CSS classes — native
+ * resolves to `round` until a SquircleView adoption lands, phase 2).
  */
+import { useEffect } from "react";
+import type { CornerSmoothing } from "./knobs";
+import { defaultKnobs } from "./knobs";
+import { usePresetContext } from "./PresetContext";
 
 /** Class attached to radius-bearing knob fragments at `cornerSmoothing: "smooth"`. */
 export const cornerSmoothClassName = "mp-corner-smooth";
 
-const STYLE_TAG_ID = "mp-corner-smoothing-styles";
+export const CORNER_SMOOTHING_STYLE_TAG_ID = "mp-corner-smoothing-styles";
+
+/** Live knob stop, published on `<html>` by `CornerSmoothingStyles`. */
+export const CORNER_SMOOTHING_ROOT_ATTR = "data-mp-corner-smoothing";
+
+/** Specified `corner-shape` for the live stop, also on `<html>`. */
+export const CORNER_SHAPE_CSS_VAR = "--mp-corner-shape";
+
+/** Specified CSS value for `round` (initial / house default). */
+export const CORNER_SHAPE_ROUND = "round";
+
+/** Specified CSS value for `smooth` — the keyword the AC names. */
+export const CORNER_SHAPE_SMOOTH = "squircle";
+
+/** Chrome 152+ computed form of `round`. */
+export const CORNER_SHAPE_ROUND_COMPUTED = "superellipse(1)";
+
+/** Chrome 152+ computed form of `squircle`. */
+export const CORNER_SHAPE_SMOOTH_COMPUTED = "superellipse(2)";
 
 /**
  * The squircle declaration. `corner-shape` composes with the element's
  * existing `border-radius` (it reshapes the same corner box), so the
  * fallback in non-supporting engines is automatic. Exported for unit tests.
  */
-export const cornerSmoothingCss = `.${cornerSmoothClassName} { corner-shape: squircle; }`;
+export const cornerSmoothingCss = `.${cornerSmoothClassName} { corner-shape: ${CORNER_SHAPE_SMOOTH}; }`;
+
+/**
+ * `CSS.supports("corner-shape","squircle")`. Pass `null` to probe a missing
+ * engine. Omit the arg to use the global `CSS` (happy-dom's `supports()`
+ * currently returns true — a lie; computed `corner-shape` stays empty).
+ */
+export function cssSupportsCornerShape(
+  supports?: { supports?(property: string, value: string): boolean } | null,
+): boolean {
+  const impl =
+    supports === null ? undefined : (supports ?? (typeof CSS !== "undefined" ? CSS : undefined));
+  try {
+    return Boolean(impl?.supports?.("corner-shape", CORNER_SHAPE_SMOOTH));
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Read the painted `corner-shape`. Prefer the CSS property channel over the
+ * camelCase IDL — some Chromium builds expose `css.cornerShape` as the
+ * initial `round` even when `getPropertyValue("corner-shape")` has moved.
+ */
+export function readComputedCornerShape(
+  style: Pick<CSSStyleDeclaration, "getPropertyValue"> & { cornerShape?: string },
+): string {
+  const fromProp = (style.getPropertyValue?.("corner-shape") ?? "").trim();
+  const fromIdl = (style.cornerShape ?? "").trim();
+  return fromProp || fromIdl;
+}
+
+function normalizeCornerShape(value: string): string {
+  return value.trim().toLowerCase().replace(/\s+/g, "");
+}
+
+/** True for specified `squircle` and the measured Chrome computed form `superellipse(2)`. */
+export function isSmoothComputedCornerShape(value: string): boolean {
+  const n = normalizeCornerShape(value);
+  return n === CORNER_SHAPE_SMOOTH || n === CORNER_SHAPE_SMOOTH_COMPUTED;
+}
+
+/** True for specified `round`, computed `superellipse(1)`, empty (unsupported), or `normal`. */
+export function isRoundComputedCornerShape(value: string): boolean {
+  const n = normalizeCornerShape(value);
+  return (
+    n === "" || n === CORNER_SHAPE_ROUND || n === CORNER_SHAPE_ROUND_COMPUTED || n === "normal"
+  );
+}
+
+/** Publish the live stop on `<html>` so a probe can see the channel ran. */
+export function applyRootCornerSmoothing(stop: CornerSmoothing = "round"): void {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute(CORNER_SMOOTHING_ROOT_ATTR, stop);
+  root.style.setProperty(
+    CORNER_SHAPE_CSS_VAR,
+    stop === "smooth" ? CORNER_SHAPE_SMOOTH : CORNER_SHAPE_ROUND,
+  );
+}
 
 /** Idempotently mount the corner-smoothing stylesheet (no-op off-DOM). */
 export function ensureCornerSmoothingStyles(): void {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_TAG_ID)) return;
+  if (document.getElementById(CORNER_SMOOTHING_STYLE_TAG_ID)) return;
   const tag = document.createElement("style");
-  tag.id = STYLE_TAG_ID;
+  tag.id = CORNER_SMOOTHING_STYLE_TAG_ID;
   tag.textContent = cornerSmoothingCss;
   document.head.appendChild(tag);
 }
 
+/**
+ * Mount ONCE near the root (inside KnobBridge / PresetContext). Re-asserts
+ * the squircle stylesheet and mirrors the live `cornerSmoothing` stop onto
+ * `<html>`. Renders nothing.
+ */
+export function CornerSmoothingStyles(): null {
+  const presetCtx = usePresetContext();
+  const knobs = presetCtx ? { ...presetCtx.preset.knobs, ...presetCtx.overrides } : defaultKnobs;
+  const stop = knobs.cornerSmoothing ?? defaultKnobs.cornerSmoothing ?? "round";
+
+  useEffect(() => {
+    ensureCornerSmoothingStyles();
+    applyRootCornerSmoothing(stop);
+  }, [stop]);
+
+  useEffect(
+    () => () => {
+      if (typeof document === "undefined") return;
+      document.documentElement.removeAttribute(CORNER_SMOOTHING_ROOT_ATTR);
+      document.documentElement.style.removeProperty(CORNER_SHAPE_CSS_VAR);
+    },
+    [],
+  );
+
+  return null;
+}
+
 // Static CSS (no knob/theme dependency) — mount as soon as the module loads
 // in a DOM environment so the class resolves before any smooth render.
 ensureCornerSmoothingStyles();

package/src/theme/createDefaultThemeConfig.spec.ts

@@ -22,8 +22,13 @@ vi.mock("tamagui", () => ({
 // build; themes are what these specs pin, so stub the driver out.
 vi.mock("./animations/index", () => ({ animations: {} }));
 
+import {
+  defaultConfig as v5DefaultConfig,
+  mediaQueryDefaultActive as v5MediaQueryDefaultActive,
+} from "@tamagui/config/v5";
+import { tokens as v5Tokens } from "@tamagui/themes/v5";
 import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
-import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { TAMAGUI_ERA, createDefaultThemeConfig } from "./createDefaultThemeConfig";
 import type { GetThemeProps } from "./createThemes";
 import { setSizeRecipeInputs } from "./sizeRecipes";
 
@@ -149,4 +154,105 @@ describe("createDefaultThemeConfig — builderOptions.getTheme composition (DF-0
     }
     expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(44);
   });
+
+  it("registers serif so headingFont can resolve a family without a per-app font map", () => {
+    const config = createDefaultThemeConfig() as unknown as {
+      tamagui: { fonts: Record<string, { family?: string | { val?: string } }> };
+    };
+    const serif = config.tamagui.fonts.serif;
+    expect(serif, "serif font").toBeTruthy();
+    const family = typeof serif.family === "string" ? serif.family : serif.family?.val;
+    expect(family).toMatch(/Georgia/);
+  });
+
+  it("keeps consumer heading/body overrides without dropping the serif category", () => {
+    const heading = { family: "ConsumerHeading" };
+    const body = { family: "ConsumerBody" };
+    const config = createDefaultThemeConfig({
+      fonts: { heading: heading as never, body: body as never },
+    }) as unknown as {
+      tamagui: { fonts: Record<string, { family?: string | { val?: string } }> };
+    };
+    expect(config.tamagui.fonts.heading).toBe(heading);
+    expect(config.tamagui.fonts.body).toBe(body);
+    const serif = config.tamagui.fonts.serif;
+    const family = typeof serif?.family === "string" ? serif.family : serif?.family?.val;
+    expect(family).toMatch(/Georgia/);
+  });
+});
+
+// ── Tamagui era pin (MPO-19 X13 / W0-era-pin; rendered reference §12.2 C9) ──
+//
+// v5 is the authoritative era. These specs assert the RESOLVED config, not
+// the imports: a future re-point of createDefaultThemeConfig at another era
+// (v4 media/tokens, or the legacy root entry drifting its values) fails here
+// even if TAMAGUI_ERA is left saying "v5". The color token group is
+// deliberately NOT asserted: v5 moved palettes out of tokens into themes, and
+// the legacy palette color tokens ($blue10, …) remain as a compatibility
+// surface with live call sites across public/ — their fate is an MPO-19 row,
+// not part of the pin.
+
+type TokenValue = { val?: unknown } | string | number;
+type RawTokens = Record<string, Record<string, TokenValue>>;
+
+/** Flatten one token group to `{ key(without $): primitive value }`. */
+function tokenGroupValues(tokens: RawTokens, group: string): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(tokens[group] ?? {})) {
+    const name = key.startsWith("$") ? key.slice(1) : key;
+    out[name] =
+      value && typeof value === "object" && "val" in value
+        ? (value as { val: unknown }).val
+        : value;
+  }
+  return out;
+}
+
+describe("createDefaultThemeConfig — Tamagui era pin (MPO-19 X13 / W0-era-pin)", () => {
+  const config = createDefaultThemeConfig() as unknown as {
+    tamagui: {
+      media: Record<string, unknown>;
+      settings: Record<string, unknown>;
+      tokens: RawTokens;
+    };
+  };
+
+  it(`declares the era: ${TAMAGUI_ERA}`, () => {
+    expect(TAMAGUI_ERA).toBe("v5");
+  });
+
+  it("resolves the v5 media map, and no dead prior-era key survives", () => {
+    expect(config.tamagui.media).toEqual(v5DefaultConfig.media);
+    // v5 signature: the sm/…/xxl min-width ladder plus the small container steps.
+    for (const key of ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl"]) {
+      expect(config.tamagui.media, `media.${key}`).toHaveProperty(key);
+    }
+    // Dead eras: gtSm/gtXs (v3-era config) and 2xl/2xs/maxSm (v4) must not resolve.
+    for (const key of ["gtXs", "gtSm", "gtMd", "gtLg", "2xl", "2xs", "maxSm", "max2Xl"]) {
+      expect(config.tamagui.media, `media.${key}`).not.toHaveProperty(key);
+    }
+    expect(config.tamagui.settings.mediaQueryDefaultActive).toEqual(v5MediaQueryDefaultActive);
+  });
+
+  it("resolves v5 token values exactly for every non-color group", () => {
+    const groups = ["size", "space", "radius", "zIndex"] as const;
+    for (const group of groups) {
+      const resolved = tokenGroupValues(config.tamagui.tokens, group);
+      const v5 = tokenGroupValues(v5Tokens as unknown as RawTokens, group);
+      expect(Object.keys(v5).length, `${group} group present in v5`).toBeGreaterThan(0);
+      expect(resolved, `tokens.${group}`).toEqual(v5);
+    }
+  });
+
+  it("anchors radius.true at 9, the v5 base radius", () => {
+    const radius = tokenGroupValues(config.tamagui.tokens, "radius");
+    expect(radius.true).toBe(9);
+    expect(radius["4"]).toBe(9);
+  });
+
+  it("anchors size.true at 44, the v5 base control height", () => {
+    const size = tokenGroupValues(config.tamagui.tokens, "size");
+    expect(size.true).toBe(44);
+    expect(size["4"]).toBe(44);
+  });
 });