shelving 1.285.2 → 1.285.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.285.2",
+	"version": "1.285.4",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -42,6 +42,7 @@
 	"description": "Toolkit for using data in JavaScript.",
 	"engineStrict": true,
 	"engines": {
+		"bun": ">=1.4.0",
 		"node": ">=16.0.0"
 	},
 	"keywords": [

package/ui/form/Progress.d.ts

@@ -3,7 +3,6 @@ import { type Nullish } from "../../util/null.js";
 import { type ColorVariants } from "../style/Color.js";
 import { type StatusVariants } from "../style/Status.js";
 import type { ClassProps } from "../util/props.js";
-import "./Progress.css";
 /**
  * Props for `Progress`, a continuous horizontal progress bar.
  *

package/ui/form/Progress.js

@@ -4,7 +4,6 @@ import { notNullish } from "../../util/null.js";
 import { getColorClass } from "../style/Color.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import "./Progress.css";
 import styles from "./Progress.module.css";
 /**
  * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).

package/ui/form/Progress.module.css

@@ -39,6 +39,17 @@
 		background: var(--progress-color, var(--tint-50));
 	}
 
+	/* Conveyor the block fully off the left edge, across, and fully off the right — then it loops back round unseen. `-70%`/`170%` fully clear a `40%`-wide block, and `linear` timing keeps a constant speed with no ease-out stall at the ends. */
+	@keyframes progress-flow {
+		from {
+			background-position: -70% 0;
+		}
+
+		to {
+			background-position: 170% 0;
+		}
+	}
+
 	/* Indeterminate — a native `<progress>` with no `value`, so a solid block of fill colour slides across the track on a loop for a task of unknown duration. */
 	.progress:indeterminate,
 	.prose progress:indeterminate {
@@ -47,7 +58,12 @@
 		background-image: linear-gradient(90deg, var(--progress-color, var(--tint-50)), var(--progress-color, var(--tint-50)));
 		background-repeat: no-repeat;
 		background-size: 40% 100%;
-		animation: progress-flow var(--progress-duration, 1.5s) linear infinite;
+
+		/* Longhands, not the `animation` shorthand: Bun rewrites `animation-name` to the hashed keyframes name but leaves a shorthand that holds a `var()` untouched. See dhoulb/shelving#259. */
+		animation-name: progress-flow;
+		animation-duration: var(--progress-duration, 1.5s);
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
 	}
 
 	/* The native track/fill pseudo-elements would paint over the sliding block, so make them transparent and let the element's own background show through. */
@@ -65,5 +81,3 @@
 
 	/* No `prefers-reduced-motion` override — movement is the indeterminate bar's only signal, so freezing it reads as a stalled determinate bar rather than "working". The animation is a small element-sized loop, not a large vestibular-trigger transition. */
 }
-
-/* The `progress-flow` keyframes referenced above live in the sibling non-module `Progress.css` — see the note there for why they can't be defined in this module file. */

package/ui/form/Progress.tsx

@@ -5,7 +5,6 @@ import { type ColorVariants, getColorClass } from "../style/Color.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps } from "../util/props.js";
-import "./Progress.css";
 import styles from "./Progress.module.css";
 
 /**

package/ui/transition/{CollapseTransition.module.css → CollapseTransition.css}

@@ -1,3 +1,4 @@
+/* Global CSS, not a CSS module. Bun hashes a class inside `::view-transition-*()` from the file basename, but hashes the exported names from the file path, so a module-scoped view-transition class can never match the name that JS passes to `view-transition-class`. Keep these names global until Bun fixes this — see dhoulb/shelving#325. */
 ::view-transition-image-pair(.collapse) {
 	overflow: hidden;
 }

