@cueplusplus/ui 0.13.0

package/dist/brand/_chassis.js

@@ -0,0 +1,81 @@
+//#region src/brand/_chassis.ts
+/** The heights of the three rungs, straight off the density ladder. */
+const RUNG_HEIGHTS = {
+	sm: "var(--cue-control-sm)",
+	md: "var(--cue-control-md)",
+	lg: "var(--cue-control-lg)"
+};
+/**
+* The height a `size` resolves to, as a CSS length.
+*
+* A rung name reads the token, so the asset tracks the density island it is
+* in. A number is an explicit height in px at the default 16px root, emitted as
+* `rem` so it tracks browser zoom instead — the same escape hatch, and the same
+* conversion, `StatusDot` gives its diameter.
+*
+* @param size A rung of the ladder, or a height in px.
+*/
+function brandHeight(size) {
+	return typeof size === "number" ? `${size / 16}rem` : RUNG_HEIGHTS[size];
+}
+/**
+* The width a `size` resolves to for an asset that is not square.
+*
+* A rung stays symbolic — `calc()` over the token, so the width still moves
+* when the density does. An explicit height is a number here and now, so it is
+* multiplied out rather than left as arithmetic for the browser: one value in
+* the style attribute instead of an expression, and the same result.
+*
+* @param size A rung of the ladder, or a height in px.
+* @param width The artwork's width, in its own units.
+* @param height The artwork's height, in the same units.
+*/
+function brandWidth(size, width, height) {
+	return typeof size === "number" ? `${size * width / height / 16}rem` : `calc(${RUNG_HEIGHTS[size]} * ${width} / ${height})`;
+}
+/** Each tone's pair, all six values from the token layer or from the caller. */
+const BRAND_INKS = {
+	inherit: {
+		fill: "currentColor",
+		knockout: "var(--cue-bg)"
+	},
+	fg: {
+		fill: "var(--cue-fg)",
+		knockout: "var(--cue-bg)"
+	},
+	accent: {
+		fill: "var(--cue-accent)",
+		knockout: "var(--cue-accent-fg)"
+	}
+};
+/**
+* The paint for a tone.
+*
+* @param tone Which of the three inks to use.
+*/
+function brandInk(tone) {
+	return BRAND_INKS[tone];
+}
+/**
+* The attributes that decide whether a mark is a picture or a decoration.
+*
+* A brand asset is usually the second half of something already named — a link
+* that says "CUE++", a header with a heading in it — and a second announcement
+* of the same name is noise. So the default is decorative: `aria-hidden`, and
+* `focusable="false"` because legacy engines put a tabstop on an SVG that has
+* no business having one. Pass a `title` and it becomes a picture instead:
+* `role="img"`, named by the `<title>` the component then renders.
+*
+* @param title The accessible name, when the asset carries one.
+*/
+function brandLabelling(title) {
+	return title === void 0 ? {
+		"aria-hidden": true,
+		focusable: "false"
+	} : {
+		role: "img",
+		focusable: "false"
+	};
+}
+//#endregion
+export { brandHeight, brandInk, brandLabelling, brandWidth };

package/dist/brand/_geometry.js

