@tristan2828/ui-foundation 4.45.0 → 4.47.0

package/dist/components/app/data-table.js

@@ -14,16 +14,18 @@ import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } fr
 import { flexRender } from '@tanstack/react-table';
 import { cn } from 'cn';
 import { getCoreRowModel, useLegacyTable } from '@tanstack/react-table/legacy';
-import { ArrowDownIcon, ArrowUpIcon, ArrowUpDownIcon, ChevronLeftIcon, ChevronRightIcon, TableIcon } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, ArrowUpDownIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ListTreeIcon, TableIcon, XIcon, } from 'lucide-react';
 import { ErrorState } from './error-state.js';
 import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '../ui/empty.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
 import { EditInPlaceContext } from './edit-in-place.js';
 import { EditInPlaceStore } from './edit-in-place-store.js';
 import { LeaveGuard } from './editable-value.js';
-import { groupRuns } from './table-groups.js';
+import { groupByValues, groupRuns } from './table-groups.js';
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '../ui/table.js';
 // A column def's id as TanStack resolves it (constructColumn): `id`, then
 // `accessorKey` with dots as underscores, then a string header. Group
@@ -74,6 +76,35 @@ function LayoutSwitch({ options, value, onValueChange, }) {
                 onValueChange(chosen);
         }, children: options.map(({ id, label, icon: Icon }) => (_jsxs(ToggleGroupItem, { value: id, className: LAYOUT_ITEM_CLASS, title: label, children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4" }), _jsx("span", { className: "max-sm:sr-only", children: label })] }, id))) }));
 }
+// The Group menu (`groupings`): a radio list, None first, that closes on
+// a pick. Base UI's radio group needs a value for None, so it's this
+// stand-in, never '' (the grouping's own word for None).
+const NO_GROUPING = '__none__';
+function GroupMenu({ groupings, value, onValueChange, }) {
+    const current = groupings.find((grouping) => grouping.id === value);
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", "data-slot": "data-table-group-menu" }), children: [_jsx(ListTreeIcon, { "aria-hidden": "true" }), current ? `Group: ${current.label}` : 'Group'] }), _jsx(DropdownMenuContent, { align: "end", className: "w-48", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Group by" }), _jsxs(DropdownMenuRadioGroup, { value: current?.id ?? NO_GROUPING, onValueChange: (next) => onValueChange(next === NO_GROUPING ? '' : String(next)), children: [_jsx(DropdownMenuRadioItem, { value: NO_GROUPING, closeOnClick: true, children: "None" }), groupings.map((grouping) => (_jsx(DropdownMenuRadioItem, { value: grouping.id, closeOnClick: true, children: grouping.label }, grouping.id)))] })] }) })] }));
+}
+// Whether the detail panel (`detailPanel`) fits beside the table, or opens
+// as a bottom sheet. Wide on the server and wherever matchMedia is missing
+// (a test's DOM), so markup never depends on it.
+const WIDE_QUERY = '(min-width: 64rem)';
+const canMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+function subscribeWide(listener) {
+    if (!canMatchMedia())
+        return () => { };
+    const query = window.matchMedia(WIDE_QUERY);
+    query.addEventListener('change', listener);
+    return () => query.removeEventListener('change', listener);
+}
+const useIsWide = () => useSyncExternalStore(subscribeWide, () => !canMatchMedia() || window.matchMedia(WIDE_QUERY).matches, () => true);
+// A click on one of these inside a row is the control's own, not a pick of
+// the row. A link is the exception: a plain click picks the row instead of
+// following it (a modified one still opens it, in a new tab).
+const ROW_CONTROL_SELECTOR = 'a[href],button,input,select,textarea,label,summary,[contenteditable="true"],' +
+    '[role="button"],[role="checkbox"],[role="switch"],[role="combobox"],[role="link"],[role="slider"]';
+// Keys typed into one of these are its own: ↑/↓ and Escape stay with it.
+const TYPING_SELECTOR = 'input,select,textarea,[contenteditable="true"],[role="combobox"],[role="listbox"],[role="menu"],' +
+    '[role="slider"],[role="spinbutton"]';
 function TableSkeleton({ columnCount }) {
     return (_jsx("div", { className: "flex flex-col gap-2 p-2", "data-state": "loading", children: Array.from({ length: 5 }, (_, row) => (_jsx("div", { className: "flex gap-4", children: Array.from({ length: columnCount }, (_, col) => (_jsx(Skeleton, { className: "h-8 flex-1" }, col))) }, row))) }));
 }
@@ -140,6 +171,25 @@ const HIDDEN_HEAD_CLASS = 'h-0 p-0';
 const ALIGN_CLASS = { center: 'text-center', right: 'text-right' };
 const alignClass = (align) => align && ALIGN_CLASS[align];
 const GROUP_HEADING_CLASS = 'h-auto bg-background pt-4 pb-1.5 align-bottom';
