@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/data-table.js

@@ -2,18 +2,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { flushSync } from "react-dom";
-import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_includesString, filterFn_inNumberRange, filterFn_weakEquals, flexRender, metaHelper, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table";
+import { columnFilteringFeature, columnSizingFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_includesString, filterFn_inNumberRange, filterFn_weakEquals, flexRender, metaHelper, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { ActionContextMenu } from "./action-menu.js";
+import { Button, ButtonLink } from "./button.js";
 import { CollectionToolbar } from "./collection-toolbar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { EmptyState } from "./empty-state.js";
-import { Table, TableCell, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
+import { MiddleTruncate } from "./middle-truncate.js";
+import { Table, TableCell, TableCol, TableColgroup, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
 import { TableCard } from "./table-card.js";
-import { tableCompactLayouts } from "./table-layouts.js";
+import { TableCompactLine, TableLaidOutCompact } from "../internal/table-compact-line.js";
+import { compactLayoutFor, tableCompactLayouts, } from "./table-layouts.js";
+import { titleWhenCut } from "../internal/title-when-cut.js";
 const dataTableFeatures = tableFeatures({
     columnFilteringFeature,
+    columnSizingFeature,
     columnVisibilityFeature,
     rowPaginationFeature,
     rowSortingFeature,
@@ -41,53 +46,41 @@ function isEmptyValue(value) {
 function isNumericColumn(column) {
     return column.columnDef.meta?.numeric === true;
 }
-const NARROW_COLUMN_CLASS = "w-px whitespace-nowrap";
-const IDENTITY_COLUMN_CLASS = "max-w-0 min-w-24";
-const IDENTITY_CONTENT_CLASS = "truncate";
-const PROSE_COLUMN_CLASS = "min-w-32";
-const WRAPPING_COLUMN_CLASS = "min-w-32 whitespace-normal align-top";
-const PROSE_FRAME_CLASS = "grid grid-cols-[minmax(0,max-content)]";
-const PROSE_CONTENT_CLASS = "max-w-64 truncate";
-const CELL_INSET_CLASS = "px-4";
-function primaryRowLinkProps({ href, label, identity, content, }) {
+function renderCell(cell) {
+    const value = cell.getValue();
+    if (cell.column.columnDef.meta?.identifier === true && !isEmptyValue(value) && value !== "") {
+        return _jsx(MiddleTruncate, { value: String(value) });
+    }
+    return flexRender(cell.column.columnDef.cell, cell.getContext());
+}
+function primaryRowLinkProps({ href, label, wraps, content, }) {
     const props = {
         href,
         "aria-label": label,
         "data-row-link": "",
-        className: cn("-mx-2 -my-1.5 block rounded-md px-2 py-1.5", identity && IDENTITY_CONTENT_CLASS),
+        className: cn("-my-1.5 block rounded-sm py-1.5", !wraps && "truncate"),
         children: content,
     };
-    if (identity) {
+    if (!wraps) {
         props.onFocus = titleWhenCut;
         props.onPointerEnter = titleWhenCut;
     }
     return props;
 }
-function titleWhenCut(event) {
-    const element = event.currentTarget;
-    const cut = [element, ...element.querySelectorAll("*")].some((node) => node.scrollWidth > node.clientWidth);
-    const text = element.textContent?.replace(/\s+/g, " ").trim();
-    if (cut && text)
-        element.title = text;
-    else
-        element.removeAttribute("title");
-}
+// Below its layout's width the table lays out by content, so the identity takes the room the
+// other columns leave and a long name ends in an ellipsis instead of widening the table.
 const COMPACT_IDENTITY_CLASS = {
-    tight: "@max-xl/table:w-full",
-    standard: "@max-3xl/table:w-full",
-    wide: "@max-5xl/table:w-full",
-    spacious: "@max-6xl/table:w-full",
+    narrow: "@max-md/table:w-full @max-md/table:max-w-0",
+    tight: "@max-xl/table:w-full @max-xl/table:max-w-0",
+    standard: "@max-3xl/table:w-full @max-3xl/table:max-w-0",
+    wide: "@max-5xl/table:w-full @max-5xl/table:max-w-0",
+    roomy: "@max-[68rem]/table:w-full @max-[68rem]/table:max-w-0",
+    spacious: "@max-6xl/table:w-full @max-6xl/table:max-w-0",
 };
-function widthClass(column, identityColumnId, compactLayout, identityAlone, balancedIdentity) {
-    if (column.columnDef.meta?.narrow === true)
-        return NARROW_COLUMN_CLASS;
-    if (column.columnDef.meta?.prose === true)
-        return PROSE_COLUMN_CLASS;
-    if (column.columnDef.meta?.wraps === true)
-        return WRAPPING_COLUMN_CLASS;
-    if (column.id !== identityColumnId)
-        return false;
-    return cn(IDENTITY_COLUMN_CLASS, balancedIdentity ? "w-1/4" : "w-1/3 sm:min-w-44", identityAlone && "w-full", compactLayout && COMPACT_IDENTITY_CLASS[compactLayout]);
+function identityWidthClass(column, identityColumnId, compactLayout) {
+    return column.id === identityColumnId && compactLayout
+        ? COMPACT_IDENTITY_CLASS[compactLayout]
+        : false;
 }
 function definitionId(column) {
     if (!column)
@@ -101,11 +94,27 @@ export function columnMenuLabel(column) {
     // oxlint-disable-next-line anti-slop/no-runtime-typeof -- TanStack types a column header as a string or a render function; only typeof tells them apart.
     return typeof header === "string" ? header : column.id;
 }
-function collapseClass(columnId, primaryColumns, compactLayout) {
-    if (primaryColumns.includes(columnId))
+function sortOrder(sorted) {
+    if (sorted === "asc")
+        return "ascending";
+    if (sorted === "desc")
+        return "descending";
+    return undefined;
+}
+function collapseLayout(column, primaryColumns, compactLayout) {
+    if (primaryColumns.includes(column.id))
         return undefined;
-    return compactLayout ? tableCompactLayouts[compactLayout].column : undefined;
+    return compactLayout;
 }
+function collapseClass(column, primaryColumns, compactLayout) {
+    const layout = collapseLayout(column, primaryColumns, compactLayout);
+    return layout ? tableCompactLayouts[layout].column : undefined;
+}
+function collapseTrackClass(column, primaryColumns, compactLayout) {
+    const layout = collapseLayout(column, primaryColumns, compactLayout);
+    return layout ? tableCompactLayouts[layout].track : undefined;
+}
+const NO_ROW_MENU = { label: "", record: "", commands: [] };
 function useShownLayout() {
     const [shownLayout, setShownLayout] = React.useState("both");
     const probeRef = React.useCallback((probe) => {
@@ -152,33 +161,62 @@ function LayoutProbeLeadingRecords({ layout, probeRef, children, }) {
     return (_jsxs(_Fragment, { children: [layout ? (_jsx("tbody", { ref: probeRef, "aria-hidden": "true", "data-slot": "table-layout-probe", className: tableCompactLayouts[layout].details }, layout)) : null, children] }));
 }
 const defaultRowLink = (props) => _jsx("a", { ...props });
+function PagerButton({ enabled, label, link, onClick, }) {
+    if (link && enabled) {
+        return (_jsx(ButtonLink, { render: link, variant: "outline", children: label }));
+    }
+    return (_jsx(Button, { disabled: !enabled, onClick: onClick, variant: "outline", children: label }));
+}
+function GroupHeading({ children, span }) {
+    return (_jsx("tbody", { "data-slot": "table-group-heading", children: _jsx(TableRow, { children: _jsx(TableHead, { className: "text-foreground last:text-left", colSpan: span, scope: "colgroup", children: children }) }) }));
+}
 function DefaultToolbar({ actions }) {
     return actions ? _jsx(CollectionToolbar, { label: "", actions: actions }) : null;
 }
 /**
- * Records that share comparable facts, read across in rows inside their `TableCard`.
+ * Records compared across columns: the same facts for every record, read down a column and
+ * across a row, inside their `TableCard`.
  *
  * @family Data
- * @when Records that share comparable facts: usage per Agent, statements, invoices, customers with
- * their partner and count. 40 px rows for figures; `density="comfortable"`, the default, gives 48 px
- * for entity rows.
- * @instead An entity collection that is the page's whole job is `CollectionPage`, which draws its own
- * 56 px rows. A descriptive list is `ItemGroup`. One object's facts are `ObjectFacts`.
- * @behaviour Headings visible by default; numbers trail in tabular figures. Row hover, focus within
- * and an open menu take `accent`; a selected row takes `muted`; headers and footers never highlight.
- * Narrow cards move facts into a detail row, never scroll sideways; an `optional` column's empty
- * value is left out of it. Empty sits outside the body.
- * @words Headings are nouns with their unit: "Cost (€)", "Tokens". The footer is a count or the
- * paging; the summary row is a labelled total. Italian headings run a third longer and never wrap.
- * @access A native table with `aria-label`; `th scope="col"`; the record's name is the row's one
- * link. A missing value is a hidden "—" with screen-reader text, never blank.
+ * @when “Use `<Table>` for tabular data where rows share the same shape and at least one column is sortable or comparable across rows.” (https://vercel.com/geist/table)
+ * Ours: the person compares: usage per Agent, statements, invoices, customers with their partner and count. The columns are fixed, each has a heading, and at least one is a figure or can be sorted. There are three kinds of list. Objects a person opens (a project, a deployment, a member, an integration) are entity rows: a `RecordList`. Values edited in place (a domain, an environment variable) are entity rows that expand into their form: a `RecordList`'s `editor`. Records compared across columns are this table.
+ * @instead “For a row of descriptive content paired with a single action (membership row, integration row), use `Entity` instead.” (https://vercel.com/geist/table)
+ * “For a key/value metadata block on a detail page, use `Description`, not a two-column table.” (https://vercel.com/geist/table)
+ * Ours: Geist's `Entity` is a `RecordList` row. A registry of entities whose columns `RecordList` cannot hold, more than three facts beside a filter bar the product owns, as Vercel's Deployments list, is this table with `rows="entities"`, which draws the same rows: headings for assistive technology only, 72 px rows, a `RecordIdentity` in the identity column. Its `Description` is `ObjectFacts`. A list on a page of its own is a `CollectionPage`. A descriptive list is `ItemGroup`.
+ * @behaviour Every column has a `header`; a column without one does not compile. The headings are always visible, medium weight in the cells' body grey, 36 px high above 12 px of room and the rule, so the first row starts at the rule like every other; rows are 40 px. Each column is as wide as its definition's `size`, in pixels, and the columns without one share the rest, so a table gives a size to every column but the one that takes the spare width; a value too long for its column ends in an ellipsis, whole in its title (a record's name carries its own), unless the column `wraps`; a column marked `identifier` holds ids or paths and is cut in the middle instead. The last column trails unless it `wraps` or is `centered`; a `centered` column's heading and values sit in the middle of it. Records are divided by a 1 px rule, none after the last. Records of several kinds stand in one table under `group` headings (Vercel's Usage page: *Delivery network*, *Functions*): a heading row that spans the columns, in ink, medium text, 36 px high with the same rule under it, one per group in the order the groups first appear, never a second table; a heading is the group's name and carries no figure of its own. A row that opens a record takes `accent` on hover, and any row on focus within and while its menu is open; a row that opens nothing never reacts to hover. A selected row takes `muted`; headers and footers never highlight and carry no fill. A row never scrolls sideways: on a card narrower than its columns (the sized ones and 160 px for each without a size) the row keeps its name and its `primaryColumns`, and every other column leaves it, its value joining the one muted line under the name, joined by a middle dot and ending in an ellipsis (a `Tag` reads as its text there, and a `wraps` column's prose wraps the line whole), or `dropped` when its `compact` says so, as Vercel's lists read on a phone: no labels, no second line; an `optional` column's empty value is left out of the line. A table whose every column is in `primaryColumns`, a settings matrix, lays out by its content there instead, so the name wraps beside the columns. A bounded page's paging stands in the card's footer strip at its trailing edge, opposite `footer`, which stands at the leading edge: its `status` ("Page 2 of 7") before Previous and Next, which are the product's router links (`previousLink`, `nextLink`) when each page is its own address, and buttons otherwise; the one that leads nowhere stays, disabled. A note about the whole table is `footerNote`, in a strip of its own under that one: one muted line, an optional *Learn more* after it at the left and one secondary action at the right (Vercel's deployments list ends "Deployment retention is enabled. Learn more" with *View recently deleted*); it is the one place a table says a sentence. Colour is neutral: headings and cells in the body grey, no hue, except a status badge or a tone the cell itself carries.
+ * “When the underlying list is empty (filter cleared, never created), render `Empty State` outside the table rather than an empty `<Table.Body>`.” (https://vercel.com/geist/table)
+ * “After an async filter change, wrap the region in `aria-live="polite"` so screen readers announce the new state.” (https://vercel.com/geist/empty-state)
+ * Ours: empty sits outside the body, in a polite live region that stays in place so a filter that empties the table is announced.
+ * “Sortable column headers are buttons. The visible label stays Title Case; the sort-direction arrow is decorative and the button announces the next sort state to assistive tech.” (https://vercel.com/geist/table)
+ * Ours: the order has one owner, the app's `sorting`, which the URL holds, so no heading is a button and every page of a paged list follows one order.
+ * “Apply `tabular-nums` (or Geist Mono) to numeric columns so digits align across rows for comparison.” (https://vercel.com/geist/table)
+ * Ours: a numeric column trails in tabular figures.
+ * @words “Column headers (`<Table.Head>`) are Title Case nouns or noun phrases: `Last Used`, `Requests (7d)`, `Created`, `Status`. Never sentences.” (https://vercel.com/geist/table)
+ * “Render `—` in cells where a value is unknown or not applicable. Don’t substitute `N/A`, `null`, or an empty string.” (https://vercel.com/geist/table)
+ * “Use the canonical short relative-time form in cells (`2m ago`, `5h ago`); switch to `Mar 14, 2026` past 7 days. See `Relative Time Card`.” (https://vercel.com/geist/table)
+ * “Pagination labels are `Previous` and `Next`. Page-count copy reads `Page 2 of 7` or `21–40 of 142` with an en-dash inside the range.” (https://vercel.com/geist/table)
+ * Ours: headings are sentence case nouns with their unit, "Cost (€)", "Tokens", where Geist writes Title Case. The words of a time and of Previous and Next are the product's catalogue, in both languages. The footer is a count or the paging; the summary row is a labelled total. Italian headings run a third longer and never wrap.
+ * @access A native table named by `tableLabel`, which is required; `th scope="col"`; the record's name is the row's one link. A sorted column's heading carries `aria-sort`. Ours: a missing value is a hidden "—" with screen-reader text, never blank.
+ */
+export function DataTable(props) {
+    return _jsx(RecordsTable, { ...props, kind: props.rows ?? "figures" });
+}
+/**
+ * The entity rows `RecordList` draws: a table whose headings only a screen reader reads, 72 px
+ * rows, and a form that opens inside the record's row. A screen draws these rows with
+ * `RecordList`, never with this.
  */
-export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = true, density = "comfortable", interactive = true, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, rowEditor, }) {
+export function EntityTable(props) {
+    return _jsx(RecordsTable, { ...props, kind: "entities" });
+}
+function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, footerNote, group, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, rowEditor, rowMenu, }) {
+    const entities = kind === "entities";
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnVisibility, setColumnVisibility] = React.useState({});
-    const identityColumnId = definitionId(columns.find((column) => column.meta?.narrow !== true && column.meta?.prose !== true && column.meta?.wraps !== true));
-    const identityAlone = columns.every((column) => column.meta?.narrow === true || definitionId(column) === identityColumnId);
+    const identityColumnId = primaryColumnId ?? definitionId(columns[0]);
+    // TanStack gives a column without a size its default one; only the caller's definition says whether it has one.
+    const sizeOf = new Map(columns.map((column) => [definitionId(column), column.size]));
     // An external pager means `data` is already one bounded server page:
     // `manualPagination` makes the paginated row model a passthrough so every
     // row of the current page renders.
@@ -201,28 +239,40 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
     if (getRowId)
         tableOptions.getRowId = getRowId;
     const table = useTable(tableOptions);
-    const balancedIdentity = showColumnHeaders && table.getVisibleLeafColumns().length > 5;
     const hasDetailColumns = table
         .getAllLeafColumns()
         .some((column) => !primaryColumns.includes(column.id));
-    const compactLayout = hasDetailColumns
-        ? (requestedCompactLayout ?? (table.getVisibleLeafColumns().length > 7 ? "wide" : "standard"))
-        : undefined;
+    const neededLayout = requestedCompactLayout ??
+        compactLayoutFor(table.getVisibleLeafColumns().map((column) => sizeOf.get(column.id)));
+    const compactLayout = hasDetailColumns ? neededLayout : undefined;
+    // A table whose every column stays lays out by its content on a narrow card, so the name wraps
+    // beside the columns instead of collapsing between them.
+    const tableLayout = compactLayout ?? neededLayout;
     const [shownLayout, layoutProbeRef] = useShownLayout();
     const canPreviousPage = pagination ? pagination.hasPrevious : table.getCanPreviousPage();
     const canNextPage = pagination ? pagination.hasNext : table.getCanNextPage();
     const goPreviousPage = pagination ? pagination.onPrevious : () => table.previousPage();
     const goNextPage = pagination ? pagination.onNext : () => table.nextPage();
+    const waitingForPage = pagination ? pagination.isPending === true : false;
     const filterColumn = filterColumnId ? table.getColumn(filterColumnId) : undefined;
     const rawFilterValue = filterColumn?.getFilterValue();
     // oxlint-disable-next-line anti-slop/no-runtime-typeof -- TanStack types a column filter value as unknown; this is where it is read.
     const filterValue = typeof rawFilterValue === "string" ? rawFilterValue : "";
     const canHideColumns = Boolean(columnsLabel) && table.getAllColumns().some((column) => column.getCanHide());
-    const columnsControl = canHideColumns ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "outline", children: [columnsLabel, _jsx(ChevronDown, { "aria-hidden": "true", "data-icon": "inline-end" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuGroup, { children: table
+    const columnsControl = canHideColumns ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", suffix: _jsx(ChevronDown, { "aria-hidden": "true" }), children: columnsLabel }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuGroup, { children: table
                         .getAllColumns()
                         .filter((column) => column.getCanHide())
                         .map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: columnMenuLabel(column) }, column.id))) }) })] })) : null;
     const rows = table.getRowModel().rows;
+    const sections = [];
+    for (const row of rows) {
+        const heading = group?.(row.original);
+        const section = sections.find((each) => each.heading === heading);
+        if (section)
+            section.rows.push(row);
+        else
+            sections.push({ heading, rows: [row] });
+    }
     const renderRow = (row) => {
         const href = rowHref?.(row.original);
         const label = rowLabel?.(row.original);
@@ -230,12 +280,28 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
         const configuredPrimaryVisible = primaryColumnId !== undefined && table.getColumn(primaryColumnId)?.getIsVisible();
         const primaryId = configuredPrimaryVisible ? primaryColumnId : visibleCells[0]?.column.id;
         const detailCells = visibleCells.filter((cell) => !primaryColumns.includes(cell.column.id) &&
+            cell.column.columnDef.meta?.compact !== "dropped" &&
             !(cell.column.columnDef.meta?.optional === true && isEmptyValue(cell.getValue())));
-        return (_jsxs(TableRecordGroup, { children: [_jsx(TableRow, { "data-href": href, className: cn(href && "cursor-pointer"), detailLayout: detailCells.length > 0 ? compactLayout : undefined, onClick: href
+        const detailFacts = () => detailCells.map((cell) => ({
+            id: cell.id,
+            label: columnMenuLabel(cell.column),
+            value: entities && cell.column.columnDef.meta?.compact === "text"
+                ? String(cell.getValue() ?? "")
+                : renderCell(cell),
+            wraps: cell.column.columnDef.meta?.wraps === true,
+        }));
+        // An entity row keeps its record on one 72 px row on a narrow card: the facts that leave the
+        // row join the line under the name, which `RecordIdentity` draws, instead of a row of their own.
+        const compactLine = entities && compactLayout && detailCells.length > 0 && shownLayout !== "columns"
+            ? { layout: compactLayout, facts: detailFacts() }
+            : undefined;
+        const detailRowShown = !entities && detailCells.length > 0 && shownLayout !== "columns";
+        const menu = rowMenu?.(row.original);
+        const record = (_jsxs(TableRecordGroup, { interactive: Boolean(href), children: [_jsx(TableRow, { "data-href": href, className: cn(href && "cursor-pointer"), detailLayout: !entities && detailCells.length > 0 ? compactLayout : undefined, onClick: href
                         ? (event) => {
                             const target = event.target;
                             if (!(target instanceof Element) ||
-                                target.closest("a, button, input, select, textarea, label, [role='button'], [role='menuitem'], [role='checkbox']")) {
+                                target.closest("a, button, input, select, textarea, label, [role='button'], [role='menuitem'], [role='checkbox'], [role='dialog']")) {
                                 return;
                             }
                             event.currentTarget.querySelector("a[data-row-link]")?.click();
@@ -243,24 +309,25 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                         : undefined, children: visibleCells.map((cell) => {
                         const numeric = isNumericColumn(cell.column);
                         const isPrimaryLink = href && cell.column.id === primaryId;
-                        const collapsed = collapseClass(cell.column.id, primaryColumns, compactLayout);
-                        const className = cn(CELL_INSET_CLASS, numeric && "text-right tabular-nums wrap-normal", cell.column.columnDef.meta?.wraps && "whitespace-normal", widthClass(cell.column, identityColumnId, compactLayout, identityAlone, balancedIdentity), collapsed);
+                        const collapsed = collapseClass(cell.column, primaryColumns, compactLayout);
+                        const wraps = cell.column.columnDef.meta?.wraps === true;
+                        const centered = cell.column.columnDef.meta?.centered === true;
+                        const cutByEllipsis = !wraps && !isPrimaryLink;
+                        const holdsCompactLine = compactLine !== undefined && cell.column.id === identityColumnId;
+                        const className = cn(numeric && "text-right tabular-nums wrap-normal", wraps && "whitespace-normal last:text-left", centered && "text-center last:text-center", cutByEllipsis && "overflow-hidden text-ellipsis", identityWidthClass(cell.column, identityColumnId, tableLayout), collapsed);
                         const drawnOnlyInDetailRow = Boolean(collapsed) && shownLayout === "details" && !isPrimaryLink;
                         if (drawnOnlyInDetailRow) {
                             return _jsx(TableCell, { className: className }, cell.id);
                         }
-                        const content = flexRender(cell.column.columnDef.cell, cell.getContext());
-                        const identity = cell.column.id === identityColumnId;
-                        const prose = cell.column.columnDef.meta?.prose === true;
-                        return (_jsx(TableCell, { className: className, children: isPrimaryLink ? (renderRowLink(primaryRowLinkProps({ href, label, identity, content }))) : identity ? (_jsx("div", { className: IDENTITY_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content })) : prose ? (_jsx("div", { className: PROSE_FRAME_CLASS, children: _jsx("div", { className: PROSE_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content }) })) : (content) }, cell.id));
-                    }) }), rowEditor?.rowId === row.id ? (_jsx(TableRow, { "data-slot": "table-row-editor", className: "in-[tbody]:hover:bg-transparent", children: _jsx(TableCell, { colSpan: visibleCells.length, className: "p-0 whitespace-normal", children: rowEditor.render(row.original) }) })) : null, detailCells.length > 0 && shownLayout !== "columns" ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column.id, primaryColumns, compactLayout)).length, facts: detailCells.map((cell) => ({
-                        id: cell.id,
-                        label: columnMenuLabel(cell.column),
-                        numeric: isNumericColumn(cell.column),
-                        value: flexRender(cell.column.columnDef.cell, cell.getContext()),
-                    })) })) : null] }, row.id));
+                        const content = holdsCompactLine ? (_jsx(TableCompactLine, { ...compactLine, children: renderCell(cell) })) : (renderCell(cell));
+                        const titledWhenCut = cutByEllipsis || holdsCompactLine;
+                        return (_jsx(TableCell, { className: className, onFocus: titledWhenCut ? titleWhenCut : undefined, onPointerEnter: titledWhenCut ? titleWhenCut : undefined, children: isPrimaryLink
+                                ? renderRowLink(primaryRowLinkProps({ href, label, wraps, content }))
+                                : content }, cell.id));
+                    }) }), rowEditor?.rowId === row.id ? (_jsx(TableRow, { "data-slot": "table-row-editor", className: "h-auto! [&>td]:bg-transparent!", children: _jsx(TableCell, { colSpan: visibleCells.length, className: "p-0 whitespace-normal", children: rowEditor.render(row.original) }) })) : null, detailRowShown ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column, primaryColumns, compactLayout)).length, facts: detailFacts() })) : null] }));
+        return (_jsx(React.Fragment, { children: _jsx(ActionContextMenu, { ...(menu ?? NO_ROW_MENU), children: record }) }, row.id));
     };
