@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/record-list.d.ts

@@ -5,25 +5,34 @@ import { type DataTableRowLinkProps } from "./data-table.js";
 import { type EmptyStateKind } from "./empty-state.js";
 import type { IdentityMarkProps } from "./identity-mark.js";
 import { type PageCommand } from "./page-actions.js";
+import { type ProgressChecklistProps } from "./progress-checklist.js";
 import { type StatusBadgeTone } from "./status-badge.js";
+import type { CollectionNote } from "../internal/collection-note.js";
 import { type RowMessage } from "../internal/row-message.js";
 export type { RowMessage };
 export type RecordName = {
     /** One line, ending in an ellipsis and whole in its title, unless the list `wraps`. */
     name: string;
-    /** One muted line: what it is or where it comes from. */
-    detail?: ReactNode;
-    /** Its identity mark, drawn at 32. */
-    mark?: IdentityMarkProps;
+    /**
+     * The muted line under the name: what it is or where it comes from. Every row has one; a record
+     * with nothing to say passes `<TableValue missingLabel="…" value={null} />`, the dash.
+     */
+    detail: NonNullable<ReactNode>;
+    /** Its identity mark, drawn at 32. Every row has one: an initials mark when the record has no picture. */
+    mark: IdentityMarkProps;
 };
 export type RecordFact<TRecord> = {
     id: string;
     /** The column's name for assistive technology. */
     label: string;
     of: (record: TRecord) => ReactNode;
-    /** A phrase that takes the row's spare width; otherwise one line at its own width. */
-    prose?: boolean;
+    /** Its column's width in pixels, for its longest value in every language the product ships. */
+    size: number;
+    /** The value is more than one line, such as a disclosure: it wraps in full instead of ending in an ellipsis. */
+    wraps?: true;
 };
