@cueplusplus/ui 0.18.2 → 0.20.0

package/dist/brand/text-scramble.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+//#region src/brand/text-scramble.d.ts
+interface TextScrambleProps extends Omit<React.ComponentPropsWithoutRef<"p">, "children"> {
+  /** The phrases to cycle through, in order, looping. The first is what renders before any script runs. */
+  phrases: readonly string[];
+  /**
+   * What assistive technology reads instead of the animation: one sentence that
+   * names the whole cycle. The animated text is hidden from it, because a
+   * scramble read aloud is noise.
+   */
+  label: string;
+  /**
+   * `matrix` (the default): letters, digits and symbols at 28ms a frame, one
+   * character locking per frame. `flap`: upper-cased, a departure board's
+   * letters at 55ms a frame, one character locking every two frames.
+   */
+  effect?: "matrix" | "flap";
+}
+/**
+ * A line that cycles through phrases, scrambling each one in — cueplusplus.com's
+ * "what we do" cycler, ported verbatim (`what-we-do.tsx`; spec
+ * 2026-10-04-cue-site-verbatim §4.2).
+ *
+ * Each frame, every character not yet locked shows a random glyph from the
+ * effect's set; spaces are never scrambled; characters lock left to right. A
+ * phrase holds for 1.8s once it has revealed, so a long phrase and a slow effect
+ * still finish before the next begins: the next starts after
+ * `length × revealEvery × speed + 1800ms`.
+ *
+ * **Reduced motion** shows each phrase whole, one every 2.6s, as the site does.
+ * **Held still** (a gallery thumbnail, under a still `StillProvider`) shows the
+ * first phrase and schedules nothing, which is this library's departure from the
+ * source: a thumbnail costs nothing at rest. The text is written straight into
+ * the DOM node, as the source does, so thirty-five frames a second never
+ * re-render React.
+ *
+ * @example
+ * <TextScramble phrases={["we build software", "we design stages"]} label="We build software and design stages." />
+ */
+declare const TextScramble: React.ForwardRefExoticComponent<TextScrambleProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { TextScramble, TextScrambleProps };

