@multiplatform.one/theme 6.4.1 → 6.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "6.4.1",
+  "version": "6.4.2",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -53,8 +53,8 @@
     "@tamagui/toast": "2.0.0-rc.41",
     "@tamagui/web": "2.0.0-rc.41",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/platform": "6.4.1",
-    "@multiplatform.one/store": "6.4.1"
+    "@multiplatform.one/platform": "6.4.2",
+    "@multiplatform.one/store": "6.4.2"
   },
   "devDependencies": {
     "@tamagui/animations-css": "2.0.0-rc.41",
@@ -69,8 +69,8 @@
     "tamagui": "2.0.0-rc.41",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/test-utils": "6.4.1",
-    "@multiplatform.one/config": "6.4.1"
+    "@multiplatform.one/config": "6.4.2",
+    "@multiplatform.one/test-utils": "6.4.2"
   },
   "peerDependencies": {
     "@tamagui/animations-css": "^2.0.0-rc",

package/src/theme/knobs.ts

@@ -179,6 +179,25 @@ export const FontWeight = {
 } as const;
 export type FontWeight = (typeof FontWeight)[keyof typeof FontWeight];
 
+/**
+ * Page-title type step (D-11 hero-H1 dial, owner ruling 2026-08-12).
+ *
+ * `moderate` ($8 = 32px) is the product default: a page title is wayfinding,
+ * not content, so it does not spend the display scale's emphasis budget
+ * (Axiom 10) — and the 64px step is the direct amplifier of the DF-02 title
+ * clip. `display` ($10 = 64px) is the deliberate marketing/hero opt-in,
+ * reached through the `hero` preset or an explicit knob override; it is never
+ * the ambient default.
+ *
+ * Two values, not a token dial: a free size invites per-screen drift
+ * (Axiom 5), and the semantic level stays `headingLevel`'s job either way.
+ */
+export const PageTitleScale = {
+  Moderate: "moderate",
+  Display: "display",
+} as const;
+export type PageTitleScale = (typeof PageTitleScale)[keyof typeof PageTitleScale];
+
 // ── Animation ──────────────────────────────────────────────
 
 import type { AnimationName } from "./animations/index";
@@ -223,6 +242,11 @@ export interface Knobs {
   headingFont: HeadingFont;
   bodyFont: BodyFont;
   fontWeight: FontWeight;
+  /**
+   * Page-title step (D-11). Optional so existing preset/knob constructions
+   * stay valid; resolveKnobs defaults to `moderate`.
+   */
+  pageTitleScale?: PageTitleScale;
   animation: Animation;
   /** House: field label placement. Default top. */
   fieldLabelPlacement: FieldLabelPlacement;
@@ -263,6 +287,7 @@ export const defaultKnobs: Knobs = {
   headingFont: "sans-serif",
   bodyFont: "sans-serif",
   fontWeight: "regular",
+  pageTitleScale: "moderate",
   animation: "quick",
   fieldLabelPlacement: "top",
   requiredMarking: "minority",

package/src/theme/presets.ts

@@ -17,6 +17,7 @@ export const defaultPreset: Preset = {
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
     fontWeight: "regular",
+    pageTitleScale: "moderate",
     animation: "quick",
     fieldLabelPlacement: "top",
     requiredMarking: "minority",
@@ -50,6 +51,7 @@ export const boldPreset: Preset = {
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
     fontWeight: "bold",
+    pageTitleScale: "moderate",
     animation: "bouncy",
     fieldLabelPlacement: "top",
     requiredMarking: "minority",
@@ -67,3 +69,22 @@ export const boldPreset: Preset = {
   intents: defaultIntents,
   tints: ["pink", "purple", "pink", "purple", "pink", "purple", "pink"] as ThemeName[],
 };
+
+/**
+ * Marketing / hero surface preset (D-11 hero-H1 dial, owner ruling
+ * 2026-08-12). Identical to `defaultPreset` except the page title returns to
+ * the display step ($10 = 64px): product screens are wayfinding and take the
+ * moderate step by default, so the loud scale has to be ASKED for.
+ *
+ * @example Whole marketing app
+ * createDefaultThemeConfig({ presets: { default: defaultPreset, hero: heroPreset } })
+ *
+ * @example One hero region inside a product app (cascades onto the live preset)
+ * <Preset overrides={{ pageTitleScale: "display" }}>
+ *   <PageHeader title="Ship faster" />
+ * </Preset>
+ */
+export const heroPreset: Preset = {
+  ...defaultPreset,
+  knobs: { ...defaultPreset.knobs, pageTitleScale: "display" },
+};

package/src/theme/recipes.ts

@@ -1,4 +1,4 @@
-import type { ColorTokens, TransitionProp } from "tamagui";
+import type { ColorTokens, FontSizeTokens, TransitionProp } from "tamagui";
 import type { Knobs } from "./knobs";
 
 // ── State knob prop types (by concern) ───────────────────────────────────
@@ -154,6 +154,13 @@ export interface KnobProps {
   gapLg: { gap: string };
   sizeToken: string;
   heading: { fontFamily: string; fontWeight: string };
+  /**
+   * Page-title type step (D-11 hero-H1 dial) — the complete size fragment for
+   * the single page-title heading, spread whole onto the title node. Product
+   * screens land on the moderate step; the `hero` preset (or an explicit
+   * `pageTitleScale` override) re-opens the display scale for marketing.
+   */
+  pageTitle: { size: FontSizeTokens };
   /** color is set only for solid semantic-intent Buttons (error/warning/success). */
   body: { fontFamily: string; fontWeight: string; color?: ColorTokens };
   textWeight: { fontWeight: string };

package/src/theme/resolveKnobs.ts

@@ -1,5 +1,5 @@
 import { isWeb } from "@multiplatform.one/platform";
-import type { TransitionProp } from "tamagui";
+import type { FontSizeTokens, TransitionProp } from "tamagui";
 // Importing the class constant also mounts the corner-shape stylesheet at
 // theme load (web only, idempotent) — see cornerSmoothing.ts.
 import { cornerSmoothClassName } from "./cornerSmoothing";
@@ -9,7 +9,7 @@ import {
   STATE_LAYER_PRESS,
   withDefaultStateLayer,
 } from "./focusState";
-import type { CornerSmoothing, Knobs, StateKnobs } from "./knobs";
+import type { CornerSmoothing, Knobs, PageTitleScale, StateKnobs } from "./knobs";
 import type {
   ControlStateProps,
   DisabledRecipe,
@@ -101,6 +101,28 @@ const panelPaddingMap = {
   large: "$6",
 } as const;
 
+// ── Page-title step (D-11 hero-H1 dial) ───────────────────────
+// The one canonical definition of how big a page title is. On the heading
+// scale (1.4x Inter, defaults/fonts.ts) $8 = 32px and $10 = 64px, so
+// `moderate` lands in the page-title class while `display` keeps the
+// marketing hero step. Screens never pick a heading step by hand — they
+// spread `knobProps.pageTitle`, so one knob flip re-scales every title.
+const pageTitleSizeMap: Record<PageTitleScale, FontSizeTokens> = {
+  moderate: "$8",
+  display: "$10",
+};
+
+/**
+ * Resolve a page-title scale to its complete size fragment (D-11).
+ *
+ * Exported so a per-instance eject (`PageHeader titleScale="display"` on a
+ * marketing hero) resolves through the same table as the knob — never a
+ * second hardcoded step.
+ */
+export function resolvePageTitleScale(scale: PageTitleScale): { size: FontSizeTokens } {
+  return { size: pageTitleSizeMap[scale] };
+}
+
 // ── Container radius cap (Axiom 1 CLIP) ──────────────────────
 // A padded container's effective radius must not exceed its own padding:
 // past that, the corner curve sweeps through the cell where children sit
@@ -433,6 +455,7 @@ export function resolveKnobs(knobs: Knobs, override?: KnobPropsOverride): Resolv
       fontFamily: headingFontMap[knobs.headingFont],
       fontWeight: fontWeightValue,
     },
+    pageTitle: resolvePageTitleScale(knobs.pageTitleScale ?? "moderate"),
     body: {
       fontFamily: bodyFontValue,
       fontWeight: fontWeightValue,