@cueplusplus/ui 0.19.0 → 0.20.1

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/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/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

@@ -75,8 +75,10 @@ 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";
@@ -103,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";
@@ -146,6 +149,7 @@ 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, 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, 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, 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, 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, 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, useStill, 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

@@ -7,6 +7,8 @@ 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";
@@ -103,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";
@@ -131,6 +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, 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, ParticleMark, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, 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, 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, useStill, 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",

package/dist/instruments/table.js

@@ -247,7 +247,7 @@ const Table = {
 		return /* @__PURE__ */ jsx("caption", {
 			ref,
 			"data-slot": "table-caption",
-			className: cn(`caption-bottom pt-(--cue-space-3) text-left ${BODY_SIZE_LABEL} ${HELP_INK}`, LABEL_FACE, className),
+			className: cn(`caption-bottom pt-(--cue-space-3) ${CELL_PAD} text-left ${BODY_SIZE_LABEL} ${HELP_INK}`, LABEL_FACE, className),
 			...elementProps
 		});
 	})

package/dist/layout/index.d.ts

@@ -5,6 +5,7 @@ import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProp
 import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./stack.js";
 import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
+import { Reveal, RevealProps } from "./reveal.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
@@ -16,4 +17,4 @@ import { Pagination, PaginationEntry, PaginationProps, paginationRange } from ".
 import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.js";
 import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
 import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
-export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Reveal, type RevealProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -5,6 +5,7 @@ import { Accordion } from "./accordion.js";
 import { Stack } from "./stack.js";
 import { Bento } from "./bento.js";
 import { Breadcrumb } from "./breadcrumb.js";
+import { Reveal } from "./reveal.js";
 import { Card } from "./card.js";
 import { Collapsible, Disclosure } from "./collapsible.js";
 import { DescriptionList } from "./description-list.js";
@@ -15,4 +16,4 @@ import { Pagination, paginationRange } from "./pagination.js";
 import { Preview } from "./preview.js";
 import { Stepper } from "./stepper.js";
 import { Timeline } from "./timeline.js";
-export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, Preview, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, Preview, Reveal, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/reveal.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+//#region src/layout/reveal.d.ts
+interface RevealProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** How far below its resting place the content starts, in px. Defaults to `28`, the site's services blocks. */
+  distance?: number;
+  /**
+   * How far inside the viewport the entry line sits, as an `IntersectionObserver`
+   * root margin. Defaults to `"-12% 0px"`, the site's services blocks; its
+   * beliefs use `"-15% 0px"`.
+   */
+  rootMargin?: string;
+  /** How long the entrance takes, in ms. Defaults to `500`. */
+  duration?: number;
+  /**
+   * The delay between items, in ms. `0` (the default) moves the whole block as
+   * one. Anything else leaves the block still and moves only the descendants
+   * marked `data-reveal-item`, this many ms apart, in document order — the
+   * site's beliefs stagger their two columns 80ms apart, and nothing inside
+   * them.
+   */
+  stagger?: number;
+  /** What rises into place: the block itself, or the items in it marked `data-reveal-item`. */
+  children?: React.ReactNode;
+}
+/**
+ * Content that rises into place the first time it scrolls into view —
+ * cueplusplus.com's section entrance, ported (spec 2026-10-04-cue-site-verbatim
+ * §4.3): framer-motion's `whileInView` with `viewport: { once: true }`, from
+ * `opacity: 0` and `distance` px down, over `duration` ms `easeOut`.
+ *
+ * No motion library: an `IntersectionObserver` and two inline styles. It
+ * watches once and lets go. Held still, or for a reader who prefers reduced
+ * motion, the content is simply there and nothing is observed — as the site's
+ * `initial={reduce ? false : …}` does.
+ *
+ * @example
+ * <Reveal distance={22} rootMargin="-15% 0px" stagger={80}>
+ *   <div data-reveal-item>Stance</div>
+ *   <div data-reveal-item>Reason</div>
+ * </Reveal>
+ */
+declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Reveal, RevealProps };