-    const tableNode = rows.length === 0 ? (_jsx(EmptyState, { scope: "card", ...(filterValue && noMatchMessage && clearSearchLabel && filterColumn
+    const absence = rows.length === 0 && (_jsx(EmptyState, { scope: "card", ...(filterValue && noMatchMessage && clearSearchLabel && filterColumn
             ? {
                 kind: "noResults",
                 message: noMatchMessage,
@@ -269,26 +336,30 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                     onClick: () => filterColumn.setFilterValue(""),
                 },
             }
-            : empty) })) : (_jsxs(Table, { "aria-label": tableLabel, className: "text-body-sm", compactDetails: compactLayout, density: density, interactive: interactive, children: [_jsx(TableHeader, { className: showColumnHeaders ? undefined : "sr-only", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { className: cn(CELL_INSET_CLASS, isNumericColumn(header.column) && "text-right tabular-nums", widthClass(header.column, identityColumnId, compactLayout, identityAlone, balancedIdentity), collapseClass(header.column.id, primaryColumns, compactLayout)), children: header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: compactLayout, probeRef: layoutProbeRef, children: rows.map(renderRow) })] }));
+            : empty) }));
+    const tableNode = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", "data-slot": "data-table-absence", children: absence }), rows.length === 0 ? null : (_jsx(TableLaidOutCompact, { compact: entities && compactLayout !== undefined && shownLayout === "details", children: _jsxs(Table, { "aria-label": tableLabel, className: "table-fixed text-body-sm", compactDetails: tableLayout, density: entities ? "comfortable" : "default", children: [_jsx(TableColgroup, { children: table.getVisibleLeafColumns().map((column) => {
+                                const size = sizeOf.get(column.id);
+                                return (_jsx(TableCol, { className: cn(collapseTrackClass(column, primaryColumns, compactLayout)), style: size === undefined ? undefined : { width: size } }, column.id));
+                            }) }), _jsx(TableHeader, { className: entities ? "sr-only" : undefined, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { "aria-sort": sortOrder(header.column.getIsSorted()), "data-identity": header.column.id === identityColumnId ? "" : undefined, className: cn(isNumericColumn(header.column) && "text-right tabular-nums", header.column.columnDef.meta?.wraps === true && "last:text-left", header.column.columnDef.meta?.centered === true &&
+                                        "text-center last:text-center", identityWidthClass(header.column, identityColumnId, tableLayout), collapseClass(header.column, primaryColumns, compactLayout)), children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: compactLayout, probeRef: layoutProbeRef, children: sections.map((section) => (_jsxs(React.Fragment, { children: [section.heading === undefined ? null : (_jsx(GroupHeading, { span: table.getVisibleLeafColumns().length, children: section.heading })), section.rows.map(renderRow)] }, section.heading ?? ""))) })] }) }))] }));
     const actions = columnsControl || toolbarActions ? (_jsxs(_Fragment, { children: [columnsControl, toolbarActions] })) : null;
     const toolbarSlots = { actions };
