@tristan2828/ui-foundation 4.32.0 → 4.34.0

package/dist/components/app/app-shell.js

@@ -4,7 +4,8 @@ import { useTheme } from 'next-themes';
 import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
-import { activeNavTo, navGroups, navPageLabel } from './app-shell-nav.js';
+import { BottomBar, BOTTOM_BAR_PADDING } from './app-shell-bottom-bar.js';
+import { activeNavTo, childrenOpen, navGroups, navPageLabel, withChildren, } from './app-shell-nav.js';
 import { versionHref, versionLabel } from './app-shell-version.js';
 import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
@@ -13,7 +14,7 @@ import { useShellDocumentTitle } from '../../hooks/use-document-title.js';
 import { cn } from 'cn';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
 import { Toaster } from '../ui/sonner.js';
 import { TooltipProvider } from '../ui/tooltip.js';
 // Must match SIDEBAR_COOKIE_NAME in ../ui/sidebar.tsx, which writes the
@@ -52,10 +53,23 @@ function VersionEntry({ version }) {
 // One group's entries. A plain Link, not NavLink: NavLink marks every
 // matching entry current, and only the most specific one should be
 // (activeNavTo).
+//
+// An entry's children (#239) are a list inside its item, so they're read
+// as its pages, shown while you're in them (childrenOpen) and otherwise
+// in the page but hidden, as a folded section's are. The icon rail has no
+// room for them: there the entry looks current while one of them is, and
+// its tooltip names them.
 function NavMenu({ items, activeTo }) {
-    return (_jsx(SidebarMenu, { children: items.map(({ to, label, icon: Icon }) => {
+    const { state, isMobile } = useSidebar();
+    const rail = state === 'collapsed' && !isMobile;
+    return (_jsx(SidebarMenu, { children: items.map((item) => {
+            const { to, label, icon: Icon, children } = item;
             const isActive = to === activeTo;
-            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, to));
+            const childActive = children?.some((child) => child.to === activeTo) ?? false;
+            return (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { isActive: isActive || (rail && childActive), tooltip: children?.length ? `${label}: ${children.map((child) => child.label).join(', ')}` : label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }), children && children.length > 0 && (_jsx(SidebarMenuSub, { hidden: !childrenOpen(item, activeTo), children: children.map(({ to: childTo, label: childLabel, icon: ChildIcon }) => {
+                            const isChildActive = childTo === activeTo;
+                            return (_jsx(SidebarMenuSubItem, { children: _jsxs(SidebarMenuSubButton, { isActive: isChildActive, render: _jsx(Link, { to: childTo, "aria-current": isChildActive ? 'page' : undefined }), children: [_jsx(ChildIcon, {}), _jsx("span", { children: childLabel })] }) }, childTo));
+                        }) }))] }, to));
         }) }));
 }
 // Whether a collapsible section is open, remembered per browser by its
@@ -88,7 +102,7 @@ function CollapsibleNavGroup({ group, activeTo }) {
     const { state, isMobile } = useSidebar();
     const contentId = useId();
     const [stored, setStored] = useState(() => storedSectionOpen(group.label));
-    const holdsCurrent = group.items.some((item) => item.to === activeTo);
+    const holdsCurrent = withChildren(group.items).some((item) => item.to === activeTo);
     // Arriving in a folded section unfolds it, and it stays unfolded after.
     if (holdsCurrent && stored !== true)
         setStored(true);
@@ -110,7 +124,7 @@ function CollapsibleNavGroup({ group, activeTo }) {
 function AppShellSkeleton() {
     return (_jsxs("div", { className: "flex h-screen w-full gap-4 p-4", "data-state": "loading", children: [_jsx(Skeleton, { className: "h-full w-56 shrink-0" }), _jsxs("div", { className: "flex-1 space-y-4 pt-2", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-40 w-full" })] })] }));
 }
-export function AppShell({ title, logo: Logo, nav, sidebarExtra, defaultSidebarOpen = true, version }) {
+export function AppShell({ title, logo: Logo, nav, sidebarExtra, defaultSidebarOpen = true, version, bottomBar, }) {
     const { user, status, error, retry, logout } = useAuth();
     const location = useLocation();
     const reporter = useErrorReporter();
@@ -146,5 +160,5 @@ export function AppShell({ title, logo: Logo, nav, sidebarExtra, defaultSidebarO
                                                         // (AuthProvider), so this stays a deliberate logout: a
                                                         // clean /login, never the previous user's page as `from`.
                                                         logout().catch(() => { });
-                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: "flex-1 p-6", children: _jsx(Outlet, {}) })] })] }), _jsx(Toaster, { position: "top-center" })] }));
+                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: cn('flex-1 p-6', bottomBar?.length && BOTTOM_BAR_PADDING), children: _jsx(Outlet, {}) })] }), bottomBar && bottomBar.length > 0 && _jsx(BottomBar, { items: bottomBar, nav: nav, activeTo: activeTo })] }), _jsx(Toaster, { position: "top-center" })] }));
 }

