@cueplusplus/ui 0.1.0 → 0.2.0

package/dist/brand/_chassis.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+//#region src/brand/_chassis.d.ts
+/**
+ * What every brand asset in this group shares: how big it is drawn, where its
+ * ink comes from, and how it is named to a screen reader.
+ *
+ * Three assets, one contract, because a header that puts the mark next to the
+ * logotype has to be able to say `size="sm"` twice and get two things the same
+ * height.
+ */
+/**
+ * Rung of the density control ladder a brand asset is drawn at.
+ *
+ * The same three rungs `Button`, `Avatar` and every form control use, and for
+ * the same reason: a mark in a toolbar is furniture on that toolbar's row, so
+ * it has to move when the density does. `size` picks the rung; the density
+ * decides what the rung measures.
+ */
+type BrandSize = "sm" | "md" | "lg";
+/**
+ * Where a brand asset takes its ink from.
+ *
+ * Not a light/dark pair. The source artwork ships two files that hard-code
+ * `white`, `black` and `#1E1E1E`; this library ships one component that reads
+ * the token layer, so a single element is correct in all eight presets and both
+ * modes without anybody choosing a file.
+ */
+type BrandTone = "inherit" | "fg" | "accent";
+/** The props every asset in this group takes. */
+interface BrandAssetProps extends Omit<React.ComponentPropsWithoutRef<"svg">, "children" | "width" | "height" | "title"> {
+  /**
+   * Rung of the density control ladder to draw at, or an explicit height in px.
+   * Defaults to `"md"`.
+   *
+   * Height, always — every asset here keeps its own aspect ratio, so the width
+   * follows from the artwork rather than from the caller.
+   */
+  size?: BrandSize | number;
+  /**
+   * Where the ink comes from: `currentColor`, the foreground token, or the
+   * accent. Defaults to `"inherit"`.
+   */
+  tone?: BrandTone;
+  /**
+   * The accessible name.
+   *
+   * Omit it and the asset is decorative — `aria-hidden`, announced by nothing.
+   * Pass one only when the mark is the *only* thing naming what it sits on: a
+   * bare logo link, a splash screen with no heading.
+   */
+  title?: string;
+}
+//#endregion
+export { BrandAssetProps, BrandSize, BrandTone };

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 eight 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 eight 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/chat/agent-pile.js

@@ -1,6 +1,6 @@
 "use client";
-import { agentColor } from "./agent-color.js";
 import { cn } from "../lib/cn.js";
+import { agentColor } from "./agent-color.js";
 import { CrownGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/chat/ask-box.js

@@ -1,6 +1,6 @@
 "use client";
-import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
 import { cn } from "../lib/cn.js";
+import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
 import { CheckGlyph } from "./_glyphs.js";
 import { Checkbox } from "../forms/checkbox.js";
 import { Input } from "../forms/input.js";
@@ -121,7 +121,7 @@ const AskBox = React.forwardRef(function AskBox({ className, question, kind = "t
 			type: "button",
 			"data-slot": "ask-box-summary",
 			"aria-expanded": open,
-			className: "flex min-w-0 cursor-pointer items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
+			className: "relative flex min-w-0 cursor-pointer items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
 			onClick: () => setOpen((current) => !current),
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/chat/delegation-card.js

@@ -1,6 +1,6 @@
 "use client";
-import { agentColor } from "./agent-color.js";
 import { cn } from "../lib/cn.js";
+import { agentColor } from "./agent-color.js";
 import { CheckGlyph } from "./_glyphs.js";
 import { Spinner } from "../primitives/spinner.js";
 import * as React from "react";

package/dist/chat/message.js

@@ -1,5 +1,5 @@
-import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
 import { cn } from "../lib/cn.js";
+import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/message.tsx
@@ -85,7 +85,7 @@ const Message = React.forwardRef(function Message({ className, role = "agent", a
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				"data-slot": "message-body",
-				className: "min-w-0 text-(length:--cue-text-body) leading-relaxed break-words whitespace-pre-wrap",
+				className: "relative min-w-0 text-(length:--cue-text-body) leading-relaxed break-words whitespace-pre-wrap",
 				children: [children, pending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					"data-slot": "message-caret",
 					"aria-hidden": "true",

package/dist/chrome/_edge-scroller.d.ts

@@ -0,0 +1,45 @@
+import "react";
+//#region src/chrome/_edge-scroller.d.ts
+/**
+ * The library's one answer to "this strip is wider than the space it has".
+ *
+ * A bar full of controls has three possible behaviours when it runs out of
+ * room: wrap, scroll, or move the surplus into a menu. This system picks
+ * **scroll**, once, and every bar that can overflow uses this module.
+ *
+ * - **Wrapping is out** because every bar here is one rung of the chrome
+ *   ladder tall (`--cue-chrome-toolbar`) and sits in a layout that has already
+ *   subtracted that height — `AppShell` gives the toolbar `shrink-0` beside a
+ *   `min-h-0` scroller. A bar that silently becomes two rows tall steals the
+ *   work area's height, and the same argument applies to a `SegmentedControl`
+ *   in a page header's actions slot.
+ * - **A "more" menu is out** because it cannot be built from the children a
+ *   bar actually takes. `Toolbar` accepts arbitrary nodes — buttons, groups,
+ *   separators, a `Select` — and there is no honest conversion from one of
+ *   those into a menu item; it would need a parallel `items` data model, a
+ *   per-item measuring pass on every resize, and it would lift the surplus
+ *   controls out of Base UI's roving-focus group, so the same button would be
+ *   reachable by arrow key at one width and by a popover at another.
+ * - **Scrolling is what the library already does** — `ScrollableTabsList` has
+ *   shipped this affordance since the tab strip was written, and its geometry
+ *   was factored out into `./_tabs-scroll` for exactly this reuse. Nothing is
+ *   hidden, nothing is re-parented, the roving-focus group stays intact, and
+ *   the arrow keys still walk the whole bar because a focused control is
+ *   scrolled into view by the browser.
+ *
+ * The affordance is two things and needs both: {@link useEdgeScroll} produces
+ * the fade mask that softens the cut, and {@link EdgeChevrons} draws the
+ * buttons that are the visible half — what sits at an overflowing edge is
+ * usually the gap *between* two controls, and fading empty space produces
+ * nothing anyone can see.
+ */
+/**
+ * What a bar does when its contents are wider than the space it has.
+ *
+ * One vocabulary, shared by every bar that can overflow, because there is one
+ * behaviour: `"scroll"` is the affordance this module implements, `"clip"` is
+ * the escape hatch for a bar already inside something that scrolls.
+ */
+type BarOverflow = "scroll" | "clip";
+//#endregion
+export { BarOverflow };