+// A grouping's heading (`groupings`) is a button that folds its rows: the
+// label, then the count, a chevron that turns when folded.
+const GROUP_TOGGLE_CLASS = '-mx-1 inline-flex items-baseline gap-2 rounded-sm px-1 outline-none hover:underline ' +
+    'focus-visible:ring-3 focus-visible:ring-ring/50';
+// `detailPanel`: a row that can be picked shows a pointer and its focus
+// ring inside it (a row has no outline of its own room); the picked one
+// takes the muted fill on every cell, over the zebra stripe and the pinned
+// cells' opaque backgrounds as highlightRow's wash does, with a bar in
+// --primary at its start, so it reads without colour too.
+const SELECTABLE_ROW_CLASS = 'cursor-pointer outline-none focus-visible:[&>td]:shadow-[inset_0_2px_0_0_var(--ring),inset_0_-2px_0_0_var(--ring)]';
+const SELECTED_ROW_CLASS = '[&>td]:bg-muted [&>td:first-child]:shadow-[inset_3px_0_0_0_var(--primary)] ' +
+    'focus-visible:[&>td:first-child]:shadow-[inset_3px_0_0_0_var(--primary),inset_0_2px_0_0_var(--ring),inset_0_-2px_0_0_var(--ring)]';
+// The table and the panel side by side once one is picked on a wide
+// screen. The grid is there from the start, so opening the panel never
+// remounts the table (and the focused row with it).
+const WITH_DETAIL_OPEN_CLASS = 'grid-cols-[minmax(0,1fr)_minmax(18rem,26rem)]';
+const DETAIL_ASIDE_CLASS = 'sticky top-4 flex max-h-[calc(100dvh-2rem)] min-w-0 flex-col gap-3 overflow-y-auto rounded-lg border ' +
+    'border-border bg-card p-4 text-card-foreground';
+const EMPTY_KEYS = new Set();
 // `width="content"`: from a table area 80rem wide, as wide as the columns
 // need (`w-fit` over the table's own `w-full`), at least 36rem, or the
 // width it last had loaded while it shows another state
@@ -208,7 +258,7 @@ function useBottomScrollbar(containerRef, isSuccessView) {
     }, [containerRef, isSuccessView, isOverflowing]);
     return { barRef, isOverflowing, scrollWidth };
 }
