@cueplusplus/ui 0.2.0 → 0.5.0

package/dist/system/theme-provider.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { useIsomorphicInsertionEffect, useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.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";
+import { DEFAULT_FONT, FONTS, THEMES } from "@cueplusplus/tokens";
 //#region src/system/theme-provider.tsx
-const MODES = [
+const MODES$1 = [
 	"dark",
 	"light",
 	"system"
@@ -34,6 +34,8 @@ const ThemeContext = React.createContext(null);
 * Internal: not part of the public API.
 */
 const FontScaleContext = React.createContext(null);
+/** Effective font-family overrides from the nearest provider chain. */
+const FontFamiliesContext = React.createContext(null);
 function isOneOf(allowed, value) {
 	return typeof value === "string" && allowed.includes(value);
 }
@@ -49,6 +51,30 @@ function readPreferences(storageKey) {
 		return {};
 	}
 }
+/** Resolve `"system"` the way {@link prepaintScript} resolves it: against the media query. */
+function resolveMode(mode) {
+	if (mode !== "system") return mode;
+	if (typeof matchMedia !== "function") return DEFAULT_RESOLVED_MODE;
+	return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+/**
+* The stamp {@link prepaintScript} put on `<html>`, recomputed from the storage
+* it read.
+*
+* Not read back off the element, because by the time anything here runs it is
+* no longer there — see the `<html>` stamp below. Same key, same validation,
+* same fallbacks, so this returns what the script decided rather than a second
+* opinion about it.
+*/
+function prepaintStamp(storageKey, fallback) {
+	const stored = readPreferences(storageKey);
+	return {
+		theme: typeof stored.theme === "string" && stored.theme.length > 0 ? stored.theme : fallback.theme,
+		density: isOneOf(DENSITY_LEVELS, stored.density) ? stored.density : fallback.density,
+		font: isOneOf(FONT_NAMES, stored.font) ? stored.font : fallback.font,
+		mode: resolveMode(isOneOf(MODES$1, stored.mode) ? stored.mode : fallback.mode)
+	};
+}
 function writePreferences(storageKey, preferences) {
 	if (typeof localStorage === "undefined") return;
 	try {
@@ -84,14 +110,14 @@ function writePreferences(storageKey, preferences) {
 *   <App />
 * </ThemeProvider>
 */
-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 }) {
+function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp = DEFAULT_DENSITY$1, mode: modeProp = DEFAULT_MODE, font: fontProp = DEFAULT_FONT, fontScale = 1, fontFamilies, storageKey = DEFAULT_STORAGE_KEY, persistPreferences = true, 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;
+		if (!isRoot || !persistPreferences) return fontProp;
 		const stored = readPreferences(storageKey).font;
 		return isOneOf(FONT_NAMES, stored) ? stored : fontProp;
 	});
@@ -101,15 +127,24 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 	const restoredKey = React.useRef(null);
 	const [restored, setRestored] = React.useState(false);
 	useIsomorphicLayoutEffect(() => {
-		if (!isRoot || restoredKey.current === storageKey) return;
+		if (!isRoot) return;
+		if (!persistPreferences) {
+			setRestored(true);
+			return;
+		}
+		if (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(THEMES, stored.theme)) 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]);
+		if (isOneOf(MODES$1, stored.mode)) setModeState(stored.mode);
+	}, [
+		isRoot,
+		persistPreferences,
+		storageKey
+	]);
 	const lastProps = React.useRef({
 		theme: themeProp,
 		density: densityProp,
@@ -162,9 +197,13 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 			...patch
 		};
 		stateRef.current = next;
-		if (!isRoot) return;
+		if (!isRoot || !persistPreferences) return;
 		writePreferences(storageKey, next);
-	}, [isRoot, storageKey]);
+	}, [
+		isRoot,
+		persistPreferences,
+		storageKey
+	]);
 	const setTheme = React.useCallback((next) => {
 		setThemeState(next);
 		persist({ theme: next });
@@ -184,9 +223,20 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 	/** 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 || !restored || typeof document === "undefined") return;
+	useIsomorphicInsertionEffect(() => {
+		if (!isRoot || typeof document === "undefined") return;
 		const root = document.documentElement;
+		const next = restored || !persistPreferences ? {
+			theme,
+			density,
+			font,
+			mode
+		} : prepaintStamp(storageKey, {
+			theme: themeProp,
+			density: densityProp,
+			font: fontProp,
+			mode: modeProp
+		});
 		originalStamp.current ??= {
 			theme: root.getAttribute("data-theme"),
 			density: root.getAttribute("data-density"),
@@ -194,18 +244,28 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 			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;
+		const write = (name, value) => {
+			if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+		};
+		write("data-theme", next.theme);
+		write("data-density", next.density);
+		write("data-font", next.font);
+		write("data-mode", next.mode);
+		const scheme = next.mode === "system" ? "light dark" : next.mode;
+		if (root.style.colorScheme !== scheme) root.style.colorScheme = scheme;
 	}, [
 		isRoot,
 		restored,
+		persistPreferences,
+		storageKey,
 		theme,
 		density,
 		font,
-		resolvedMode
+		mode,
+		themeProp,
+		densityProp,
+		fontProp,
+		modeProp
 	]);
 	React.useEffect(() => () => {
 		const original = originalStamp.current;
@@ -243,20 +303,38 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 		setMode,
 		setFont
 	]);
+	const parentFontFamilies = React.useContext(FontFamiliesContext);
+	const effectiveFontFamilies = React.useMemo(() => {
+		const sans = fontFamilies?.sans ?? parentFontFamilies?.sans;
+		const mono = fontFamilies?.mono ?? parentFontFamilies?.mono;
+		return sans === void 0 && mono === void 0 ? null : {
+			sans,
+			mono
+		};
+	}, [
+		fontFamilies?.sans,
+		fontFamilies?.mono,
+		parentFontFamilies?.sans,
+		parentFontFamilies?.mono
+	]);
 	const style = React.useMemo(() => ({
-		colorScheme: resolvedMode,
+		colorScheme: mode === "system" ? "light dark" : mode,
 		"--cue-font-scale": fontScale,
+		...fontFamilies?.sans === void 0 ? null : { "--cue-font-sans": fontFamilies.sans },
+		...fontFamilies?.mono === void 0 ? null : { "--cue-font-mono": fontFamilies.mono },
 		...styleProp
 	}), [
-		resolvedMode,
+		mode,
 		fontScale,
+		fontFamilies?.sans,
+		fontFamilies?.mono,
 		styleProp
 	]);
 	const stamp = {
 		"data-cue-root": "",
 		"data-theme": theme,
 		"data-density": density,
-		"data-mode": resolvedMode
+		"data-mode": mode
 	};
 	let root;
 	if (asChild) {
@@ -279,12 +357,15 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(FontScaleContext.Provider, {
 			value: fontScale,
-			children: /* @__PURE__ */ jsx(DensityContext.Provider, {
-				value: density,
-				children: root
+			children: /* @__PURE__ */ jsx(FontFamiliesContext.Provider, {
+				value: effectiveFontFamilies,
+				children: /* @__PURE__ */ jsx(DensityContext.Provider, {
+					value: density,
+					children: root
+				})
 			})
 		})
 	});
 }
 //#endregion
