shelving 1.262.1 → 1.264.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.262.1",
+	"version": "1.264.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/form/Button.md

@@ -60,6 +60,8 @@ import { getButtonClass } from "shelving/ui";
 | `--button-radius` | Corner radius | `var(--radius-xsmall)` (8px) |
 | `--button-padding` | Inner padding | `var(--space-small)` (12px) |
 | `--button-small-padding` | Inner padding when `small` | `var(--space-xxsmall)` (4px) |
+| `--button-gap` | Gap between icon and label | `var(--space-small)` (12px) |
+| `--button-small-gap` | Gap between icon and label when `small` | `var(--space-xxsmall)` (4px) |
 | `--button-space` | Outer block margin | `var(--space-small)` (12px) |
 | `--button-font` | Font family | `var(--font-body)` |
 | `--button-weight` | Font weight | `var(--weight-strong)` (700) |

package/ui/form/Button.module.css

@@ -28,6 +28,7 @@
 		/* Content */
 		overflow: hidden;
 		word-break: normal;
+		gap: var(--button-gap, var(--space-small));
 		justify-content: center;
 		align-items: center;
 
@@ -61,6 +62,7 @@
 
 		/* Variants */
 		&.small {
+			gap: var(--button-small-gap, var(--space-xxsmall));
 			padding-block: var(--button-small-padding, var(--space-xxsmall));
 			padding-inline: var(--button-small-padding, var(--space-xxsmall));
 		}

package/ui/form/SubmitButton.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import { useStore } from "../../react/useStore.js";
-import { Loading } from "../misc/Loading.js";
+import { LOADING } from "../misc/Loading.js";
 import { getButtonClass } from "./Button.js";
 import { requireForm } from "./FormContext.js";
 /**
@@ -15,6 +15,6 @@ import { requireForm } from "./FormContext.js";
 export function SubmitButton({ children = SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...variants }) {
     const form = requireForm();
     const busy = useStore(form.busy).value;
-    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...variants }), children: busy ? _jsx(Loading, {}) : children }));
+    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...variants }), children: busy ? LOADING : children }));
 }
 const SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));

package/ui/form/SubmitButton.tsx

@@ -1,7 +1,7 @@
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
-import { Loading } from "../misc/Loading.js";
+import { LOADING } from "../misc/Loading.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants, getButtonClass } from "./Button.js";
 import { requireForm } from "./FormContext.js";
@@ -25,7 +25,7 @@ export function SubmitButton({
 	const busy = useStore(form.busy).value;
 	return (
 		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...variants })}>
-			{busy ? <Loading /> : children}
+			{busy ? LOADING : children}
 		</button>
 	);
 }

package/ui/misc/Catcher.d.ts

@@ -73,9 +73,7 @@ export declare function ErrorNotice({ reason }: ErrorProps): ReactElement;
  */
 export declare function PageCatcher({ children }: ChildProps): ReactElement;
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage

package/ui/misc/Catcher.js

@@ -2,15 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { Component, createContext, use } from "react";
 import { getMessage } from "../../util/error.js";
-import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Row } from "../block/Row.js";
-import { Subheading } from "../block/Subheading.js";
 import { Button } from "../form/Button.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
-import { Icon } from "./Icon.js";
 const RetryContext = createContext(undefined);
 RetryContext.displayName = "RetryContext";
 const RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
@@ -82,14 +78,11 @@ export function PageCatcher({ children }) {
     return _jsx(Catcher, { as: ErrorPage, children: children });
 }
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage
  */
 export function ErrorPage({ reason }) {
-    const message = getMessage(reason) ?? "Unknown error";
-    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsxs(Card, { status: "error", children: [_jsx(Subheading, { children: _jsxs(Row, { left: true, children: [_jsx(Icon, { status: "error" }), " ", message] }) }), _jsx(RetryButton, {})] }) }) }));
+    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsx(ErrorNotice, { reason: reason }) }) }));
 }

package/ui/misc/Catcher.tsx

@@ -2,16 +2,12 @@ import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { Component, createContext, type ReactElement, type ReactNode, use } from "react";
 import { getMessage } from "../../util/error.js";
 import type { Callback } from "../../util/function.js";
-import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Row } from "../block/Row.js";
-import { Subheading } from "../block/Subheading.js";
 import { Button, type ButtonVariants } from "../form/Button.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
 import type { ChildProps, OptionalChildProps } from "../util/props.js";
-import { Icon } from "./Icon.js";
 
 const RetryContext = createContext<Callback | undefined>(undefined);
 RetryContext.displayName = "RetryContext";
