@cueplusplus/ui 0.18.2 → 0.20.0

package/dist/instruments/index.js

@@ -1,3 +1,4 @@
+import { Stat } from "./stat.js";
 import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame } from "./app-window-frame.js";
 import { CopyButton } from "./copy-button.js";
@@ -10,7 +11,6 @@ import { Meter } from "./meter.js";
 import { Progress } from "./progress.js";
 import { SeamCell, SeamGrid } from "./seam-grid.js";
 import { Sparkline } from "./sparkline.js";
-import { Stat } from "./stat.js";
 import { Table, TableScrollRegion } from "./table.js";
 import { TerminalFrame } from "./terminal-frame.js";
 import { TwoStepButton } from "./two-step-button.js";

package/dist/instruments/stat.js

@@ -12,7 +12,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/stat.tsx
 const VALUE_TONE_CLASSES = {
-	neutral: "text-fg",
+	neutral: "text-[color:var(--cue-style-stat-numeral-ink,var(--cue-fg))]",
 	accent: "text-accent",
 	ok: "text-ok",
 	busy: "text-busy",

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/instruments/terminal-frame.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
+import { useStill } from "../system/still.js";
 import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
 import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { CopyButton } from "./copy-button.js";
 import { toRem } from "./_rem.js";
-import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/terminal-frame.tsx
@@ -76,7 +77,9 @@ function finalLines(script) {
 * <TerminalFrame simulate={SCRIPT} />
 */
 const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title, lines, prompt = "$", copy = false, copyValue, simulate, height, children, ...elementProps }, ref) {
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const [transcript, setTranscript] = React.useState(IDLE);
 	React.useEffect(() => {
 		if (simulate === void 0) {

package/dist/layout/grid.js

@@ -15,9 +15,11 @@ const COLUMN_CLASSES = {
 /**
 * The auto-filling track. The measure travels as a custom property rather than
 * as an arbitrary value, so the track definition is one static class the
-* scanner always sees instead of a fresh one per call site.
+* scanner always sees instead of a fresh one per call site. The minimum is
+* capped at the grid's own width, so a column narrower than `minItemWidth` (a
+* phone) gets one full-width track instead of one that overflows it.
 */
-const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(var(--cue-grid-min),1fr))]";
+const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(min(var(--cue-grid-min),100%),1fr))]";
 /**
 * Two-dimensional layout: equal columns, or as many as fit.
 *

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/preview.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
-import { usePublish, useRead } from "../system/published.js";
-import { AmbientThemeContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes, useFollowedAxes, useRestateReady } from "../system/density.js";
-import { OverridesContext } from "../system/overrides.js";
-import { NO_PAIRING_SEED, PairingSeedContext, ThemeContext } from "../system/theme-provider.js";
+import { useRead } from "../system/published.js";
+import { DensityContext, PaintContext, StyleSetContext, useFollowedAxes, useRestateReady } from "../system/density.js";
+import { ThemeContext } from "../system/theme-provider.js";
 import { GROUND_CLASSES } from "./_ground.js";
 import { STAGE_MARKS } from "../system/_style-stage-marks.js";
+import { StageScope, stageAttributes } from "../system/_stage-scope.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/preview.tsx
@@ -212,190 +212,6 @@ function effectiveBounds(options, available) {
 	};
 }
 /**
-* The attributes the stage carries — and, when nothing is asked, none at all.
-*
-* Inheriting is the *absence* of attributes, which is why every branch below
-* is conditional. Three branches add a second attribute, each for a reason in
-* the stylesheets rather than in taste.
-*
-* A theme's light block is the compound selector
-* `[data-theme="t"][data-mode="light"]`, so a mode with no theme restates the
-* page's theme on the same element. Read the other way, a theme with no mode
-* repeats the page's mode. Otherwise the stage would match the theme's dark
-* block under a light page, while every popup opened on it came up light:
-* popups are stamped from the context `StageScope` publishes, which carries
-* the page's mode.
-*
-* A theme's density overrides are addressed through `data-cue-theme`, the
-* stamp `<Density>` writes, so a density names the nearest theme the same way.
-*
-* A stage that ends up naming a theme and no rung — its own theme, or the
-* page's restated beside a mode (`scoped`, below) — restates the rung in force
-* around it, as `data-density` with the theme as `data-cue-theme` (spec
-* 2026-09-26-looks-fidelity §4.1.1). A theme's rung retunes are keyed on the
-* theme and the rung on one element, or a rung below the theme, so a stage that
-* re-themes with no `data-density` of its own inherits the rung already
-* resolved against the PAGE's theme, and its own theme's retune of that rung
-* never applies. `/looks` opens every stage this way: a theme and no rung. It
-* is what a nested `ThemeProvider` that names a theme already does — theme,
-* rung and mode together. The rung is the one `DensityContext` carries: `null`
-* outside every provider, where nothing is restated, and never `useDensity()`'s
-* `compact` fallback, which would invent one.
-*
-* The style set adds no second attribute, and that is the difference worth
-* writing down beside the three that do: a `[data-style]` block is a single
-* attribute selector naming no other axis, so a set stamped alone matches on
-* its own.
-*
-* But a stage that re-themes, re-modes or re-faces restates the set and the pack
-* in force around it (`around`), for a reason in custom properties rather than
-* in selectors. Their blocks declare names whose values read those axes — a
-* pack's stroke stops are the theme's borders, a set's band rule and ground are
-* the theme's border and surface — and a custom property's `var()`s are
-* substituted where it is declared. Declared only on the page, they arrive at
-* the stage already resolved against the page's theme and pairing; restated on
-* the stage, beside its own `data-theme` or `data-font`, they resolve against
-* those. A rung alone changes no ink and restates nothing. `around` is `null`
-* until the stage may restate: under a root that persists, not before the stage
-* has mounted, when the set and pack in force are the root's props rather than
-* the visitor's (see `useRestateReady`).
-*
-* The page's mode and rung, restated beside a stage theme — and the page's
-* theme, restated beside a stage mode or as a stage rung's `data-cue-theme` —
-* wait for the same mount on the same terms (tracking plan F13): under a
-* persisting root each is the root's, whose value on the server is its prop
-* while `<html>` carries the visitor's. So until then `followed` holds it back,
-* and `data-cue-follows` names it instead — the theme stylesheets' blocks each
-* have a twin keyed on `<html>`'s value and that marker (a followed rung
-* included: the base rung's twin in `axes.css`, and each theme's retune of it
-* keyed on the stage's own `data-theme`), and a rung node with no
-* `data-cue-theme` is reached by the rung rules' structural form, so the stage
-* paints the visitor's theme, mode and rung from the first frame (see
-* `useFollowedAxes`). A theme, mode or rung the stage names, or one named
-* between it and the root, is stamped as it always was. A followed rung takes
-* its `data-cue-theme` with it: the stamp addresses a `data-density` on the
-* same element, and there is none to address until the rung is stamped.
-*/
-function stageAttributes(asked, page, around, aroundDensity, followed) {
-	const attributes = {};
-	const scoped = asked.theme ?? (asked.mode === void 0 ? null : page?.theme ?? null);
-	if (scoped !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-theme"] = scoped;
-	const moded = asked.mode ?? (asked.theme === void 0 ? void 0 : page?.mode);
-	if (moded !== void 0 && !followed.mode) attributes["data-mode"] = moded;
-	if (asked.density !== void 0) {
-		attributes["data-density"] = asked.density;
-		const nearest = asked.theme ?? page?.theme ?? null;
-		if (nearest !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-cue-theme"] = nearest;
-	} else if (scoped !== null && aroundDensity !== null && !followed.density) {
-		attributes["data-density"] = aroundDensity;
-		if (asked.theme !== void 0 || !followed.theme) attributes["data-cue-theme"] = scoped;
-	}
-	if (followed.marker !== null) attributes["data-cue-follows"] = followed.marker;
-	if (asked.font !== void 0) attributes["data-font"] = asked.font;
-	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
-	if (asked.paint !== void 0) attributes["data-paint"] = asked.paint;
-	const restates = around !== null && (scoped !== null || moded !== void 0 || asked.font !== void 0);
-	if (restates && asked.styleSet === void 0 && around.styleSet !== null) attributes["data-style"] = around.styleSet;
-	if (restates && asked.paint === void 0 && around.paint !== null) attributes["data-paint"] = around.paint;
-	return attributes;
-}
-/**
-* The contexts the stage republishes, so an overlay opened on it follows it.
-*
-* `useCuePortalProps()` stamps a portal container from `ThemeContext` and
-* `DensityContext`; a popup mounts on `<body>` and inherits nothing from the
-* stage's DOM. So the stage's subtree reads a theme context with the stage's
-* theme and mode, and a density context with the stage's rung. The tools and
-* footer are outside this subtree, so what they open follows the page. A theme
-* the provider did not register leaves `manifest` null, which is what
-* `useTheme()` already reports for a name nobody registered.
-*
-* The style set travels with the density for the same reason and by the same
-* route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
-* and a popup opened on the stage inherits nothing from the stage's DOM.
-*
-* And the pairing travels in the theme context, because that is where the
-* portal stamp reads `data-font` from (`theme?.font`). It used not to: the
-* stage stamped `data-font` on its own element and republished nothing, so a
-* popover opened on a `plex` stage came up in the root's pairing — a limit the
-* `font` prop's docblock stated rather than a rule anybody chose. A pairing on
-* the stage is the stage's, exactly as its theme is; `setFont` read here still
-* drives the root, because the pairing's setter has no island form.
-*/
-function StageScope({ theme, mode, density, font, styleSet, paint, children }) {
-	const outer = useRead(ThemeContext);
-	const outerOverrides = useRead(OverridesContext);
-	const outerDensity = useRead(DensityContext);
-	const outerAmbient = useRead(AmbientThemeContext);
-	const outerStyleSet = useRead(StyleSetContext);
-	const outerPaint = useRead(PaintContext);
-	const value = React.useMemo(() => {
-		if (outer === null || theme === void 0 && mode === void 0 && font === void 0) return outer;
-		const scoped = theme ?? outer.theme;
-		return {
-			...outer,
-			theme: scoped,
-			manifest: scoped === outer.theme ? outer.manifest : null,
-			mode: mode ?? outer.mode,
-			font: font ?? outer.font,
-			resolvedMode: mode === "dark" || mode === "light" ? mode : outer.resolvedMode
-		};
-	}, [
-		outer,
-		theme,
-		mode,
-		font
-	]);
-	const stamped = theme !== void 0 || mode !== void 0;
-	const inputs = [
-		theme,
-		mode,
-		density,
-		font,
-		styleSet,
-		paint,
-		React.useContext(ThemeContext),
-		React.useContext(OverridesContext),
-		React.useContext(DensityContext),
-		React.useContext(AmbientThemeContext),
-		React.useContext(StyleSetContext),
-		React.useContext(PaintContext)
-	];
-	const publishedAmbient = usePublish(theme ?? outerAmbient, inputs);
-	const publishedDensity = usePublish(density ?? outerDensity, inputs);
-	const publishedStyleSet = usePublish(styleSet ?? outerStyleSet, inputs);
-	const publishedPaint = usePublish(paint ?? outerPaint, inputs);
-	const publishedOverrides = usePublish(stamped ? null : outerOverrides, inputs);
-	const publishedValue = usePublish(value, inputs);
-	const outerPairingSeed = React.useContext(PairingSeedContext);
-	const outerRootAxes = React.useContext(RootAxesContext);
-	return /* @__PURE__ */ jsx(RootAxesContext.Provider, {
-		value: rootAxes(outerRootAxes.theme && theme === void 0, outerRootAxes.mode && mode === void 0, outerRootAxes.density && density === void 0),
-		children: /* @__PURE__ */ jsx(AmbientThemeContext.Provider, {
-			value: publishedAmbient,
-			children: /* @__PURE__ */ jsx(DensityContext.Provider, {
-				value: publishedDensity,
-				children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
-					value: publishedStyleSet,
-					children: /* @__PURE__ */ jsx(PaintContext.Provider, {
-						value: publishedPaint,
-						children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
-							value: publishedOverrides,
-							children: /* @__PURE__ */ jsx(PairingSeedContext.Provider, {
-								value: font === void 0 ? outerPairingSeed : NO_PAIRING_SEED,
-								children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
-									value: publishedValue,
-									children
-								})
-							})
-						})
-					})
-				})
-			})
-		})
-	});
-}
-/**
 * The stage's size: explicit per axis once a reader has moved it, and the size
 * the layout gives it before that — `null` on an axis, which is also what a
 * double-click returns an axis to.

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 };

package/dist/layout/reveal.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useStill } from "../system/still.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/reveal.tsx
+/** framer-motion's `easeOut`, the curve cueplusplus.com's entrances use. */
+const EASE_OUT = "cubic-bezier(0, 0, 0.58, 1)";
+/**
+* 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>
+*/
+const Reveal = React.forwardRef(function Reveal({ distance = 28, rootMargin = "-12% 0px", duration = 500, stagger = 0, className, children, ...props }, ref) {
+	const box = React.useRef(null);
+	const still = useStill();
+	const entered = React.useRef(false);
+	const targets = React.useCallback(() => {
+		const element = box.current;
+		if (element === null) return [];
+		return stagger > 0 ? [...element.querySelectorAll("[data-reveal-item]")] : [element];
+	}, [stagger]);
+	React.useLayoutEffect(() => {
+		if (still || entered.current) return;
+		for (const target of targets()) {
+			target.style.opacity = "0";
+			target.style.transform = `translateY(${distance}px)`;
+		}
+	}, [
+		still,
+		distance,
+		targets
+	]);
+	React.useEffect(() => {
+		if (still) {
+			for (const target of targets()) {
+				target.style.opacity = "";
+				target.style.transform = "";
+			}
+			return;
+		}
+		if (entered.current) return;
+		const reveal = () => {
+			entered.current = true;
+			targets().forEach((target, index) => {
+				target.style.transition = `opacity ${duration}ms ${EASE_OUT}, transform ${duration}ms ${EASE_OUT}`;
+				if (stagger > 0) target.style.transitionDelay = `${index * stagger}ms`;
+				target.style.opacity = "1";
+				target.style.transform = "none";
+			});
+		};
+		const element = box.current;
+		if (element === null || typeof IntersectionObserver === "undefined") {
+			reveal();
+			return;
+		}
+		const stop = () => {
+			line.disconnect();
+			whole.disconnect();
+		};
+		const line = new IntersectionObserver((entries) => {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			reveal();
+			stop();
+		}, { rootMargin });
+		const whole = new IntersectionObserver((entries) => {
+			if (!entries.some((entry) => entry.isIntersecting && entry.intersectionRatio >= .99)) return;
+			reveal();
+			stop();
+		}, { threshold: 1 });
+		line.observe(element);
+		whole.observe(element);
+		return stop;
+	}, [
+		still,
+		rootMargin,
+		duration,
+		stagger,
+		targets
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			box.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref !== null) ref.current = node;
+		},
+		"data-slot": "reveal",
+		className: cn(className),
+		...props,
+		children
+	});
+});
+//#endregion
+export { Reveal };