@@ -0,0 +1,41 @@
+//#region src/brand/_geometry.ts
+/** The face, as `plussie.svg` draws it: one circle, centred, full-bleed. */
+const MARK_CIRCLE = {
+	cx: 183.5,
+	cy: 183.5,
+	r: 183.5
+};
+/**
+* The two "+" glyphs, in document order.
+*
+* Each is a single path of two crossing rectangles — the vertical bar first,
+* then the horizontal one — which is why an eye can be transformed as a unit.
+*/
+const MARK_EYES = [{
+	side: "left",
+	d: "M57.9395 236.4V130.947H84.6006V236.4H57.9395ZM18.5436 197.004V170.343H123.997V197.004H18.5436Z",
+	centerX: 71.27,
+	centerY: 183.67
+}, {
+	side: "right",
+	d: "M171.535 236.4V130.947H198.196V236.4H171.535ZM132.139 197.004V170.343H237.592V197.004H132.139Z",
+	centerX: 184.87,
+	centerY: 183.67
+}];
+/**
+* The mark, as the logotype draws it: one `evenodd` path, so the two "+"
+* glyphs are holes rather than ink.
+*
+* Not the same numbers as {@link MARK_CIRCLE} and {@link MARK_EYES}: the
+* lock-up's mark is the standalone one squeezed to 96.777% of its width, and
+* the artwork carries that squeeze in the path rather than in a transform.
+*/
+const LOGOTYPE_MARK_PATH = "M778 183.5C778 284.844 698.492 367 600.413 367C502.335 367 422.826 284.844 422.826 183.5C422.826 82.1558 502.335 0 600.413 0C698.492 0 778 82.1558 778 183.5ZM478.899 236.4V197.004H440.773V170.343H478.899V130.947H504.701V170.343H542.828V197.004H504.701V236.4H478.899ZM588.834 197.004V236.4H614.636V197.004H652.762V170.343H614.636V130.947H588.834V170.343H550.707V197.004H588.834Z";
+/** `C`, `U` and `E`, in reading order, verbatim from `cue++.svg`. */
+const LOGOTYPE_LETTER_PATHS = [
+	"M136.396 160.524H103.981C103.389 156.289 102.18 152.529 100.354 149.241C98.5289 145.903 96.1853 143.064 93.3237 140.723C90.4621 138.382 87.1564 136.588 83.4067 135.343C79.7063 134.098 75.6852 133.475 71.3434 133.475C63.4986 133.475 56.6652 135.443 50.8433 139.378C45.0213 143.263 40.5069 148.942 37.2999 156.414C34.0929 163.836 32.4894 172.852 32.4894 183.463C32.4894 194.372 34.0929 203.537 37.2999 210.96C40.5562 218.382 45.0953 223.986 50.9173 227.772C56.7392 231.557 63.4739 233.45 71.1214 233.45C75.4138 233.45 79.3856 232.877 83.0366 231.732C86.737 230.586 90.018 228.917 92.8796 226.726C95.7413 224.484 98.1095 221.769 99.9844 218.581C101.909 215.393 103.241 211.757 103.981 207.672L136.396 207.821C135.557 214.845 133.461 221.62 130.106 228.145C126.8 234.621 122.335 240.424 116.71 245.555C111.135 250.636 104.474 254.671 96.7281 257.66C89.0312 260.599 80.323 262.068 70.6033 262.068C57.0846 262.068 44.9967 258.98 34.3396 252.803C23.7318 246.626 15.3443 237.684 9.17695 225.978C3.05898 214.272 0 200.1 0 183.463C0 166.775 3.10832 152.578 9.32497 140.872C15.5416 129.166 23.9785 120.249 34.6356 114.122C45.2927 107.946 57.2819 104.857 70.6033 104.857C79.3856 104.857 87.5264 106.102 95.0259 108.593C102.575 111.084 109.26 114.72 115.082 119.502C120.904 124.235 125.64 130.038 129.291 136.912C132.992 143.786 135.36 151.657 136.396 160.524Z",
+	"M249.036 106.949H281.081V206.327C281.081 217.485 278.441 227.249 273.162 235.617C267.932 243.986 260.605 250.511 251.182 255.194C241.758 259.826 230.78 262.143 218.248 262.143C205.667 262.143 194.665 259.826 185.241 255.194C175.817 250.511 168.491 243.986 163.261 235.617C158.031 227.249 155.416 217.485 155.416 206.327V106.949H187.461V203.562C187.461 209.39 188.719 214.571 191.236 219.104C193.801 223.637 197.403 227.199 202.041 229.789C206.679 232.379 212.081 233.674 218.248 233.674C224.465 233.674 229.868 232.379 234.456 229.789C239.094 227.199 242.671 223.637 245.187 219.104C247.753 214.571 249.036 209.39 249.036 203.562V106.949Z",
+	"M303.486 259.976V106.949H405.617V133.624H335.532V170.088H400.362V196.763H335.532V233.301H405.913V259.976H303.486Z"
+];
+//#endregion
+export { LOGOTYPE_LETTER_PATHS, LOGOTYPE_MARK_PATH, MARK_CIRCLE, MARK_EYES };

