@cueplusplus/ui 0.13.0

package/dist/charts/theme.js

@@ -0,0 +1,165 @@
+import { cn } from "../lib/cn.js";
+import { overlaySurfaceClasses } from "../overlays/_surface.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/theme.tsx
+/**
+* The recharts chrome, restated in this system's vocabulary.
+*
+* Recharts paints its grid, axes and ticks with presentation attributes baked
+* into the SVG (`stroke="#ccc"`, `fill="#666"`). Those attributes lose to any
+* CSS declaration, which is the whole opening: one scoped stylesheet on the
+* chart's wrapper re-inks the entire chrome without a single prop threaded
+* through the chart, and — because the declarations are token references — it
+* re-inks again on a theme, mode or density switch with no React involved.
+*
+* The alternative, spreading a `{ stroke, fill, fontSize }` bundle onto every
+* `CartesianGrid`, `XAxis` and `YAxis`, is the version of this that rots: the one
+* axis somebody forgets to spread onto is grey forever, and nothing catches it.
+*
+* Deliberately recharts-free at the module level: only the container imports the
+* library, so this file and the palette stay importable from groups that never
+* render a chart.
+*/
+/**
+* Everything the chart wrapper needs to re-ink recharts' own SVG.
+*
+* Spread by `ChartContainer`; exported so an app that mounts a chart some other
+* way (a recharts component outside the container, a printed export) gets the
+* same chrome from the same source.
+*
+* @example
+* <div className={cn(chartChromeClasses, "h-40")}><LineChart …/></div>
+*/
+const chartChromeClasses = [
+	"[&_.recharts-cartesian-grid_line]:stroke-border",
+	"[&_.recharts-cartesian-grid_line]:[stroke-opacity:0.45]",
+	"[&_.recharts-cartesian-axis-line]:stroke-border",
+	"[&_.recharts-cartesian-axis-tick-line]:stroke-border",
+	"[&_.recharts-cartesian-axis-tick-value]:font-mono",
+	"[&_.recharts-cartesian-axis-tick-value]:text-(length:--cue-text-label)",
+	"[&_.recharts-cartesian-axis-tick-value]:fill-fg-subtle",
+	"[&_.recharts-label]:font-mono",
+	"[&_.recharts-label]:text-(length:--cue-text-label)",
+	"[&_.recharts-label]:fill-fg-muted",
+	"[&_.recharts-legend-item-text]:font-mono",
+	"[&_.recharts-legend-item-text]:text-(length:--cue-text-label)",
+	"[&_.recharts-reference-line-line]:stroke-danger",
+	"[&_.recharts-active-dot_circle]:stroke-bg"
+].join(" ");
+/**
+* The cursor recharts draws under the tooltip.
+*
+* One object for both shapes it can take: a `<line>` on a line or area chart,
+* where only the stroke lands, and a `<rect>` on a bar chart, where the faint
+* fill washes the hovered band and the dashed rim keeps its edges legible. The
+* dash is the same `2 3` the rest of the system uses for "this is a guide, not
+* data".
+*
+* @example
+* <Tooltip cursor={chartTooltipCursor} content={<ChartTooltipContent />} />
+*/
+const chartTooltipCursor = {
+	stroke: "var(--cue-fg)",
+	strokeOpacity: .5,
+	strokeWidth: 1,
+	strokeDasharray: "2 3",
+	fill: "var(--cue-fg)",
+	fillOpacity: .06
+};
+/** Identity and behaviour attributes a caller may still put on the surface. */
+const DOM_PASSTHROUGH = /* @__PURE__ */ new Set([
+	"id",
+	"role",
+	"title",
+	"lang",
+	"dir",
+	"tabIndex"
+]);
+/**
+* The subset of the incoming props that belongs on a `<div>`.
+*
+* recharts renders custom tooltip content with `cloneElement(content, props)`,
+* so the entire `<Tooltip>` configuration — `cursor`, `wrapperStyle`,
+* `animationEasing`, two dozen more — arrives here as props. Spread that onto a
+* `<div>` and you get nineteen junk attributes in the DOM and a React warning
+* for each one.
+*
+* An allowlist rather than a denylist, because the denylist would need editing
+* every time recharts adds an option, and nothing would fail until someone
+* noticed the attributes. What a DOM node can carry, by contrast, does not
+* change: data and ARIA attributes, and a handful of identity ones. `className`
+* and `style` skip this filter entirely — they are destructured and applied by
+* name, so the two props a caller most wants are never at the allowlist's mercy.
+*/
+function domProps(props) {
+	const kept = {};
+	for (const [key, value] of Object.entries(props)) if (key.startsWith("data-") || key.startsWith("aria-") || DOM_PASSTHROUGH.has(key)) kept[key] = value;
+	return kept;
+}
+/**
+* The tooltip surface: an overlay, styled like every other overlay.
+*
+* A chart tooltip *is* a floating surface, so it gets exactly what a Popover
+* gets — `surface-2` fill, the overlay rim, one soft shadow — from
+* `_surface.ts` rather than from a second, chart-only recipe that would drift.
+* What it adds is the reading discipline the rest of the system uses for
+* numbers: mono, tabular figures, values right-aligned so a column of them lines
+* up under the pointer.
+*
+* Returns `null` when the pointer is off the plot or the payload is empty,
+* because recharts keeps the content mounted between hovers.
+*
+* `formatter` and `labelFormatter` may equally be set on the `<Tooltip>` itself:
+* recharts forwards its own configuration into cloned content, so both spellings
+* land here. Everything else in that configuration is dropped rather than
+* rendered — see {@link domProps} — which also means a handler passed to this
+* component does not reach the surface. Nothing would fire on it anyway: the
+* tooltip is drawn under the pointer, not in its path.
+*
+* @example
+* <Tooltip cursor={chartTooltipCursor} content={<ChartTooltipContent />} />
+*/
+const ChartTooltipContent = React.forwardRef(function ChartTooltipContent({ className, style, active, payload, label, hideLabel = false, hideIndicator = false, labelFormatter, formatter, ...elementProps }, ref) {
+	const entries = payload ?? [];
+	if (active !== true || entries.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "chart-tooltip",
+		className: cn(overlaySurfaceClasses, "flex min-w-[8rem] flex-col gap-(--cue-space-2) px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label)", className),
+		style,
+		...domProps(elementProps),
+		children: [hideLabel || label === void 0 || label === null ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart-tooltip-label",
+			className: "text-fg-muted",
+			children: labelFormatter === void 0 ? label : labelFormatter(label, entries)
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart-tooltip-items",
+			className: "flex flex-col gap-(--cue-space-1)",
+			children: entries.map((entry, index) => /* @__PURE__ */ jsxs("div", {
+				"data-slot": "chart-tooltip-item",
+				className: "flex items-center gap-(--cue-space-2)",
+				children: [
+					hideIndicator ? null : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "chart-tooltip-indicator",
+						className: "size-[0.375rem] shrink-0 rounded-[1px]",
+						style: { backgroundColor: entry.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "chart-tooltip-name",
+						className: "text-fg-muted",
+						children: entry.name ?? entry.dataKey
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "chart-tooltip-value",
+						className: "ml-auto tabular-nums text-fg",
+						children: formatter === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [entry.value, entry.unit] }) : formatter(entry.value, entry.name ?? entry.dataKey, entry, index)
+					})
+				]
+			}, index))
+		})]
+	});
+});
+//#endregion
+export { ChartTooltipContent, chartChromeClasses, chartTooltipCursor };