+/** At most three. A list that needs more columns compares its records, which is a `DataTable`. */
+export type RecordFacts<TRecord> = readonly [] | readonly [RecordFact<TRecord>] | readonly [RecordFact<TRecord>, RecordFact<TRecord>] | readonly [RecordFact<TRecord>, RecordFact<TRecord>, RecordFact<TRecord>];
 export type RecordStatus = {
     label: string;
     tone: StatusBadgeTone;
@@ -36,36 +45,73 @@ export type RecordTimeColumn<TRecord> = {
     /** What a screen reader hears beside the muted dash where a record has no time. */
     missing: string;
     locale?: string;
+    /** Its column's width in pixels, for its longest sentence in every language the product ships. */
+    size: number;
+};
+export type RecordSelection<TRecord> = {
+    /** Names the selection column for assistive technology: "Select". */
+    header: string;
+    /** Names one record's box: "Select client-onboarding". */
+    label: (record: TRecord) => string;
+    checked: (record: TRecord) => boolean;
+    onCheckedChange: (record: TRecord, checked: boolean) => void;
 };
 export type RecordListFooter = {
     /** "5 Agents" */
     count?: ReactNode;
-    /** A bounded server page: "Page 1 of 6" and the way to the others. */
+    /**
+     * A bounded server page: "Page 1 of 6" and Previous and Next. A side with no handler has no page,
+     * so its button is disabled; with neither, there is one page and no pager.
+     */
     pages?: {
-        label: ReactNode;
-        previous: PageCommand;
-        next: PageCommand;
-        pending?: boolean;
+        label?: ReactNode;
+        previousLabel: string;
+        nextLabel: string;
+        onPrevious?: (() => void) | undefined;
+        onNext?: (() => void) | undefined;
+        pending?: boolean | undefined;
     };
+    /** One muted line about the whole list, with Learn more and one secondary action, in a strip of its own under the count and the paging. */
+    note?: CollectionNote;
 };
-export type RecordListProps<TRecord extends RowData> = {
+type RecordListBase<TRecord extends RowData> = {
     /** Names the list for assistive technology: "Skills". */
     label: string;
     /** Already searched, filtered and ordered; undefined while they load. */
     records: readonly TRecord[] | undefined;
     getId: (record: TRecord) => string;
+    /** What the row is called: required, because every row is an entity with a mark, a name and a line under it. */
     name: (record: TRecord) => RecordName;
     /** The name is the record's whole text, such as a memory: it wraps in full. */
     wraps?: boolean;
-    facts?: readonly RecordFact<TRecord>[];
+    /** A box before each record, so a person can pick several. */
+    select?: RecordSelection<TRecord>;
+    /**
+     * `line` draws Vercel's project row: the facts and the status share one muted line between the
+     * name and the time, and the row ends in the ring and the three dots even for one command, so it
+     * stays one line on any card wider than a phone's; `columns`, the
+     * default, gives each fact its own column. A `CollectionPage` with a `rail` sets it.
+     */
+    layout?: "columns" | "line";
+    facts?: RecordFacts<TRecord>;
     /** Only for the exception: null for the usual record. */
     status?: {
         label: string;
         of: (record: TRecord) => RecordStatus | null;
+        /** Its column's width in pixels, for its longest status in every language the product ships. */
+        size: number;
     };
     time?: RecordTimeColumn<TRecord>;
-    /** The row's one visible command, an outline button before the three dots: "Connect", "Open report". */
-    command?: (record: TRecord) => ReactNode;
+    /**
+     * How far the record is through the steps that make it ready: the ring before the row's
+     * commands, as Vercel ends a project's row with its Production Checklist. Null for a record
+     * with no checklist.
+     */
+    checklist?: {
+        /** Names the column for assistive technology: "Setup". */
+        label: string;
+        of: (record: TRecord) => ProgressChecklistProps | null;
+    };
     /** The row's three dots; its first line is `name(record).name`. */
     menu?: (record: TRecord) => {
         label: string;
@@ -79,9 +125,11 @@ export type RecordListProps<TRecord extends RowData> = {
         label: (record: TRecord) => string;
         renderLink?: (props: DataTableRowLinkProps) => ReactNode;
     };
-    /** The record's own action failed or was refused: its message inside its row. */
-    state?: (record: TRecord) => RowMessage | null;
-    /** The record being edited: its RowEditForm, inside its row. */
+    /**
+     * Values edited in place: the row of the record being edited expands into its `RowEditForm`,
+     * under the record's line, and the rows around it stay. The way in is the row's "Edit" command
+     * or a line of its menu.
+     */
     editor?: {
         id: string;
         render: (record: TRecord) => ReactNode;
@@ -89,7 +137,11 @@ export type RecordListProps<TRecord extends RowData> = {
     /** Names the rows while they load; `label` when left out. */
     loadingLabel?: string;
     failed?: EmptyStateKind<"failed">;
-    empty?: EmptyStateKind<"firstUse"> | EmptyStateKind<"nothingYet">;
+    /**
+     * What the list says with no records. `null` leaves the list out until it has some, for a section
+     * that appears only when something needs a person, such as an Overview's exceptions.
+     */
+    empty: EmptyStateKind<"firstUse"> | EmptyStateKind<"nothingYet"> | null;
     /** Given only while a search or filter is set. */
     noMatch?: Omit<EmptyStateKind<"noResults">, "kind">;
     /**
@@ -103,17 +155,55 @@ export type RecordListProps<TRecord extends RowData> = {
     };
     footer?: RecordListFooter;
 };
+type RecordListCommands<TRecord extends RowData> = {
+    command?: never;
+    state?: never;
+    commandsSize?: number;
+} | {
+    /**
+     * The row's visible commands, one or two outline buttons of 32 px before the three dots:
+     * "Connect account", "Open report". A third goes in the menu.
+     */
+    command?: (record: TRecord) => PageCommand | readonly [PageCommand, PageCommand] | null;
+    /** The record's own action failed or was refused: its message inside its row. */
+    state?: (record: TRecord) => RowMessage | null;
+    /**
+     * The commands column's width in pixels, for the row command or a failed action's next
+     * steps beside the three dots; a list with neither, or whose failed action shows on no row,
+     * keeps the width of the three dots alone, so the name keeps the room.
+     */
+    commandsSize: number;
+};
+export type RecordListProps<TRecord extends RowData> = RecordListBase<TRecord> & RecordListCommands<TRecord>;
+type WithoutKeys<List, Key extends PropertyKey> = List extends unknown ? Omit<List, Key> : never;
+/** The list's props without some keys, keeping a row command and its `commandsSize` together. */
+export type RecordListWithout<TRecord extends RowData, Key extends PropertyKey> = WithoutKeys<RecordListProps<TRecord>, Key>;
 /**
- * One line per record, on one resting card: its identity mark and name over
- * what it is, a few comparable facts, a status only for the exception, when
- * it happened, the row's one command, and its three dots last.
+ * Entity rows: objects a person opens or acts on, one line each on one resting card: the
+ * identity mark and name over what it is, a few facts, a status only for the exception, when it
+ * happened, at most two row commands, and the three dots last.
  *
  * @family Compositions
- * @when A list of records inside another page: an Overview's exceptions, an object page's "Needs attention", any section that lists records a person opens or acts on. A page whose whole job is the list is a `CollectionPage`, which draws this.
- * @instead Figures compared across records, read by their column headings, are a `DataTable`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`.
- * @behaviour Each row reads left to right at fixed measures: the mark and name (at most a third of the row), facts on one line, the status in its 150 px slot only when the record is the exception, the time right-aligned in tabular figures with the exact moment on hover, the row command at most 192 px wide with its label cut short, then the three dots, or a muted chevron when the row only opens. On a card too narrow for them (768 px, or 1024 px for seven columns or more or a row command), the facts, the status and the time move under the record's line, leaving out a fact or status the record does not have, and the name and its commands keep theirs. A menu of one command that is not destructive, with no row command, is that command's outline button. With `open` the whole row is one target. A failed or refused action of the record replaces its detail line, with its next steps beside its commands; the record being edited opens its form under its own line. While the records load, three still skeleton rows hold the place; then, first that holds: the failed read, no match, the empty state, the rows. A list with no records and no empty state draws nothing.
- * @words Every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A status is the exception's word ("Needs attention"), never "Active" on every row.
- * @access A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a busy status named by `loadingLabel`.
+ * @when “Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity)
+ * Ours: the records are things a person opens or acts on and that name themselves: projects, deployments, domains, members, integrations, Agents, Skills, mailboxes. A list inside another page: an Overview's exceptions, an object page's "Needs attention". A page whose whole job is the list is a `CollectionPage`, which draws this. Values edited in place (a domain, an environment variable) are the same rows with an `editor`: the row expands into its form. Of the three kinds of list, entity rows and rows edited in place are this; records compared across columns are a `DataTable`.
+ * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
+ * “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
+ * Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
+ * @behaviour One bordered card, a 1 px rule between records and none after the last. A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name and, under it, one muted line; `name` is required and so are the mark and the line, and a record with nothing to say passes the dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as one muted line joined by a middle dot, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts, the status and the time leave the row for that one line, ending in an ellipsis, never a labelled list. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record replaces its detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
+ * “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
+ * Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
+ * “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
+ * Ours: one or two row commands (outline buttons of 32 px) stand before the three dots (36 px), the Dots Menu.
+ * “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity)
+ * Ours: three still skeleton rows hold the place, in a region that announces what replaces them; then the first that holds: the failed read, no match, the empty state, the rows.
+ * @words “Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity)
+ * Ours: the name is the record's own and the labels around it are sentence case, not Title Case.
+ * “Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen.” (https://vercel.com/geist/entity)
+ * Ours: every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A row command names its result in sentence case ("Edit domain"). A status is the exception's word ("Needs attention"), never "Active" on every row.
+ * @access “Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself.” (https://vercel.com/geist/skeleton)
+ * Ours: the loading rows sit in one `SkeletonRegion` that is busy while they stand and announces what replaces them. A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a status named by `loadingLabel`, inside the one live region that announces what replaces them.
+ * “For multi-select rows, the leading `Checkbox` carries `aria-label="Select {entity name}"` so the row is selectable without relying on the visual label.” (https://vercel.com/geist/entity)
+ * Ours: each box is named by `select.label`, which reads "Select {record}".
  */
 export declare function RecordList<TRecord extends RowData>(props: RecordListProps<TRecord>): import("react").JSX.Element | null;
 //# sourceMappingURL=record-list.d.ts.map

package/dist/components/record-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"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"}

package/dist/components/record-list.js

@@ -1,19 +1,57 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId } from "react";
 import { ActionMenu } from "./action-menu.js";
-import { DataTable, } from "./data-table.js";
+import { Checkbox } from "./checkbox.js";
+import { EntityTable, } from "./data-table.js";
 import { EmptyState } from "./empty-state.js";
 import { PageCommandButton } from "./page-actions.js";
+import { ProgressChecklist } from "./progress-checklist.js";
 import { RecordIdentity } from "./record-identity.js";
 import { RecordTime, recordDate } from "./record-time.js";
-import { Skeleton } from "./skeleton.js";
+import { Skeleton, SkeletonRegion } from "./skeleton.js";
 import { StatusBadge } from "./status-badge.js";
 import { TableCard } from "./table-card.js";
 import { TableValue } from "./table-value.js";
 import { soleMenuButton } from "../internal/record-menu-items.js";
 import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
+import { useTableLaidOutCompact } from "../internal/table-compact-line.js";
+/** The width of the commands column when it holds only the three dots or the chevron. */
+const ICON_COMMANDS_SIZE = 64;
+/**
+ * A 32 px outline button with its icon, as a lone menu command draws it: the cell's 8 px before it
+ * and 20 px after it at the card's edge, the button's edges and 6 px padding, the 14 px icon and
+ * its gap, 8 px to spare, and each character of a 14 px medium label at most 8 px wide, so the
+ * label is never cut.
+ */
+const SOLE_BUTTON_FRAME = 72;
+const SOLE_BUTTON_CHARACTER = 8;
+/**
+ * The commands column's width when the caller gives none: the three dots alone, or the widest
+ * lone menu command any record turns into a button, so a button is never cut to its icon.
+ */
+function defaultCommandsSize(props, records) {
+    if (props.layout === "line" || !props.menu)
+        return ICON_COMMANDS_SIZE;
+    const menu = props.menu;
+    return records.reduce((widest, record) => {
+        const sole = soleMenuButton(menu(record)?.commands ?? []);
+        if (!sole)
+            return widest;
+        return Math.max(widest, SOLE_BUTTON_FRAME + sole.label.length * SOLE_BUTTON_CHARACTER);
+    }, ICON_COMMANDS_SIZE);
+}
+function commandsColumnSize(props) {
+    const state = props.state;
+    const roomUnused = state !== undefined && !props.command && !props.records.some((record) => state(record));
+    return roomUnused || props.commandsSize === undefined
+        ? defaultCommandsSize(props, props.records)
+        : props.commandsSize;
+}
+/** The checklist's ring: one 36 px button and the cell's padding. */
+const CHECKLIST_SIZE = 52;
+const SELECT_SIZE = 40;
 const ShownList = createContext(undefined);
 function useShownList() {
     // SAFETY: only RecordList provides ShownList, with its own props, around the rows of that same RecordList<TRecord>.
@@ -29,15 +67,33 @@ function NameCell({ row }) {
     const list = useShownList();
     const shown = list.name(row.original);
     const state = list.state?.(row.original);
-    return (_jsx(RecordIdentity, { detail: state ? _jsx(RowMessageLine, { state: state }) : shown.detail, mark: shown.mark, name: shown.name, wraps: list.wraps }));
+    const nextStepsUnder = useTableLaidOutCompact() && state?.message.actions.length;
+    return (_jsx(RecordIdentity, { detail: state ? (_jsxs("span", { className: "block break-words whitespace-normal", children: [_jsx(RowMessageLine, { state: state }), nextStepsUnder ? (_jsx("span", { className: "flex flex-wrap gap-2 pt-2", children: _jsx(RowMessageActions, { state: state }) })) : null] })) : (shown.detail), mark: shown.mark, name: shown.name, wraps: list.wraps }));
+}
+function SelectCell({ row }) {
+    const select = useShownList().select;
+    if (!select)
+        return null;
+    const record = row.original;
+    return (_jsx(Checkbox, { "aria-label": select.label(record), checked: select.checked(record), onCheckedChange: (checked) => select.onCheckedChange(record, checked) }));
 }
 function FactCell({ column, row }) {
-    const fact = useShownList().facts?.find((each) => each.id === column.id);
-    return _jsx(_Fragment, { children: fact?.of(row.original) });
+    const facts = useShownList().facts ?? [];
+    return _jsx(_Fragment, { children: facts.find((each) => each.id === column.id)?.of(row.original) });
+}
+function SummaryCell({ row }) {
+    const list = useShownList();
+    const facts = list.facts ?? [];
+    const status = list.status?.of(row.original);
+    const said = facts.flatMap((fact) => {
+        const value = fact.of(row.original);
+        return value === null || value === undefined || value === "" ? [] : [{ id: fact.id, value }];
+    });
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", "data-slot": "record-summary", children: [status ? _jsx(StatusBadge, { label: status.label, tone: status.tone }) : null, _jsx("span", { className: "min-w-0 truncate", children: said.map(({ id, value }, index) => (_jsxs("span", { children: [index > 0 ? _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }) : null, value] }, id))) })] }));
 }
 function StatusCell({ row }) {
     const shown = useShownList().status?.of(row.original);
-    return (_jsx("div", { className: "w-37.5", children: shown ? _jsx(StatusBadge, { label: shown.label, tone: shown.tone }) : null }));
+    return shown ? _jsx(StatusBadge, { label: shown.label, tone: shown.tone }) : null;
 }
 function TimeCell({ row }) {
     const time = useShownList().time;
@@ -45,7 +101,11 @@ function TimeCell({ row }) {
         return null;
     const record = row.original;
     const at = recordDate(time.of(record));
-    return (_jsx("div", { className: "w-23 text-right text-muted-foreground tabular-nums", children: _jsx(TableValue, { missingLabel: time.missing, value: at ? (_jsx(RecordTime, { at: at, locale: time.locale, phrase: (when) => time.phrase(when, record) })) : null }) }));
+    return (_jsx("div", { className: "truncate text-right tabular-nums", children: _jsx(TableValue, { missingLabel: time.missing, value: at ? (_jsx(RecordTime, { at: at, locale: time.locale, phrase: (when) => time.phrase(when, record) })) : null }) }));
+}
+function ChecklistCell({ row }) {
+    const shown = useShownList().checklist?.of(row.original);
+    return shown ? (_jsx("div", { className: "flex justify-end", children: _jsx(ProgressChecklist, { ...shown }) })) : null;
 }
 function CommandsCell({ row }) {
     const list = useShownList();
@@ -53,55 +113,101 @@ function CommandsCell({ row }) {
     const state = list.state?.(record);
     const menu = list.menu?.(record);
     const commands = menu?.commands ?? [];
-    const menuButton = list.command ? undefined : soleMenuButton(commands);
-    const command = menuButton ? (_jsx(PageCommandButton, { command: menuButton, variant: "outline" })) : (list.command?.(record));
+    const own = list.command?.(record);
+    const menuButton = own || list.layout === "line" ? undefined : soleMenuButton(commands);
+    // On a card too narrow for the row's columns the next steps stand under the message instead.
+    const laidOutCompact = useTableLaidOutCompact();
+    const buttons = own ? [own].flat() : menuButton ? [menuButton] : [];
     const end = menu && commands.length > 0 && !menuButton ? (_jsx(ActionMenu, { commands: commands, label: menu.label, record: list.name(record).name })) : list.open?.href(record) && !state ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
-    if (!command && !state && !end)
+    if (buttons.length === 0 && !state && !end)
         return null;
-    return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [command ? (_jsx("div", { className: "flex max-w-48 min-w-28 justify-end [&>*]:max-w-full [&>*]:min-w-0 [&>*]:shrink [&>*>span:not([data-icon])]:truncate", children: command })) : null, state ? _jsx(RowMessageActions, { state: state }) : null, end] }));
+    return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [buttons.length > 0 ? (_jsx("div", { className: "flex min-w-0 justify-end gap-2 [&>*]:max-w-full [&>*]:min-w-0 [&>*]:shrink [&>*>span:not([data-icon])]:truncate", children: buttons.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label))) })) : null, state && !laidOutCompact ? _jsx(RowMessageActions, { state: state }) : null, end] }));
 }
 function LoadingRecords({ label }) {
-    return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: "divide-y divide-border", role: "status", children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "flex min-h-14 items-center gap-4 pr-2 pl-4", children: [_jsx(Skeleton, { className: "size-8 shrink-0" }), _jsxs("div", { className: "grid min-w-0 gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-40 max-w-full" }), _jsx(Skeleton, { className: "h-3 w-56 max-w-full" })] }), _jsx(Skeleton, { className: "ml-auto h-4 w-23" })] }, index))) }));
+    return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: "divide-y divide-border", role: "status", children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-4 px-2 py-4", children: [_jsx(Skeleton, { className: "shrink-0", height: 32, width: 32 }), _jsxs("div", { className: "grid min-w-0 gap-2", children: [_jsx(Skeleton, { className: "max-w-full", height: 16, width: 160 }), _jsx(Skeleton, { className: "max-w-full", height: 16, width: 224 })] }), _jsx(Skeleton, { className: "ml-auto", height: 16, width: 92 })] }, index))) }));
 }
 function Pages({ pages }) {
-    const waiting = (command) => pages.pending ? { ...command, disabled: true } : command;
-    return (_jsxs("div", { "aria-busy": pages.pending ? true : undefined, className: "flex items-center gap-3", children: [_jsx("span", { className: "tabular-nums", children: pages.label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PageCommandButton, { command: waiting(pages.previous), variant: "outline" }), _jsx(PageCommandButton, { command: waiting(pages.next), variant: "outline" })] })] }));
+    const side = (label, onClick) => ({
+        label,
+        onClick: onClick ?? (() => undefined),
+        disabled: pages.pending === true || onClick === undefined,
+    });
+    const labelId = useId();
+    return (_jsxs("div", { "aria-busy": pages.pending ? true : undefined, "aria-labelledby": pages.label ? labelId : undefined, className: "flex items-center gap-3", role: "group", children: [pages.label ? (_jsx("span", { className: "tabular-nums", id: labelId, children: pages.label })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PageCommandButton, { command: side(pages.previousLabel, pages.onPrevious), variant: "outline" }), _jsx(PageCommandButton, { command: side(pages.nextLabel, pages.onNext), variant: "outline" })] })] }));
 }
 function recordColumns(props) {
-    const columns = [
-        {
-            id: "name",
-            header: props.label,
-            meta: props.wraps ? { wraps: true } : undefined,
-            cell: NameCell,
-        },
-    ];
-    for (const fact of props.facts ?? []) {
+    const columns = [];
+    if (props.select) {
         columns.push({
-            id: fact.id,
-            header: fact.label,
-            accessorFn: fact.of,
-            meta: { ...(fact.prose ? { prose: true } : { narrow: true }), optional: true },
-            cell: FactCell,
+            id: "select",
+            header: props.select.header,
+            size: SELECT_SIZE,
+            cell: SelectCell,
         });
     }
-    if (props.status) {
+    columns.push({
+        id: "name",
+        header: props.label,
+        meta: props.wraps ? { wraps: true } : undefined,
+        cell: NameCell,
+    });
+    const facts = props.facts ?? [];
+    if (props.layout === "line") {
+        const summary = facts.length > 0 ? facts.map((fact) => fact.label).join(" · ") : props.status?.label;
+        if (summary) {
+            columns.push({
+                id: "summary",
+                header: summary,
+                cell: SummaryCell,
+            });
+        }
+    }
+    else {
+        for (const fact of facts) {
+            columns.push({
+                id: fact.id,
+                header: fact.label,
+                accessorFn: fact.of,
+                size: fact.size,
+                meta: { optional: true, wraps: fact.wraps ?? false },
+                cell: FactCell,
+            });
+        }
+        const status = props.status;
+        if (status && props.records.some((record) => status.of(record))) {
+            columns.push({
+                id: "status",
+                header: status.label,
+                accessorFn: status.of,
+                size: status.size,
+                meta: { optional: true },
+                cell: StatusCell,
+            });
+        }
+    }
+    if (props.time) {
         columns.push({
-            id: "status",
-            header: props.status.label,
-            accessorFn: props.status.of,
-            meta: { narrow: true, optional: true },
-            cell: StatusCell,
+            id: "time",
+            header: props.time.label,
+            size: props.time.size,
+            cell: TimeCell,
         });
     }
-    if (props.time) {
-        columns.push({ id: "time", header: props.time.label, meta: { narrow: true }, cell: TimeCell });
+    if (props.checklist) {
+        columns.push({
+            id: "checklist",
+            header: props.checklist.label,
+            size: CHECKLIST_SIZE,
+            cell: ChecklistCell,
+        });
     }
-    if (props.menu || props.command || props.open || props.state) {
+    const { menu, command, state } = props;
+    const someRecordHasCommands = props.records.some((record) => menu?.(record) || command?.(record) || state?.(record));
+    if (props.open || someRecordHasCommands) {
         columns.push({
             id: "commands",
             header: props.commandsHeader ?? props.label,
-            meta: { narrow: true },
+            size: commandsColumnSize(props),
             cell: CommandsCell,
         });
     }
@@ -109,36 +215,60 @@ function recordColumns(props) {
 }
 function RecordRows(props) {
     const columns = recordColumns(props);
+    const layout = {};
+    if (props.layout === "line")
+        layout.compactLayout = "narrow";
+    const menu = props.menu;
     const table = {
         columns,
+        rowMenu: menu
+            ? (record) => {
+                const shown = menu(record);
+                return shown ? { ...shown, record: props.name(record).name } : null;
+            }
+            : undefined,
         data: [...props.records],
         embedded: true,
         empty: { kind: "nothingYet", message: props.label },
         getRowId: props.getId,
-        compactLayout: columns.length >= 7 || props.command !== undefined
-            ? "wide"
-            : "standard",
-        primaryColumns: ["name", "commands"],
-        showColumnHeaders: false,
+        primaryColumnId: "name",
+        primaryColumns: ["select", "name", "checklist", "commands"],
+        ...layout,
         rowEditor: props.editor ? { rowId: props.editor.id, render: props.editor.render } : undefined,
         tableLabel: props.label,
     };
-    return props.open ? (_jsx(DataTable, { ...table, primaryColumnId: "name", renderRowLink: props.open.renderLink, rowHref: props.open.href, rowLabel: props.open.label })) : (_jsx(DataTable, { ...table }));
+    return props.open ? (_jsx(EntityTable, { ...table, renderRowLink: props.open.renderLink, rowHref: props.open.href, rowLabel: props.open.label })) : (_jsx(EntityTable, { ...table }));
 }
 /**
- * One line per record, on one resting card: its identity mark and name over
- * what it is, a few comparable facts, a status only for the exception, when
- * it happened, the row's one command, and its three dots last.
+ * Entity rows: objects a person opens or acts on, one line each on one resting card: the
+ * identity mark and name over what it is, a few facts, a status only for the exception, when it
+ * happened, at most two row commands, and the three dots last.
  *
  * @family Compositions
- * @when A list of records inside another page: an Overview's exceptions, an object page's "Needs attention", any section that lists records a person opens or acts on. A page whose whole job is the list is a `CollectionPage`, which draws this.
- * @instead Figures compared across records, read by their column headings, are a `DataTable`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`.
- * @behaviour Each row reads left to right at fixed measures: the mark and name (at most a third of the row), facts on one line, the status in its 150 px slot only when the record is the exception, the time right-aligned in tabular figures with the exact moment on hover, the row command at most 192 px wide with its label cut short, then the three dots, or a muted chevron when the row only opens. On a card too narrow for them (768 px, or 1024 px for seven columns or more or a row command), the facts, the status and the time move under the record's line, leaving out a fact or status the record does not have, and the name and its commands keep theirs. A menu of one command that is not destructive, with no row command, is that command's outline button. With `open` the whole row is one target. A failed or refused action of the record replaces its detail line, with its next steps beside its commands; the record being edited opens its form under its own line. While the records load, three still skeleton rows hold the place; then, first that holds: the failed read, no match, the empty state, the rows. A list with no records and no empty state draws nothing.
- * @words Every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A status is the exception's word ("Needs attention"), never "Active" on every row.
- * @access A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a busy status named by `loadingLabel`.
+ * @when “Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity)
+ * Ours: the records are things a person opens or acts on and that name themselves: projects, deployments, domains, members, integrations, Agents, Skills, mailboxes. A list inside another page: an Overview's exceptions, an object page's "Needs attention". A page whose whole job is the list is a `CollectionPage`, which draws this. Values edited in place (a domain, an environment variable) are the same rows with an `editor`: the row expands into its form. Of the three kinds of list, entity rows and rows edited in place are this; records compared across columns are a `DataTable`.
+ * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
+ * “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
+ * Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
+ * @behaviour One bordered card, a 1 px rule between records and none after the last. A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name and, under it, one muted line; `name` is required and so are the mark and the line, and a record with nothing to say passes the dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as one muted line joined by a middle dot, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts, the status and the time leave the row for that one line, ending in an ellipsis, never a labelled list. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record replaces its detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
+ * “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
+ * Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
+ * “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
+ * Ours: one or two row commands (outline buttons of 32 px) stand before the three dots (36 px), the Dots Menu.
+ * “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity)
+ * Ours: three still skeleton rows hold the place, in a region that announces what replaces them; then the first that holds: the failed read, no match, the empty state, the rows.
+ * @words “Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity)
+ * Ours: the name is the record's own and the labels around it are sentence case, not Title Case.
+ * “Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen.” (https://vercel.com/geist/entity)
+ * Ours: every string is the product's: `label` names the list, a time's `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu's `label` reads "More for {record}". A row command names its result in sentence case ("Edit domain"). A status is the exception's word ("Needs attention"), never "Active" on every row.
+ * @access “Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself.” (https://vercel.com/geist/skeleton)
+ * Ours: the loading rows sit in one `SkeletonRegion` that is busy while they stand and announces what replaces them. A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu's `label`, and the menu's first line names the record. The loading rows are a status named by `loadingLabel`, inside the one live region that announces what replaces them.
+ * “For multi-select rows, the leading `Checkbox` carries `aria-label="Select {entity name}"` so the row is selectable without relying on the visual label.” (https://vercel.com/geist/entity)
+ * Ours: each box is named by `select.label`, which reads "Select {record}".
  */
 export function RecordList(props) {
     const { records, heading, footer } = props;
+    const loading = !props.failed && records === undefined;
     let body;
     if (props.failed) {
         body = _jsx(EmptyState, { ...props.failed, scope: "card" });
@@ -157,5 +287,5 @@ export function RecordList(props) {
     else {
         body = _jsx(RecordRows, { ...props, records: records });
     }
-    return (_jsx(TableCard, { actions: heading?.meta ? (_jsx("span", { className: "text-body-sm text-muted-foreground", children: heading.meta })) : undefined, footer: footer?.pages ? _jsx(Pages, { pages: footer.pages }) : undefined, footerHint: footer?.count, description: heading?.description, title: heading?.title, children: _jsx(ShownList.Provider, { value: props, children: body }) }));
+    return (_jsx(TableCard, { actions: heading?.meta ? (_jsx("span", { className: "text-body-sm text-muted-foreground", children: heading.meta })) : undefined, footer: footer?.pages && (footer.pages.onPrevious || footer.pages.onNext) ? (_jsx(Pages, { pages: footer.pages })) : undefined, footerHint: footer?.count, note: footer?.note, description: heading?.description, title: heading?.title, children: _jsx(ShownList.Provider, { value: props, children: _jsx(SkeletonRegion, { busy: loading, children: body }) }) }));
 }