package/dist/layout/sidebar.js

@@ -51,6 +51,91 @@ const LANDMARK_ELEMENTS = {
 	complementary: "aside"
 };
 /**
+* The navigation column: a `<nav>` on a hairline, with a collapse valve and a
+* scroller of its own.
+*
+* Width is an inline length rather than a class, because it is the one piece of
+* console geometry a user is expected to change and persist; the transition
+* between the two widths is CSS and switches off under `prefers-reduced-motion`.
+*
+* **The column scrolls, the rail does not.** Thirty rows of navigation is an
+* ordinary amount for a documentation site or a settings screen, and a column
+* that cannot scroll simply loses the last of them off the bottom of the frame.
+* So the sections go in an inner scroller and the root keeps the height — which
+* is also what saves {@link SidebarRail}: it is `absolute inset-y-0`, its
+* containing block is the root rather than the scroller, and an absolutely
+* positioned box whose containing block is outside a scroll container neither
+* scrolls with it nor is clipped by it. Put the scroller on the root instead
+* and the collapse rail slides away with the third screenful.
+*
+* @example
+* <Sidebar.Root aria-label="Main">
+*   <Sidebar.Section label="Console">
+*     <Sidebar.Item icon={Sliders} active>Patch</Sidebar.Item>
+*     <Sidebar.Item icon={List}>Cues</Sidebar.Item>
+*   </Sidebar.Section>
+*   <Sidebar.Rail />
+* </Sidebar.Root>
+*/
+const SidebarRoot = React.forwardRef(function SidebarRoot({ className, landmark = "navigation", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, width = "14rem", collapsedWidth = "3rem", style, children, ...elementProps }, ref) {
+	const Element = LANDMARK_ELEMENTS[landmark];
+	const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
+	const collapsed = collapsedProp ?? uncontrolled;
+	const toggle = React.useCallback(() => {
+		const next = !(collapsedProp ?? uncontrolled);
+		if (collapsedProp === void 0) setUncontrolled(next);
+		onCollapsedChange?.(next);
+	}, [
+		collapsedProp,
+		uncontrolled,
+		onCollapsedChange
+	]);
+	const context = React.useMemo(() => ({
+		collapsed,
+		toggle
+	}), [collapsed, toggle]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Element, {
+			ref,
+			"data-slot": "sidebar",
+			"data-collapsed": collapsed ? "" : void 0,
+			className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-150 ease-out motion-reduce:transition-none", "[counter-reset:cue-rail]", className),
+			style: {
+				width: collapsed ? collapsedWidth : width,
+				...style
+			},
+			...elementProps,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-scroller",
+				className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto py-(--cue-space-4)",
+				children
+			})
+		})
+	});
+});
+/** One group of items, under an optional caption. */
+const SidebarSection = React.forwardRef(function SidebarSection({ className, label, children, ...elementProps }, ref) {
+	const { collapsed } = useSidebar();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "sidebar-section",
+		className: cn("flex flex-col gap-(--cue-space-1) px-(--cue-space-2)", className),
+		...elementProps,
+		children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-section-label",
+			className: cn("flex h-control-sm items-center px-(--cue-space-2)", LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
+			children: label
+		}), children]
+	});
+});
+/**
+* A style set's numbered rail (structural Looks, spec 2026-10-02 §3.5): every item
+* counts, and draws its number before the icon only when the set derives
+* `style-rail-counter-content` — `none` unset, which generates no box at all.
+*/
+const RAIL_COUNTER = "[counter-increment:cue-rail] before:content-[var(--cue-style-rail-counter-content,none)] before:shrink-0 before:font-mono before:text-(length:--cue-text-label) before:text-fg-subtle";
+/**
 * The console's navigation column: sections of items, a scroller of its own,
 * and a rail that collapses the whole thing to icons.
 *
@@ -63,57 +148,8 @@ const LANDMARK_ELEMENTS = {
 * </Sidebar.Root>
 */
 const Sidebar = {
-	Root: React.forwardRef(function SidebarRoot({ className, landmark = "navigation", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, width = "14rem", collapsedWidth = "3rem", style, children, ...elementProps }, ref) {
-		const Element = LANDMARK_ELEMENTS[landmark];
-		const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
-		const collapsed = collapsedProp ?? uncontrolled;
-		const toggle = React.useCallback(() => {
-			const next = !(collapsedProp ?? uncontrolled);
-			if (collapsedProp === void 0) setUncontrolled(next);
-			onCollapsedChange?.(next);
-		}, [
-			collapsedProp,
-			uncontrolled,
-			onCollapsedChange
-		]);
-		const context = React.useMemo(() => ({
-			collapsed,
-			toggle
-		}), [collapsed, toggle]);
-		return /* @__PURE__ */ jsx(SidebarContext.Provider, {
-			value: context,
-			children: /* @__PURE__ */ jsx(Element, {
-				ref,
-				"data-slot": "sidebar",
-				"data-collapsed": collapsed ? "" : void 0,
-				className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-150 ease-out motion-reduce:transition-none", className),
-				style: {
-					width: collapsed ? collapsedWidth : width,
-					...style
-				},
-				...elementProps,
-				children: /* @__PURE__ */ jsx("div", {
-					"data-slot": "sidebar-scroller",
-					className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto py-(--cue-space-4)",
-					children
-				})
-			})
-		});
-	}),
-	Section: React.forwardRef(function SidebarSection({ className, label, children, ...elementProps }, ref) {
-		const { collapsed } = useSidebar();
-		return /* @__PURE__ */ jsxs("div", {
-			ref,
-			"data-slot": "sidebar-section",
-			className: cn("flex flex-col gap-(--cue-space-1) px-(--cue-space-2)", className),
-			...elementProps,
-			children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
-				"data-slot": "sidebar-section-label",
-				className: cn("flex h-control-sm items-center px-(--cue-space-2)", LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
-				children: label
-			}), children]
-		});
-	}),
+	Root: SidebarRoot,
+	Section: SidebarSection,
 	Item: React.forwardRef(function SidebarItem({ className, icon: Icon, active = false, badge, render, type, children, ...elementProps }, ref) {
 		return useRender({
 			render,
@@ -125,7 +161,7 @@ const Sidebar = {
 				"data-slot": "sidebar-item",
 				"data-active": active ? "" : void 0,
 				"aria-current": active ? "page" : void 0,
-				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} disabled:pointer-events-none disabled:opacity-40`, className),
+				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} ${RAIL_COUNTER} disabled:pointer-events-none disabled:opacity-40`, className),
 				children: /* @__PURE__ */ jsxs(Fragment, { children: [
 					Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 						"aria-hidden": "true",

package/dist/lib/cn.js

@@ -22,12 +22,30 @@ import { extendTailwindMerge } from "tailwind-merge";
 * own `radius` theme scale, which is also what makes `rounded-t-control`,
 * `rounded-br-overlay` and the rest of the per-corner rungs resolve against
 * the same conflict group as their bare form and each other.
+*
+* The bridge's spacing names are the same defect on another axis:
+* `h-control-md`, `size-icon-sm`, `min-h-control-lg` and their kin read as
+* unknown classes, so a Button's size height and a caller's `h-auto` both
+* stayed on the element and the bridge utility won by CSS order — the CUE++
+* site's hero actions drew 34px tall against the site's 48px (2026-10-04).
+* They are members of Tailwind's `spacing` scale, which every sizing and
+* spacing utility reads, so that is where they are taught.
 */
-const twMergeCue = extendTailwindMerge({ extend: { theme: { radius: [
-	"control",
-	"surface",
-	"overlay"
-] } } });
+const twMergeCue = extendTailwindMerge({ extend: { theme: {
+	radius: [
+		"control",
+		"surface",
+		"overlay"
+	],
+	spacing: [
+		"control-sm",
+		"control-md",
+		"control-lg",
+		"chip",
+		"icon-sm",
+		"icon-md"
+	]
+} } });
 /**
 * Join class names and resolve conflicting Tailwind utilities, last one wins.
 *