-export function DataTable({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width = 'full', groupBy, groupSummary, header: showHeader = true, highlightRow, totals, layouts, layout: layoutProp, onLayoutChange, tableLayout, }) {
+export function DataTable({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width = 'full', groupBy, groupSummary, header: showHeader = true, highlightRow, totals, layouts, layout: layoutProp, onLayoutChange, tableLayout, groupings, grouping: groupingProp, onGroupingChange, detailPanel, detailLabel = 'Details', }) {
     // The switch's own state, for a table that doesn't pass `layout`.
     const [ownLayout, setOwnLayout] = useState('table');
     const requestedLayout = layoutProp ?? ownLayout;
@@ -219,6 +269,22 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
             setOwnLayout(next);
         onLayoutChange?.(next);
     };
+    // The grouping on (`groupings`), the menu's own state for a table that
+    // doesn't pass `grouping`.
+    const [ownGrouping, setOwnGrouping] = useState('');
+    const activeGrouping = groupings?.find((candidate) => candidate.id === (groupingProp ?? ownGrouping));
+    const setGrouping = (next) => {
+        if (groupingProp === undefined)
+            setOwnGrouping(next);
+        onGroupingChange?.(next);
+    };
+    // The folded headings, for the grouping they were folded in: picking
+    // another starts with every group open.
+    const [folds, setFolds] = useState({ grouping: '', keys: EMPTY_KEYS });
+    const folded = activeGrouping && folds.grouping === activeGrouping.id ? folds.keys : EMPTY_KEYS;
+    // The picked row (`detailPanel`) and the place it was picked in.
+    const [selection, setSelection] = useState(null);
+    const isWide = useIsWide();
     // Editing in place in the rows (cell pattern 18, "In a table's rows"):
     // a cell that renders an <EditableValue> edits where it's shown, one at
     // a time, with the leave-page prompt while one is open, the same rules
@@ -228,9 +294,13 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
     const pageCount = Math.max(1, Math.ceil(total / pageSize));
     // TanStack treats a column missing from this map as visible, so every
     // column gets an entry once a list is given.
-    const columnVisibility = visibleColumns
-        ? Object.fromEntries(leafColumnIds(columns).map((id) => [id, visibleColumns.includes(id)]))
-        : {};
+    // While grouped, the grouped column is hidden: its value is the heading.
+    const columnVisibility = {
+        ...(visibleColumns
+            ? Object.fromEntries(leafColumnIds(columns).map((id) => [id, visibleColumns.includes(id)]))
+            : {}),
+        ...(activeGrouping ? { [activeGrouping.id]: false } : {}),
+    };
     const table = useLegacyTable({
         data,
         columns,
@@ -279,14 +349,124 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
     const rows = table.getRowModel().rows;
     const visibleLeafColumns = table.getVisibleLeafColumns();
     const visibleColumnCount = visibleLeafColumns.length;
+    // The groups, if any: a grouping's (folding, with counts), else groupBy's.
+    const runs = activeGrouping
+        ? groupByValues(rows, (row) => activeGrouping.value(row.original), activeGrouping.options, activeGrouping.emptyLabel ?? 'Not set').map((run) => ({ ...run, foldable: true }))
+        : groupBy
+            ? groupRuns(rows, (row) => groupBy(row.original)).map((run) => ({ ...run, foldable: false }))
+            : null;
+    const allFolded = runs !== null && runs.length > 0 && runs.every((run) => folded.has(run.key));
+    const toggleFold = (key) => {
+        if (!activeGrouping)
+            return;
+        const keys = new Set(folded);
+        if (!keys.delete(key))
+            keys.add(key);
+        setFolds({ grouping: activeGrouping.id, keys });
+    };
+    const foldAll = () => {
+        if (!activeGrouping || !runs)
+            return;
+        setFolds({ grouping: activeGrouping.id, keys: allFolded ? EMPTY_KEYS : new Set(runs.map((run) => run.key)) });
+    };
+    // Every row's place in the list as shown (folded groups left out), in
+    // order, for ↑/↓. Under a grouping a place is the group and the row,
+    // since a multi-value field shows a row in more than one.
+    const placeKey = (runKey, rowId) => activeGrouping ? `${encodeURIComponent(runKey)}:${rowId}` : rowId;
+    const places = runs
+        ? runs.flatMap((run) => folded.has(run.key) ? [] : run.rows.map((row) => ({ key: placeKey(run.key, row.id), rowId: row.id })))
+        : rows.map((row) => ({ key: row.id, rowId: row.id }));
+    const selectedRow = detailPanel && selection ? rows.find((row) => row.id === selection.rowId) : undefined;
+    // The place marked picked: where it was picked, or (regrouped since) the
+    // row's first place. None while its group is folded.
+    const selectedKey = selectedRow
+        ? places.some((place) => place.key === selection?.key)
+            ? selection?.key
+            : places.find((place) => place.rowId === selectedRow.id)?.key
+        : undefined;
+    // The list's one tab stop: the picked row, else the first.
+    const tabStopKey = selectedKey ?? places[0]?.key;
+    const focusRow = (key) => {
+        if (key === undefined)
+            return;
+        containerRef.current?.querySelector(`tr[data-row-key="${CSS.escape(key)}"]`)?.focus();
+    };
+    const closeDetail = () => {
+        setSelection(null);
+        focusRow(selectedKey);
+    };
+    const onRowClick = (event, place) => {
+        const target = event.target;
+        // A click from a portal (a picker's popup opened from a cell) reaches
+        // the row through React, not the DOM: it's that control's.
+        if (!event.currentTarget.contains(target))
+            return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const control = target.closest(ROW_CONTROL_SELECTOR);
+        if (control && event.currentTarget.contains(control)) {
+            if (!control.matches('a[href]'))
+                return;
+            // In the capture phase, so react-router's Link sees it prevented and
+            // doesn't navigate.
+            event.preventDefault();
+        }
+        setSelection(place);
+    };
+    const onListKeyDown = (event) => {
+        const target = event.target;
+        if (event.defaultPrevented || !event.currentTarget.contains(target) || target.closest(TYPING_SELECTOR))
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (places.length === 0)
+                return;
+            event.preventDefault();
+            const down = event.key === 'ArrowDown';
+            const index = places.findIndex((place) => place.key === selectedKey);
+            const nextIndex = index === -1 ? (down ? 0 : places.length - 1) : Math.min(places.length - 1, Math.max(0, index + (down ? 1 : -1)));
+            const next = places[nextIndex];
+            if (!next)
+                return;
+            setSelection(next);
+            focusRow(next.key);
+        }
+        else if (event.key === 'Enter' && target.dataset.rowKey !== undefined) {
+            const place = places.find((candidate) => candidate.key === target.dataset.rowKey);
+            if (!place)
+                return;
+            event.preventDefault();
+            setSelection(place);
+        }
+        else if (event.key === 'Escape' && selectedRow) {
+            event.preventDefault();
+            closeDetail();
+        }
+    };
     // One body row, the same in a plain table and a grouped one.
-    const renderRow = (row) => (_jsx(TableRow, { "data-highlighted": highlightRow?.(row.original) || undefined, className: cn(pinFirstColumn && ROW_GROUP_CLASS, highlightRow?.(row.original) && HIGHLIGHTED_ROW_CLASS), children: row.getVisibleCells().map((cell, index) => (_jsx(TableCell, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn && index === row.getVisibleCells().length - 1 && PINNED_LAST_COLUMN_CLASS, alignClass(cell.column.columnDef.meta?.align)), children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, row.id));
+    const renderRow = (row, key = row.id) => {
+        const isSelected = key === selectedKey;
+        return (_jsx(TableRow, { "data-highlighted": highlightRow?.(row.original) || undefined, ...(detailPanel
+                ? {
+                    'data-row-key': key,
+                    'data-selected': isSelected || undefined,
+                    'aria-selected': isSelected,
+                    tabIndex: key === tabStopKey ? 0 : -1,
+                    onClickCapture: (event) => onRowClick(event, { key, rowId: row.id }),
+                }
+                : {}), className: cn(pinFirstColumn && ROW_GROUP_CLASS, highlightRow?.(row.original) && HIGHLIGHTED_ROW_CLASS, detailPanel && SELECTABLE_ROW_CLASS, isSelected && SELECTED_ROW_CLASS), children: row.getVisibleCells().map((cell, index) => (_jsx(TableCell, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn && index === row.getVisibleCells().length - 1 && PINNED_LAST_COLUMN_CLASS, alignClass(cell.column.columnDef.meta?.align)), children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, key));
+    };
     const content = (_jsxs("div", { ref: root, className: cn('flex flex-col gap-4', width === 'content' && CONTENT_WIDTH_CLASS), "data-width": width, "data-layout": layouts?.length ? currentLayout : undefined, style: width === 'content' && !isSuccessView && lastWidth !== null
             ? { '--data-table-last-width': `${lastWidth}px` }
-            : undefined, children: [layouts?.length ? (_jsxs("div", { className: "flex flex-wrap items-end gap-x-4 gap-y-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: toolbar }), _jsx(LayoutSwitch, { options: [
+            : undefined, children: [layouts?.length || groupings?.length ? (_jsxs("div", { className: "flex flex-wrap items-end gap-x-4 gap-y-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: toolbar }), groupings?.length ? (_jsxs("div", { className: "flex items-center gap-2", children: [activeGrouping && (_jsx(Button, { variant: "ghost", size: "sm", "data-slot": "data-table-fold-all", disabled: !runs?.length, onClick: foldAll, children: allFolded ? 'Unfold all' : 'Fold all' })), _jsx(GroupMenu, { groupings: groupings, value: activeGrouping?.id ?? '', onValueChange: setGrouping })] })) : null, layouts?.length ? (_jsx(LayoutSwitch, { options: [
                             { id: 'table', label: tableLayout?.label ?? 'Table', icon: tableLayout?.icon ?? TableIcon },
                             ...layouts,
-                        ], value: currentLayout, onValueChange: setLayout })] })) : (toolbar), error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (cardLayout ? (_jsx(CardsSkeleton, { layout: cardLayout })) : (_jsx(TableSkeleton, { columnCount: table.getVisibleLeafColumns().length }))) : isEmpty ? (_jsxs(Empty, { "data-state": "empty", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: emptyTitle }), emptyDescription && _jsx(EmptyDescription, { children: emptyDescription })] }), emptyAction] })) : (_jsxs(_Fragment, { children: [cardLayout ? (_jsx(Cards, { layout: cardLayout, rows: rows, groupBy: groupBy, groupSummary: groupSummary })) : (_jsxs(Table, { "data-state": "success", containerRef: containerRef, 
+                        ], value: currentLayout, onValueChange: setLayout })) : null] })) : (toolbar), error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (cardLayout ? (_jsx(CardsSkeleton, { layout: cardLayout })) : (_jsx(TableSkeleton, { columnCount: table.getVisibleLeafColumns().length }))) : isEmpty ? (_jsxs(Empty, { "data-state": "empty", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: emptyTitle }), emptyDescription && _jsx(EmptyDescription, { children: emptyDescription })] }), emptyAction] })) : (_jsxs(DetailFrame, { enabled: Boolean(detailPanel) && !cardLayout, aside: selectedRow && detailPanel && isWide ? (_jsxs("aside", { "aria-label": detailLabel, "data-slot": "data-table-detail", className: DETAIL_ASIDE_CLASS, onKeyDown: (event) => {
+                        const target = event.target;
+                        if (event.key !== 'Escape' || event.defaultPrevented || target.closest(TYPING_SELECTOR))
+                            return;
+                        event.preventDefault();
+                        closeDetail();
+                    }, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h2", { className: "type-label text-muted-foreground", children: detailLabel }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: closeDetail, children: _jsx(XIcon, { "aria-hidden": "true" }) })] }), detailPanel(selectedRow.original)] })) : null, children: [cardLayout ? (_jsx(Cards, { layout: cardLayout, runs: runs, rows: rows, folded: folded, onToggleFold: toggleFold, groupSummary: groupSummary })) : (_jsxs(Table, { "data-state": "success", containerRef: containerRef, onKeyDown: detailPanel ? onListKeyDown : undefined, 
                         // With the sticky bar below as the visible scrollbar, hide the
                         // container's own. It stays overflow-x-auto and fully
                         // scrollable (wheel, trackpad, drag, and the sync effect); it
@@ -315,18 +495,38 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                                     : sortDirection === 'desc'
                                                         ? 'descending'
                                                         : 'none', children: !showHeader ? (_jsx("span", { className: "sr-only", children: content })) : pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: content })) : (content) }, header.id));
