@hackcove/ui-react 0.9.2 → 0.10.1

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/Input.js

@@ -13,7 +13,7 @@ export function Input({ icon, prefix, size = "md", width = "full", align = "star
         return _jsx(SearchInput, { ...rest, icon: icon, size: size, width: width, align: align });
     }
     if (prefix !== undefined) {
-        return (_jsx(PrefixShell, { prefix: prefix, size: size, width: width, disabled: rest.disabled, children: _jsx("input", { ...rest, className: cx("min-w-0 flex-1 bg-transparent px-1 outline-none placeholder:text-slate-400", CONTROL_ALIGN[align]) }) }));
+        return (_jsx(PrefixShell, { prefix: prefix, size: size, width: width, disabled: rest.disabled, children: _jsx("input", { ...rest, className: cx("min-w-0 flex-1 bg-transparent px-1 text-ellipsis outline-none placeholder:text-slate-400", CONTROL_ALIGN[align]) }) }));
     }
     if (icon === undefined) {
         return (_jsx("input", { ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x, CONTROL_ALIGN[align]) }));

package/dist/InputShell.d.ts

@@ -1,6 +1,14 @@
 import type { ReactElement, ReactNode } from "react";
 import { type ControlProps } from "./control.js";
-/** The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package. */
+/**
+ * The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package.
+ *
+ * Inside a Card or row (`liftInteractive`, which is `isolate`) the field is lifted to `z-10`, and
+ * its opaque background would paint over a z-auto icon. So the icon ranks `z-20` there. It is
+ * scoped to an `isolate` ancestor so a field elsewhere on the page never outranks AppShell's
+ * sticky header (`z-10`). The clear button is a lifted `button` and comes after the field, so it
+ * already sits above it.
+ */
 export declare function InputShell({ icon, size, width, children, }: {
     icon?: ReactNode;
     children: ReactNode;

package/dist/InputShell.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CONTROL_WIDTH, controlClass } from "./control.js";
 import { cx } from "./cx.js";
-/** Where a leading icon sits, and its size, by the control's size. */
+/**
+ * Where a leading icon sits, and its size, by the control's size. The wrapper is a flex box centred
+ * on the field, so the icon's own box centres too, and its one child is sized whether it is a bare
+ * `<svg>` or an `Icon`.
+ */
 const ICON = {
-    sm: "left-2 [&>svg]:h-3.5 [&>svg]:w-3.5",
-    md: "left-3 [&>svg]:h-4 [&>svg]:w-4",
-    lg: "left-4 [&>svg]:h-5 [&>svg]:w-5",
+    sm: "left-2 [&>*]:size-3.5",
+    md: "left-3 [&>*]:size-4",
+    lg: "left-4 [&>*]:size-5",
 };
 /** The prefix text's inset and size, by the control's size. */
 const PREFIX = {
@@ -13,9 +17,17 @@ const PREFIX = {
     md: "pl-3 text-sm",
     lg: "pl-4 text-base",
 };
-/** The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package. */
+/**
+ * The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package.
+ *
+ * Inside a Card or row (`liftInteractive`, which is `isolate`) the field is lifted to `z-10`, and
+ * its opaque background would paint over a z-auto icon. So the icon ranks `z-20` there. It is
+ * scoped to an `isolate` ancestor so a field elsewhere on the page never outranks AppShell's
+ * sticky header (`z-10`). The clear button is a lifted `button` and comes after the field, so it
+ * already sits above it.
+ */
 export function InputShell({ icon, size = "md", width = "full", children, }) {
-    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-slate-400", ICON[size]), children: icon })), children] }));
+    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center leading-none text-slate-400 in-[.isolate]:z-20", ICON[size]), children: icon })), children] }));
 }
 /**
  * The field box of an `Input` with a `prefix`: the control look and the focus ring sit on the

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 {};

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;