package/dist/brand/cue-logotype.d.ts

@@ -0,0 +1,29 @@
+import { BrandAssetProps } from "./_chassis.js";
+import * as React from "react";
+//#region src/brand/cue-logotype.d.ts
+interface CueLogotypeProps extends BrandAssetProps {}
+/**
+ * The CUE++ logotype: the wordmark and the mark, locked up.
+ *
+ * 778:367, and it stays that shape at every size — `size` sets the height and
+ * the width follows, so a logotype and a {@link CueMark} beside it line up on
+ * the same row of a toolbar without either being measured by hand.
+ *
+ * One paint, not two. The artwork draws the lock-up's mark as a single
+ * `evenodd` path, which makes its two "+" glyphs holes rather than ink: they
+ * show whatever the logotype is standing on, so the whole thing is one
+ * `fill` and there is nothing to keep in step with a background.
+ *
+ * Decorative by default, like every asset in this group — pass a `title` only
+ * when nothing else on the page names the product.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <CueLogotype />
+ * @example
+ * <CueLogotype size="lg" title="CUE++" />
+ */
+declare const CueLogotype: React.ForwardRefExoticComponent<CueLogotypeProps & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { CueLogotype, CueLogotypeProps };

package/dist/brand/cue-logotype.js

@@ -0,0 +1,60 @@
+import { cn } from "../lib/cn.js";
+import { brandHeight, brandInk, brandLabelling, brandWidth } from "./_chassis.js";
+import { LOGOTYPE_LETTER_PATHS, LOGOTYPE_MARK_PATH } from "./_geometry.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/cue-logotype.tsx
+/**
+* The CUE++ logotype: the wordmark and the mark, locked up.
+*
+* 778:367, and it stays that shape at every size — `size` sets the height and
+* the width follows, so a logotype and a {@link CueMark} beside it line up on
+* the same row of a toolbar without either being measured by hand.
+*
+* One paint, not two. The artwork draws the lock-up's mark as a single
+* `evenodd` path, which makes its two "+" glyphs holes rather than ink: they
+* show whatever the logotype is standing on, so the whole thing is one
+* `fill` and there is nothing to keep in step with a background.
+*
+* Decorative by default, like every asset in this group — pass a `title` only
+* when nothing else on the page names the product.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <CueLogotype />
+* @example
+* <CueLogotype size="lg" title="CUE++" />
+*/
+const CueLogotype = React.forwardRef(function CueLogotype({ className, size = "md", tone = "inherit", title, style, ...elementProps }, ref) {
+	const ink = brandInk(tone).fill;
+	const height = brandHeight(size);
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		viewBox: `0 0 778 367`,
+		fill: "none",
+		className: cn("inline-block shrink-0 align-middle", className),
+		style: {
+			height,
+			width: brandWidth(size, 778, 367),
+			...style
+		},
+		...brandLabelling(title),
+		...elementProps,
+		children: [
+			title === void 0 ? null : /* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: LOGOTYPE_MARK_PATH,
+				fill: ink
+			}),
+			LOGOTYPE_LETTER_PATHS.map((d, index) => /* @__PURE__ */ jsx("path", {
+				d,
+				fill: ink
+			}, index))
+		]
+	});
+});
+//#endregion
+export { CueLogotype };

package/dist/brand/cue-mark.d.ts

