@hackcove/ui-react 0.9.2 → 0.10.1

package/dist/ChatComposer.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { Button } from "./Button.js";
+import { Cluster, ClusterGrow } from "./Cluster.js";
+import { Field } from "./Field.js";
+import { Textarea } from "./Textarea.js";
+/**
+ * An IME is still composing. Safari ends the composition before the Enter's keydown, so there
+ * `isComposing` is already false and only the 229 keyCode tells the commit from a real Enter.
+ */
+function isComposing({ nativeEvent }) {
+    return nativeEvent.isComposing || nativeEvent.keyCode === 229;
+}
+/**
+ * The box a message is typed into, with its button beside it. It keeps its own text. Enter sends
+ * the trimmed text and clears the box; Shift+Enter is a newline; empty or whitespace-only text does
+ * not send. While `busy` a reply is on its way: the button is Stop, Enter does not send, and typing
+ * carries on with the text kept for the next send.
+ */
+export function ChatComposer({ label, placeholder, disabled = false, busy = false, onSend, onStop, sendLabel = "Send", stopLabel = "Stop", ...rest }) {
+    const id = useId();
+    const box = useRef(null);
+    const [text, setText] = useState("");
+    const trimmed = text.trim();
+    const stop = busy && onStop !== undefined;
+    const send = () => {
+        if (busy || trimmed === "")
+            return;
+        onSend(trimmed);
+        setText("");
+    };
+    const onKeyDown = (event) => {
+        if (event.key !== "Enter" || event.shiftKey || isComposing(event))
+            return;
+        event.preventDefault();
+        send();
+    };
+    // One submit button that is Send or Stop, so it is the same element across the swap and keeps its
+    // focus. Send goes back to the box: the empty box has just disabled the button under the focus.
+    const onSubmit = (event) => {
+        event.preventDefault();
+        if (busy) {
+            onStop?.();
+            return;
+        }
+        send();
+        box.current?.focus();
+    };
+    return (_jsx("form", { ...rest, onSubmit: onSubmit, children: _jsxs(Cluster, { align: "end", gap: "sm", children: [_jsx(ClusterGrow, { children: _jsx(Field, { label: label, htmlFor: id, hideLabel: true, children: _jsx(Textarea, { ref: box, id: id, rows: 2, value: text, placeholder: placeholder, disabled: disabled, onChange: (event) => setText(event.target.value), onKeyDown: onKeyDown }) }) }), _jsx(Button, { type: "submit", variant: stop ? "outline" : "primary", disabled: disabled || (busy ? !stop : trimmed === ""), children: stop ? stopLabel : sendLabel })] }) }));
+}

package/dist/ChatMessage.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * One message in a chat: a bubble on the sender's side, with an optional line above it and a row of
+ * actions under it. `children` is the body as the caller wants it (plain text, which keeps its line
+ * breaks, a `Markdown`, an `Image`). `streaming` marks a reply still arriving; with no children it
+ * draws the caret alone, the pending state.
+ */
+export declare function ChatMessage({ role, author, meta, actions, streaming, children, ...rest }: {
+    /** Whose side it sits on: `user` on the right on the inset fill, `assistant` on the left on the surface. */
+    role: "user" | "assistant";
+    /** Who sent it, read first by a screen reader and drawn nowhere: alignment alone tells a screen reader nothing. Show a sender with `meta`. */
+    author: string;
+    /** A small line above the bubble: a sender and a time, already formatted. */
+    meta?: ReactNode;
+    /** A row under the bubble on the message's own side: copy, retry, a row of reaction `Pill`s. */
+    actions?: ReactNode;
+    /**
+     * The reply is still arriving: sets `aria-busy` and draws a caret after the body, which pulses
+     * unless the reader asks for reduced motion.
+     * @default false
+     */
+    streaming?: boolean | undefined;
+    /** The body. It may be empty while `streaming`. */
+    children?: ReactNode;
+} & Passthrough): ReactElement;

