shelving 1.285.7 → 1.286.0

package/package.json

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

package/ui/dialog/Dialog.d.ts

@@ -2,18 +2,23 @@ import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
 import { type ButtonVariants } from "../button/Button.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
+import "../transition/FadeTransition.css";
 /**
  * Props for `<Dialog>` — optional `children` content and an `onClose` callback.
  *
  * @see https://shelving.cc/ui/DialogProps
  */
 export interface DialogProps extends OptionalChildProps {
+    /** Called when the user closes the dialog. It must unmount the `<Dialog>`, and it runs inside `startTransition()` so the dialog animates out. */
     onClose?: Callback;
 }
 /**
  * Modal `<dialog>` element that opens on mount and includes a close button.
  *
- * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, or the close button.
+ * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, the close button, or the Escape key.
+ * - The whole dialog fades in and out in one view transition. A `<Modal>` pinned to an edge leaves that layer and slides in its own.
+ * - With `onClose`, a close request calls `onClose()` and the dialog stays open until it unmounts, so the view transition can capture it as it leaves.
+ * - Children sit in one wrapper in normal block layout, `--dialog-width` wide and centred on the screen. Content taller than the screen scrolls from its top.
  * - Wraps content in `<Suspense>` so lazy children can stream in.
  *
  * @kind component

package/ui/dialog/Dialog.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import { memo, Suspense, useEffect, useRef } from "react";
+import { memo, Suspense, startTransition, useLayoutEffect, useRef, ViewTransition } from "react";
 import { getButtonClass } from "../button/Button.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import "../transition/FadeTransition.css";
 import styles from "./Dialog.module.css";
 /**
  * Modal `<dialog>` element that opens on mount and includes a close button.
  *
- * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, or the close button.
+ * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, the close button, or the Escape key.
+ * - The whole dialog fades in and out in one view transition. A `<Modal>` pinned to an edge leaves that layer and slides in its own.
+ * - With `onClose`, a close request calls `onClose()` and the dialog stays open until it unmounts, so the view transition can capture it as it leaves.
+ * - Children sit in one wrapper in normal block layout, `--dialog-width` wide and centred on the screen. Content taller than the screen scrolls from its top.
  * - Wraps content in `<Suspense>` so lazy children can stream in.
  *
  * @kind component
@@ -15,19 +19,33 @@ import styles from "./Dialog.module.css";
  */
 export const Dialog = memo(({ children, onClose, ...props }) => {
     const ref = useRef(null);
-    useEffect(() => {
+    // Open in a layout effect, not a passive effect. React runs layout effects inside the view transition's update, so the new snapshot shows the open dialog.
+    useLayoutEffect(() => {
         ref.current?.showModal();
     }, []);
-    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: getModuleClass(styles, "dialog"), onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: getModuleClass(styles, "close"), children: _jsx(DialogCloseButton, {}) })] }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(ViewTransition, { enter: "fade", exit: "fade", children: _jsxs("dialog", { ref: ref, className: getModuleClass(styles, "dialog"), onClick: _closeOnBackdropClick, onCancel: e => {
+                    // Keep the dialog open and let the parent unmount it in a transition. An uncancelable request closes natively and fires `onClose` from the `close` event.
+                    if (!onClose || !e.cancelable)
+                        return;
+                    e.preventDefault();
+                    startTransition(() => onClose());
+                }, onClose: onClose, ...props, children: [_jsx("div", { className: getModuleClass(styles, "content"), children: children }), _jsx("div", { className: getModuleClass(styles, "close"), children: _jsx(DialogCloseButton, {}) })] }) }) }));
 });
 /** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
 function _closeOnBackdropClick({ currentTarget, target }) {
     // Close the dialog when clicking on the dialog itself (but not its children).
     if (currentTarget === target)
-        currentTarget.close();
+        _requestClose(currentTarget);
     // Close the dialog when clicking on links or buttons in a `<nav>` element.
     if (target instanceof Element && target.closest("a:any-link, nav button:enabled"))
-        currentTarget.close();
+        _requestClose(currentTarget);
+}
+/** Ask a `<dialog>` to close. `requestClose()` fires a cancelable `cancel` event, so `<Dialog>` can run `onClose` in a transition. Older browsers close at once. */
+function _requestClose(dialog) {
+    if (typeof dialog.requestClose === "function")
+        dialog.requestClose();
+    else
+        dialog.close();
 }
 /**
  * Button that closes its wrapping `<dialog>`, showing an X icon by default.
@@ -41,5 +59,7 @@ export function DialogCloseButton({ children = _jsx(XMarkIcon, {}), plain = true
     return (_jsx("button", { type: "button", title: "Close", className: getClass(getButtonClass({ plain, ...variants }), className), onClick: _closeOnButtonClick, children: children }));
 }
 function _closeOnButtonClick({ currentTarget }) {
-    currentTarget.closest("dialog")?.close();
+    const dialog = currentTarget.closest("dialog");
+    if (dialog)
+        _requestClose(dialog);
 }

package/ui/dialog/Dialog.md

@@ -4,10 +4,16 @@ A native `<dialog>` element opened in modal mode. It opens via `showModal()` whe
 
 **Things to know:**
 
-- Closes on a backdrop click, on any link or `<nav>` button clicked inside it, or via the built-in `<DialogCloseButton>` (an X icon, top-right).
+- Closes on a backdrop click, the Escape key, any link or `<nav>` button clicked inside it, or the built-in `<DialogCloseButton>` (an X icon, top-right).
 - Children render inside a `<Suspense>` boundary, so lazy content can stream in.
-- `onClose` fires when the dialog closes — use it to clear the React state that mounts the dialog, or (when pushed via a store) to remove it from the list.
-- Pair with `DialogsStore`, `<DialogsContext>`, and `<Dialogs>` to open dialogs imperatively from anywhere in the app. For a non-blocking persistent overlay, reach for `<Modal>` instead.
+- Children sit in one wrapper in normal block layout, so several children stack as they would on the page. The wrapper is `--dialog-width` wide (never wider than the screen) and centred on the screen. A centred `<Modal>` fills it. Content taller than the screen starts at the top, and the dialog scrolls.
+- While a dialog is open, the page behind it does not scroll. A scroll inside the dialog never passes on to the page.
+- `Dialog` only dims the page. Its text is white (`--tint-100`) so it reads on the dark overlay. Wrap the content in `<Modal>` to give it a panel with dark text on a light surface.
+- `onClose` fires when the user closes the dialog. It must unmount the `Dialog`: clear the React state that mounts it, or (when pushed via a store) remove it from the list. `Dialog` calls `onClose` inside `startTransition()`, and the dialog stays open until it unmounts.
+- The dialog animates with [view transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API). The whole dialog fades in and out as one layer. A `<Modal>` pinned to an edge takes its own layer and slides.
+- A view transition only runs for a React transition update. `DialogsStore` and `onClose` do this for you. To animate a declarative `Dialog` as it opens, set the state that mounts it inside `startTransition()`.
+- A browser without view transitions shows and hides the dialog at once.
+- Pair with `DialogsStore`, `<DialogsContext>`, and `<Dialogs>` to open dialogs imperatively from anywhere in the app.
 
 ## Usage
 
@@ -16,19 +22,21 @@ A native `<dialog>` element opened in modal mode. It opens via `showModal()` whe
 Mount `<Dialog>` directly when its lifetime matches a React state variable.
 
 ```tsx
-import { Dialog, DialogCloseButton } from "shelving/ui";
+import { Dialog, Modal } from "shelving/ui";
 
 function ConfirmDelete({ onConfirm, onClose }: { onConfirm: () => void; onClose: () => void }) {
   return (
     <Dialog onClose={onClose}>
-      <p>Delete this item?</p>
-      <button type="button" onClick={onConfirm}>Delete</button>
-      <DialogCloseButton />
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>
     </Dialog>
   );
 }
 
-// In the parent:
+// In the parent. Open inside `startTransition()` so the dialog animates in.
+<button type="button" onClick={() => startTransition(() => setShowConfirm(true))}>Delete</button>
 {showConfirm && <ConfirmDelete onConfirm={handleDelete} onClose={() => setShowConfirm(false)} />}
 ```
 
@@ -37,28 +45,35 @@ function ConfirmDelete({ onConfirm, onClose }: { onConfirm: () => void; onClose:
 Set up the context once near the app root (see `<DialogsContext>` and `<Dialogs>`), then push a `<Dialog>` from anywhere with `requireDialogs()`.
 
 ```tsx
-import { requireDialogs } from "shelving/ui";
+import { Modal, requireDialogs } from "shelving/ui";
 
-function DeleteButton({ id }: { id: string }) {
+function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
   const dialogs = requireDialogs();
-  const open = () => dialogs.show(
-    <ConfirmDelete id={id} onConfirm={() => handleDelete(id)} />,
-  );
+  const open = () =>
+    dialogs.show(
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>,
+    );
   return <button type="button" onClick={open}>Delete</button>;
 }
 ```
 
-`dialogs.show()` wraps the content in a `<Dialog>` for you, so you pass plain children rather than a `<Dialog>` element.
+`dialogs.show()` wraps the content in a `<Dialog>` for you, so you pass plain children rather than a `<Dialog>` element. It does not add a `<Modal>`; include one in the content if you want a panel.
 
 ## Styling
 
-`Dialog` paints the full-screen overlay; the inner panel is laid out by its children. Override these hooks at `:root` (or any ancestor scope) to retheme.
+`Dialog` paints the full-screen overlay and resets the browser's default `<dialog>` border, size limits, and `::backdrop`. The inner panel comes from its children, usually `<Modal>`. Override these hooks at `:root` (or any ancestor scope) to retheme.
 
 | Variable | Styles | Default |
 |---|---|---|
 | `--dialog-padding` | Padding around the centred content | `var(--space-normal)` (16px) |
-| `--dialog-color-overlay` | Backdrop fill behind the content | `var(--color-shadow)` |
-| `--dialog-transition` | Open / close transition (a fixed discrete `display` transition runs alongside it so the fade animates across the show / hide toggle) | `all var(--duration-fast)` (150ms) |
-| `--dialog-close-offset` | Inset of the close button from the top-right corner | `var(--space-small)` (8px) |
+| `--dialog-width` | Width of the centred content, and so of a centred `<Modal>` | `var(--width-narrow)` (36rem) |
+| `--dialog-background` | Overlay fill behind the content | `var(--shadow-color)` |
+| `--dialog-color` | Text colour directly on the overlay | `var(--tint-100)` (white) |
+| `--dialog-close-offset` | Inset of the close button from the top-right corner | `var(--space-small)` (12px) |
+
+The fade uses the `fade` class from `<FadeTransition>`, so `--fade-transition-duration` sets its length. It runs only as the dialog opens and closes; an open dialog stays still while other dialogs open and close.
 
-**Global tokens it reads** — move these to retheme broadly: `--space-normal`, `--space-small`, `--color-shadow`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly: `--tint-100`, `--width-narrow`, `--space-normal`, `--space-small`, `--shadow-color`, and `--duration-fast` (through `<FadeTransition>`).

package/ui/dialog/Dialog.module.css

@@ -1,8 +1,9 @@
 @import url("../style/layers.css");
 @import url("../style/Color.module.css");
-@import url("../style/Duration.module.css");
 @import url("../style/Space.module.css");
 @import url("../style/Shadow.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Width.module.css");
 
 @layer components {
 	.dialog {
@@ -12,29 +13,52 @@
 		inset: 0;
 		z-index: 1000;
 		margin: 0;
-		width: 100vw;
-		height: 100vh;
-		align-items: center;
-		justify-content: center;
+		width: auto;
+		height: auto;
+		max-width: none;
+		max-height: none;
+		overflow: auto;
+
+		/* A scroll that reaches the top or bottom of the dialog stops there, and does not pass on to the page. */
+		overscroll-behavior: contain;
 		padding: var(--dialog-padding, var(--space-normal));
