@hackcove/ui-react 0.9.2 → 0.10.0

package/dist/ListRow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
 import { Chevron } from "./Chevron.js";
 import { cx, focusRing, liftInteractive } from "./cx.js";
@@ -10,6 +10,15 @@ const ROW = `${ROW_LOOK} ${INSET_RING}`;
 const LINK_ROW = `relative ${ROW_LOOK} ${liftInteractive}`;
 const OVERLAY = `link-stretch absolute inset-0 ${INSET_RING}`;
 const STATIC = "group/row flex w-full items-center gap-3 text-sm text-slate-900";
+/**
+ * A static row with `detail`: the row's own line (the label, `trailing`, `actions`) over the detail,
+ * `leading` in a column of its own beside both, so the detail starts where the label does.
+ */
+const STATIC_DETAIL = "group/row grid w-full items-center gap-3 text-sm text-slate-900";
+const DETAIL_COLUMNS = {
+    withLeading: "grid-cols-[auto_minmax(0,1fr)]",
+    alone: "grid-cols-[minmax(0,1fr)]",
+};
 const FILL = "hover:bg-slate-50";
 const SELECTED = "bg-violet-50 hover:bg-violet-50";
 /**
@@ -32,9 +41,13 @@ function fillOf(props) {
         return ACTIVE;
     return props.static && !props.revealOnHover ? undefined : FILL;
 }
+/** `detail={open && <Panel />}` is a common way to write it, so `false` is as empty as `null`. */
+function hasDetail(detail) {
+    return detail != null && detail !== false;
+}
 function rowBase(props) {
     if (props.static)
-        return STATIC;
+        return hasDetail(props.detail) ? STATIC_DETAIL : STATIC;
     return props.href !== undefined || props.render !== undefined ? LINK_ROW : ROW;
 }
 function look(props) {
@@ -42,11 +55,17 @@ function look(props) {
     return cx(rowBase(props), PAD[size], divided && "border-t border-slate-200/70", fillOf(props), focused && FOCUSED);
 }
 function StaticRow(props) {
-    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active = false, selected, size: _s, divided: _d, static: _st, actions, revealOnHover = false, expanded: _e, href: _h, render: _r, start, label, end, ...rest } = props;
-    return (_jsxs("div", { ...rest, ...(selected ? { "aria-current": "true" } : {}), className: look(props), children: [start, label, end, actions != null && (_jsx("span", { className: cx("flex shrink-0 items-center gap-2", revealOnHover && !active && REVEAL), children: actions }))] }));
+    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active = false, selected, size: _s, divided: _d, static: _st, actions, revealOnHover = false, detail, expanded: _e, href: _h, render: _r, start, label, end, ...rest } = props;
+    const buttons = actions != null && (_jsx("span", { className: cx("flex shrink-0 items-center gap-2", revealOnHover && !active && REVEAL), children: actions }));
+    const withDetail = hasDetail(detail);
+    return (_jsx("div", { ...rest, ...(selected ? { "aria-current": "true" } : {}), className: cx(look(props), withDetail && DETAIL_COLUMNS[start ? "withLeading" : "alone"]), children: withDetail ? (_jsxs(DetailLines, { start: start, detail: detail, children: [label, end, buttons] })) : (_jsxs(_Fragment, { children: [start, label, end, buttons] })) }));
+}
+/** The cells of a static row with `detail`: `start` beside the row's line (its children), over the detail in the label's column. */
+function DetailLines({ start, detail, children, }) {
+    return (_jsxs(_Fragment, { children: [start, _jsx("div", { className: "flex min-w-0 items-center gap-3", children: children }), _jsx("div", { className: cx("min-w-0", Boolean(start) && "col-start-2"), children: detail })] }));
 }
 function LinkRow(props) {
-    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded: _e, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, start, label, end, onPointerEnter, onPointerLeave, ...rest } = props;
+    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded: _e, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, detail: _dt, start, label, end, onPointerEnter, onPointerLeave, ...rest } = props;
     const rowId = useId();
     return (_jsxs("div", { id: rowId, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: look(props), children: [renderLink({
                 ...(rest["aria-label"] === undefined ? { "aria-labelledby": rowId } : {}),
@@ -57,7 +76,7 @@ function LinkRow(props) {
             }), start, label, end] }));
 }
 function ButtonRow(props) {
-    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, href: _h, render: _r, start, label, end, ...rest } = props;
+    const { leading: _l, secondary: _sec, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, detail: _dt, href: _h, render: _r, start, label, end, ...rest } = props;
     return (_jsxs("button", { type: "button", ...rest, ...(selected ? { "aria-current": "true" } : {}), ...(expanded === undefined ? {} : { "aria-expanded": expanded }), className: look(props), children: [expanded !== undefined && _jsx(Chevron, { open: expanded }), start, label, end] }));
 }
 /**
@@ -75,6 +94,9 @@ function ButtonRow(props) {
  * `<div>`, so it can hold block content (a name over a path). `static` makes the
  * row a plain `<div>` for one that holds its own buttons (a button cannot sit inside a button or a
  * link): `actions` follow `trailing`, and `revealOnHover` shows them only on hover or focus.
+ * A `static` row also takes `detail`, content under the row that starts where the label does (a
+ * conversation that opens under its chat); `divided` draws the line above the whole row, detail
+ * included, so a list of them is `divided={index > 0}` on each.
  */
 export function ListRow(props) {
     const { leading, leadingWidth, trailing, secondary, children } = props;

package/dist/MediaTile.d.ts

@@ -11,7 +11,8 @@ export type MediaTileProps = {
     /** Muted text under the picture, e.g. when. */
     caption?: ReactNode;
     /**
-     * The shape of the thumbnail, as `Image`'s `aspect`.
+     * The shape of the thumbnail, as `Image`'s `aspect`; `natural` keeps the picture's own
+     * proportions (a chat image) and crops nothing.
      * @default 3:4
      */
     aspect?: ImageAspect | undefined;
@@ -27,11 +28,18 @@ export type MediaTileProps = {
      * non-interactive block.
      */
     onClick?: (() => void) | undefined;
+    /**
+     * Adds a round remove button on the picture's top-right corner, named "Remove" and `alt`: a
+     * photo attached to a form, until it is sent. It is its own button, beside the tile's, so a tile
+     * with `onClick` still opens its `Lightbox`.
+     */
+    onRemove?: (() => void) | undefined;
 } & Passthrough;
 /**
  * A thumbnail tile: a picture in a fixed shape with an optional label on its bottom edge and a
  * caption under it. With `onClick` the whole tile is one button, which is how a grid or a
  * `ScrollStrip` of media opens each item in a `Lightbox`. The label sits on the same near-black
- * media scrim as the Lightbox, in every theme. The thumbnail is cropped to fill its shape.
+ * media scrim as the Lightbox, in every theme. The thumbnail is cropped to fill its shape, or with
+ * `aspect="natural"` shown whole. `onRemove` adds a remove button for a tile that can be taken back out.
  */
-export declare function MediaTile({ src, alt, label, caption, aspect, width, video, onClick, ...rest }: MediaTileProps): ReactElement;
+export declare function MediaTile({ src, alt, label, caption, aspect, width, video, onClick, onRemove, ...rest }: MediaTileProps): ReactElement;

package/dist/MediaTile.js

@@ -2,18 +2,21 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cx, focusRing } from "./cx.js";
 import { Icon } from "./Icon.js";
 import { IMAGE_WIDTH, Image } from "./Image.js";
+import { CLOSE } from "./Lightbox.js";
 const PLAY = "M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.34-5.89a1.5 1.5 0 0 0 0-2.54L6.3 2.84Z";
 /**
  * A thumbnail tile: a picture in a fixed shape with an optional label on its bottom edge and a
  * caption under it. With `onClick` the whole tile is one button, which is how a grid or a
  * `ScrollStrip` of media opens each item in a `Lightbox`. The label sits on the same near-black
- * media scrim as the Lightbox, in every theme. The thumbnail is cropped to fill its shape.
+ * media scrim as the Lightbox, in every theme. The thumbnail is cropped to fill its shape, or with
+ * `aspect="natural"` shown whole. `onRemove` adds a remove button for a tile that can be taken back out.
  */
-export function MediaTile({ src, alt, label, caption, aspect = "3:4", width = "md", video = false, onClick, ...rest }) {
+export function MediaTile({ src, alt, label, caption, aspect = "3:4", width = "md", video = false, onClick, onRemove, ...rest }) {
     const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative block overflow-hidden rounded-lg", children: [_jsx(Image, { src: src, alt: alt, aspect: aspect }), video && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0 grid place-items-center", children: _jsx("span", { className: "grid size-10 place-items-center rounded-full bg-black/90 text-white", children: _jsx(Icon, { size: "lg", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: PLAY }) }) }) }) })), label && (_jsx("span", { className: "absolute inset-x-0 bottom-0 truncate bg-black/90 px-2 py-1 text-xs font-medium text-white", children: label }))] }), caption && _jsx("span", { className: "mt-1 block truncate text-xs text-slate-600", children: caption })] }));