package/dist/ChatMessage.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+const BUBBLE = "max-w-[90%] rounded-xl px-3 py-2 text-sm text-slate-900";
+const ROLE = {
+    user: { side: "items-end", row: "justify-end", bubble: "bg-slate-100" },
+    assistant: {
+        side: "items-start",
+        row: "justify-start",
+        bubble: "border border-slate-200 bg-white",
+    },
+};
+/**
+ * One message in a chat: a bubble on the sender's side, with an optional line above it and a row of
+ * actions under it. `children` is the body as the caller wants it (plain text, which keeps its line
+ * breaks, a `Markdown`, an `Image`). `streaming` marks a reply still arriving; with no children it
+ * draws the caret alone, the pending state.
+ */
+export function ChatMessage({ role, author, meta, actions, streaming = false, children, ...rest }) {
+    const look = ROLE[role];
+    return (_jsxs("article", { ...rest, "aria-busy": streaming || undefined, className: cx("flex w-full min-w-0 flex-col gap-1", look.side), children: [_jsx("span", { className: "sr-only", children: author }), meta && _jsx("div", { className: "text-xs text-slate-500", children: meta }), _jsxs("div", { className: cx(BUBBLE, look.bubble, "wrap-anywhere whitespace-pre-wrap"), children: [children, streaming && (_jsx("span", { "aria-hidden": "true", className: "text-slate-400 motion-safe:animate-pulse", children: "\u258D" }))] }), actions && (_jsx("div", { className: cx("flex flex-wrap items-center gap-1", look.row), children: actions }))] }));
+}

package/dist/ChatThread.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/** Whether a box scrolled this far is at its bottom, give or take `BOTTOM_SLACK`. */
+export declare function isAtBottom(scrollTop: number, clientHeight: number, scrollHeight: number): boolean;
+/**
+ * The scrolling box of a chat: its children are the messages, tool cards and anything else, a gap
+ * apart. It follows the newest content unless the reader has scrolled up. It is a named region and
+ * a tab stop, so a keyboard can scroll it. It is deliberately not a live region, which would read
+ * every streamed token aloud: set `announce` when a message is finished.
+ */
+export declare function ChatThread({ label, height, empty, announce, children, ...rest }: {
+    /** Names the region. */
+    label: string;
+    /**
+     * The tallest it gets before it scrolls: `sm` 20rem, `md` 28rem, `lg` 40rem. `fill` takes the
+     * height of a parent that sets one.
+     * @default md
+     */
+    height?: "sm" | "md" | "lg" | "fill" | undefined;
+    /** Drawn instead when there are no children: an `EmptyState`. */
+    empty?: ReactNode;
+    /** Text a screen reader reads out politely when it changes. Set it when a message is finished, not on each token. */
+    announce?: string | undefined;
+    children?: ReactNode;
+} & Passthrough): ReactElement;

package/dist/ChatThread.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useLayoutEffect, useRef } from "react";
+import { cx, focusRing, themedScrollbar } from "./cx.js";
+const HEIGHT = {
+    sm: "max-h-80",
+    md: "max-h-[28rem]",
+    lg: "max-h-[40rem]",
+    fill: "h-full min-h-0",
+};
+/** How far above the very bottom, in pixels, still counts as reading the latest message. */
+const BOTTOM_SLACK = 32;
+/** Whether a box scrolled this far is at its bottom, give or take `BOTTOM_SLACK`. */
+export function isAtBottom(scrollTop, clientHeight, scrollHeight) {
+    return scrollHeight - scrollTop - clientHeight <= BOTTOM_SLACK;
+}
+/**
+ * Starts the box at the bottom and keeps it there as the content grows, until the reader scrolls
+ * up; scrolling back to the bottom re-arms it. The box is watched as well as the content: a box
+ * that gets shorter (a phone's keyboard opening under `fill`) has moved the bottom out of view too.
+ */
+function useStickToBottom() {
+    const box = useRef(null);
+    const content = useRef(null);
+    const following = useRef(true);
+    useLayoutEffect(() => {
+        const scroller = box.current;
+        if (!scroller || !content.current)
+            return undefined;
+        const follow = () => {
+            if (following.current)
+                scroller.scrollTop = scroller.scrollHeight;
+        };
+        follow();
+        // jsdom (a consumer's own tests) has no ResizeObserver.
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(follow);
+        observer.observe(content.current);
+        observer.observe(scroller);
+        return () => observer.disconnect();
+    }, []);
+    const onScroll = () => {
+        const scroller = box.current;
+        if (!scroller)
+            return;
+        following.current = isAtBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight);
+    };
+    return { box, content, onScroll };
+}
+/**
+ * The scrolling box of a chat: its children are the messages, tool cards and anything else, a gap
+ * apart. It follows the newest content unless the reader has scrolled up. It is a named region and
+ * a tab stop, so a keyboard can scroll it. It is deliberately not a live region, which would read
+ * every streamed token aloud: set `announce` when a message is finished.
+ */
+export function ChatThread({ label, height = "md", empty, announce, children, ...rest }) {
+    const { box, content, onScroll } = useStickToBottom();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "sr-only", children: announce }), _jsx("div", { ...rest, ref: box, role: "region", "aria-label": label, tabIndex: 0, onScroll: onScroll, className: cx("overflow-y-auto rounded-lg", HEIGHT[height], themedScrollbar, focusRing), children: _jsx("div", { ref: content, className: "flex flex-col gap-3 text-slate-900", children: Children.toArray(children).length === 0 ? empty : children }) })] }));
+}