package/dist/brand/text-scramble.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStillHeld } from "../system/still.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/text-scramble.tsx
+/** The matrix effect's glyphs, cueplusplus.com's `MATRIX_GLYPHS`. */
+const MATRIX_GLYPHS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&*<>/=+";
+/** The flap effect's glyphs, cueplusplus.com's `FLAP_GLYPHS`. */
+const FLAP_GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+/** How long a phrase holds once it has fully revealed, before the next begins. */
+const HOLD_MS = 1800;
+/** Under reduced motion, how long each whole phrase is shown. */
+const REDUCED_MS = 2600;
+/**
+* A line that cycles through phrases, scrambling each one in — cueplusplus.com's
+* "what we do" cycler, ported verbatim (`what-we-do.tsx`; spec
+* 2026-10-04-cue-site-verbatim §4.2).
+*
+* Each frame, every character not yet locked shows a random glyph from the
+* effect's set; spaces are never scrambled; characters lock left to right. A
+* phrase holds for 1.8s once it has revealed, so a long phrase and a slow effect
+* still finish before the next begins: the next starts after
+* `length × revealEvery × speed + 1800ms`.
+*
+* **Reduced motion** shows each phrase whole, one every 2.6s, as the site does.
+* **Held still** (a gallery thumbnail, under a still `StillProvider`) shows the
+* first phrase and schedules nothing, which is this library's departure from the
+* source: a thumbnail costs nothing at rest. The text is written straight into
+* the DOM node, as the source does, so thirty-five frames a second never
+* re-render React.
+*
+* @example
+* <TextScramble phrases={["we build software", "we design stages"]} label="We build software and design stages." />
+*/
+const TextScramble = React.forwardRef(function TextScramble({ phrases, label, effect = "matrix", className, ...props }, ref) {
+	const text = React.useRef(null);
+	const held = useStillHeld();
+	const reduced = usePrefersReducedMotion();
+	const key = phrases.join("\0");
+	React.useEffect(() => {
+		const element = text.current;
+		if (element === null || phrases.length === 0) return;
+		if (held) {
+			element.textContent = phrases[0];
+			return;
+		}
+		const glyphs = effect === "flap" ? FLAP_GLYPHS : MATRIX_GLYPHS;
+		const speed = effect === "flap" ? 55 : 28;
+		const revealEvery = effect === "flap" ? 2 : 1;
+		const shape = (s) => effect === "flap" ? s.toUpperCase() : s;
+		let i = 0;
+		let scrambleTimer;
+		let cycleTimer;
+		let current = phrases[0];
+		let started = false;
+		let running = false;
+		let visible = true;
+		const clear = () => {
+			if (scrambleTimer !== void 0) clearInterval(scrambleTimer);
+			if (cycleTimer !== void 0) clearTimeout(cycleTimer);
+			scrambleTimer = void 0;
+			cycleTimer = void 0;
+		};
+		const scramble = (phrase) => {
+			if (scrambleTimer !== void 0) clearInterval(scrambleTimer);
+			if (reduced) {
+				element.textContent = phrase;
+				return;
+			}
+			let frame = 0;
+			const length = phrase.length;
+			scrambleTimer = setInterval(() => {
+				const settled = Math.floor(frame / revealEvery);
+				let out = "";
+				for (let k = 0; k < length; k++) {
+					const ch = phrase[k];
+					if (ch === " " || k < settled) out += ch;
+					else out += glyphs[Math.floor(Math.random() * glyphs.length)];
+				}
+				element.textContent = out;
+				frame++;
+				if (settled >= length) {
+					if (scrambleTimer !== void 0) clearInterval(scrambleTimer);
+					scrambleTimer = void 0;
+					element.textContent = phrase;
+				}
+			}, speed);
+		};
+		const tick = () => {
+			const phrase = shape(phrases[i % phrases.length]);
+			current = phrase;
+			scramble(phrase);
+			i++;
+			const revealMs = reduced ? 0 : phrase.length * revealEvery * speed;
+			cycleTimer = setTimeout(tick, revealMs + (reduced ? REDUCED_MS : HOLD_MS));
+		};
+		const begin = () => {
+			started = true;
+			running = true;
+			if (reduced) {
+				element.textContent = phrases[0];
+				i = 1;
+				cycleTimer = setTimeout(tick, REDUCED_MS);
+			} else tick();
+		};
+		const pause = () => {
+			if (!running) return;
+			running = false;
+			clear();
+			element.textContent = current;
+		};
+		const resume = () => {
+			if (running || !visible || document.hidden) return;
+			if (!started) {
+				begin();
+				return;
+			}
+			running = true;
+			cycleTimer = setTimeout(tick, reduced ? REDUCED_MS : HOLD_MS);
+		};
+		const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(([entry]) => {
+			visible = entry?.isIntersecting ?? true;
+			if (visible) resume();
+			else pause();
+		});
+		observer?.observe(element);
+		const onVisibility = () => document.hidden ? pause() : resume();
+		document.addEventListener("visibilitychange", onVisibility);
+		resume();
+		return () => {
+			clear();
+			observer?.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, [
+		key,
+		effect,
+		held,
+		reduced
+	]);
+	return /* @__PURE__ */ jsxs("p", {
+		ref,
+		"data-slot": "text-scramble",
+		className: cn(className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			ref: text,
+			"data-slot": "text-scramble-text",
+			"aria-hidden": "true",
+			children: phrases[0]
+		})]
+	});
+});
+//#endregion
+export { TextScramble };