package/dist/components/app/data-table.d.ts

@@ -9,7 +9,7 @@ export type SortingState = {
 }[];
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
-        align?: 'center';
+        align?: 'center' | 'right';
     }
 }
 export type DataTableProps<TData extends Record<string, unknown>> = {
@@ -97,6 +97,26 @@ export type DataTableProps<TData extends Record<string, unknown>> = {
      * Colour isn't the only signal: say why in the row too (a badge, a word).
      */
     highlightRow?: (row: TData) => boolean;
+    /**
+     * A totals row under the columns it adds up, the way a spreadsheet's
+     * is: `label` in the first visible column ("Total · 18 items"), then
+     * each of `cells` under the column with that id, in its alignment. The
+     * values come from the server, for every row the filters match, never
+     * summed from the page on the client. Shown only with rows: never while
+     * loading, on error or empty. Leave undefined (or null, before the data
+     * has come) for no row.
+     */
+    totals?: DataTableTotals | null;
 };
 export type DataTableWidth = 'full' | 'content';
-export declare function DataTable<TData extends Record<string, unknown>>({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width, groupBy, groupSummary, header: showHeader, highlightRow, }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableTotals = {
+    /** Goes in the first visible column, as the row's header. */
+    label: ReactNode;
+    /**
+     * One value per column id, already formatted. A column left out, or
+     * hidden by `visibleColumns`, gets an empty cell or none. The first
+     * visible column holds the label, so a value for it isn't shown.
+     */
+    cells?: Partial<Record<string, ReactNode>>;
+};
+export declare function DataTable<TData extends Record<string, unknown>>({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width, groupBy, groupSummary, header: showHeader, highlightRow, totals, }: DataTableProps<TData>): import("react").JSX.Element;

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

@@ -23,7 +23,7 @@ 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../ui/table.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
 // columns are looked through to their leaves, which visibility is keyed by.
@@ -59,6 +59,9 @@ const PINNED_COLUMN_CLASS = `sticky left-0 border-r ${PINNED_CELL_CLASS} group-h
 // so lighting it too read as a second selected thing. Only the first
 // column marks the hovered row.
 const PINNED_LAST_COLUMN_CLASS = `sticky right-0 border-l ${PINNED_CELL_CLASS}`;
+// The totals row's label, pinned with the first column (`totals`): the
+// same opaque cell, with no hover, since the row isn't one to pick.
+const PINNED_TOTALS_LABEL_CLASS = `sticky left-0 border-r ${PINNED_CELL_CLASS}`;
 // A pinned first column's content, capped below md at 45% of the table's
 // scroll area (`cqw`: the container is an inline-size query container)
 // and wrapping, so a long title can't widen the column past the screen
@@ -82,12 +85,24 @@ const ROW_GROUP_CLASS = 'group/row hover:bg-transparent';
 // Inside, muted text takes the darker grey the wash needs (theme.css).
 const HIGHLIGHTED_ROW_CLASS = '[--muted-foreground:var(--table-highlight-muted-foreground)] [&>td]:bg-(--table-highlight) ' +
     '[&>td:first-child]:shadow-[inset_3px_0_0_0_var(--info-text)]';
+// `totals`: a footer row the way a spreadsheet's totals are, set apart
+// from the rows by a border twice a row divider's width and medium type,
+// on the page's background (table.tsx's footer tint is translucent, so a
+// pinned cell over it couldn't match without bleed-through). Its cells
+// read the body's density tokens, so it's a row's height, not the
+// header's; tabular figures line its numbers up with the column's.
+const TOTALS_FOOTER_CLASS = 'border-t-2 border-border bg-background tabular-nums';
+// Its label is a row header (<th scope="row">), padded as a body cell is.
+const TOTALS_LABEL_CLASS = 'h-auto py-(--table-cell-py)';
 // `header={false}`: the header row stays in the table, so every cell keeps
 // its column header for a screen reader, but takes no room: each header
 // is its name in an sr-only span, in a cell with no height or padding.
 const HIDDEN_HEAD_CLASS = 'h-0 p-0';
 // A group's heading row (`groupBy`): a little air above, so the groups
 // read apart, and the page's background, never the zebra stripe.
+// A column's `meta.align` as the class its header, cells and totals take.
+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';
 // `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
@@ -157,7 +172,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, }) {
+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, }) {
     // 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
@@ -216,9 +231,10 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
     const containerRef = useRef(null);
     const { barRef, isOverflowing, scrollWidth } = useBottomScrollbar(containerRef, Boolean(pinFirstColumn) && isSuccessView);
     const rows = table.getRowModel().rows;
-    const visibleColumnCount = table.getVisibleLeafColumns().length;
+    const visibleLeafColumns = table.getVisibleLeafColumns();
+    const visibleColumnCount = visibleLeafColumns.length;
     // 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, cell.column.columnDef.meta?.align === 'center' && 'text-center'), 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) => (_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 content = (_jsxs("div", { ref: root, className: cn('flex flex-col gap-4', width === 'content' && CONTENT_WIDTH_CLASS), "data-width": width, style: width === 'content' && !isSuccessView && lastWidth !== null
             ? { '--data-table-last-width': `${lastWidth}px` }
             : undefined, children: [toolbar, error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (_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: [_jsxs(Table, { "data-state": "success", containerRef: containerRef, 
@@ -237,16 +253,22 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                         const sortDirection = header.column.getIsSorted();
                                         // Hidden, a header is its name only: a sort button no
                                         // one can see would still take focus.
-                                        const content = header.isPlaceholder ? null : canSort && showHeader ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext()));
+                                        const content = header.isPlaceholder ? null : canSort && showHeader ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center', 
+                                            // The arrow on the label's left, so the label's
+                                            // right edge lines up with the numbers under it.
+                                            header.column.columnDef.meta?.align === 'right' && 'ml-auto flex-row-reverse'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext()));
                                         return (_jsx(TableHead, { className: cn(!showHeader && HIDDEN_HEAD_CLASS, pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                                 index === headerGroup.headers.length - 1 &&
-                                                PINNED_LAST_COLUMN_CLASS, header.column.columnDef.meta?.align === 'center' && 'text-center'), "aria-sort": !canSort
+                                                PINNED_LAST_COLUMN_CLASS, alignClass(header.column.columnDef.meta?.align)), "aria-sort": !canSort
                                                 ? undefined
                                                 : sortDirection === 'asc'
                                                     ? 'ascending'
                                                     : 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) }))] }), pinFirstColumn && isOverflowing && (_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, {}) })] })] })] }))] }));
