@cosmicdrift/kumiko-renderer 0.387.0 → 0.389.0

package/dist/web/primitives/data-table.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
-import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, Search, SlidersHorizontal, X, } from "lucide-react";
-import { Fragment, useId, useState, } from "react";
+import { ChevronRight, Search, SlidersHorizontal } from "lucide-react";
+import { Fragment, useId, useState } from "react";
 import { useOptionalLocale, useOptionalTranslation } from "../../index.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "../layout/uniform-bar-controls.js";
 import { cn } from "../lib/cn.js";
 import { Button as UiButton } from "../ui/button.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
@@ -10,54 +11,28 @@ import { CardLeadingImage } from "./file-thumbnail.js";
 import { screenPaddingClassName } from "./layout.js";
 import { useIsNarrowViewport } from "./use-narrow-viewport.js";
 import "../react-css-custom-properties.js";
-import { buildTableItems, cellLinkProp, cellTitle, DataTableCell, FIT_CONTENT_CELL_CLASS, FirstCellLink, isBadgeColumn, isEmptyCellValue, isUnlabeledFalse, NUMERIC_COLUMN_TYPES, rowToneClass, SortableHeader, showsBareCheckMark, TABULAR_COLUMN_TYPES, } from "./data-table-cell.js";
-import { DateRangeFacetFilter, FacetFilter } from "./facet-filter.js";
-import { InfiniteSentinel, Pager, TABLE_FOOTER_BAR_CLASS } from "./pager.js";
+import { ActionsBodyCell, ActionsHeaderCell } from "./data-table/actions-column.js";
+import { CardSortSelect } from "./data-table/card-sort-select.js";
+import { isPinningActive, isResizingActive } from "./data-table/column-layout-mode.js";
+import { ColumnResizeHandle, ColumnWidthGroup } from "./data-table/column-resize-handle.js";
+import { densityClasses } from "./data-table/density.js";
+import { buildFacetCluster } from "./data-table/facet-cluster.js";
+import { bandClassName, bandReactKey, bandTestId, buildDataTableItems, GroupBand, } from "./data-table/group-band.js";
+import { SortableHeader } from "./data-table/sortable-header.js";
+import { EXPAND_TOGGLE_CELL_CLASS, EXPANSION_CELL_CLASS, EXPANSION_CONTENT_CLASS, FILL_TABLE_CLASS, FlushTable, RowExpandToggle, } from "./data-table/table-chrome.js";
+import { DataTableFooter, showFullTextOnHover } from "./data-table/table-footer.js";
+import { ToolbarEndCluster, toolbarEndHasContent } from "./data-table/toolbar-end-cluster.js";
+import { TotalsCard, TotalsFooterRow } from "./data-table/totals-footer.js";
+import { useBulkSelection } from "./data-table/use-bulk-selection.js";
+import { EXPAND_COLUMN_KEY, SELECT_COLUMN_KEY, useColumnPins, } from "./data-table/use-column-pins.js";
+import { useColumnSizing } from "./data-table/use-column-sizing.js";
+import { useMeasuredColumnWidths } from "./data-table/use-measured-column-widths.js";
+import { useRowKeyboardNavigation } from "./data-table/use-row-keyboard-navigation.js";
+import { useViewColumns } from "./data-table/use-view-columns.js";
+import { cellLinkProp, cellTitle, DataTableCell, FIT_CONTENT_CELL_CLASS, FirstCellLink, isBadgeColumn, isEmptyCellValue, isUnlabeledFalse, NUMERIC_COLUMN_TYPES, rowToneClass, showsBareCheckMark, TABULAR_COLUMN_TYPES, } from "./data-table-cell.js";
+import { InfiniteSentinel, Pager } from "./pager.js";
 import { RowActionsCell } from "./row-actions.js";