package/dist/chat/delegation-card.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/cn.js";
 import { agentColor } from "./agent-color.js";
 import { CheckGlyph } from "./_glyphs.js";
 import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { FIELD_RADIUS } from "../system/_style-field-chassis.js";
 import { Spinner } from "../primitives/spinner.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -53,7 +54,7 @@ const DelegationCard = React.forwardRef(function DelegationCard({ className, age
 		"data-direction": direction,
 		"data-state": open ? "open" : "closed",
 		"data-status": status,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) rounded-control border border-border px-(--cue-space-3) py-(--cue-space-2)", className),
+		className: cn(`flex min-w-0 flex-col gap-(--cue-space-2) ${FIELD_RADIUS} border border-border px-(--cue-space-3) py-(--cue-space-2)`, className),
 		style: {
 			"--agent-color": color,
 			...style

package/dist/chat/message.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
+import { FIELD_RADIUS, FIELD_RADIUS_BL, FIELD_RADIUS_BR } from "../system/_style-field-chassis.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
@@ -12,21 +13,19 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * The tight corner is the tail, and it points at whoever is speaking: bottom
 * right for the right-aligned user turn, bottom left for the agent's. Written
-* as the overlay rung with one corner overridden to the control rung, rather
-* than a `[border-radius: …]` arbitrary value reading `var(--radius-*)`
-* directly — a `--radius-*` reader bypasses the compiled bridge utilities
-* `rounded-control`/`rounded-overlay` resolve to, so it neither shows up in
-* the class-token scan that guards this bridge nor tightens with
-* `--cue-radius-scale` through the same path every other radius in this
-* system does. `rounded-br-control`/`rounded-bl-control` are ordinary
-* per-corner bridge utilities (`packages/tokens/build.mjs`'s `SIDES` table
-* covers every corner, not just the four edges), so the four-value shorthand
-* upstream Tailwind has no plain form for is two ordinary utility classes.
+* as the overlay rung with one corner overridden to the **field's** corner
+* (`FIELD_RADIUS_BR`/`_BL`, 2026-10-04), rather than a `[border-radius: …]`
+* arbitrary value reading `var(--radius-*)` directly — a `--radius-*` reader
+* bypasses the bridge every other radius in this system resolves through, and
+* would not tighten with `--cue-radius-scale`. The field's corner is the
+* control's under every set that names no `style-field-radius`, so the tail is
+* what it always was there; under a set whose controls are pills (Prism,
+* Ledger) it stays a tail instead of swelling into a 9999px curve.
 */
 const ROLE_RADII = {
-	user: "rounded-overlay rounded-br-control",
-	agent: "rounded-overlay rounded-bl-control",
-	system: "rounded-control"
+	user: `rounded-overlay ${FIELD_RADIUS_BR}`,
+	agent: `rounded-overlay ${FIELD_RADIUS_BL}`,
+	system: FIELD_RADIUS
 };
 /**
 * Fill per role.

package/dist/chrome/announcement-bar.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+//#region src/chrome/announcement-bar.d.ts
+/** The bar's one link. */
+interface AnnouncementBarAction {
+  /** The link's text, e.g. "Read the notes". */
+  label: string;
+  /** Where it goes. */
+  href: string;
+}
+interface AnnouncementBarProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The one line. */
+  children: React.ReactNode;
+  /** One link, read as the bar's action. */
+  action?: AnnouncementBarAction;
+}
+/**
+ * One line across the top of a page, and one link: a launch, a change, a date.
+ *
+ * Filled in the accent, centred, and as short as its line. It is not a
+ * notification: it says the same thing to every reader and cannot be dismissed,
+ * so use `Toast` or `Alert` for anything that is about the reader.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <AnnouncementBar action={{ label: "Learn more", href: "/changelog" }}>Plans for teams are here.</AnnouncementBar>
+ */
+declare const AnnouncementBar: React.ForwardRefExoticComponent<AnnouncementBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AnnouncementBar, AnnouncementBarAction, AnnouncementBarProps };

package/dist/chrome/announcement-bar.js

