shelving 1.218.1 → 1.219.1

package/package.json

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

package/ui/block/Card.d.ts

@@ -1,18 +1,24 @@
 import type { ReactElement, ReactNode } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
-export interface CardProps extends ClickableProps {
+import { type ColorVariants } from "../misc/Color.js";
+import { type Status } from "../misc/Status.js";
+export interface CardProps extends ClickableProps, ColorVariants {
     children?: ReactNode;
     /** Constrain the card to narrow width (defaults to full-width). */
     narrow?: boolean | undefined;
     /** Constrain the card to wide width (defaults to full-width). */
     wide?: boolean | undefined;
+    /** Status colour for the card (e.g. `"error"`, `"success"`). */
+    status?: Status | undefined;
 }
 /**
  * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
+ * - Accepts a `status` colour and raw `ColorVariants` — the card styles the box; lay out its contents however the use case needs.
  *
  * @example <Card><Subheading>Static</Subheading></Card>
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
+ * @example <Card status="error"><StatusIcon status="error" xxlarge /><Subheading>Not found</Subheading></Card>
  */
-export declare function Card({ children, href, onClick, title, ...props }: CardProps): ReactElement;
+export declare function Card({ children, href, onClick, title, status, ...props }: CardProps): ReactElement;

package/ui/block/Card.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.js";
+import { getColorClass } from "../misc/Color.js";
+import { getStatusClass } from "../misc/Status.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import CARD_CSS from "./Card.module.css";
 /**
  * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
+ * - Accepts a `status` colour and raw `ColorVariants` — the card styles the box; lay out its contents however the use case needs.
  *
  * @example <Card><Subheading>Static</Subheading></Card>
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
+ * @example <Card status="error"><StatusIcon status="error" xxlarge /><Subheading>Not found</Subheading></Card>
  */
-export function Card({ children, href, onClick, title = "Open", ...props }) {
+export function Card({ children, href, onClick, title = "Open", status, ...props }) {
     const overlay = (href || onClick) && _jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: CARD_CSS.overlay });
-    return (_jsxs("article", { className: getModuleClass(CARD_CSS, "card", props), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
+    return (_jsxs("article", { className: getClass(getModuleClass(CARD_CSS, "card", props), //
+        status && getStatusClass(status), // Cards can have status colours.
+        getColorClass(props)), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
 }

package/ui/block/Card.tsx

@@ -1,9 +1,11 @@
 import type { ReactElement, ReactNode } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.js";
+import { type ColorVariants, getColorClass } from "../misc/Color.js";
+import { getStatusClass, type Status } from "../misc/Status.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import CARD_CSS from "./Card.module.css";
 
-export interface CardProps extends ClickableProps {
+export interface CardProps extends ClickableProps, ColorVariants {
 	children?: ReactNode;
 
 	/** Constrain the card to narrow width (defaults to full-width). */
@@ -11,20 +13,31 @@ export interface CardProps extends ClickableProps {
 
 	/** Constrain the card to wide width (defaults to full-width). */
 	wide?: boolean | undefined;
+
+	/** Status colour for the card (e.g. `"error"`, `"success"`). */
+	status?: Status | undefined;
 }
 
 /**
  * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
+ * - Accepts a `status` colour and raw `ColorVariants` — the card styles the box; lay out its contents however the use case needs.
  *
  * @example <Card><Subheading>Static</Subheading></Card>
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
+ * @example <Card status="error"><StatusIcon status="error" xxlarge /><Subheading>Not found</Subheading></Card>
  */
-export function Card({ children, href, onClick, title = "Open", ...props }: CardProps): ReactElement {
+export function Card({ children, href, onClick, title = "Open", status, ...props }: CardProps): ReactElement {
 	const overlay = (href || onClick) && <Clickable title={title} href={href} onClick={onClick} {...props} className={CARD_CSS.overlay} />;
 	return (
-		<article className={getModuleClass(CARD_CSS, "card", props)}>
+		<article
+			className={getClass(
+				getModuleClass(CARD_CSS, "card", props), //
+				status && getStatusClass(status), // Cards can have status colours.
+				getColorClass(props), // Cards can also have raw colour overrides.
+			)}
+		>
 			{overlay}
 			{overlay ? <div>{children}</div> : children}
 		</article>

package/ui/block/Flex.module.css

@@ -62,7 +62,8 @@
 	&& > * {
 		margin: 0; /* No margins on children (high specificity). */
 	}
-	&& > [data-slot="icon"] {
+	/* Low-precedence default — `:where()` keeps specificity at zero so an icon's own size variant (e.g. `<StatusIcon large>`) can override it. */
+	:where(& > [data-slot="icon"]) {
 		inline-size: var(--elements-size-icon, var(--size-icon));
 		block-size: var(--elements-size-icon, var(--size-icon));
 		flex: none;

package/ui/block/README.md

@@ -41,6 +41,8 @@ import { Card, Paragraph, Subheading } from "shelving/ui";
 
 `href` turns the card into a navigable overlay. Real interactive elements inside (like inline `<Link>` components) stay clickable via `position: relative; z-index: 2` rules in the stylesheet.
 
+`<Card>` also accepts a `status` colour and raw `ColorVariants` — e.g. `<Card status="error">` for a prominent error panel. The card styles the box; compose its contents however the use case needs.
+
 ### Structured page section
 
 ```tsx

package/ui/misc/Catcher.d.ts

@@ -40,6 +40,6 @@ export interface ErrorNoticeProps extends ErrorComponentProps {
 export declare function ErrorNotice({ reason }: ErrorNoticeProps): ReactElement;
 export interface ErrorPageProps extends ErrorComponentProps {
 }
-/** Output a `<Page>` with a `<Notice>` for an unknown error reason. */
+/** Output a `<Page>` with an error `<Card>` for an unknown error reason. */
 export declare function ErrorPage({ reason }: ErrorPageProps): ReactElement;
 export {};

package/ui/misc/Catcher.js

@@ -2,10 +2,14 @@ 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 { Flex } from "../block/Flex.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 { StatusIcon } from "./StatusIcon.js";
 const RetryContext = createContext(undefined);
 RetryContext.displayName = "RetryContext";
 const RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
@@ -51,7 +55,8 @@ export function ErrorNotice({ reason }) {
     const message = getMessage(reason) ?? "Unknown error";
     return (_jsxs(Notice, { status: "error", children: [_jsx("p", { children: message }), _jsx(RetryButton, { small: true, fit: true })] }));
 }
-/** Output a `<Page>` with a `<Notice>` for an unknown error reason. */
+/** Output a `<Page>` with an error `<Card>` for an unknown error reason. */
 export function ErrorPage({ reason }) {
-    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsx(ErrorNotice, { reason: reason }) }) }));
+    const message = getMessage(reason) ?? "Unknown error";
+    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsx(Card, { status: "error", children: _jsxs(Subheading, { children: [_jsxs(Flex, { left: true, children: [_jsx(StatusIcon, { status: "error", xlarge: true }), " ", message] }), _jsx(RetryButton, {})] }) }) }) }));
 }

package/ui/misc/Catcher.tsx

@@ -2,10 +2,14 @@ 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 { Flex } from "../block/Flex.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 { StatusIcon } from "./StatusIcon.js";
 
 const RetryContext = createContext<Callback | undefined>(undefined);
 RetryContext.displayName = "RetryContext";
@@ -102,12 +106,20 @@ export function ErrorNotice({ reason }: ErrorNoticeProps): ReactElement {
 
 export interface ErrorPageProps extends ErrorComponentProps {}
 
-/** Output a `<Page>` with a `<Notice>` for an unknown error reason. */
+/** Output a `<Page>` with an error `<Card>` for an unknown error reason. */
 export function ErrorPage({ reason }: ErrorPageProps): ReactElement {
+	const message = getMessage(reason) ?? "Unknown error";
 	return (
 		<Page title="Error">
 			<CenteredLayout>
-				<ErrorNotice reason={reason} />
+				<Card status="error">
+					<Subheading>
+						<Flex left>
+							<StatusIcon status="error" xlarge /> {message}
+						</Flex>
+						<RetryButton />
+					</Subheading>
+				</Card>
 			</CenteredLayout>
 		</Page>
 	);

package/util/equal.js

@@ -121,7 +121,7 @@ export function isArrayWith(left, right) {
 }
 /** Is unknown value `left` not an array or does not include `right`? */
 export function notArrayWith(left, right) {
-    return !notArrayWith(left, right);
+    return !isArrayWith(left, right);
 }
 /**
  * Are two objects equal based on their own props?

package/util/number.js

@@ -26,7 +26,7 @@ export function getNumber(value) {
     if (typeof value === "string")
         return getNumber(Number.parseFloat(value.replace(NOT_NUMERIC_REGEXP, "")));
     if (value instanceof Date)
-        getNumber(value.getTime());
+        return getNumber(value.getTime());
 }
 const NOT_NUMERIC_REGEXP = /[^0-9-.]/g;
 /**