-// The vendored Table wraps <table> in an `overflow-x-auto` container, which
-// would become the scrollport of a sticky header. A scrollBody table scrolls
-// in its parent instead, so it renders the bare <table>.
-function FlushTable({ className, ...props }) {
-    return (_jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }));
-}
-// Header cells stick to the scroll surface; the bottom rule is an inset
-// shadow because a border on a sticky cell scrolls away under border-collapse.
-// Column weight (medium vs. semibold for the sorted one) lives on the th itself
-// in SortableHeader: a `[&_th]:font-*` rule here would outrank it.
-// Child selectors only: an expanded row nests a whole table inside a cell, and
-// descendant selectors would make its header sticky and re-pad its cells.
-const FILL_TABLE_CLASS = cn("[&>thead>tr>th]:sticky [&>thead>tr>th]:top-0 [&>thead>tr>th]:z-10 [&>thead>tr>th]:h-9 [&>thead>tr>th]:bg-muted [&>thead>tr>th]:px-2 [&>thead>tr>th]:text-[13px]", "[&>thead>tr>th]:shadow-[inset_0_-1px_0_var(--color-border)] [&>thead>tr>th_button]:text-[13px] [&>tbody>tr>td]:px-2 [&>tbody>tr>td]:py-0", "[&>*>tr>:first-child]:pl-6 [&>*>tr>:last-child]:pr-6");
-// `!`: beats the first/last-child padding of FILL_TABLE_CLASS, which would
-// otherwise widen the narrow toggle column / pad the full-width expansion cell.
-// The nested table's sticky actions cell (last td) gets the muted surface
-// instead of its own md:bg-background, so it blends into the area.
-const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
-const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
-const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
-function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }) {
-    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 max-md:size-11", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
-            e.stopPropagation();
-            onToggle();
-        }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(ChevronRight, { className: cn("size-4 transition-transform", expanded && "rotate-90"), "aria-hidden": "true" }) }));
-}
-function DataTableFooter({ count, itemNoun, testId, }) {
-    const t = useOptionalTranslation();
-    const noun = itemNoun?.(count);
-    const label = noun !== undefined
-        ? (t?.("kumiko.list.count.noun", { count: count.toLocaleString(), noun }) ??
-            `${count.toLocaleString()} ${noun}`)
-        : count === 1
-            ? (t?.("kumiko.list.count.one") ?? "1 entry")
-            : (t?.("kumiko.list.count.other", { count: count.toLocaleString() }) ??
-                `${count.toLocaleString()} entries`);
-    return (_jsx("div", { "data-testid": testId, className: TABLE_FOOTER_BAR_CLASS, children: _jsx("span", { "data-testid": `${testId}-count`, children: label }) }));
-}
-// Cell content is a ReactNode, so the tooltip text is read from the rendered DOM.
-function showFullTextOnHover(event) {
-    const element = event.currentTarget;
-    element.title = element.scrollWidth > element.clientWidth ? (element.textContent ?? "") : "";
-}
-export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, rowGrouping, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, }) {
+export function DefaultDataTable({ columns: schemaColumns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, bulk, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, view, resetAll, exportList, serverGroups, totals, notice, rangeFacets, onRangeChange, }) {
     // One locale/translate subscription per table — not per cell.
     // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
     const tableTranslate = useOptionalTranslation();
@@ -66,8 +41,9 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
     // affordance. Cards replace the table entirely below the breakpoint — same
     // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
     const isNarrow = useIsNarrowViewport();
+    const viewColumns = useViewColumns(schemaColumns, view, isNarrow);
+    const density = densityClasses(view, scrollBody === true);
     const [facetsOpenNarrow, setFacetsOpenNarrow] = useState(false);
-    const [toggledGroups, setToggledGroups] = useState(new Set());
     // Toolbar wrapper: shared container for toolbar + table so the two belong
     // together visually. The toolbar is NOT sticky: lists typically scroll with
     // the page container, not internally. Sticky would compete with the topbar.
@@ -86,10 +62,39 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
     const rowClickLabel = rowClickAction?.label;
     const rowClickIsHidden = (row) => rowClickAction?.isVisible !== undefined && !rowClickAction.isVisible(row);
     const hasTableActions = tableActions !== undefined && tableActions.length > 0;
-    const isEmpty = rows.length === 0;
+    const isEmpty = rows.length === 0 && (serverGroups?.groups.length ?? 0) === 0;
     const expansionIdPrefix = useId();
-    const isRowExpandable = renderExpandedRow !== undefined && onToggleRowExpanded !== undefined;
     const rowTestId = (row) => getRowTestId?.(row) ?? `row-${row.id}`;
+    const isRowExpandable = renderExpandedRow !== undefined && onToggleRowExpanded !== undefined;
+    const fillsHeight = scrollBody === true;
+    const selection = useBulkSelection({
+        bulk,
+        rows,
+        titleField: schemaColumns[0]?.field,
+        rowTestId,
+        flush: fillsHeight,
+    });
+    const { headerRowRef, measured } = useMeasuredColumnWidths(isPinningActive(view, isNarrow) || isResizingActive(view, isNarrow));
+    const pins = useColumnPins({
+        columns: viewColumns,
+        view,
+        isNarrow,
+        measured,
+        hasActionsColumn: hasTableActions,
+        hasExpandColumn: isRowExpandable,
+        hasSelectColumn: selection.active,
+        fillsHeight,
+    });
+    const columns = pins.columns;
+    const sizing = useColumnSizing({
+        columns,
+        view,
+        isNarrow,
+        measured,
+        hasExpandColumn: isRowExpandable,
+        hasSelectColumn: selection.active,
+    });
+    const fullColSpan = columns.length + [isRowExpandable, hasTableActions, selection.active].filter(Boolean).length;
     const expansionDomId = (row) => `${expansionIdPrefix}-${row.id}`;
     // The expand toggle of a row, shared by table and card layout. Named after
     // the first data column, the one a user recognizes the row by.
@@ -111,75 +116,59 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
         }
         return (_jsx(TableRow, { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colSpan, className: EXPANSION_CELL_CLASS, children: _jsx("div", { className: EXPANSION_CONTENT_CLASS, children: content }) }) }));
     }