package/dist/charts/tones.d.ts

@@ -0,0 +1,111 @@
+//#region src/charts/tones.d.ts
+/**
+ * The categorical palette a chart assigns series from.
+ *
+ * It is two halves, and the seam between them is the whole design:
+ *
+ * - **The first six are the theme's own status vocabulary** — the same `accent`,
+ *   `info`, `ok`, `warn`, `danger` and `fg-muted` a StatusDot and a Chip use. A
+ *   chart of "requests vs errors" should draw errors in the colour the rest of
+ *   the console already means *error* by, and it should re-hue with the theme
+ *   like everything else. They are expressed as `var(--cue-*)` references so
+ *   that happens in CSS, with no re-render.
+ * - **The next nine are generated and fixed** — nine oklch hues at one lightness
+ *   and one chroma. Past six series the semantic vocabulary is exhausted, and
+ *   inventing a seventh *meaning* would be a lie; what a seventh series needs is
+ *   simply to be told apart from the sixth. Fixed literals also mean a legend
+ *   screenshotted under one theme still matches the chart under another, which a
+ *   theme-derived extension could not promise.
+ *
+ * Nothing here is a hard-coded brand colour, and nothing is a second spelling of
+ * a token: the semantic half *is* the token layer, seen from a chart.
+ */
+/** The six semantic tokens, in the order a chart consumes them. */
+declare const CHART_TONE_TOKENS: readonly ["accent", "info", "ok", "warn", "danger", "fg-muted"];
+/** One of the semantic series colours. */
+type ChartToneToken = (typeof CHART_TONE_TOKENS)[number];
+/**
+ * Lightness of every generated hue.
+ *
+ * One value for all nine, because a categorical palette whose members differ in
+ * lightness reads as an ordering — and a category list has no order. 0.7 is the
+ * rung that holds against this portfolio's dark grounds without glowing, and
+ * stays readable on the light ones.
+ */
+declare const CHART_EXTENDED_LIGHTNESS = 0.7;
+/**
+ * Chroma of every generated hue.
+ *
+ * 0.12 is the largest chroma at which *all nine* hues fit inside sRGB — push it
+ * to 0.14 and the teal and cyan ends fall out of gamut, so the browser clips
+ * them and two neighbours converge on the same green. A palette whose members
+ * cannot be told apart is worse than no palette at all.
+ */
+declare const CHART_EXTENDED_CHROMA = 0.12;
+/** The nine hue angles: evenly spaced 40° apart, starting at blue. */
+declare const CHART_EXTENDED_HUES: readonly number[];
+/** {@link CHART_EXTENDED_HUES} as `oklch()` literals. */
+declare const CHART_EXTENDED_TONES: readonly string[];
+/**
+ * The whole palette as CSS values — six token references, then nine literals.
+ *
+ * Safe to hand straight to a `stroke` or a `fill`: the references resolve in the
+ * theme the chart is stamped with, so the palette follows a theme switch without
+ * React hearing about it.
+ */
+declare const CHART_TONES: readonly string[];
+/** Prefix of the per-series custom properties `ChartContainer` publishes. */
+declare const CHART_TONE_PROPERTY_PREFIX = "--chart-";
+/**
+ * The custom property carrying series `index`.
+ *
+ * One-based in CSS, zero-based in JS: `--chart-1` is the first series, because
+ * `nth-child`-style CSS counting starts at one and a stylesheet reading
+ * `--chart-0` would be the odd one out.
+ *
+ * @param index - Zero-based series index.
+ * @example
+ * chartToneProperty(0); // → "--chart-1"
+ */
+declare function chartToneProperty(index: number): string;
+/**
+ * {@link chartToneProperty} wrapped in `var()`, ready for a recharts prop.
+ *
+ * @param index - Zero-based series index.
+ * @example
+ * <Line dataKey="requests" stroke={chartToneVar(0)} />
+ */
+declare function chartToneVar(index: number): string;
+interface ChartTonesOptions {
+  /**
+   * Where the semantic tokens resolve. Defaults to the document element. Pass a
+   * node inside a portal or a nested theme to read that scope instead.
+   */
+  element?: Element | null;
+  /**
+   * How many colours to return. Beyond the palette's own length it cycles, so a
+   * 20-series chart still gets 20 entries. Defaults to the whole palette.
+   */
+  count?: number;
+}
+/**
+ * The palette with its semantic half resolved against the live theme.
+ *
+ * {@link CHART_TONES} is what you paint with; this is what you *compute* with —
+ * a legend that needs a real colour string, a canvas overlay, a downstream oklch
+ * derivation. Because it resolves at call time it is theme-reactive in the same
+ * sense the CSS is: call it during render and it reports the theme stamped right
+ * now.
+ *
+ * Tokens that nothing has defined fall back to their `var()` reference rather
+ * than to an invented colour — the value is then still correct in a browser,
+ * just not yet computable.
+ *
+ * @param options - Where to resolve, and how many colours to return.
+ * @returns Concrete CSS colours, one per series.
+ * @example
+ * const [first] = chartTones({ element: chartRef.current });
+ */
+declare function chartTones(options?: ChartTonesOptions): string[];
+//#endregion
+export { CHART_EXTENDED_CHROMA, CHART_EXTENDED_HUES, CHART_EXTENDED_LIGHTNESS, CHART_EXTENDED_TONES, CHART_TONES, CHART_TONE_PROPERTY_PREFIX, CHART_TONE_TOKENS, ChartToneToken, ChartTonesOptions, chartToneProperty, chartToneVar, chartTones };