+                                    }) }, 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) => {
+                                        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 && (_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] }));
 }

package/dist/components/app/line-chart.d.ts

@@ -0,0 +1,26 @@
+import { type LineChartMark, type LineChartPoint } from '../../lib/line-chart-layout.js';
+export type { LineChartMark, LineChartPoint } from '../../lib/line-chart-layout.js';
+export type LineChartProps = {
+    /** The figure's name: "Price over time". */
+    label: string;
+    /** The values, oldest first. */
+    points: readonly LineChartPoint[];
+    /** A dashed line at a value to reach or stay under: `{ y: 99, label: 'Buy at' }`. */
+    target?: {
+        y: number;
+        label: string;
+    };
+    /** Which point to mark with a dot and its value: the lowest, the highest or the latest. */
+    mark?: LineChartMark;
+    /** A value as shown: `usd`. Defaults to the number as the browser writes it. */
+    formatY?: (y: number) => string;
+    /** A point's x as shown: `formatPlainDate`. Defaults to x as given. */
+    formatX?: (x: LineChartPoint['x']) => string;
+    /** The plot's height in px; the chart fills its container's width. */
+    height?: number;
+    isLoading?: boolean;
+    /** What shows with no points. */
+    emptyMessage?: string;
+    className?: string;
+};
+export declare function LineChart({ label, points, target, mark, formatY, formatX, height, isLoading, emptyMessage, className, }: LineChartProps): import("react").JSX.Element;

