@hackcove/ui-react 0.8.3 → 0.9.1

package/dist/Cluster.js

@@ -28,11 +28,18 @@ const JUSTIFY = {
 export function Cluster({ as: Tag = "div", gap = "xs", align = "center", justify = "start", wrap = false, children, ...rest }) {
     return (_jsx(Tag, { ...rest, className: cx("flex", STACK_GAP[gap], ALIGN[align], JUSTIFY[justify], wrap && "flex-wrap"), children: children }));
 }
+/** The narrowest a `ClusterGrow` gets before it wraps under, the same two steps as `CardGrid`'s `minWidth`. */
+const GROW_MIN_WIDTH = {
+    sm: "min-w-0 flex-[1_1_12rem]",
+    md: "min-w-0 flex-[1_1_17rem]",
+};
 /**
- * The one child of a `Cluster` that grows to the room left in the row. It can shrink to nothing
- * (`min-w-0`), so the items beside it stay on the line and a long value truncates instead of
- * pushing them out. Empty, it is a spacer.
+ * The one child of a `Cluster` (or of a `Stack` with `rowFrom`) that grows to the room left in the
+ * row. By default it can shrink to nothing (`min-w-0`), so the items beside it stay on the line and
+ * a long value truncates instead of pushing them out. With `minWidth` it instead keeps that width
+ * (`sm` 12rem, `md` 17rem) and, in a `Cluster` with `wrap`, drops onto the next line when the room
+ * left is narrower, rather than being squashed. Empty, it is a spacer.
  */
-export function ClusterGrow({ children, ...rest }) {
-    return (_jsx("div", { ...rest, className: "min-w-0 flex-1", children: children }));
+export function ClusterGrow({ minWidth, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: minWidth ? GROW_MIN_WIDTH[minWidth] : "min-w-0 flex-1", children: children }));
 }

package/dist/Dialog.d.ts

@@ -11,10 +11,12 @@ export type DialogProps = {
     footer?: ReactNode;
     /**
      * The panel's width: `sm` (320px) is a list, `md` (440px) holds a form, `lg` (640px) a wider
-     * form or a table.
+     * form or a table. `full` fills the whole screen, for media or a player: the body takes the
+     * height between the header and the footer and scrolls if it is taller. It has no backdrop to
+     * click, so give it a close action in the `footer` (a `<form method="dialog">` button).
      * @default md
      */
-    size?: Size;
+    size?: Size | "full";
     /** Called when the dialog closes: Esc, a click on the backdrop, or a `<form method="dialog">` submit. */
     onClose: () => void;
 } & Passthrough;

package/dist/Dialog.js

@@ -3,8 +3,13 @@ import { useId, useRef } from "react";
 import { cx } from "./cx.js";
 import { useModal } from "./modal.js";
 import { HeaderText, SectionHeading } from "./typography.js";
-const PANEL = "mx-auto mt-28 max-w-[calc(100vw-2rem)] overflow-visible rounded-2xl border border-slate-200 bg-white p-0 text-slate-900 shadow-2xl -translate-y-2 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-200 open:translate-y-0 open:opacity-100 starting:open:-translate-y-2 starting:open:opacity-0 backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
-const SIZE = { sm: "w-80", md: "w-110", lg: "w-160" };
+/** Shared by every size: the surface, its colours and the fade (and the scrim's) in and out. */
+const BASE = "bg-white p-0 text-slate-900 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-200 open:opacity-100 starting:open:opacity-0 backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
+/** A floating panel under the top edge: it also slides down 8px as it fades in. */
+const WINDOW = "mx-auto mt-28 max-w-[calc(100vw-2rem)] overflow-visible rounded-2xl border border-slate-200 shadow-2xl -translate-y-2 open:translate-y-0 starting:open:-translate-y-2";
+const WIDTH = { sm: "w-80", md: "w-110", lg: "w-160" };
+/** The whole viewport, edge to edge: no margin, radius, border or shadow, and a column so the body can fill it. */
+const FULL = "fixed inset-0 m-0 size-full max-h-none max-w-none flex-col overflow-hidden rounded-none border-0 open:flex";
 /**
  * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
  * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
@@ -14,5 +19,6 @@ export function Dialog({ title, description, children, footer, size = "md", onCl
     const dialog = useRef(null);
     const titleId = useId();
     const closed = useModal(dialog, onClose);
-    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size]), children: _jsxs("div", { className: "p-5.5", children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && _jsx("div", { className: "mt-4", children: children }), footer && _jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })] }) }));
+    const full = size === "full";
+    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(BASE, size === "full" ? FULL : `${WINDOW} ${WIDTH[size]}`), children: _jsxs("div", { className: cx("p-5.5", full && "flex min-h-0 flex-1 flex-col"), children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && (_jsx("div", { className: cx("mt-4", full && "min-h-0 flex-1 overflow-auto"), children: children })), footer && (_jsx("div", { className: cx("mt-5 flex justify-end gap-2", full && "shrink-0"), children: footer }))] }) }));
 }

package/dist/EmptyState.d.ts

@@ -7,11 +7,17 @@ import type { Passthrough } from "./props.js";
  * line inside a card, use `Text as="p" color="muted"`. `level` is the title's heading level (default 2): one below the
  * page's own heading, so the empty state inside a `SectionHeading` section is a 3.
  */