package/dist/charts/tones.js

@@ -0,0 +1,127 @@
+import { resolveToken, tokenRef } from "./_token.js";
+//#region src/charts/tones.ts
+/**
+* The categorical palette a chart assigns series from.
+*
+* It is two halves, and the seam between them is the whole design:
+*
+* - **The first six are the theme's own status vocabulary** — the same `accent`,
+*   `info`, `ok`, `warn`, `danger` and `fg-muted` a StatusDot and a Chip use. A
+*   chart of "requests vs errors" should draw errors in the colour the rest of
+*   the console already means *error* by, and it should re-hue with the theme
+*   like everything else. They are expressed as `var(--cue-*)` references so
+*   that happens in CSS, with no re-render.
+* - **The next nine are generated and fixed** — nine oklch hues at one lightness
+*   and one chroma. Past six series the semantic vocabulary is exhausted, and
+*   inventing a seventh *meaning* would be a lie; what a seventh series needs is
+*   simply to be told apart from the sixth. Fixed literals also mean a legend
+*   screenshotted under one theme still matches the chart under another, which a
+*   theme-derived extension could not promise.
+*
+* Nothing here is a hard-coded brand colour, and nothing is a second spelling of
+* a token: the semantic half *is* the token layer, seen from a chart.
+*/
+/** The six semantic tokens, in the order a chart consumes them. */
+const CHART_TONE_TOKENS = [
+	"accent",
+	"info",
+	"ok",
+	"warn",
+	"danger",
+	"fg-muted"
+];
+/**
+* Lightness of every generated hue.
+*
+* One value for all nine, because a categorical palette whose members differ in
+* lightness reads as an ordering — and a category list has no order. 0.7 is the
+* rung that holds against this portfolio's dark grounds without glowing, and
+* stays readable on the light ones.
+*/
+const CHART_EXTENDED_LIGHTNESS = .7;
+/**
+* Chroma of every generated hue.
+*
+* 0.12 is the largest chroma at which *all nine* hues fit inside sRGB — push it
+* to 0.14 and the teal and cyan ends fall out of gamut, so the browser clips
+* them and two neighbours converge on the same green. A palette whose members
+* cannot be told apart is worse than no palette at all.
+*/
+const CHART_EXTENDED_CHROMA = .12;
+/** The nine hue angles: evenly spaced 40° apart, starting at blue. */
+const CHART_EXTENDED_HUES = [
+	250,
+	290,
+	330,
+	10,
+	50,
+	90,
+	130,
+	170,
+	210
+];
+/** {@link CHART_EXTENDED_HUES} as `oklch()` literals. */
+const CHART_EXTENDED_TONES = CHART_EXTENDED_HUES.map((hue) => `oklch(${CHART_EXTENDED_LIGHTNESS} ${CHART_EXTENDED_CHROMA} ${hue})`);
+/**
+* The whole palette as CSS values — six token references, then nine literals.
+*
+* Safe to hand straight to a `stroke` or a `fill`: the references resolve in the
+* theme the chart is stamped with, so the palette follows a theme switch without
+* React hearing about it.
+*/
+const CHART_TONES = [...CHART_TONE_TOKENS.map(tokenRef), ...CHART_EXTENDED_TONES];
+/** Prefix of the per-series custom properties `ChartContainer` publishes. */
+const CHART_TONE_PROPERTY_PREFIX = "--chart-";
+/**
+* The custom property carrying series `index`.
+*
+* One-based in CSS, zero-based in JS: `--chart-1` is the first series, because
+* `nth-child`-style CSS counting starts at one and a stylesheet reading
+* `--chart-0` would be the odd one out.
+*
+* @param index - Zero-based series index.
+* @example
+* chartToneProperty(0); // → "--chart-1"
+*/
+function chartToneProperty(index) {
+	return `${CHART_TONE_PROPERTY_PREFIX}${index + 1}`;
+}
+/**
+* {@link chartToneProperty} wrapped in `var()`, ready for a recharts prop.
+*
+* @param index - Zero-based series index.
+* @example
+* <Line dataKey="requests" stroke={chartToneVar(0)} />
+*/
+function chartToneVar(index) {
+	return `var(${chartToneProperty(index)})`;
+}
+/**
+* The palette with its semantic half resolved against the live theme.
+*
+* {@link CHART_TONES} is what you paint with; this is what you *compute* with —
+* a legend that needs a real colour string, a canvas overlay, a downstream oklch
+* derivation. Because it resolves at call time it is theme-reactive in the same
+* sense the CSS is: call it during render and it reports the theme stamped right
+* now.
+*
+* Tokens that nothing has defined fall back to their `var()` reference rather
+* than to an invented colour — the value is then still correct in a browser,
+* just not yet computable.
+*
+* @param options - Where to resolve, and how many colours to return.
+* @returns Concrete CSS colours, one per series.
+* @example
+* const [first] = chartTones({ element: chartRef.current });
+*/
+function chartTones(options = {}) {
+	const { element, count } = options;
+	const palette = CHART_TONES.map((value, index) => {
+		const token = CHART_TONE_TOKENS[index];
+		return token === void 0 ? value : resolveToken(token, element) ?? value;
+	});
+	if (count === void 0) return palette;
+	return Array.from({ length: Math.max(0, count) }, (_unused, index) => palette[index % palette.length]);
+}
+//#endregion
+export { CHART_EXTENDED_CHROMA, CHART_EXTENDED_HUES, CHART_EXTENDED_LIGHTNESS, CHART_EXTENDED_TONES, CHART_TONES, CHART_TONE_PROPERTY_PREFIX, CHART_TONE_TOKENS, chartToneProperty, chartToneVar, chartTones };

