@cueplusplus/ui 0.19.0 → 0.20.1

package/dist/layout/reveal.js

@@ -0,0 +1,112 @@
+"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, style, children, ...props }, ref) {
+	const box = React.useRef(null);
+	const still = useStill();
+	const [mounted, setMounted] = React.useState(false);
+	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) for (const target of targets()) {
+			target.style.opacity = "0";
+			target.style.transform = `translateY(${distance}px)`;
+		}
+		setMounted(true);
+	}, [
+		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",
+		"data-reveal-stagger": stagger > 0 ? "" : void 0,
+		className: cn(!still && !mounted && "cue-reveal-pending", className),
+		style: !still && !mounted ? {
+			...style,
+			"--cue-reveal-distance": `${distance}px`
+		} : style,
+		...props,
+		children
+	});
+});
+//#endregion
+export { Reveal };

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.
 *

package/dist/lib/particle-field-shaders.js

@@ -0,0 +1,236 @@
+//#region src/lib/particle-field-shaders.ts
+/**
+* cueplusplus.com's particle-logo shaders, verbatim (`site/src/components/particle-logo/shaders.ts`
+* at 08c6f26), as GLSL ES 1.00 with `highp`, which WebGL2 compiles unchanged.
+*
+* One deviation (spec 2026-10-04-cue-site-verbatim §9, D2): the two `smoothstep` calls the source
+* wrote with their edges reversed — undefined in GLSL — are written as `1.0 - smoothstep(lo, hi, x)`,
+* which is the value every GPU the site was seen on already computed for them.
+*
+* @internal Not part of the public API.
+*/
+const VERTEX_SHADER = `
+precision highp float;
+
+// Built-in uniforms (must be declared for RawShaderMaterial)
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+
+// Custom attributes
+attribute vec3 position;
+attribute vec2 uv;
+attribute float pindex;
+attribute vec3 offset;
+attribute float angle;
+
+// Custom uniforms
+uniform float uTime;
+uniform float uRandom;
+uniform float uDepth;
+uniform float uSize;
+uniform vec2 uTextureSize;
+uniform sampler2D uTexture;
+uniform sampler2D uTouch;
+uniform vec2 uWaveDirection;
+uniform float uWavePosition;
+uniform float uWaveTime;
+uniform vec3 uWaveColor;
+uniform vec3 uPrevColor;
+
+varying vec2 vPUv;
+varying vec2 vUv;
+varying float vTouch;
+varying float vFlipProgress;
+varying float vIsFlipping;
+
+// Simplex 2D noise
+vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+           -0.577350269189626, 0.024390243902439);
+  vec2 i  = floor(v + dot(v, C.yy) );
+  vec2 x0 = v -   i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+  + i.x + vec3(0.0, i1.x, 1.0 ));
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
+    dot(x12.zw,x12.zw)), 0.0);
+  m = m*m ;
+  m = m*m ;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+float random(float n) {
+  return fract(sin(n) * 43758.5453123);
+}
+
+void main() {
+  vUv = uv;
+
+  // particle uv
+  vec2 puv = offset.xy / uTextureSize;
+  vPUv = puv;
+
+  // pixel color
+  vec4 colA = texture2D(uTexture, puv);
+  float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
+
+  // displacement
+  vec3 displaced = offset;
+  
+  // Random base offset - scattered positioning
+  float rndX = random(pindex) - 0.5;
+  float rndY = random(offset.x + pindex) - 0.5;
+  displaced.xy += vec2(rndX, rndY) * uRandom;
+  
+  float rndz = (random(pindex) + snoise(vec2(pindex * 0.1, uTime * 0.1)));
+  displaced.z += rndz * (random(pindex) * 2.0 * uDepth);
+  
+  // Constant atom-like wiggle animation (always active)
+  float wiggleSpeed = 2.0 + random(pindex) * 2.0; // Varying speeds per particle
+  float wiggleAmount = 1.5 + random(pindex + 100.0) * 1.0; // Varying amplitudes
+  float wigglePhase = random(pindex * 2.0) * 6.28; // Random phase offset
+  
+  displaced.x += sin(uTime * wiggleSpeed + wigglePhase) * wiggleAmount;
+  displaced.y += cos(uTime * wiggleSpeed * 0.8 + wigglePhase) * wiggleAmount;
+  displaced.z += sin(uTime * wiggleSpeed * 0.6 + wigglePhase * 0.5) * wiggleAmount * 0.5;
+  
+  // center
+  displaced.xy -= uTextureSize * 0.5;
+
+  // Jagged wave effect - sweeps from a random direction with noise
+  // Project particle position onto wave direction
+  float particlePos = dot(displaced.xy, uWaveDirection);
+  
+  // Add noise to create jagged wave front based on particle's perpendicular position
+  float perpPos = dot(displaced.xy, vec2(-uWaveDirection.y, uWaveDirection.x));
+  float noiseOffset = snoise(vec2(perpPos * 0.02, pindex * 0.1)) * 0.15;
+  noiseOffset += snoise(vec2(pindex * 0.05, perpPos * 0.01)) * 0.1;
+  
+  // Normalize to 0-1 range based on texture size
+  float maxDist = length(uTextureSize) * 0.6;
+  float normalizedPos = (particlePos + maxDist) / (maxDist * 2.0);
+  
+  // Add the noise offset to create jagged edge
+  normalizedPos += noiseOffset;
+  
+  // Wave front position (0 to 1 sweep across)
+  float waveFront = uWavePosition;
+  float waveWidth = 0.08; // Narrower transition
+  
+  // Has the wave passed this particle? (with noise for randomness)
+  float hasFlipped = 1.0 - smoothstep(-waveWidth, waveWidth, normalizedPos - waveFront);
+  
+  // Flip animation for particles in transition zone
+  float flipZone = 1.0 - smoothstep(0.0, waveWidth * 2.0, abs(normalizedPos - waveFront));
+  
+  // Subtle pop effect when flipping
+  float popEffect = flipZone * 3.0;
+  displaced.z += popEffect;
+  
+  // Pass to fragment shader
+  vFlipProgress = flipZone;
+  vIsFlipping = hasFlipped;
+
+  // touch - dramatic explosion effect
+  float t = texture2D(uTouch, puv).r;
+  vTouch = t; // Pass to fragment shader
+  float touchStrength = t * 60.0; // Strong displacement on hover
+  
+  // Explosive scatter in all directions
+  displaced.z += touchStrength * rndz * 2.0;
+  displaced.x += cos(angle) * touchStrength * (0.4 + rndz * 0.8);
+  displaced.y += sin(angle) * touchStrength * (0.4 + rndz * 0.8);
+  
+  // Add swirl effect on touch
+  displaced.x += sin(uTime * 2.0 + pindex * 0.02) * touchStrength * 0.2;
+  displaced.y += cos(uTime * 2.0 + pindex * 0.02) * touchStrength * 0.2;
+
+  // particle size - grows when touched for dramatic effect
+  float psize = (snoise(vec2(uTime, pindex) * 0.5) + 2.0);
+  psize *= max(grey, 0.4);
+  psize *= uSize;
+  
+  // Particles grow slightly when touched
+  psize *= (1.0 + t * 0.8);
+
+  // final position
+  vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
+  mvPosition.xyz += position * psize;
+  vec4 finalPosition = projectionMatrix * mvPosition;
+
+  gl_Position = finalPosition;
+}
+`;
+/** @internal */
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform sampler2D uTexture;
+uniform vec3 uWaveColor;
+uniform vec3 uPrevColor;
+uniform float uColorFade;
+
+varying vec2 vPUv;
+varying vec2 vUv;
+varying float vTouch;
+varying float vFlipProgress;
+varying float vIsFlipping;
+
+void main() {
+  vec2 uv = vUv;
+  vec2 puv = vPUv;
+
+  // pixel color - white for the logo
+  vec4 colA = texture2D(uTexture, puv);
+  float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
+
+  // Circle shape for particles
+  float border = 0.3;
+  float radius = 0.5;
+  float dist = radius - distance(uv, vec2(0.5));
+  float t = smoothstep(0.0, border, dist);
+
+  float brightness = max(grey, 0.3);
+  
+  // Color transition: smoothly flip between previous and new color
+  // vIsFlipping smoothly transitions from 0 to 1 as wave passes
+  vec3 currentColor = mix(uPrevColor, uWaveColor, vIsFlipping);
+  
+  // During active flip zone, flash slightly brighter
+  float flipBrightness = 1.0 + vFlipProgress * 0.3;
+  
+  // Fade back to white over time
+  vec3 white = vec3(1.0, 1.0, 1.0);
+  vec3 particleColor = mix(currentColor, white, uColorFade);
+  
+  // Apply brightness
+  vec3 finalColor = particleColor * brightness * flipBrightness;
+  
+  // Touch glow - bright white flash
+  finalColor = mix(finalColor, white, vTouch * 0.8);
+  
+  // Brightness boost on touch
+  finalColor *= (1.0 + vTouch * 0.5);
+  
+  vec4 color = vec4(finalColor, 1.0);
+  color.a = t * brightness * (1.0 + vTouch * 0.3);
+
+  gl_FragColor = color;
+}
+`;
+//#endregion
+export { FRAGMENT_SHADER, VERTEX_SHADER };

package/dist/lib/particle-field.js

@@ -0,0 +1,210 @@
+//#region src/lib/particle-field.ts
+/** A pixel is a particle when its alpha or its red is over this. */
+const THRESHOLD = 200;
+/**
+* The source's sampling, exactly: every `skip`-th pixel of the **flattened** raster, kept when
+* `alpha > 200 || red > 200`. The source rasterises its logo onto opaque black, so every sampled
+* pixel passes the alpha test and the black ground becomes a field of dim particles around the
+* mark — which is what the site looks like, and is kept.
+*/
+function sampleParticles({ data, width, height }, skip, random = Math.random) {
+	const total = width * height;
+	let count = 0;
+	for (let i = 0; i < total; i += 1) {
+		if (i % skip !== 0) continue;
+		if (data[i * 4 + 3] > THRESHOLD || data[i * 4] > THRESHOLD) count += 1;
+	}
+	const indices = new Uint16Array(count);
+	const offsets = new Float32Array(count * 3);
+	const angles = new Float32Array(count);
+	for (let i = 0, j = 0; i < total; i += 1) {
+		if (i % skip !== 0) continue;
+		if (data[i * 4 + 3] <= THRESHOLD && data[i * 4] <= THRESHOLD) continue;
+		offsets[j * 3] = i % width;
+		offsets[j * 3 + 1] = Math.floor(i / width);
+		offsets[j * 3 + 2] = 0;
+		indices[j] = i;
+		angles[j] = random() * Math.PI * 2;
+		j += 1;
+	}
+	return {
+		count,
+		indices,
+		offsets,
+		angles
+	};
+}
+/**
+* An sRGB hex colour in linear light, as three's `Color` converts it with colour management on
+* (r152+): a `RawShaderMaterial` uniform receives these values, and the shader writes them out
+* unconverted. Ported so a hex reaches the GPU exactly as it did on the site.
+*/
+function srgbToLinear(hex) {
+	const value = Number.parseInt(hex.replace("#", ""), 16);
+	const channel = (c) => {
+		const s = c / 255;
+		return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	};
+	return [
+		channel(value >> 16 & 255),
+		channel(value >> 8 & 255),
+		channel(value & 255)
+	];
+}
+const same = (a, b) => a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
+/**
+* The next wave's colour: a random one that is not the current colour, as the source's
+* `do … while` picks it — guarded, so a palette with nothing different to offer returns at once
+* instead of looping for ever.
+*/
+function pickWaveColor(palette, current, random = Math.random) {
+	if (!palette.some((colour) => !same(colour, current))) return palette[0] ?? current;
+	let next;
+	do
+		next = palette[Math.floor(random() * palette.length)];
+	while (same(next, current) && palette.length > 1);
+	return next;
+}
+const easeOutSine = (t) => Math.sin(t * Math.PI / 2);
+/**
+* The source's `TouchTexture` trail, without its canvas: points are added once per rendered
+* update, aged before they are drawn, and dropped once their age passes 80. A point's force is how
+* far the pointer moved since the last one, squared and scaled, `min((dx² + dy²) × 10000, 1)`; the
+* first point has none.
+*/
+var TouchTrail = class TouchTrail {
+	static SIZE = 64;
+	static MAX_AGE = 80;
+	static RADIUS = .25;
+	points = [];
+	add(x, y) {
+		const last = this.points[this.points.length - 1];
+		let force = 0;
+		if (last !== void 0) {
+			const dx = last.x - x;
+			const dy = last.y - y;
+			force = Math.min((dx * dx + dy * dy) * 1e4, 1);
+		}
+		this.points.push({
+			x,
+			y,
+			age: 0,
+			force
+		});
+	}
+	age() {
+		this.points = this.points.filter((point) => {
+			point.age += 1;
+			return point.age <= TouchTrail.MAX_AGE;
+		});
+	}
+	/** A point's intensity at an age: rising over the first 30% of its life, falling over the rest. */
+	static intensity(age) {
+		const rise = TouchTrail.MAX_AGE * .3;
+		if (age < rise) return easeOutSine(age / rise);
+		return easeOutSine(1 - (age - rise) / (TouchTrail.MAX_AGE * .7));
+	}
+	/** Paint the trail onto its 64px canvas, as the source's `drawTouch` does. */
+	draw(context) {
+		const size = TouchTrail.SIZE;
+		context.fillStyle = "black";
+		context.fillRect(0, 0, size, size);
+		for (const point of this.points) {
+			const x = point.x * size;
+			const y = (1 - point.y) * size;
+			const radius = size * TouchTrail.RADIUS * TouchTrail.intensity(point.age) * point.force;
+			if (radius <= 0) continue;
+			const gradient = context.createRadialGradient(x, y, radius * .25, x, y, radius);
+			gradient.addColorStop(0, "rgba(255, 255, 255, 0.8)");
+			gradient.addColorStop(1, "rgba(0, 0, 0, 0.0)");
+			context.beginPath();
+			context.fillStyle = gradient;
+			context.arc(x, y, radius, 0, Math.PI * 2);
+			context.fill();
+		}
+	}
+};
+/** R3F 9.6.1's default clipping planes, which the source inherits. */
+const NEAR = .1;
+const FAR = 1e3;
+/** The world-space size the camera sees at z = 0, as R3F's `viewport` reports it. */
+function viewportAt(aspect) {
+	const height = 600 * Math.tan(25 * Math.PI / 180);
+	return {
+		width: height * aspect,
+		height
+	};
+}
+/** A column-major perspective matrix, as three's `PerspectiveCamera` builds it. */
+function perspective(fov, aspect, near, far) {
+	const f = 1 / Math.tan(fov / 2 * Math.PI / 180);
+	const m = /* @__PURE__ */ new Float32Array(16);
+	m[0] = f / aspect;
+	m[5] = f;
+	m[10] = (far + near) / (near - far);
+	m[11] = -1;
+	m[14] = 2 * far * near / (near - far);
+	return m;
+}
+/** The model-view matrix: the mesh scaled `[s, s, 1]`, seen from `z = 300`. */
+function modelView(scale) {
+	const m = /* @__PURE__ */ new Float32Array(16);
+	m[0] = scale;
+	m[5] = scale;
+	m[10] = 1;
+	m[14] = -300;
+	m[15] = 1;
+	return m;
+}
+/** The mesh's scale, as the source computes it for each fit. */
+function logoScale(fit, aspect, width, height, containFill) {
+	const viewport = viewportAt(aspect);
+	if (fit === "contain") return Math.min(viewport.width / width, viewport.height / height) * containFill;
+	return viewport.height * .26 / height;
+}
+/** The raster the source samples: 600px wide, at its image's aspect. */
+const TARGET_WIDTH = 600;
+/** Rasterise an image as the source does: twice the size with high-quality smoothing, then down onto opaque black. */
+function rasterise(image) {
+	const scale = TARGET_WIDTH / image.width;
+	const width = Math.round(image.width * scale);
+	const height = Math.round(image.height * scale);
+	const large = document.createElement("canvas");
+	large.width = width * 2;
+	large.height = height * 2;
+	const big = large.getContext("2d", { willReadFrequently: true });
+	big.imageSmoothingEnabled = true;
+	big.imageSmoothingQuality = "high";
+	big.fillStyle = "black";
+	big.fillRect(0, 0, large.width, large.height);
+	big.drawImage(image, 0, 0, large.width, large.height);
+	const small = document.createElement("canvas");
+	small.width = width;
+	small.height = height;
+	const context = small.getContext("2d", { willReadFrequently: true });
+	context.imageSmoothingEnabled = true;
+	context.imageSmoothingQuality = "high";
+	context.fillStyle = "black";
+	context.fillRect(0, 0, width, height);
+	context.drawImage(large, 0, 0, width, height);
+	const { data } = context.getImageData(0, 0, width, height);
+	return {
+		data,
+		width,
+		height
+	};
+}
+/**
+* A CSS colour as a `#rrggbb` string, normalised through a canvas — the one parser every
+* browser ships for whatever a theme writes (hex, `rgb()`, `oklch()`, `color-mix()`).
+*/
+function normaliseColour(colour) {
+	const context = document.createElement("canvas").getContext("2d");
+	if (context === null) return null;
+	context.fillStyle = "#000000";
+	context.fillStyle = colour;
+	const out = String(context.fillStyle);
+	return /^#[0-9a-f]{6}$/iu.test(out) ? out : null;
+}
+//#endregion
+export { FAR, NEAR, TouchTrail, logoScale, modelView, normaliseColour, perspective, pickWaveColor, rasterise, sampleParticles, srgbToLinear, viewportAt };