package/dist/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import type { Unstyled } from "./props.js";
 import type { Size } from "./size.js";
 /**

package/dist/Checkbox.js

@@ -1,24 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { cx, focusRing } from "./cx.js";
+import { useDescription, Words } from "./labelWords.js";
 /** The label's gap and text, the box, and the box's drop onto the first line, by `size`. */
 const SIZE = {
     sm: { label: "gap-1.5 text-xs", box: "h-3.5 w-3.5", start: "mt-px" },
     md: { label: "gap-2 text-sm", box: "h-4 w-4", start: "mt-0.5" },
     lg: { label: "gap-2.5 text-base", box: "h-5 w-5", start: "mt-0.5" },
 };
-/** The label, with its muted description under it when there is one. */
-function Words({ label, description, id, }) {
-    if (id === undefined)
-        return label;
-    return (_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: label }), _jsx("span", { id: id, className: "text-xs text-slate-500", children: description })] }));
-}
-/** The description's id (none without a description) and the box's whole `aria-describedby`. */
-function useDescription(description, describedBy) {
-    const generatedId = useId();
-    const descriptionId = description != null && description !== false ? generatedId : undefined;
-    return { descriptionId, describedIds: [describedBy, descriptionId].filter(Boolean).join(" ") };
-}
 /**
  * A native checkbox with its label. Every prop but the label goes on the input.
  * `size="sm"` is `text-xs` and a smaller box, for a dense row; `size="lg"` is `text-base` and a

package/dist/ColourSchemeToggle.d.ts

@@ -9,8 +9,10 @@ import type { Size } from "./size.js";
  * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
  * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
  * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
- * The icon follows the class on `<html>` through CSS, so even without `initial` a dark page shows
- * the sun from the first frame; the button's name catches up once the client has hydrated.
+ * The icon and the button's accessible name follow the class on `<html>` through CSS (the name is
+ * two visually hidden "Switch to …" spans, one hidden by `display:none`), so even without `initial`
+ * a dark page shows the sun and is named "Switch to light theme" from the first frame, with no
+ * script. Only the tooltip catches up once the client has hydrated.
  * `store={false}` skips `localStorage`, for an app that keeps the choice in a server cookie and
  * writes it from `onChange`. Every other button prop (`id`, `data-*`, `aria-*`) goes on the button.
  */

package/dist/ColourSchemeToggle.js

@@ -1,24 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
 import { appliedColourScheme, applyColourScheme, storeColourScheme, } from "./colourScheme.js";