-                                    }) }, headerGroup.id))) }), groupBy ? (groupRuns(rows, (row) => groupBy(row.original)).map((run, runIndex) => (_jsxs(TableBody, { "data-slot": "table-group", children: [_jsx(TableRow, { "data-slot": "table-group-heading", className: "hover:bg-transparent", children: _jsx(TableHead, { scope: "rowgroup", colSpan: visibleColumnCount, className: GROUP_HEADING_CLASS, children: _jsxs("span", { className: "sticky left-(--table-cell-px) inline-flex items-baseline gap-2", children: [_jsx("span", { className: "type-label text-foreground", children: run.label }), groupSummary && (_jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: groupSummary(run.rows.map((row) => row.original)) }))] }) }) }), _jsx("tr", { hidden: true, "aria-hidden": "true", "data-slot": "table-group-stripe-offset" }), run.rows.map(renderRow)] }, `${runIndex}:${run.key}`)))) : (_jsx(TableBody, { children: rows.map(renderRow) })), totals && (_jsx(TableFooter, { className: TOTALS_FOOTER_CLASS, children: _jsx(TableRow, { "data-slot": "table-totals", className: "hover:bg-transparent", children: visibleLeafColumns.map((column, index) => {
+                                    }) }, headerGroup.id))) }), runs ? (runs.map((run, runIndex) => {
+                                const isFolded = folded.has(run.key);
+                                return (_jsxs(TableBody, { "data-slot": "table-group", "data-folded": isFolded || undefined, children: [_jsx(TableRow, { "data-slot": "table-group-heading", className: "hover:bg-transparent has-aria-expanded:bg-transparent", children: _jsx(TableHead, { scope: "rowgroup", colSpan: visibleColumnCount, className: GROUP_HEADING_CLASS, children: _jsxs("span", { className: "sticky left-(--table-cell-px) inline-flex items-baseline gap-2", children: [_jsx(GroupLabel, { run: run, isFolded: isFolded, onToggle: () => toggleFold(run.key) }), groupSummary && (_jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: groupSummary(run.rows.map((row) => row.original), { key: run.key, label: run.label }) }))] }) }) }), _jsx("tr", { hidden: true, "aria-hidden": "true", "data-slot": "table-group-stripe-offset" }), !isFolded && run.rows.map((row) => renderRow(row, placeKey(run.key, row.id)))] }, `${runIndex}:${run.key}`));
+                            })) : (_jsx(TableBody, { children: rows.map((row) => renderRow(row)) })), totals && (_jsx(TableFooter, { className: TOTALS_FOOTER_CLASS, children: _jsx(TableRow, { "data-slot": "table-totals", className: "hover:bg-transparent", children: visibleLeafColumns.map((column, index) => {
                                         const className = cn(pinFirstColumn && index === 0 && PINNED_TOTALS_LABEL_CLASS, pinLastColumn && index === visibleColumnCount - 1 && PINNED_LAST_COLUMN_CLASS, alignClass(column.columnDef.meta?.align));
                                         return index === 0 ? (_jsx(TableHead, { scope: "row", className: cn(TOTALS_LABEL_CLASS, className), children: pinFirstColumn ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: totals.label })) : (totals.label) }, column.id)) : (_jsx(TableCell, { className: className, children: totals.cells?.[column.id] }, column.id));
                                     }) }) }))] })), pinFirstColumn && isOverflowing && !cardLayout && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