-    if (filterColumn) {
+    if (filterColumn && filterPlaceholder !== undefined && clearSearchLabel !== undefined) {
         toolbarSlots.search = {
-            label: filterPlaceholder ?? "",
-            placeholder: filterPlaceholder ?? "",
+            label: filterPlaceholder,
+            placeholder: filterPlaceholder,
             value: filterValue,
             onChange: (value) => filterColumn.setFilterValue(value),
         };
-        if (clearSearchLabel) {
-            toolbarSlots.clear = {
-                label: clearSearchLabel,
-                onClear: () => filterColumn.setFilterValue(""),
-            };
-        }
+        toolbarSlots.clear = {
+            label: clearSearchLabel,
+            onClear: () => filterColumn.setFilterValue(""),
+        };
     }
     const toolbarRow = renderToolbar(toolbarSlots);
-    const card = (_jsx(TableCard, { surface: embedded ? "plain" : "resting", ...(heading ? { title: heading.title } : {}), ...(heading?.description ? { description: heading.description } : {}), ...(heading && toolbarRow ? { toolbar: toolbarRow } : {}), ...(summary ? { summary } : {}), ...(footer ? { footer } : {}), children: tableNode }));
-    return (_jsxs("div", { className: "min-w-0 w-full text-body-sm", "data-slot": "data-table", children: [heading ? null : toolbarRow, wrapCard ? wrapCard(card) : card, !pageLabels || pagination === false || (!canPreviousPage && !canNextPage) ? null : (_jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [_jsx(Button, { variant: "outline", onClick: goPreviousPage, disabled: !canPreviousPage || (pagination && pagination.isPending), children: pageLabels.previous }), _jsx(Button, { variant: "outline", onClick: goNextPage, disabled: !canNextPage || (pagination && pagination.isPending), children: pageLabels.next })] }))] }));
+    const pager = pageLabels && pagination !== false && (canPreviousPage || canNextPage) ? (_jsxs("div", { "aria-busy": waitingForPage || undefined, className: "flex items-center gap-3", children: [pagination && pagination.status ? (_jsx("span", { className: "tabular-nums", children: pagination.status })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PagerButton, { enabled: canPreviousPage && !waitingForPage, label: pageLabels.previous, link: pagination ? pagination.previousLink : undefined, onClick: goPreviousPage }), _jsx(PagerButton, { enabled: canNextPage && !waitingForPage, label: pageLabels.next, link: pagination ? pagination.nextLink : undefined, onClick: goNextPage })] })] })) : null;
+    const card = (_jsx(TableCard, { surface: embedded ? "plain" : "resting", title: heading?.title, description: heading?.description, toolbar: heading ? toolbarRow : undefined, summary: summary, footerHint: footer, footer: pager, note: footerNote, children: tableNode }));
+    return (_jsxs("div", { className: "min-w-0 w-full text-body-sm", "data-slot": "data-table", children: [heading ? null : toolbarRow, wrapCard ? wrapCard(card) : card] }));
 }

