@cueplusplus/ui 0.18.2 → 0.20.0

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/overlays/_surface.d.ts

@@ -117,9 +117,9 @@ declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-s
  * and the highlight are the style set's, with those as their defaults
  * (`_style-menu.ts`).
  */
-declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
+declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
 /** The uppercase mono caption over a group of menu rows — by default. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
 /** The hairline between menu groups. */
 declare const menuSeparatorClasses = "my-(--cue-space-1) mx-[var(--cue-style-menu-separator-inset,0px)] h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/primitives/button.js

@@ -40,6 +40,25 @@ import { useRender } from "@base-ui/react/use-render";
 */
 const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
 /**
+* A style set's chevron cut (structural Looks, spec 2026-10-02 §3.3), for the tones
+* that are a filled shape: primary and danger always, secondary only where the set
+* fills its ground (the build derives `--cue-style-secondary-cut` as `none` for a set
+* whose secondary ground is `transparent`). Outline, ghost and danger-outline are
+* drawn by their edge or their ink, and a hollow cut is geometry this chassis does
+* not take on, so they keep the rectangle.
+*
+* The cut is a `clip-path` on the element: a filled tone's border is transparent,
+* so nothing is cut but fill and exterior glow. Two things give way, on purpose:
+* the glow outside a cut button is clipped (a set with a cut is worn with a pack
+* that has none), and under `:focus-visible` and in forced colours the clip is
+* removed, so the focus ring and the system border are never cut. The element stays
+* a rectangle throughout: hit area, ring, `render`, refs, sizing and keyboard.
+* Unset, the clip is `none` and the button renders exactly as before. The rules
+* live in `styles.css` (`.cue-cut`, `.cue-cut-secondary`): as arbitrary utilities
+* they were ~105 characters on every button a page renders.
+*/
+const CUT_FILLED = "cue-cut";
+/**
 * The shared colour vocabulary. `accent` is theme-controlled, so `primary`
 * reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
 * per-theme branching here.
@@ -57,11 +76,11 @@ const buttonChassis = `inline-flex select-none items-center justify-center ${CON
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
-	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES} ${DISABLED_TONES.primary}`,
-	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND} hover:bg-[color:var(--cue-style-secondary-hover-ground,var(--cue-style-secondary-ground,var(--cue-surface-2)))] ${DISABLED_TONES.secondary}`,
+	primary: `bg-accent-fill [background-image:var(--cue-style-primary-fill,none)] text-accent-fill-fg hover:bg-accent-fill-hover hover:[background-image:none] disabled:[background-image:none] border border-transparent ${GLOW_CLASSES} ${CUT_FILLED} ${DISABLED_TONES.primary}`,
+	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND} hover:bg-[color:var(--cue-style-secondary-hover-ground,var(--cue-style-secondary-ground,var(--cue-surface-2)))] cue-cut-secondary ${DISABLED_TONES.secondary}`,
 	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent ${DISABLED_TONES.ghost}`,
 	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} ${OUTLINE_HOVER_EDGE} hover:text-accent bg-transparent ${OUTLINE_HOVER_GROUND} ${REST_SHADE_CLASS} ${DISABLED_TONES.outline}`,
-	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES} ${DISABLED_TONES.danger}`,
+	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES} ${CUT_FILLED} ${DISABLED_TONES.danger}`,
 	"danger-outline": `border text-danger bg-transparent hover:bg-danger/10 border-danger/40 ${DISABLED_TONES["danger-outline"]}`
 };
 /**

package/dist/primitives/chip.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 declare const chipVariants: (props?: ({
-  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/primitives/chip.js

@@ -7,16 +7,73 @@ import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+//#region src/primitives/chip.tsx
+/**
+* The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35` and the tone's ink
+* (mixed toward `fg`, see `CHIP_TONE_INK`), and the
+* two quieter readings of it — `outline`, which drops the fill, and `tag`,
+* which drops the fill and the voice with it.
+*
+* Every property that varies is emitted from exactly one place: one rim, one
+* ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
+* from the tone map and then cancelling it with `bg-transparent` would leave
+* 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` 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
+* themselves at `/35` in all three variants, but the neutral line has two
+* weights in this system: `--cue-border` is a box edge, and a chip is a box;
+* `--cue-hair-strong` is the rule between things, and a tag is a mark on the
+* page rather than a container. The rim is therefore a compound of tone and
+* variant, exactly as the fill is.
+*
+* **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
+* `system/_style-chip.ts`): the six tones' fill and rim are
+* `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
+* and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
+* and `border-<tone>/35` under no set, and a set's own shares inside one. The
+* case, tracking, radius, size and weight read `--cue-style-chip-case`,
+* `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
+*
+* @example
+* <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+* @example
+* <span className={chipVariants({ variant: "tag" })}>mcp</span>
+*/
+/**
+* A toned chip's ink: its tone, mixed 30% toward the page's own `fg`.
+*
+* A status ink is cut to be seen as a dot or a rim (3:1), and a chip sets it
+* as text: small, uppercase and on its own 10% tint, where the bare tone fell
+* to 4.2–4.4:1 in light under most themes and 3.6:1 under Kiln (structural
+* Looks §4.1's rendered sweep, phase 5). Mixing toward `fg` raises it in both
+* modes, because `fg` is the ink furthest from the ground in either, and
+* keeps the hue a reader reads the tone by.
+*/
+const CHIP_TONE_INK = {
+	accent: "text-[color:color-mix(in_oklch,var(--cue-accent)_70%,var(--cue-fg))]",
+	ok: "text-[color:color-mix(in_oklch,var(--cue-ok)_70%,var(--cue-fg))]",
+	busy: "text-[color:color-mix(in_oklch,var(--cue-busy)_70%,var(--cue-fg))]",
+	warn: "text-[color:color-mix(in_oklch,var(--cue-warn)_70%,var(--cue-fg))]",
+	danger: "text-[color:color-mix(in_oklch,var(--cue-danger)_70%,var(--cue-fg))]",
+	info: "text-[color:color-mix(in_oklch,var(--cue-info)_70%,var(--cue-fg))]"
+};
 const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center justify-center ${CHIP_GAP} whitespace-nowrap ${CHIP_RADIUS} border ${LABEL_FACE} ${LABEL_WEIGHT} ${CHIP_CASE} outline-none ${FOCUS_RING}`, {
 	variants: {
 		tone: {
 			neutral: CHIP_INK_NEUTRAL,
-			accent: `${CHIP_EDGE.accent} text-accent`,
-			ok: `${CHIP_EDGE.ok} text-ok`,
-			busy: `${CHIP_EDGE.busy} text-busy`,
-			warn: `${CHIP_EDGE.warn} text-warn`,
-			danger: `${CHIP_EDGE.danger} text-danger`,
-			info: `${CHIP_EDGE.info} text-info`
+			accent: `${CHIP_EDGE.accent} ${CHIP_TONE_INK.accent}`,
+			ok: `${CHIP_EDGE.ok} ${CHIP_TONE_INK.ok}`,
+			busy: `${CHIP_EDGE.busy} ${CHIP_TONE_INK.busy}`,
+			warn: `${CHIP_EDGE.warn} ${CHIP_TONE_INK.warn}`,
+			danger: `${CHIP_EDGE.danger} ${CHIP_TONE_INK.danger}`,
+			info: `${CHIP_EDGE.info} ${CHIP_TONE_INK.info}`
 		},
 		variant: {
 			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,

package/dist/styles.css

@@ -95,3 +95,29 @@
     animation: none;
   }
 }
+
+/* A style set's chevron cut on filled buttons (structural Looks, spec 2026-10-02
+ * §3.3), as two bespoke classes for the plussie's reason and one more: written as
+ * Tailwind arbitrary properties it was some 105 characters on every button a page
+ * renders, and `/kitchen-sink`'s document grew 1.5% for it. Unset, the clip is
+ * `none` and nothing changes. Focus and forced colours drop the clip, so the ring
+ * and the system border are never cut; unlayered, so a utility cannot undo it. */
+.cue-cut {
+  clip-path: var(--cue-style-control-cut-clip, none);
+}
+
+.cue-cut-secondary {
+  clip-path: var(--cue-style-secondary-cut, none);
+}
+
+.cue-cut:focus-visible,
+.cue-cut-secondary:focus-visible {
+  clip-path: none;
+}
+
+@media (forced-colors: active) {
+  .cue-cut,
+  .cue-cut-secondary {
+    clip-path: none;
+  }
+}

package/dist/system/_scoped-pairing.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+//#region src/system/_scoped-pairing.ts
+/**
+* Whether the subtree's pairing is a scope's own rather than the root's.
+*
+* A portal mounts on `<body>`, whose `font-family` was computed from the root's
+* pairing, and a computed family does not follow a token. So a portal opened
+* under a scope that names a pairing asks for the family again
+* (`portal.tsx`), and one opened anywhere else leaves it alone. Set by
+* `StageScope` (`_stage-scope.tsx`) for `Preview` and `FontScope`. Its own
+* module, with nothing but React behind it, so the portal can read it without
+* importing the provider it is stamped from.
+*
+* @internal Not part of the public API.
+*/
+const ScopedPairingContext = React.createContext(false);
+//#endregion
+export { ScopedPairingContext };