-    return (_jsxs(EditInPlaceContext.Provider, { value: store, children: [editing && _jsx(LeaveGuard, { store: store }), width === 'content' ? _jsx("div", { className: "@container/data-table", children: content }) : content] }));
+    return (_jsxs(EditInPlaceContext.Provider, { value: store, children: [editing && _jsx(LeaveGuard, { store: store }), width === 'content' ? _jsx("div", { className: "@container/data-table", children: content }) : content, detailPanel && (_jsx(Sheet, { open: Boolean(selectedRow) && !isWide && isSuccessView && !cardLayout, onOpenChange: (open) => {
+                    if (!open)
+                        setSelection(null);
+                }, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85dvh] overflow-y-auto", "data-slot": "data-table-detail-sheet", children: [_jsx(SheetHeader, { className: "pb-0", children: _jsx(SheetTitle, { children: detailLabel }) }), _jsx("div", { className: "px-4 pb-4", children: selectedRow && detailPanel(selectedRow.original) })] }) }))] }));
+}
+// The list and, once a row is picked on a wide screen, the detail panel
+// beside it (`detailPanel`). Without a panel it adds nothing.
+function DetailFrame({ enabled, aside, children }) {
+    if (!enabled)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { "data-slot": "data-table-with-detail", className: cn('grid items-start gap-4', aside && WITH_DETAIL_OPEN_CLASS), children: [_jsx("div", { className: "flex min-w-0 flex-col gap-4", children: children }), aside] }));
+}
+// A group's heading text: under a grouping, a button that folds the group,
+// with its row count; under `groupBy`, the label alone.
+function GroupLabel({ run, isFolded, onToggle, }) {
+    if (!run.foldable)
+        return _jsx("span", { className: "type-label text-foreground", children: run.label });
+    return (_jsxs("button", { type: "button", "aria-expanded": !isFolded, onClick: onToggle, className: GROUP_TOGGLE_CLASS, children: [_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('size-4 self-center text-muted-foreground transition-transform', isFolded && '-rotate-90') }), _jsx("span", { className: "type-label text-foreground", children: run.label }), _jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: run.rows.length })] }));
 }
-// A card layout's success view: the rows as cards in a grid or a list,
-// each run of one group (`groupBy`) under its own heading, as the table's
-// heading rows are, with the same label and summary.
-function Cards({ layout, rows, groupBy, groupSummary, }) {
+function Cards({ layout, runs, rows, folded, onToggleFold, groupSummary, }) {
     const list = (items) => (_jsx("ul", { role: "list", className: cn(layout.arrange === 'list' ? CARD_LIST_CLASS : ['grid', CARD_GRID_CLASS[layout.size ?? 'md'], CARD_GRID_GAP_CLASS]), children: items.map((row) => (_jsx("li", { "data-slot": "data-table-card", className: "min-w-0", children: layout.renderCard(row.original) }, row.id))) }));
-    return (_jsx("div", { className: "@container/data-table-cards flex flex-col gap-6", "data-state": "success", "data-slot": "data-table-cards", children: groupBy
-            ? groupRuns(rows, (row) => groupBy(row.original)).map((run, runIndex) => (_jsxs("section", { "data-slot": "table-group", className: "flex flex-col gap-3", children: [_jsxs("h2", { "data-slot": "table-group-heading", className: "flex items-baseline gap-2 border-b border-border pb-1.5", children: [_jsx("span", { className: "type-label text-foreground", children: run.label }), groupSummary && (_jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: groupSummary(run.rows.map((row) => row.original)) }))] }), list(run.rows)] }, `${runIndex}:${run.key}`)))
+    return (_jsx("div", { className: "@container/data-table-cards flex flex-col gap-6", "data-state": "success", "data-slot": "data-table-cards", children: runs
+            ? runs.map((run, runIndex) => {
+                const isFolded = folded.has(run.key);
+                return (_jsxs("section", { "data-slot": "table-group", "data-folded": isFolded || undefined, className: "flex flex-col gap-3", children: [_jsxs("h2", { "data-slot": "table-group-heading", className: "flex items-baseline gap-2 border-b border-border pb-1.5", children: [_jsx(GroupLabel, { run: run, isFolded: isFolded, onToggle: () => onToggleFold(run.key) }), groupSummary && (_jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: groupSummary(run.rows.map((row) => row.original), { key: run.key, label: run.label }) }))] }), !isFolded && list(run.rows)] }, `${runIndex}:${run.key}`));
+            })
             : list(rows) }));
 }

package/dist/components/app/entity-view.d.ts

@@ -52,6 +52,11 @@ export type EntityViewPlacement = 'main' | 'rail';
  * column on the right (one column on a narrow screen, rail first).
  */
 export type EntityViewLayout = 'column' | 'rail';
