@multiplatform.one/theme 7.11.0 → 7.16.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.16.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.16.0",
+    "@multiplatform.one/store": "7.16.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.16.0",
+    "@multiplatform.one/test-utils": "7.16.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,183 @@ 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("stacked rows cap their outer corners and square the inner ones (MPO-56)", () => {
+  const row = (position: string, radius: string, space: 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`;
+
+  it.each([
+    ["first", corners(13, 13, 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"));
+    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)",
+    );
+  });
+
+  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")],
+  ])("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"));
+    expect(measured()?.violations).toEqual([
+      "borderBottomLeftRadius: 9px does not match StackedRow cap (13px)",
+    ]);
+    specimen(corners(9, 0, 13, 13), row("last", "large", "small")).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)",
+    ]);
+  });
+});
+
+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");
+  });
+});
+
+describe("a fixed-padding container caps at the padding it has (DG-RAD-04, MPO-56)", () => {
+  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"));
+    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"));
+    expect(measured()?.violations).toEqual([]);
+  });
+
+  it.each([
+    ["the panelPadding cap instead of its own", "border-radius:18px;padding:13px", own("full")],
+    ["the token past its padding", "border-radius:16px;padding:13px", own("large")],
+  ])("rejects %s", (_label, style, attrs) => {
+    specimen(style, attrs);
+    expect(measured()?.borderRadius?.offScale).toBe(true);
+  });
+});

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,48 +734,90 @@ 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 stackedRow = containerName === "StackedRow";
+    // A container padded with a fixed token rather than the panelPadding knob
+    // caps at the padding it actually has.
+    const ownInset = containerName === "OwnInset";
+    const capContainer =
+      containerName === "Card"
+        ? ["content", "elevated"].includes(el.getAttribute("data-tier") ?? "")
+        : containerName === "PageSection" || containerName === "TextArea" || stackedRow || ownInset;
+    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;
+    // MPO-56: a row in a vertical stack caps its OUTER corners and squares
+    // the inner ones (LC-72), so the cap applies per corner by position.
+    const stackPosition = el.getAttribute("data-stack-position") ?? "";
+    const outerCorners: Record<string, readonly (typeof corners)[number][]> = {
+      only: corners,
+      first: ["borderTopLeftRadius", "borderTopRightRadius"],
+      middle: [],
+      last: ["borderBottomRightRadius", "borderBottomLeftRadius"],
+    };
+    const stackOuter = Object.hasOwn(outerCorners, stackPosition)
+      ? outerCorners[stackPosition]
+      : undefined;
+    if (stackedRow && !stackOuter) {
+      entry.violations.push(
+        `data-stack-position: "${stackPosition}" is not a StackedRow position (only, first, middle, last)`,
+      );
+    }
+    if (capContainer) {
       const radiusKnob = el.getAttribute("data-radius-knob") ?? "";
       const spaceKnob = el.getAttribute("data-space-knob") ?? "";
       const radiusStop = Object.hasOwn(_BORDER_RADIUS_KNOB, radiusKnob)
         ? _BORDER_RADIUS_KNOB[radiusKnob]
         : undefined;
-      const inset = Object.hasOwn(_PANEL_PADDING_KNOB, spaceKnob)
-        ? _PANEL_PADDING_KNOB[spaceKnob]
-        : 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)`,
-          );
+      const inset = ownInset
+        ? measuredInsets.some((v) => v === null)
+          ? undefined
+          : Math.min(...(measuredInsets as number[]))
+        : Object.hasOwn(_PANEL_PADDING_KNOB, spaceKnob)
+          ? _PANEL_PADDING_KNOB[spaceKnob]
+          : undefined;
+      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)
+      const cap =
+        radiusStop === undefined ||
+        inset === undefined ||
+        (stackedRow && !stackOuter) ||
+        (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];
+        const inner = stackedRow && stackOuter !== undefined && !stackOuter.includes(prop);
+        const expected = inner ? 0 : cap;
         // A corner may have two elliptical axes. Percentages are not px caps.
         const axes = raw.trim().split(/\s+/);
         const offScale =
@@ -779,13 +826,19 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
         const result = {
           value: parsePx(raw) ?? 0,
           unit: "px",
-          knob: `Card min(radius:${radiusKnob}, panelPadding:${spaceKnob})`,
+          knob: inner
+            ? `${containerName} ${stackPosition} inner corner 0`
+            : ownInset
+              ? `${containerName} min(radius:${radiusKnob}, own padding)`
+              : `${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)`,
+            inner
+              ? `${prop}: ${raw} is an inner corner of a ${stackPosition} StackedRow (0px)`
+              : `${prop}: ${raw} does not match ${containerName} cap (${expected ?? "unknown"}px)`,
           );
       }
       entry.borderRadius = {
@@ -793,6 +846,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 +918,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/audit/themeMatrix.ts

@@ -969,7 +969,10 @@ export function captureMatrixSnapshot(): MatrixSnapshot {
       marks.length > 0 &&
       marks.every(
         (mark, index) =>
-          mark.tagName.toLowerCase() === "rect" &&
+          // A bar path that declares its box (value-end rounding, MPO-56)
+          // paints inside that box just as a rect does.
+          (mark.tagName.toLowerCase() === "rect" ||
+            (mark.tagName.toLowerCase() === "path" && mark.hasAttribute("data-mpo-chart-bar"))) &&
           getComputedStyle(mark).stroke === "none" &&
           !sample.marks[index].unmeasurable,
       )

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,