@cueplusplus/ui 0.1.0 → 0.2.0

package/dist/system/theme-provider.js

@@ -1,19 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
-import { DENSITY_LEVELS, DensityContext } from "./density.js";
+import { DEFAULT_DENSITY as DEFAULT_DENSITY$1, DENSITY_LEVELS, DensityContext } from "./density.js";
 import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { DEFAULT_FONT, FONTS } from "@cueplusplus/tokens";
 //#region src/system/theme-provider.tsx
 const MODES = [
 	"dark",
 	"light",
 	"system"
 ];
+const FONT_NAMES = FONTS;
 /** Dark-first portfolio defaults; the same triple bare `:root` in `theme.css` paints. */
 const DEFAULT_THEME = "cue";
-const DEFAULT_DENSITY = "normal";
 const DEFAULT_MODE = "dark";
 const DEFAULT_RESOLVED_MODE = "dark";
 /**
@@ -56,62 +57,82 @@ function writePreferences(storageKey, preferences) {
 }
 /**
 * Root of the theme system: stamps `data-theme`, `data-density` and `data-mode`
-* so the token layer resolves, publishes `--cue-font-scale`, and owns the
-* persisted user preference.
+* so the token layer resolves, puts `data-font` on `<html>`, publishes
+* `--cue-font-scale`, and owns the persisted user preference.
 *
 * Rendering: `<div data-cue-root data-theme data-density data-mode style={{ colorScheme, --cue-font-scale }}>`
-* (or the single child when `asChild`). The `theme`/`density`/`mode` props are
+* (or the single child when `asChild`). The `theme`/`density`/`font`/`mode` props are
 * *initial* values — the provider holds the state so `setTheme` and friends can
 * drive it — but a changed prop is adopted after mount, so a controlling parent
 * still works.
 *
+* The font pairing is the one axis that never lands on this element: it has no
+* island form, `<html>` is its only home, and restating it here would shadow the
+* pre-paint stamp for the whole page on the first frame. See the `stamp` object
+* below.
+*
 * Persistence and the pre-paint contract: setters write
-* `{ theme, density, mode }` to `localStorage[storageKey]`, which is exactly what
+* `{ theme, density, font, mode }` to `localStorage[storageKey]`, which is exactly what
 * {@link prepaintScript} reads to stamp `<html>` before the first paint. The
 * outermost provider keeps `<html>` in sync while the app runs (and restores the
 * previous stamp on unmount) so the page ground, UA scrollbars and form controls
-* follow the theme; nested providers never touch `<html>`.
+* follow the theme; nested providers never touch `<html>`, and never own the
+* font pairing — `useTheme().font` and `setFont` inside one are the root's.
 *
 * @example
-* <ThemeProvider theme="terminal" density="ultra-compact" mode="system">
+* <ThemeProvider theme="terminal" density="ultra-compact" font="plex" mode="system">
 *   <App />
 * </ThemeProvider>
 */