package/dist/components/desktop-shell.d.ts

@@ -12,6 +12,8 @@ type DesktopAppShellProps = Omit<React.ComponentProps<"section">, "title"> & {
     primaryPaneLabel?: string;
     secondaryPaneLabel?: string;
     inspectorRailLabel?: string;
+    secondaryResizeLabel?: string;
+    inspectorResizeLabel?: string;
     primaryPaneSize?: number;
     secondaryPaneSize?: number;
     inspectorPaneSize?: number;
@@ -28,7 +30,7 @@ type DesktopAppShellProps = Omit<React.ComponentProps<"section">, "title"> & {
  * @family Navigation
  * @when A desktop product's whole window: Nadia's left column (the Agents list, then an Agent's
  * sections behind *‹ Agents*), its workspace and its side panes.
- * @instead The Portal's column is `PortalSidebarFrame` inside `DashboardShell`. Both draw their
+ * @instead The Portal's column is `PortalSidebarFrame` inside its `Sidebar`. Both draw their
  * rows with the same `SidebarMenuButton` and end with the same `AccountMenu`.
  * @behaviour One 44 px band shares the window buttons and the window's commands. The workspace
  * splits into resizable panes; the secondary pane and the inspector rail appear only when given.
@@ -37,7 +39,7 @@ type DesktopAppShellProps = Omit<React.ComponentProps<"section">, "title"> & {
  * under six words: *Writes quotes from the price list*.
  * @access Each pane and rail is a labelled region; the orb beside a name is decorative.
  */
-declare function DesktopAppShell({ title, titlebar, titlebarActions, activityRail, inspectorRail, secondaryPane, statusbar, children, activityRailLabel, primaryPaneLabel, secondaryPaneLabel, inspectorRailLabel, primaryPaneSize, secondaryPaneSize, inspectorPaneSize, className, titlebarClassName, bodyClassName, primaryPaneClassName, secondaryPaneClassName, inspectorRailClassName, statusbarClassName, ...props }: DesktopAppShellProps): React.JSX.Element;
+declare function DesktopAppShell({ title, titlebar, titlebarActions, activityRail, inspectorRail, secondaryPane, statusbar, children, activityRailLabel, primaryPaneLabel, secondaryPaneLabel, inspectorRailLabel, secondaryResizeLabel, inspectorResizeLabel, primaryPaneSize, secondaryPaneSize, inspectorPaneSize, className, titlebarClassName, bodyClassName, primaryPaneClassName, secondaryPaneClassName, inspectorRailClassName, statusbarClassName, ...props }: DesktopAppShellProps): React.JSX.Element;
 export { DesktopAppShell };
 export type { DesktopAppShellProps };
 //# sourceMappingURL=desktop-shell.d.ts.map

package/dist/components/desktop-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"desktop-shell.d.ts","sourceRoot":"","sources":["../../src/components/desktop-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,QAAQ,EACR,iBAA8B,EAC9B,gBAAsC,EACtC,kBAA0C,EAC1C,kBAAgC,EAChC,eAA2D,EAC3D,iBAA2C,EAC3C,iBAAsB,EACtB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyGtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"desktop-shell.d.ts","sourceRoot":"","sources":["../../src/components/desktop-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,QAAQ,EACR,iBAA8B,EAC9B,gBAAsC,EACtC,kBAA0C,EAC1C,kBAAgC,EAChC,oBAAuD,EACvD,oBAA6C,EAC7C,eAA2D,EAC3D,iBAA2C,EAC3C,iBAAsB,EACtB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyGtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/desktop-shell.js

@@ -8,7 +8,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizabl
  * @family Navigation
  * @when A desktop product's whole window: Nadia's left column (the Agents list, then an Agent's
  * sections behind *‹ Agents*), its workspace and its side panes.
- * @instead The Portal's column is `PortalSidebarFrame` inside `DashboardShell`. Both draw their
+ * @instead The Portal's column is `PortalSidebarFrame` inside its `Sidebar`. Both draw their
  * rows with the same `SidebarMenuButton` and end with the same `AccountMenu`.
  * @behaviour One 44 px band shares the window buttons and the window's commands. The workspace
  * splits into resizable panes; the secondary pane and the inspector rail appear only when given.
@@ -17,7 +17,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizabl
  * under six words: *Writes quotes from the price list*.
  * @access Each pane and rail is a labelled region; the orb beside a name is decorative.
  */
-function DesktopAppShell({ title, titlebar, titlebarActions, activityRail, inspectorRail, secondaryPane, statusbar, children, activityRailLabel = "Activity", primaryPaneLabel = "Primary workspace", secondaryPaneLabel = "Secondary workspace", inspectorRailLabel = "Inspector", primaryPaneSize = secondaryPane || inspectorRail ? 58 : 100, secondaryPaneSize = inspectorRail ? 24 : 36, inspectorPaneSize = 18, className, titlebarClassName, bodyClassName, primaryPaneClassName, secondaryPaneClassName, inspectorRailClassName, statusbarClassName, ...props }) {
-    return (_jsxs("section", { "data-slot": "desktop-app-shell", className: cn("flex h-svh min-h-0 flex-col overflow-hidden border bg-background text-foreground", className), ...props, children: [_jsxs("header", { "data-slot": "desktop-app-titlebar", className: cn("flex h-11 shrink-0 items-center justify-between gap-3 border-b bg-background px-3", titlebarClassName), children: [titlebar ?? (_jsx("div", { "data-slot": "desktop-app-titlebar-content", className: "flex min-w-0 flex-1 items-center gap-2", children: title && _jsx("p", { className: "m-0 truncate text-sm font-medium", children: title }) })), titlebarActions && (_jsx("div", { "data-slot": "desktop-app-titlebar-actions", className: "flex shrink-0 items-center gap-2", children: titlebarActions }))] }), _jsxs("div", { "data-slot": "desktop-app-body", className: cn("flex min-h-0 flex-1", bodyClassName), children: [activityRail && (_jsx("nav", { "data-slot": "desktop-app-activity-rail", "aria-label": activityRailLabel, className: "flex w-14 shrink-0 flex-col items-center gap-2 border-r bg-sidebar p-2 text-sidebar-foreground", children: activityRail })), _jsx("div", { "data-slot": "desktop-app-panes", className: "min-w-0 flex-1", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "min-w-0 flex-1", children: [_jsx(ResizablePanel, { defaultSize: primaryPaneSize, minSize: 30, children: _jsx("section", { "data-slot": "desktop-app-primary-pane", "aria-label": primaryPaneLabel, className: cn("h-full min-w-0 overflow-auto bg-background", primaryPaneClassName), children: children }) }), secondaryPane && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: secondaryPaneSize, minSize: 18, children: _jsx("section", { "data-slot": "desktop-app-secondary-pane", "aria-label": secondaryPaneLabel, className: cn("h-full min-w-0 overflow-auto bg-background", secondaryPaneClassName), children: secondaryPane }) })] })), inspectorRail && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: inspectorPaneSize, minSize: 16, maxSize: 36, children: _jsx("aside", { "data-slot": "desktop-app-inspector-rail", "aria-label": inspectorRailLabel, className: cn("h-full min-w-0 overflow-auto bg-background", inspectorRailClassName), children: inspectorRail }) })] }))] }) })] }), statusbar && (_jsx("footer", { "data-slot": "desktop-app-statusbar", className: cn("flex min-h-8 shrink-0 items-center justify-between gap-3 border-t bg-background px-3 text-xs text-muted-foreground", statusbarClassName), children: statusbar }))] }));
+function DesktopAppShell({ title, titlebar, titlebarActions, activityRail, inspectorRail, secondaryPane, statusbar, children, activityRailLabel = "Activity", primaryPaneLabel = "Primary workspace", secondaryPaneLabel = "Secondary workspace", inspectorRailLabel = "Inspector", secondaryResizeLabel = "Resize the secondary workspace", inspectorResizeLabel = "Resize the inspector", primaryPaneSize = secondaryPane || inspectorRail ? 58 : 100, secondaryPaneSize = inspectorRail ? 24 : 36, inspectorPaneSize = 18, className, titlebarClassName, bodyClassName, primaryPaneClassName, secondaryPaneClassName, inspectorRailClassName, statusbarClassName, ...props }) {
+    return (_jsxs("section", { "data-slot": "desktop-app-shell", className: cn("flex h-svh min-h-0 flex-col overflow-hidden border bg-background text-foreground", className), ...props, children: [_jsxs("header", { "data-slot": "desktop-app-titlebar", className: cn("flex h-11 shrink-0 items-center justify-between gap-3 border-b bg-background px-3", titlebarClassName), children: [titlebar ?? (_jsx("div", { "data-slot": "desktop-app-titlebar-content", className: "flex min-w-0 flex-1 items-center gap-2", children: title && _jsx("p", { className: "m-0 truncate text-sm font-medium", children: title }) })), titlebarActions && (_jsx("div", { "data-slot": "desktop-app-titlebar-actions", className: "flex shrink-0 items-center gap-2", children: titlebarActions }))] }), _jsxs("div", { "data-slot": "desktop-app-body", className: cn("flex min-h-0 flex-1", bodyClassName), children: [activityRail && (_jsx("nav", { "data-slot": "desktop-app-activity-rail", "aria-label": activityRailLabel, className: "flex w-14 shrink-0 flex-col items-center gap-2 border-r bg-sidebar p-2 text-sidebar-foreground", children: activityRail })), _jsx("div", { "data-slot": "desktop-app-panes", className: "min-w-0 flex-1", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "min-w-0 flex-1", children: [_jsx(ResizablePanel, { defaultSize: `${primaryPaneSize}%`, minSize: "30%", children: _jsx("section", { "data-slot": "desktop-app-primary-pane", "aria-label": primaryPaneLabel, className: cn("h-full min-w-0 overflow-auto bg-background", primaryPaneClassName), children: children }) }), secondaryPane && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { "aria-label": secondaryResizeLabel, withHandle: true }), _jsx(ResizablePanel, { defaultSize: `${secondaryPaneSize}%`, minSize: "18%", children: _jsx("section", { "data-slot": "desktop-app-secondary-pane", "aria-label": secondaryPaneLabel, className: cn("h-full min-w-0 overflow-auto bg-background", secondaryPaneClassName), children: secondaryPane }) })] })), inspectorRail && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { "aria-label": inspectorResizeLabel, withHandle: true }), _jsx(ResizablePanel, { defaultSize: `${inspectorPaneSize}%`, minSize: "16%", maxSize: "36%", children: _jsx("aside", { "data-slot": "desktop-app-inspector-rail", "aria-label": inspectorRailLabel, className: cn("h-full min-w-0 overflow-auto bg-background", inspectorRailClassName), children: inspectorRail }) })] }))] }) })] }), statusbar && (_jsx("footer", { "data-slot": "desktop-app-statusbar", className: cn("flex min-h-8 shrink-0 items-center justify-between gap-3 border-t bg-background px-3 text-xs text-muted-foreground", statusbarClassName), children: statusbar }))] }));
 }
 export { DesktopAppShell };

