shelving 1.264.0 → 1.264.2

package/ui/block/Video.tsx

@@ -1,10 +1,9 @@
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, type ReactElement, useEffect, useRef, useState } from "react";
+import { type ReactElement, useRef } from "react";
 import { getBlockClass } from "../style/Block.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
+import type { OptionalChildProps } from "../util/props.js";
 import VIDEO_CSS from "./Video.module.css";
 
 const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
@@ -16,31 +15,10 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
  */
 export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {}
 
-/**
- * Props for `VideoButtons` — `children` plus an optional `left` alignment flag.
- *
- * @see https://shelving.cc/ui/VideoButtonsProps
- */
-export interface VideoButtonsProps extends ChildProps {
-	left?: boolean;
-}
-
-/**
- * Props for `VideoButton` — `children` plus optional `title`, `onClick`, `danger`, and `disabled`.
- *
- * @see https://shelving.cc/ui/VideoButtonProps
- */
-export interface VideoButtonProps extends ChildProps {
-	title?: string | undefined;
-	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-	danger?: boolean;
-	disabled?: boolean;
-}
-
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
@@ -61,77 +39,3 @@ export function Video({ children, ...props }: VideoProps): ReactElement {
 		</figure>
 	);
 }
-
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export function VideoButtons({ children, ...variants }: VideoButtonsProps) {
-	return <div className={getModuleClass(VIDEO_CSS, "buttons", variants)}>{children}</div>;
-}
-
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement {
-	return (
-		<button type="button" onClick={onClick} className={getModuleClass(VIDEO_CSS, "button", variants)} title={title} disabled={disabled}>
-			{children}
-		</button>
-	);
-}
-
-declare const _fullscreenVideoButtonProps: unique symbol;
-
-/**
- * Props for `FullscreenVideoButton` — an empty marker interface (the component takes no props).
- *
- * @see https://shelving.cc/ui/FullscreenVideoButtonProps
- */
-export interface FullscreenVideoButtonProps {
-	readonly [_fullscreenVideoButtonProps]?: never;
-}
-
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export function FullscreenVideoButton(): ReactElement | null {
-	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
-
-	useEffect(() => {
-		const onChange = () => setFull(!!document.fullscreenElement);
-		document.addEventListener("fullscreenchange", onChange);
-		return () => document.removeEventListener("fullscreenchange", onChange);
-	});
-
-	if (!document.fullscreenEnabled) return null;
-
-	return (
-		<VideoButton
-			title={isFull ? "Exit full screen mode" : "Enter full screen mode"}
-			onClick={({ currentTarget }) => {
-				if (document.fullscreenElement) {
-					document.exitFullscreen();
-				} else {
-					const parent = currentTarget.closest("figure, video");
-					if (parent) parent.requestFullscreen();
-				}
-			}}
-		>
-			{isFull ? <ArrowsPointingInIcon /> : <ArrowsPointingOutIcon />}
-		</VideoButton>
-	);
-}

package/ui/{form → button}/Button.d.ts

@@ -28,7 +28,12 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, Typography
  * @see https://shelving.cc/ui/getButtonClass
  */
 export declare function getButtonClass(variants: ButtonVariants): string;