+/**
+ * Which column comes first where the rail layout is one column (a phone,
+ * or a narrow content area): `rail-first` (the default) or `main-first`.
+ */
+export type EntityViewMobileOrder = 'rail-first' | 'main-first';
 export type EntityViewProps = {
     /** The record's name or title, the page's <h1>, and the browser tab's once it loads (`documentTitle`). */
     title?: string;
@@ -66,6 +71,12 @@ export type EntityViewProps = {
     titleEdit?: EditInPlace & {
         label: string;
     };
+    /**
+     * A line under the title, in muted body type: what the record is for (a
+     * goal, a one-line summary). Any markup, an `<EditableValue>` included,
+     * so it can be edited in place where it's shown.
+     */
+    subtitle?: ReactNode;
     /**
      * A few status-like values beside the title, as `<Badge>`s, or as the
      * control that changes one when the plan makes it a quick action (a
@@ -80,6 +91,13 @@ export type EntityViewProps = {
      * every width. Announced when it appears or changes after the page loads.
      */
     notice?: ReactNode;
+    /**
+     * A row of the record's key numbers (`<KeyStats>`) under the header and
+     * its notice, across the page at every width: in the rail layout above
+     * both columns, so on a phone it comes before the rail and the main
+     * column.
+     */
+    strip?: ReactNode;
     sections: EntityViewSection[];
     /**
      * Below every section (both columns in the rail layout), in small muted
@@ -89,6 +107,14 @@ export type EntityViewProps = {
     footer?: ReactNode;
     /** `rail` puts the sections placed `rail` in a column on the right. Defaults to `column`. */
     layout?: EntityViewLayout;
+    /**
+     * In the `rail` layout, where its columns stack (a phone): the rail
+     * before the main column (`rail-first`, the default), or the main column
+     * straight after the header and its `strip` (`main-first`). Two columns
+     * wide, the rail stays on the right either way. The `column` layout
+     * ignores it.
+     */
+    mobileOrder?: EntityViewMobileOrder;
     /** The rail's landmark name (its `<aside>`). Defaults to the title + " details". */
     railLabel?: string;
     isLoading: boolean;
@@ -101,4 +127,4 @@ export type EntityViewProps = {
         label: string;
     };
 };
-export declare function EntityView({ title, documentTitle, titleEdit, badges, actions, notice, sections, footer, layout, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;
+export declare function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout, mobileOrder, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;

package/dist/components/app/entity-view.js

@@ -29,8 +29,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // autosave as it's typed (`autosave`), and be the editor itself, with no
 // click to open (`alwaysEditable`).
 //
+// In the header, `subtitle` under the title (a goal, a one-line summary).
 // Around the sections: `notice` (a <Notice>) under the header, across the
-// page, for a state that decides what you do with the record; `footer`
+// page, for a state that decides what you do with the record; `strip` (a
+// <KeyStats>) under that, the record's key numbers; `footer`
 // (a <SourceCredit>) after them all, for crediting the data's source.
 //
 // Two layouts. `column` (the default): every section in one column capped
@@ -38,8 +40,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // content area's whole width, sections placed `rail` go in a narrow column
 // on the right that stays in view while the main column scrolls (an issue
 // tracker's shape), and the rest fill the main column. Below the width two
-// columns need, one column: header, rail, main. The DOM is in that order at
-// every width, so reading and tab order match the screen.
+// columns need, one column: header, rail, main, or header, main, rail with
+// `mobileOrder="main-first"` (a record whose long content is what you open
+// it for: notes, a checklist). The DOM is in that order at every width, so
+// reading and tab order match the screen: beside each other, the columns'
+// places come from the grid, not the DOM.
 import { useEffect, useId, useState, useSyncExternalStore } from 'react';
 import { Link } from 'react-router';
 import { ArrowLeftIcon, SearchXIcon } from 'lucide-react';
@@ -88,7 +93,7 @@ function ViewSection({ section, inRail = false }) {
 // two columns follows the width the page actually has (the sidebar open
 // or not), not the window's: two from 56rem (896px), where the main
 // column still gets ~32rem beside a 22rem rail. Below that, one column in
-// DOM order (header, rail, main); from it, the grid puts the rail on the
+// DOM order (header, rail, main, or main first); from it, the grid puts the rail on the
 // right of row 1 and main on its left, both starting under the header.
 const RAIL_LAYOUT = {
     page: '@container/view flex min-w-0 flex-col gap-6',
@@ -107,10 +112,11 @@ function SkeletonCard({ rows, stacked }) {
 }
 // The page's shape before the record arrives, in the layout it will have,
 // so nothing jumps when it loads.
-function EntityViewSkeleton({ layout }) {
+function EntityViewSkeleton({ layout, mobileOrder }) {
     const header = (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-5 w-24" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-7 w-64 max-w-full" }), _jsx(Skeleton, { className: "h-5 w-40" })] })] }));
     if (layout === 'rail') {
-        return (_jsxs("div", { className: RAIL_LAYOUT.page, "data-state": "loading", "data-layout": "rail", children: [header, _jsxs("div", { className: RAIL_LAYOUT.columns, children: [_jsx("div", { className: cn(RAIL_LAYOUT.rail, 'flex flex-col gap-6'), children: _jsx(SkeletonCard, { rows: 4, stacked: true }) }), _jsx("div", { className: RAIL_LAYOUT.main, children: _jsx(SkeletonCard, { rows: 6, stacked: false }) })] })] }));
+        const main = (_jsx("div", { className: RAIL_LAYOUT.main, children: _jsx(SkeletonCard, { rows: 6, stacked: false }) }));
+        return (_jsxs("div", { className: RAIL_LAYOUT.page, "data-state": "loading", "data-layout": "rail", children: [header, _jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, _jsx("div", { className: cn(RAIL_LAYOUT.rail, 'flex flex-col gap-6'), children: _jsx(SkeletonCard, { rows: 4, stacked: true }) }), mobileOrder === 'rail-first' && main] })] }));
     }
     return (_jsxs("div", { className: "flex max-w-4xl flex-col gap-6", "data-state": "loading", children: [header, Array.from({ length: 2 }, (_, section) => (_jsx(SkeletonCard, { rows: 4, stacked: false }, section)))] }));
 }