package/dist/components/dialog.d.ts

@@ -1,20 +1,41 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { type PhoneLayout } from "../internal/phone-sheet.js";
 /**
- * A centred modal for a bounded job the person finishes or cancels.
+ * A modal for a bounded job the person finishes or cancels.
  *
  * @family Menus
- * @when A new record through a few fields, or one or two values changed from a command: a bounded
- * job the person finishes or cancels. Usually reached through `FormDialog`.
- * @instead A record already in a list edits inside its row. A catalogue or a setup in steps is
- * `FormDrawer`. A consequence is `ConfirmDialog`. A linkable workflow is its own page.
- * @behaviour Centred, 384 px, 24 px padding, 16 px gaps, 12 px corners, modal height over the 50%
- * scrim. `DialogBody` scrolls between a header and footer that stay. Footer recessed behind a
- * hairline, Cancel then the primary at the trailing edge.
- * @words Title is verb and noun (*Add MCP server*); the primary repeats it (*Add server*); the
- * pending word is its -ing form. The failure comes from the catalogue, above the footer.
- * @access `role="dialog"` named by its title. Focus starts on the first field, is held inside,
- * returns to the opener. Escape and the named close button dismiss when nothing is running.
+ * @when "Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal)
+ * "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal)
+ * Ours: `Dialog` is Geist's Modal, usually reached through `FormDialog`: a new record through a few
+ * fields, or one or two values changed from a command.
+ * @instead "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal)
+ * Ours: a consequence is `ConfirmDialog`. A catalogue or a setup in steps is `FormDrawer`. A record
+ * that already has a page, or a linkable workflow, is that page.
+ * @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal)
+ * Ours: centred over a scrim, 540 px wide with 20 px of padding; on a phone it is a bottom sheet
+ * (`phoneLayout="centred"` keeps it centred). The title, its optional description and the fields
+ * scroll and the footer stays at the bottom; with `sticky` the header stays too, as a recessed bar.
+ * The footer is recessed and holds 32 px buttons in one row, also on a phone: Cancel at the leading
+ * edge, the primary at the trailing edge, a lone button across the full width. A step back
+ * (*Previous*) is wrapped with Cancel in one group at the leading edge, so the footer keeps two
+ * ends. A footer always holds an action: `children`, or `showCloseButton` with its `closeLabel`.
+ * All neutral: the footer and a `sticky` header are recessed behind a hairline, and no hue appears
+ * but the focus ring.
+ * @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal)
+ * "`Modal.P` body is sentence case, 1–3 sentences. State the consequence first, then any cascade." (https://vercel.com/geist/modal)
+ * "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal)
+ * "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal)
+ * "Pair the success toast verb 1:1 with the primary button: `Delete Project` button, `Project deleted` toast." (https://vercel.com/geist/modal)
+ * Ours: titles and buttons are sentence case where Geist writes Title Case: the title *Add MCP
+ * server*, the primary *Add server*, and its pending word is its -ing form. The failure comes from
+ * the catalogue, above the footer. The description is optional and runs to two lines.
+ * @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal)
+ * "Keep the Cancel button literally `Cancel` so screen-reader users hear a stable dismissal label across destructive flows." (https://vercel.com/geist/modal)
+ * "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal)
+ * "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal)
+ * Ours: `role="dialog"` named by its title. The corner Close is named by `closeLabel`. Focus starts
+ * on the first field or `initialFocus`.
  */
 declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
 declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
