@cueplusplus/ui 0.20.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @cueplusplus/ui
 
+## 0.20.1
+
+### Patch Changes
+
+- 62ab44c: Four small fixes to the components added in 0.20.0:
+
+  - **`Reveal` no longer flashes visible before the page hydrates.** The server's markup now starts hidden, through a `styles.css` rule that applies only where scripting is on and motion is welcome, so readers without JavaScript and readers who prefer reduced motion still see the content at once.
+  - **`useFrameClock` with `loop={false}` stops scheduling frames** once it reaches its last one.
+  - **`ParticleLogo` deletes a shader that compiled when its partner failed**, rather than leaking it.
+  - **`ParticleLogo`'s still image under `fit="contain"` now fits inside `containFill` of both dimensions**, as the particle field does, so it no longer changes size when motion is reduced.
+
+- fc318ec: Nothing you import changed. The published `package.json` lists two more development dependencies,
+  `css-tree` and `@types/css-tree`, which the library's own test suite uses to check that an
+  arbitrary-value class such as `w-[12pxx]` compiles to CSS a browser keeps. Neither is installed with
+  the package. Two doc comments in `@cueplusplus/ui/system` now count the base font pairings
+  right: fourteen, not twelve.
+- Updated dependencies [fc318ec]
+  - @cueplusplus/tokens@0.20.1
+
 ## 0.20.0
 
 ### Minor Changes

package/dist/brand/particle-logo.js

