@hackcove/ui-react 0.9.0 → 0.9.1

package/dist/Image.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "./cx.js";
+import { Icon } from "./Icon.js";
+const ASPECT = {
+    square: "aspect-square",
+    "4:3": "aspect-[4/3]",
+    "3:2": "aspect-[3/2]",
+    "16:9": "aspect-video",
+    "3:4": "aspect-[3/4]",
+    "9:16": "aspect-[9/16]",
+};
+/**
+ * `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
+ * has no intrinsic size of its own to give it one.
+ */
+export const IMAGE_WIDTH = {
+    sm: "w-24 max-w-full",
+    md: "w-40 max-w-full",
+    lg: "w-64 max-w-full",
+    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 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";
+/**
+ * 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
+ * thumbnail with a label is a `MediaTile`.
+ */
+export function Image({ src, alt, aspect = "4:3", fit = "cover", width = "full", ...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]);
+    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("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 }) }) }) }));
+}

package/dist/KeyValueList.d.ts

@@ -14,10 +14,12 @@ 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). */
-export declare function KeyValue({ label, 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. */
+export declare function KeyValue({ label, total, 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;
     children: ReactNode;
 } & Unstyled<HTMLAttributes<HTMLDivElement>>): ReactElement;
 export {};

package/dist/KeyValueList.js

@@ -12,8 +12,8 @@ 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). */
-export function KeyValue({ label, 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. */
+export function KeyValue({ label, total = false, children, ...rest }) {
     const start = useContext(AlignContext) === "start";
-    return (_jsxs("div", { ...rest, className: start ? "col-span-2 grid grid-cols-subgrid" : "flex justify-between gap-3", children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: start ? "tabular-nums" : "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"), children: children })] }));
 }

package/dist/ListRow.d.ts

