@hackcove/ui-react 0.9.1 → 0.10.0

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/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;

package/dist/Image.js

@@ -9,7 +9,10 @@ const ASPECT = {
     "16:9": "aspect-video",
     "3:4": "aspect-[3/4]",
     "9:16": "aspect-[9/16]",
+    natural: "h-auto",
 };
+/** What stands in for a `natural` picture that has none (yet): it has no proportions to keep. */
+const PLACEHOLDER_ASPECT = "aspect-[4/3]";
 /**
  * `full` is the parent's width; a size is a real width that a narrower parent still caps. It is
  * a width and not a `max-width`, so it holds inside a shrink-to-fit parent, where a placeholder
@@ -22,21 +25,34 @@ export const IMAGE_WIDTH = {
     full: "w-full",
 };
 /** Every image sits on the inset surface with a hairline, so a letterbox or a pale picture has an edge. */
-const FRAME = "block rounded-lg border border-slate-200 bg-slate-100";
+const FRAME = "block rounded-lg border border-slate-200";
+const INSET = "bg-slate-100";
+/**
+ * The white mat of `framed`. `bg-white/100` is the palette's media-matte role: a plain `bg-white` is
+ * the surface, which a dark theme darkens, and a scanner needs the code on white. Every theme keeps
+ * this one white, as it keeps the Lightbox scrim black.
+ */
+const MATTE = "bg-white/100 p-3";
 const PICTURE = "M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.22a.75.75 0 0 0-1.06 0l-1.91 1.91.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.09a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z";
+/** The fill and the fit of a picture: `framed` is a white mat around all of it. */
+function pictureLook(fit, framed) {
+    if (framed)
+        return cx(MATTE, "object-contain");
+    return cx(INSET, fit === "cover" ? "object-cover" : "object-contain");
+}
 /**
  * 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 function Image({ src, alt, aspect = "4:3", fit = "cover", width = "full", ...rest }) {
+export function Image({ src, alt, aspect = "4:3", fit = "cover", width = "full", framed = false, ...rest }) {
     // The `src` that failed to load: a new `src` gets its own try, so a broken one never sticks.
     const [failedSrc, setFailedSrc] = useState();
-    const box = cx(FRAME, ASPECT[aspect], IMAGE_WIDTH[width]);
+    const box = cx(FRAME, IMAGE_WIDTH[width]);
     if (src && src !== failedSrc) {
-        return (_jsx("img", { ...rest, src: src, alt: alt, className: cx(box, fit === "cover" ? "object-cover" : "object-contain"), onError: () => setFailedSrc(src) }));
+        return (_jsx("img", { ...rest, src: src, alt: alt, className: cx(box, ASPECT[aspect], pictureLook(fit, framed)), onError: () => setFailedSrc(src) }));
     }
-    return (_jsx("span", { ...rest, ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), className: cx(box, "grid place-items-center text-slate-400"), children: _jsx(Icon, { size: "lg", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: PICTURE }) }) }) }));
+    return (_jsx("span", { ...rest, ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), className: cx(box, aspect === "natural" ? PLACEHOLDER_ASPECT : ASPECT[aspect], INSET, "grid place-items-center text-slate-400"), children: _jsx(Icon, { size: "lg", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: PICTURE }) }) }) }));
 }

package/dist/InlineEdit.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * A value that opens an editor in place, as a part inside a `TableCell` that holds more than the
+ * value (an edit trigger in a column cell with other content, say). 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 part 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 part itself, not in a popover of its own, which counts as outside. It takes
+ * the alignment of the cell around it. It is a block that bleeds half a rem into the padding of
+ * the cell it sits in, so it belongs inside a `TableCell`; a cell that holds only the value is a
+ * `TableEditCell`. `data-*` and `aria-*` go on the button, and on the editor's group while open.
+ */
+export declare function InlineEdit({ label, renderEditor, children, ...rest }: {
+    /** What the button does, for a screen reader, heard after the value: "Edit category". It also names the editor. */
+    label: string;
+    /** The control that edits the value, drawn while open. `close` shuts it and returns the focus to the value. */
+    renderEditor: (close: () => void) => ReactNode;
+    /** The value, shown while closed. */
+    children: ReactNode;
+} & Omit<Passthrough, "aria-label" | "aria-labelledby">): ReactElement;