-export declare function EmptyState({ title, level, children, actions, ...rest }: {
+export declare function EmptyState({ title, level, padding, children, actions, ...rest }: {
     /** The heading, centred: what is missing ("No projects yet"). It names the section. */
     title: ReactNode;
     /** The title's heading level, 2 to 6. It does not change how the title looks. */
     level?: 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * `inset` pads all four sides, for an empty state in a `Card flush`, whose body has no padding
+     * of its own. `default` pads above and below only.
+     * @default default
+     */
+    padding?: "default" | "inset" | undefined;
     children?: ReactNode;
     /** Buttons or links in a centred row at the bottom. */
     actions?: ReactNode;

package/dist/EmptyState.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { cx } from "./cx.js";
 import { SectionHeading } from "./typography.js";
 /**
  * What a list or a page shows when there is nothing in it yet: a centred `title`, the `children`
@@ -8,7 +9,7 @@ import { SectionHeading } from "./typography.js";
  * line inside a card, use `Text as="p" color="muted"`. `level` is the title's heading level (default 2): one below the
  * page's own heading, so the empty state inside a `SectionHeading` section is a 3.
  */
-export function EmptyState({ title, level = 2, children, actions, ...rest }) {
+export function EmptyState({ title, level = 2, padding = "default", children, actions, ...rest }) {
     const titleId = useId();
-    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: "mx-auto flex w-full max-w-xl flex-col items-center gap-4 py-8 text-center", children: [_jsx(SectionHeading, { as: `h${level}`, id: titleId, children: title }), children != null && (_jsx("div", { className: "flex w-full flex-col items-center gap-5", children: children })), actions != null && _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions })] }));
+    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: cx("mx-auto flex w-full max-w-xl flex-col items-center gap-4 text-center", padding === "inset" ? "p-8" : "py-8"), children: [_jsx(SectionHeading, { as: `h${level}`, id: titleId, children: title }), children != null && (_jsx("div", { className: "flex w-full flex-col items-center gap-5", children: children })), actions != null && _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions })] }));
 }

package/dist/Field.d.ts

@@ -6,7 +6,7 @@ export declare function fieldNote(hint: ReactNode, error: ReactNode): ReactEleme
  * A label above a control, with a hint or an error line under it. An error replaces the hint.
  * Inside a `FormGrid`, `span="full"` runs the field across both columns.
  */
-export declare function Field({ label, htmlFor, hint, error, span, children, ...rest }: {
+export declare function Field({ label, htmlFor, hint, error, span, layout, children, ...rest }: {
     /** The text above the control. */
     label: ReactNode;
     /** The id of the control inside; the label's htmlFor. */
@@ -17,5 +17,12 @@ export declare function Field({ label, htmlFor, hint, error, span, children, ...
     error?: ReactNode;
     /** `full` spans every column of a `FormGrid`; unset takes one. It does nothing outside a `FormGrid`. */
     span?: "full" | undefined;
+    /**
+     * `row` puts the label beside the control, for a compact setting or a drawer row; the hint or
+     * error sits under the control. Every row label takes the same fixed column, so stacked rows line
+     * their controls up; a long label wraps inside it. `column` puts the label above it.
+     * @default column
+     */
+    layout?: "column" | "row" | undefined;
     children: ReactNode;
 } & Passthrough): ReactElement;

package/dist/Field.js

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

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

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