@@ -141,7 +147,7 @@ function Rail({ label, sections }) {
     const [ref, fits] = useFitsWindow();
     return (_jsx("aside", { ref: ref, "aria-label": label, "data-fits": fits ? '' : undefined, className: cn(RAIL_LAYOUT.rail, RAIL_LAYOUT.sticky, 'flex min-w-0 flex-col gap-6'), children: sections.map((section) => (_jsx(ViewSection, { section: section, inRail: true }, section.title))) }));
 }
-export function EntityView({ title, documentTitle, titleEdit, badges, actions, notice, sections, footer, layout = 'column', railLabel, isLoading, error, onRetry, back, }) {
+export function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout = 'column', mobileOrder = 'rail-first', railLabel, isLoading, error, onRetry, back, }) {
     // Editing in place: one store per view, and the leave-page prompt only
     // while a field is open (or one is always editable).
     const [store] = useState(() => new EditInPlaceStore());
@@ -155,8 +161,9 @@ export function EntityView({ title, documentTitle, titleEdit, badges, actions, n
     if (error)
         return _jsx(ErrorState, { error: error, onRetry: onRetry });
     if (isLoading)
-        return _jsx(EntityViewSkeleton, { layout: layout });
+        return _jsx(EntityViewSkeleton, { layout: layout, mobileOrder: mobileOrder });
     const railSections = sections.filter((section) => section.placement === 'rail');
     const mainSections = sections.filter((section) => section.placement !== 'rail');
-    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), _jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) })] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
+    const main = (_jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) }));
+    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
 }

package/dist/components/app/key-stats.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type KeyStat = {
+    label: string;
+    value: ReactNode;
+    /** A few words under the value ("of 12", "since May"), in caption type. */
+    hint?: ReactNode;
+};
+export type KeyStatsProps = {
+    stats: readonly KeyStat[];
+    /** What an empty value reads as. Defaults to "Not set". */
+    emptyLabel?: string;
+    className?: string;
+};
+export declare function KeyStats({ stats, emptyLabel, className }: KeyStatsProps): import("react").JSX.Element;

package/dist/components/app/key-stats.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from 'cn';
+const isEmpty = (value) => value === null || value === undefined || value === false || value === '';
+export function KeyStats({ stats, emptyLabel = 'Not set', className }) {
+    return (_jsx("dl", { "data-slot": "key-stats", className: cn('flex flex-wrap gap-x-8 gap-y-3 rounded-lg border border-border bg-card px-4 py-3 text-card-foreground', className), children: stats.map((stat) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("dt", { className: "type-caption text-muted-foreground", children: stat.label }), _jsx("dd", { className: "type-section-title tabular-nums break-words text-foreground", children: isEmpty(stat.value) ? _jsx("span", { className: "type-body text-muted-foreground", children: emptyLabel }) : stat.value }), stat.hint && _jsx("dd", { className: "type-caption text-muted-foreground", children: stat.hint })] }, stat.label))) }));
+}

package/dist/components/app/module-card.d.ts

@@ -38,16 +38,25 @@ export type ModuleCardProps = ModuleCardPlace & {
     onRetry?: () => void;
     className?: string;
 };
+/** How a ModuleStrip shows its places on a phone: `tiles` (the default), or one sideways `row` of chips. */
+export type ModuleStripMobile = 'tiles' | 'row';
 export declare function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading, error, onRetry, className, }: ModuleCardProps): import("react").JSX.Element;
 export interface ModuleStripProps {
     /** Names the strip's navigation landmark: "Places". */
     'aria-label': string;
     /** ModuleCards, one per place. */
     children: ReactNode;
+    /**
+     * On a phone: three columns of `tiles` (the default), or one `row` of
+     * chips (icon, name, number) that scrolls sideways, below the sidebar's
+     * breakpoint. A desktop shows the cards either way.
+     */
+    mobile?: ModuleStripMobile;
     className?: string;
 }
 /**
  * A hub's places, a ModuleCard each: equal columns of 170px or more that
- * wrap, and three columns of tiles on a phone.
+ * wrap, and on a phone three columns of tiles, or one sideways row of
+ * chips (`mobile="row"`).
  */
-export declare function ModuleStrip({ 'aria-label': label, children, className }: ModuleStripProps): import("react").JSX.Element;
+export declare function ModuleStrip({ 'aria-label': label, children, mobile, className }: ModuleStripProps): import("react").JSX.Element;

package/dist/components/app/module-card.js

@@ -21,7 +21,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // smaller tiles with no action, each tile a whole link (the band link's
 // target stretched over the card) at least 44px tall. Retry sits above
 // that target. data-density="compact" tightens the band and the body.