package/dist/InlineEdit.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cx, focusRing } from "./cx.js";
+/** What takes the focus when the editor opens, unless the editor already took it (`autoFocus`). */
+const FOCUSABLE = "input, select, textarea, button, a[href]";
+/** Whether `target` is a node outside `box`. */
+function isOutside(box, target) {
+    return target instanceof Node && box !== null && !box.contains(target);
+}
+/** Closes the editor when a press lands outside `box`, for as long as `open`. */
+function useDismissOnOutsidePress(box, open, dismiss) {
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onPress = (event) => {
+            if (isOutside(box.current, event.target))
+                dismiss();
+        };
+        document.addEventListener("pointerdown", onPress);
+        return () => document.removeEventListener("pointerdown", onPress);
+    }, [box, open, dismiss]);
+}
+/**
+ * A value that opens an editor in place, as a part inside a `TableCell` that holds more than the
+ * value (an edit trigger in a column cell with other content, say). 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 part 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 part itself, not in a popover of its own, which counts as outside. It takes
+ * the alignment of the cell around it. It is a block that bleeds half a rem into the padding of
+ * the cell it sits in, so it belongs inside a `TableCell`; a cell that holds only the value is a
+ * `TableEditCell`. `data-*` and `aria-*` go on the button, and on the editor's group while open.
+ */
+export function InlineEdit({ label, renderEditor, children, ...rest }) {
+    const [phase, setPhase] = useState("closed");
+    const open = phase === "open";
+    const box = useRef(null);
+    const trigger = useRef(null);
+    const dismiss = useCallback(() => setPhase("closed"), []);
+    const close = () => setPhase("returning");
+    useDismissOnOutsidePress(box, open, dismiss);
+    useEffect(() => {
+        if (phase === "returning")
+            trigger.current?.focus();
+        if (phase === "open" && !box.current?.contains(document.activeElement))
+            box.current?.querySelector(FOCUSABLE)?.focus();
+    }, [phase]);
+    const onKeyDown = (event) => {
+        if (event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+    };
+    return open ? (_jsx("div", { ...rest, ref: box, role: "group", "aria-label": label, className: "-mx-2 -my-1", onKeyDown: onKeyDown, onBlur: (event) => {
+            if (isOutside(event.currentTarget, event.relatedTarget))
+                dismiss();
+        }, children: renderEditor(close) })) : (_jsxs("button", { ...rest, ref: trigger, type: "button", onClick: () => setPhase("open"), className: cx("-mx-2 -my-1 block w-[calc(100%+1rem)] cursor-pointer rounded-md px-2 py-1 [text-align:inherit] underline decoration-dotted underline-offset-4 transition hover:bg-slate-100", focusRing), children: [children, _jsxs("span", { className: "sr-only", children: [" ", label] })] }));
+}

package/dist/KeyValueList.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 import type { Unstyled } from "./props.js";
+import { type TextTone } from "./typography.js";
 type KeyValueAlign = "end" | "start";
 /**
  * A definition list of label/value rows. By default each label is on the left and its value
@@ -14,12 +15,18 @@ export declare function KeyValueList({ align, children, ...rest }: {
     align?: KeyValueAlign;
     children: ReactNode;
 } & Unstyled<HTMLAttributes<HTMLDListElement>>): ReactElement;
-/** One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an `align="start"` list). `total` makes it the sum row: a rule above, strong text. */
-export declare function KeyValue({ label, total, children, ...rest }: {
+/**
+ * One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an
+ * `align="start"` list). `total` makes it the sum row: a rule above, strong text. `tone` colours the
+ * value, on any row: a total that does not reconcile is `total tone="warn"`.
+ */
+export declare function KeyValue({ label, total, tone, children, ...rest }: {
     /** The term, on the left. */
     label: ReactNode;
     /** The sum the rows above add up to: a firm rule above it and the label and value in strong ink. */
     total?: boolean | undefined;
+    /** The meaning of the value, in the colours of a `Table` cell's `tone` (`muted`, `positive`, `warn`, `danger`, `info`); the label keeps its ink. Colour alone does not say it, so the value or the label says it too: a sign, a word. */
+    tone?: TextTone | undefined;
     children: ReactNode;
 } & Unstyled<HTMLAttributes<HTMLDivElement>>): ReactElement;
 export {};

package/dist/KeyValueList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, } from "react";
 import { cx } from "./cx.js";
+import { TEXT_TONE } from "./typography.js";
 const AlignContext = createContext("end");
 /**
  * A definition list of label/value rows. By default each label is on the left and its value
@@ -12,8 +13,12 @@ export function KeyValueList({ align = "end", children, ...rest }) {
             ? "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1.5"
             : "flex flex-col gap-1.5", "text-sm"), children: _jsx(AlignContext.Provider, { value: align, children: children }) }));
 }
-/** One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an `align="start"` list). `total` makes it the sum row: a rule above, strong text. */
-export function KeyValue({ label, total = false, children, ...rest }) {
+/**
+ * One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an
+ * `align="start"` list). `total` makes it the sum row: a rule above, strong text. `tone` colours the
+ * value, on any row: a total that does not reconcile is `total tone="warn"`.
+ */
+export function KeyValue({ label, total = false, tone, children, ...rest }) {
     const start = useContext(AlignContext) === "start";
-    return (_jsxs("div", { ...rest, className: cx(start ? "col-span-2 grid grid-cols-subgrid" : "flex justify-between gap-3", total && "border-t border-slate-300 pt-1.5 font-semibold"), children: [_jsx("dt", { className: total ? "text-slate-900" : "text-slate-600", children: label }), _jsx("dd", { className: cx(!start && "text-right", "tabular-nums"), children: children })] }));
+    return (_jsxs("div", { ...rest, className: cx(start ? "col-span-2 grid grid-cols-subgrid" : "flex justify-between gap-3", total && "border-t border-slate-300 pt-1.5 font-semibold"), children: [_jsx("dt", { className: total ? "text-slate-900" : "text-slate-600", children: label }), _jsx("dd", { className: cx(!start && "text-right", "tabular-nums", tone && TEXT_TONE[tone]), children: children })] }));
 }

package/dist/Lightbox.d.ts

@@ -1,5 +1,7 @@
 import { type ReactElement, type ReactNode } from "react";
 import type { Passthrough } from "./props.js";
+/** The cross glyph on a 20px grid; `MediaTile`'s remove button draws the same one. */
+export declare const CLOSE = "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z";
 export type LightboxProps = {
     /** The viewer's accessible name, e.g. "Photo from Anna". */
     label: string;

package/dist/Lightbox.js

@@ -9,7 +9,8 @@ import { useModal } from "./modal.js";
 const VIEWER = "fixed inset-0 m-0 size-full max-h-none max-w-none flex-col border-0 bg-black/90 p-0 text-white opacity-0 transition-[opacity,overlay,display] transition-discrete duration-200 open:flex open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none";
 /** A round control on the scrim, with a light focus ring: the accent is too dark on near-black in a light theme. */
 const CONTROL = "inline-flex size-11 shrink-0 items-center justify-center rounded-full text-white transition hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white";
-const CLOSE = "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z";
+/** The cross glyph on a 20px grid; `MediaTile`'s remove button draws the same one. */
+export const CLOSE = "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z";
 const PREVIOUS = "M12.78 4.22a.75.75 0 0 1 0 1.06L8.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z";
 const NEXT = "M7.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L11.94 10 7.22 5.28a.75.75 0 0 1 0-1.06Z";
 /** A round icon button on the scrim, named by `label`, which is also its tooltip. */

package/dist/ListRow.d.ts

@@ -45,6 +45,7 @@ type NotStatic = {
     static?: undefined;
     actions?: undefined;
     revealOnHover?: undefined;
+    detail?: undefined;
 };
 type ListRowButtonProps = Shared & NotStatic & {
     /**
@@ -86,6 +87,13 @@ type ListRowStaticProps = Shared & {
      * wall of buttons. A touch screen has no hover, so they are always shown there.
      */
     revealOnHover?: boolean | undefined;
+    /**
+     * Content under the row, lined up with the label rather than the row's edge (past `leading`): the
+     * panel of a row that opens in place, such as a conversation under its chat. It sits inside the
+     * row, so `divided`, the fill and `revealOnHover` cover it too. Only a `static` row takes it: a
+     * button or a link row cannot hold controls.
+     */
+    detail?: ReactNode | undefined;
     expanded?: undefined;
     href?: undefined;
     render?: undefined;
@@ -106,6 +114,9 @@ export type ListRowProps = ListRowButtonProps | ListRowLinkProps | ListRowStatic
  * `<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 declare function ListRow(props: ListRowProps): ReactElement;
 export {};