@@ -12,6 +12,8 @@ type Shared = {
     divided?: boolean | undefined;
     /** Content before the label: an Avatar, a thumbnail, an icon. */
     leading?: ReactNode | undefined;
+    /** A second, muted line under the label (a date, a note), like `TableCell`'s `secondary`. */
+    secondary?: ReactNode | undefined;
     /** Content at the far end of the row: a value, a count, a Pill. */
     trailing?: ReactNode | undefined;
     /**
@@ -97,7 +99,7 @@ export type ListRowProps = ListRowButtonProps | ListRowLinkProps | ListRowStatic
  * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; `divided` draws
  * the line between them, on each row after the first.
  *
- * `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
+ * `secondary` is a second, muted line under the label. `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
  * `selected` marks the row in view, `focused` the one the keyboard cursor is on and `active` fills
  * the row a list follows (`onPointerEnter`, `onPointerLeave` and `onFocus` reach
  * every form; on a linked row the pointer handlers go on the row itself). The label is a

package/dist/ListRow.js

@@ -42,11 +42,11 @@ 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, 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;
+    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 }))] }));
 }
 function LinkRow(props) {
-    const { leading: _l, 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, 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 +57,7 @@ function LinkRow(props) {
             }), start, label, end] }));
 }
 function ButtonRow(props) {
-    const { leading: _l, 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, 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] }));
 }
 /**
@@ -68,7 +68,7 @@ function ButtonRow(props) {
  * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; `divided` draws
  * the line between them, on each row after the first.
  *
- * `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
+ * `secondary` is a second, muted line under the label. `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
  * `selected` marks the row in view, `focused` the one the keyboard cursor is on and `active` fills
  * the row a list follows (`onPointerEnter`, `onPointerLeave` and `onFocus` reach
  * every form; on a linked row the pointer handlers go on the row itself). The label is a
@@ -77,10 +77,10 @@ function ButtonRow(props) {
  * link): `actions` follow `trailing`, and `revealOnHover` shows them only on hover or focus.
  */
 export function ListRow(props) {
-    const { leading, leadingWidth, trailing, children } = props;
+    const { leading, leadingWidth, trailing, secondary, children } = props;
     const pieces = {
         start: leading != null && (_jsx("span", { className: cx("shrink-0", leadingWidth === "thumbnail" && THUMBNAIL), children: leading })),
-        label: _jsx("div", { className: "min-w-0 flex-1", children: children }),
+        label: (_jsxs("div", { className: "min-w-0 flex-1", children: [children, secondary != null && secondary !== false && (_jsx("div", { className: "text-xs font-normal text-slate-500", children: secondary }))] })),
         end: trailing != null && (_jsx("span", { className: "shrink-0 tabular-nums text-slate-500", children: trailing })),
     };
     if (props.static)

package/dist/MediaTile.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ImageAspect, type ImageWidth } from "./Image.js";
+import type { Passthrough } from "./props.js";
+export type MediaTileProps = {
+    /** The thumbnail, a local path or a data URL. Left out, or if it fails to load, a placeholder shows. */
+    src?: string | undefined;
+    /** What the thumbnail shows; it is the tile's name, with `label`. */
+    alt: string;
+    /** A short line on the bottom edge of the picture, on the media scrim: who posted it, or "Earlier". */
+    label?: ReactNode;
+    /** Muted text under the picture, e.g. when. */
+    caption?: ReactNode;
+    /**
+     * The shape of the thumbnail, as `Image`'s `aspect`.
+     * @default 3:4
+     */
+    aspect?: ImageAspect | undefined;
+    /**
+     * `sm` 96px, `md` 160px or `lg` 256px wide; `full` fills the parent (a tile in a grid).
+     * @default md
+     */
+    width?: ImageWidth | undefined;
+    /** Draws a play mark on the thumbnail: the tile opens a video, not a photo. Say so in `alt` too. */
+    video?: boolean | undefined;
+    /**
+     * Makes the whole tile one button; open a `Lightbox` from it. Without it the tile is a plain,
+     * non-interactive block.
+     */
+    onClick?: (() => 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.
+ */
+export declare function MediaTile({ src, alt, label, caption, aspect, width, video, onClick, ...rest }: MediaTileProps): ReactElement;

package/dist/MediaTile.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { Icon } from "./Icon.js";
+import { IMAGE_WIDTH, Image } from "./Image.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.
+ */
+export function MediaTile({ src, alt, label, caption, aspect = "3:4", width = "md", video = false, onClick, ...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 }));
+}

package/dist/PageLayouts.d.ts

@@ -51,6 +51,11 @@ declare const COLUMNS: {
     readonly 3: "lg:grid-cols-3";
     readonly 4: "lg:grid-cols-4";
 };
+/** Two unequal columns, one on a phone, the ratio from `md`; `minmax(0,…)` lets a long value shrink instead of widening its column. */
+declare const RATIOS: {
+    readonly "2:1": "md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]";
+    readonly "1:2": "md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]";
+};
 /** `columns="auto"` fits as many cards per row as the width allows, none narrower than this. */
 declare const AUTO_MIN_WIDTH: {
     readonly sm: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]";
@@ -58,10 +63,11 @@ declare const AUTO_MIN_WIDTH: {
 };
 type CardGridProps = ({
     /**
-     * Cards per row from `lg` (one on a phone, two from `sm`), or `auto` for as many as fit.
+     * Cards per row from `lg` (one on a phone, two from `sm`), `auto` for as many as fit, or a ratio:
+     * `2:1` or `1:2` is two columns, the first or the second twice as wide, from `md` (one on a phone).
      * @default 3
      */
-    columns?: keyof typeof COLUMNS | undefined;
+    columns?: keyof typeof COLUMNS | keyof typeof RATIOS | undefined;
     /** With `columns="auto"`, the narrowest a card gets: `md` 17rem or `sm` 12rem. */
     minWidth?: undefined;
 } | {
@@ -84,7 +90,8 @@ type CardGridProps = ({
 } & Passthrough;
 /**
  * A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`.
- * `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
+ * `columns="2:1"` or `"1:2"` is instead two unequal columns from `md`, one on a phone: a main card beside a
+ * narrow one (a record's detail and its side panel). `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
  * `md` (17rem, the default) or `sm` (12rem). `align="start"` keeps each card its own height
  * instead of stretching it to the tallest in its row. `as="ul"` makes it a list of cards for a
  * screen reader: the grid is a `<ul>` and each child is wrapped in an `<li>`, still stretched.

package/dist/PageLayouts.js

@@ -36,22 +36,33 @@ const COLUMNS = {
     3: "lg:grid-cols-3",
     4: "lg:grid-cols-4",
 };
+/** Two unequal columns, one on a phone, the ratio from `md`; `minmax(0,…)` lets a long value shrink instead of widening its column. */
+const RATIOS = {
+    "2:1": "md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]",
+    "1:2": "md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
+};
 /** `columns="auto"` fits as many cards per row as the width allows, none narrower than this. */
 const AUTO_MIN_WIDTH = {
     sm: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]",
     md: "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]",
 };
+function gridColumns(columns, minWidth) {
+    if (columns === "auto")
+        return AUTO_MIN_WIDTH[minWidth];
+    if (typeof columns === "string")
+        return cx("grid-cols-1", RATIOS[columns]);
+    return cx("grid-cols-1 sm:grid-cols-2", COLUMNS[columns]);
+}
 /**
  * A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`.
- * `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
+ * `columns="2:1"` or `"1:2"` is instead two unequal columns from `md`, one on a phone: a main card beside a
+ * narrow one (a record's detail and its side panel). `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
  * `md` (17rem, the default) or `sm` (12rem). `align="start"` keeps each card its own height
  * instead of stretching it to the tallest in its row. `as="ul"` makes it a list of cards for a
  * screen reader: the grid is a `<ul>` and each child is wrapped in an `<li>`, still stretched.
  */
 export function CardGrid({ columns = 3, minWidth = "md", align = "stretch", as: Tag = "div", children, ...rest }) {
-    return (_jsx(Tag, { ...rest, ...(Tag === "ul" ? { role: "list" } : {}), className: cx("grid gap-4", columns === "auto"
-            ? AUTO_MIN_WIDTH[minWidth]
-            : cx("grid-cols-1 sm:grid-cols-2", COLUMNS[columns]), align === "start" && "items-start"), children: Tag === "ul"
+    return (_jsx(Tag, { ...rest, ...(Tag === "ul" ? { role: "list" } : {}), className: cx("grid gap-4", gridColumns(columns, minWidth), align === "start" && "items-start"), children: Tag === "ul"
             ? Children.toArray(children).map((child, index) => (_jsx("li", { className: "grid", children: child }, isValidElement(child) ? child.key : index)))
             : children }));
 }

package/dist/Pill.d.ts

@@ -15,8 +15,23 @@ type PillBase = {
     round?: boolean;
     /** The tooltip on hover, for a pill whose text is short or cut off: the full status, a date. */
     title?: string | undefined;
+    /**
+     * The name half of a two-tone `label: value` pill: `children` is the value. The label keeps the
+     * tone's tint and the value sits on a plain surface beside it, in a hairline border. Keep the
+     * label to a word or two (`Weight`, `Sleep`).
+     */
+    label?: string | undefined;
+};
+type Removable = {
+    onRemove?: undefined;
+    removeLabel?: undefined;
+} | {
+    /** Adds a small x button after the text that calls this: for a chip the reader can drop (an attachment, a filter). It sits beside a link or button pill, never inside it. */
+    onRemove: () => void;
+    /** The x button's accessible name and tooltip: `Remove invoice.pdf`. Required with `onRemove`. */
+    removeLabel: string;
 };
-type PillProps = PillBase & Passthrough & ({
+type PillProps = PillBase & Removable & Passthrough & ({
     href?: undefined;
     render?: undefined;
     external?: undefined;
@@ -44,10 +59,13 @@ type PillProps = PillBase & Passthrough & ({
 })));
 /**
  * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
- * rounded-md corners for a full pill shape. `href` makes it a link (a plain `<a>`, or with `render`
- * the app's own router `<Link>`: `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a
- * new tab) and `onClick` makes it a button, each with a hover dim and the focus ring. `title` is
- * the native tooltip.
+ * rounded-md corners for a full pill shape. `label` makes it two-tone, `label: value`: the label
+ * keeps the tone's tint and the children, the value, sit on the surface beside it. `href` makes it
+ * a link (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a new tab) and `onClick` makes it
+ * a button, each with a hover dim and the focus ring. `onRemove` adds an x button after the text
+ * (named by `removeLabel`), a separate button beside a link or button pill rather than nested in
+ * it. `title` is the native tooltip.
  */
-export declare function Pill({ children, tone, dot, round, href, render, external, onClick, ...rest }: PillProps): ReactElement;
+export declare function Pill({ children, tone, dot, round, label, href, render, external, onClick, onRemove, removeLabel, ...rest }: PillProps): ReactElement;
 export {};

package/dist/Pill.js

@@ -10,25 +10,81 @@ const PILL_TONES = {
     violet: "bg-violet-50 text-violet-700",
     sky: "bg-sky-50 text-sky-700",
 };
-function pillClass({ tone, round, dot }, interactive) {
-    return cx(round ? "rounded-full" : "rounded-md", "px-1.5 py-0.5 text-xs font-medium", PILL_TONES[tone], dot && "inline-flex items-center gap-1", interactive && cx("transition hover:opacity-80", focusRing));
+const INTERACTIVE = cx("transition hover:opacity-80", focusRing);
+/** The x on a removable pill: two strokes in the pill's text colour. */
+const REMOVE_MARK = (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: _jsx("path", { d: "M3 3l6 6M9 3l-6 6" }) }));
+/** The two-tone pill is a hairline-bordered box: the label half carries the tint, the value half sits on the surface. */
+const SPLIT = "inline-flex overflow-hidden border border-slate-200 text-xs font-medium";
+/** The box a one-piece pill draws, or the whole pill when it is a single element. */
+function pillClass({ tone, round, dot, labelled }, interactive) {
+    return cx(round ? "rounded-full" : "rounded-md", labelled ? SPLIT : cx("px-1.5 py-0.5 text-xs font-medium", PILL_TONES[tone]), dot && !labelled && "inline-flex items-center gap-1", interactive && INTERACTIVE);
+}
+/** The shell round a pill with an x: it carries the tint and the corners, and the text and the x are its two children. */
+function shellClass({ tone, round, labelled }) {
+    return cx(round ? "rounded-full" : "rounded-md", "inline-flex items-center text-xs font-medium", labelled ? "overflow-hidden border border-slate-200" : PILL_TONES[tone]);
+}
+/** The text half of a removable pill, which is a link, a button or a span beside the x. */
+function mainClass({ dot, labelled }, interactive) {
+    return cx(labelled ? "inline-flex self-stretch" : "py-0.5 pl-1.5 pr-1", dot && !labelled && "inline-flex items-center gap-1", interactive && INTERACTIVE);
+}
+function removeClass({ labelled }) {
+    return cx("inline-flex cursor-pointer items-center", labelled ? "self-stretch bg-white pl-0.5 pr-1.5 text-slate-900" : "py-0.5 pl-0.5 pr-1.5", INTERACTIVE);
+}
+/** The inside of a pill: the dot and the text, or for a two-tone one the tinted label beside the value. */
+function PillBody({ look: { tone, dot, removable }, label, children, }) {
+    const mark = dot && _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-current" });
+    if (label === undefined) {
+        return (_jsxs(_Fragment, { children: [mark, children] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: cx("px-1.5 py-px", PILL_TONES[tone], dot && "inline-flex items-center gap-1"), children: [mark, label, _jsx("span", { className: "sr-only", children: ":" })] }), _jsx("span", { className: cx("bg-white py-px text-slate-900", removable ? "pl-1.5 pr-0.5" : "px-1.5"), children: children })] }));
+}
+/** The pill itself, or the text half of a removable one: a link, a button or a span. */
+function renderMain({ isLink, interactive, look, rest, href, render, external, onClick, body, }) {
+    const className = look.removable ? mainClass(look, interactive) : pillClass(look, interactive);
+    // A removable pill's attributes go on its link or button; on a plain one, the shell is the pill.
+    const own = look.removable && !interactive ? {} : rest;
+    if (isLink)
+        return renderLink({ ...own, href, render, external, className, children: body });
+    if (onClick) {
+        return (_jsx("button", { type: "button", ...own, onClick: onClick, className: cx(className, "cursor-pointer"), children: body }));
+    }
+    return (_jsx("span", { ...own, className: className, children: body }));
+}
+/** The shell round a removable pill: the text half and the x button beside it. */
+function RemoveShell({ look, remove: { onRemove, removeLabel }, attrs, interactive, children, }) {
+    return (_jsxs("span", { ...(interactive ? {} : attrs), className: shellClass(look), children: [children, _jsx("button", { type: "button", "aria-label": removeLabel, title: removeLabel, onClick: onRemove, className: removeClass(look), children: REMOVE_MARK })] }));
 }
 /**
  * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
- * rounded-md corners for a full pill shape. `href` makes it a link (a plain `<a>`, or with `render`
- * the app's own router `<Link>`: `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a
- * new tab) and `onClick` makes it a button, each with a hover dim and the focus ring. `title` is
- * the native tooltip.
+ * rounded-md corners for a full pill shape. `label` makes it two-tone, `label: value`: the label
+ * keeps the tone's tint and the children, the value, sit on the surface beside it. `href` makes it
+ * a link (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a new tab) and `onClick` makes it
+ * a button, each with a hover dim and the focus ring. `onRemove` adds an x button after the text
+ * (named by `removeLabel`), a separate button beside a link or button pill rather than nested in
+ * it. `title` is the native tooltip.
  */
-export function Pill({ children, tone = "slate", dot = false, round = false, href, render, external = false, onClick, ...rest }) {
+export function Pill({ children, tone = "slate", dot = false, round = false, label, href, render, external = false, onClick, onRemove, removeLabel, ...rest }) {
     const isLink = href !== undefined || render !== undefined;
-    const className = pillClass({ tone, round, dot }, isLink || onClick !== undefined);
-    const content = (_jsxs(_Fragment, { children: [dot && _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-current" }), children] }));
-    if (isLink) {
-        return renderLink({ ...rest, href, render, external, className, children: content });
-    }
-    if (onClick) {
-        return (_jsx("button", { type: "button", ...rest, onClick: onClick, className: cx(className, "cursor-pointer"), children: content }));
-    }
-    return (_jsx("span", { ...rest, className: className, children: content }));
+    const interactive = isLink || onClick !== undefined;
+    const look = {
+        tone,
+        round,
+        dot,
+        labelled: label !== undefined,
+        removable: onRemove !== undefined,
+    };
+    const body = (_jsx(PillBody, { look: look, label: label, children: children }));
+    const main = renderMain({
+        isLink,
+        interactive,
+        look,
+        rest,
+        href,
+        render,
+        external,
+        onClick,
+        body,
+    });
+    return onRemove === undefined ? (main) : (_jsx(RemoveShell, { look: look, remove: { onRemove, removeLabel }, attrs: rest, interactive: interactive, children: main }));
 }

package/dist/ScrollStrip.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ClusterGap } from "./Cluster.js";
+import type { Passthrough } from "./props.js";
+export type ScrollStripProps = {
+    /** Names the strip for a screen reader, e.g. "Recent statuses". */
+    label: string;
+    /** The items, one after another: `MediaTile`s, `Avatar`s. They keep their own width. */
+    children: ReactNode;
+    /**
+     * The space between items, as `Cluster`'s `gap`.
+     * @default sm
+     */
+    gap?: ClusterGap | undefined;
+} & Passthrough;
+/**
+ * A single row of items that scrolls sideways when it runs past the width of its parent, with a
+ * thin themed scrollbar and the items snapping into place: a strip of `MediaTile`s or `Avatar`s.
+ * Items never shrink or wrap. The strip takes the keyboard focus, so the arrow keys scroll it
+ * without a pointer. A grid that wraps is a `CardGrid` or a `Cluster`.
+ */
+export declare function ScrollStrip({ label, children, gap, ...rest }: ScrollStripProps): ReactElement;

package/dist/ScrollStrip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing, themedScrollbar } from "./cx.js";
+import { STACK_GAP } from "./Stack.js";
+/**
+ * A single row of items that scrolls sideways when it runs past the width of its parent, with a
+ * thin themed scrollbar and the items snapping into place: a strip of `MediaTile`s or `Avatar`s.
+ * Items never shrink or wrap. The strip takes the keyboard focus, so the arrow keys scroll it
+ * without a pointer. A grid that wraps is a `CardGrid` or a `Cluster`.
+ */
+export function ScrollStrip({ label, children, gap = "sm", ...rest }) {
+    return (_jsx("div", { ...rest, role: "group", "aria-label": label, tabIndex: 0, className: cx("overflow-x-auto rounded-lg pb-2 [scroll-snap-type:x_proximity]", themedScrollbar, focusRing), children: _jsx("div", { className: cx("flex w-max min-w-full text-slate-900 *:shrink-0 *:snap-start", STACK_GAP[gap]), children: children }) }));
+}

package/dist/Stack.d.ts

@@ -2,6 +2,9 @@ import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from
 import type { Passthrough, Unstyled } from "./props.js";
 export type StackGap = "xs" | "sm" | "md" | "lg" | "xl";
 export declare const STACK_GAP: Record<StackGap, string>;
+export type StackRowFrom = "sm" | "md" | "lg";
+/** The breakpoint where a `rowFrom` Stack turns from a column into a row. */
+export declare const STACK_ROW_FROM: Record<StackRowFrom, string>;
 export type StackWidth = "narrow" | "default" | "wide" | "full";
 /** `default` adds nothing: the Stack is as wide as its parent. */
 export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
@@ -14,12 +17,16 @@ export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
  * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
  * edge (it is never re-centred), so its first line lines up with every other block on the page.
  *
+ * `rowFrom` turns the column into a row from `sm`, `md` or `lg` (a column below it): the blocks sit
+ * side by side, `gap` apart, and a `ClusterGrow` around one of them takes the width left. Without it the
+ * Stack is always a column; a row that is a row at every width is a `Cluster`.
+ *
  * `as` is a closed set: `div` (default), `section`, `form`, `ul` or `ol`. A `form` takes the form
  * props (`onSubmit`, `action`, `method`, `noValidate`, ...). A `ul` or `ol` is drawn with no
  * markers and its children are `<li>`s, as in `BulletList` and `Timeline`: the Stack does not wrap
  * them, so a child is one list item and `Text as="li"` or a bare `<li>` both work.
  */
-export declare function Stack({ gap, width, as, children, ...rest }: StackProps): ReactElement;
+export declare function Stack({ gap, width, rowFrom, as, children, ...rest }: StackProps): ReactElement;
 type StackBase = {
     /**
      * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
@@ -31,6 +38,13 @@ type StackBase = {
      * @default default
      */
     width?: StackWidth | undefined;
+    /**
+     * Turns the column into a row from this breakpoint (`sm`, `md` or `lg`), a column below it: a main
+     * area beside a side column on a wide screen, stacked on a phone. In the row the blocks sit side by side
+     * the same `gap` apart and are as tall as the tallest; wrap the one that takes the width left in a
+     * `ClusterGrow`. Left out, the Stack is always a column.
+     */
+    rowFrom?: StackRowFrom | undefined;
     children?: ReactNode;
 };
 type StackProps = StackBase & (({

package/dist/Stack.js

@@ -9,6 +9,12 @@ export const STACK_GAP = {
     lg: "gap-8",
     xl: "gap-12 sm:gap-16",
 };
+/** The breakpoint where a `rowFrom` Stack turns from a column into a row. */
+export const STACK_ROW_FROM = {
+    sm: "sm:flex-row",
+    md: "md:flex-row",
+    lg: "lg:flex-row",
+};
 /** `default` adds nothing: the Stack is as wide as its parent. */
 export const STACK_WIDTH = {
     narrow: "max-w-3xl",
@@ -25,13 +31,17 @@ export const STACK_WIDTH = {
  * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
  * edge (it is never re-centred), so its first line lines up with every other block on the page.
  *
+ * `rowFrom` turns the column into a row from `sm`, `md` or `lg` (a column below it): the blocks sit
+ * side by side, `gap` apart, and a `ClusterGrow` around one of them takes the width left. Without it the
+ * Stack is always a column; a row that is a row at every width is a `Cluster`.
+ *
  * `as` is a closed set: `div` (default), `section`, `form`, `ul` or `ol`. A `form` takes the form
  * props (`onSubmit`, `action`, `method`, `noValidate`, ...). A `ul` or `ol` is drawn with no
  * markers and its children are `<li>`s, as in `BulletList` and `Timeline`: the Stack does not wrap
  * them, so a child is one list item and `Text as="li"` or a bare `<li>` both work.
  */
-export function Stack({ gap = "md", width = "default", as = "div", children, ...rest }) {
-    return (_jsx(Box, { tag: as, className: cx("flex flex-col", (as === "ul" || as === "ol") && "list-none", STACK_GAP[gap], STACK_WIDTH[width], "*:data-page-header:mb-0"), ...rest, children: children }));
+export function Stack({ gap = "md", width = "default", rowFrom, as = "div", children, ...rest }) {
+    return (_jsx(Box, { tag: as, className: cx("flex flex-col", (as === "ul" || as === "ol") && "list-none", rowFrom && STACK_ROW_FROM[rowFrom], STACK_GAP[gap], STACK_WIDTH[width], "*:data-page-header:mb-0"), ...rest, children: children }));
 }
 /** The element `as` picked, drawn with props already narrowed by `StackProps`. */
 function Box({ tag: Tag, ...props }) {

package/dist/StatTile.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";
 import type { Unstyled } from "./props.js";
-/** The colour of a tile's value (and of its accent bar): plain ink, green or red. */
-export type StatTileTone = "neutral" | "positive" | "negative";
+/** The colour of a tile's value (and of its accent bar): plain ink, green, amber or red. */
+export type StatTileTone = "neutral" | "positive" | "warn" | "negative";
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same

package/dist/StatTile.js

@@ -5,11 +5,13 @@ import { Overline } from "./typography.js";
 const VALUE = {
     neutral: "text-slate-900",
     positive: "text-emerald-700",
+    warn: "text-amber-700",
     negative: "text-red-700",
 };
 const BAR = {
     neutral: BAR_FILL.accent,
     positive: BAR_FILL.positive,
+    warn: BAR_FILL.warn,
     negative: BAR_FILL.negative,
 };
 /**