@cueplusplus/ui 0.18.2 → 0.20.0

package/dist/chrome/keyword.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/chrome/keyword.d.ts
+interface KeywordProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** The words to mark: one word or a short phrase in a title. */
+  children: React.ReactNode;
+}
+/**
+ * A word in a title filled with the Look's keyword gradient.
+ *
+ * Reads `style-keyword-fill`, a gradient of the theme's own inks, through
+ * `background-clip: text`. Where the browser cannot clip a background to text, or
+ * in forced colours, it is the accent instead, so the word is never transparent.
+ * Unset, the fill is the accent itself.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <h1>The world's first <Keyword>predictive</Keyword> retail system.</h1>
+ */
+declare const Keyword: React.ForwardRefExoticComponent<KeywordProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Keyword, KeywordProps };

package/dist/chrome/keyword.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/keyword.tsx
+/**
+* A word in a title filled with the Look's keyword gradient.
+*
+* Reads `style-keyword-fill`, a gradient of the theme's own inks, through
+* `background-clip: text`. Where the browser cannot clip a background to text, or
+* in forced colours, it is the accent instead, so the word is never transparent.
+* Unset, the fill is the accent itself.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <h1>The world's first <Keyword>predictive</Keyword> retail system.</h1>
+*/
+const Keyword = React.forwardRef(function Keyword({ className, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "keyword",
+		className: cn("text-accent", "supports-[background-clip:text]:bg-[image:var(--cue-style-keyword-fill,linear-gradient(var(--cue-accent),var(--cue-accent)))] supports-[background-clip:text]:bg-clip-text supports-[background-clip:text]:text-transparent", "forced-colors:bg-none forced-colors:text-[CanvasText]", className),
+		...elementProps,
+		children
+	});
+});
+//#endregion
+export { Keyword };

package/dist/chrome/logo-strip.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/chrome/logo-strip.d.ts
+interface LogoStripProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The names, as text. A real company's logo is never drawn here. */
+  names: readonly string[];
+  /** The line above the row, e.g. "Trusted by teams at". */
+  caption?: React.ReactNode;
+}
+/**
+ * A row of names under a caption: the "trusted by" strip of a product page.
+ *
+ * Text wordmarks only, set in the display face at a muted ink, never an image: a
+ * real company's mark is a trademark that is not this library's to draw, and a
+ * gallery page's names are fictional. The row wraps, and centres when it does.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <LogoStrip caption="Trusted by teams at" names={["Northwind", "Halcyon", "Kestrel"]} />
+ */
+declare const LogoStrip: React.ForwardRefExoticComponent<LogoStripProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { LogoStrip, LogoStripProps };

package/dist/chrome/logo-strip.js

@@ -0,0 +1,43 @@
+import { cn } from "../lib/cn.js";
+import { LABEL_INK, LABEL_INK_SUBTLE } from "../system/_style-label-ink.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";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/logo-strip.tsx
+/**
+* A row of names under a caption: the "trusted by" strip of a product page.
+*
+* Text wordmarks only, set in the display face at a muted ink, never an image: a
+* real company's mark is a trademark that is not this library's to draw, and a
+* gallery page's names are fictional. The row wraps, and centres when it does.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <LogoStrip caption="Trusted by teams at" names={["Northwind", "Halcyon", "Kestrel"]} />
+*/
+const LogoStrip = React.forwardRef(function LogoStrip({ className, names, caption, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "logo-strip",
+		className: cn("flex flex-col items-center gap-(--cue-space-4)", className),
+		...elementProps,
+		children: [caption === void 0 ? null : /* @__PURE__ */ jsx("p", {
+			"data-slot": "logo-strip-caption",
+			className: cn(LABEL_FACE, LABEL_SIZE, LABEL_CASE, LABEL_TRACKING, LABEL_INK_SUBTLE, "m-0"),
+			children: caption
+		}), /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			className: "m-0 flex list-none flex-wrap items-center justify-center gap-x-(--cue-space-7) gap-y-(--cue-space-4) p-0",
+			children: names.map((name) => /* @__PURE__ */ jsx("li", {
+				className: cn("font-sans text-(length:--cue-text-title) font-semibold", LABEL_INK),
+				children: name
+			}, name))
+		})]
+	});
+});
+//#endregion
+export { LogoStrip };