-function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp = DEFAULT_DENSITY, mode: modeProp = DEFAULT_MODE, fontScale = 1, storageKey = DEFAULT_STORAGE_KEY, asChild = false, className, style: styleProp, children }) {
-	const isRoot = React.useContext(ThemeContext) === null;
+function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp = DEFAULT_DENSITY$1, mode: modeProp = DEFAULT_MODE, font: fontProp = DEFAULT_FONT, fontScale = 1, storageKey = DEFAULT_STORAGE_KEY, asChild = false, className, style: styleProp, children }) {
+	const ambient = React.useContext(ThemeContext);
+	const isRoot = ambient === null;
 	const [theme, setThemeState] = React.useState(themeProp);
 	const [density, setDensityState] = React.useState(densityProp);
 	const [mode, setModeState] = React.useState(modeProp);
+	const [rootFont, setRootFontState] = React.useState(() => {
+		if (!isRoot) return fontProp;
+		const stored = readPreferences(storageKey).font;
+		return isOneOf(FONT_NAMES, stored) ? stored : fontProp;
+	});
+	const font = isRoot ? rootFont : ambient.font;
 	const [systemMode, setSystemMode] = React.useState(DEFAULT_RESOLVED_MODE);
 	const resolvedMode = mode === "system" ? systemMode : mode;
 	const restoredKey = React.useRef(null);
+	const [restored, setRestored] = React.useState(false);
 	useIsomorphicLayoutEffect(() => {
 		if (!isRoot || restoredKey.current === storageKey) return;
 		restoredKey.current = storageKey;
+		setRestored(true);
 		const stored = readPreferences(storageKey);
 		if (typeof stored.theme === "string" && stored.theme.length > 0) setThemeState(stored.theme);
 		if (isOneOf(DENSITY_LEVELS, stored.density)) setDensityState(stored.density);
+		if (isOneOf(FONT_NAMES, stored.font)) setRootFontState(stored.font);
 		if (isOneOf(MODES, stored.mode)) setModeState(stored.mode);
 	}, [isRoot, storageKey]);
 	const lastProps = React.useRef({
 		theme: themeProp,
 		density: densityProp,
-		mode: modeProp
+		mode: modeProp,
+		font: fontProp
 	});
 	React.useEffect(() => {
 		const previous = lastProps.current;
 		lastProps.current = {
 			theme: themeProp,
 			density: densityProp,
-			mode: modeProp
+			mode: modeProp,
+			font: fontProp
 		};
 		if (previous.theme !== themeProp) setThemeState(themeProp);
 		if (previous.density !== densityProp) setDensityState(densityProp);
 		if (previous.mode !== modeProp) setModeState(modeProp);
+		if (previous.font !== fontProp) setRootFontState(fontProp);
 	}, [
 		themeProp,
 		densityProp,
-		modeProp
+		modeProp,
+		fontProp
 	]);
 	useIsomorphicLayoutEffect(() => {
 		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
@@ -124,13 +145,15 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 	const stateRef = React.useRef({
 		theme,
 		density,
-		mode
+		mode,
+		font
 	});
 	useIsomorphicLayoutEffect(() => {
 		stateRef.current = {
 			theme,
 			density,
-			mode
+			mode,
+			font
 		};
 	});
 	const persist = React.useCallback((patch) => {
@@ -154,24 +177,34 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 		setModeState(next);
 		persist({ mode: next });
 	}, [persist]);
+	const rootSetFont = React.useCallback((next) => {
+		setRootFontState(next);
+		persist({ font: next });
+	}, [persist]);
+	/** Nested providers hand the axis straight up: one document, one pairing. */
+	const setFont = isRoot ? rootSetFont : ambient.setFont;
 	const originalStamp = React.useRef(null);
 	useIsomorphicLayoutEffect(() => {
-		if (!isRoot || typeof document === "undefined") return;
+		if (!isRoot || !restored || typeof document === "undefined") return;
 		const root = document.documentElement;
 		originalStamp.current ??= {
 			theme: root.getAttribute("data-theme"),
 			density: root.getAttribute("data-density"),
+			font: root.getAttribute("data-font"),
 			mode: root.getAttribute("data-mode"),
 			colorScheme: root.style.colorScheme
 		};
 		root.setAttribute("data-theme", theme);
 		root.setAttribute("data-density", density);
+		root.setAttribute("data-font", font);
 		root.setAttribute("data-mode", resolvedMode);
 		root.style.colorScheme = resolvedMode;
 	}, [
 		isRoot,
+		restored,
 		theme,
 		density,
+		font,
 		resolvedMode
 	]);
 	React.useEffect(() => () => {
@@ -185,6 +218,7 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 		};
 		restore("data-theme", original.theme);
 		restore("data-density", original.density);
+		restore("data-font", original.font);
 		restore("data-mode", original.mode);
 		root.style.colorScheme = original.colorScheme;
 	}, []);
@@ -192,18 +226,22 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 		theme,
 		density,
 		mode,
+		font,
 		resolvedMode,
 		setTheme,
 		setDensity,
-		setMode
+		setMode,
+		setFont
 	}), [
 		theme,
 		density,
 		mode,
+		font,
 		resolvedMode,
 		setTheme,
 		setDensity,
-		setMode
+		setMode,
+		setFont
 	]);
 	const style = React.useMemo(() => ({
 		colorScheme: resolvedMode,

package/dist/system/use-density.d.ts

@@ -4,11 +4,11 @@ import { Density } from "@cueplusplus/tokens";
 type ControlSize = "sm" | "md" | "lg";
 /**
  * The density level that actually applies here: the nearest `<Density>` island,
- * else the `<ThemeProvider>` level, else `"normal"`.
+ * else the `<ThemeProvider>` level, else `"compact"`.
  *
  * This is a JS read for code that cannot use CSS (virtualised row heights,
  * canvas drawing, layout math). Styling should use the density tokens or the
- * `density-ultra:` / `density-large:` variants instead.
+ * per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
  *
  * @returns The applicable density level.
  */
@@ -26,7 +26,7 @@ declare function useDensity(): Density;
  * @param size - Which rung to measure. Defaults to `"md"`.
  * @returns Height in CSS pixels.
  * @example
- * const rowHeight = useControlHeight("sm"); // → 20 at normal density
+ * const rowHeight = useControlHeight("sm"); // → 20 at compact density
  */
 declare function useControlHeight(size?: ControlSize): number;
 //#endregion

package/dist/system/use-density.js

@@ -14,15 +14,25 @@ const CONTROL_REM = {
 		md: 1.25,
 		lg: 1.5
 	},
-	normal: {
+	"compact": {
 		sm: 1.25,
 		md: 1.5,
 		lg: 1.75
 	},
-	large: {
+	"normal": {
 		sm: 1.75,
 		md: 2,
 		lg: 2.25
+	},
+	"large": {
+		sm: 2.25,
+		md: 2.5,
+		lg: 2.75
+	},
+	"ultra-large": {
+		sm: 2.75,
+		md: 3,
+		lg: 3.25
 	}
 };
 /** Root font size assumed before the first measurement, so SSR and hydration agree. */
@@ -46,16 +56,16 @@ function measureControlHeight(density, size) {
 }
 /**
 * The density level that actually applies here: the nearest `<Density>` island,
-* else the `<ThemeProvider>` level, else `"normal"`.
+* else the `<ThemeProvider>` level, else `"compact"`.
 *
 * This is a JS read for code that cannot use CSS (virtualised row heights,
 * canvas drawing, layout math). Styling should use the density tokens or the
-* `density-ultra:` / `density-large:` variants instead.
+* per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
 *
 * @returns The applicable density level.
 */
 function useDensity() {
-	return React.useContext(DensityContext) ?? "normal";
+	return React.useContext(DensityContext) ?? "compact";
 }
 /**
 * The pixel height of a control at the ambient density — what a virtualiser or a
@@ -70,7 +80,7 @@ function useDensity() {
 * @param size - Which rung to measure. Defaults to `"md"`.
 * @returns Height in CSS pixels.
 * @example
-* const rowHeight = useControlHeight("sm"); // → 20 at normal density
+* const rowHeight = useControlHeight("sm"); // → 20 at compact density
 */
 function useControlHeight(size = "md") {
 	const density = useDensity();

package/dist/system/use-theme.d.ts

@@ -3,10 +3,12 @@ import { ThemeContextValue } from "./theme-provider.js";
 /**
  * Read and drive the ambient theme state.
  *
- * Returns `{ theme, density, mode, resolvedMode, setTheme, setDensity, setMode }`.
+ * Returns `{ theme, density, mode, font, resolvedMode, setTheme, setDensity,
+ * setMode, setFont }`.
  * `density` here is the *provider's* level — a nested `<Density>` island does not
  * change it; use `useDensity()` when you want the level that actually applies
- * where you are.
+ * where you are. `font` is the pairing the provider holds; it has no island, so
+ * it is always the one in force.
  *
  * @throws If called outside a `<ThemeProvider>`. Theme state is never guessed:
  *   a missing provider is a wiring bug, not a fallback situation.

package/dist/system/use-theme.js

@@ -5,10 +5,12 @@ import * as React from "react";
 /**
 * Read and drive the ambient theme state.
 *
-* Returns `{ theme, density, mode, resolvedMode, setTheme, setDensity, setMode }`.
+* Returns `{ theme, density, mode, font, resolvedMode, setTheme, setDensity,
+* setMode, setFont }`.
 * `density` here is the *provider's* level — a nested `<Density>` island does not
 * change it; use `useDensity()` when you want the level that actually applies
-* where you are.
+* where you are. `font` is the pairing the provider holds; it has no island, so
+* it is always the one in force.
 *
 * @throws If called outside a `<ThemeProvider>`. Theme state is never guessed:
 *   a missing provider is a wiring bug, not a fallback situation.

package/dist/theming/_presets.js

@@ -453,6 +453,59 @@ const THEME_PRESETS = {
 			"scrim": "rgba(0,0,0,0.35)"
 		},
 		fonts: { "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
+	},
+	quotamate: {
+		dark: {
+			"bg": "#0e0e12",
+			"sunken": "#09090c",
+			"surface-1": "#15151a",
+			"surface-2": "#212127",
+			"surface-3": "#2b2b31",
+			"fg": "#f4f4f6",
+			"fg-muted": "#8b8b95",
+			"fg-subtle": "#62626b",
+			"border": "#2b2b31",
+			"border-strong": "#3d3d45",
+			"border-overlay": "#3d3d45",
+			"accent": "#00e5e5",
+			"accent-hover": "#33ffff",
+			"accent-fg": "#0e0e12",
+			"ok": "#22d967",
+			"busy": "#00e5e5",
+			"warn": "#ffab1a",
+			"danger": "#e13d3d",
+			"info": "#4a9eff",
+			"selection": "rgba(0,229,229,0.18)",
+			"focus": "#00e5e5",
+			"data-ground": "#000000",
+			"scrim": "rgba(0,0,0,0.55)"
+		},
+		light: {
+			"bg": "#fcfcfd",
+			"sunken": "#f1f1f4",
+			"surface-1": "#ffffff",
+			"surface-2": "#f4f4f6",
+			"surface-3": "#e7e7ec",
+			"fg": "#18181b",
+			"fg-muted": "#6e6e78",
+			"fg-subtle": "#9a9aa4",
+			"border": "#e2e2e8",
+			"border-strong": "#c9c9d2",
+			"border-overlay": "#c9c9d2",
+			"accent": "#0d7d7d",
+			"accent-hover": "#0a6767",
+			"accent-fg": "#ffffff",
+			"ok": "#17914a",
+			"busy": "#0d7d7d",
+			"warn": "#b46a00",
+			"danger": "#c22d2d",
+			"info": "#1f6fd4",
+			"selection": "rgba(13,125,125,0.16)",
+			"focus": "#0d7d7d",
+			"data-ground": "#ffffff",
+			"scrim": "rgba(0,0,0,0.55)"
+		},
+		fonts: { "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace" }
 	}
 };
 /**
@@ -461,11 +514,16 @@ const THEME_PRESETS = {
 * has to beat, and `:root` carries the *default* theme's font override. A silent
 * theme would inherit cue's JetBrains Mono instead of the base stack, so every
 * block says what it owns. Mirrors `build.mjs`'s `THEME_FONTS` handling.
+*
+* Every entry is a generic or a face the platform ships. The sans stack named
+* `Geist` until 2026-08-19 and no webfont was ever loaded to make it resolve, so
+* it was a name most visitors silently fell straight past; Geist is now the head
+* of the `geist` font pairing, which an app can actually deliver.
 */
 const BASE_FONT_STACKS = {
-	"font-sans": "Geist, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif",
+	"font-sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif",
 	"font-mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
-	"font-display": "Geist, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif"
+	"font-display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif"
 };
 /**
 * The radius multiplier each density level contributes.
@@ -478,10 +536,27 @@ const BASE_FONT_STACKS = {
 */
 const DENSITY_RADIUS_SCALE = {
 	"ultra-compact": .75,
+	"compact": 1,
 	"normal": 1,
-	"large": 1
+	"large": 1,
+	"ultra-large": 1
 };
 /** The default density, whose radius scale the uncrossed theme block carries. */
-const DEFAULT_DENSITY_LEVEL = "normal";
+const DEFAULT_DENSITY_LEVEL = "compact";
+/**
+* What every theme block sets `--cue-font-mono` to.
+*
+* Neither the theme axis nor the font axis writes the shared token: each
+* publishes its own half (`--cue-font-theme-mono` and `--cue-font-pairing-mono`)
+* and this is the resolution, pairing first. It has to be a `var()` chain rather
+* than a value because the two attributes land on different elements — a
+* provider stamps `data-theme` on a `<div>` inside the `<html>` the pre-paint
+* script stamped `data-font` on, and for an inherited property the nearer
+* declaration would otherwise win whatever the stylesheet's order is.
+*
+* Mirrors `packages/tokens/build.mjs`'s `RESOLVED_MONO`, and
+* `test/theming/presets.test.ts` fails when the two drift.
+*/
+const RESOLVED_MONO = "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))";
 //#endregion
-export { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS, THEME_PRESETS };
+export { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, RESOLVED_MONO, THEME_COLOR_TOKENS, THEME_PRESETS };

package/dist/theming/create-theme.js

@@ -1,5 +1,5 @@
 import { formatColorString } from "../color/_convert.js";
-import { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS, THEME_PRESETS } from "./_presets.js";
+import { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, RESOLVED_MONO, THEME_COLOR_TOKENS, THEME_PRESETS } from "./_presets.js";
 import { WCAG_AA_TEXT, contrastRatio, contrastReport } from "./contrast.js";
 import { assertCssValue, assertThemeName, derivedTokens, serializeThemeCss, themeSelector, tokenProperty } from "./serialize.js";
 import { clampChroma, converter, formatHex, inGamut, parse } from "culori";
@@ -321,14 +321,23 @@ function resolveLight(dark, preset) {
 		provisional
 	};
 }
-/** The font declarations a theme block carries. */
+/**
+* The font declarations a theme block carries.
+*
+* The monospace lands on `--cue-font-theme-mono`, not on `--cue-font-mono`, and
+* the shared token is restated as the resolution of the two axes' halves —
+* exactly what a shipped preset's block does. A generated theme that wrote the
+* shared token directly would beat a `[data-font]` pairing stamped on any
+* ancestor, purely by sitting nearer to the text, and a consumer's own preset
+* would be the one preset in the system the typeface picker could not move.
+*/
 function resolveFonts(anchors, preset) {
 	const fonts = anchors.fonts ?? {};
 	const declared = [];
 	if (fonts.sans !== void 0) declared.push(["font-sans", fonts.sans]);
-	declared.push(["font-mono", fonts.mono ?? lookup(preset, "font-mono") ?? BASE_FONT_STACKS["font-mono"]]);
+	declared.push(["font-theme-mono", fonts.mono ?? lookup(preset, "font-mono") ?? BASE_FONT_STACKS["font-mono"]]);
 	if (fonts.display !== void 0) declared.push(["font-display", fonts.display]);
-	return declared.map(([name, value]) => [tokenProperty(name), assertCssValue(name, value)]);
+	return [...declared.map(([name, value]) => [tokenProperty(name), assertCssValue(name, value)]), [tokenProperty("font-mono"), RESOLVED_MONO]];
 }
 /** Round a product of two scales to something a stylesheet can print. */
 const scaled = (a, b) => String(Number((a * b).toFixed(4)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
   "license": "MIT",
   "type": "module",
@@ -107,13 +107,14 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "CHANGELOG.md"
   ],
   "dependencies": {
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
-    "@cueplusplus/tokens": "0.1.0"
+    "@cueplusplus/tokens": "0.2.0"
   },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",