package/ui/transition/CollapseTransition.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import "./CollapseTransition.css";
 import { type TransitionProps } from "./Transition.js";
 /**
  * Props for the `CollapseTransition` component — the shared transition variant props.

package/ui/transition/CollapseTransition.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
-import COLLAPSE_CSS from "./CollapseTransition.module.css";
+import "./CollapseTransition.css";
 import { Transition } from "./Transition.js";
-const COLLAPSE_CLASS = getModuleClass(COLLAPSE_CSS, "collapse");
 /**
  * Transition that collapses its children in and out by animating their size.
  *
@@ -10,5 +8,5 @@ const COLLAPSE_CLASS = getModuleClass(COLLAPSE_CSS, "collapse");
  * @see https://shelving.cc/ui/CollapseTransition
  */
 export function CollapseTransition(props) {
-    return _jsx(Transition, { default: COLLAPSE_CLASS, ...props });
+    return _jsx(Transition, { default: "collapse", ...props });
 }

package/ui/transition/CollapseTransition.tsx

@@ -1,10 +1,7 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
-import COLLAPSE_CSS from "./CollapseTransition.module.css";
+import "./CollapseTransition.css";
 import { Transition, type TransitionProps } from "./Transition.js";
 
-const COLLAPSE_CLASS = getModuleClass(COLLAPSE_CSS, "collapse");
-
 /**
  * Props for the `CollapseTransition` component — the shared transition variant props.
  *
@@ -19,5 +16,5 @@ export interface CollapseTransitionProps extends TransitionProps {}
  * @see https://shelving.cc/ui/CollapseTransition
  */
 export function CollapseTransition(props: CollapseTransitionProps): ReactElement {
-	return <Transition default={COLLAPSE_CLASS} {...props} />;
+	return <Transition default="collapse" {...props} />;
 }

package/ui/transition/FadeTransition.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import "./FadeTransition.css";
 import { type TransitionProps } from "./Transition.js";
 /**
  * Props for the `FadeTransition` component — the shared transition variant props.

package/ui/transition/FadeTransition.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import "./FadeTransition.css";
 import { Transition } from "./Transition.js";
 /**
  * Transition that fades its children in and out by animating their opacity.

package/ui/transition/FadeTransition.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import "./FadeTransition.css";
 import { Transition, type TransitionProps } from "./Transition.js";
 
 /**

package/ui/transition/HorizontalTransition.md

@@ -4,7 +4,7 @@ A direction-aware `<Transition>` preset that slides its children horizontally
 
 **Things to know:**
 
-- Defaults to `slideRight`; with the type set to `"forward"` it slides right (`slideRight`), and to `"back"` it slides left (`slideLeft`).
+- Slides right by default and when the type is `"forward"`; slides left when the type is `"back"`.
 - Set the direction with `setTransitionType("forward" | "back")` inside a `startTransition()` callback before navigating — see `<Transition>`.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
 - Under `prefers-reduced-motion: reduce` the slide distance is forced to `0`, so the transition degrades to an opacity-only crossfade with no positional movement (large viewport-level slides are exactly what the preference exists to suppress).

package/ui/transition/Transition.css

@@ -0,0 +1,4 @@
+/* Global CSS, not a CSS module. Bun hashes a class inside `::view-transition-*()` from the file basename, but hashes the exported names from the file path, so a module-scoped view-transition class can never match the name that JS passes to `view-transition-class`. Keep these names global until Bun fixes this — see dhoulb/shelving#325. */
+::view-transition-group(.overlay) {
+	z-index: 100;
+}

package/ui/transition/Transition.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement } from "react";
 import type { ChildProps } from "../util/props.js";