package/dist/components/app/line-chart.js

@@ -0,0 +1,59 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// A small value-over-time chart for a record's page (#238): one series (a
+// price checked daily, a weight, a balance) against an optional dashed
+// target, with its lowest, highest or latest point marked. Plain SVG, no
+// chart library: one line, a few dozen points, nothing to zoom.
+//
+// Colours are text tokens, so each clears 3:1 on the card in both themes:
+// the line in `info-text`, the target in `success-text`. Each is its own
+// <svg> drawing in currentColor, so the package's glyph check measures it
+// like any icon. The plot stretches to its box (preserveAspectRatio
+// "none", strokes that don't scale), and the dots and words on it are
+// HTML placed by percentage, so nothing is squashed at any width.
+//
+// The picture is for the eye: a screen reader gets the figure's name,
+// a summary (first, last, lowest, highest, the target) and a table of
+// every point, all visually hidden. The four states: a skeleton at
+// `height` while loading, one quiet line with no points, a dot (no line)
+// for one point, and the chart.
+import { cn } from 'cn';
+import { Skeleton } from '../ui/skeleton.js';
+import { chartLayout } from '../../lib/line-chart-layout.js';
+const defaultY = (y) => y.toLocaleString();
+const defaultX = (x) => String(x);
+const percent = (fraction) => `${fraction * 100}%`;
+// Words on the plot sit beside a point, kept inside the plot at its
+// edges, on a plate of the card's colour so a line under them doesn't
+// cross them.
+const PLATE = 'rounded-sm bg-card px-1';
+function besides(x) {
+    return x > 0.75 ? '-translate-x-full -ml-1.5' : 'ml-1.5';
+}
+export function LineChart({ label, points, target, mark, formatY = defaultY, formatX = defaultX, height = 160, isLoading = false, emptyMessage = 'No points yet', className, }) {
+    if (isLoading) {
+        return (_jsxs("div", { "data-slot": "line-chart", "data-state": "loading", "aria-busy": "true", className: cn('min-w-0', className), children: [_jsxs("span", { className: "sr-only", children: ["Loading ", label] }), _jsx(Skeleton, { style: { height }, className: "w-full" })] }));
+    }
+    if (points.length === 0) {
+        return (_jsx("figure", { "data-slot": "line-chart", "data-state": "empty", "aria-label": label, className: cn('min-w-0', className), children: _jsx("p", { style: { height }, className: "flex items-center justify-center rounded-md border border-dashed border-border type-body text-muted-foreground", children: emptyMessage }) }));
+    }
+    const layout = chartLayout(points, target?.y, mark);
+    const values = points.map((point) => point.y);
+    const lowest = values.indexOf(Math.min(...values));
+    const highest = values.indexOf(Math.max(...values));
+    const line = layout.places.map((place) => `${place.x * 100},${place.y * 100}`).join(' ');
+    const marked = layout.markIndex === undefined ? undefined : layout.places[layout.markIndex];
+    const single = points.length === 1 ? layout.places[0] : undefined;
+    const dot = marked ?? single;
+    const describe = (index) => `${formatY(points[index].y)} on ${formatX(points[index].x)}`;
+    const summary = [
+        points.length === 1 ? `One point: ${describe(0)}` : `From ${describe(0)} to ${describe(points.length - 1)}`,
+        points.length > 2 && `lowest ${describe(lowest)}`,
+        points.length > 2 && `highest ${describe(highest)}`,
+        target && `${target.label} ${formatY(target.y)}`,
+    ]
+        .filter(Boolean)
+        .join('; ');
+    return (_jsxs("figure", { "data-slot": "line-chart", "data-state": "success", "aria-label": label, className: cn('flex min-w-0 flex-col gap-1.5', className), children: [_jsxs("div", { "aria-hidden": "true", className: "relative border-b border-border", style: { height }, children: [target && layout.targetY !== undefined && (_jsxs(_Fragment, { children: [_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible text-success-text", children: _jsx("line", { x1: "0", x2: "100", y1: layout.targetY * 100, y2: layout.targetY * 100, strokeWidth: 1.5, strokeDasharray: "6 4", vectorEffect: "non-scaling-stroke", className: "stroke-current" }) }), _jsxs("span", { className: cn('absolute right-0 -translate-y-full type-caption text-success-text tabular-nums', PLATE), style: { top: percent(layout.targetY) }, children: [target.label, " ", formatY(target.y)] })] })), points.length > 1 && (_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible text-info-text", children: _jsx("polyline", { points: line, fill: "none", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: "stroke-current" }) })), dot && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "line-chart-mark", className: "absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-info-text ring-2 ring-card", style: { left: percent(dot.x), top: percent(dot.y) } }), _jsx("span", { className: cn('absolute type-caption font-medium text-foreground tabular-nums', PLATE, besides(dot.x), 
+                                // Under the lowest point, where the line isn't; over any other.
+                                mark === 'min' ? 'mt-1' : '-translate-y-full -mt-1'), style: { left: percent(dot.x), top: percent(dot.y) }, children: formatY(points[marked ? layout.markIndex : 0].y) })] }))] }), _jsxs("div", { "aria-hidden": "true", className: "flex justify-between gap-3 type-caption text-muted-foreground tabular-nums", children: [_jsx("span", { children: formatX(points[0].x) }), points.length > 1 && _jsx("span", { children: formatX(points[points.length - 1].x) })] }), _jsx("figcaption", { className: "sr-only", children: summary }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "When" }), _jsx("th", { scope: "col", children: "Value" })] }) }), _jsx("tbody", { children: points.map((point, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatX(point.x) }), _jsx("td", { children: formatY(point.y) })] }, index))) })] })] }));
+}