@@ -26,23 +47,41 @@ type DialogOverlayProps = DialogPrimitive.Backdrop.Props & {
 };
 declare function DialogOverlay({ className, motion, ...props }: DialogOverlayProps): React.JSX.Element;
 type DialogContentProps = DialogPrimitive.Popup.Props & {
-    showCloseButton?: boolean;
-    closeLabel?: React.ReactNode;
     motion?: DialogMotion;
-};
-declare function DialogContent({ className, children, showCloseButton, closeLabel, motion, ...props }: DialogContentProps): React.JSX.Element;
+    phoneLayout?: PhoneLayout;
+    /**
+     * The header stays in place as a recessed bar while the body scrolls under it. Without it the
+     * header scrolls away with the content; the footer stays either way.
+     */
+    sticky?: boolean;
+} & ({
+    showCloseButton?: true;
+    closeLabel: string;
+} | {
+    showCloseButton: false;
+    closeLabel?: undefined;
+});
+declare function DialogContent({ className, children, showCloseButton, closeLabel, motion, phoneLayout, sticky, finalFocus, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**
- * The part of a dialog that scrolls, between a header and a footer that stay
- * in place, so the actions remain reachable on a short viewport. The inline
- * padding is cancelled by the negative margin so a field's focus outline at the
- * edge is not clipped by the scroll container.
+ * The part of a `sticky` dialog that scrolls between its header and its footer, so the actions
+ * remain reachable on a short viewport; content runs right up to the header bar and down to the
+ * footer. Without `sticky` it is the plain column of content, 12 px between fields. It reaches the
+ * dialog's edges and pads its own content, so a field's focus outline at the edge is not clipped by
+ * the scroll container.
  */
 declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-type DialogFooterProps = React.ComponentProps<"div"> & {
-    showCloseButton?: boolean;
-    closeLabel?: React.ReactNode;
-};
+type DialogFooterProps = Omit<React.ComponentProps<"div">, "children"> & ({
+    showCloseButton?: false;
+    closeLabel?: undefined;
+    children: React.ReactNode;
+}
+/** The footer's own leading button, worded from the product's catalogue. */
+ | {
+    showCloseButton: true;
+    closeLabel: string;
+    children?: React.ReactNode;
+});
 declare function DialogFooter({ className, showCloseButton, closeLabel, children, ...props }: DialogFooterProps): React.JSX.Element;
 declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
 declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;