package/dist/chrome/page-shell.js

@@ -26,6 +26,18 @@ const WIDTHS = {
 	full: ""
 };
 /**
+* A style set's frame and grid lines (structural Looks, spec 2026-10-02 §3.1): a
+* dashed hairline round the content column, and two hairlines at its edges. Each is
+* a pseudo-element whose `content` is a token the build derives — `none` unless the
+* set asks, which generates no box at all — and the shell is their containing block
+* only while one is drawn, so a set without lines lays out and paints as before.
+*/
+const FRAME_LINES_CLASSES = [
+	"[position:var(--cue-style-page-frame-position,static)]",
+	"before:content-[var(--cue-style-frame-lines-content,none)] before:pointer-events-none before:absolute before:inset-0 before:border before:border-dashed before:border-(--cue-border)",
+	"after:content-[var(--cue-style-grid-lines-content,none)] after:pointer-events-none after:absolute after:inset-y-0 after:inset-x-(--cue-space-6) after:border-x after:border-(--cue-border)"
+].join(" ");
+/**
 * A centred content column with a standard page header.
 *
 * The header is emitted only when something fills it, so a shell used purely
@@ -47,7 +59,7 @@ const PageShell = React.forwardRef(function PageShell({ className, width = "narr
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "page-shell",
-		className: cn("mx-auto flex w-full flex-col gap-(--cue-space-6) px-(--cue-space-6) py-(--cue-space-7)", WIDTHS[width], className),
+		className: cn("mx-auto flex w-full flex-col gap-(--cue-space-6) px-(--cue-space-6) py-(--cue-space-7)", FRAME_LINES_CLASSES, WIDTHS[width], className),
 		...elementProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("header", {
 			"data-slot": "page-shell-header",

package/dist/chrome/stat-band.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/chrome/stat-band.d.ts
+interface StatBandStat {
+  /** What is measured. */
+  label: React.ReactNode;
+  /** The reading. */
+  value: React.ReactNode;
+  /** An optional second line: a delta, a window, a unit. */
+  note?: React.ReactNode;
+}
+interface StatBandProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The figures, in reading order. One to six sit in one row; more wrap. */
+  stats: readonly StatBandStat[];
+}
+/**
+ * A row of named figures: the KPI band under a report's title.
+ *
+ * Built from `Stat`, so each figure keeps its caption-over-reading voice and its
+ * tabular numerals. The style set decides the band's look: `style-stat-divider`
+ * draws a rule between figures, and `Stat` reads `style-stat-numeral-ink` for the
+ * reading's colour. Unset, there is no rule and the reading keeps its ink. A
+ * wrapped row's first figure draws no rule, so a narrow screen never shows a
+ * divider hanging off the left edge.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <StatBand stats={[{ label: "SKUs", value: "1,091" }, { label: "Brands", value: "148" }]} />
+ */
+declare const StatBand: React.ForwardRefExoticComponent<StatBandProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { StatBand, StatBandProps, StatBandStat };

package/dist/chrome/stat-band.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/cn.js";
+import { Stat } from "../instruments/stat.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/stat-band.tsx
+/**
+* A row of named figures: the KPI band under a report's title.
+*
+* Built from `Stat`, so each figure keeps its caption-over-reading voice and its
+* tabular numerals. The style set decides the band's look: `style-stat-divider`
+* draws a rule between figures, and `Stat` reads `style-stat-numeral-ink` for the
+* reading's colour. Unset, there is no rule and the reading keeps its ink. A
+* wrapped row's first figure draws no rule, so a narrow screen never shows a
+* divider hanging off the left edge.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <StatBand stats={[{ label: "SKUs", value: "1,091" }, { label: "Brands", value: "148" }]} />
+*/
+const StatBand = React.forwardRef(function StatBand({ className, stats, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "stat-band",
+		className: cn("overflow-hidden", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "-ms-(--cue-space-5) flex flex-wrap gap-y-(--cue-space-5)",
+			children: stats.map((stat, index) => /* @__PURE__ */ jsx(Stat, {
+				label: stat.label,
+				value: stat.value,
+				detail: stat.note,
+				className: "relative min-w-[10rem] flex-1 ps-(--cue-space-5) before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:[border-inline-start:var(--cue-style-stat-divider,none)] before:content-['']"
+			}, index))
+		})
+	});
+});
+//#endregion
+export { StatBand };