+		border: none;
 
 		/* Style */
-		background: var(--dialog-color-overlay, var(--shadow-color));
-		opacity: 0;
-		transition:
-			var(--dialog-transition, all var(--duration-fast)),
-			display var(--duration-fast) allow-discrete;
+		color: var(--dialog-color, var(--tint-100));
+		background: var(--dialog-background, var(--shadow-color));
 
+		/* Flex only to centre `.content`, its one in-flow child. */
 		&[open] {
 			display: flex;
-			opacity: 1;
 		}
 
-		@starting-style {
-			opacity: 0;
+		/* `.dialog` paints the overlay itself, so the browser's own backdrop must not add a second shade. */
+		&::backdrop {
+			background: transparent;
 		}
 	}
 
+	/*
+	 * Lock the page while a dialog is open, so the page behind never scrolls, even when the dialog itself has nothing to scroll.
+	 * - No `scrollbar-gutter: stable` here: fixed elements stop at the root gutter, so the overlay would leave a bare strip at the side.
+	 */
+	:root:has(.dialog[open]) {
+		overflow: hidden;
+	}
+
+	/*
+	 * The children, in normal block layout, `--dialog-width` wide.
+	 * - `margin: auto` centres it on both axes. When it is taller than the screen, the margins drop to 0, so it starts at the top and the dialog scrolls. (`align-items: center` would push the top out of reach.)
+	 * - A pinned `<Modal>` and the close button are `position: fixed`, so this wrapper does not affect them.
+	 */
+	.content {
+		margin: auto;
+		width: var(--dialog-width, var(--width-narrow));
+		min-width: 0;
+		max-width: 100%;
+	}
+
 	.close {
 		position: fixed;
 		top: var(--dialog-close-offset, var(--space-small));

package/ui/dialog/Dialog.tsx

@@ -1,9 +1,10 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
+import { type MouseEvent, memo, type ReactElement, Suspense, startTransition, useLayoutEffect, useRef, ViewTransition } from "react";
 import type { Callback } from "../../util/function.js";
 import { type ButtonVariants, getButtonClass } from "../button/Button.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
+import "../transition/FadeTransition.css";
 import styles from "./Dialog.module.css";
 
 /**
@@ -12,13 +13,17 @@ import styles from "./Dialog.module.css";
  * @see https://shelving.cc/ui/DialogProps
  */
 export interface DialogProps extends OptionalChildProps {
+	/** Called when the user closes the dialog. It must unmount the `<Dialog>`, and it runs inside `startTransition()` so the dialog animates out. */
 	onClose?: Callback;
 }
 
 /**
  * Modal `<dialog>` element that opens on mount and includes a close button.
  *
- * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, or the close button.
+ * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, the close button, or the Escape key.
+ * - The whole dialog fades in and out in one view transition. A `<Modal>` pinned to an edge leaves that layer and slides in its own.
+ * - With `onClose`, a close request calls `onClose()` and the dialog stays open until it unmounts, so the view transition can capture it as it leaves.
+ * - Children sit in one wrapper in normal block layout, `--dialog-width` wide and centred on the screen. Content taller than the screen scrolls from its top.
  * - Wraps content in `<Suspense>` so lazy children can stream in.
  *
  * @kind component
@@ -27,19 +32,35 @@ export interface DialogProps extends OptionalChildProps {
 export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 	const ref = useRef<HTMLDialogElement>(null);
 
-	useEffect(() => {
+	// Open in a layout effect, not a passive effect. React runs layout effects inside the view transition's update, so the new snapshot shows the open dialog.
+	useLayoutEffect(() => {
 		ref.current?.showModal();
 	}, []);
 
 	return (
 		<Suspense fallback={null}>
-			{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
-			<dialog ref={ref} className={getModuleClass(styles, "dialog")} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
-				{children}
-				<div className={getModuleClass(styles, "close")}>
-					<DialogCloseButton />
-				</div>
-			</dialog>
+			{/* The transition must wrap the `<dialog>`: React only animates a `<ViewTransition>` that comes before any DOM element in the inserted or deleted tree. Fade only on enter and exit, so an open dialog stays still while another dialog opens or closes. */}
+			<ViewTransition enter="fade" exit="fade">
+				{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
+				<dialog
+					ref={ref}
+					className={getModuleClass(styles, "dialog")}
+					onClick={_closeOnBackdropClick}
+					onCancel={e => {
+						// Keep the dialog open and let the parent unmount it in a transition. An uncancelable request closes natively and fires `onClose` from the `close` event.
+						if (!onClose || !e.cancelable) return;
+						e.preventDefault();
+						startTransition(() => onClose());
+					}}
+					onClose={onClose}
+					{...props}
+				>
+					<div className={getModuleClass(styles, "content")}>{children}</div>
+					<div className={getModuleClass(styles, "close")}>
+						<DialogCloseButton />
+					</div>
+				</dialog>
+			</ViewTransition>
 		</Suspense>
 	);
 });