@@ -0,0 +1,30 @@
+import { BrandAssetProps } from "./_chassis.js";
+import * as React from "react";
+//#region src/brand/cue-mark.d.ts
+interface CueMarkProps extends BrandAssetProps {}
+/**
+ * The CUE++ mark: the circular one, with no words in it.
+ *
+ * Square at every size, drawn from the artwork's own path data, and painted
+ * entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
+ * take the ground, which is exactly the relationship the two shipped SVGs
+ * encode by hand. One element is therefore correct in all ten presets and
+ * both modes, and there is no light/dark variant to pick.
+ *
+ * The two glyphs are {@link Plussie}'s eyes; both components read one geometry
+ * module, so the mark cannot stop being the character's face.
+ *
+ * Decorative by default. It renders `aria-hidden` unless you give it a `title`,
+ * because a mark beside a wordmark, a heading or a link that already says
+ * "CUE++" is the second time a reader is told.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <CueMark />
+ * @example
+ * <CueMark size="lg" tone="accent" title="CUE++" />
+ */
+declare const CueMark: React.ForwardRefExoticComponent<CueMarkProps & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { CueMark, CueMarkProps };

package/dist/brand/cue-mark.js

@@ -0,0 +1,61 @@
+import { cn } from "../lib/cn.js";
+import { brandHeight, brandInk, brandLabelling } from "./_chassis.js";
+import { MARK_CIRCLE, MARK_EYES } from "./_geometry.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/cue-mark.tsx
+/**
+* The CUE++ mark: the circular one, with no words in it.
+*
+* Square at every size, drawn from the artwork's own path data, and painted
+* entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
+* take the ground, which is exactly the relationship the two shipped SVGs
+* encode by hand. One element is therefore correct in all ten presets and
+* both modes, and there is no light/dark variant to pick.
+*
+* The two glyphs are {@link Plussie}'s eyes; both components read one geometry
+* module, so the mark cannot stop being the character's face.
+*
+* Decorative by default. It renders `aria-hidden` unless you give it a `title`,
+* because a mark beside a wordmark, a heading or a link that already says
+* "CUE++" is the second time a reader is told.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <CueMark />
+* @example
+* <CueMark size="lg" tone="accent" title="CUE++" />
+*/
+const CueMark = React.forwardRef(function CueMark({ className, size = "md", tone = "inherit", title, style, ...elementProps }, ref) {
+	const ink = brandInk(tone);
+	const height = brandHeight(size);
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		viewBox: `0 0 367 367`,
+		fill: "none",
+		className: cn("inline-block shrink-0 align-middle", className),
+		style: {
+			width: height,
+			height,
+			...style
+		},
+		...brandLabelling(title),
+		...elementProps,
+		children: [
+			title === void 0 ? null : /* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: MARK_CIRCLE.cx,
+				cy: MARK_CIRCLE.cy,
+				r: MARK_CIRCLE.r,
+				fill: ink.fill
+			}),
+			MARK_EYES.map((eye) => /* @__PURE__ */ jsx("path", {
+				d: eye.d,
+				fill: ink.knockout
+			}, eye.side))
+		]
+	});
+});
+//#endregion
+export { CueMark };

package/dist/brand/index.d.ts

@@ -0,0 +1,5 @@
+import { BrandAssetProps, BrandSize, BrandTone } from "./_chassis.js";
+import { CueLogotype, CueLogotypeProps } from "./cue-logotype.js";
+import { CueMark, CueMarkProps } from "./cue-mark.js";
+import { Plussie, PlussieExpression, PlussieProps } from "./plussie.js";
+export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, Plussie, type PlussieExpression, type PlussieProps };

package/dist/brand/plussie.d.ts