-    const box = cx("block min-w-0 text-left", IMAGE_WIDTH[width]);
-    if (!onClick) {
-        return (_jsx("div", { ...rest, className: box, children: body }));
-    }
-    return (_jsx("button", { ...rest, type: "button", onClick: onClick, className: cx(box, "group rounded-lg", focusRing), children: body }));
+    // With a remove button the tile fills a wrapper that carries the width and the button's anchor.
+    const box = cx("block min-w-0 text-left", onRemove ? "w-full" : IMAGE_WIDTH[width]);
+    const tile = onClick ? (_jsx("button", { ...rest, type: "button", onClick: onClick, className: cx(box, "group rounded-lg", focusRing), children: body })) : (_jsx("div", { ...rest, className: box, children: body }));
+    if (!onRemove)
+        return tile;
+    return (_jsxs("div", { className: cx("relative min-w-0", IMAGE_WIDTH[width]), children: [tile, _jsx("button", { type: "button", "aria-label": `Remove ${alt}`, title: "Remove", onClick: onRemove, className: "absolute top-1 right-1 inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/90 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", children: _jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: CLOSE }) }) }) })] }));
 }

package/dist/PageLayouts.d.ts

@@ -18,9 +18,11 @@ export declare function ListLayout({ filters, empty, isEmpty, children, breadcru
  * scrolls: it sticks under AppShell's header and, if it is taller than the room left, scrolls
  * itself so its end stays reachable.
  */
-export declare function DetailLayout({ aside, stickyAside, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+export declare function DetailLayout({ aside, asideLabel, stickyAside, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
     /** The side column: one third from `lg`, below `children` on a smaller screen. */
     aside: ReactNode;
+    /** Names the aside's landmark (`aria-label`), so a page with another complementary landmark can tell them apart. It does not fold the aside. Left out, the aside is unnamed. */
+    asideLabel?: string | undefined;
     /**
      * From `lg`, keeps the aside in view under the header as the page scrolls; an aside taller than
      * the screen scrolls inside itself. Off by default, since an aside of ordinary cards may be
@@ -117,11 +119,13 @@ export declare function CardGrid({ columns, minWidth, align, as: Tag, children,
  * a page of ordinary content beside a full-height `panel`. A `bar` is a `StickyBar` above both: the
  * full width, on the surface with a bottom line, sticking under AppShell's header as the page scrolls.
  */
-export declare function FullBleedLayout({ bar, panel, padded, children, ...rest }: {
+export declare function FullBleedLayout({ bar, panel, panelLabel, padded, children, ...rest }: {
     /** A full-width row above `children` and `panel` that sticks under the header, e.g. a viewer's title and actions. `padded` does not pad it. */
     bar?: ReactNode;
     /** A side column on the right (`lg:w-72`) on a tinted surface; below `lg` it stacks under `children`. */
     panel?: ReactNode;
+    /** Names the panel's `<aside>` landmark (`aria-label`). Left out, the panel is unnamed. */
+    panelLabel?: string | undefined;
     /**
      * Pads `children` as the Container pads every other page. Off, they run to the viewport's edges.
      * A notice in the column is a plain `Callout` in a `Stack`, never a `Callout banner`.
@@ -130,7 +134,9 @@ export declare function FullBleedLayout({ bar, panel, padded, children, ...rest
     children: ReactNode;
 } & Passthrough): ReactElement;
 /** A narrow card (`max-w-md`) centred in the Container at a fixed offset from the top, for sign-in, landing, not-found and error pages. The one layout that does not share the left edge. */
-export declare function CenteredLayout({ title, subtitle, children, ...rest }: {
+export declare function CenteredLayout({ mark, title, subtitle, children, ...rest }: {
+    /** Drawn first in the card, above the title, e.g. a large status numeral. Not a heading. */
+    mark?: ReactNode;
     /** The card's `h1`. */
     title: ReactNode;
     /** A muted line under the title. */

package/dist/PageLayouts.js

@@ -4,6 +4,7 @@ import { Card } from "./Card.js";
 import { cx } from "./cx.js";
 import { PageHeader, PageHeaderContent } from "./PageHeader.js";
 import { STACK_WIDTH, Stack } from "./Stack.js";
+import { scrollStopProps, useScrollStop } from "./scrollStop.js";
 import { STICKY_ASIDE_LG, STICKY_SCROLL_LG } from "./stickyColumn.js";
 import { StickyBar } from "./StickyBar.js";
 // Compositions of the layout foundation. None sets a page width or outer padding of its own; the
@@ -18,8 +19,10 @@ export function ListLayout({ filters, empty, isEmpty = false, children, breadcru
  * scrolls: it sticks under AppShell's header and, if it is taller than the room left, scrolls
  * itself so its end stays reachable.
  */
-export function DetailLayout({ aside, stickyAside = false, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
-    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsxs("div", { ...rest, className: "grid gap-6 lg:grid-cols-3", children: [_jsx("div", { className: "min-w-0 lg:col-span-2", children: _jsx(Stack, { children: children }) }), _jsx("aside", { className: cx("min-w-0", stickyAside && STICKY_ASIDE_LG), children: _jsx("div", { className: stickyAside ? STICKY_SCROLL_LG : undefined, children: _jsx(Stack, { children: aside }) }) })] })] }));
+export function DetailLayout({ aside, asideLabel, stickyAside = false, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
+    const { attach, stop } = useScrollStop();
+    const { props, ring } = scrollStopProps(stickyAside && stop, { label: asideLabel });
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsxs("div", { ...rest, className: "grid gap-6 lg:grid-cols-3", children: [_jsx("div", { className: "min-w-0 lg:col-span-2", children: _jsx(Stack, { children: children }) }), _jsx("aside", { className: cx("min-w-0", stickyAside && STICKY_ASIDE_LG), "aria-label": asideLabel, children: _jsx("div", { ref: stickyAside ? attach : undefined, ...props, className: stickyAside ? cx(STICKY_SCROLL_LG, ring) : undefined, children: _jsx(Stack, { children: aside }) }) })] })] }));
 }
 /** A form page: header (no header `actions`), then a `max-w-3xl` column that starts at the Container's left edge (it is not re-centred), with an `actions` row at the end. Other props go on the `<form>`. */
 export function FormLayout({ actions, children, breadcrumbs, title, subtitle, tabs, ...form }) {
@@ -80,14 +83,14 @@ export function CardGrid({ columns = 3, minWidth = "md", align = "stretch", as:
  * a page of ordinary content beside a full-height `panel`. A `bar` is a `StickyBar` above both: the
  * full width, on the surface with a bottom line, sticking under AppShell's header as the page scrolls.
  */
-export function FullBleedLayout({ bar, panel, padded = false, children, ...rest }) {
-    const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: cx("min-w-0 flex-1", padded && "px-4 py-8 sm:px-6"), children: children }), panel && (_jsx("aside", { className: "w-full shrink-0 border-t border-slate-200 bg-slate-50 p-4 lg:w-72 lg:border-t-0 lg:border-l", children: panel }))] }));
+export function FullBleedLayout({ bar, panel, panelLabel, padded = false, children, ...rest }) {
+    const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: cx("min-w-0 flex-1", padded && "px-4 py-8 sm:px-6"), children: children }), panel && (_jsx("aside", { className: "w-full shrink-0 border-t border-slate-200 bg-slate-50 p-4 lg:w-72 lg:border-t-0 lg:border-l", "aria-label": panelLabel, children: panel }))] }));
     if (!bar) {
         return (_jsx("div", { ...rest, className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: row }));
     }
     return (_jsxs("div", { ...rest, className: "flex min-h-0 flex-1 flex-col", children: [_jsx(StickyBar, { children: bar }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: row })] }));
 }
 /** A narrow card (`max-w-md`) centred in the Container at a fixed offset from the top, for sign-in, landing, not-found and error pages. The one layout that does not share the left edge. */
-export function CenteredLayout({ title, subtitle, children, ...rest }) {
-    return (_jsx("div", { ...rest, className: "mx-auto w-full max-w-md pt-16", children: _jsx(Card, { as: "div", children: _jsxs(Stack, { children: [_jsx(PageHeaderContent, { title: title, subtitle: subtitle }), children] }) }) }));
+export function CenteredLayout({ mark, title, subtitle, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: "mx-auto w-full max-w-md pt-16", children: _jsx(Card, { as: "div", children: _jsxs(Stack, { children: [mark, _jsx(PageHeaderContent, { title: title, subtitle: subtitle }), children] }) }) }));
 }

package/dist/SideColumn.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+export type SideColumnWidth = "sm" | "md";
+/**
+ * A main area beside a side column of a fixed width, in the Container the page already has: from
+ * `lg` the `aside` is `asideWidth` wide on the right and `children` take the room left; below `lg`
+ * the aside stacks under `children`. It sets no page width, padding or header of its own, so it
+ * sits inside a layout, a `Card` or a panel. A side column that is a share of the page and sits
+ * under a page header is `DetailLayout`'s aside; a rail of links on the left is `SidebarLayout`.
+ *
+ * `asideLabel` is for an aside that should not take the phone's screen: below `lg` it folds,
+ * closed, behind a native disclosure of that name, and from `lg` it is the same column, always
+ * shown. The aside stays mounted while folded, so a conversation or a draft inside it is kept.
+ */
+export declare function SideColumn({ aside, asideWidth, asideLabel, children, ...rest }: {
+    /** The side column: `asideWidth` wide on the right from `lg`, under `children` below it. */
+    aside: ReactNode;
+    /**
+     * The aside's width from `lg`: `sm` 18rem or `md` 24rem.
+     * @default md
+     */
+    asideWidth?: SideColumnWidth | undefined;
+    /** Folds the aside behind a disclosure with this name below `lg`, and names the `<aside>` landmark. Left out, the aside is always shown and unnamed. */
+    asideLabel?: string | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/SideColumn.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { FoldedColumn } from "./foldedColumn.js";
+/** The grid from `lg`: the main area takes the room left, the aside is exactly this wide. */
+const COLUMNS = {
+    sm: "lg:grid-cols-[minmax(0,1fr)_18rem]",
+    md: "lg:grid-cols-[minmax(0,1fr)_24rem]",
+};
+/**
+ * A main area beside a side column of a fixed width, in the Container the page already has: from
+ * `lg` the `aside` is `asideWidth` wide on the right and `children` take the room left; below `lg`
+ * the aside stacks under `children`. It sets no page width, padding or header of its own, so it
+ * sits inside a layout, a `Card` or a panel. A side column that is a share of the page and sits
+ * under a page header is `DetailLayout`'s aside; a rail of links on the left is `SidebarLayout`.
+ *
+ * `asideLabel` is for an aside that should not take the phone's screen: below `lg` it folds,
+ * closed, behind a native disclosure of that name, and from `lg` it is the same column, always
+ * shown. The aside stays mounted while folded, so a conversation or a draft inside it is kept.
+ */
+export function SideColumn({ aside, asideWidth = "md", asideLabel, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx("grid grid-cols-1 gap-6", COLUMNS[asideWidth]), children: [_jsx("div", { className: "min-w-0", children: children }), _jsx("aside", { className: "min-w-0", "aria-label": asideLabel, children: asideLabel === undefined ? (aside) : (_jsx(FoldedColumn, { from: "lg", label: asideLabel, children: aside })) })] }));
+}

package/dist/SidebarLayout.d.ts

@@ -9,13 +9,16 @@ import type { Passthrough } from "./props.js";
  * a rail taller than the screen scrolls itself, so its last link is reachable. Below `md` it stacks
  * above the canvas and nothing sticks. A long rail sets `railLabel`:
  * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
- * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * phone, and from `md` it is the same rail; `railLabel` also names the rail's `<aside>` landmark. Upgrading from 0.2: the rail no longer has a fill, a
  * border or a fixed height, and it no longer sits beside the canvas on a phone.
  */
 export declare function SidebarLayout({ rail, railLabel, children, ...rest }: {
     /** The links beside the canvas, usually a `Tabs variant="pill" orientation="vertical"`. */
     rail: ReactNode;
-    /** Folds the rail behind a disclosure with this name below `md` (a long rail). Left out, the rail is always open. */
+    /**
+     * Folds the rail behind a disclosure with this name below `md` (a long rail), and names the rail's
+     * `<aside>` landmark. Left out, the rail is always open and the aside is unnamed.
+     */
     railLabel?: string | undefined;
     children: ReactNode;
 } & Passthrough): ReactElement;

package/dist/SidebarLayout.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, focusRing } from "./cx.js";
+import { cx } from "./cx.js";
+import { FoldedColumn } from "./foldedColumn.js";
+import { scrollStopProps, useScrollStop } from "./scrollStop.js";
 import { STICKY_ASIDE_MD, STICKY_SCROLL_MD } from "./stickyColumn.js";
 /**
  * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
@@ -10,9 +12,11 @@ import { STICKY_ASIDE_MD, STICKY_SCROLL_MD } from "./stickyColumn.js";
  * a rail taller than the screen scrolls itself, so its last link is reachable. Below `md` it stacks
  * above the canvas and nothing sticks. A long rail sets `railLabel`:
  * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
- * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * phone, and from `md` it is the same rail; `railLabel` also names the rail's `<aside>` landmark. Upgrading from 0.2: the rail no longer has a fill, a
  * border or a fixed height, and it no longer sits beside the canvas on a phone.
  */
 export function SidebarLayout({ rail, railLabel, children, ...rest }) {
-    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: cx("w-full shrink-0 md:w-56", STICKY_ASIDE_MD), children: _jsx("div", { className: STICKY_SCROLL_MD, children: railLabel === undefined ? (rail) : (_jsxs("details", { className: "group md:[&::details-content]:[content-visibility:visible]", children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 md:hidden [&::-webkit-details-marker]:hidden", focusRing), children: [railLabel, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: "mt-2 md:mt-0", children: rail })] })) }) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+    const { attach, stop } = useScrollStop();
+    const { props, ring } = scrollStopProps(stop, { label: railLabel });
+    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: cx("w-full shrink-0 md:w-56", STICKY_ASIDE_MD), "aria-label": railLabel, children: _jsx("div", { ref: attach, ...props, className: cx(STICKY_SCROLL_MD, ring), children: railLabel === undefined ? (rail) : (_jsx(FoldedColumn, { from: "md", label: railLabel, children: rail })) }) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
 }

package/dist/Stack.d.ts

@@ -62,13 +62,21 @@ type StackProps = StackBase & (({
 } & Unstyled<Omit<ComponentPropsWithoutRef<"ol">, "children">>));
 /**
  * A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside
- * it. Its blocks are `gap` apart, `md` by default as in a `Stack`.
+ * it. Its blocks are `gap` apart, `md` by default as in a `Stack`. `rule` draws a hairline under the
+ * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
+ * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export declare function Section({ title, actions, gap, width, children, ...rest }: {
+export declare function Section({ title, actions, rule, gap, width, children, ...rest }: {
     /** A `SectionHeading` at the top, which names the section. */
     title?: ReactNode;
     /** Buttons or links at the end of the title row. */
     actions?: ReactNode;
+    /**
+     * A hairline under the title row across the section's width, `actions` included. Needs a `title`
+     * or `actions`.
+     * @default false
+     */
+    rule?: boolean | undefined;
     /**
      * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
      * @default md

package/dist/Stack.js

@@ -49,9 +49,11 @@ function Box({ tag: Tag, ...props }) {
 }
 /**
  * A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside
- * it. Its blocks are `gap` apart, `md` by default as in a `Stack`.
+ * it. Its blocks are `gap` apart, `md` by default as in a `Stack`. `rule` draws a hairline under the
+ * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
+ * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export function Section({ title, actions, gap = "md", width = "default", children, ...rest }) {
+export function Section({ title, actions, rule = false, gap = "md", width = "default", children, ...rest }) {
     const titleId = useId();
-    return (_jsxs(Stack, { as: "section", ...rest, gap: gap, width: width, "aria-labelledby": title ? titleId : rest["aria-labelledby"], children: [(title || actions) && (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
+    return (_jsxs(Stack, { as: "section", ...rest, gap: gap, width: width, "aria-labelledby": title ? titleId : rest["aria-labelledby"], children: [(title || actions) && (_jsxs("div", { className: cx("flex items-center justify-between gap-4", rule && "border-b border-slate-200/70 pb-2"), children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
 }

package/dist/StatusPages.d.ts

@@ -6,15 +6,25 @@ type StatusPageProps = {
     title?: ReactNode;
     /** Replaces the default body copy. */
     children?: ReactNode;
-    /** The primary action; the home link turns outline beside it. */
+    /**
+     * The primary action; the home link turns outline beside it. This is the one way to a button
+     * worded differently: pass `action` and leave out `homeHref`, so there is no "Back to home" link.
+     * There is no label prop.
+     */
     action?: ReactNode;
     /** Adds a "Back to home" button linking here. With neither this nor `renderHome` there is no home link. */
     homeHref?: string;
     /** Draws the home link with the app's own router `<Link>`, as on `Button`. */
     renderHome?: LinkRender;
 } & Passthrough;
-/** 404: the page is not there. */
-export declare function NotFound(props: StatusPageProps): ReactElement;
+/**
+ * 404: the page is not there. `numeral` draws a large "404" above the title, for a site whose 404
+ * is a designed page; the digits are fixed. Off, the page is the title and copy alone.
+ */
+export declare function NotFound({ numeral, ...props }: StatusPageProps & {
+    /** Draws a large "404" above the title. Off by default. The digits are fixed: there is no text prop. */
+    numeral?: boolean | undefined;
+}): ReactElement;
 /**
  * 500 or any failure. `detail` is the error text, shown in a `CodeBlock` under the copy; pass it
  * only where a reader may see it (a request id, a message), never a stack trace. `onRetry` adds a

package/dist/StatusPages.js

@@ -11,17 +11,20 @@ function homeLink(variant, href, render) {
         return null;
     return (_jsx(Button, { href: href, variant: variant, children: "Back to home" }));
 }
-function StatusPage({ copy, title, children, action, homeHref, renderHome, extra, ...rest }) {
+function StatusPage({ copy, title, children, action, homeHref, renderHome, extra, mark, ...rest }) {
     const home = homeLink(action === undefined ? "primary" : "outline", homeHref, renderHome);
-    return (_jsxs(CenteredLayout, { ...rest, title: title ?? copy.title, subtitle: children ?? copy.body, children: [extra, (action || home) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [action, home] }))] }));
+    return (_jsxs(CenteredLayout, { ...rest, mark: mark, title: title ?? copy.title, subtitle: children ?? copy.body, children: [extra, (action || home) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [action, home] }))] }));
 }
 const retry = (onRetry) => onRetry && _jsx(Button, { onClick: onRetry, children: "Try again" });
-/** 404: the page is not there. */
-export function NotFound(props) {
+/**
+ * 404: the page is not there. `numeral` draws a large "404" above the title, for a site whose 404
+ * is a designed page; the digits are fixed. Off, the page is the title and copy alone.
+ */
+export function NotFound({ numeral = false, ...props }) {
     return (_jsx(StatusPage, { copy: {
             title: "Page not found",
             body: "The page you are looking for does not exist or has moved.",
-        }, ...props }));
+        }, mark: numeral ? (_jsx("p", { className: "text-6xl font-semibold tracking-tight text-violet-600", children: "404" })) : undefined, ...props }));
 }
 /**
  * 500 or any failure. `detail` is the error text, shown in a `CodeBlock` under the copy; pass it

package/dist/Switch.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+type Naming = {
+    /** The text beside the switch; the whole label is a click target. */
+    label: NonNullable<ReactNode>;
+    "aria-label"?: string | undefined;
+} | {
+    label?: undefined;
+    /** A bare switch (a table cell) has no words to name it: this is its name. */
+    "aria-label": string;
+};
+type SwitchProps = Naming & {
+    /** Whether it is on. The caller owns it: there is no uncontrolled mode. */
+    checked: boolean;
+    /** Called with the next value when the person flips it. Not called while `busy`. */
+    onChange: (checked: boolean) => void;
+    /** A muted line under the label that says more. It is the switch's `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * The label's text size and the switch with it.
+     * @default md
+     */
+    size?: Size | undefined;
+    /**
+     * The change is being saved: `aria-busy`, and a click or a key does nothing. It keeps its colour
+     * and its focus, which a native `disabled` would lose when the save starts.
+     */
+    busy?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "type" | "role" | "children" | "onChange" | "aria-checked" | "aria-busy" | "aria-disabled" | "aria-label">>;
+/**
+ * An on/off switch for a setting that takes effect at once, usually by saving it to a server: a
+ * native `<button role="switch" aria-checked>`. It is controlled: the caller owns `checked` and
+ * flips it in `onChange`. A value sent with a form is a `Checkbox`, not a Switch. Give it a `label`
+ * (the whole label is the click target), or in a table cell leave the label out and name it with
+ * `aria-label`. `description` is a muted line under the label, and the switch's
+ * `aria-describedby`. `size` is `sm`, `md` (the default) or `lg`. `busy` is for the save in
+ * flight: clicks and keys do nothing, and the switch keeps its colour and its focus. `disabled` is
+ * the native one, washed out.
+ */
+export declare function Switch({ label, description, size, busy, "aria-describedby": describedBy, ...rest }: SwitchProps): ReactElement;
+export {};

package/dist/Switch.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { useDescription, Words } from "./labelWords.js";
+/**
+ * The label's gap and text, the track, its thumb and the thumb's slide, by `size`. The track is a
+ * 2px border plus 2px of padding, so the thumb is the track's height less 8px and slides the
+ * track's width less 8px less its own width.
+ */
+const SIZE = {
+    sm: { label: "gap-2 text-xs", track: "h-5 w-9", thumb: "h-3 w-3", slide: "translate-x-4" },
+    md: { label: "gap-2.5 text-sm", track: "h-6 w-11", thumb: "h-4 w-4", slide: "translate-x-5" },
+    lg: { label: "gap-3 text-base", track: "h-7 w-13", thumb: "h-5 w-5", slide: "translate-x-6" },
+};
+// Off is an outline of the text colour with a thumb of the same colour; on is the accent filled,
+// with a thumb in its pale text colour. `border-current` and `bg-current` are no palette colour.
+const OFF = "border-current text-slate-500";
+const ON = "border-violet-600 bg-violet-600 text-violet-50";
+/** `not-allowed` for a disabled switch, `progress` for a busy one, and the pointer otherwise. */
+function cursorOf(disabled, busy) {
+    if (disabled)
+        return "cursor-not-allowed";
+    return busy ? "cursor-progress" : "cursor-pointer";
+}
+/** A disabled switch washes out as a Button does; a busy one is only a little dimmer. */
+function washOf(disabled, busy) {
+    return cx(cursorOf(disabled, busy), disabled && "opacity-50", busy && "opacity-85");
+}
+/** The switch itself: the track, with the thumb in it. */
+function Track({ checked, onChange, size, busy, disabled, onClick, className, ...rest }) {
+    const { track, thumb, slide } = SIZE[size];
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-busy": busy || undefined, "aria-disabled": busy || undefined, disabled: disabled, className: cx("inline-flex shrink-0 items-center rounded-full border-2 p-0.5", track, checked ? ON : OFF, className, focusRing), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || busy)
+                return;
+            onChange(!checked);
+        }, ...rest, children: _jsx("span", { "aria-hidden": "true", className: cx("block rounded-full bg-current transition-transform motion-reduce:transition-none", thumb, checked ? slide : "translate-x-0") }) }));
+}
+/**
+ * An on/off switch for a setting that takes effect at once, usually by saving it to a server: a
+ * native `<button role="switch" aria-checked>`. It is controlled: the caller owns `checked` and
+ * flips it in `onChange`. A value sent with a form is a `Checkbox`, not a Switch. Give it a `label`
+ * (the whole label is the click target), or in a table cell leave the label out and name it with
+ * `aria-label`. `description` is a muted line under the label, and the switch's
+ * `aria-describedby`. `size` is `sm`, `md` (the default) or `lg`. `busy` is for the save in
+ * flight: clicks and keys do nothing, and the switch keeps its colour and its focus. `disabled` is
+ * the native one, washed out.
+ */
+export function Switch({ label, description, size = "md", busy = false, "aria-describedby": describedBy, ...rest }) {
+    const { descriptionId, describedIds } = useDescription(description, describedBy);
+    const wash = washOf(rest.disabled, busy);
+    const track = (_jsx(Track, { ...rest, size: size, busy: busy, className: label === undefined ? wash : cursorOf(rest.disabled, busy), ...(describedIds ? { "aria-describedby": describedIds } : {}) }));
+    if (label === undefined)
+        return track;
+    const start = descriptionId !== undefined;
+    return (_jsxs("label", { className: cx("inline-flex text-slate-700", start ? "items-start" : "items-center", SIZE[size].label, wash), children: [track, _jsx("span", { className: cx(start && "mt-0.5"), children: _jsx(Words, { label: label, description: description, id: descriptionId }) })] }));
+}