-interface ButtonProps extends ButtonVariants, ClickableProps {
+/**
+ * Component props for a `<Button>` component.
+ *
+ * @see https://shelving.cc/ui/ButtonProps
+ */
+export interface ButtonProps extends ButtonVariants, ClickableProps {
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
@@ -39,4 +44,3 @@ interface ButtonProps extends ButtonVariants, ClickableProps {
  * @see https://shelving.cc/ui/Button
  */
 export declare function Button(props: ButtonProps): ReactElement;
-export {};

package/ui/{form → button}/Button.md

@@ -46,11 +46,10 @@ import { getButtonClass } from "shelving/ui";
 
 ## Styling
 
-`Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; move `--button-tint` to recolour the whole button, or use a per-property hook for one change.
+`Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; apply `color=` / `status=` (on the button or an ancestor scope) to recolour the whole button, or use a per-property hook for one change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--button-tint` | Tint anchor for the button scope | `inherit` (flows from `color=` / `status=` / parent) |
 | `--button-background` | Surface fill | `var(--tint-90)` |
 | `--button-hover-background` | Surface fill on hover / focus | `var(--tint-95)` |
 | `--button-hover-border` | Border on hover / focus | `var(--button-stroke) solid var(--tint-90)` |

package/ui/{form → button}/Button.module.css

@@ -9,9 +9,6 @@
 
 @layer components {
 	.button {
-		/* Theme */
-		--tint-50: var(--button-tint, inherit);
-
 		/* Box */
 		display: block;
 		box-sizing: border-box;

package/ui/{form → button}/Button.tsx

@@ -40,7 +40,12 @@ export function getButtonClass(variants: ButtonVariants): string {
 	);
 }
 
-interface ButtonProps extends ButtonVariants, ClickableProps {}
+/**
+ * Component props for a `<Button>` component.
+ *
+ * @see https://shelving.cc/ui/ButtonProps
+ */
+export interface ButtonProps extends ButtonVariants, ClickableProps {}
 
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.

package/ui/button/FullscreenButton.d.ts

@@ -0,0 +1,31 @@
+import { type ReactElement } from "react";
+import { type ButtonVariants } from "./Button.js";
+/**
+ * Component props for a `<FullscreenButton>`
+ *
+ * @see https://shelving.cc/ui/FullscreenButtonProps
+ */
+export interface FullscreenButtonProps extends ButtonVariants {
+    /**
+     * CSS selector to identify the parent element to toggle fullscreen status on.
+     * @default "body, figure"
+     */
+    target?: string;
+}
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
+ * @see https://shelving.cc/ui/FullscreenButton
+ */
+export declare function FullscreenButton({ target, ...props }: {
+    [x: string]: any;
+    target?: string | undefined;
+}): ReactElement | null;

package/ui/button/FullscreenButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { useEffect, useState } from "react";
+import { Button } from "./Button.js";
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
+ * @see https://shelving.cc/ui/FullscreenButton
+ */
+export function FullscreenButton({ target = "body, figure", ...props }) {
+    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
+    useEffect(() => {
+        const onChange = () => setFull(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onChange);
+        return () => document.removeEventListener("fullscreenchange", onChange);
+    });
+    if (!document.fullscreenEnabled)
+        return null;
+    return (_jsx(Button, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            else {
+                const parent = currentTarget.closest(target);
+                if (parent)
+                    parent.requestFullscreen();
+            }
+        }, ...props, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
+}

package/ui/button/FullscreenButton.tsx

@@ -0,0 +1,58 @@
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { type ReactElement, useEffect, useState } from "react";
+import { Button, type ButtonVariants } from "./Button.js";
+
+/**
+ * Component props for a `<FullscreenButton>`
+ *
+ * @see https://shelving.cc/ui/FullscreenButtonProps
+ */
+export interface FullscreenButtonProps extends ButtonVariants {
+	/**
+	 * CSS selector to identify the parent element to toggle fullscreen status on.
+	 * @default "body, figure"
+	 */
+	target?: string;
+}
+
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
+ * @see https://shelving.cc/ui/FullscreenButton
+ */
+export function FullscreenButton({ target = "body, figure", ...props }): ReactElement | null {
+	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
+
+	useEffect(() => {
+		const onChange = () => setFull(!!document.fullscreenElement);
+		document.addEventListener("fullscreenchange", onChange);
+		return () => document.removeEventListener("fullscreenchange", onChange);
+	});
+
+	if (!document.fullscreenEnabled) return null;
+
+	return (
+		<Button
+			title={isFull ? "Exit full screen mode" : "Enter full screen mode"}
+			onClick={({ currentTarget }) => {
+				if (document.fullscreenElement) {
+					document.exitFullscreen();
+				} else {
+					const parent = currentTarget.closest(target);
+					if (parent) parent.requestFullscreen();
+				}
+			}}
+			{...props}
+		>
+			{isFull ? <ArrowsPointingInIcon /> : <ArrowsPointingOutIcon />}
+		</Button>
+	);
+}

package/ui/button/RetryButton.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement } from "react";
+import type { Callback } from "../../util/function.js";
+import type { OptionalChildProps } from "../util/index.js";
+import { type ButtonVariants } from "./Button.js";
+/**
+ * Context for providing a "retry" callback to descendant `<RetryButton>` elements.
+ * - Used by `<Catcher>` to provide a retry callback to its children.
+ * - Default `<ErrorNotice>` and `<ErrorPage>` elements include `<RetryButton>` to trigger a retry on their parent `<Catcher>`
+ */
+export declare const RetryContext: import("react").Context<Callback | undefined>;
+/**
+ * Component props for `<RetryButton>`
+ *
+ * @property children - The content of the button. Defaults to a refresh icon and `"Retry"`
+ *
+ * @see https://shelving.cc/ui/RetryButtonProps
+ */
+export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {
+}
+/**
+ * Button that retries the nearest `<Catcher>` error boundary when clicked.
+ *
+ * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
+ * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
+ *
+ * @kind component
+ * @see https://shelving.cc/ui/RetryButton
+ */
+export declare function RetryButton({ children, ...props }: RetryButtonProps): ReactElement | null;

package/ui/button/RetryButton.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { createContext, use } from "react";
+import { Button } from "./Button.js";
+/**
+ * Context for providing a "retry" callback to descendant `<RetryButton>` elements.
+ * - Used by `<Catcher>` to provide a retry callback to its children.
+ * - Default `<ErrorNotice>` and `<ErrorPage>` elements include `<RetryButton>` to trigger a retry on their parent `<Catcher>`
+ */
+export const RetryContext = createContext(undefined);
+RetryContext.displayName = "RetryContext";
+const _RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
+/**
+ * Button that retries the nearest `<Catcher>` error boundary when clicked.
+ *
+ * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
+ * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
+ *
+ * @kind component
+ * @see https://shelving.cc/ui/RetryButton
+ */
+export function RetryButton({ children = _RETRY_CHILDREN, ...props }) {
+    const retry = use(RetryContext);
+    if (!retry)
+        return null;
+    return (_jsx(Button, { onClick: retry, ...props, children: children }));
+}

package/ui/button/RetryButton.tsx

@@ -0,0 +1,48 @@
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { createContext, type ReactElement, use } from "react";
+import type { Callback } from "../../util/function.js";
+import type { OptionalChildProps } from "../util/index.js";
+import { Button, type ButtonVariants } from "./Button.js";
+
+/**
+ * Context for providing a "retry" callback to descendant `<RetryButton>` elements.
+ * - Used by `<Catcher>` to provide a retry callback to its children.
+ * - Default `<ErrorNotice>` and `<ErrorPage>` elements include `<RetryButton>` to trigger a retry on their parent `<Catcher>`
+ */
+export const RetryContext = createContext<Callback | undefined>(undefined);
+RetryContext.displayName = "RetryContext";
+
+/**
+ * Component props for `<RetryButton>`
+ *
+ * @property children - The content of the button. Defaults to a refresh icon and `"Retry"`
+ *
+ * @see https://shelving.cc/ui/RetryButtonProps
+ */
+export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {}
+
+const _RETRY_CHILDREN = (
+	<>
+		<ArrowPathIcon />
+		Retry
+	</>
+);
+
+/**
+ * Button that retries the nearest `<Catcher>` error boundary when clicked.
+ *
+ * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
+ * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
+ *
+ * @kind component
+ * @see https://shelving.cc/ui/RetryButton
+ */
+export function RetryButton({ children = _RETRY_CHILDREN, ...props }: RetryButtonProps): ReactElement | null {
+	const retry = use(RetryContext);
+	if (!retry) return null;
+	return (
+		<Button onClick={retry} {...props}>
+			{children}
+		</Button>
+	);
+}

package/ui/{form → button}/SubmitButton.d.ts

@@ -1,6 +1,17 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants } from "./Button.js";
+/**
+ * Component props for `<SubmitButton>`, a form submit button.
+ *
+ * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
+ * @property strong - Whether the button should have strong styling. Defaults to `true`
+ * @property color - The color variant of the button. Defaults to `"primary"`
+ *
+ * @see https://shelving.cc/ui/SubmitButtonProps
+ */
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
+}
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
  * - Defaults to strong, full-width, primary styling and a "Save" label.
@@ -9,11 +20,4 @@ import { type ButtonVariants } from "./Button.js";
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export declare function SubmitButton({ children, strong, color, full, ...variants }: SubmitButtonProps): ReactElement;
-/**
- * Props for `SubmitButton`, a form submit button.
- *
- * @see https://shelving.cc/ui/SubmitButtonProps
- */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
-}
+export declare function SubmitButton({ children, strong, color, full, ...props }: SubmitButtonProps): ReactElement;

package/ui/{form → button}/SubmitButton.js

@@ -1,9 +1,10 @@
 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 { requireForm } from "../form/FormContext.js";
 import { LOADING } from "../misc/Loading.js";
 import { getButtonClass } from "./Button.js";
-import { requireForm } from "./FormContext.js";
+const _SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
  * - Defaults to strong, full-width, primary styling and a "Save" label.
@@ -12,9 +13,8 @@ import { requireForm } from "./FormContext.js";
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export function SubmitButton({ children = SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...variants }) {
+export function SubmitButton({ children = _SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...props }) {
     const form = requireForm();
     const busy = useStore(form.busy).value;
-    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...variants }), children: busy ? LOADING : children }));
+    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...props }), children: busy ? LOADING : children }));
 }
-const SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));

package/ui/{form → button}/SubmitButton.tsx

@@ -1,10 +1,28 @@
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
+import { requireForm } from "../form/FormContext.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";
+
+/**
+ * Component props for `<SubmitButton>`, a form submit button.
+ *
+ * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
+ * @property strong - Whether the button should have strong styling. Defaults to `true`
+ * @property color - The color variant of the button. Defaults to `"primary"`
+ *
+ * @see https://shelving.cc/ui/SubmitButtonProps
+ */
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {}
+
+const _SUBMIT_CHILDREN = (
+	<>
+		Save
+		<ArrowRightIcon />
+	</>
+);
 
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
@@ -15,31 +33,17 @@ import { requireForm } from "./FormContext.js";
  * @see https://shelving.cc/ui/SubmitButton
  */
 export function SubmitButton({
-	children = SUBMIT_CHILDREN,
+	children = _SUBMIT_CHILDREN,
 	strong = true,
 	color = "primary",
 	full = true,
-	...variants
+	...props
 }: SubmitButtonProps): ReactElement {
 	const form = requireForm();
 	const busy = useStore(form.busy).value;
 	return (
-		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...variants })}>
+		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...props })}>
 			{busy ? LOADING : children}
 		</button>
 	);
 }
-
-/**
- * Props for `SubmitButton`, a form submit button.
- *
- * @see https://shelving.cc/ui/SubmitButtonProps
- */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {}
-
-const SUBMIT_CHILDREN = (
-	<>
-		Save
-		<ArrowRightIcon />
-	</>
-);

package/ui/button/index.d.ts

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/button/index.js

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/button/index.ts

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../form/Button.js";
+import type { ButtonVariants } from "../button/Button.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Dialog>` — optional `children` content and an `onClose` callback.

package/ui/dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../form/Button.js";
+import type { ButtonVariants } from "../button/Button.js";
 import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Dialog.module.css";

package/ui/docs/DocumentationPage.test.tsx

@@ -1,10 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import type { DocumentationElement } from "../../util/tree.js";
-import { MetaContext } from "../misc/MetaContext.js";
-import { createMeta } from "../util/meta.js";
-import { DocumentationPage } from "./DocumentationPage.js";
+import { createMeta, DocumentationPage, MetaContext } from "shelving/ui";
+import type { DocumentationElement } from "shelving/util/tree";
 
 /** Make a minimal `tree-documentation` child element of a given kind. */
 function doc(name: string, kind: string): DocumentationElement {

package/ui/docs/DocumentationParams.js

@@ -29,7 +29,7 @@ export function DocumentationParams({ params }) {
     const map = useTreeMap();
     if (!params?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Param" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description, default: def, optional }) => {
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Param" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description, default: def, optional }) => {
                             const { members, optional: typeOptional } = splitType(type);
                             // An options-bag param whose (single, concrete) type resolves to a documented interface/object type is flattened into its individual fields as indented child rows.
                             const single = members.length === 1 ? members[0] : undefined;

package/ui/docs/DocumentationParams.tsx

@@ -55,7 +55,7 @@ export function DocumentationParams({ params }: DocumentationParamsProps): React
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationProperties.js

@@ -24,7 +24,7 @@ export function DocumentationProperties({ properties }) {
     const map = useTreeMap();
     if (!properties?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Property" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: properties.map(({ name, type = DEFAULT_TYPE, description, default: def, optional, readonly }) => {
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Property" }), _jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: properties.map(({ name, type = DEFAULT_TYPE, description, default: def, optional, readonly }) => {
                             const { members, optional: typeOptional } = splitType(type);
                             return (_jsxs("tr", { children: [_jsx(Cell, { nowrap: true, children: _jsx(Code, { nowrap: true, children: `.${name}` }) }), _jsx("td", { children: _jsx(DocumentationType, { members: members }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, members[0] ?? DEFAULT_TYPE)?.props.description, default: def, optional: !!optional || typeOptional, readonly: readonly }) })] }, `${name}-${type}`));
                         }) })] }) }) }));

package/ui/docs/DocumentationProperties.tsx

@@ -49,7 +49,7 @@ export function DocumentationProperties({ properties }: DocumentationPropertiesP
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationReferences.js

@@ -19,5 +19,5 @@ export function DocumentationReferences({ types }) {
     const map = useTreeMap();
     if (!types?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: types.map(type => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: getTreeElement(map, type)?.props.description }) })] }, type))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Type" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: types.map(type => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: getTreeElement(map, type)?.props.description }) })] }, type))) })] }) }) }));
 }