@@ -137,26 +133,16 @@ export function PageCatcher({ children }: ChildProps): ReactElement {
 }
 
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage
  */
 export function ErrorPage({ reason }: ErrorProps): ReactElement {
-	const message = getMessage(reason) ?? "Unknown error";
 	return (
 		<Page title="Error">
 			<CenteredLayout>
-				<Card status="error">
-					<Subheading>
-						<Row left>
-							<Icon status="error" /> {message}
-						</Row>
-					</Subheading>
-					<RetryButton />
-				</Card>
+				<ErrorNotice reason={reason} />
 			</CenteredLayout>
 		</Page>
 	);

package/ui/misc/Icon.module.css

@@ -5,9 +5,11 @@
 @layer defaults {
 	.icon {
 		/* Box */
+		display: block;
 		width: 1em;
 		height: 1em;
-		margin: 0;
+		margin-inline: auto;
+		margin-block: 0;
 		padding: 0;
 
 		/* Style */

package/ui/misc/Loading.d.ts

@@ -1,26 +1,22 @@
 import type { ReactElement } from "react";
-declare const _componentProps: unique symbol;
 /**
- * Props for `<Loading>` — takes no props (branded empty interface).
+ * Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.
  *
- * @see https://shelving.cc/ui/LoadingProps
- */
-export interface LoadingProps {
-    readonly [_componentProps]?: never;
-}
-/**
- * Animated spinner SVG used as a loading indicator.
- *
- * - Self-contained inline SVG with a rotating indicator arc; inherits its colour and size from the surrounding text.
+ * - Self-contained inline SVG; the spin is driven by an inline SMIL `<animateTransform>`.
+ * - The track and indicator paint from scaled steps of the current tint ladder (`--tint-70` / `--tint-80`), so their colour follows whatever tint `<Icon>` (or an ancestor) sets.
+ * - Takes only `className` like the Heroicons, so it slots straight into `<Icon icon={Loading} />` to pick up icon sizing, colour, and centring.
  *
  * @kind component
  * @see https://shelving.cc/ui/Loading
  */
-export declare function Loading(): ReactElement;
+export declare function Loading({ className }: {
+    className?: string | undefined;
+}): ReactElement;
 /**
- * Shared `<Loading>` element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ * Shared loading spinner element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ *
+ * - A `<Loading>` rendered through `<Icon>`, so it picks up icon sizing, colour, and centring.
  *
  * @see https://shelving.cc/ui/LOADING
  */
 export declare const LOADING: import("react").JSX.Element;
-export {};

package/ui/misc/Loading.js

@@ -1,20 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
-import styles from "./Loading.module.css";
+import { Icon } from "./Icon.js";
+import LOADING_CSS from "./Loading.module.css";
+const LOADING_TRACK_CLASS = getModuleClass(LOADING_CSS, "track");
+const LOADING_INDICATOR_CLASS = getModuleClass(LOADING_CSS, "indicator");
 /**
- * Animated spinner SVG used as a loading indicator.
+ * Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.
  *
- * - Self-contained inline SVG with a rotating indicator arc; inherits its colour and size from the surrounding text.
+ * - Self-contained inline SVG; the spin is driven by an inline SMIL `<animateTransform>`.
+ * - The track and indicator paint from scaled steps of the current tint ladder (`--tint-70` / `--tint-80`), so their colour follows whatever tint `<Icon>` (or an ancestor) sets.
+ * - Takes only `className` like the Heroicons, so it slots straight into `<Icon icon={Loading} />` to pick up icon sizing, colour, and centring.
  *
  * @kind component
  * @see https://shelving.cc/ui/Loading
  */
-export function Loading() {
-    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: getModuleClass(styles, "spinner"), "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: getModuleClass(styles, "track"), cx: "12", cy: "12", r: "9", pathLength: "100" }), _jsxs("g", { children: [_jsx("animateTransform", { attributeName: "transform", attributeType: "xml", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.5s", repeatCount: "indefinite" }), _jsx("circle", { className: getModuleClass(styles, "indicator"), cx: "12", cy: "12", r: "9", pathLength: "100" })] })] }));
+export function Loading({ className }) {
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: className, "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: LOADING_TRACK_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" }), _jsxs("g", { children: [_jsx("animateTransform", { attributeName: "transform", attributeType: "xml", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.5s", repeatCount: "indefinite" }), _jsx("circle", { className: LOADING_INDICATOR_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" })] })] }));
 }
 /**
- * Shared `<Loading>` element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ * Shared loading spinner element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ *
+ * - A `<Loading>` rendered through `<Icon>`, so it picks up icon sizing, colour, and centring.
  *
  * @see https://shelving.cc/ui/LOADING
  */