package/dist/chat/_glyphs.js

@@ -0,0 +1,55 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chat/_glyphs.tsx
+/**
+* Shared chat glyphs.
+*
+* Drawn inline for the same reason as `overlays/_glyphs.tsx` and
+* `instruments/_glyphs.tsx`: a crown on an avatar and a tick on an answered
+* question should not put an icon dependency on the render path of a
+* transcript, and hand-set strokes stay hairline-thin at the 8–12px sizes
+* console density asks for. `currentColor` everywhere — the tone comes from the
+* parent, which in this group is usually `var(--agent-color)`.
+*
+* @internal Not part of the public API.
+*/
+/** Three points and a band: the orchestrator's mark. */
+function CrownGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M2 5.5 4.75 8 8 3.5 11.25 8 14 5.5v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5Z" })
+	});
+}
+/** The tick that says an answer landed. */
+function CheckGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3 8.5 3.5 3.5L13 4.5" })
+	});
+}
+/** A downward chevron — the direction the catch-up pill takes you. */
+function ChevronDownGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3 6 5 5 5-5" })
+	});
+}
+//#endregion
+export { CheckGlyph, ChevronDownGlyph, CrownGlyph };

package/dist/chat/agent-color.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+//#region src/chat/agent-color.d.ts
+/**
+ * Deterministic per-agent colour.
+ *
+ * In a multi-agent transcript the colour is not decoration — it is the only
+ * thing that lets a reader follow one agent's lane through a wall of nested
+ * cards. That makes two properties load-bearing:
+ *
+ * - **Deterministic.** The same slug is the same colour in every session, on
+ *   every machine, in every screenshot. No allocation table, no state, no
+ *   ordering dependency: just a hash of the slug, so two clients rendering the
+ *   same thread agree without talking to each other.
+ * - **Theme-independent.** The hues are literal `oklch()` values rather than
+ *   tokens, because a palette that re-hues per theme would break the first
+ *   property. They sit at L ≈ 0.6 with moderate chroma, which is the band that
+ *   stays legible against both the dark surfaces this portfolio defaults to and
+ *   the light ones it supports.
+ *
+ * The orchestrator is the one exception: it borrows the theme accent, because
+ * "the lane everything delegates from" is exactly what the accent means
+ * everywhere else in the system.
+ *
+ * Ported from corale's `agentColor`, hash and palette order intact — existing
+ * transcripts keep their colours.
+ */
+/**
+ * The seven sub-agent hues, in the order the hash indexes them.
+ *
+ * Seven rather than a generated ramp: past about seven, adjacent hues stop
+ * being distinguishable at the 16–24px an avatar occupies, and a palette whose
+ * members cannot be told apart is worse than no palette at all.
+ */
+declare const AGENT_HUES: readonly string[];
+/** What the orchestrator gets instead of a hue: the live theme accent. */
+declare const AGENT_ROOT_COLOR = "var(--cue-accent)";
+/**
+ * The custom property every chat part reads for its per-agent ink and rail.
+ *
+ * Published as a property rather than passed down as a prop so a caller can
+ * restyle a whole lane — a nested `DelegationCard`, the messages inside it, the
+ * rail down its side — by setting one value on the wrapper.
+ */
+declare const AGENT_COLOR_PROPERTY = "--agent-color";
+interface AgentColorOptions {
+  /**
+   * Slug of the orchestrator. That one agent answers {@link AGENT_ROOT_COLOR}
+   * instead of a palette hue; everyone else is unaffected.
+   */
+  root?: string;
+}
+/**
+ * The colour for one agent: a stable palette hue, or the theme accent for the
+ * orchestrator.
+ *
+ * Pure and synchronous — safe to call during render, in a server component, or
+ * from a test asserting that yesterday's colour is still today's.
+ *
+ * @param slug - The agent's stable identifier.
+ * @param options - Pass `root` to hand the orchestrator the accent.
+ * @returns A CSS colour: an `oklch()` literal, or `var(--cue-accent)`.
+ * @example
+ * agentColor("researcher"); // → "oklch(0.62 0.19 20)"
+ * @example
+ * agentColor("chief", { root: "chief" }); // → "var(--cue-accent)"
+ */
+declare function agentColor(slug: string, options?: AgentColorOptions): string;
+/**
+ * {@link agentColor} as an inline style, ready to spread onto an element.
+ *
+ * The cast is unavoidable: `React.CSSProperties` has no index signature for
+ * custom properties, and every alternative (a `Record<string, string>` the
+ * caller then casts, a `style` built inline at each site) moves the same cast
+ * somewhere less obvious.
+ *
+ * @param slug - The agent's stable identifier.
+ * @param options - Pass `root` to hand the orchestrator the accent.
+ * @returns `{ "--agent-color": … }`.
+ * @example
+ * <div style={agentColorStyle(slug, { root })} className="text-(--agent-color)" />
+ */
+declare function agentColorStyle(slug: string, options?: AgentColorOptions): React.CSSProperties;
+//#endregion
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, AgentColorOptions, agentColor, agentColorStyle };

