@hackcove/ui-react 0.9.0 → 0.9.2

package/dist/Image.d.ts

@@ -0,0 +1,46 @@
+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";
+/** 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";
+/**
+ * `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 declare const IMAGE_WIDTH: Record<ImageWidth, string>;
+export type ImageProps = {
+    /**
+     * The picture, a local path or a data URL. It is never loaded for you: this is the app's own
+     * image. Left out, or if it fails to load, the picture is replaced by a placeholder.
+     */
+    src?: string | undefined;
+    /** What the picture shows. An empty string marks it as decoration, hidden from a screen reader. */
+    alt: string;
+    /**
+     * The shape it is cropped to: `square`, `4:3`, `3:2`, `16:9`, or the portrait `3:4` and `9:16`.
+     * @default 4:3
+     */
+    aspect?: ImageAspect | undefined;
+    /**
+     * `cover` fills the shape and crops what overflows; `contain` shows the whole picture, with the
+     * rest of the shape left empty (a QR code, a logo).
+     * @default cover
+     */
+    fit?: "cover" | "contain" | undefined;
+    /**
+     * `sm` 96px, `md` 160px and `lg` 256px set the width, capped at the parent's; `full` fills the parent.
+     * @default full
+     */
+    width?: ImageWidth | 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
+ * thumbnail with a label is a `MediaTile`.
+ */
+export declare function Image({ src, alt, aspect, fit, width, ...rest }: ImageProps): ReactElement;

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

@@ -12,10 +12,22 @@ export declare function ListLayout({ filters, empty, isEmpty, children, breadcru
     isEmpty?: boolean;
     children?: ReactNode;
 } & Passthrough): ReactElement;
-/** A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which stacks below on a smaller screen. */
-export declare function DetailLayout({ aside, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+/**
+ * A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which
+ * stacks below on a smaller screen. `stickyAside` keeps the aside in view from `lg` as a long page
+ * 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 & {
     /** The side column: one third from `lg`, below `children` on a smaller screen. */
     aside: ReactNode;
+    /**
+     * 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
+     * taller than the screen. Below `lg` the aside stacks as ever.
+     * @default false
+     */
+    stickyAside?: boolean | undefined;
     children: ReactNode;
 } & Passthrough): ReactElement;
 /** 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>`. */
@@ -51,6 +63,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 +75,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,29 +102,13 @@ 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.
  */
 export declare function CardGrid({ columns, minWidth, align, as: Tag, children, ...rest }: CardGridProps): ReactElement;
-/**
- * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
- * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
- * ends at the header's right edge. The rail has no background and no border, so it is a list of
- * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
- * the canvas filling the rest; below `md` it stacks above the canvas. 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
- * 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. */
-    railLabel?: string | undefined;
-    children: ReactNode;
-} & Passthrough): ReactElement;
 /**
  * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
  * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer

package/dist/PageLayouts.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, } from "react";
 import { Card } from "./Card.js";
-import { cx, focusRing } from "./cx.js";
+import { cx } from "./cx.js";
 import { PageHeader, PageHeaderContent } from "./PageHeader.js";
 import { STACK_WIDTH, Stack } from "./Stack.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
 // ones that narrow their content do it inside the Container they are rendered in.
@@ -11,9 +12,14 @@ import { StickyBar } from "./StickyBar.js";
 export function ListLayout({ filters, empty, isEmpty = 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(Stack, { ...rest, children: [filters, isEmpty ? empty : children] })] }));
 }
-/** A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which stacks below on a smaller screen. */
-export function DetailLayout({ aside, 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: "min-w-0", children: _jsx(Stack, { children: aside }) })] })] }));
+/**
+ * A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which
+ * stacks below on a smaller screen. `stickyAside` keeps the aside in view from `lg` as a long page
+ * 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 }) }) })] })] }));
 }
 /** 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 }) {
@@ -36,38 +42,36 @@ 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 }));
 }
-/**
- * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
- * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
- * ends at the header's right edge. The rail has no background and no border, so it is a list of
- * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
- * the canvas filling the rest; below `md` it stacks above the canvas. 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
- * border or a fixed height, and it no longer sits beside the canvas on a phone.
- */
-export function SidebarLayout({ rail, railLabel, children, ...rest }) {
-    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: "w-full shrink-0 md:w-56", children: railLabel === undefined ? (rail) : (_jsxs("details", { className: "group md:[&::details-content]:[content-visibility:visible]", children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 md:hidden [&::-webkit-details-marker]:hidden", focusRing), children: [railLabel, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: "mt-2 md:mt-0", children: rail })] })) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
-}
 /**
  * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
  * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer

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 }) }));
+}