-export const LOADING = _jsx(Loading, {}, "loading");
+export const LOADING = _jsx(Icon, { icon: Loading }, "loading");

package/ui/misc/Loading.md

@@ -1,18 +1,24 @@
 # Loading
 
-An animated SVG spinner used as a loading indicator. Self-contained inline SVG with a rotating indicator arc that inherits its colour and size from the surrounding text.
+An animated SVG spinner shaped like a Heroicon — a faint full track plus a rotating indicator arc. It takes only `className`, so it behaves like any other icon and is meant to be styled by `<Icon>`.
 
 **Things to know:**
 
-- Takes no props.
-- `LOADING` is a pre-keyed `<Loading />` element with a stable `key` — drop it straight into `Suspense` fallbacks and lists to avoid unnecessary reconciliation overhead.
+- The track and indicator paint from scaled steps of the current tint ladder (`--tint-70` / `--tint-80`), so the faint track and brighter indicator both follow whatever tint `<Icon>` (or an ancestor) sets, correctly shaded.
+- The spin is driven by an inline SMIL `<animateTransform>`, so it needs no CSS to animate.
+- Feed it to `<Icon>` to size, colour, and centre it: `<Icon icon={Loading} size="large" status="loading" />`. `<Icon status="loading">` already uses it automatically.
+- `LOADING` is a pre-keyed `<Icon icon={Loading} />` element with a stable `key` — drop it straight into `Suspense` fallbacks and lists to avoid unnecessary reconciliation overhead.
 
 ## Usage
 
 ```tsx
-import { Loading, LOADING } from "shelving/ui";
+import { Icon, LOADING, Loading } from "shelving/ui";
 
-<Loading />
+// Styled through <Icon>, like any other icon.
+<Icon icon={Loading} size="large" />
+
+// <Icon status="loading"> uses it for you.
+<Icon status="loading" />
 
 // Pre-keyed constant for fallbacks and lists.
 <Suspense fallback={LOADING}>
@@ -21,3 +27,16 @@ import { Loading, LOADING } from "shelving/ui";
 
 {busy ? LOADING : children}
 ```