package/dist/TableEditCell.d.ts

@@ -1,13 +1,15 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { TableCell } from "./Table.js";
 /**
- * A `TableCell` whose value opens an editor in place. It shows `children` as a button with a dotted
- * underline; a click, Enter or Space swaps it for `renderEditor(close)` and moves the focus into the
- * editor. The cell keeps its own open state. The editor calls `close` when it has saved, and Esc
- * closes it: both put the focus back on the value. A press outside it or Tab out of it closes it too and leaves the
- * focus where it went, so the editor saves its value on its own change or submit, never on a close.
- * Put the control in the cell itself, not in a popover of its own, which counts as outside. Takes
- * `TableCell`'s `align`, `tone`, `numeric`, `mono`, `indent` and `secondary`.
+ * A `TableCell` whose value opens an editor in place: a cell that holds one `InlineEdit` and
+ * nothing else. It shows `children` as a button with a dotted underline; a click, Enter or Space
+ * swaps it for `renderEditor(close)` and moves the focus into the editor. The editor calls `close`
+ * when it has saved, and Esc closes it: both put the focus back on the value. A press outside it or
+ * Tab out of it closes it too and leaves the focus where it went, so the editor saves its value on
+ * its own change or submit, never on a close. Put the control in the cell itself, not in a popover
+ * of its own, which counts as outside. Takes `TableCell`'s `align`, `tone`, `numeric`, `mono`,
+ * `indent` and `secondary`. For an edit trigger in a cell that holds other content too, put an
+ * `InlineEdit` in a `TableCell`.
  */
 export declare function TableEditCell({ label, renderEditor, children, ...cell }: {
     /** What the button does, for a screen reader, heard after the value: "Edit category". It also names the editor. */