@cueplusplus/ui 0.3.0 → 0.5.0

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",
@@ -473,8 +524,11 @@ const THEME_PRESETS = {
 			"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",
@@ -498,8 +552,11 @@ const THEME_PRESETS = {
 			"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",
@@ -526,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",
@@ -551,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. */

package/dist/theming/contrast.js

@@ -1,7 +1,7 @@
 import { converter, parse } from "culori";
 //#region src/theming/contrast.ts
 /**
-* WCAG contrast, and the eight pairs a theme is judged on.
+* WCAG contrast, and the eleven pairs a theme is judged on.
 *
 * A generator that only derived colours would be a colour toy: the reason to
 * compute a palette instead of picking one is that the computer can then *check*
@@ -82,13 +82,25 @@ function contrastRatio(foreground, background) {
 	return (high + .05) / (low + .05);
 }
 /**
-* 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.
 */
 const CONTRAST_REQUIREMENTS = [
 	{
@@ -112,12 +124,27 @@ const CONTRAST_REQUIREMENTS = [
 		minimum: WCAG_AA_TEXT,
 		reason: "The label on a solid accent button has to be readable."
 	},
+	{
+		id: "danger-fg/danger",
+		foreground: "danger-fg",
+		background: "danger",
+		minimum: WCAG_AA_TEXT,
+		reason: "The label on a solid destructive fill is read before something irreversible happens."
+	},
+	{
+		id: "warn-fg/warn",
+		foreground: "warn-fg",
+		background: "warn",
+		minimum: WCAG_AA_TEXT,
+		reason: "The label on a solid warning fill is read before a consequential press lands."
+	},
 	...[
 		"ok",
 		"busy",
 		"warn",
 		"danger",
-		"info"
+		"info",
+		"stream"
 	].map((status) => ({
 		id: `${status}/bg`,
 		foreground: status,

package/dist/theming/create-theme.d.ts

@@ -103,8 +103,12 @@ interface ThemeAnchors {
   accent?: string;
   /** Individual rungs of the surface ladder, overriding whatever would be derived. */
   surfaces?: Partial<Record<"sunken" | "surface-1" | "surface-2" | "surface-3", string>>;
-  /** Individual status tones. Never derived — a signal colour is a decision. */
-  status?: Partial<Record<"ok" | "busy" | "warn" | "danger" | "info", string>>;
+  /**
+   * Individual status tones, plus `stream` — the live hue an agent surface
+   * paints a token still arriving with. Never derived: a signal colour is a
+   * decision.
+   */
+  status?: Partial<Record<"ok" | "busy" | "warn" | "danger" | "info" | "stream", string>>;
   /**
    * Font stacks. `mono` is the one the presets themselves override; `sans` and
    * `display` are emitted only when given. Values pass through verbatim, so they

package/dist/theming/create-theme.js

@@ -178,14 +178,31 @@ function lookup(map, token) {
 * and stays correct if a consumer overrides the accent in tier 1 later.
 */
 const SELECTION_WASH = `color-mix(in oklch, var(--cue-accent) 22%, transparent)`;
-/** The five status tones, in the order every theme block declares them. */
-const STATUSES = [
+/**
+* The five tones plus the live hue, in the order the colour contract lists them.
+*
+* `stream` resolves exactly like a status — authored, never derived from the
+* accent, and darkened to the non-text floor when a light block has to be
+* invented — but it is not a `tone` any component takes. See
+* `ThemeAnchors.status`.
+*/
+const TINTED = [...[
 	"ok",
 	"busy",
 	"warn",
 	"danger",
 	"info"
-];
+], "stream"];
+/**
+* The tones that are also *grounds*, in contract order.
+*
+* Every other status colour is only ever a signal — a dot, a rim, a wash — and
+* whatever text sits near it sits on a surface. These two get filled: the amber
+* carries the confirm on a consequential press and the red the confirm on an
+* irreversible one, and text on a fill is text. So each gets an ink derived
+* against itself, `warn-fg` and `danger-fg`.
+*/
+const INKED = ["warn", "danger"];
 /** The three raised surfaces, in ladder order. */
 const SURFACES = [
 	"surface-1",
@@ -243,7 +260,12 @@ function resolveDark(anchors, preset) {
 	const accent = colors["accent"];
 	define("accent-hover", void 0, accentMoved, () => shift(readColor(accent, "accent"), ACCENT_HOVER_LIGHTNESS_STEP));
 	define("accent-fg", void 0, accentMoved, () => pickInk(accent, [colors["bg"], colors["fg"]]));
-	for (const tone of STATUSES) define(tone, status[tone], false);
+	for (const tone of TINTED) define(tone, status[tone], false);
+	for (const tone of INKED) define(`${tone}-fg`, void 0, status[tone] !== void 0, () => pickInk(colors[tone], [
+		colors["bg"],
+		colors["sunken"],
+		colors["fg"]
+	]));
 	define("selection", void 0, accentMoved, () => SELECTION_WASH);
 	define("focus", void 0, accentMoved, () => accent);
 	define("data-ground", void 0, false);
@@ -311,7 +333,12 @@ function resolveLight(dark, preset) {
 	const accent = colors["accent"];
 	define("accent-hover", () => shift(readColor(accent, "accent"), ACCENT_HOVER_LIGHTNESS_STEP));
 	define("accent-fg", () => pickInk(accent, [colors["bg"], colors["fg"]]));
-	for (const tone of STATUSES) define(tone, () => darkenToContrast(dark.colors[tone], paperGround, 3, tone));
+	for (const tone of TINTED) define(tone, () => darkenToContrast(dark.colors[tone], paperGround, 3, tone));
+	for (const tone of INKED) define(`${tone}-fg`, () => pickInk(colors[tone], [
+		colors["bg"],
+		colors["sunken"],
+		colors["fg"]
+	]));
 	define("selection", () => SELECTION_WASH);
 	define("focus", () => accent);
 	define("data-ground", () => dark.colors["data-ground"]);

package/dist/theming/serialize.d.ts

@@ -88,12 +88,21 @@ declare function themeSelector(name: string, options?: ThemeSelectorOptions): st
  * `:root`, for the same reason the build does it: a custom property's `var()`
  * references are substituted at the element that declares it, so a `:root`-level
  * mix would freeze the default theme's accent into every nested theme.
+ *
+ * This is deliberately a second copy of the `DERIVED` table in
+ * `packages/tokens/build.mjs`. It has to be one: that table runs at publish time
+ * over DTCG files under Style Dictionary, this one runs in a browser over a
+ * palette somebody just typed, and neither package can import the other's. What
+ * keeps a copy from drifting is not discipline but
+ * `test/theming/serialize.test.ts`, which compares this list against the
+ * compiled stylesheet in both directions — a derivation added to one side alone
+ * fails there rather than in a consumer's app six weeks later.
  */
 declare const DERIVED_TOKEN_TEMPLATES: ReadonlyArray<readonly [string, string]>;
 /**
  * {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
  *
- * @returns The eleven derived declarations, keyed by custom property.
+ * @returns The sixteen derived declarations, keyed by custom property.
  * @example
  * derivedTokens()["--cue-accent-soft"];
  */

package/dist/theming/serialize.js

@@ -97,6 +97,53 @@ function themeSelector(name, options = {}) {
 		density === void 0 ? "" : `[data-density="${density}"]`
 	].join("");
 }
+/** The tone vocabulary that gets a soft fill and a soft border in every theme. */
+const STATUSES = [
+	"ok",
+	"busy",
+	"warn",
+	"danger",
+	"info"
+];
+/**
+* The live hue — a token still arriving, a tool still running, a cursor that
+* has not stopped.
+*
+* Not a member of {@link STATUSES}, because a status is something a `Chip` or a
+* `StatusDot` can be *told to be* and "streaming" is not a tone a caller picks:
+* it is a property of a surface while the model is talking. What it shares with
+* the statuses is the shape of its family — a full-strength ink, a soft fill and
+* a rim — so it derives alongside them. `packages/tokens/build.mjs` carries the
+* same pair of constants for the same reason; see the note on
+* {@link DERIVED_TOKEN_TEMPLATES}.
+*/
+const STREAM = "stream";
+/** Every tone that earns a derived soft fill and a derived rim. */
+const TINTED = [...STATUSES, STREAM];
+/**
+* The three shares of the foreground the list idioms are ruled with.
+*
+* `--cue-border` is an authored anchor, and what a preset authors is a *box
+* edge* — the line around a card, an input, a panel. Repeated down thirty rows a
+* box edge reads as a stack of boxes rather than as a list, so a rule between
+* things is drawn lighter than the edge around a thing.
+*
+* Mixed from `--cue-fg` rather than authored, which is what makes them hold for
+* a preset `createTheme()` produced from a palette nobody vetted: the rules keep
+* their relationship to the type they separate whatever the palette turned out
+* to be, in both modes, with nothing to get wrong.
+*
+* `row-hover` is the same measurement from the other side — the faintest wash
+* that still reads as one row picked out of a list. It does not replace the
+* surface ramp: a row sitting *on* a surface still lifts to the next rung
+* (`hover:bg-surface-2`), which is what this library's own rows do. This is for
+* rows drawn directly on `--cue-bg`, where the next rung is a visible step.
+*/
+const HAIRLINE_TEMPLATES = [
+	["hair", "color-mix(in oklch, var(--cue-fg) 6%, transparent)"],
+	["hair-strong", "color-mix(in oklch, var(--cue-fg) 12%, transparent)"],
+	["row-hover", "color-mix(in oklch, var(--cue-fg) 3.5%, transparent)"]
+];
 /**
 * The derived colours every theme block carries, as `[token, value]` pairs.
 *
@@ -105,18 +152,25 @@ function themeSelector(name, options = {}) {
 * `:root`, for the same reason the build does it: a custom property's `var()`
 * references are substituted at the element that declares it, so a `:root`-level
 * mix would freeze the default theme's accent into every nested theme.
+*
+* This is deliberately a second copy of the `DERIVED` table in
+* `packages/tokens/build.mjs`. It has to be one: that table runs at publish time
+* over DTCG files under Style Dictionary, this one runs in a browser over a
+* palette somebody just typed, and neither package can import the other's. What
+* keeps a copy from drifting is not discipline but
+* `test/theming/serialize.test.ts`, which compares this list against the
+* compiled stylesheet in both directions — a derivation added to one side alone
+* fails there rather than in a consumer's app six weeks later.
 */
-const DERIVED_TOKEN_TEMPLATES = [["accent-soft", "color-mix(in oklch, var(--cue-accent) 14%, transparent)"], ...[
-	"ok",
-	"busy",
-	"warn",
-	"danger",
-	"info"
-].flatMap((status) => [[`${status}-soft`, `color-mix(in oklch, var(--cue-${status}) 12%, transparent)`], [`${status}-border`, `color-mix(in oklch, var(--cue-${status}) 35%, transparent)`]])];
+const DERIVED_TOKEN_TEMPLATES = [
+	["accent-soft", "color-mix(in oklch, var(--cue-accent) 14%, transparent)"],
+	...TINTED.flatMap((tone) => [[`${tone}-soft`, `color-mix(in oklch, var(--cue-${tone}) 12%, transparent)`], [`${tone}-border`, `color-mix(in oklch, var(--cue-${tone}) 35%, transparent)`]]),
+	...HAIRLINE_TEMPLATES
+];
 /**
 * {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
 *
-* @returns The eleven derived declarations, keyed by custom property.
+* @returns The sixteen derived declarations, keyed by custom property.
 * @example
 * derivedTokens()["--cue-accent-soft"];
 */

package/manifest/components/activity-graph.json

@@ -0,0 +1,88 @@
+{
+  "name": "ActivityGraph",
+  "slug": "activity-graph",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "heat-graph"
+  ],
+  "clientOnly": true,
+  "description": "A half-year of runs as a calendar of cells, dense where the work was.",
+  "props": [
+    {
+      "name": "data",
+      "type": "readonly DataPoint[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Date and count pairs from the heat-graph package. Levels are classified for you;\ngaps are filled as empty cells."
+    },
+    {
+      "name": "start",
+      "type": "string | Date",
+      "required": true,
+      "defaultValue": null,
+      "description": "First day of the window. Pass it explicitly: left unset, heat-graph draws a full\nyear ending today, which will not match your data."
+    },
+    {
+      "name": "end",
+      "type": "string | Date",
+      "required": true,
+      "defaultValue": null,
+      "description": "Last day of the window. Cells are fixed-size, so a long window scrolls\nhorizontally rather than shrinking."
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is being counted."
+    },
+    {
+      "name": "total",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted summary shown opposite the title."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"data\" | \"start\" | \"end\" | \"title\" | \"total\"\n> & {\n  /**\n   * Date and count pairs from the heat-graph package. Levels are classified for you;\n   * gaps are filled as empty cells.\n   */\n  data: readonly HeatGraph.DataPoint[];\n  /**\n   * First day of the window. Pass it explicitly: left unset, heat-graph draws a full\n   * year ending today, which will not match your data.\n   */\n  start: string | Date;\n  /**\n   * Last day of the window. Cells are fixed-size, so a long window scrolls\n   * horizontally rather than shrinking.\n   */\n  end: string | Date;\n  /** What is being counted. */\n  title: string;\n  /** Pre-formatted summary shown opposite the title. */\n  total: string;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "A half-year of runs as a calendar of cells, dense where the work was.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ActivityGraph } from \"@cueplusplus/ui/elements\";\n\n<ActivityGraph\n  data={data}\n  start={start}\n  end={end}\n  title=\"Agent runs\"\n  total=\"1,204 in 6 months\"\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/activity-graph",
+  "mdUrl": "/docs/components/activity-graph.md",
+  "jsonUrl": "/r/components/activity-graph.json",
+  "specimens": [
+    {
+      "title": "ActivityGraph",
+      "group": "elements-agents",
+      "components": [
+        "ActivityGraph"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"six months\" wide>\n    <ActivityGraph\n      data={RUN_DAYS}\n      start=\"2026-02-01\"\n      end=\"2026-08-21\"\n      title=\"Agent runs\"\n      total=\"1,204 in 6 months\"\n    />\n  </Specimen>\n  <Specimen label=\"a fortnight\" wide>\n    <ActivityGraph\n      data={RECENT_DAYS}\n      start={RECENT_DAYS[0]!.date}\n      end={RECENT_DAYS[RECENT_DAYS.length - 1]!.date}\n      title=\"Agent runs\"\n      total=\"63 in 14 days\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Half a year of runs as a calendar of cells, dense where the work was. It is the one element in the family with a runtime dependency of its own — `heat-graph`, an optional peer — which does the calendar arithmetic and the levelling; everything you can see here is cue's, from the five-step ramp in the streaming hue down to the legend. Cells are a fixed size, so a long window scrolls sideways rather than shrinking into a smudge.",
+      "interaction": "none. The five legend swatches are `aria-hidden` and sit between the words less and more, which is what carries the scale."
+    }
+  ],
+  "todo": true
+}