+
+## Styling
+
+Size, centring, and overall colour come from wrapping it in `<Icon>` — its `--icon-color` / `--icon-size` hooks and `color` / `status` / `size` / `tint` variants drive the spinner (see the `Icon` Styling section). On top of that, the two arcs expose their own hooks:
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--loading-track` | Track (background arc) stroke | `var(--tint-70)` |
+| `--loading-indicator` | Indicator (moving arc) stroke | `var(--tint-80)` |
+| `--loading-stroke-width` | Stroke width of both arcs | `2.5` |
+| `--loading-length` | `stroke-dasharray` of the indicator arc | `28 100` |
+
+**Global tokens it reads** — the tint-ladder steps `--tint-70` / `--tint-80` for the arc strokes (rebound by the `color` / `status` / `tint` variants on the wrapping `<Icon>`).

package/ui/misc/Loading.module.css

@@ -1,25 +1,18 @@
 @import "../style/layers.css";
-@import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
 
 @layer components {
-	.spinner {
-		inline-size: var(--loading-size, var(--size-icon));
-		block-size: var(--loading-size, var(--size-icon));
-		flex: none;
-	}
-
 	.track {
 		fill: none;
-		stroke: var(--loading-color, var(--tint-70));
+		stroke: var(--loading-track, var(--tint-70));
 		stroke-width: var(--loading-stroke-width, 2.5);
 	}
 
 	.indicator {
 		fill: none;
-		stroke: var(--loading-fill, var(--tint-80));
+		stroke: var(--loading-indicator, var(--tint-80));
 		stroke-width: var(--loading-stroke-width, 2.5);
 		stroke-linecap: round;
-		stroke-dasharray: var(--loading-indicator-length, 28 100);
+		stroke-dasharray: var(--loading-length, 28 100);
 	}
 }

package/ui/misc/Loading.tsx

@@ -1,37 +1,26 @@
 import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
-import styles from "./Loading.module.css";
+import { Icon } from "./Icon.js";
+import LOADING_CSS from "./Loading.module.css";
 
-declare const _componentProps: unique symbol;
+const LOADING_TRACK_CLASS = getModuleClass(LOADING_CSS, "track");
+const LOADING_INDICATOR_CLASS = getModuleClass(LOADING_CSS, "indicator");
 
 /**
- * Props for `<Loading>` — takes no props (branded empty interface).
+ * Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.
  *
- * @see https://shelving.cc/ui/LoadingProps
- */
-export interface LoadingProps {
-	readonly [_componentProps]?: never;
-}
-
-/**
- * Animated spinner SVG used as a loading indicator.
- *
- * - Self-contained inline SVG with a rotating indicator arc; inherits its colour and size from the surrounding text.
+ * - Self-contained inline SVG; the spin is driven by an inline SMIL `<animateTransform>`.
+ * - The track and indicator paint from scaled steps of the current tint ladder (`--tint-70` / `--tint-80`), so their colour follows whatever tint `<Icon>` (or an ancestor) sets.
+ * - Takes only `className` like the Heroicons, so it slots straight into `<Icon icon={Loading} />` to pick up icon sizing, colour, and centring.
  *
  * @kind component
  * @see https://shelving.cc/ui/Loading
  */
-export function Loading(): ReactElement {
+export function Loading({ className }: { className?: string | undefined }): ReactElement {
 	return (
-		<svg
-			aria-hidden="true"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			className={getModuleClass(styles, "spinner")}
-			data-slot="icon"
-		>
+		<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className={className} data-slot="icon">
 			<title>Loading...</title>
-			<circle className={getModuleClass(styles, "track")} cx="12" cy="12" r="9" pathLength="100" />
+			<circle className={LOADING_TRACK_CLASS} cx="12" cy="12" r="9" pathLength="100" />
 			<g>
 				<animateTransform
 					attributeName="transform"
@@ -42,15 +31,17 @@ export function Loading(): ReactElement {
 					dur="0.5s"
 					repeatCount="indefinite"
 				/>
-				<circle className={getModuleClass(styles, "indicator")} cx="12" cy="12" r="9" pathLength="100" />
+				<circle className={LOADING_INDICATOR_CLASS} cx="12" cy="12" r="9" pathLength="100" />
 			</g>
 		</svg>
 	);
 }
 
 /**
- * Shared `<Loading>` element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ * Shared loading spinner element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
+ *
+ * - A `<Loading>` rendered through `<Icon>`, so it picks up icon sizing, colour, and centring.
  *
  * @see https://shelving.cc/ui/LOADING
  */
-export const LOADING = <Loading key="loading" />;
+export const LOADING = <Icon icon={Loading} key="loading" />;

package/ui/notice/Message.d.ts

@@ -17,10 +17,3 @@ export interface MessageProps extends BlockVariants, StatusVariants, ChildProps
  * @see https://shelving.cc/ui/Message
  */
 export declare function Message({ children, ...props }: MessageProps): import("react").JSX.Element;
-/**
- * Shared loading `<Message>` element containing the `<Loading>` spinner.
- *
- * @example return isLoading ? LOADING_MESSAGE : <Message>{text}</Message>;
- * @see https://shelving.cc/ui/LOADING_MESSAGE
- */
-export declare const LOADING_MESSAGE: import("react").JSX.Element;

package/ui/notice/Message.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LOADING } from "../misc/Loading.js";
 import { getBlockClass } from "../style/Block.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -18,10 +17,3 @@ export function Message({ children, ...props }) {
     return (_jsx("p", { role: status === "error" || status === "danger" ? "alert" : "status", className: getClass(MESSAGE_CLASS, //
         getBlockClass(props), getStatusClass(props)), children: children }));
 }
-/**
- * Shared loading `<Message>` element containing the `<Loading>` spinner.
- *
- * @example return isLoading ? LOADING_MESSAGE : <Message>{text}</Message>;
- * @see https://shelving.cc/ui/LOADING_MESSAGE
- */
-export const LOADING_MESSAGE = _jsx(Message, { status: "loading", children: LOADING });

package/ui/notice/Message.tsx

@@ -1,4 +1,3 @@
-import { LOADING } from "../misc/Loading.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -37,11 +36,3 @@ export function Message({ children, ...props }: MessageProps) {
 		</p>
 	);
 }
-
-/**
- * Shared loading `<Message>` element containing the `<Loading>` spinner.
- *
- * @example return isLoading ? LOADING_MESSAGE : <Message>{text}</Message>;
- * @see https://shelving.cc/ui/LOADING_MESSAGE
- */
-export const LOADING_MESSAGE = <Message status="loading">{LOADING}</Message>;