+import "./Transition.css";
 /**
  * Variant props shared by every transition component.
  *
@@ -27,7 +28,7 @@ export interface TransitionProps extends ChildProps, TransitionVariants {
  *
  * - Allows known view transition types in `TransitionClasses` (`default`/`forward`/`back`) to be overridden.
  *   - These must correspond to a `::view-transition(.className)` that is set in CSS.
- * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition(.overlay)` from `Transition.css`.
+ * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition-group(.overlay)` from `Transition.css`.
  *
  * @kind component
  * @returns A `<ViewTransition>` element wrapping the children.

package/ui/transition/Transition.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="react/canary" />
 import { ViewTransition } from "react";
-import { getClass, getModuleClass } from "../util/css.js";
-import TRANSITION_CSS from "./Transition.module.css";
-const TRANSITION_OVERLAY_CLASS = getModuleClass(TRANSITION_CSS, "overlay");
+import { getClass } from "../util/css.js";
+import "./Transition.css";
+// A global class name, not a CSS-module export — see the note in `Transition.css`.
+const TRANSITION_OVERLAY_CLASS = "overlay";
 /**
  * Wrap children in a React View Transition, applying the configured transition classes.
  *
  * - Allows known view transition types in `TransitionClasses` (`default`/`forward`/`back`) to be overridden.
  *   - These must correspond to a `::view-transition(.className)` that is set in CSS.
- * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition(.overlay)` from `Transition.css`.
+ * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition-group(.overlay)` from `Transition.css`.
  *
  * @kind component
  * @returns A `<ViewTransition>` element wrapping the children.

package/ui/transition/Transition.md

@@ -24,11 +24,11 @@ import { Transition } from "shelving/ui";
 ### Overlay
 
 ```tsx
-import { Transition } from "shelving/ui";
+import { FadeTransition } from "shelving/ui";
 
-<Transition default="fade" overlay>
+<FadeTransition overlay>
   <Notification/>
-</Transition>
+</FadeTransition>
 ```
 
 ### Setting the direction with `setTransitionType()`

package/ui/transition/Transition.tsx

@@ -1,10 +1,11 @@
 /// <reference types="react/canary" />
 import { type ReactElement, ViewTransition } from "react";
-import { getClass, getModuleClass } from "../util/css.js";
+import { getClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
-import TRANSITION_CSS from "./Transition.module.css";
+import "./Transition.css";
 
-const TRANSITION_OVERLAY_CLASS = getModuleClass(TRANSITION_CSS, "overlay");
+// A global class name, not a CSS-module export — see the note in `Transition.css`.
+const TRANSITION_OVERLAY_CLASS = "overlay";
 
 /**
  * Variant props shared by every transition component.
@@ -35,7 +36,7 @@ export interface TransitionProps extends ChildProps, TransitionVariants {
  *
  * - Allows known view transition types in `TransitionClasses` (`default`/`forward`/`back`) to be overridden.
  *   - These must correspond to a `::view-transition(.className)` that is set in CSS.
- * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition(.overlay)` from `Transition.css`.
+ * - Supports variant classes, e.g. `<Transition overlay>` applies `::view-transition-group(.overlay)` from `Transition.css`.
  *
  * @kind component
  * @returns A `<ViewTransition>` element wrapping the children.

package/ui/transition/VerticalTransition.md

@@ -4,7 +4,7 @@ A direction-aware `<Transition>` preset that slides its children vertically —
 
 **Things to know:**
 
-- Defaults to `slideDown`; with the type set to `"forward"` it slides down (`slideDown`), and to `"back"` it slides up (`slideUp`).
+- Slides down by default and when the type is `"forward"`; slides up when the type is `"back"`.
 - Set the direction with `setTransitionType("forward" | "back")` inside a `startTransition()` callback before navigating — see `<Transition>`.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
 - Under `prefers-reduced-motion: reduce` the slide distance is forced to `0`, so the transition degrades to an opacity-only crossfade with no positional movement (large viewport-level slides are exactly what the preference exists to suppress).

package/ui/util/css.test.ts

@@ -1,4 +1,7 @@
 import { describe, expect, test } from "bun:test";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
 import { getClass, getModuleClass } from "shelving/ui";
 
 describe("getClass", () => {
@@ -27,3 +30,47 @@ describe("getModuleClass", () => {
 		expect(getModuleClass({ track: "abc123" }, "missing")).toBeUndefined();
 	});
 });
+
+/** Bundle a `.module.css` file with `Bun.build()` and return its CSS-modules exports and the emitted CSS. */
+async function _bundle(path: string): Promise<{ readonly exports: Record<string, string | undefined>; readonly css: string }> {
+	const dir = await mkdtemp(join(tmpdir(), "shelving-css-"));
+	try {
+		const entry = join(dir, "entry.ts");
+		await Bun.write(entry, `export { default as styles } from ${JSON.stringify(path)};\n`);
+		const { success, logs, outputs } = await Bun.build({ entrypoints: [entry], outdir: join(dir, "out"), target: "bun" });
+		if (!success) throw new Error(logs.map(l => l.message).join("\n"));
+		const js = outputs.find(o => o.kind === "entry-point");
+		const css = outputs.find(o => o.path.endsWith(".css"));
+		if (!js || !css) throw new Error("Bundle produced no JS entry or CSS asset");
+		const { styles } = (await import(js.path)) as { styles: Record<string, string | undefined> };
+		return { exports: styles, css: await css.text() };
+	} finally {
+		await rm(dir, { recursive: true, force: true });
+	}
+}
+
+// Bun bundler behaviour the `ui` module depends on, so a Bun change shows up here rather than silently in the browser.
+describe("Bun CSS modules", () => {
+	test("hashes `animation-name` to match its `@keyframes` declaration", async () => {
+		const { css } = await _bundle(join(import.meta.dir, "../form/Progress.module.css"));
+		const name = css.match(/@keyframes (progress-flow_[\w-]+)/)?.[1];
+		expect(name).toBeString();
+		expect(css).toContain(`animation-name: ${name};`);
+	});
+
+	// Canary: Bun hashes a class inside `::view-transition-*()` from the file basename but hashes exports from the path, so the two never match in a real build. When this test fails, Bun has fixed it — move the view-transition classes into their `.module.css` files (see dhoulb/shelving#325).
+	test("does not yet hash a view-transition class to match its export", async () => {
+		const dir = await mkdtemp(join(tmpdir(), "shelving-css-"));
+		try {
+			const path = join(dir, "sub", "canary.module.css");
+			await Bun.write(path, ".plain { color: red; }\n.vt {}\n::view-transition-group(.vt) { z-index: 1; }\n");
+			const { exports, css } = await _bundle(path);
+			expect(exports.plain).toBeString();
+			expect(exports.vt).toBeString();
+			expect(css).toContain(`.${exports.plain}`);
+			expect(css).not.toContain(`(.${exports.vt})`);
+		} finally {
+			await rm(dir, { recursive: true, force: true });
+		}
+	});
+});