@@ -40,7 +40,11 @@ function compile(gl, type, source) {
 function build(gl, raster, sampled) {
 	const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
 	const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
-	if (vertex === null || fragment === null) return null;
+	if (vertex === null || fragment === null) {
+		if (vertex !== null) gl.deleteShader(vertex);
+		if (fragment !== null) gl.deleteShader(fragment);
+		return null;
+	}
 	const program = gl.createProgram();
 	gl.attachShader(program, vertex);
 	gl.attachShader(program, fragment);
@@ -426,9 +430,13 @@ const ParticleLogo = React.forwardRef(function ParticleLogo({ src, fit = "logo",
 			alt: "",
 			"aria-hidden": "true",
 			className: "absolute inset-0 m-auto object-contain",
-			style: {
-				height: fit === "logo" ? "26%" : `${containFill * 100}%`,
+			style: fit === "logo" ? {
+				height: "26%",
 				width: "auto"
+			} : {
+				width: `${containFill * 100}%`,
+				height: `${containFill * 100}%`,
+				objectFit: "contain"
 			}
 		}) : null]
 	});

package/dist/layout/reveal.js

@@ -23,9 +23,10 @@ const EASE_OUT = "cubic-bezier(0, 0, 0.58, 1)";
 *   <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 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;
@@ -33,11 +34,11 @@ const Reveal = React.forwardRef(function Reveal({ distance = 28, rootMargin = "-
 		return stagger > 0 ? [...element.querySelectorAll("[data-reveal-item]")] : [element];
 	}, [stagger]);
 	React.useLayoutEffect(() => {
-		if (still || entered.current) return;
-		for (const target of targets()) {
+		if (!still && !entered.current) for (const target of targets()) {
 			target.style.opacity = "0";
 			target.style.transform = `translateY(${distance}px)`;
 		}
+		setMounted(true);
 	}, [
 		still,
 		distance,
@@ -97,7 +98,12 @@ const Reveal = React.forwardRef(function Reveal({ distance = 28, rootMargin = "-
 			else if (ref !== null) ref.current = node;
 		},
 		"data-slot": "reveal",
-		className: cn(className),
+		"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
 	});

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?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

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

@@ -32,6 +32,7 @@ function useFrameClock({ fps = 30, durationInFrames, loop = true, playing = true
 			last = now;
 			const total = Math.floor(elapsed.current * fps / 1e3);
 			setFrame(loop ? total % durationInFrames : Math.min(total, durationInFrames - 1));
+			if (!loop && total >= durationInFrames - 1) return;
 			handle = requestAnimationFrame(step);
 		});
 		const onVisibility = () => {

package/dist/system/theme-registry.d.ts

@@ -41,7 +41,7 @@ declare function useThemes(): readonly ThemeManifest[];
  */
 declare function useDensities(): readonly DensityEntry[];
 /**
- * The font pairings, by the same rule: the base twelve, then the active theme's.
+ * The font pairings, by the same rule: the base fourteen, then the active theme's.
  *
  * @throws If called outside a `<ThemeProvider>`.
  * @example

package/dist/system/theme-registry.js

@@ -68,7 +68,7 @@ function useDensities() {
 	return useRegistry("useDensities", (registry) => registry.densities);
 }
 /**
-* The font pairings, by the same rule: the base twelve, then the active theme's.
+* The font pairings, by the same rule: the base fourteen, then the active theme's.
 *
 * @throws If called outside a `<ThemeProvider>`.
 * @example

package/manifest/components/reveal.json

@@ -66,7 +66,9 @@
   "parts": [],
   "variants": {},
   "defaultVariants": {},
-  "tokensUsed": [],
+  "tokensUsed": [
+    "--cue-reveal-distance"
+  ],
   "summary": "Content that rises into place the first time it scrolls into view, once — cueplusplus.com's section entrance, with an optional stagger over the items you mark.",
   "examples": [
     {

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "command",
@@ -38,7 +38,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "ea5e034356318b8bf63b03dd1e4c263472dce4971c446df9d8c22105c13ebbff"
+    "sha256": "29cf733428fc4919b808a76fd8740364aa316c9ad86e45e985754417fc142eaa"
   },
   "systemApis": [
     {
@@ -4218,7 +4218,7 @@
       "mdUrl": "/docs/components/reveal.md",
       "jsonUrl": "/r/components/reveal.json",
       "path": "./components/reveal.json",
-      "sha256": "27a4037baaaea249ff9e7724b0febd645747267ca60b864140c8be050e303cba"
+      "sha256": "404391de89464afe62311ed18e69df69f0207b4327b57760f91504b94b81c816"
     },
     {
       "name": "Sidebar",
@@ -5213,12 +5213,12 @@
       "importPath": "@cueplusplus/ui",
       "peerDependencies": [],
       "clientOnly": true,
-      "description": "The font pairings, by the same rule: the base twelve, then the active theme's.",
+      "description": "The font pairings, by the same rule: the base fourteen, then the active theme's.",
       "signature": "(): readonly FontEntry[]",
       "params": [],
       "returns": "",
       "throws": "If called outside a `<ThemeProvider>`.",
-      "summary": "The font pairings, by the same rule: the base twelve, then the active theme's.",
+      "summary": "The font pairings, by the same rule: the base fourteen, then the active theme's.",
       "examples": [
         {
           "title": "Usage",

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/tokens",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "themes": [
     {
       "name": "command",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
   "license": "MIT",
   "type": "module",
@@ -145,8 +145,8 @@
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
-    "@cueplusplus/tokens": "0.20.0",
-    "@cueplusplus/theme-base": "^1.3.0"
+    "@cueplusplus/theme-base": "^1.3.0",
+    "@cueplusplus/tokens": "0.20.1"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.16",
@@ -234,6 +234,7 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.4",
+    "@types/css-tree": "^3.2.0",
     "@types/culori": "^4.0.1",
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.0",
@@ -241,6 +242,7 @@
     "@vitejs/plugin-react": "^6.0.5",
     "@xyflow/react": "^12.11.3",
     "anser": "^2.3.5",
+    "css-tree": "^3.2.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "eslint": "^9.17.0",
@@ -260,10 +262,10 @@
     "tsdown": "0.22.14",
     "typescript": "^5.7.0",
     "vitest": "^4.1.10",
-    "@repo/docgen": "0.0.0",
+    "@repo/eslint-config": "0.0.0",
     "@cueplusplus/theme-tools": "1.2.0",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "@repo/docgen": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "scripts": {
     "build": "pnpm run check:manifest && tsdown",