@@ -0,0 +1,38 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/announcement-bar.tsx
+/**
+* One line across the top of a page, and one link: a launch, a change, a date.
+*
+* Filled in the accent, centred, and as short as its line. It is not a
+* notification: it says the same thing to every reader and cannot be dismissed,
+* so use `Toast` or `Alert` for anything that is about the reader.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <AnnouncementBar action={{ label: "Learn more", href: "/changelog" }}>Plans for teams are here.</AnnouncementBar>
+*/
+const AnnouncementBar = React.forwardRef(function AnnouncementBar({ className, children, action, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "announcement-bar",
+		className: cn("flex w-full flex-wrap items-center justify-center gap-x-(--cue-space-3) bg-accent-fill px-(--cue-space-5) py-(--cue-space-2) text-center text-(length:--cue-text-ui) text-accent-fill-fg", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", { children }), action === void 0 ? null : /* @__PURE__ */ jsxs("a", {
+			href: action.href,
+			className: "font-semibold underline underline-offset-4",
+			children: [
+				action.label,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "→"
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { AnnouncementBar };

package/dist/chrome/app-bar.d.ts

@@ -15,7 +15,10 @@ interface AppBarRootProps extends React.ComponentPropsWithoutRef<"header"> {
 }
 type AppBarBrandProps = Omit<LinkProps, "variant" | "external">;
 interface AppBarNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "children"> {
-  /** Where the links sit when they are narrower than the space. Defaults to `"end"`. */
+  /**
+   * Where the links sit when they are narrower than the space. Omitted, the style
+   * set's `style-nav-align` decides, and without one it is `"end"`.
+   */
   align?: "start" | "center" | "end";
   /**
    * What the navigation does when the links do not fit. Defaults to `"scroll"`.

package/dist/chrome/app-bar.js

@@ -89,6 +89,11 @@ const NAV_ALIGN = {
 	end: "justify-end"
 };
 /**
+* The style set's nav alignment (structural Looks, spec 2026-10-02 §3.5), for a nav
+* whose caller named none: `flex-end` unset, which is what `justify-end` draws.
+*/
+const NAV_ALIGN_FROM_SET = "[justify-content:var(--cue-style-nav-align,flex-end)]";
+/**
 * The `<nav>` landmark between the brand and the actions, and the one part of
 * the bar that gives up width.
 *
@@ -102,14 +107,14 @@ const NAV_ALIGN = {
 * scroll to reach it. Aligning the frame and letting the nav grow from its
 * start keeps every link reachable at every width.
 */
-const AppBarNav = React.forwardRef(function AppBarNav({ className, frameClassName, align = "end", overflow = "scroll", previousLabel = "Show earlier links", nextLabel = "Show later links", ...elementProps }, ref) {
+const AppBarNav = React.forwardRef(function AppBarNav({ className, frameClassName, align, overflow = "scroll", previousLabel = "Show earlier links", nextLabel = "Show later links", ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx(EdgeScrollNav, {
 		ref,
 		"data-slot": "app-bar-nav",
 		scrolls: overflow === "scroll",
 		previousLabel,
 		nextLabel,
-		frameClassName: cn("min-w-0 flex-1", NAV_ALIGN[align], frameClassName),
+		frameClassName: cn("min-w-0 flex-1", align === void 0 ? NAV_ALIGN_FROM_SET : NAV_ALIGN[align], frameClassName),
 		className: cn("flex min-w-0 items-center gap-(--cue-space-4)", className),
 		...elementProps
 	});

package/dist/chrome/app-shell.js

@@ -10,6 +10,13 @@ import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/app-shell.tsx
+/**
+* A style set's page ground (structural Looks, spec 2026-10-02 §3.1): a gradient of
+* the theme's own inks, tiled or not. The frame is the one element that covers the
+* whole window, so the ground lands here. Unset, every reader falls back to the
+* value it had — no image, `auto`, `no-repeat` — and the frame paints as it did.
+*/
+const PAGE_GROUND_CLASSES = "[background-image:var(--cue-style-page-ground-image,none)] [background-size:var(--cue-style-page-ground-tile,auto)] [background-repeat:var(--cue-style-page-ground-repeat,no-repeat)]";
 const AppShellContext = React.createContext({
 	navOpen: false,
 	setNavOpen: () => {},
@@ -114,7 +121,7 @@ const AppShell = {
 				ref,
 				"data-slot": "app-shell",
 				"data-rail": rail ? "" : void 0,
-				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", TEXTURE_CLASSES, className),
+				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", TEXTURE_CLASSES, PAGE_GROUND_CLASSES, className),
 				style: {
 					[NAV_WIDTH_PROPERTY]: rail ? railWidth : navWidth,
 					...style

package/dist/chrome/band.d.ts

@@ -76,7 +76,9 @@ interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
  * nothing and they do not vanish symmetrically: `--cue-band-ground` is
  * `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
  * `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
- * under those two alone. Both are deliberate and nothing warns.
+ * under those two and under `ledger` and `prism`, which separate bands by
+ * rhythm alone (and `prism`'s by a ground image, `style-band-ground-image`).
+ * Both are deliberate and nothing warns.
  *
  * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
  * at the element that declares it.** A `<Density>` island nested inside a

package/dist/chrome/band.js

@@ -3,13 +3,12 @@ import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
 import { BAND_BROAD_WIDTH, BAND_Y_HALVES } from "../system/_style-band.js";
-import { GROUND_PATTERN_CLASSES } from "../system/_paint-ground-pattern.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/band.tsx
 const SEPARATION_PAINT = {
 	rule: "border-(--cue-band-rule-color)",
-	ground: `bg-(--cue-band-ground) ${GROUND_PATTERN_CLASSES} ${TEXTURE_CLASSES} before:[mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)] before:[-webkit-mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)]`,
+	ground: `bg-(--cue-band-ground) [background-image:var(--cue-paint-ground-pattern,none),var(--cue-style-band-ground-image,none)] [background-size:var(--cue-paint-ground-pattern-size,auto),auto] ${TEXTURE_CLASSES} before:[mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)] before:[-webkit-mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)]`,
 	bleed: null,
 	none: null
 };
@@ -32,7 +31,9 @@ const SEPARATION_PAINT = {
 * nothing and they do not vanish symmetrically: `--cue-band-ground` is
 * `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
 * `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
-* under those two alone. Both are deliberate and nothing warns.
+* under those two and under `ledger` and `prism`, which separate bands by
+* rhythm alone (and `prism`'s by a ground image, `style-band-ground-image`).
+* Both are deliberate and nothing warns.
 *
 * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
 * at the element that declares it.** A `<Density>` island nested inside a

package/dist/chrome/hero.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+//#region src/chrome/hero.d.ts
+interface HeroProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
+  /** A short line above the title, usually an `Eyebrow`. */
+  eyebrow?: React.ReactNode;
+  /** The title's first line. A hero without a title is a band; use `Band`. */
+  title: React.ReactNode;
+  /**
+   * The title's second line, drawn in the style set's second ink: the accent, a
+   * muted ink or the keyword gradient, by the Look. Omit it for a one-line title.
+   */
+  titleSecond?: React.ReactNode;
+  /**
+   * The title's heading level. `1`, the default, is a page's opening; `2` or `3`
+   * is a hero that opens a section under the page's own `<h1>`, or a preview of
+   * one on a page about something else.
+   */
+  level?: 1 | 2 | 3;
+  /** The sentence under the title. */
+  lede?: React.ReactNode;
+  /** The calls to action, usually a primary and a secondary `Button`. */
+  actions?: React.ReactNode;
+  /** Art beside or behind the words: a `Motif`, an image, a product shot. */
+  media?: React.ReactNode;
+  /** A row of figures under the lede, usually a `StatBand`. */
+  stats?: React.ReactNode;
+  /**
+   * `page` draws the hero on the page's own ground. `inverse` draws it as a dark
+   * card on any page — its whole colour scope flipped, controls and focus included —
+   * which is how a report opens on a light page. Defaults to `"page"`.
+   */
+  surface?: "page" | "inverse";
+}
+/**
+ * The opening of a page: a title, the line under it, what to do next, and art.
+ *
+ * **The Look decides the arrangement, not this component.** The grid reads the
+ * style set's hero recipe — `style-hero-columns`, `style-hero-align` and
+ * `style-hero-media-order` — so the same hero opens centred under one Look, with
+ * its art beside the words under another, and with the art first under a third,
+ * with no prop changed. Unset, it is one column, start-aligned, art after the
+ * words.
+ *
+ * **No media, one column**, whatever the recipe says: two columns with nothing in
+ * the second is half a page of nothing.
+ *
+ * `surface="inverse"` is a theme island in dark mode, so every ink inside it —
+ * the title, the lede, a button's fill and its focus ring — is the dark palette's,
+ * and an overlay opened from it inherits that. The island carries
+ * `data-cue-rescope`, where the token build re-declares the active set's and
+ * pack's inks, so the card is right in the first frame, before hydration.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Hero eyebrow={<Eyebrow>Category report</Eyebrow>} title="Snacks & nuts" titleSecond="Range review"
+ *   lede="Every recommendation has a boundary." actions={<Button>Open the report</Button>} />
+ */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Hero, HeroProps };

package/dist/chrome/hero.js

@@ -0,0 +1,108 @@
+import { cn } from "../lib/cn.js";
+import { ThemeProvider } from "../system/theme-provider.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { LEDE_INK, LEDE_LEADING, LEDE_SIZE, LEDE_TRACKING } from "../system/_style-lede.js";
+import { HERO_TITLE_VOICE } from "../system/_style-hero-title.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/hero.tsx
+/**
+* The second title line's ink (spec 2026-10-02 §3.1, §15.2). A colour by default;
+* under a set whose line takes the keyword gradient, the build restates the
+* colour as the accent and derives a fill, a clip and a text fill, so the
+* gradient paints the glyphs through `background-clip: text`. Each derived
+* name's fallback is the property's own initial value, so a line no set
+* touches computes exactly what it did. All of it sits behind
+* `@supports (background-clip: text)`, so a browser that cannot clip keeps the
+* solid accent; forced colours drop the image and the transparent fill, as
+* `Keyword` does.
+*/
+const TITLE_SECOND = "block text-[color:var(--cue-style-hero-title-ink-2,var(--cue-fg))] supports-[background-clip:text]:[background-image:var(--cue-style-hero-title-fill-2,none)] supports-[background-clip:text]:[background-clip:var(--cue-style-hero-title-clip-2,border-box)] supports-[background-clip:text]:[-webkit-background-clip:var(--cue-style-hero-title-clip-2,border-box)] supports-[background-clip:text]:[-webkit-text-fill-color:var(--cue-style-hero-title-text-2,currentcolor)] forced-colors:[background-image:none] forced-colors:[-webkit-text-fill-color:CanvasText]";
+/**
+* The opening of a page: a title, the line under it, what to do next, and art.
+*
+* **The Look decides the arrangement, not this component.** The grid reads the
+* style set's hero recipe — `style-hero-columns`, `style-hero-align` and
+* `style-hero-media-order` — so the same hero opens centred under one Look, with
+* its art beside the words under another, and with the art first under a third,
+* with no prop changed. Unset, it is one column, start-aligned, art after the
+* words.
+*
+* **No media, one column**, whatever the recipe says: two columns with nothing in
+* the second is half a page of nothing.
+*
+* `surface="inverse"` is a theme island in dark mode, so every ink inside it —
+* the title, the lede, a button's fill and its focus ring — is the dark palette's,
+* and an overlay opened from it inherits that. The island carries
+* `data-cue-rescope`, where the token build re-declares the active set's and
+* pack's inks, so the card is right in the first frame, before hydration.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Hero eyebrow={<Eyebrow>Category report</Eyebrow>} title="Snacks & nuts" titleSecond="Range review"
+*   lede="Every recommendation has a boundary." actions={<Button>Open the report</Button>} />
+*/
+const Hero = React.forwardRef(function Hero({ className, eyebrow, title, titleSecond, level = 1, lede, actions, media, stats, surface = "page", ...elementProps }, ref) {
+	const words = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "hero-words",
+		className: "flex min-w-0 flex-col gap-(--cue-space-5) [align-items:var(--cue-style-hero-align,start)] [text-align:var(--cue-style-hero-align,start)]",
+		children: [
+			eyebrow,
+			/* @__PURE__ */ jsxs(level === 3 ? "h3" : level === 2 ? "h2" : "h1", {
+				"data-slot": "hero-title",
+				className: cn(HERO_TITLE_VOICE, "m-0"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block",
+					children: title
+				}), titleSecond === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "hero-title-second",
+					className: TITLE_SECOND,
+					children: titleSecond
+				})]
+			}),
+			lede === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "hero-lede",
+				className: cn(BODY_VOICE, LEDE_SIZE, LEDE_LEADING, LEDE_TRACKING, LEDE_INK, "m-0 max-w-[48ch]"),
+				children: lede
+			}),
+			actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "hero-actions",
+				className: "flex flex-wrap items-center gap-(--cue-space-3) [justify-content:var(--cue-style-hero-align,start)]",
+				children: actions
+			}),
+			stats === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "hero-stats",
+				className: "w-full",
+				children: stats
+			})
+		]
+	});
+	const body = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "hero-grid",
+		"data-media": media === void 0 ? void 0 : "",
+		className: cn("grid w-full items-center gap-(--cue-space-7)", media === void 0 ? "grid-cols-1" : "grid-cols-1 md:[grid-template-columns:var(--cue-style-hero-columns,1fr)]"),
+		children: [words, media === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "hero-media",
+			className: "min-w-0 [order:var(--cue-style-hero-media-order,1)]",
+			children: media
+		})]
+	});
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "hero",
+		"data-surface": surface,
+		className: cn("w-full", className),
+		...elementProps,
+		children: surface === "inverse" ? /* @__PURE__ */ jsx(ThemeProvider, {
+			mode: "dark",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-cue-rescope": "",
+				className: "rounded-surface bg-bg p-(--cue-space-7) text-fg",
+				children: body
+			})
+		}) : body
+	});
+});
+//#endregion
+export { Hero };