-    const fillsHeight = scrollBody === true;
     const TableRoot = fillsHeight ? FlushTable : Table;
     const emptyBlock = (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-empty` : "render-list-empty", className: cn("flex flex-col items-center justify-center p-12 text-sm text-muted-foreground gap-3", chromeless !== true && !fillsHeight && "rounded-md border border-dashed"), children: emptyState ?? _jsx("span", { children: tableTranslate?.("kumiko.list.no-entries") ?? "No entries." }) }));
-    const tableItems = buildTableItems(rows, rowGrouping, toggledGroups);
-    function renderGroupToggle(item) {
-        return (_jsxs("button", { type: "button", "aria-expanded": !item.collapsed, "data-testid": `row-group-${item.key}-toggle`, onClick: () => setToggledGroups((prev) => {
-                const next = new Set(prev);
-                if (!next.delete(item.key))
-                    next.add(item.key);
-                return next;
-            }), className: "flex w-full items-center gap-2 px-4 py-2 text-left text-xs font-medium text-foreground-secondary", children: [item.collapsed ? (_jsx(ChevronRight, { className: "size-3.5" })) : (_jsx(ChevronDown, { className: "size-3.5" })), item.label] }));
+    const tableItems = buildDataTableItems(rows, serverGroups);
+    const keyboardRow = useRowKeyboardNavigation({
+        view,
+        isNarrow,
+        rowIds: tableItems.flatMap((item) => (item.kind === "row" ? [item.row.id] : [])),
+        onSelect: selection.onKeyboardSelect,
+    });
+    const schemaColumnByField = new Map(schemaColumns.map((col) => [col.field, col]));
+    const columnOf = (field) => schemaColumnByField.get(field);
+    function renderBand(item) {
+        return _jsx(GroupBand, { item: item, columnOf: columnOf });
     }
     function tableInner() {
         if (isEmpty)
             return emptyBlock;
-        return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, children: [_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [isRowExpandable && (_jsx(TableHead, { "data-testid": "column-expand", className: EXPAND_TOGGLE_CELL_CLASS })), columns.map((col) => (_jsx(SortableHeader, { field: col.field, label: col.label, sortable: col.sortable === true, highlighted: col.highlighted === true, numeric: NUMERIC_COLUMN_TYPES.has(col.type), fitContent: col.fileDisplay !== undefined, ...(sort !== undefined && sort !== null && { sort }), ...(onSortChange !== undefined && { onSortChange }) }, col.field))), hasTableActions && (_jsx(TableHead, { "data-testid": "column-actions", 
-                                    // From md: sticky right-0 + bg-muted (= header tone) so the
-                                    // action column stays at the right edge during horizontal
-                                    // scroll on wider screens. Below md, actions scroll in
-                                    // normal flow — sticky there would pin the column over the
-                                    // preceding data column instead of the (already narrow)
-                                    // page edge. No border-l: a permanent divider looks heavy;
-                                    // the sticky bg already sets the column apart during scroll.
-                                    className: "w-px text-right text-muted-foreground md:sticky md:right-0 md:z-10 md:bg-muted", "aria-label": tableTranslate?.("kumiko.list.actions") ?? "Actions" }))] }) }), _jsx(TableBody, { children: tableItems.map((item) => {
-                            if (item.kind === "group") {
-                                return (_jsx(TableRow, { "data-testid": `row-group-${item.key}`, children: _jsx(TableCell, { colSpan: columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0), className: "bg-muted/40 p-0", children: renderGroupToggle(item) }) }, `group-${item.key}`));
+        const expandHeaderPin = pins.headerCell(EXPAND_COLUMN_KEY);
+        const expandBodyPin = pins.bodyCell(EXPAND_COLUMN_KEY);
+        return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, ...(sizing !== undefined && { style: sizing.tableStyle }), children: [sizing !== undefined && (_jsx(ColumnWidthGroup, { fields: columns.map((col) => col.field), sizing: sizing, hasExpandColumn: isRowExpandable, hasSelectColumn: selection.active, hasActionsColumn: hasTableActions })), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: headerRowRef, className: "hover:bg-transparent", children: [selection.headerCell(pins.headerCell(SELECT_COLUMN_KEY)), isRowExpandable && (_jsx(TableHead, { "data-testid": "column-expand", className: cn(EXPAND_TOGGLE_CELL_CLASS, expandHeaderPin.className), style: expandHeaderPin.style })), columns.map((col) => {
+                                    const headerPin = pins.headerCell(col.field);
+                                    return (_jsx(SortableHeader, { field: col.field, label: col.label, sortable: col.sortable === true, highlighted: col.highlighted === true, numeric: NUMERIC_COLUMN_TYPES.has(col.type), fitContent: col.fileDisplay !== undefined, className: cn(density.header, headerPin.className), style: headerPin.style, columnField: headerPin.columnField, trailing: sizing && (_jsx(ColumnResizeHandle, { field: col.field, label: col.label, sizing: sizing })), ...(sort !== undefined && sort !== null && { sort }), ...(onSortChange !== undefined && { onSortChange }) }, col.field));
+                                }), hasTableActions && (_jsx(ActionsHeaderCell, { label: tableTranslate?.("kumiko.list.actions") ?? "Actions", style: pins.actionsHeaderStyle, absorbsLeftover: sizing !== undefined }))] }) }), _jsx(TableBody, { children: tableItems.map((item) => {
+                            if (item.kind !== "row") {
+                                return (_jsx(TableRow, { "data-testid": bandTestId(item), children: _jsx(TableCell, { colSpan: fullColSpan, className: bandClassName(item), children: renderBand(item) }) }, bandReactKey(item)));
                             }
                             const row = item.row;
                             const opensOnClick = rowIsLink && !rowClickIsHidden(row);
-                            return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), onClick: opensOnClick ? () => onRowClick(row) : undefined, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", fillsHeight && "h-10 border-border-row hover:bg-muted"), children: [isRowExpandable && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: EXPAND_TOGGLE_CELL_CLASS, children: renderExpandToggle(row) })), columns.map((col, colIndex) => (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, 
-                                                // Text wraps instead of truncating: nowrap cells keep their
-                                                // full width, so a wide table scrolled sideways and its
-                                                // last column slid under the sticky actions column with
-                                                // nothing visibly cut off. max-w-xs bounds a single column;
-                                                // badges and dates stay nowrap by their own classes.
-                                                className: cn(col.fileDisplay === undefined
-                                                    ? "max-w-xs whitespace-normal break-words"
-                                                    : FIT_CONTENT_CELL_CLASS, colIndex === 0
-                                                    ? "font-medium text-foreground"
-                                                    : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40"), title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: colIndex === 0 && opensOnClick && onCellChange === undefined, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && {
-                                                            optionLabels: col.optionLabels,
-                                                        }), ...(col.optionTones !== undefined && { optionTones: col.optionTones }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay }), ...(onCellChange !== undefined && {
-                                                            onChange: (value) => onCellChange(row.id, col.field, value),
-                                                        }), ...cellLinkProp(col, row, !(colIndex === 0 && opensOnClick && onCellChange === undefined)) }) }) }, col.field))), hasTableActions && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, 
-                                                // From md: sticky-right so the actions stay visible on the
-                                                // right edge during horizontal scroll. Below md, actions
-                                                // scroll with the row like any other cell — sticky there
-                                                // would hide the neighboring data column on narrow
-                                                // viewports. bg-background sets the column apart during
-                                                // scroll — no border-l (divider too heavy).
-                                                className: cn("whitespace-nowrap text-right md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card"), 
-                                                // Action-cell events must not trigger the row click/activation
-                                                // (typically "Open Detail" — the user wanted the action,
-                                                // not navigation). We stopPropagation for mouse and
-                                                // keyboard so a11y stays consistent.
-                                                onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }), renderExpansion(row, "row", columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0))] }, row.id));
-                        }) })] }) }));
+                            const keyboard = keyboardRow(row.id, opensOnClick ? () => onRowClick(row) : undefined);
+                            return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), onClick: opensOnClick ? () => onRowClick(row) : undefined, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", fillsHeight && "h-10 border-border-row hover:bg-muted", density.row, keyboard.className), ...keyboard.props, children: [selection.bodyCell(row, pins.bodyCell(SELECT_COLUMN_KEY)), isRowExpandable && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: cn(EXPAND_TOGGLE_CELL_CLASS, expandBodyPin.className), style: expandBodyPin.style, children: renderExpandToggle(row) })), columns.map((col, colIndex) => {
+                                                const bodyPin = pins.bodyCell(col.field);
+                                                return (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, 
+                                                    // Text wraps instead of truncating: nowrap cells keep their
+                                                    // full width, so a wide table scrolled sideways and its
+                                                    // last column slid under the sticky actions column with
+                                                    // nothing visibly cut off. max-w-xs bounds a single column;
+                                                    // badges and dates stay nowrap by their own classes.
+                                                    className: cn(col.fileDisplay === undefined
+                                                        ? cn(sizing ? "overflow-hidden" : "max-w-xs", "whitespace-normal break-words")
+                                                        : FIT_CONTENT_CELL_CLASS, colIndex === 0
+                                                        ? "font-medium text-foreground"
+                                                        : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40", density.cell, bodyPin.className), style: bodyPin.style, title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: colIndex === 0 && opensOnClick && onCellChange === undefined, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && {
+                                                                optionLabels: col.optionLabels,
+                                                            }), ...(col.optionTones !== undefined && {
+                                                                optionTones: col.optionTones,
+                                                            }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && {
+                                                                fileDisplay: col.fileDisplay,
+                                                            }), ...(onCellChange !== undefined && {
+                                                                onChange: (value) => onCellChange(row.id, col.field, value),
+                                                            }), ...cellLinkProp(col, row, !(colIndex === 0 && opensOnClick && onCellChange === undefined)) }) }) }, col.field));
+                                            }), hasTableActions && (_jsx(ActionsBodyCell, { testId: getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, fillsHeight: fillsHeight, measureContent: sizing !== undefined, children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }), renderExpansion(row, "row", fullColSpan)] }, row.id));
+                        }) }), totals !== undefined && (_jsx(TotalsFooterRow, { totals: totals, columns: columns, cellPin: pins.bodyCell, leadingCells: { select: selection.active, expand: isRowExpandable }, actionsCell: hasTableActions ? { fillsHeight } : undefined, cellClassName: density.cell }))] }) }));
     }
-    // No column headers below the breakpoint, so the click-to-sort affordance
-    // on SortableHeader has nothing to attach to. A single native <select> is
-    // the whole fix — no custom widget, no menu — fed straight from the
-    // columns marked sortable in the ViewModel. Options carry the resolved
-    // {field, dir} directly so onChange can look the pick up by value instead
-    // of parsing/casting the option string back apart.
-    const sortableColumns = columns.filter((col) => col.sortable);
-    const sortOptions = sortableColumns.flatMap((col) => [
-        { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
-        { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
-    ]);
     const { image: cardImageColumn, title: cardTitleColumn, status: cardStatusColumn, meta: cardMetaColumns, } = cardColumnRoles(columns);
     function cardCell(row, col) {
         // A bare check mark in the subtitle line says nothing without its column.
@@ -198,7 +187,7 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
         const body = (_jsxs(_Fragment, { children: [cardImageColumn?.fileDisplay !== undefined && (_jsx("div", { "data-testid": `card-image-${row.id}`, className: "shrink-0", children: _jsx(CardLeadingImage, { value: row.values[cardImageColumn.field], display: cardImageColumn.fileDisplay }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": getCellTestId?.(row, cardTitleColumn.field) ??
                                         `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 break-words text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
                                         `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 overflow-x-clip", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex min-w-0 flex-wrap items-center text-[13px] leading-5 tabular-nums text-foreground-secondary", children: metaColumns.map((col) => (_jsxs("div", { className: "flex h-5 min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("div", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate leading-5", onPointerEnter: showFullTextOnHover, children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), opensOnClick && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
-        const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4"), ...(opensOnClick && { onClick: () => onRowClick(row) }), children: [renderExpandToggle(row), opensOnClick ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
+        const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable || selection.active ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4", density.card), ...(opensOnClick && { onClick: () => onRowClick(row) }), children: [selection.cardCheckbox(row), renderExpandToggle(row), opensOnClick ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
                         if (e.key !== "Enter")
                             return;
                         e.preventDefault();
@@ -214,47 +203,37 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
     function cardsInner() {
         if (isEmpty)
             return emptyBlock;
-        const sortLabel = sort !== undefined && sort !== null
-            ? (tableTranslate?.("kumiko.list.sort.by", {
-                column: columns.find((col) => col.field === sort.field)?.label ?? sort.field,
-            }) ?? `Sorted by ${sort.field}`)
-            : (tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
-        const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
-        // URL state can carry a sort on a column that is not sortable; without an
-        // option for it the select would claim "Unsorted" while the list is sorted.
-        const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
-        const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
-        return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [onSortChange !== undefined && sortableColumns.length > 0 && (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && (_jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" })), _jsxs("select", { "aria-label": tableTranslate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
-                                    const raw = e.target.value;
-                                    if (raw === "") {
-                                        onSortChange(null);
-                                        return;
-                                    }
-                                    const picked = sortOptions.find((o) => o.value === raw);
-                                    if (picked === undefined)
-                                        return;
-                                    onSortChange({ field: picked.field, dir: picked.dir });
-                                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] })), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "group" ? (_jsx("li", { "data-testid": `row-group-${item.key}`, className: "border-b border-border-row bg-muted/40", children: renderGroupToggle(item) }, `group-${item.key}`)) : (renderCard(item.row))) })] }) }));
+        return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [_jsx(CardSortSelect, { columns: columns, sort: sort, onSortChange: onSortChange, testId: testId }), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "row" ? (renderCard(item.row)) : (_jsx("li", { "data-testid": bandTestId(item), className: cn("border-b border-border-row", bandClassName(item)), children: renderBand(item) }, bandReactKey(item)))) }), totals !== undefined && _jsx(TotalsCard, { totals: totals, columnOf: columnOf })] }) }));
     }
     const tableContent = isNarrow ? cardsInner() : tableInner();
     // The pager is ALWAYS rendered below the table (even with rows=[]) so the
     // user can page back on a filter hit of zero without losing the list.
     // Except total === 0: then there is nothing to paginate. Incompatible with
     // infinite scroll: the caller sets either pager OR onReachEnd.
-    const pagerElement = pager !== undefined && pager.total > 0 ? (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: fillsHeight })) : undefined;
-    const sentinelElement = pagerElement === undefined && onReachEnd !== undefined ? (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: loadingMore === true, hasMore: hasMore !== false, rowsCount: rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" })) : undefined;
+    const pagerElement = pager !== undefined && pager.total > 0 && serverGroups === undefined ? (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: fillsHeight })) : undefined;
+    const sentinelElement = pagerElement === undefined && onReachEnd !== undefined && serverGroups === undefined ? (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: loadingMore === true, hasMore: hasMore !== false, rowsCount: rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" })) : undefined;
     // With scrollBody the footer (pager, else the entry count) sits OUTSIDE the
     // scroll surface so it stays put at any row count; the infinite sentinel
     // stays INSIDE, or it would never intersect the scrollport.
-    const content = fillsHeight ? (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] })) : (_jsxs(_Fragment, { children: [tableContent, pagerElement, sentinelElement] }));
-    const hasFacets = filterFacets !== undefined && filterFacets.length > 0 && onFilterChange !== undefined;
-    const hasDateRangeFacets = dateRangeFacets !== undefined && dateRangeFacets.length > 0 && onDateRangeChange !== undefined;
-    const hasActiveFilters = filterValues !== undefined && Object.values(filterValues).some((v) => v.length > 0);
-    const facetCluster = hasFacets || hasDateRangeFacets ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [hasFacets &&
-                filterFacets.map((facet) => (_jsx(FacetFilter, { facet: facet, selected: filterValues?.[facet.field] ?? [], onChange: onFilterChange, dense: fillsHeight }, facet.field))), hasDateRangeFacets &&
-                dateRangeFacets.map((facet) => (_jsx(DateRangeFacetFilter, { facet: facet, onChange: onDateRangeChange }, facet.field))), hasActiveFilters && onFilterReset !== undefined && (_jsxs(UiButton, { variant: "ghost", size: "sm", className: "h-9 px-2", onClick: onFilterReset, "data-testid": "facet-reset", children: [tableTranslate?.("kumiko.list.filter.reset") ?? "Reset", _jsx(X, {})] }))] })) : undefined;
+    const content = fillsHeight ? (_jsxs(_Fragment, { children: [selection.bar, _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: serverGroups?.totalCount ?? rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] })) : (_jsxs(_Fragment, { children: [selection.bar, tableContent, pagerElement, sentinelElement] }));
+    const facetCluster = buildFacetCluster({
+        filterFacets,
+        filterValues,
+        onFilterChange,
+        onFilterReset,
+        dateRangeFacets,
+        onDateRangeChange,
+        rangeFacets,
+        onRangeChange,
+        resetAll,
+        notice,
+        dense: fillsHeight,
+    });
+    const columnLabels = new Map(schemaColumns.map((col) => [col.field, col.label]));
     const collapsesFacetsBehindButton = isNarrow && fillsHeight && facetCluster !== undefined;
-    const hasToolbar = toolbarStart !== undefined || toolbarEnd !== undefined || facetCluster !== undefined;
+    const hasToolbar = toolbarStart !== undefined ||
+        facetCluster !== undefined ||
+        toolbarEndHasContent(view, exportList, toolbarEnd);
     // dashboard-01 pattern: the toolbar (search + facets + "+ New") sits ABOVE
     // the table in the same padding block; no separate bg bar, no screen title
     // (that lives in the shell's breadcrumb).
@@ -268,11 +247,11 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
                 ? screenPaddingClassName
                 : screenPadding === false
                     ? undefined
-                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", fillsHeight
+                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", UNIFORM_BAR_CONTROLS_CLASSES, fillsHeight
                     ? isNarrow
                         ? "shrink-0 gap-2 p-3"
                         : "min-h-13 shrink-0 gap-2 px-6 py-2 md:py-0"
                     : "gap-3"), children: [toolbarStart !== undefined && (_jsxs("div", { className: cn(fillsHeight
-                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11 md:[&_input]:h-8"
-                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6")), children: toolbarDescription })), content] }));
+                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11"
+                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), _jsx(ToolbarEndCluster, { view: view, columnLabels: columnLabels, exportList: exportList, toolbarEnd: toolbarEnd })] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6"), fillsHeight && !hasToolbar && "pt-4"), children: toolbarDescription })), content] }));
 }

package/dist/web/primitives/facet-filter.js

@@ -26,7 +26,7 @@ export function FacetFilter({ facet, selected, onChange, dense = false, }) {
     if (facet.chips !== undefined) {
         return _jsx(FacetChips, { facet: facet, selected: selected, onChange: onChange });
     }
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "h-8 border-border-strong px-2.5 max-md:h-11"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "border-border-strong px-2.5"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
 }
 // Time-range filter: two native <input type="date"> instead of a
 // dropdown — the browser supplies the calendar, the locale and the keyboard

package/dist/web/primitives/file-thumbnail.d.ts

@@ -12,6 +12,9 @@ type FileMeta = {
     readonly fileName: string;
     readonly mimeType: string | undefined;
 };
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export declare function clearFileMetaCache(): void;
 export declare function useFileMeta(fileId: string): FileMeta | null;
 export declare function FileNameLink({ fileId, fallbackLabel, className, }: {
     readonly fileId: string;

package/dist/web/primitives/file-thumbnail.js

@@ -46,6 +46,11 @@ const META_BATCH_SIZE = 100;
 const META_CACHE_LIMIT = 500;
 const metaCache = new Map();
 let pendingMetaIds = new Map();
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export function clearFileMetaCache() {
+    metaCache.clear();
+}
 function parseBatchMeta(json) {
     const metaById = new Map();
     if (typeof json !== "object" || json === null || !("files" in json))

package/dist/web/primitives/file-value-list.d.ts

@@ -1,3 +1,3 @@
 import { type ReactNode } from "react";
 import { type FileValueListProps } from "../../index.ts";
-export declare function FileValueList({ fileIds, testId }: FileValueListProps): ReactNode;
+export declare function FileValueList({ fileIds, previewOpenByDefault, testId, }: FileValueListProps): ReactNode;

package/dist/web/primitives/file-value-list.js

@@ -6,17 +6,17 @@ import { Button } from "../ui/button.js";
 import { PdfPreview } from "../widgets/pdf-preview.js";
 import { fileOriginalUrl, useFileMeta } from "./file-thumbnail.js";
 const PDF_MIME_TYPE = "application/pdf";
-function FileValueRow({ fileId, testId, }) {
+function FileValueRow({ fileId, previewOpenInitially, testId, }) {
     const t = useTranslation();
     const meta = useFileMeta(fileId);
-    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewOpen, setPreviewOpen] = useState(previewOpenInitially);
     if (!isUuid(fileId))
         return _jsx("span", { className: "text-sm", children: fileId });
     const downloadUrl = fileOriginalUrl(fileId);
-    return (_jsxs("li", { className: "flex flex-col gap-2", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: meta?.fileName ?? fileId.slice(0, 8) }), _jsx("a", { href: downloadUrl, download: meta?.fileName ?? "", className: "text-primary text-sm underline underline-offset-2", ...(testId !== undefined && { "data-testid": `${testId}-download` }), children: t("kumiko.field.file-list.download") }), meta?.mimeType === PDF_MIME_TYPE && (_jsx(Button, { type: "button", variant: "link", size: "sm", "aria-expanded": previewOpen, onClick: () => setPreviewOpen((open) => !open), ...(testId !== undefined && { "data-testid": `${testId}-preview-toggle` }), children: t(previewOpen ? "kumiko.field.file-list.hidePreview" : "kumiko.field.file-list.preview") }))] }), previewOpen && (_jsx(PdfPreview, { source: { url: downloadUrl }, testId: `file-preview-${fileId}` }))] }));
+    return (_jsxs("li", { className: "flex flex-col gap-2", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: meta?.fileName ?? fileId.slice(0, 8) }), _jsx("a", { href: downloadUrl, download: meta?.fileName ?? "", className: "text-primary text-sm underline underline-offset-2", ...(testId !== undefined && { "data-testid": `${testId}-download` }), children: t("kumiko.field.file-list.download") }), meta?.mimeType === PDF_MIME_TYPE && (_jsx(Button, { type: "button", variant: "link", size: "sm", "aria-expanded": previewOpen, onClick: () => setPreviewOpen((open) => !open), ...(testId !== undefined && { "data-testid": `${testId}-preview-toggle` }), children: t(previewOpen ? "kumiko.field.file-list.hidePreview" : "kumiko.field.file-list.preview") }))] }), previewOpen && meta?.mimeType === PDF_MIME_TYPE && (_jsx(PdfPreview, { source: { url: downloadUrl }, testId: `file-preview-${fileId}` }))] }));
 }
-export function FileValueList({ fileIds, testId }) {
+export function FileValueList({ fileIds, previewOpenByDefault = false, testId, }) {
     if (fileIds.length === 0)
         return null;
-    return (_jsx("ul", { className: "m-0 flex list-none flex-col gap-3 p-0", "data-testid": testId, children: fileIds.map((fileId) => (_jsx(FileValueRow, { fileId: fileId, ...(testId !== undefined && { testId: `${testId}-${fileId}` }) }, fileId))) }));
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col gap-3 p-0", "data-testid": testId, children: fileIds.map((fileId, index) => (_jsx(FileValueRow, { fileId: fileId, previewOpenInitially: previewOpenByDefault && index === 0, ...(testId !== undefined && { testId: `${testId}-${fileId}` }) }, fileId))) }));
 }

package/dist/web/primitives/input.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Input as UiInput } from "../ui/input.js";
 import { Switch } from "../ui/switch.js";
 import { Textarea } from "../ui/textarea.js";
+import { CodeInput } from "./code-input.js";
 import { ComboboxInput } from "./combobox.js";
 import { DateInput } from "./date-input.js";
 import { FileUploadInput } from "./file-upload.js";
@@ -15,6 +16,7 @@ import { NumberInput } from "./number-input.js";
 import { hasDescriptionOrGroup } from "./option-groups.js";
 import { TimestampInput } from "./timestamp-input.js";
 import { TzInput } from "./tz-input.js";
+import { useFocusOnMount } from "./use-focus-on-mount.js";
 import "../react-css-custom-properties.js";
 import { FieldDescriptionContext, FieldLayoutContext } from "./contexts.js";
 import { defaultSelectPresentation, FIELD_ICON_CLASS, fieldIconFor, RadioListSelect, SegmentedSelect, textareaMinHeight, unitSuffixId, withFieldIcon, withInlineDisabledHint, withInputAddons, withoutSegmentedSelectPlaceholder, withTrailingAction, } from "./field.js";
@@ -23,6 +25,7 @@ export function DefaultInput(props) {
     // themselves, no manual border-destructive needed anymore.
     const booleanLayout = useContext(FieldLayoutContext);
     const describedBy = useContext(FieldDescriptionContext);
+    const textInputRef = useFocusOnMount(props.kind === "text" ? props.autoFocus : undefined);
     const common = {
         id: props.id,
         name: props.name,
@@ -33,7 +36,9 @@ export function DefaultInput(props) {
     };
     switch (props.kind) {
         case "text":
-            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+        case "code":
+            return _jsx(CodeInput, { ...props });
         case "email":
             return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
         case "month":

package/dist/web/primitives/layout-elements.js

@@ -61,7 +61,7 @@ const FIELD_CELL_WIDTH_CLASS = {
     money: "w-40 shrink-0 [&_label]:whitespace-nowrap",
     date: "w-full sm:w-[200px]",
     timestamp: "w-full sm:w-[328px]",
-    select: "w-full sm:w-auto sm:min-w-[200px] sm:has-[[data-radio-list]]:w-full",
+    select: "w-full sm:w-60 sm:has-[[data-radio-list]]:w-full",
     full: "w-full",
     // self-start: the label shares the top line with neighbouring labels. The
     // switch (1.15rem) gets (h-9 input − switch) / 2 margin to sit on the input line.
@@ -75,7 +75,8 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
     if (list === true) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
     }
-    if (flow === true) {
+    const declaresColumns = typeof columns === "number" && columns >= 2;
+    if (flow === true && (insideDrawerBody || !declaresColumns)) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("flex gap-4", insideDrawerBody
                 ? "flex-col items-start"
                 : // items-end aligns inputs when labels wrap to different heights; a
@@ -116,12 +117,13 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
             overflowY: "auto",
         }),
     };
-    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
+    return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", flow === true &&
+            "items-end has-[[data-appendix-below]]:items-start has-[[role=alert]]:items-start"), style: style, children: children }));
 }
 export function DefaultGridCell({ span, width, children }) {
     const insideDrawerBody = useContext(DrawerBodyContext);
     if (width !== undefined) {
-        return (_jsx("div", { className: cn("min-w-0 max-w-full", insideDrawerBody
+        return (_jsx("div", { className: cn("min-w-0 max-w-full", width === "full" && "sm:[grid-column:1/-1]", insideDrawerBody
                 ? (DRAWER_FIELD_CELL_WIDTH_CLASS[width] ?? FIELD_CELL_WIDTH_CLASS[width])
                 : FIELD_CELL_WIDTH_CLASS[width]), children: children }));
     }

package/dist/web/primitives/number-range-facet.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { DataTableRangeBound, DataTableRangeFacet } from "../../data-table-aggregate-types.ts";
+/** "From/to" bounds of a number, decimal, money or bigInt field. */
+export declare function NumberRangeFacetFilter({ facet, onChange, }: {
+    readonly facet: DataTableRangeFacet;
+    readonly onChange: (field: string, bound: DataTableRangeBound, value: string) => void;
+}): ReactNode;

package/dist/web/primitives/number-range-facet.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useOptionalTranslation } from "../../index.js";
+const INPUT_CLASS = "h-9 w-24 rounded-md border border-input bg-transparent px-2 text-sm tabular-nums shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 max-md:min-h-11";
+// A keystroke must not refetch the list, so a bound commits on blur or Enter;
+// a value changed from outside (reset, back navigation) replaces the draft.
+function RangeBoundInput({ facet, bound, label, onCommit, }) {
+    const committed = facet[bound];
+    const [draft, setDraft] = useState(committed);
+    const [seen, setSeen] = useState(committed);
+    if (seen !== committed) {
+        setSeen(committed);
+        setDraft(committed);
+    }
+    const commit = () => {
+        const trimmed = draft.trim();
+        if (trimmed !== "" && !Number.isFinite(Number(trimmed))) {
+            setDraft(committed);
+            return;
+        }
+        if (trimmed !== committed)
+            onCommit(facet.field, bound, trimmed);
+    };
+    return (_jsx("input", { type: "number", inputMode: "decimal", step: "any", className: INPUT_CLASS, value: draft, placeholder: label, "aria-label": `${facet.label} ${label}`, "data-testid": `facet-range-${facet.field}-${bound}`, onChange: (event) => setDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === "Enter")
+                commit();
+        } }));
+}
+/** "From/to" bounds of a number, decimal, money or bigInt field. */
+export function NumberRangeFacetFilter({ facet, onChange, }) {
+    const translate = useOptionalTranslation();
+    return (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `facet-range-${facet.field}`, children: [_jsx("span", { className: "text-sm text-muted-foreground", children: facet.label }), _jsx(RangeBoundInput, { facet: facet, bound: "min", label: translate?.("kumiko.list.range.min") ?? "From", onCommit: onChange }), _jsx("span", { className: "text-sm text-muted-foreground", children: "\u2013" }), _jsx(RangeBoundInput, { facet: facet, bound: "max", label: translate?.("kumiko.list.range.max") ?? "To", onCommit: onChange }), facet.unit !== undefined && (_jsx("span", { className: "text-sm text-muted-foreground", children: facet.unit }))] }));
+}