@@ -0,0 +1,67 @@
+import { BrandAssetProps } from "./_chassis.js";
+import * as React from "react";
+//#region src/brand/plussie.d.ts
+/**
+ * The poses Plussie can hold.
+ *
+ * Every one of them is a still taken out of the animation rig in
+ * `site/src/remotion/plussie/animations/`, at the frame where the pose is
+ * fullest — nothing here is invented, and nothing here needs Remotion:
+ *
+ * | Expression | Source | Frame |
+ * | --- | --- | --- |
+ * | `blink` | `01-Blink.tsx` | the midpoint of `blinkScaleY`, where both eyes are `scaleY(0.05)` |
+ * | `wink` | `02-Wink.tsx` | the same midpoint, left eye only |
+ * | `look-left` / `look-right` | `03-LookAround.tsx` | the held stops of its keyframe track, ±15 |
+ * | `look-up` / `look-down` | `04-LookUpDown.tsx` | the held stops of its track, ±12 |
+ */
+type PlussieExpression = "default" | "blink" | "wink" | "look-left" | "look-right" | "look-up" | "look-down";
+interface PlussieProps extends BrandAssetProps {
+  /**
+   * Which pose to hold. Defaults to `"default"`, eyes open and level.
+   *
+   * Every pose is a still from the character's own animations rather than a
+   * new drawing, so a screen that holds one and a video that plays through it
+   * agree.
+   */
+  expression?: PlussieExpression;
+  /**
+   * Blink every few seconds, on a CSS keyframe. Defaults to `false`.
+   *
+   * Off by default because a mark that moves in the corner of the eye is a
+   * distraction on a console screen, and off again for a reader who has asked
+   * for reduced motion — the rule that drives it is inside a
+   * `prefers-reduced-motion` guard, so there is no state to keep and nothing to
+   * turn off a second time.
+   *
+   * It composes with `expression`: a winking Plussie blinks its open eye.
+   */
+  idle?: boolean;
+}
+/**
+ * Plussie, the CUE++ character — the mark, with its eyes free to move.
+ *
+ * The same circle and the same two "+" glyphs {@link CueMark} draws, out of the
+ * same geometry module, because they are the same drawing: the mark's glyphs
+ * *are* the character's eyes. What this adds is that the eyes are their own
+ * groups, so an `expression` can slide or shut them.
+ *
+ * Static-first. The eight Remotion animations this character was rigged for
+ * stay in the site that renders video; a heavy, video-oriented peer has no
+ * business in a component library, so what is ported here is the geometry and
+ * the poses. Everything else a caller wants — a look that follows the cursor, a
+ * blink on a timer of their own — is a `expression` prop away, driven by their
+ * own runtime.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Plussie size="lg" title="Plussie" />
+ * @example
+ * <Plussie expression="wink" tone="accent" />
+ * @example
+ * <Plussie size={96} idle />
+ */
+declare const Plussie: React.ForwardRefExoticComponent<PlussieProps & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Plussie, PlussieExpression, PlussieProps };

package/dist/brand/plussie.js