package/dist/midi/spectrum-visualizer.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FIELD_RADIUS } from "../system/_style-field-chassis.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { toRem } from "../instruments/_rem.js";
@@ -141,7 +142,7 @@ const SpectrumVisualizer = React.forwardRef(function SpectrumVisualizer({ classN
 			"aria-label": summary,
 			"data-slot": "spectrum-visualizer-canvas",
 			"data-mode": mode,
-			className: "block w-full rounded-control border border-border bg-(--cue-data-ground)",
+			className: `block w-full ${FIELD_RADIUS} border border-border bg-(--cue-data-ground)`,
 			style: { height: toRem(height) }
 		}), labels ? /* @__PURE__ */ jsx("div", {
 			"data-slot": "spectrum-visualizer-legend",

package/dist/primitives/chip.js

@@ -20,9 +20,10 @@ import { jsx } from "react/jsx-runtime";
 * two competing utilities in the class string, and `chipVariants` is exported —
 * a caller who uses it without `cn` gets a raw string where the winner is
 * decided by stylesheet order rather than by which utility was written last.
-* `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
-* see that as a conflict, because `chip` is a token name and not a scale step.
-* So nothing here cancels anything. What varies moves into `variants` or
+* `h-chip h-4` proved the point at the other end: `tailwind-merge` could not
+* even see that as a conflict until `cn` was taught the bridge's spacing names
+* (2026-10-04), and a caller who skips `cn` still cannot. So nothing here
+* cancels anything. What varies moves into `variants` or
 * `compoundVariants` until only one of it is ever emitted.
 *
 * That is why `neutral` carries no rim of its own. The other six tones rim

package/dist/styles.css

@@ -115,6 +115,18 @@
   clip-path: none;
 }
 
+/* `Reveal`'s server render (`layout/reveal.tsx`): pending content is hidden before hydration, so
+ * it is never shown visible and then hidden by the client. Only where scripting is on — a reader
+ * with no JavaScript sees it — and where motion is welcome, as the client's own entrance is. A
+ * staggered block stays visible and hides the items it marks, as the client does. */
+@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
+  .cue-reveal-pending:not([data-reveal-stagger]),
+  .cue-reveal-pending[data-reveal-stagger] [data-reveal-item] {
+    opacity: 0;
+    transform: translateY(var(--cue-reveal-distance, 28px));
+  }
+}
+
 @media (forced-colors: active) {
   .cue-cut,
   .cue-cut-secondary {

package/dist/system/_style-field-chassis.js

@@ -24,6 +24,19 @@ const FIELD_PAD_SM = "px-[calc(var(--cue-space-3)*var(--cue-style-field-pad,1))]
 const FIELD_PAD_MD = "px-[calc(var(--cue-space-4)*var(--cue-style-field-pad,1))]";
 /** The `lg` rung's inline padding. */
 const FIELD_PAD_LG = "px-[calc(var(--cue-space-5)*var(--cue-style-field-pad,1))]";
+/**
+* A text-entry field's corner (2026-10-04): `style-field-radius`, and the
+* control's own radius — a set's `style-control-radius` or the density's rung,
+* times the scale, exactly what `rounded-control` resolves to — when a set names
+* none. A set whose buttons are pills (Prism, Ledger) names it so its fields,
+* textareas, drop zones and data panes are rounded rectangles rather than pills;
+* every other set draws what it drew before. Spelled through `--cue-*` names,
+* as `_style-check.ts`'s corner is, and never through a `--radius-*` reader.
+*/
+const FIELD_RADIUS = "rounded-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
+/** The same corner on one side, for a shape that tightens only its tail (a message bubble). */
+const FIELD_RADIUS_BR = "rounded-br-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
+const FIELD_RADIUS_BL = "rounded-bl-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /** The edge under a pointer that can hover. */
 const FIELD_HOVER_EDGE = "hover:border-[color:var(--cue-style-field-hover-edge,transparent)]";
 /** An invalid field's edge: `danger`, the class the chassis drew before round 6. */
@@ -35,4 +48,4 @@ const INVALID_EDGE = "data-[invalid]:border-danger";
 */
 const SELECT_HOVER_EDGE = "hover:not-data-disabled:border-[color:var(--cue-style-field-hover-edge,var(--cue-border-strong))]";
 //#endregion
-export { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE, SELECT_HOVER_EDGE };
+export { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, FIELD_RADIUS, FIELD_RADIUS_BL, FIELD_RADIUS_BR, INVALID_EDGE, SELECT_HOVER_EDGE };