@@ -47,10 +68,16 @@ export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 /** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
 function _closeOnBackdropClick({ currentTarget, target }: MouseEvent<HTMLDialogElement>): void {
 	// Close the dialog when clicking on the dialog itself (but not its children).
-	if (currentTarget === target) currentTarget.close();
+	if (currentTarget === target) _requestClose(currentTarget);
 
 	// Close the dialog when clicking on links or buttons in a `<nav>` element.
-	if (target instanceof Element && target.closest("a:any-link, nav button:enabled")) currentTarget.close();
+	if (target instanceof Element && target.closest("a:any-link, nav button:enabled")) _requestClose(currentTarget);
+}
+
+/** Ask a `<dialog>` to close. `requestClose()` fires a cancelable `cancel` event, so `<Dialog>` can run `onClose` in a transition. Older browsers close at once. */
+function _requestClose(dialog: HTMLDialogElement): void {
+	if (typeof dialog.requestClose === "function") dialog.requestClose();
+	else dialog.close();
 }
 
 /**
@@ -87,5 +114,6 @@ export function DialogCloseButton({
 }
 
 function _closeOnButtonClick({ currentTarget }: MouseEvent<HTMLButtonElement>): void {
-	currentTarget.closest("dialog")?.close();
+	const dialog = currentTarget.closest("dialog");
+	if (dialog) _requestClose(dialog);
 }

package/ui/dialog/Dialogs.d.ts

@@ -4,7 +4,8 @@ import type { ChildProps } from "../util/props.js";
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -59,5 +60,5 @@ export declare function DialogsContext({ children }: DialogsContextProps): React
  * @kind component
  * @see https://shelving.cc/ui/Dialogs
  */
-export declare function Dialogs(): ReactNode | null;
+export declare function Dialogs(): ReactNode;
 export {};

package/ui/dialog/Dialogs.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 import { useInstance } from "../../react/useInstance.js";
-import { useStore } from "../../react/useStore.js";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { getRandomKey } from "../../util/random.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import { Dialog } from "./Dialog.js";
-/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
-const REMOVE_DELAY = 500;
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -25,10 +24,8 @@ export class DialogsStore extends ArrayStore {
         const dialog = (_jsx(Dialog
         // Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
         , { 
-            // When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
-            onClose: () => {
-                setTimeout(() => this.delete(dialog), REMOVE_DELAY);
-            }, children: children }, getRandomKey()));
+            // When the `<dialog>` closes, remove it from the list. The view transition animates it out.
+            onClose: () => this.delete(dialog), children: children }, getRandomKey()));
         this.add(dialog);
     }
     /**
@@ -68,6 +65,5 @@ export function DialogsContext({ children }) {
  * @see https://shelving.cc/ui/Dialogs
  */
 export function Dialogs() {
-    const dialogs = useStore(requireDialogs());
-    return dialogs ? dialogs.value : null;
+    return useTransitionValue(requireDialogs());
 }

package/ui/dialog/Dialogs.tsx

@@ -1,18 +1,16 @@
 import { createContext, type ReactElement, type ReactNode, use } from "react";
 import { useInstance } from "../../react/useInstance.js";