-export { FontScaleContext, ThemeContext, ThemeProvider };
+export { FontFamiliesContext, FontScaleContext, ThemeContext, ThemeProvider };

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

@@ -11,6 +11,15 @@ type ControlSize = "sm" | "md" | "lg";
  * per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
  *
  * @returns The applicable density level.
+ * @example
+ * const density = useDensity();
+ * const rowHeight = useControlHeight("sm");
+ * // Shorter rows mean more of them on screen, so the reserve moves with the level.
+ * useVirtualizer({
+ *   count: rows.length,
+ *   estimateSize: () => rowHeight,
+ *   overscan: density === "ultra-compact" ? 12 : 6,
+ * });
  */
 declare function useDensity(): Density;
 /**

package/dist/system/use-density.js

@@ -63,6 +63,15 @@ function measureControlHeight(density, size) {
 * per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
 *
 * @returns The applicable density level.
+* @example
+* const density = useDensity();
+* const rowHeight = useControlHeight("sm");
+* // Shorter rows mean more of them on screen, so the reserve moves with the level.
+* useVirtualizer({
+*   count: rows.length,
+*   estimateSize: () => rowHeight,
+*   overscan: density === "ultra-compact" ? 12 : 6,
+* });
 */
 function useDensity() {
 	return React.useContext(DensityContext) ?? "compact";

package/dist/system/use-isomorphic-layout-effect.js

@@ -11,5 +11,23 @@ import * as React from "react";
 * (never-invoked) passive variant instead.
 */
 const useIsomorphicLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+* `useInsertionEffect` in the browser, `useEffect` on the server.
+*
+* One step earlier than the layout variant above, and the difference is the
+* whole reason it exists. React runs **every** insertion effect in the tree
+* during the mutation phase, before **any** layout effect runs; layout effects
+* then run child-first, so a provider near the root is the last thing in the
+* commit to get one. Anything a descendant's layout effect measures — Base UI
+* calls `getComputedStyle` in several — is measured against whatever the
+* document element is wearing at that moment.
+*
+* That matters exactly once: putting back what React 19 takes off `<html>` when
+* it hydrates the document element. See the `<html>` stamp in
+* `theme-provider.tsx`.
+*
+* Write only. An insertion effect must not read layout or schedule state.
+*/
+const useIsomorphicInsertionEffect = typeof document === "undefined" ? React.useEffect : React.useInsertionEffect;
 //#endregion
-export { useIsomorphicLayoutEffect };
+export { useIsomorphicInsertionEffect, useIsomorphicLayoutEffect };

package/dist/theming/_presets.d.ts

@@ -4,7 +4,7 @@ import { Density, ThemeName } from "@cueplusplus/tokens";
  * The colour tokens every theme block declares, in the order the tokens build
  * emits them. A generated theme is complete exactly when it covers this list.
  */
-declare const THEME_COLOR_TOKENS: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "danger", "info", "selection", "focus", "data-ground", "scrim"];
+declare const THEME_COLOR_TOKENS: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "warn-fg", "danger", "danger-fg", "info", "stream", "selection", "focus", "data-ground", "scrim"];
 /** One of the colour tokens a theme block owns. */
 type ThemeColorToken = (typeof THEME_COLOR_TOKENS)[number];
 //#endregion