package/dist/components/app/list-editor-rows.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The open item once the list's ids have changed: the item that just
+ * appeared, when an add or a duplicate asked for it (`opening`), else the
+ * one that was open, if it's still there. A list replaced whole (a form's
+ * `reset`) gives every item a new id, and nothing asked, so nothing opens.
+ */
+export declare function followOpenItem({ before, after, open, opening, }: {
+    before: readonly string[];
+    after: readonly string[];
+    open: string | null;
+    opening: boolean;
+}): string | null;
+/** Whether an item shows its fields: it's the open one, or it has an error to show. */
+export declare function isItemOpen({ id, open, invalid }: {
+    id: string;
+    open: string | null;
+    invalid: boolean;
+}): boolean;

package/dist/components/app/list-editor-rows.js

@@ -0,0 +1,23 @@
+// Which of ListEditor's items are open, when its items show as summary
+// lines (`summary`, #222). One item is open at a time, held by its stable
+// id (useFieldArray's `field.id`), so it stays open while rows move and
+// closes when it's removed. An item that was just added or duplicated
+// opens, and one with a validation error is open whatever else is.
+/**
+ * The open item once the list's ids have changed: the item that just
+ * appeared, when an add or a duplicate asked for it (`opening`), else the
+ * one that was open, if it's still there. A list replaced whole (a form's
+ * `reset`) gives every item a new id, and nothing asked, so nothing opens.
+ */
+export function followOpenItem({ before, after, open, opening, }) {
+    if (opening) {
+        const added = after.find((id) => !before.includes(id));
+        if (added !== undefined)
+            return added;
+    }
+    return open !== null && after.includes(open) ? open : null;
+}
+/** Whether an item shows its fields: it's the open one, or it has an error to show. */
+export function isItemOpen({ id, open, invalid }) {
+    return invalid || id === open;
+}

package/dist/components/app/list-editor.d.ts