-import { useStore } from "../../react/useStore.js";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { getRandomKey } from "../../util/random.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import type { ChildProps } from "../util/props.js";
 import { Dialog } from "./Dialog.js";
 
-/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
-const REMOVE_DELAY = 500;
-
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -28,10 +26,8 @@ export class DialogsStore extends ArrayStore<ReactElement> {
 			<Dialog
 				// Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
 				key={getRandomKey()}
-				// When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
-				onClose={() => {
-					setTimeout(() => this.delete(dialog), REMOVE_DELAY);
-				}}
+				// When the `<dialog>` closes, remove it from the list. The view transition animates it out.
+				onClose={() => this.delete(dialog)}
 			>
 				{children}
 			</Dialog>
@@ -97,7 +93,6 @@ export function DialogsContext({ children }: DialogsContextProps): ReactElement
  * @kind component
  * @see https://shelving.cc/ui/Dialogs
  */
-export function Dialogs(): ReactNode | null {
-	const dialogs = useStore(requireDialogs());
-	return dialogs ? dialogs.value : null;
+export function Dialogs(): ReactNode {
+	return useTransitionValue(requireDialogs());
 }

package/ui/dialog/Modal.d.ts

@@ -1,16 +1,42 @@
 import type { ReactElement } from "react";
+import { type IndentVariants } from "../style/Indent.js";
+import { type PaddingVariants } from "../style/Padding.js";
+import { type RadiusVariants } from "../style/Radius.js";
+import { type ShadowVariants } from "../style/Shadow.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
- * Props for `<Modal>` — optional `children` content.
+ * Variant props for `<Modal>` — pin the panel to one edge of the screen.
+ *
+ * - Set one of `top`, `right`, `bottom`, or `left`. Without one, the panel is centred.
+ * - If more than one is set, the first in the order `top`, `right`, `bottom`, `left` wins.
+ *
+ * @see https://shelving.cc/ui/ModalVariants
+ */
+export interface ModalVariants {
+    /** Pin the panel to the top edge, full width, and slide it in from the top. */
+    top?: boolean | undefined;
+    /** Pin the panel to the right edge, full height, and slide it in from the right. */
+    right?: boolean | undefined;
+    /** Pin the panel to the bottom edge, full width, and slide it in from the bottom. */
+    bottom?: boolean | undefined;
+    /** Pin the panel to the left edge, full height, and slide it in from the left. */
+    left?: boolean | undefined;
+}
+/**
+ * Props for `<Modal>` — edge, padding, indent, radius, and shadow variants, optional `children` content, and an optional `className`.
  *
  * @see https://shelving.cc/ui/ModalProps
  */
-export interface ModalProps extends OptionalChildProps, ClassProps {
+export interface ModalProps extends ModalVariants, PaddingVariants, IndentVariants, RadiusVariants, ShadowVariants, OptionalChildProps, ClassProps {
 }
 /**
- * Styled `<aside>` overlay container for modal content.
+ * Styled `<aside>` panel for content inside a `<Dialog>`, with dark text on a light surface.
+ *
+ * - Centred by default. It fades in and out with its `<Dialog>`.
+ * - Has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it.
+ * - `top`, `right`, `bottom`, or `left` pins it to that edge. It then takes its own layer in the `<Dialog>` view transition, and slides in from that edge and out to it.
  *
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export declare function Modal({ children, className }: ModalProps): ReactElement;
+export declare function Modal({ children, className, ...props }: ModalProps): ReactElement;

package/ui/dialog/Modal.js

@@ -1,12 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getIndentClass } from "../style/Indent.js";
+import { getPaddingClass } from "../style/Padding.js";
+import { getRadiusClass } from "../style/Radius.js";
+import { getShadowClass } from "../style/Shadow.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Modal.module.css";
 /**
- * Styled `<aside>` overlay container for modal content.
+ * Styled `<aside>` panel for content inside a `<Dialog>`, with dark text on a light surface.
+ *
+ * - Centred by default. It fades in and out with its `<Dialog>`.
+ * - Has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it.
+ * - `top`, `right`, `bottom`, or `left` pins it to that edge. It then takes its own layer in the `<Dialog>` view transition, and slides in from that edge and out to it.
  *
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export function Modal({ children, className }) {
-    return _jsx("aside", { className: getClass(getModuleClass(styles, "modal"), className), children: children });
+export function Modal({ children, className, ...props }) {
+    const side = _getSide(props);
+    return (_jsx("aside", { className: getClass(getModuleClass(styles, "modal"), //
+        side && getModuleClass(styles, side), getPaddingClass(props), getIndentClass(props), getRadiusClass(props), getShadowClass(props), className), children: children }));
+}
+/** Get the edge a modal is pinned to, if any. */
+function _getSide({ top, right, bottom, left }) {
+    if (top)
+        return "top";
+    if (right)
+        return "right";
+    if (bottom)
+        return "bottom";
+    if (left)
+        return "left";
 }

package/ui/dialog/Modal.md

@@ -1,35 +1,114 @@
 # Modal
 
-A non-blocking `<aside>` overlay for persistent panels — drawers, toasts, and side-sheets that coexist with the page rather than blocking interaction with it. Unlike `<Dialog>`, it is not a native `<dialog>` and does not trap focus or dim the page.
+The panel inside a `<Dialog>`. `<Dialog>` dims the page; `Modal` gives the content a shadowed surface with dark text on a light fill.
 
 **Things to know:**
 
-- Reach for `Modal` when the overlay should sit alongside the page (a notification panel, a side drawer); reach for `<Dialog>` when it should block interaction until dismissed.
-- It only styles the box — lay out its contents with the usual block components.
+- A native `<dialog>` does both jobs. Shelving splits them: `<Dialog>` is the overlay and `Modal` is the panel. Content placed directly in a `<Dialog>` shows as white text on the dark overlay.
+- `Modal` sets its text back to `--tint-00`, so it reads on its own `--tint-100` surface.
+- `DialogsStore.show()` wraps its content in a `<Dialog>` only. It does not add a `Modal`, so put the `Modal` in the content yourself.
+- `Modal` only styles the box. Lay out its contents with the usual block components.
+- A centred `Modal` fills the width of its `<Dialog>`, so set `--dialog-width` to change it. `--modal-width` sets the width of a `left` or `right` panel.
+- The `padding` variant (for example `padding="large"`) sets the top and bottom padding, and the `indent` variant sets the left and right padding, the same as on `<Panel>`.
+- The `radius` variant sets the corner radius. On a pinned panel, corners that touch a screen edge stay square.
+- It has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it, the same as on `<Card>`.
+- Set `top`, `right`, `bottom`, or `left` to pin the panel to that edge of the screen. A top or bottom panel is full width; a left or right panel is full height. Use these for mobile menus, bottom sheets, and side menus.
+- A centred panel fades in and out with its `<Dialog>`. A pinned panel slides in from its edge and out to it, in its own view-transition layer. With reduced motion, a pinned panel fades in place.
 
 ## Usage
 
+### Declarative
+
+Put the `Modal` inside a `<Dialog>` that you mount from React state.
+
+```tsx
+import { Dialog, Modal } from "shelving/ui";
+
+function ConfirmDelete({ onConfirm, onClose }: { onConfirm: () => void; onClose: () => void }) {
+  return (
+    <Dialog onClose={onClose}>
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>
+    </Dialog>
+  );
+}
+```
+
+### Imperative
+
+Pass the `Modal` to `DialogsStore.show()`. The store adds the `<Dialog>` for you. See `<DialogsContext>` and `<Dialogs>` for the setup.
+
+```tsx
+import { Modal, requireDialogs } from "shelving/ui";
+
+function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
+  const dialogs = requireDialogs();
+  const open = () =>
+    dialogs.show(
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>,
+    );
+  return <button type="button" onClick={open}>Delete</button>;
+}
+```
+
+### Padding, indent, and radius
+
 ```tsx
-import { Modal } from "shelving/ui";
+<Modal padding="large" indent="large" radius="large">
+  <p>More space on all sides, and rounder corners.</p>
+</Modal>
+```
 
-<Modal>
-  <NotificationPanel />
+### Shadow
+
+```tsx
+<Modal shadow="large">
+  <p>Raised above the overlay.</p>
 </Modal>
 ```
 
+### Pinned to an edge
+
+```tsx
+import { Menu, MenuItem, Modal, requireDialogs } from "shelving/ui";
+
+function MenuButton() {
+  const dialogs = requireDialogs();
+  const open = () =>
+    dialogs.show(
+      <Modal left>
+        <Menu>
+          <MenuItem href="/">Home</MenuItem>
+          <MenuItem href="/settings">Settings</MenuItem>
+        </Menu>
+      </Modal>,
+    );
+  return <button type="button" onClick={open}>Menu</button>;
+}
+```
+
+A link click inside a `<Dialog>` closes it, so the menu slides out as the page changes. Use `<Modal bottom>` for a bottom sheet on mobile.
+
 ## Styling
 
-`Modal` paints a bordered, shadowed surface. Override these hooks at `:root` (or any ancestor scope) to retheme.
+`Modal` paints a shadowed surface with no border. Set `--modal-stroke` (for example `var(--stroke-normal)`) to show the themed border, or `--modal-border` to replace it. A pinned panel then keeps only the border on its inner side. On a pinned panel, only the corners that do not touch a screen edge are round. Override these hooks at `:root` (or any ancestor scope) to retheme.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--modal-width` | Box width | `var(--width-narrow)` |
-| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of `--tint-50` |
-| `--modal-radius` | Corner radius | `var(--radius-normal)` (16px) |
-| `--modal-color-bg` | Surface fill | `var(--tint-100)` |
-| `--modal-padding` | Inner padding | `var(--space-normal)` (16px) |
-| `--modal-color-text` | Text colour | `var(--tint-00)` |
-| `--modal-transition` | Transition | `all var(--duration-fast)` (150ms) |
-| `--modal-shadow` | Drop shadow | `var(--shadow-normal)` |
-
-**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-50` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--stroke-normal`, `--shadow-normal`, and `--duration-fast`.
+| `--modal-width` | Width of a `left` or `right` panel (a centred panel takes `--dialog-width`) | `var(--width-narrow)` |
+| `--modal-stroke` | Border width | `0` (no border) |
+| `--modal-border` | Border shorthand | `var(--modal-stroke)` solid `--tint-80` |
+| `--modal-radius` | Corner radius (the `radius` variant wins over it) | `var(--radius-normal)` (16px) |
+| `--modal-background` | Surface fill | `var(--tint-100)` |
+| `--modal-padding` | Inner padding (the `padding` variant overrides the top and bottom, and `indent` the left and right) | `var(--space-normal)` (16px) |
+| `--modal-color` | Text colour | `var(--tint-00)` |
+| `--modal-max-height` | Maximum height of a `top` or `bottom` panel (it scrolls past this) | `100%` |
+| `--modal-transition-duration` | Length of the slide for a pinned panel. Keep it the same as `--fade-transition-duration`, so the panel and the `<Dialog>` overlay finish together | `var(--duration-fast)` (150ms) |
+| `--modal-shadow` | Drop shadow (the `shadow` variant wins over it) | `var(--shadow-normal)` |
+
+**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-80` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--shadow-normal`, and `--duration-fast`.

package/ui/dialog/Modal.module.css

@@ -3,24 +3,185 @@
 @import url("../style/Radius.module.css");
 @import url("../style/Shadow.module.css");
 @import url("../style/Space.module.css");
-@import url("../style/Stroke.module.css");
 @import url("../style/Tint.module.css");
 @import url("../style/Width.module.css");
 
 @layer components {
 	.modal {
-		/* Box */
+		/* Box: `border-box` keeps the padding inside `max-width`, and `min-width: 0` lets the panel shrink below its content in the flex `<Dialog>`, so it never goes wider than the screen. */
+		box-sizing: border-box;
 		margin: auto;
-		width: var(--modal-width, var(--width-narrow));
+		min-width: 0;
 		max-width: 100%;
-		border: var(--modal-border, var(--stroke-normal) solid color-mix(in oklch, var(--tint-50) 50%, transparent));
+		border: var(--modal-border, var(--modal-stroke, 0) solid var(--tint-80));
 		border-radius: var(--modal-radius, var(--radius-normal));
-		background: var(--modal-color-bg, var(--tint-100));
+		background: var(--modal-background, var(--tint-100));
 		padding: var(--modal-padding, var(--space-normal));
 
 		/* Style */
-		color: var(--modal-color-text, var(--tint-00));
-		transition: var(--modal-transition, all var(--duration-fast));
+		color: var(--modal-color, var(--tint-00));
 		box-shadow: var(--modal-shadow, var(--shadow-normal));
+
+		/* Pinned to an edge: fixed to the viewport, flush with the edge, and scrolls when its content is too tall. */
+		&.top,
+		&.right,
+		&.bottom,
+		&.left {
+			position: fixed;
+			margin: 0;
+			overflow: auto;
+			overscroll-behavior: contain;
+
+			/* Take a separate layer in any view transition, so the panel can slide while the `<Dialog>` around it fades. `match-element` gives each panel a unique name. */
+			view-transition-name: match-element;
+		}
+
+		&.top,
+		&.bottom {
+			inset-inline: 0;
+			width: auto;
+			max-height: var(--modal-max-height, 100%);
+		}
+
+		/* Side panels are not inside the `<Dialog>` wrapper's width, so they set their own. */
+		&.left,
+		&.right {
+			inset-block: 0;
+			width: var(--modal-width, var(--width-narrow));
+		}
+
+		/* If a theme sets `--modal-stroke` or `--modal-border`, keep only the border on the inner side, because the other sides touch the edges of the screen. */
+		&.top {
+			top: 0;
+			border-top: none;
+			border-inline: none;
+			view-transition-class: modal-top;
+		}
+
+		&.bottom {
+			bottom: 0;
+			border-bottom: none;
+			border-inline: none;
+			view-transition-class: modal-bottom;
+		}
+
+		&.left {
+			left: 0;
+			border-left: none;
+			border-block: none;
+			view-transition-class: modal-left;
+		}
+
+		&.right {
+			right: 0;
+			border-right: none;
+			border-block: none;
+			view-transition-class: modal-right;
+		}
+	}
+}
+
+/* Corners that touch a screen edge are square. This is in `overrides` so it beats the `radius` variant, which then sets only the inner corners. */
+@layer overrides {
+	.modal {
+		&.top {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&.bottom {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		/* Side panels are full height, so all their corners touch an edge. */
+		&.left,
+		&.right {
+			border-radius: 0;
+		}
+	}
+}
+
+/*
+ * View transitions for panels pinned to an edge.
+ * - These rules must stay in this file. Bun hashes the `view-transition-class` values above and the class names in the selectors below the same way only when both are in the same file.
+ * - Each keyframe only sets `from`, so it ends at the panel's own position. The exit plays the same keyframe in reverse.
+ * - `:only-child` limits the slide to enter (a new image with no old one) and exit (an old image with no new one). A panel that stays open is in every view transition on the page as an old and a new image, and must not move.
+ */
+@keyframes modal-from-top {
+	from {
+		transform: translateY(-100%);
+	}
+}
+
+@keyframes modal-from-right {
+	from {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes modal-from-bottom {
+	from {
+		transform: translateY(100%);
+	}
+}
+
+@keyframes modal-from-left {
+	from {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes modal-fade {
+	from {
+		opacity: 0;
+	}
+}
+
+::view-transition-new(.modal-top):only-child,
+::view-transition-new(.modal-right):only-child,
+::view-transition-new(.modal-bottom):only-child,
+::view-transition-new(.modal-left):only-child {
+	animation: var(--modal-transition-duration, var(--duration-fast)) ease-out both;
+}
+
+::view-transition-old(.modal-top):only-child,
+::view-transition-old(.modal-right):only-child,
+::view-transition-old(.modal-bottom):only-child,
+::view-transition-old(.modal-left):only-child {
+	animation: var(--modal-transition-duration, var(--duration-fast)) ease-in reverse both;
+}
+
+::view-transition-new(.modal-top):only-child,
+::view-transition-old(.modal-top):only-child {
+	animation-name: modal-from-top;
+}
+
+::view-transition-new(.modal-right):only-child,
+::view-transition-old(.modal-right):only-child {
+	animation-name: modal-from-right;
+}
+
+::view-transition-new(.modal-bottom):only-child,
+::view-transition-old(.modal-bottom):only-child {
+	animation-name: modal-from-bottom;
+}
+
+::view-transition-new(.modal-left):only-child,
+::view-transition-old(.modal-left):only-child {
+	animation-name: modal-from-left;
+}
+
+/* Reduced motion: fade the panel in and out in place of the slide. */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-new(.modal-top):only-child,
+	::view-transition-old(.modal-top):only-child,
+	::view-transition-new(.modal-right):only-child,
+	::view-transition-old(.modal-right):only-child,
+	::view-transition-new(.modal-bottom):only-child,
+	::view-transition-old(.modal-bottom):only-child,
+	::view-transition-new(.modal-left):only-child,
+	::view-transition-old(.modal-left):only-child {
+		animation-name: modal-fade;
 	}
 }

package/ui/dialog/Modal.tsx

@@ -1,21 +1,78 @@
 import type { ReactElement } from "react";
+import { getIndentClass, type IndentVariants } from "../style/Indent.js";
+import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
+import { getRadiusClass, type RadiusVariants } from "../style/Radius.js";
+import { getShadowClass, type ShadowVariants } from "../style/Shadow.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Modal.module.css";
 
 /**
- * Props for `<Modal>` — optional `children` content.
+ * Variant props for `<Modal>` — pin the panel to one edge of the screen.
+ *
+ * - Set one of `top`, `right`, `bottom`, or `left`. Without one, the panel is centred.
+ * - If more than one is set, the first in the order `top`, `right`, `bottom`, `left` wins.
+ *
+ * @see https://shelving.cc/ui/ModalVariants
+ */
+export interface ModalVariants {
+	/** Pin the panel to the top edge, full width, and slide it in from the top. */
+	top?: boolean | undefined;
+	/** Pin the panel to the right edge, full height, and slide it in from the right. */
+	right?: boolean | undefined;
+	/** Pin the panel to the bottom edge, full width, and slide it in from the bottom. */
+	bottom?: boolean | undefined;
+	/** Pin the panel to the left edge, full height, and slide it in from the left. */
+	left?: boolean | undefined;
+}
+
+/**
+ * Props for `<Modal>` — edge, padding, indent, radius, and shadow variants, optional `children` content, and an optional `className`.
  *
  * @see https://shelving.cc/ui/ModalProps
  */
-export interface ModalProps extends OptionalChildProps, ClassProps {}
+export interface ModalProps
+	extends ModalVariants,
+		PaddingVariants,
+		IndentVariants,
+		RadiusVariants,
+		ShadowVariants,
+		OptionalChildProps,
+		ClassProps {}
 
 /**
- * Styled `<aside>` overlay container for modal content.
+ * Styled `<aside>` panel for content inside a `<Dialog>`, with dark text on a light surface.
+ *
+ * - Centred by default. It fades in and out with its `<Dialog>`.
+ * - Has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it.
+ * - `top`, `right`, `bottom`, or `left` pins it to that edge. It then takes its own layer in the `<Dialog>` view transition, and slides in from that edge and out to it.
  *
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export function Modal({ children, className }: ModalProps): ReactElement {
-	return <aside className={getClass(getModuleClass(styles, "modal"), className)}>{children}</aside>;
+export function Modal({ children, className, ...props }: ModalProps): ReactElement {
+	const side = _getSide(props);
+	return (
+		<aside
+			className={getClass(
+				getModuleClass(styles, "modal"), //
+				side && getModuleClass(styles, side),
+				getPaddingClass(props),
+				getIndentClass(props),
+				getRadiusClass(props),
+				getShadowClass(props),
+				className,
+			)}
+		>
+			{children}
+		</aside>
+	);
+}
+
+/** Get the edge a modal is pinned to, if any. */
+function _getSide({ top, right, bottom, left }: ModalVariants): keyof ModalVariants | undefined {
+	if (top) return "top";
+	if (right) return "right";
+	if (bottom) return "bottom";
+	if (left) return "left";
 }

package/ui/notice/Notices.d.ts

@@ -1,6 +1,7 @@
 import { type ReactElement } from "react";
 import { type FlexVariants } from "../style/Flex.js";
 import type { ClassProps } from "../util/props.js";
+import "./NoticesTransition.css";
 /**
  * Props for `<Notices>` — flex styling variants for the notices container.
  *
@@ -12,6 +13,7 @@ export interface NoticesProps extends FlexVariants, ClassProps {
  * Render the global list of notices and subscribe to incoming `"notice"` events.
  * - Listens for `"notice"` events on `window` (or that bubble up to `window`) and shows them in the global notice list.
  * - This is how e.g. `<Button>` and `<FormNotify>` components send notices into the global list.
+ * - Each notice slides in and out in its own view transition. The other notices move to their new places in the same transition.
  *
  * @kind component
  * @see https://shelving.cc/ui/Notices

package/ui/notice/Notices.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useStore } from "../../react/useStore.js";
+import { useEffect, ViewTransition } from "react";
 import { getFlexClass } from "../style/Flex.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { subscribeNotices } from "../util/notice.js";
 import { Notice } from "./Notice.js";
+import "./NoticesTransition.css";
 import NOTICES_CSS from "./Notices.module.css";
 import { NOTICES } from "./NoticesStore.js";
 const NOTICES_CLASS = getModuleClass(NOTICES_CSS, "notices");
@@ -12,15 +13,24 @@ const NOTICES_CLASS = getModuleClass(NOTICES_CSS, "notices");
  * Render the global list of notices and subscribe to incoming `"notice"` events.
  * - Listens for `"notice"` events on `window` (or that bubble up to `window`) and shows them in the global notice list.
  * - This is how e.g. `<Button>` and `<FormNotify>` components send notices into the global list.
+ * - Each notice slides in and out in its own view transition. The other notices move to their new places in the same transition.
  *
  * @kind component
  * @see https://shelving.cc/ui/Notices
  */
 export function Notices({ className, ...props }) {
-    const notices = useStore(NOTICES).value;
+    const notices = useTransitionValue(NOTICES);
     useEffect(() => {
         // Subscribe to global notices.
         return subscribeNotices((message, status) => NOTICES.show(message, status));
     });
-    return (_jsx("aside", { className: getClass(NOTICES_CLASS, getFlexClass(props), className), children: notices.map(({ key, value }) => (_jsx(Notice, { ...value }, key))) }));
+    return (_jsx("aside", { className: getClass(NOTICES_CLASS, getFlexClass(props), className), children: notices.map(notice => (_jsx(NoticeItem, { notice: notice }, notice.key))) }));
+}
+/**
+ * Render one notice in its own view transition, and re-render when the notice changes in place.
+ * - Module-private, but named without the `_` prefix: React and the hooks lint rule only treat a capitalised name as a component.
+ */
+function NoticeItem({ notice }) {
+    const { children, status } = useTransitionValue(notice);
+    return (_jsx(ViewTransition, { enter: "notice", exit: "notice", update: "notice-update", children: _jsx(Notice, { status: status, children: children }) }));
 }

package/ui/notice/Notices.md

@@ -7,6 +7,8 @@ Renders the global list of active notices and subscribes to incoming `"notice"`
 - Mount `<Notices>` once near the root of your app. It renders at that point in the DOM and listens automatically — no context required.
 - Notices auto-dismiss after a short delay unless they carry a `"loading"` status.
 - Backed by the `NOTICES` store singleton; for advanced use you can keep a reference to a notice to update or close it manually.
+- Notices animate with [view transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API). A new notice slides in from the right, and a closed notice slides out to the right. The other notices move to their new places. A notice that changes in place (for example from loading to success) changes at once, with no animation.
+- With reduced motion, notices fade in and out in place, and the others move at once. A browser without view transitions shows the changes at once.
 
 ## Usage
 
@@ -51,3 +53,16 @@ await uploadFile(file);
 notice.show("Upload complete.", "success"); // Update in place.
 notice.close(); // Or close it immediately.
 ```
+
+## Styling
+
+`Notices` positions the list in the bottom-right corner. Each notice is only as wide as its content and is right-aligned. The list is never wider than `--notices-width`, and keeps `--notices-offset` clear at both sides on a narrow screen. Clicks pass through the gaps between notices to the page. Each item is a `<Notice>`, which has its own hooks. Override these hooks at `:root` (or any ancestor scope) to retheme.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--notices-offset` | Distance of the list from the bottom, right, and left edges | `var(--space-normal)` (16px) |
+| `--notices-width` | Maximum width of the list and of each notice | `var(--width-narrow)` |
+| `--notices-gap` | Gap between notices | `var(--space-small)` (12px) |
+| `--notices-transition-duration` | Length of the slide in, slide out, and move | `var(--duration-fast)` (150ms) |
+
+**Global tokens it reads** — move these to retheme broadly: `--space-normal`, `--space-small`, `--width-narrow`, and `--duration-fast`.

package/ui/notice/Notices.module.css

@@ -5,12 +5,25 @@
 @layer components {
 	.notices {
 		position: fixed;
-		bottom: var(--notices-offset, var(--space-normal));
 		right: var(--notices-offset, var(--space-normal));
+		bottom: var(--notices-offset, var(--space-normal));
+		left: var(--notices-offset, var(--space-normal));
 		z-index: 1000;
 		display: flex;
+		margin-left: auto;
 		max-width: var(--notices-width, var(--width-narrow));
 		flex-direction: column;
+		align-items: flex-end;
 		gap: var(--notices-gap, var(--space-small));
+
+		/* The list is as wide as `--notices-width`, so let clicks pass through the gaps to the page. */
+		pointer-events: none;
+
+		/* Each notice is only as wide as its content, and stays on the right. */
+		& > * {
+			inline-size: auto;
+			max-width: 100%;
+			pointer-events: auto;
+		}
 	}
 }

package/ui/notice/Notices.tsx

@@ -1,10 +1,13 @@
-import { type ReactElement, useEffect } from "react";
-import { useStore } from "../../react/useStore.js";
+import { type ReactElement, useEffect, ViewTransition } from "react";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
+import type { Status } from "../style/Status.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { subscribeNotices } from "../util/notice.js";
 import type { ClassProps } from "../util/props.js";
 import { Notice } from "./Notice.js";
+import type { NoticeStore } from "./NoticeStore.js";
+import "./NoticesTransition.css";
 import NOTICES_CSS from "./Notices.module.css";
 import { NOTICES } from "./NoticesStore.js";
 
@@ -21,21 +24,35 @@ export interface NoticesProps extends FlexVariants, ClassProps {}
  * Render the global list of notices and subscribe to incoming `"notice"` events.
  * - Listens for `"notice"` events on `window` (or that bubble up to `window`) and shows them in the global notice list.
  * - This is how e.g. `<Button>` and `<FormNotify>` components send notices into the global list.
+ * - Each notice slides in and out in its own view transition. The other notices move to their new places in the same transition.
  *
  * @kind component
  * @see https://shelving.cc/ui/Notices
  */
 export function Notices({ className, ...props }: NoticesProps): ReactElement {
-	const notices = useStore(NOTICES).value;
+	const notices = useTransitionValue(NOTICES);
 	useEffect(() => {
 		// Subscribe to global notices.
 		return subscribeNotices((message, status) => NOTICES.show(message, status));
 	});
 	return (
 		<aside className={getClass(NOTICES_CLASS, getFlexClass(props), className)}>
-			{notices.map(({ key, value }) => (
-				<Notice key={key} {...value} />
+			{notices.map(notice => (
+				<NoticeItem key={notice.key} notice={notice} />
 			))}
 		</aside>
 	);
 }
+
+/**
+ * Render one notice in its own view transition, and re-render when the notice changes in place.
+ * - Module-private, but named without the `_` prefix: React and the hooks lint rule only treat a capitalised name as a component.
+ */
+function NoticeItem({ notice }: { notice: NoticeStore<Status> }): ReactElement {
+	const { children, status } = useTransitionValue(notice);
+	return (
+		<ViewTransition enter="notice" exit="notice" update="notice-update">
+			<Notice status={status}>{children}</Notice>
+		</ViewTransition>
+	);
+}

package/ui/notice/NoticesTransition.css

@@ -0,0 +1,67 @@
+/* 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. */
+@import url("../style/layers.css");
+@import url("../style/Duration.module.css");
+
+@layer defaults {
+	:root {
+		--notices-transition-duration: var(--duration-fast);
+	}
+}
+
+/* Only `from` is set, so the keyframe ends at the snapshot's own position. The exit plays it in reverse. */
+@keyframes notice-from-right {
+	from {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+}
+
+@keyframes notice-fade {
+	from {
+		opacity: 0;
+	}
+}
+
+/* A new notice slides in from the right. */
+::view-transition-new(.notice) {
+	animation: notice-from-right var(--notices-transition-duration) ease-out both;
+}
+
+/* A closed notice slides out to the right. */
+::view-transition-old(.notice) {
+	animation: notice-from-right var(--notices-transition-duration) ease-in reverse both;
+}
+
+/* The other notices move to their new places (the default group morph). */
+::view-transition-group(.notice-update) {
+	animation-duration: var(--notices-transition-duration);
+}
+
+/*
+ * A notice that changes in place does not animate: hide the old image, and show the new image at once at its own size.
+ * - The group still morphs between the old and new size, so the new image is drawn unscaled from the bottom-right corner, which does not move.
+ * - For a notice that only moves, the old and new images are the same, so this changes nothing.
+ */
+::view-transition-old(.notice-update) {
+	animation: none;
+	opacity: 0;
+}
+
+::view-transition-new(.notice-update) {
+	animation: none;
+	inset: auto 0 0 auto;
+	width: auto;
+	height: auto;
+}
+
+/* Reduced motion: fade new and closed notices in place, and move the others at once. */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-new(.notice),
+	::view-transition-old(.notice) {
+		animation-name: notice-fade;
+	}
+
+	::view-transition-group(.notice-update) {
+		animation: none;
+	}
+}

package/ui/transition/useTransitionValue.d.ts

@@ -0,0 +1,12 @@
+import type { AnyStore } from "../../store/Store.js";
+/**
+ * Read a store's value, and re-render inside `startTransition()` when it changes, so `<ViewTransition>` boundaries animate.
+ *
+ * - `useStore()` uses `useSyncExternalStore()`, and React always applies those updates synchronously. A synchronous update never starts a view transition.
+ * - This hook copies the value into React state inside `startTransition()` instead.
+ * - Internal for now: not exported from the `shelving/ui` barrel.
+ *
+ * @param store The store to read. Its value must not be loading or failed.
+ * @returns The store's current value.
+ */
+export declare function useTransitionValue<S extends AnyStore>(store: S): S["value"];

package/ui/transition/useTransitionValue.js

@@ -0,0 +1,16 @@
+import { startTransition, useEffect, useState } from "react";
+/**
+ * Read a store's value, and re-render inside `startTransition()` when it changes, so `<ViewTransition>` boundaries animate.
+ *
+ * - `useStore()` uses `useSyncExternalStore()`, and React always applies those updates synchronously. A synchronous update never starts a view transition.
+ * - This hook copies the value into React state inside `startTransition()` instead.
+ * - Internal for now: not exported from the `shelving/ui` barrel.
+ *
+ * @param store The store to read. Its value must not be loading or failed.
+ * @returns The store's current value.
+ */
+export function useTransitionValue(store) {
+    const [value, setValue] = useState(() => store.value);
+    useEffect(() => store.subscribe((v) => startTransition(() => setValue(() => v))), [store]);
+    return value;
+}

package/ui/transition/useTransitionValue.ts

@@ -0,0 +1,18 @@
+import { startTransition, useEffect, useState } from "react";
+import type { AnyStore } from "../../store/Store.js";
+
+/**
+ * Read a store's value, and re-render inside `startTransition()` when it changes, so `<ViewTransition>` boundaries animate.
+ *
+ * - `useStore()` uses `useSyncExternalStore()`, and React always applies those updates synchronously. A synchronous update never starts a view transition.
+ * - This hook copies the value into React state inside `startTransition()` instead.
+ * - Internal for now: not exported from the `shelving/ui` barrel.
+ *
+ * @param store The store to read. Its value must not be loading or failed.
+ * @returns The store's current value.
+ */
+export function useTransitionValue<S extends AnyStore>(store: S): S["value"] {
+	const [value, setValue] = useState<S["value"]>(() => store.value);
+	useEffect(() => store.subscribe((v: S["value"]) => startTransition(() => setValue(() => v))), [store]);
+	return value;
+}