@@ -0,0 +1,125 @@
+import { cn } from "../lib/cn.js";
+import { brandHeight, brandInk, brandLabelling } from "./_chassis.js";
+import { MARK_CIRCLE, MARK_EYES } from "./_geometry.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/plussie.tsx
+/** `blinkScaleY`'s value at the midpoint of a blink: shut, but still a line. */
+const EYE_CLOSED = .05;
+/** `03-LookAround.tsx`'s held stop. */
+const LOOK_X = 15;
+/** `04-LookUpDown.tsx`'s held stop. */
+const LOOK_Y = 12;
+/** Each expression as a pair of eye poses. `default` moves nothing. */
+const EXPRESSIONS = {
+	default: {
+		left: {},
+		right: {}
+	},
+	blink: {
+		left: { sy: EYE_CLOSED },
+		right: { sy: EYE_CLOSED }
+	},
+	wink: {
+		left: { sy: EYE_CLOSED },
+		right: {}
+	},
+	"look-left": {
+		left: { dx: -15 },
+		right: { dx: -15 }
+	},
+	"look-right": {
+		left: { dx: LOOK_X },
+		right: { dx: LOOK_X }
+	},
+	"look-up": {
+		left: { dy: -12 },
+		right: { dy: -12 }
+	},
+	"look-down": {
+		left: { dy: LOOK_Y },
+		right: { dy: LOOK_Y }
+	}
+};
+/**
+* A pose as an SVG `transform`, or `undefined` when there is nothing to apply.
+*
+* The attribute rather than the CSS property, deliberately: the idle blink is a
+* CSS animation on the group inside this one, and a CSS `transform` there would
+* override a CSS `transform` here. Two mechanisms on two elements is what lets
+* a winking Plussie also blink.
+*
+* @param pose Where the eye should sit.
+* @param eye The eye, for the centre a squash happens about.
+*/
+function eyeTransform(pose, eye) {
+	const parts = [];
+	if (pose.dx !== void 0 || pose.dy !== void 0) parts.push(`translate(${pose.dx ?? 0} ${pose.dy ?? 0})`);
+	if (pose.sy !== void 0) parts.push(`translate(${eye.centerX} ${eye.centerY}) scale(1 ${pose.sy}) translate(${-eye.centerX} ${-eye.centerY})`);
+	return parts.length === 0 ? void 0 : parts.join(" ");
+}
+/** The class `styles.css` attaches the idle blink's keyframes to. */
+const IDLE_CLASS = "cue-plussie-idle";
+/**
+* Plussie, the CUE++ character — the mark, with its eyes free to move.
+*
+* The same circle and the same two "+" glyphs {@link CueMark} draws, out of the
+* same geometry module, because they are the same drawing: the mark's glyphs
+* *are* the character's eyes. What this adds is that the eyes are their own
+* groups, so an `expression` can slide or shut them.
+*
+* Static-first. The eight Remotion animations this character was rigged for
+* stay in the site that renders video; a heavy, video-oriented peer has no
+* business in a component library, so what is ported here is the geometry and
+* the poses. Everything else a caller wants — a look that follows the cursor, a
+* blink on a timer of their own — is a `expression` prop away, driven by their
+* own runtime.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Plussie size="lg" title="Plussie" />
+* @example
+* <Plussie expression="wink" tone="accent" />
+* @example
+* <Plussie size={96} idle />
+*/
+const Plussie = React.forwardRef(function Plussie({ className, size = "md", tone = "inherit", title, expression = "default", idle = false, style, ...elementProps }, ref) {
+	const ink = brandInk(tone);
+	const height = brandHeight(size);
+	const pose = EXPRESSIONS[expression];
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		viewBox: `0 0 367 367`,
+		fill: "none",
+		className: cn("inline-block shrink-0 align-middle", className),
+		style: {
+			width: height,
+			height,
+			...style
+		},
+		...brandLabelling(title),
+		...elementProps,
+		children: [
+			title === void 0 ? null : /* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: MARK_CIRCLE.cx,
+				cy: MARK_CIRCLE.cy,
+				r: MARK_CIRCLE.r,
+				fill: ink.fill
+			}),
+			MARK_EYES.map((eye) => /* @__PURE__ */ jsx("g", {
+				transform: eyeTransform(pose[eye.side], eye),
+				children: /* @__PURE__ */ jsx("g", {
+					className: idle ? IDLE_CLASS : void 0,
+					children: /* @__PURE__ */ jsx("path", {
+						d: eye.d,
+						fill: ink.knockout
+					})
+				})
+			}, eye.side))
+		]
+	});
+});
+//#endregion
+export { Plussie };

package/dist/charts/_token.js