-import { IconButton } from "./IconButton.js";
+import { look } from "./IconButton.js";
 const sun = (_jsxs("svg", { "data-scheme-icon": "sun", viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })] }));
 const moon = (_jsx("svg", { "data-scheme-icon": "moon", viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" }) }));
 // Both icons are always drawn and the page's own class picks one, so the first frame is right before
 // React runs: a dark visitor with no cookie has the dark class on <html> from the head script, but the
 // server rendered "light". The icon shows the scheme you would switch to: the moon on a light page,
-// the sun on a dark one. The classes are the app's (`schemes`), so the rule is written here: a dark
-// page has the dark class, or, when dark has none, lacks the light one.
-function iconRules(schemes) {
+// the sun on a dark one. The button's name is picked the same way: both "Switch to … theme" spans are
+// always drawn and `display:none` takes the wrong one out of the accessible name too. The classes are
+// the app's (`schemes`), so the rule is written here: a dark page has the dark class, or, when dark
+// has none, lacks the light one.
+function schemeRules(schemes) {
     const sunIcon = '[data-scheme-icon="sun"]';
     const moonIcon = '[data-scheme-icon="moon"]';
+    const toLight = '[data-scheme-name="light"]';
+    const toDark = '[data-scheme-name="dark"]';
     let dark = "";
     if (schemes.dark !== "")
         dark = `:root[class~=${JSON.stringify(schemes.dark)}]`;
     else if (schemes.light !== "")
         dark = `:root:not([class~=${JSON.stringify(schemes.light)}])`;
-    return (`${sunIcon}{display:none}` +
-        (dark === "" ? "" : `${dark} ${sunIcon}{display:inline}${dark} ${moonIcon}{display:none}`));
+    return (`${sunIcon}{display:none}${toLight}{display:none}` +
+        (dark === ""
+            ? ""
+            : `${dark} ${sunIcon}{display:inline}${dark} ${moonIcon}{display:none}` +
+                `${dark} ${toLight}{display:inline}${dark} ${toDark}{display:none}`));
 }
 // The scheme's class on <html> is the source of truth: the head script or the server set it before React ran.
 function subscribe(onChange) {
@@ -26,6 +33,9 @@ function subscribe(onChange) {
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
 }
+// False in the server markup and while the client hydrates, true after: `title` is the one thing CSS
+// cannot choose, so it is rendered only once the client knows the scheme.
+const never = () => () => { };
 /**
  * A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`, unless you pass `schemes` or `initial`: the script knows only the `dark` class and the stored choice, so an app that sets the scheme itself leaves it out.
  *
@@ -33,18 +43,21 @@ function subscribe(onChange) {
  * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
  * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
  * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
- * The icon follows the class on `<html>` through CSS, so even without `initial` a dark page shows
- * the sun from the first frame; the button's name catches up once the client has hydrated.
+ * The icon and the button's accessible name follow the class on `<html>` through CSS (the name is
+ * two visually hidden "Switch to …" spans, one hidden by `display:none`), so even without `initial`
+ * a dark page shows the sun and is named "Switch to light theme" from the first frame, with no
+ * script. Only the tooltip catches up once the client has hydrated.
  * `store={false}` skips `localStorage`, for an app that keeps the choice in a server cookie and
  * writes it from `onChange`. Every other button prop (`id`, `data-*`, `aria-*`) goes on the button.
  */
 export function ColourSchemeToggle({ onChange, schemes = { light: "", dark: "dark" }, initial, store = true, size = "md", ...rest }) {
     const scheme = useSyncExternalStore(subscribe, () => appliedColourScheme(document.documentElement, schemes), () => initial ?? "light");
+    const hydrated = useSyncExternalStore(never, () => true, () => false);
     const next = scheme === "dark" ? "light" : "dark";
-    return (_jsxs(IconButton, { ...rest, size: size, label: `Switch to ${next} theme`, onClick: () => {
+    return (_jsxs("button", { type: "button", ...rest, title: hydrated ? `Switch to ${next} theme` : undefined, className: look({ size }), onClick: () => {
             applyColourScheme(next, document.documentElement, schemes);
             if (store)
                 storeColourScheme(next);
             onChange?.(next);
-        }, children: [_jsx("style", { children: iconRules(schemes) }), sun, moon] }));
+        }, children: [_jsx("style", { children: schemeRules(schemes) }), sun, moon, _jsx("span", { className: "sr-only", "data-scheme-name": "dark", children: "Switch to dark theme" }), _jsx("span", { className: "sr-only", "data-scheme-name": "light", children: "Switch to light theme" })] }));
 }

package/dist/Dialog.d.ts

@@ -23,6 +23,7 @@ export type DialogProps = {
 /**
  * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
  * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
- * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too. A windowed dialog is
+ * never taller than the screen: a tall body scrolls and the title and footer stay on screen.
  */
 export declare function Dialog({ title, description, children, footer, size, onClose, ...rest }: DialogProps): ReactElement;

package/dist/Dialog.js

@@ -1,24 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef } from "react";
+import { useId, useLayoutEffect, useRef, } from "react";
 import { cx } from "./cx.js";
 import { useModal } from "./modal.js";
+import { scrollStopProps, TABBABLE, useScrollStop } from "./scrollStop.js";
 import { HeaderText, SectionHeading } from "./typography.js";
 /** Shared by every size: the surface, its colours and the fade (and the scrim's) in and out. */
 const BASE = "bg-white p-0 text-slate-900 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-200 open:opacity-100 starting:open:opacity-0 backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
 /** A floating panel under the top edge: it also slides down 8px as it fades in. */
 const WINDOW = "mx-auto mt-28 max-w-[calc(100vw-2rem)] overflow-visible rounded-2xl border border-slate-200 shadow-2xl -translate-y-2 open:translate-y-0 starting:open:-translate-y-2";
 const WIDTH = { sm: "w-80", md: "w-110", lg: "w-160" };
+/**
+ * A windowed dialog is as tall as its content up to the room under its top margin (7rem) with 1rem
+ * to spare and its 1px borders, and no taller: the body scrolls inside that cap, so the title and
+ * the footer stay on screen. The cap sits on the panel inside the `<dialog>`, which stays
+ * `overflow-visible` so a `DateField` calendar portalled into it is not clipped.
+ */
+const CAP = "max-h-[calc(100dvh-8rem-2px)]";
+/**
+ * The scrolling body clips what paints outside it, a field's focus ring included. Its padding keeps
+ * the ring whole (4px: a 2px outline at a 2px offset), and the negative margins give that room back,
+ * so the body sits where an unpadded one would.
+ */
+const SCROLL_BODY = "mt-3 -mb-1 -mx-1 min-h-0 flex-1 scroll-py-1 overflow-y-auto px-1 pt-1 pb-1";
 /** The whole viewport, edge to edge: no margin, radius, border or shadow, and a column so the body can fill it. */
 const FULL = "fixed inset-0 m-0 size-full max-h-none max-w-none flex-col overflow-hidden rounded-none border-0 open:flex";
+/**
+ * The body's keyboard side. In a windowed dialog Chromium's `showModal()` focuses a scrolling box
+ * ahead of the field inside it, though the other engines pick the field: when the open took the
+ * body, the focus goes to the first thing in the dialog the keyboard can reach, where it lands in a
+ * dialog that does not scroll. And a body that overflows and holds nothing the keyboard can reach
+ * takes a tab stop, so the arrow keys can scroll it. Every other body has none: `showModal()`
+ * focuses the first focusable element, and a tab stop on the body would take that from the field
+ * inside it. `size="full"` is left as it was.
+ */
+function useScrollingBody(dialog, titleId, full) {
+    const { element: body, attach, stop } = useScrollStop();
+    const tabStop = stop && !full;
+    // After `useModal`'s own layout effect (the caller's earlier hook), so the dialog is open.
+    useLayoutEffect(() => {
+        if (!full && body && document.activeElement === body) {
+            dialog.current?.querySelector(TABBABLE)?.focus();
+        }
+    }, [body, dialog, full]);
+    const { props, ring } = scrollStopProps(tabStop, { labelledBy: titleId });
+    return {
+        attach,
+        props,
+        className: cx(full ? "mt-4 min-h-0 flex-1 overflow-auto" : SCROLL_BODY, ring),
+    };
+}
 /**
  * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
  * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
- * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too. A windowed dialog is
+ * never taller than the screen: a tall body scrolls and the title and footer stay on screen.
  */
 export function Dialog({ title, description, children, footer, size = "md", onClose, ...rest }) {
     const dialog = useRef(null);
     const titleId = useId();
     const closed = useModal(dialog, onClose);
     const full = size === "full";
-    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(BASE, size === "full" ? FULL : `${WINDOW} ${WIDTH[size]}`), children: _jsxs("div", { className: cx("p-5.5", full && "flex min-h-0 flex-1 flex-col"), children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && (_jsx("div", { className: cx("mt-4", full && "min-h-0 flex-1 overflow-auto"), children: children })), footer && (_jsx("div", { className: cx("mt-5 flex justify-end gap-2", full && "shrink-0"), children: footer }))] }) }));
+    const { attach, props: bodyProps, className: bodyClass, } = useScrollingBody(dialog, titleId, full);
+    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(BASE, size === "full" ? FULL : `${WINDOW} ${WIDTH[size]}`), children: _jsxs("div", { className: cx("flex flex-col p-5.5", full ? "min-h-0 flex-1" : CAP), children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && (_jsx("div", { ref: attach, ...bodyProps, className: bodyClass, children: children })), footer && _jsx("div", { className: "mt-5 flex shrink-0 justify-end gap-2", children: footer })] }) }));
 }