package/dist/chat/agent-color.js

@@ -0,0 +1,101 @@
+//#region src/chat/agent-color.ts
+/**
+* Deterministic per-agent colour.
+*
+* In a multi-agent transcript the colour is not decoration — it is the only
+* thing that lets a reader follow one agent's lane through a wall of nested
+* cards. That makes two properties load-bearing:
+*
+* - **Deterministic.** The same slug is the same colour in every session, on
+*   every machine, in every screenshot. No allocation table, no state, no
+*   ordering dependency: just a hash of the slug, so two clients rendering the
+*   same thread agree without talking to each other.
+* - **Theme-independent.** The hues are literal `oklch()` values rather than
+*   tokens, because a palette that re-hues per theme would break the first
+*   property. They sit at L ≈ 0.6 with moderate chroma, which is the band that
+*   stays legible against both the dark surfaces this portfolio defaults to and
+*   the light ones it supports.
+*
+* The orchestrator is the one exception: it borrows the theme accent, because
+* "the lane everything delegates from" is exactly what the accent means
+* everywhere else in the system.
+*
+* Ported from corale's `agentColor`, hash and palette order intact — existing
+* transcripts keep their colours.
+*/
+/**
+* The seven sub-agent hues, in the order the hash indexes them.
+*
+* Seven rather than a generated ramp: past about seven, adjacent hues stop
+* being distinguishable at the 16–24px an avatar occupies, and a palette whose
+* members cannot be told apart is worse than no palette at all.
+*/
+const AGENT_HUES = [
+	"oklch(0.62 0.17 150)",
+	"oklch(0.62 0.15 50)",
+	"oklch(0.6 0.18 300)",
+	"oklch(0.6 0.15 220)",
+	"oklch(0.62 0.19 20)",
+	"oklch(0.6 0.13 190)",
+	"oklch(0.62 0.16 330)"
+];
+/** What the orchestrator gets instead of a hue: the live theme accent. */
+const AGENT_ROOT_COLOR = "var(--cue-accent)";
+/**
+* The custom property every chat part reads for its per-agent ink and rail.
+*
+* Published as a property rather than passed down as a prop so a caller can
+* restyle a whole lane — a nested `DelegationCard`, the messages inside it, the
+* rail down its side — by setting one value on the wrapper.
+*/
+const AGENT_COLOR_PROPERTY = "--agent-color";
+/**
+* djb2-style 31× hash, truncated to 32 bits each round.
+*
+* `value * 31` peaks below 2^37, so the multiply is exact in a double and the
+* `>>> 0` is the only truncation — which is what makes this reproduce corale's
+* assignments byte for byte.
+*/
+function hash(slug) {
+	let value = 0;
+	for (let index = 0; index < slug.length; index += 1) value = value * 31 + slug.charCodeAt(index) >>> 0;
+	return value;
+}
+/**
+* The colour for one agent: a stable palette hue, or the theme accent for the
+* orchestrator.
+*
+* Pure and synchronous — safe to call during render, in a server component, or
+* from a test asserting that yesterday's colour is still today's.
+*
+* @param slug - The agent's stable identifier.
+* @param options - Pass `root` to hand the orchestrator the accent.
+* @returns A CSS colour: an `oklch()` literal, or `var(--cue-accent)`.
+* @example
+* agentColor("researcher"); // → "oklch(0.62 0.19 20)"
+* @example
+* agentColor("chief", { root: "chief" }); // → "var(--cue-accent)"
+*/
+function agentColor(slug, options) {
+	if (options?.root !== void 0 && slug === options.root) return AGENT_ROOT_COLOR;
+	return AGENT_HUES[hash(slug) % AGENT_HUES.length];
+}
+/**
+* {@link agentColor} as an inline style, ready to spread onto an element.
+*
+* The cast is unavoidable: `React.CSSProperties` has no index signature for
+* custom properties, and every alternative (a `Record<string, string>` the
+* caller then casts, a `style` built inline at each site) moves the same cast
+* somewhere less obvious.
+*
+* @param slug - The agent's stable identifier.
+* @param options - Pass `root` to hand the orchestrator the accent.
+* @returns `{ "--agent-color": … }`.
+* @example
+* <div style={agentColorStyle(slug, { root })} className="text-(--agent-color)" />
+*/
+function agentColorStyle(slug, options) {
+	return { [AGENT_COLOR_PROPERTY]: agentColor(slug, options) };
+}
+//#endregion
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, agentColor, agentColorStyle };