@@ -1,25 +1,47 @@
-import type { ReactNode } from 'react';
-export declare function ListEditor({ items, renderItem, onAdd, onRemove, onMove, itemName, addLabel, emptyText, max, add, disabled, 'aria-label': ariaLabel, }: {
+import { type ReactNode } from 'react';
+export declare function ListEditor({ items, renderItem, summary, invalid, onAdd, onRemove, onMove, onDuplicate, itemName, addLabel, emptyText, max, add, disabled, 'aria-label': ariaLabel, }: {
     /** One entry per item, with a stable key (useFieldArray's `fields`). */
     items: readonly {
         id: string;
     }[];
     /** The item's own fields, for the item at this index. */
     renderItem: (index: number) => ReactNode;
+    /**
+     * Shows each item as one line, this text (e.g. "Squat · 3 × 8 at 60 kg"),
+     * that opens to its `renderItem` fields on a click, Enter or Space. One
+     * item is open at a time; one just added or duplicated opens. For a long
+     * list of rich items. Without it, every item shows its fields.
+     */
+    summary?: (index: number) => ReactNode;
+    /**
+     * With `summary`: the item at this index has an error to show, e.g.
+     * (i) => !!errors.steps?.[i]. It opens, beside the open one, until the
+     * error clears, so a refused save never hides why. react-hook-form's
+     * focus on the first error then makes that item the open one.
+     */
+    invalid?: (index: number) => boolean;
     /** The Add button's action. Not needed with `add`. */
     onAdd?: () => void;
     onRemove: (index: number) => void;
     onMove: (from: number, to: number) => void;
+    /**
+     * Puts a Duplicate button beside Remove. The app inserts the copy right
+     * after the original, e.g. (i) => insert(i + 1, { ...getValues(`steps.${i}`) }),
+     * leaving out anything a copy mustn't share (a saved id). With `summary`,
+     * the copy opens. Disabled once `max` is reached, as Add is.
+     */
+    onDuplicate?: (index: number) => void;
     /**
      * How the row buttons name an item for a screen reader, e.g.
      * (i) => `item ${i + 1}` gives "Move item 2 up", "Remove item 2".
+     * A summary line is named by it too: "item 2: Squat · 3 × 8 at 60 kg".
      */
     itemName: (index: number) => string;
     /** The Add button's text, e.g. "Add item". */
     addLabel: string;
     /** Shown instead of the list when it's empty. */
     emptyText?: string;
-    /** The most items allowed; Add is disabled once reached. */
+    /** The most items allowed; Add and Duplicate are disabled once reached. */
     max?: number;
     /** In place of the Add button: what adds an item (editing in place's Add box). */
     add?: ReactNode;

package/dist/components/app/list-editor.js

@@ -1,10 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon, ArrowUpIcon, PlusIcon, Trash2Icon } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Edits a list of sub-records inside a parent's form: one row per item,
+// each with move up / move down / remove, and an Add button below. The one
+// control for every "sub-records" section of an entity plan
+// (conventions/docs/entity-plan-template.md): Widget's checklist, a task's
+// checklist and links.
+//
+// It owns the row chrome only. Each item's fields are the app's (rendered
+// by `renderItem`), and so is the state: pass react-hook-form's
+// useFieldArray `fields`, `append`, `remove` and `move`, so the items save
+// with the parent's form and their errors bind like any other field.
+//
+// A long list of rich items (#222) can show each item as one line instead
+// (`summary`): the line is a button that opens the item to its fields,
+// one item at a time (list-editor-rows.ts), with the row buttons beside
+// it. And `onDuplicate` puts a Duplicate button beside Remove, for lists
+// whose items repeat with small changes. Without either, every item shows
+// its fields, as before.
+//
+// Editing a list in place on a view (editable-list.tsx) is built on it
+// too, so the rows and their buttons match the form's: there, `add` is the
+// in-place Add box, and `disabled` holds the buttons while a change saves.
+import { useState } from 'react';
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon, CopyIcon, PlusIcon, Trash2Icon } from 'lucide-react';
 import { Button } from '../ui/button.js';
-export function ListEditor({ items, renderItem, onAdd, onRemove, onMove, itemName, addLabel, emptyText = 'Nothing added yet.', max, add, disabled = false, 'aria-label': ariaLabel, }) {
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import { followOpenItem, isItemOpen } from './list-editor-rows.js';
+export function ListEditor({ items, renderItem, summary, invalid, onAdd, onRemove, onMove, onDuplicate, itemName, addLabel, emptyText = 'Nothing added yet.', max, add, disabled = false, 'aria-label': ariaLabel, }) {
     const atMax = max !== undefined && items.length >= max;
+    // The open item, by id. When the ids change (an add, a move, a remove),
+    // it follows them here, in the render that shows the change, so a new
+    // item's fields are already there when react-hook-form focuses them.
+    const ids = items.map((item) => item.id);
+    const [open, setOpen] = useState(null);
+    const [opening, setOpening] = useState(false);
+    const [seen, setSeen] = useState(ids);
+    if (seen.join('\n') !== ids.join('\n')) {
+        setSeen(ids);
+        setOpen(followOpenItem({ before: seen, after: ids, open, opening }));
+        setOpening(false);
+    }
+    // An add or a duplicate asks for the item it makes to open. The app's
+    // action runs in the same click, so its new id arrives with the ask.
+    const addItem = () => {
+        setOpening(true);
+        onAdd?.();
+    };
+    const duplicate = (index) => {
+        setOpening(true);
+        onDuplicate?.(index);
+    };
+    const rowButtons = (index, name) => (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Move ${name} up`, disabled: disabled || index === 0, onClick: () => onMove(index, index - 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Move ${name} down`, disabled: disabled || index === items.length - 1, onClick: () => onMove(index, index + 1), children: _jsx(ArrowDownIcon, {}) }), onDuplicate && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Duplicate ${name}`, disabled: disabled || atMax, onClick: () => duplicate(index), children: _jsx(CopyIcon, {}) })), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Remove ${name}`, disabled: disabled, onClick: () => onRemove(index), children: _jsx(Trash2Icon, {}) })] }));
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [items.length === 0 ? (_jsx("p", { className: "type-caption text-muted-foreground", children: emptyText })) : (_jsx("ul", { "aria-label": ariaLabel, className: "flex flex-col gap-2", children: items.map((item, index) => {
                     const name = itemName(index);
-                    return (_jsxs("li", { className: "flex items-start gap-1", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: renderItem(index) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Move ${name} up`, disabled: disabled || index === 0, onClick: () => onMove(index, index - 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Move ${name} down`, disabled: disabled || index === items.length - 1, onClick: () => onMove(index, index + 1), children: _jsx(ArrowDownIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": `Remove ${name}`, disabled: disabled, onClick: () => onRemove(index), children: _jsx(Trash2Icon, {}) })] }, item.id));
-                }) })), add ?? (_jsx("div", { children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onAdd, disabled: disabled || atMax, children: [_jsx(PlusIcon, {}), addLabel] }) }))] }));
+                    if (!summary) {
+                        return (_jsxs("li", { className: "flex items-start gap-1", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: renderItem(index) }), rowButtons(index, name)] }, item.id));
+                    }
+                    // A summary line: the whole line is the button (named by the
+                    // item's name, then its summary), the row buttons beside it,
+                    // and the fields under it while it's open. Clicking the line
+                    // again closes it; an item with an error stays open. Going into
+                    // an item's fields makes it the open one, so one opened by its
+                    // error doesn't close under the caret once the error clears.
+                    return (_jsx("li", { children: _jsxs(Collapsible, { open: isItemOpen({ id: item.id, open, invalid: invalid?.(index) ?? false }), onOpenChange: (next) => setOpen((current) => (next ? item.id : current === item.id ? null : current)), className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-1", children: [_jsxs(CollapsibleTrigger, { className: "group/summary flex min-h-7 min-w-0 flex-1 items-center gap-1.5 rounded-lg px-1.5 py-1 text-left type-body text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50", children: [_jsx(ChevronRightIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[panel-open]/summary:rotate-90 motion-reduce:transition-none" }), _jsxs("span", { className: "sr-only", children: [name, ": "] }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: summary(index) })] }), rowButtons(index, name)] }), _jsx(CollapsibleContent, { className: "flex min-w-0 items-start gap-2 pl-7", onFocus: () => setOpen(item.id), children: renderItem(index) })] }) }, item.id));
+                }) })), add ?? (_jsx("div", { children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, disabled: disabled || atMax, children: [_jsx(PlusIcon, {}), addLabel] }) }))] }));
 }

package/dist/components/app/markdown.d.ts

@@ -1,7 +1,22 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
+import { type HeadingFrom, type HeadingLevel } from './prose-look.js';
 export type MarkdownProps = {
     /** The Markdown source. Raw HTML in it is shown as text, never rendered. */
     children: string;
+    /**
+     * The HTML level the text's `#` renders as, where the text sits in the
+     * page's outline: 2 straight under the page's <h1>, 3 (the default)
+     * under a section's <h2>. `##` is one below it, `###` two below, never
+     * past <h6>. Only the element changes: each level looks the same.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Which heading takes `headingLevel`: `'hash'` (the default), `#`;
+     * `'text'`, the text's own highest, for notes that start at `##` (an
+     * import, a paste). The rest keep their distance from it. The text
+     * itself is never rewritten.
+     */
+    headingFrom?: HeadingFrom;
     className?: string;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, className, ...rest }: MarkdownProps): import("react").JSX.Element;