package/dist/Disclosure.d.ts

@@ -4,12 +4,21 @@ import type { Passthrough } from "./props.js";
  * A summary line with a chevron over a body that opens and closes under it. The summary is a
  * button with `aria-expanded`, and Enter and Space toggle it; the body is hidden while closed.
  * It starts closed; `defaultOpen` starts it open. It keeps its own state.
+ *
+ * `bordered` draws it as a panel: a bordered box with the summary as a roomy row across the top
+ * (the hover fill of a `ListRow`) and the body padded under a hairline, for a section that opens in
+ * place in a page of cards. Plain, it is a line of text with the body indented under it.
  */
-export declare function Disclosure({ summary, defaultOpen, children, ...rest }: {
+export declare function Disclosure({ summary, defaultOpen, bordered, children, ...rest }: {
     /** The always-visible line: the button that toggles the body. */
     summary: ReactNode;
     /** Starts with the body showing. */
     defaultOpen?: boolean | undefined;
+    /**
+     * Draws it as a bordered panel: the summary a full-width row, the body padded under a hairline.
+     * @default false
+     */
+    bordered?: boolean | undefined;
     /** The body, shown while open. */
     children: ReactNode;
 } & Passthrough): ReactElement;

package/dist/Disclosure.js

@@ -1,12 +1,22 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Disclosure as AriaDisclosure, DisclosurePanel } from "react-aria-components";
 import { Chevron } from "./Chevron.js";
-import { focusRing } from "./cx.js";
+import { cx, focusRing } from "./cx.js";
+/** The panel form's box: the Card's border, fill and shadow, clipped to its radius. */
+const FRAME = "overflow-hidden rounded-xl border border-slate-200/70 bg-white shadow-sm";
+/** The body's own box, not the panel's: a collapsed panel still draws its border and padding. */
+const PANEL = "border-t border-slate-200/70 p-4";
 /**
  * A summary line with a chevron over a body that opens and closes under it. The summary is a
  * button with `aria-expanded`, and Enter and Space toggle it; the body is hidden while closed.
  * It starts closed; `defaultOpen` starts it open. It keeps its own state.
+ *
+ * `bordered` draws it as a panel: a bordered box with the summary as a roomy row across the top
+ * (the hover fill of a `ListRow`) and the body padded under a hairline, for a section that opens in
+ * place in a page of cards. Plain, it is a line of text with the body indented under it.
  */
-export function Disclosure({ summary, defaultOpen = false, children, ...rest }) {
-    return (_jsx("div", { ...rest, children: _jsx(AriaDisclosure, { defaultExpanded: defaultOpen, children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsxs(Button, { slot: "trigger", className: `flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 text-left text-sm font-medium text-slate-900 hover:text-violet-700 ${focusRing}`, children: [_jsx(Chevron, { open: isExpanded }), summary] }), _jsx(DisclosurePanel, { className: "pt-1 pb-2 pl-6 text-sm text-slate-700", children: children })] })) }) }));
+export function Disclosure({ summary, defaultOpen = false, bordered = false, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: bordered ? FRAME : undefined, children: _jsx(AriaDisclosure, { defaultExpanded: defaultOpen, children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsxs(Button, { slot: "trigger", className: cx("flex w-full cursor-pointer items-center gap-2 text-left text-sm font-medium text-slate-900", focusRing, bordered
+                            ? "px-4 py-3 hover:bg-slate-50 focus-visible:-outline-offset-2"
+                            : "rounded-md py-1.5 hover:text-violet-700"), children: [_jsx(Chevron, { open: isExpanded }), summary] }), _jsx(DisclosurePanel, { className: cx("text-sm text-slate-700", !bordered && "pt-1 pb-2 pl-6"), children: bordered ? _jsx("div", { className: PANEL, children: children }) : children })] })) }) }));
 }