package/ui/form/Progress.css

@@ -1,23 +0,0 @@
-/*
-* Keyframes for the `Progress` indeterminate animation.
-*
-* This lives in a plain (non-module) CSS file, not `Progress.module.css`, because Bun's CSS-modules
-* transform renames the `@keyframes` identifier (appends the module hash) but does *not* rewrite the
-* matching `animation` reference, so a keyframes block defined in the module file animates against a
-* name that no longer exists. Keeping the declaration global here leaves the name stable, and the
-* un-rewritten `animation: progress-flow` reference in `Progress.module.css` resolves to it. This
-* mirrors how the `transition` components keep their keyframes in sibling `.css` files.
-*
-* Tracked in dhoulb/shelving#259 (revert once Bun ships the fix for oven-sh/bun#18921).
-*/
-
-/* Conveyor the block fully off the left edge, across, and fully off the right — then it loops back round unseen. `-70%`/`170%` fully clear a `40%`-wide block, and `linear` timing keeps a constant speed with no ease-out stall at the ends. */
-@keyframes progress-flow {
-	from {
-		background-position: -70% 0;
-	}
-
-	to {
-		background-position: 170% 0;
-	}
-}

package/ui/transition/Transition.module.css

@@ -1,3 +0,0 @@
-::view-transition-group(.overlay) {
-	z-index: 100;
-}