-import { Children, useId } from 'react';
+//
+// `mobile="row"` makes the strip one sideways-scrolling row of chips below
+// the sidebar's breakpoint (md) instead, so a hub's widgets start on the
+// first screen: each place's icon in its slot's colour, its name and its
+// number, a skeleton while that loads and a dash when it fails (Retry is
+// the card's; the place's own page says what went wrong). Each ModuleCard
+// renders its chip beside its card, one shown at each width. The row
+// scrolls inside itself and is `relative`, so a chip's sr-only text
+// (absolutely placed) scrolls with it instead of widening the page.
+import { Children, createContext, useContext, useId } from 'react';
 import { Link } from 'react-router';
 import { AlertCircleIcon, ExternalLinkIcon } from 'lucide-react';
 import { cn } from 'cn';
@@ -67,29 +76,60 @@ const BAND_LINK_CLASS = 'group/band flex min-h-9 items-center gap-2 px-3 py-1.5
     'max-sm:gap-1.5 max-sm:px-2 max-sm:after:absolute max-sm:after:inset-0 max-sm:after:rounded-xl ' +
     'max-sm:focus-visible:ring-0 max-sm:focus-visible:after:ring-3 max-sm:focus-visible:after:ring-inset ' +
     'max-sm:focus-visible:after:ring-ring/50';
+// The chip on a phone in a `mobile="row"` strip. Its focus ring is inset:
+// the row clips anything drawn outside it.
+const CHIP_CLASS = 'flex min-h-11 items-center gap-1.5 rounded-full border border-border bg-card px-3 type-label ' +
+    'whitespace-nowrap text-foreground outline-none hover:bg-accent focus-visible:ring-3 ' +
+    'focus-visible:ring-inset focus-visible:ring-ring/50';
 const ACTION_CLASS = 'flex items-center gap-1 border-t border-border px-3 py-2 type-label text-foreground underline ' +
     'underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-3 focus-visible:ring-inset ' +
     'focus-visible:ring-ring/50 density-compact:py-1.5 max-sm:hidden';
 function NewTabMark() {
     return (_jsxs(_Fragment, { children: [_jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] }));
 }
+const StripMobileContext = createContext('tiles');
+function ChipValue({ state, value }) {
+    if (state === 'loading')
+        return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Loading" })] }));
+    if (state === 'error')
+        return (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: "Couldn't load" })] }));
+    if (value === undefined)
+        return null;
+    return (_jsx("span", { "data-slot": "module-card-chip-value", className: "font-semibold tabular-nums", children: value }));
+}
+function ModuleChip({ title, icon: Icon, category, to, href, value, state, }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn('size-4 shrink-0', category ? ICON_CLASS[category] : 'text-muted-foreground') }), title, _jsx(ChipValue, { state: state, value: value })] }));
+    const chipProps = { 'data-slot': 'module-card-chip', 'data-state': state, className: cn(CHIP_CLASS, 'md:hidden') };
+    return href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...chipProps, children: [content, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...chipProps, children: content }));
+}
 export function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading = false, error, onRetry, className, }) {
     const titleId = useId();
     const bodyId = useId();
     const state = error ? 'error' : isLoading ? 'loading' : 'success';
+    const mobile = useContext(StripMobileContext);
     const band = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn('size-4 shrink-0', category ? ICON_CLASS[category] : 'text-muted-foreground') }), _jsx("span", { id: titleId, className: "min-w-0 flex-1 truncate underline-offset-4 group-hover/band:underline", children: title })] }));
     const bandProps = {
         'aria-describedby': bodyId,
         'data-slot': 'module-card-band',
         className: cn(BAND_LINK_CLASS, category && BAND_CLASS[category]),
     };
-    return (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
+    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
                 (action.href !== undefined ? (_jsxs("a", { href: action.href, target: "_blank", rel: "noreferrer", "aria-describedby": titleId, className: ACTION_CLASS, children: [_jsx("span", { className: "truncate", children: action.label }), _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: action.to, "aria-describedby": titleId, className: ACTION_CLASS, children: _jsx("span", { className: "truncate", children: action.label }) })))] }));
+    if (mobile === 'tiles')
+        return card;
+    return (_jsxs(_Fragment, { children: [card, _jsx(ModuleChip, { title: title, icon: Icon, category: category, to: to, href: href, value: value, state: state })] }));
 }
+// The list's columns: whole class names, so Tailwind generates them.
+const STRIP_LIST = {
+    tiles: 'grid grid-cols-3 gap-2 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]',
+    row: 'flex gap-2 md:grid md:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]',
+};
 /**
  * A hub's places, a ModuleCard each: equal columns of 170px or more that
- * wrap, and three columns of tiles on a phone.
+ * wrap, and on a phone three columns of tiles, or one sideways row of
+ * chips (`mobile="row"`).
  */
-export function ModuleStrip({ 'aria-label': label, children, className }) {
-    return (_jsx("nav", { "aria-label": label, "data-slot": "module-strip", className: className, children: _jsx("ul", { className: "grid grid-cols-3 gap-2 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]", children: Children.map(children, (child) => child && _jsx("li", { className: "min-w-0", children: child })) }) }));
+export function ModuleStrip({ 'aria-label': label, children, mobile = 'tiles', className }) {
+    const row = mobile === 'row';
+    return (_jsx(StripMobileContext.Provider, { value: mobile, children: _jsx("nav", { "aria-label": label, "data-slot": "module-strip", "data-mobile": mobile, className: cn(row && 'relative min-w-0 max-md:overflow-x-auto max-md:[scrollbar-width:none]', className), children: _jsx("ul", { className: STRIP_LIST[mobile], children: Children.map(children, (child) => child && _jsx("li", { className: cn('min-w-0', row && 'max-md:shrink-0'), children: child })) }) }) }));
 }