package/dist/Field.d.ts

@@ -6,7 +6,7 @@ export declare function fieldNote(hint: ReactNode, error: ReactNode): ReactEleme
  * A label above a control, with a hint or an error line under it. An error replaces the hint.
  * Inside a `FormGrid`, `span="full"` runs the field across both columns.
  */
-export declare function Field({ label, htmlFor, hint, error, span, layout, children, ...rest }: {
+export declare function Field({ label, htmlFor, hint, error, span, layout, hideLabel, children, ...rest }: {
     /** The text above the control. */
     label: ReactNode;
     /** The id of the control inside; the label's htmlFor. */
@@ -24,5 +24,13 @@ export declare function Field({ label, htmlFor, hint, error, span, layout, child
      * @default column
      */
     layout?: "column" | "row" | undefined;
+    /**
+     * Keeps the `label` in the page for assistive tech and draws no text, for a control whose purpose
+     * is plain from what surrounds it (a search box in a toolbar). `label` stays required, so the
+     * control always has a name. With `layout="row"` the field draws as a column: an empty label
+     * column helps nobody.
+     * @default false
+     */
+    hideLabel?: boolean | undefined;
     children: ReactNode;
 } & Passthrough): ReactElement;

package/dist/Field.js

@@ -14,8 +14,10 @@ export function fieldNote(hint, error) {
  * A label above a control, with a hint or an error line under it. An error replaces the hint.
  * Inside a `FormGrid`, `span="full"` runs the field across both columns.
  */
-export function Field({ label, htmlFor, hint, error, span, layout = "column", children, ...rest }) {
-    const row = layout === "row";
+export function Field({ label, htmlFor, hint, error, span, layout = "column", hideLabel = false, children, ...rest }) {
+    const row = layout === "row" && !hideLabel;
     const note = fieldNote(hint, error);
-    return (_jsxs("div", { ...rest, className: cx(row ? "grid grid-cols-[8rem_1fr] items-center gap-x-3 gap-y-1.5" : "flex flex-col gap-1.5", span === "full" && "col-span-full"), children: [_jsx("label", { htmlFor: htmlFor, className: cx("text-sm font-medium text-slate-700", row && "min-w-0 wrap-anywhere"), children: label }), children, note && row ? _jsx("div", { className: "col-start-2", children: note }) : note] }));
+    return (_jsxs("div", { ...rest, className: cx(row ? "grid grid-cols-[8rem_1fr] items-center gap-x-3 gap-y-1.5" : "flex flex-col gap-1.5", span === "full" && "col-span-full"), children: [_jsx("label", { htmlFor: htmlFor, className: hideLabel
+                    ? "sr-only"
+                    : cx("text-sm font-medium text-slate-700", row && "min-w-0 wrap-anywhere"), children: label }), children, note && row ? _jsx("div", { className: "col-start-2", children: note }) : note] }));
 }

package/dist/Icon.d.ts

@@ -14,8 +14,10 @@ type IconProps = Passthrough & {
 /**
  * One inline icon, sized to a fixed box (sm 14px, md 16px, lg 20px, `feature` 32px) and drawn in
  * `currentColor`, so it takes the text colour around it unless a `tone` says otherwise. `name`
- * picks one of the library's own icons, all drawn on one grid with one stroke (`diff`,
- * `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`, `speed`);
+ * picks one of the library's own icons, all drawn on one grid with one stroke: feature ideas
+ * (`diff`, `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`,
+ * `speed`, `search`) and UI glyphs (`chevron-right`, `chevron-down`, `close`, `external-link`,
+ * `settings`, `bell`, `check`, `plus`);
  * without a name, a bare `<svg>` child fills the box. It is decorative (`aria-hidden`) by
  * default; a `label` makes it an image with that name, for an icon that carries meaning no text
  * beside it says.

package/dist/Icon.js

@@ -11,8 +11,10 @@ const BOX = {
 /**
  * One inline icon, sized to a fixed box (sm 14px, md 16px, lg 20px, `feature` 32px) and drawn in
  * `currentColor`, so it takes the text colour around it unless a `tone` says otherwise. `name`
- * picks one of the library's own icons, all drawn on one grid with one stroke (`diff`,
- * `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`, `speed`);
+ * picks one of the library's own icons, all drawn on one grid with one stroke: feature ideas
+ * (`diff`, `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`,
+ * `speed`, `search`) and UI glyphs (`chevron-right`, `chevron-down`, `close`, `external-link`,
+ * `settings`, `bell`, `check`, `plus`);
  * without a name, a bare `<svg>` child fills the box. It is decorative (`aria-hidden`) by
  * default; a `label` makes it an image with that name, for an icon that carries meaning no text
  * beside it says.

package/dist/IconButton.d.ts

@@ -45,6 +45,8 @@ type IconButtonAsLink = IconButtonProps & {
     /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/settings" {...p} />`. */
     render: LinkRender;
 });
+/** The classes for a variant, tone and size, each at its default when left out. Shared with `ColourSchemeToggle`, which draws its own `<button>`; not exported from `index.ts`. */
+export declare function look({ variant, tone, size, }: Pick<IconButtonProps, "variant" | "tone" | "size">): string;
 /**
  * A square button holding one icon. `label` is its accessible name and tooltip. `variant="ghost"`
  * drops the border for a quiet action in a row or a toolbar; `size` matches the height of a

package/dist/IconButton.js

@@ -15,8 +15,8 @@ const LOOK = {
         ghost: "border-transparent text-red-700 hover:bg-red-50",
     },
 };
-/** The classes for a variant, tone and size, each at its default when left out. */
-function look({ variant = "outline", tone = "default", size = "md", }) {
+/** The classes for a variant, tone and size, each at its default when left out. Shared with `ColourSchemeToggle`, which draws its own `<button>`; not exported from `index.ts`. */
+export function look({ variant = "outline", tone = "default", size = "md", }) {
     return cx(BASE, SIZE[size], LOOK[tone][variant]);
 }
 function isLink(props) {

package/dist/Image.d.ts

@@ -1,8 +1,11 @@
 import { type ReactElement } from "react";
 import type { Passthrough } from "./props.js";
 import type { Size } from "./size.js";
-/** The shapes an image is cropped or letterboxed to. */
-export type ImageAspect = "square" | "4:3" | "3:2" | "16:9" | "3:4" | "9:16";
+/**
+ * The shapes an image is cropped or letterboxed to, or `natural`: no shape of its own, so the
+ * picture keeps its own proportions.
+ */
+export type ImageAspect = "square" | "4:3" | "3:2" | "16:9" | "3:4" | "9:16" | "natural";
 /** How wide an image is: `full` fills its parent; the others are 96, 160 or 256px, capped at the parent's width. */
 export type ImageWidth = Size | "full";
 /**
@@ -21,6 +24,8 @@ export type ImageProps = {
     alt: string;
     /**
      * The shape it is cropped to: `square`, `4:3`, `3:2`, `16:9`, or the portrait `3:4` and `9:16`.
+     * `natural` keeps the picture's own proportions instead, so nothing is cropped or letterboxed;
+     * the space is not reserved before it loads.
      * @default 4:3
      */
     aspect?: ImageAspect | undefined;
@@ -35,12 +40,17 @@ export type ImageProps = {
      * @default full
      */
     width?: ImageWidth | undefined;
+    /**
+     * Sets the picture on a white mat with padding, always white, in every theme: a QR code is
+     * scanned off a dark page. It shows the whole picture, as `fit="contain"`, whatever `fit` says.
+     */
+    framed?: boolean | undefined;
 } & Passthrough;
 /**
  * A picture in a fixed shape: `aspect` reserves the space before it loads, so the page does not
  * jump, and `fit` crops it to the shape or shows all of it. The corners are rounded and the frame
  * has a hairline. If the picture is missing or fails to load, a same-sized placeholder with a
- * picture mark stands in, still named by `alt`. A user's photo is an `Avatar`; a clickable
+ * picture mark stands in, still named by `alt`. `framed` mats a code or a logo in white. A user's photo is an `Avatar`; a clickable
  * thumbnail with a label is a `MediaTile`.
  */
-export declare function Image({ src, alt, aspect, fit, width, ...rest }: ImageProps): ReactElement;
+export declare function Image({ src, alt, aspect, fit, width, framed, ...rest }: ImageProps): ReactElement;