package/dist/theming/_presets.js

@@ -21,8 +21,11 @@ const THEME_COLOR_TOKENS = [
 	"ok",
 	"busy",
 	"warn",
+	"warn-fg",
 	"danger",
+	"danger-fg",
 	"info",
+	"stream",
 	"selection",
 	"focus",
 	"data-ground",
@@ -46,11 +49,14 @@ const THEME_PRESETS = {
 			"accent": "#ffffff",
 			"accent-hover": "rgba(255,255,255,0.85)",
 			"accent-fg": "#0a0a0a",
-			"ok": "#ffffff",
-			"busy": "#ffffff",
-			"warn": "#ffffff",
+			"ok": "oklch(0.72 0.17 149)",
+			"busy": "oklch(0.78 0.13 220)",
+			"warn": "oklch(0.8 0.17 75)",
+			"warn-fg": "#000000",
 			"danger": "#ff5f57",
-			"info": "#ffffff",
+			"danger-fg": "#000000",
+			"info": "oklch(0.75 0.12 252)",
+			"stream": "oklch(0.707 0.165 254.624)",
 			"selection": "rgba(255,255,255,0.20)",
 			"focus": "#ffffff",
 			"data-ground": "#000000",
@@ -71,11 +77,14 @@ const THEME_PRESETS = {
 			"accent": "#0a0a0a",
 			"accent-hover": "rgba(0,0,0,0.85)",
 			"accent-fg": "#fcfcfc",
-			"ok": "#0a0a0a",
-			"busy": "#0a0a0a",
-			"warn": "#0a0a0a",
+			"ok": "oklch(0.53 0.14 149)",
+			"busy": "oklch(0.54 0.1 225)",
+			"warn": "oklch(0.55 0.115 70)",
+			"warn-fg": "#fcfcfc",
 			"danger": "#d03030",
-			"info": "#0a0a0a",
+			"danger-fg": "#fcfcfc",
+			"info": "oklch(0.55 0.16 258)",
+			"stream": "oklch(0.55 0.21 259.815)",
 			"selection": "rgba(0,0,0,0.20)",
 			"focus": "#0a0a0a",
 			"data-ground": "#000000",
@@ -102,8 +111,11 @@ const THEME_PRESETS = {
 			"ok": "hsl(142 76% 50%)",
 			"busy": "hsl(180 100% 50%)",
 			"warn": "hsl(38 100% 55%)",
+			"warn-fg": "hsl(240 12% 4%)",
 			"danger": "hsl(0 72% 51%)",
+			"danger-fg": "#ffffff",
 			"info": "hsl(180 100% 50%)",
+			"stream": "hsl(190 100% 55%)",
 			"selection": "hsl(180 100% 50% / 0.25)",
 			"focus": "hsl(180 100% 50%)",
 			"data-ground": "#000000",
@@ -127,8 +139,11 @@ const THEME_PRESETS = {
 			"ok": "hsl(142 71% 45%)",
 			"busy": "hsl(187 100% 33%)",
 			"warn": "hsl(38 92% 50%)",
+			"warn-fg": "hsl(240 6% 10%)",
 			"danger": "hsl(0 72% 45%)",
+			"danger-fg": "hsl(0 0% 99%)",
 			"info": "hsl(187 100% 33%)",
+			"stream": "hsl(196 100% 32%)",
 			"selection": "hsl(187 100% 33% / 0.18)",
 			"focus": "hsl(240 6% 10%)",
 			"data-ground": "#000000",
@@ -155,8 +170,11 @@ const THEME_PRESETS = {
 			"ok": "#00cc66",
 			"busy": "#ff6a2e",
 			"warn": "#ff9500",
+			"warn-fg": "#141414",
 			"danger": "#ff3333",
+			"danger-fg": "#141414",
 			"info": "#3b82f6",
+			"stream": "#5b9dff",
 			"selection": "rgba(255,106,46,0.16)",
 			"focus": "#ff6a2e",
 			"data-ground": "#000000",
@@ -180,8 +198,11 @@ const THEME_PRESETS = {
 			"ok": "#009e50",
 			"busy": "#d9541a",
 			"warn": "#cc7700",
+			"warn-fg": "#1f1f1f",
 			"danger": "#d42020",
+			"danger-fg": "#f5f5f5",
 			"info": "#1a6fd4",
+			"stream": "#1560c4",
 			"selection": "rgba(217,84,26,0.18)",
 			"focus": "#d9541a",
 			"data-ground": "#000000",
@@ -208,8 +229,11 @@ const THEME_PRESETS = {
 			"ok": "hsl(166 79% 38%)",
 			"busy": "hsl(27 94% 53%)",
 			"warn": "hsl(27 88% 52%)",
+			"warn-fg": "hsl(0 0% 7%)",
 			"danger": "hsl(0 87% 62%)",
+			"danger-fg": "hsl(0 0% 7%)",
 			"info": "hsl(209 89% 54%)",
+			"stream": "hsl(206 92% 66%)",
 			"selection": "hsl(212 63% 23%)",
 			"focus": "hsl(27 94% 53%)",
 			"data-ground": "#000000",
@@ -233,8 +257,11 @@ const THEME_PRESETS = {
 			"ok": "#0e8c70",
 			"busy": "#e06510",
 			"warn": "#c05e10",
+			"warn-fg": "#000000",
 			"danger": "#cc2f2f",
+			"danger-fg": "#f5f5f5",
 			"info": "#1a75d2",
+			"stream": "hsl(212 78% 42%)",
 			"selection": "#cce0ff",
 			"focus": "#e06510",
 			"data-ground": "#000000",
@@ -261,8 +288,11 @@ const THEME_PRESETS = {
 			"ok": "hsl(142 76% 36%)",
 			"busy": "hsl(38 92% 50%)",
 			"warn": "hsl(38 92% 50%)",
+			"warn-fg": "hsl(222 47% 4%)",
 			"danger": "hsl(0 72% 51%)",
+			"danger-fg": "hsl(0 0% 98%)",
 			"info": "hsl(221 83% 62%)",
+			"stream": "hsl(217 91% 68%)",
 			"selection": "hsl(27 94% 53% / 0.2)",
 			"focus": "hsl(27 94% 53%)",
 			"data-ground": "#000000",
@@ -286,8 +316,11 @@ const THEME_PRESETS = {
 			"ok": "hsl(142 70% 30%)",
 			"busy": "hsl(38 92% 40%)",
 			"warn": "hsl(38 92% 40%)",
+			"warn-fg": "hsl(222 30% 12%)",
 			"danger": "#c62828",
+			"danger-fg": "hsl(222 30% 97%)",
 			"info": "#2f6fd0",
+			"stream": "hsl(221 78% 45%)",
 			"selection": "rgba(224,101,16,0.15)",
 			"focus": "#e06510",
 			"data-ground": "#000000",
@@ -314,8 +347,11 @@ const THEME_PRESETS = {
 			"ok": "#6BBF95",
 			"busy": "#D98E4B",
 			"warn": "#D98E4B",
+			"warn-fg": "#08100D",
 			"danger": "#D9694B",
+			"danger-fg": "#08100D",
 			"info": "#5B8DEF",
+			"stream": "#6FA0FF",
 			"selection": "#1B1F16",
 			"focus": "#E8A33D",
 			"data-ground": "#000000",
@@ -339,8 +375,11 @@ const THEME_PRESETS = {
 			"ok": "#2C7D55",
 			"busy": "#96591D",
 			"warn": "#96591D",
+			"warn-fg": "#F4F5F1",
 			"danger": "#A23C22",
+			"danger-fg": "#F4F5F1",
 			"info": "#2563EB",
+			"stream": "#1D4FD8",
 			"selection": "rgba(154,101,22,0.18)",
 			"focus": "#9A6516",
 			"data-ground": "#000000",
@@ -367,8 +406,11 @@ const THEME_PRESETS = {
 			"ok": "#15ac91",
 			"busy": "#edbd6a",
 			"warn": "#ea7620",
+			"warn-fg": "#111111",
 			"danger": "#f14c4c",
+			"danger-fg": "#111111",
 			"info": "#228df2",
+			"stream": "#4aa5ff",
 			"selection": "rgba(237,189,106,0.22)",
 			"focus": "#edbd6a",
 			"data-ground": "#000000",
@@ -392,8 +434,11 @@ const THEME_PRESETS = {
 			"ok": "#0e8c70",
 			"busy": "#b8862f",
 			"warn": "#d06a10",
+			"warn-fg": "#1a1a1a",
 			"danger": "#d03030",
+			"danger-fg": "#f5f5f5",
 			"info": "#1a75d2",
+			"stream": "#0f6ac4",
 			"selection": "rgba(184,134,47,0.20)",
 			"focus": "#b8862f",
 			"data-ground": "#000000",
@@ -420,8 +465,11 @@ const THEME_PRESETS = {
 			"ok": "#7bc47f",
 			"busy": "#e6c53a",
 			"warn": "#e6c53a",
+			"warn-fg": "#141414",
 			"danger": "#e0563b",
+			"danger-fg": "#141414",
 			"info": "#5ac8fa",
+			"stream": "#6ec0ff",
 			"selection": "#e0568a",
 			"focus": "#e0568a",
 			"data-ground": "#000000",
@@ -445,8 +493,11 @@ const THEME_PRESETS = {
 			"ok": "#3d8b41",
 			"busy": "#8f7a14",
 			"warn": "#8f7a14",
+			"warn-fg": "#000000",
 			"danger": "#b8402b",
+			"danger-fg": "#f6f6f6",
 			"info": "#157fb3",
+			"stream": "#0f6f9e",
 			"selection": "rgba(184,53,96,0.18)",
 			"focus": "#b83560",
 			"data-ground": "#000000",
@@ -454,6 +505,65 @@ const THEME_PRESETS = {
 		},
 		fonts: { "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
 	},
+	requestport: {
+		dark: {
+			"bg": "#0a0d0e",
+			"sunken": "#07090a",
+			"surface-1": "#101416",
+			"surface-2": "#151a1d",
+			"surface-3": "#1a2024",
+			"fg": "#f0eee9",
+			"fg-muted": "#a3a6a8",
+			"fg-subtle": "#81868a",
+			"border": "#293034",
+			"border-strong": "#61686d",
+			"border-overlay": "#3f484e",
+			"accent": "#e66a45",
+			"accent-hover": "#f07a53",
+			"accent-fg": "#160d09",
+			"ok": "#63b482",
+			"busy": "#9a8cdb",
+			"warn": "#d6a65a",
+			"warn-fg": "#07090a",
+			"danger": "#dc6d69",
+			"danger-fg": "#07090a",
+			"info": "#6eb7d9",
+			"stream": "#7cc4e8",
+			"selection": "rgba(230,106,69,0.18)",
+			"focus": "#e66a45",
+			"data-ground": "#000000",
+			"scrim": "rgba(0,0,0,0.72)"
+		},
+		light: {
+			"bg": "#f4f3ef",
+			"sunken": "#e7e6e1",
+			"surface-1": "#faf9f6",
+			"surface-2": "#ffffff",
+			"surface-3": "#deddd8",
+			"fg": "#1a1d1e",
+			"fg-muted": "#53595c",
+			"fg-subtle": "#62696d",
+			"border": "#d0d2cf",
+			"border-strong": "#7f8689",
+			"border-overlay": "#aeb4b5",
+			"accent": "#b8492b",
+			"accent-hover": "#963b23",
+			"accent-fg": "#ffffff",
+			"ok": "#247746",
+			"busy": "#604aaa",
+			"warn": "#8a5b00",
+			"warn-fg": "#f4f3ef",
+			"danger": "#aa2f2b",
+			"danger-fg": "#f4f3ef",
+			"info": "#1d6587",
+			"stream": "#15607f",
+			"selection": "rgba(184,73,43,0.18)",
+			"focus": "#b8492b",
+			"data-ground": "#000000",
+			"scrim": "rgba(20,18,15,0.45)"
+		},
+		fonts: { "font-mono": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
+	},
 	quotamate: {
 		dark: {
 			"bg": "#0e0e12",
@@ -473,8 +583,11 @@ const THEME_PRESETS = {
 			"ok": "#22d967",
 			"busy": "#00e5e5",
 			"warn": "#ffab1a",
+			"warn-fg": "#09090c",
 			"danger": "#e13d3d",
+			"danger-fg": "#09090c",
 			"info": "#4a9eff",
+			"stream": "#5fb0ff",
 			"selection": "rgba(0,229,229,0.18)",
 			"focus": "#00e5e5",
 			"data-ground": "#000000",
@@ -498,8 +611,11 @@ const THEME_PRESETS = {
 			"ok": "#17914a",
 			"busy": "#0d7d7d",
 			"warn": "#b46a00",
+			"warn-fg": "#000000",
 			"danger": "#c22d2d",
+			"danger-fg": "#fcfcfd",
 			"info": "#1f6fd4",
+			"stream": "#0f63c8",
 			"selection": "rgba(13,125,125,0.16)",
 			"focus": "#0d7d7d",
 			"data-ground": "#ffffff",

package/dist/theming/contrast.d.ts

@@ -49,13 +49,25 @@ interface ContrastRequirement {
   reason: string;
 }
 /**
- * The eight pairs that decide whether a theme is usable.
+ * The eleven pairs that decide whether a theme is usable.
  *
  * Not every pair in the palette: the ones a reader's comprehension actually
  * depends on. Primary ink is held to AAA because it carries the prose; secondary
- * ink and accent ink to AA because they carry labels; the five status colours to
- * the non-text AA floor because they are read as *signals* — a dot, a rim, a bar
- * — never as body copy.
+ * ink and accent ink to AA because they carry labels; the five status colours
+ * and the live hue to the non-text AA floor because they are read as *signals*
+ * — a dot, a rim, a bar — never as body copy.
+ *
+ * `danger` and `warn` each appear twice, and they are the only tones that do.
+ * `ok`, `busy`, `info` and `stream` are *only* ever signals, so the non-text
+ * floor is the whole truth about them. The red and the amber are also grounds:
+ * they are the two tones this system fills a control with, and what they fill is
+ * the confirm on something irreversible and the confirm on something merely
+ * consequential. Text on either fill is text, so its ink is held to the text
+ * floor against the tone it sits on rather than against the page.
+ *
+ * `stream` is measured for the same reason `ok` is: `createTheme()` darkens it
+ * to this floor when it has to invent a light block, and a report that did not
+ * check what the derivation targets would be checking the wrong thing.
  */
 declare const CONTRAST_REQUIREMENTS: readonly ContrastRequirement[];
 /** One measured pair. */