package/dist/color/color-area.js

@@ -1,4 +1,5 @@
 "use client";
+import { FIELD_RADIUS } from "../system/_style-field-chassis.js";
 import { ariaClassName } from "../lib/aria-class.js";
 import { colorThumbClasses } from "./_thumb.js";
 import { toAriaColor } from "./_value.js";
@@ -26,7 +27,7 @@ import { ColorArea, ColorThumb } from "react-aria-components";
 function ColorArea$1({ className, thumbClassName, value, defaultValue, ...areaProps }) {
 	return /* @__PURE__ */ jsx(ColorArea, {
 		"data-slot": "color-area",
-		className: ariaClassName("relative h-[9rem] w-full touch-none rounded-control border border-border outline-none data-[disabled]:opacity-40", className),
+		className: ariaClassName(`relative h-[9rem] w-full touch-none ${FIELD_RADIUS} border border-border outline-none data-[disabled]:opacity-40`, className),
 		value: toAriaColor(value),
 		defaultValue: toAriaColor(defaultValue),
 		...areaProps,

package/dist/dmx/channel-matrix.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
-import { usePrefersReducedMotion } from "../instruments/_motion.js";
 import { DMX_RAMP_NAMES, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk } from "./_ramp.js";
 import { DmxReadout } from "./_readout.js";
 import * as React from "react";
@@ -77,8 +78,9 @@ const ChannelMatrix = React.forwardRef(function ChannelMatrix({ className, data,
 	universesRef.current = universes;
 	const [hover, setHover] = React.useState(null);
 	const portal = useCuePortalProps();
-	const reduced = usePrefersReducedMotion();
-	const streaming = live && !reduced;
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const streaming = live && !(prefersReduced || held);
 	const paint = React.useCallback(() => {
 		const bytes = dataRef.current;
 		const palette = paletteRef.current;

package/dist/dmx/dmx-strip.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mulberry32, usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { toRem } from "../instruments/_rem.js";
-import { mulberry32, usePrefersReducedMotion } from "../instruments/_motion.js";
 import { dmxPalette, dmxPaletteColor } from "./_ramp.js";
 import { DmxReadout } from "./_readout.js";
 import * as React from "react";
@@ -54,8 +55,9 @@ const DmxStrip = React.forwardRef(function DmxStrip({ className, cells = DEFAULT
 	const valueElementRef = React.useRef(null);
 	const [hover, setHover] = React.useState(null);
 	const portal = useCuePortalProps();
-	const reduced = usePrefersReducedMotion();
-	const animating = simulate && !reduced;
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const animating = simulate && !(prefersReduced || held);
 	useIsomorphicLayoutEffect(() => {
 		const context = canvasRef.current?.getContext("2d");
 		if (!context) return;

package/dist/elements/animated-number.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/elements/animated-number.tsx
@@ -71,7 +72,9 @@ const GROUPED = (value) => value.toLocaleString("en-US");
 */
 const AnimatedNumber = React.forwardRef(function AnimatedNumber({ value, duration = 400, format = GROUPED, className, ...elementProps }, ref) {
 	const target = Number.isFinite(value) ? value : 0;
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const [shown, setShown] = React.useState(target);
 	const painted = React.useRef(target);
 	React.useEffect(() => {

package/dist/elements/replay.d.ts

@@ -84,7 +84,7 @@ interface ReplayTransport {
   state: ReplayState;
   /** Whether the clock is running. Always `false` under reduced motion. */
   playing: boolean;
-  /** Whether the reader asked for reduced motion, in which case nothing is ever scheduled. */
+  /** Whether the reader asked for reduced motion, or the subtree is held still (`StillProvider`): either way nothing is ever scheduled. */
   reduced: boolean;
   /** The current rate multiplier. */
   rate: number;

package/dist/elements/replay.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { Chip } from "../primitives/chip.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { Slider } from "../forms/slider.js";
-import { usePrefersReducedMotion } from "../instruments/_motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/elements/replay.tsx
@@ -119,7 +120,9 @@ function useReplay(script, options = {}) {
 	const last = count - 1;
 	const starts = React.useMemo(() => startsOf(frames), [frames]);
 	const duration = starts[Math.max(0, last)] ?? 0;
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const seat = clamp(startAt ?? 0, last);
 	const playable = count > 1 && duration > 0;
 	const [index, setIndex] = React.useState(() => seat);

package/dist/elements/scroll-anchor.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { field, paper } from "./surfaces.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +23,9 @@ const APPEND_MS = 1300;
 * />
 */
 function ScrollAnchor({ messages, paused = false, onSettled, className, ...props }) {
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const viewportRef = useRef(null);
 	const [count, setCount] = useState(INITIAL_COUNT);
 	const [pinned, setPinned] = useState(true);

package/dist/forms/_chassis.d.ts

@@ -110,7 +110,7 @@ import { FormControlSize } from "./_chassis-size.js";
  * own `shadow-` utility replaces it through `twMerge`, as it would have
  * replaced nothing before.
  */
-declare const controlSurface = "w-full rounded-control border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none hover:border-[color:var(--cue-style-field-hover-edge,transparent)] focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] disabled:opacity-[var(--cue-style-disabled-opacity,0.4)] data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)] disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+declare const controlSurface = "w-full rounded-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))] border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none hover:border-[color:var(--cue-style-field-hover-edge,transparent)] focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] disabled:opacity-[var(--cue-style-disabled-opacity,0.4)] data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)] disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *

package/dist/forms/_chassis.js

@@ -5,7 +5,7 @@ import { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD } from "../system/_focus-ring-
 import { CONTROL_STEP_SIZE_BODY, CONTROL_STEP_SIZE_SM } from "../system/_style-control-step.js";
 import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 import { BODY_WEIGHT } from "../system/_style-body-weight.js";
-import { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE } from "../system/_style-field-chassis.js";
+import { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, FIELD_RADIUS, INVALID_EDGE } from "../system/_style-field-chassis.js";
 import { INPUT_FACE } from "../system/_style-input-face.js";
 //#region src/forms/_chassis.ts
 /**
@@ -117,7 +117,7 @@ import { INPUT_FACE } from "../system/_style-input-face.js";
 * own `shadow-` utility replaces it through `twMerge`, as it would have
 * replaced nothing before.
 */
-const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none ${FIELD_HOVER_EDGE} focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} ${DISABLED_OPACITY} ${DATA_DISABLED_OPACITY} ${FIELD_DISABLED_FILL} ${INVALID_EDGE} data-[invalid]:focus-visible:outline-danger`;
+const controlSurface = `w-full ${FIELD_RADIUS} ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none ${FIELD_HOVER_EDGE} focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} ${DISABLED_OPACITY} ${DATA_DISABLED_OPACITY} ${FIELD_DISABLED_FILL} ${INVALID_EDGE} data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *

package/dist/forms/env-var-input.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
+import { FIELD_RADIUS } from "../system/_style-field-chassis.js";
 import { Input } from "./input.js";
 import { CrossGlyph, VariableGlyph } from "./_glyphs.js";
 import { PasswordInput } from "./password-input.js";
@@ -90,7 +91,7 @@ const EnvVarInput = React.forwardRef(function EnvVarInput({ className, value: va
 		...elementProps,
 		children: variable === null ? secret ? /* @__PURE__ */ jsx(PasswordInput, { ...controlProps }) : /* @__PURE__ */ jsx(Input, { ...controlProps }) : /* @__PURE__ */ jsxs("div", {
 			"data-slot": "env-var-pill",
-			className: cn("flex w-full items-center gap-(--cue-space-2) rounded-control border border-warn/35 bg-warn/10 font-mono text-warn", PILL_SIZES[size], disabled === true && "opacity-40"),
+			className: cn(`flex w-full items-center gap-(--cue-space-2) ${FIELD_RADIUS} border border-warn/35 bg-warn/10 font-mono text-warn`, PILL_SIZES[size], disabled === true && "opacity-40"),
 			children: [
 				/* @__PURE__ */ jsx(VariableGlyph, {
 					"aria-hidden": "true",

package/dist/forms/file-upload.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
+import { FIELD_RADIUS } from "../system/_style-field-chassis.js";
 import { CrossGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -144,7 +145,7 @@ const FileUpload = React.forwardRef(function FileUpload({ className, zoneClassNa
 					setDragging(false);
 					intake(event.dataTransfer?.files ?? null);
 				},
-				className: cn(`flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) rounded-control border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-150 hover:border-border-strong hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none`, zoneClassName),
+				className: cn(`flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) ${FIELD_RADIUS} border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-150 hover:border-border-strong hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none`, zoneClassName),
 				children: [/* @__PURE__ */ jsx("span", { children: label }), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					className: "text-(length:--cue-text-label) text-fg-subtle",
 					children: hint

package/dist/index.d.ts

@@ -33,6 +33,11 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
+import { AnnouncementBar, AnnouncementBarAction, AnnouncementBarProps } from "./chrome/announcement-bar.js";
+import { Hero, HeroProps } from "./chrome/hero.js";
+import { Keyword, KeywordProps } from "./chrome/keyword.js";
+import { LogoStrip, LogoStripProps } from "./chrome/logo-strip.js";
+import { StatBand, StatBandProps, StatBandStat } from "./chrome/stat-band.js";
 import "./chrome/index.js";
 import { FormControlSize } from "./forms/_chassis-size.js";
 import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
@@ -67,6 +72,13 @@ import { BrandAssetProps, BrandSize, BrandTone } from "./brand/_chassis.js";
 import { CueLogotype, CueLogotypeProps } from "./brand/cue-logotype.js";
 import { CueMark, CueMarkProps } from "./brand/cue-mark.js";
 import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
+import { GlossObject, GlossObjectProps } from "./brand/gloss-object.js";
+import { Halftone, HalftoneProps } from "./brand/halftone.js";
+import { Motif, MotifProps, MotifVariant } from "./brand/motif.js";
+import { ParticleLogo, ParticleLogoProps } from "./brand/particle-logo.js";
+import { ParticleMark, ParticleMarkProps } from "./brand/particle-mark.js";
+import { Ribbon, RibbonProps } from "./brand/ribbon.js";
+import { TextScramble, TextScrambleProps } from "./brand/text-scramble.js";
 import "./brand/index.js";
 import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
 import "./icons/index.js";
@@ -93,6 +105,7 @@ import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProp
 import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
 import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./layout/bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./layout/breadcrumb.js";
+import { Reveal, RevealProps } from "./layout/reveal.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./layout/card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
@@ -135,5 +148,8 @@ import { ThemeRegistry } from "./system/vocabulary.js";
 import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
+import { StillProvider, StillProviderProps, useStill } from "./system/still.js";
+import { FrameClockOptions, useFrameClock } from "./system/frame-clock.js";
+import { FontScope, FontScopeProps } from "./system/font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, PAINTS, Paint, STYLE_SETS, StyleSet, ThemeManifest, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, 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, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, type Paint, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, 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, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, FontScope, type FontScopeProps, Footer, type FooterProps, type FormControlSize, type FrameClockOptions, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, GlossObject, type GlossObjectProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Halftone, type HalftoneProps, Hero, type HeroProps, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Keyword, type KeywordProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, LogoStrip, type LogoStripProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, Motif, type MotifProps, type MotifVariant, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, type Paint, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, ParticleLogo, type ParticleLogoProps, ParticleMark, type ParticleMarkProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Reveal, type RevealProps, Ribbon, type RibbonProps, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, StatBand, type StatBandProps, type StatBandStat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, StillProvider, type StillProviderProps, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TextScramble, type TextScrambleProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };

package/dist/index.js

@@ -1,6 +1,14 @@
 import { CueLogotype } from "./brand/cue-logotype.js";
 import { CueMark } from "./brand/cue-mark.js";
 import { Plussie } from "./brand/plussie.js";
+import { GlossObject } from "./brand/gloss-object.js";
+import { Halftone } from "./brand/halftone.js";
+import { StillProvider, useStill } from "./system/still.js";
+import { ParticleMark } from "./brand/particle-mark.js";
+import { Ribbon } from "./brand/ribbon.js";
+import { Motif } from "./brand/motif.js";
+import { ParticleLogo } from "./brand/particle-logo.js";
+import { TextScramble } from "./brand/text-scramble.js";
 import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, agentColor, agentColorStyle } from "./chat/agent-color.js";
 import { AgentPile } from "./chat/agent-pile.js";
 import { Checkbox, CheckboxGroup } from "./forms/checkbox.js";
@@ -51,6 +59,12 @@ import { ScrollableTabsList, Tabs } from "./chrome/tabs.js";
 import { TitleBar } from "./chrome/title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./chrome/tree.js";
 import { Toolbar } from "./chrome/toolbar.js";
+import { AnnouncementBar } from "./chrome/announcement-bar.js";
+import { Hero } from "./chrome/hero.js";
+import { Keyword } from "./chrome/keyword.js";
+import { LogoStrip } from "./chrome/logo-strip.js";
+import { Stat } from "./instruments/stat.js";
+import { StatBand } from "./chrome/stat-band.js";
 import { Autocomplete } from "./forms/autocomplete.js";
 import { ButtonGroup } from "./forms/button-group.js";
 import { Combobox } from "./forms/combobox.js";
@@ -83,7 +97,6 @@ import { Meter } from "./instruments/meter.js";
 import { Progress } from "./instruments/progress.js";
 import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
 import { Sparkline } from "./instruments/sparkline.js";
-import { Stat } from "./instruments/stat.js";
 import { Table, TableScrollRegion } from "./instruments/table.js";
 import { TerminalFrame } from "./instruments/terminal-frame.js";
 import { TwoStepButton } from "./instruments/two-step-button.js";
@@ -92,6 +105,7 @@ import { Accordion } from "./layout/accordion.js";
 import { Stack } from "./layout/stack.js";
 import { Bento } from "./layout/bento.js";
 import { Breadcrumb } from "./layout/breadcrumb.js";
+import { Reveal } from "./layout/reveal.js";
 import { Card } from "./layout/card.js";
 import { Collapsible, Disclosure } from "./layout/collapsible.js";
 import { DescriptionList } from "./layout/description-list.js";
@@ -120,5 +134,7 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
+import { useFrameClock } from "./system/frame-clock.js";
+import { FontScope } from "./system/font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, STYLE_SETS } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Frames, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AnnouncementBar, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, FontScope, Footer, Frames, GlossObject, Grid, GroupBar, Halftone, Hero, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Keyword, Ledger, Link, LogoStrip, McpServerIcon, Menubar, Message, MessageList, Meter, Motif, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, ParticleLogo, ParticleMark, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Reveal, Ribbon, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatBand, StatusBar, StatusDot, Stepper, StillProvider, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, TextScramble, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };

package/dist/instruments/data-table.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/cn.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { SearchInput } from "../forms/search-input.js";
 import { ChevronLeftGlyph, ChevronRightGlyph, ChevronsLeftGlyph, ChevronsRightGlyph } from "./_glyphs.js";
+import { CELL_PAD } from "../system/_style-cell.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { columnFilteringFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_inNumberRange, filterFn_includesString, flexRender, globalFilteringFeature, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
@@ -106,7 +107,7 @@ const DataTableToolbar = React.forwardRef(function DataTableToolbar({ className,
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "data-table-toolbar",
-		className: cn("flex min-w-0 items-center gap-(--cue-space-3) py-(--cue-space-3)", className),
+		className: cn(`flex min-w-0 items-center gap-(--cue-space-3) py-(--cue-space-3) ${CELL_PAD}`, className),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsx(SearchInput, {
@@ -158,7 +159,7 @@ const DataTablePagination = React.forwardRef(function DataTablePagination({ clas
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "data-table-pagination",
-		className: cn("flex min-w-0 items-center gap-(--cue-space-3) py-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+		className: cn(`flex min-w-0 items-center gap-(--cue-space-3) py-(--cue-space-3) ${CELL_PAD} font-mono text-(length:--cue-text-label) text-fg-subtle`, className),
 		...elementProps,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "data-table-rows",