@@ -0,0 +1,39 @@
+//#region src/charts/_token.ts
+/**
+* Two ways to read a colour token, and the rule for when each one is right.
+*
+* A chart wants both. Anything the browser paints — a stroke, a fill, a CSS
+* custom property — should carry the **reference** (`var(--cue-accent)`), because
+* a reference re-resolves for free when the theme, the mode or a nested density
+* island changes, with no React involved. Anything JavaScript has to *compute
+* with* — deriving a ramp in oklch, handing a colour to a canvas — needs the
+* **resolved** value, because `var()` is not a colour to anything but CSS.
+*
+* The resolution is deliberately a function call rather than a cached constant:
+* called during render it sees the theme that is stamped right now, which is what
+* makes every palette in this group theme-reactive.
+*
+* @internal Not part of the public API.
+*/
+/** The CSS-level reference to a semantic token: `accent` → `var(--cue-accent)`. */
+function tokenRef(name) {
+	return `var(--cue-${name})`;
+}
+/**
+* The token's computed value in the theme that applies at `element`.
+*
+* @param name - Token name without the `--cue-` prefix.
+* @param element - Where to resolve. Defaults to the document element, which is
+*   where `ThemeProvider` stamps by default; pass a node inside a portal or a
+*   nested theme to read that scope instead.
+* @returns The trimmed value, or `null` when there is no DOM (server render) or
+*   nothing has defined the token.
+*/
+function resolveToken(name, element) {
+	if (typeof window === "undefined" || typeof document === "undefined") return null;
+	const target = element ?? document.documentElement;
+	const value = window.getComputedStyle(target).getPropertyValue(`--cue-${name}`).trim();
+	return value === "" ? null : value;
+}
+//#endregion
+export { resolveToken, tokenRef };

package/dist/charts/container.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+//#region src/charts/container.d.ts
+interface ChartContainerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The chart. Exactly one element — recharts' container takes a single child. */
+  children: React.ReactElement;
+  /** Plot height in px at the 16px root. Defaults to `200`. Ignored when `aspect` is set. */
+  height?: number;
+  /** Width-to-height ratio, letting the plot size itself from its column instead. */
+  aspect?: number;
+  /**
+   * What the chart shows. Given, the box becomes a named `figure`; a shape is
+   * not self-describing, so name the series.
+   */
+  label?: string;
+  /**
+   * The series palette, published as `--chart-1`…`--chart-N`. Defaults to
+   * {@link CHART_TONES}.
+   */
+  tones?: readonly string[];
+  /** Throttle for the resize observer, in ms. Defaults to none. */
+  debounce?: number;
+}
+/**
+ * The box every chart in this system sits in.
+ *
+ * It does three things, and deliberately not a fourth:
+ *
+ * 1. **It publishes the palette as custom properties.** `--chart-1`…`--chart-N`
+ *    carry `var(--cue-accent)`, `var(--cue-info)` and the rest *by reference*,
+ *    so a series written `<Line stroke={chartToneVar(0)} />` re-hues on a theme
+ *    switch with no re-render, no context and no effect. Resolving the palette in
+ *    JavaScript would have made the chart a subscriber to the theme; this way it
+ *    is simply painted in it.
+ * 2. **It re-inks recharts' chrome.** {@link chartChromeClasses} restyles the
+ *    grid, axes and ticks from tokens through the SVG's own class names, so
+ *    every axis is themed whether or not somebody remembered to configure it.
+ * 3. **It measures.** `ResponsiveContainer` is the only reliable way to give a
+ *    recharts chart a pixel size, and it needs a box with a real height — which
+ *    is what `height` (or `aspect`) sets, in `rem` so the plot scales with the
+ *    root font size like everything else.
+ *
+ * What it does not do is wrap or re-export recharts' chart components. A chart is
+ * a composition, and hiding `LineChart`/`XAxis`/`Tooltip` behind a props object
+ * would mean re-implementing a charting library's API surface one prop at a time.
+ *
+ * @example
+ * <ChartContainer label="Requests per minute" height={220}>
+ *   <LineChart data={series}>
+ *     <CartesianGrid vertical={false} />
+ *     <XAxis dataKey="t" />
+ *     <Tooltip cursor={chartTooltipCursor} content={<ChartTooltipContent />} />
+ *     <Line dataKey="requests" stroke={chartToneVar(0)} dot={false} />
+ *   </LineChart>
+ * </ChartContainer>
+ */
+declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChartContainer, ChartContainerProps };