package/dist/chrome/index.d.ts

@@ -21,4 +21,9 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 import { TitleBar, TitleBarProps } from "./title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./toolbar.js";
-export { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+import { AnnouncementBar, AnnouncementBarAction, AnnouncementBarProps } from "./announcement-bar.js";
+import { Hero, HeroProps } from "./hero.js";
+import { Keyword, KeywordProps } from "./keyword.js";
+import { LogoStrip, LogoStripProps } from "./logo-strip.js";
+import { StatBand, StatBandProps, StatBandStat } from "./stat-band.js";
+export { AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Hero, type HeroProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Keyword, type KeywordProps, LogoStrip, type LogoStripProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatBand, type StatBandProps, type StatBandStat, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/index.js

@@ -19,4 +19,9 @@ import { ScrollableTabsList, Tabs } from "./tabs.js";
 import { TitleBar } from "./title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./tree.js";
 import { Toolbar } from "./toolbar.js";
-export { AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Inspector, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+import { AnnouncementBar } from "./announcement-bar.js";
+import { Hero } from "./hero.js";
+import { Keyword } from "./keyword.js";
+import { LogoStrip } from "./logo-strip.js";
+import { StatBand } from "./stat-band.js";
+export { AnnouncementBar, AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Hero, Inspector, Keyword, LogoStrip, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatBand, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };