@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import { NUMERIC_COLUMN_TYPES } from "../data-table-cell.js";
+import { ActionsHeaderCell } from "./actions-column.js";
+import { ColumnResizeHandle } from "./column-resize-handle.js";
+import { SortableHeader } from "./sortable-header.js";
+import { EXPAND_TOGGLE_CELL_CLASS } from "./table-chrome.js";
+import { EXPAND_COLUMN_KEY, SELECT_COLUMN_KEY } from "./use-column-pins.js";
+function renderColumnHeader(m, col) {
+    const { sizing, sort, onSortChange } = m;
+    const headerPin = m.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(m.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));
+}
+function renderExpandHeaderCell(m) {
+    const expandHeaderPin = m.pins.headerCell(EXPAND_COLUMN_KEY);
+    return (_jsx(TableHead, { "data-testid": "column-expand", className: cn(EXPAND_TOGGLE_CELL_CLASS, expandHeaderPin.className), style: expandHeaderPin.style }));
+}
+export function renderTableHeader(m) {
+    return (_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: m.headerRowRef, className: "hover:bg-transparent", children: [m.selection.headerCell(m.pins.headerCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandHeaderCell(m), m.columns.map((col) => renderColumnHeader(m, col)), m.hasTableActions && (_jsx(ActionsHeaderCell, { label: m.tableTranslate?.("kumiko.list.actions") ?? "Actions", style: m.pins.actionsHeaderStyle, absorbsLeftover: m.sizing !== undefined }))] }) }));
+}

package/dist/web/primitives/data-table/table-view.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderTableView(m: DataTableModel): ReactNode;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Table } from "../../ui/table.js";
+import { ColumnWidthGroup } from "./column-resize-handle.js";
+import { renderTableBody } from "./table-body.js";
+import { FILL_TABLE_CLASS, FlushTable } from "./table-chrome.js";
+import { renderTableHeader } from "./table-header-row.js";
+import { TotalsFooterRow } from "./totals-footer.js";
+function renderColumnWidths(m) {
+    const { sizing } = m;
+    if (sizing === undefined)
+        return null;
+    return (_jsx(ColumnWidthGroup, { fields: m.columns.map((col) => col.field), sizing: sizing, hasExpandColumn: m.expansion !== undefined, hasSelectColumn: m.selection.active, hasActionsColumn: m.hasTableActions }));
+}
+function renderTotalsRow(m) {
+    const { totals } = m;
+    if (totals === undefined)
+        return null;
+    return (_jsx(TotalsFooterRow, { totals: totals, columns: m.columns, cellPin: m.pins.bodyCell, leadingCells: { select: m.selection.active, expand: m.expansion !== undefined }, actionsCell: m.hasTableActions ? { fillsHeight: m.fillsHeight } : undefined, cellClassName: m.density.cell }));
+}
+export function renderTableView(m) {
+    const { fillsHeight, chromeless, sizing, testId } = m;
+    const TableRoot = fillsHeight ? FlushTable : Table;
+    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: [renderColumnWidths(m), renderTableHeader(m), renderTableBody(m), renderTotalsRow(m)] }) }));
+}

package/dist/web/primitives/data-table/toolbar.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function buildModelFacetCluster(m: DataTableModel): ReactNode;
+export declare function hasToolbarContent(m: DataTableModel, facetCluster: ReactNode): boolean;
+export declare function renderToolbar(m: DataTableModel, facetCluster: ReactNode): ReactNode;
+export declare function renderToolbarDescription(m: DataTableModel, hasToolbar: boolean): ReactNode;

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

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, SlidersHorizontal } from "lucide-react";
+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 { buildFacetCluster } from "./facet-cluster.js";
+import { ToolbarEndCluster, toolbarEndHasContent } from "./toolbar-end-cluster.js";
+export function buildModelFacetCluster(m) {
+    return buildFacetCluster({
+        filterFacets: m.filterFacets,
+        filterValues: m.filterValues,
+        onFilterChange: m.onFilterChange,
+        onFilterReset: m.onFilterReset,
+        dateRangeFacets: m.dateRangeFacets,
+        onDateRangeChange: m.onDateRangeChange,
+        rangeFacets: m.rangeFacets,
+        onRangeChange: m.onRangeChange,
+        resetAll: m.resetAll,
+        notice: m.notice,
+        dense: m.fillsHeight,
+    });
+}
+export function hasToolbarContent(m, facetCluster) {
+    return (m.toolbarStart !== undefined ||
+        facetCluster !== undefined ||
+        toolbarEndHasContent(m.view, m.exportList, m.toolbarEnd));
+}
+function toolbarClassName({ fillsHeight, isNarrow }) {
+    if (!fillsHeight)
+        return cn("flex flex-wrap items-center", UNIFORM_BAR_CONTROLS_CLASSES, "gap-3");
+    return cn("flex flex-wrap items-center", UNIFORM_BAR_CONTROLS_CLASSES, isNarrow ? "shrink-0 gap-2 p-3" : "min-h-13 shrink-0 gap-2 px-6 py-2 md:py-0");
+}
+// min-w-48: without a floor, flex shrinks the search instead of wrapping the facet cluster onto its own line.
+function renderToolbarStart(m, toolbarStart) {
+    return (_jsxs("div", { className: cn(m.fillsHeight
+            ? "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: [m.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] }));
+}
+function renderFacetToggle(m, facetCluster) {
+    const { testId, facetsOpenNarrow, setFacetsOpenNarrow } = m;
+    return (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": m.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 })] }));
+}
+export function renderToolbar(m, facetCluster) {
+    const { testId, toolbarStart } = m;
+    const collapsesFacetsBehindButton = m.isNarrow && m.fillsHeight && facetCluster !== undefined;
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: toolbarClassName(m), children: [toolbarStart !== undefined && renderToolbarStart(m, toolbarStart), collapsesFacetsBehindButton ? renderFacetToggle(m, facetCluster) : facetCluster, _jsx(ToolbarEndCluster, { view: m.view, columnLabels: new Map(m.schemaColumns.map((col) => [col.field, col.label])), exportList: m.exportList, toolbarEnd: m.toolbarEnd })] }));
+}
+export function renderToolbarDescription(m, hasToolbar) {
+    const { testId, toolbarDescription, fillsHeight, isNarrow } = m;
+    if (toolbarDescription === undefined)
+        return null;
+    return (_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 }));
+}

package/dist/web/primitives/data-table/use-data-table-state.d.ts

@@ -0,0 +1,44 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { ListColumnViewModel, ListRowViewModel } from "../../../headless/index.ts";
+import { type DataTableProps, useOptionalLocale, useOptionalTranslation } from "../../../index.ts";
+import { densityClasses } from "./density.ts";
+import { buildDataTableItems } from "./group-band.tsx";
+import { useBulkSelection } from "./use-bulk-selection.tsx";
+import { type ColumnPins } from "./use-column-pins.ts";
+import { useColumnSizing } from "./use-column-sizing.ts";
+import { useMeasuredColumnWidths } from "./use-measured-column-widths.ts";
+import { useRowKeyboardNavigation } from "./use-row-keyboard-navigation.ts";
+type RowExpansion = {
+    readonly renderExpandedRow: NonNullable<DataTableProps["renderExpandedRow"]>;
+    readonly onToggleRowExpanded: NonNullable<DataTableProps["onToggleRowExpanded"]>;
+};
+export type DataTableModel = Omit<DataTableProps, "columns"> & {
+    readonly schemaColumns: readonly ListColumnViewModel[];
+    readonly columns: ColumnPins<ListColumnViewModel>["columns"];
+    readonly tableTranslate: ReturnType<typeof useOptionalTranslation>;
+    readonly tableLocale: ReturnType<typeof useOptionalLocale>;
+    readonly isNarrow: boolean;
+    readonly density: ReturnType<typeof densityClasses>;
+    readonly facetsOpenNarrow: boolean;
+    readonly setFacetsOpenNarrow: Dispatch<SetStateAction<boolean>>;
+    readonly menuActions: DataTableProps["rowActions"];
+    readonly tableActions: DataTableProps["rowActions"];
+    readonly rowClickLabel: string | undefined;
+    readonly rowOpener: (row: ListRowViewModel) => (() => void) | undefined;
+    readonly hasTableActions: boolean;
+    readonly isEmpty: boolean;
+    readonly rowTestId: (row: ListRowViewModel) => string;
+    readonly expansion: RowExpansion | undefined;
+    readonly fillsHeight: boolean;
+    readonly selection: ReturnType<typeof useBulkSelection>;
+    readonly headerRowRef: ReturnType<typeof useMeasuredColumnWidths>["headerRowRef"];
+    readonly pins: ColumnPins<ListColumnViewModel>;
+    readonly sizing: ReturnType<typeof useColumnSizing>;
+    readonly fullColSpan: number;
+    readonly expansionDomId: (row: ListRowViewModel) => string;
+    readonly tableItems: ReturnType<typeof buildDataTableItems>;
+    readonly keyboardRow: ReturnType<typeof useRowKeyboardNavigation>;
+    readonly columnOf: (field: string) => ListColumnViewModel | undefined;
+};
+export declare function useDataTableState(props: DataTableProps): DataTableModel;
+export {};

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

@@ -0,0 +1,123 @@
+import { useId, useState } from "react";
+import { useOptionalLocale, useOptionalTranslation } from "../../../index.js";
+import { useIsNarrowViewport } from "../use-narrow-viewport.js";
+import { isPinningActive, isResizingActive } from "./column-layout-mode.js";
+import { densityClasses } from "./density.js";
+import { buildDataTableItems } from "./group-band.js";
+import { useBulkSelection } from "./use-bulk-selection.js";
+import { useColumnPins } from "./use-column-pins.js";
+import { useColumnSizing } from "./use-column-sizing.js";
+import { useMeasuredColumnWidths } from "./use-measured-column-widths.js";
+import { useRowKeyboardNavigation } from "./use-row-keyboard-navigation.js";
+import { useViewColumns } from "./use-view-columns.js";
+function resolveRowActions({ rowActions, onRowClick, rowActionMode, onCellChange, }) {
+    // The row click already runs rowClick actions, so with a clickable row they
+    // must not reappear in the kebab (a list whose only action is the rowClick
+    // one gets no actions column at all).
+    const menuActions = rowActions !== undefined && onRowClick !== undefined
+        ? rowActions.filter((action) => action.rowClick !== true)
+        : rowActions;
+    // The table keeps every action in "inline" mode, and with editable cells the
+    // first cell is not a keyboard link (FirstCellLink is off), so the kebab is
+    // then the only keyboard route to the rowClick action.
+    const tableActions = rowActionMode === "inline" || onCellChange !== undefined ? rowActions : menuActions;
+    const rowClickAction = rowActions?.find((action) => action.rowClick === true);
+    const rowClickIsHidden = (row) => rowClickAction?.isVisible !== undefined && !rowClickAction.isVisible(row);
+    const rowOpener = (row) => onRowClick !== undefined && !rowClickIsHidden(row) ? () => onRowClick(row) : undefined;
+    return { menuActions, tableActions, rowClickLabel: rowClickAction?.label, rowOpener };
+}
+function resolveRowExpansion({ renderExpandedRow, onToggleRowExpanded, }) {
+    if (renderExpandedRow === undefined || onToggleRowExpanded === undefined)
+        return undefined;
+    return { renderExpandedRow, onToggleRowExpanded };
+}
+function isEmptyTable({ rows, serverGroups }) {
+    return rows.length === 0 && (serverGroups?.groups.length ?? 0) === 0;
+}
+export function useDataTableState(props) {
+    const { columns: schemaColumns, rows, view, scrollBody, serverGroups, bulk, getRowTestId, } = props;
+    // One locale/translate subscription per table — not per cell.
+    // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
+    const tableTranslate = useOptionalTranslation();
+    const tableLocale = useOptionalLocale();
+    // Below 768px a table scrolls its columns out of reach with no visible
+    // 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 { menuActions, tableActions, rowClickLabel, rowOpener } = resolveRowActions(props);
+    const hasTableActions = tableActions !== undefined && tableActions.length > 0;
+    const isEmpty = isEmptyTable(props);
+    const expansionIdPrefix = useId();
+    const rowTestId = (row) => getRowTestId?.(row) ?? `row-${row.id}`;
+    const expansion = resolveRowExpansion(props);
+    const isRowExpandable = expansion !== 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 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]));
+    return {
+        ...props,
+        schemaColumns,
+        columns,
+        tableTranslate,
+        tableLocale,
+        isNarrow,
+        density,
+        facetsOpenNarrow,
+        setFacetsOpenNarrow,
+        menuActions,
+        tableActions,
+        rowClickLabel,
+        rowOpener,
+        hasTableActions,
+        isEmpty,
+        rowTestId,
+        expansion,
+        fillsHeight,
+        selection,
+        headerRowRef,
+        pins,
+        sizing,
+        fullColSpan,
+        expansionDomId: (row) => `${expansionIdPrefix}-${row.id}`,
+        tableItems,
+        keyboardRow,
+        columnOf: (field) => schemaColumnByField.get(field),
+    };
+}

package/dist/web/primitives/data-table.d.ts

@@ -1,4 +1,3 @@
-import { type ReactNode } from "react";
-import { type DataTableProps } from "../../index.ts";
-import "../react-css-custom-properties.ts";
-export declare 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, }: DataTableProps): ReactNode;
+import type { ReactNode } from "react";
+import type { DataTableProps } from "../../index.ts";
+export declare function DefaultDataTable(props: DataTableProps): ReactNode;

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

@@ -1,257 +1,37 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
-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 { jsxs as _jsxs } from "react/jsx-runtime";
 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";
-import { CardLeadingImage } from "./file-thumbnail.js";
+import { renderTableContent } from "./data-table/table-content.js";
+import { buildModelFacetCluster, hasToolbarContent, renderToolbar, renderToolbarDescription, } from "./data-table/toolbar.js";
+import { useDataTableState } from "./data-table/use-data-table-state.js";
 import { screenPaddingClassName } from "./layout.js";
-import { useIsNarrowViewport } from "./use-narrow-viewport.js";
-import "../react-css-custom-properties.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";
-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();
-    const tableLocale = useOptionalLocale();
-    // Below 768px a table scrolls its columns out of reach with no visible
-    // 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);
-    // 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.
-    // The row click already runs rowClick actions, so with a clickable row they
-    // must not reappear in the kebab (a list whose only action is the rowClick
-    // one gets no actions column at all).
-    const rowIsLink = onRowClick !== undefined;
-    const menuActions = rowActions !== undefined && rowIsLink
-        ? rowActions.filter((action) => action.rowClick !== true)
-        : rowActions;
-    // The table keeps every action in "inline" mode, and with editable cells the
-    // first cell is not a keyboard link (FirstCellLink is off), so the kebab is
-    // then the only keyboard route to the rowClick action.
-    const tableActions = rowActionMode === "inline" || onCellChange !== undefined ? rowActions : menuActions;
-    const rowClickAction = rowActions?.find((action) => action.rowClick === true);
-    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 && (serverGroups?.groups.length ?? 0) === 0;
-    const expansionIdPrefix = useId();
-    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.
-    function renderExpandToggle(row) {
-        if (!isRowExpandable)
-            return null;
-        const expanded = expandedRowIds?.has(row.id) === true;
-        const firstColumn = columns[0];
-        const title = (firstColumn !== undefined ? cellTitle(row.values[firstColumn.field]) : undefined) ?? "";
-        const labelKey = expanded ? "kumiko.list.row.collapse" : "kumiko.list.row.expand";
-        return (_jsx(RowExpandToggle, { expanded: expanded, controlsId: expansionDomId(row), label: tableTranslate?.(labelKey, { title }) ?? `${expanded ? "Collapse" : "Expand"} ${title}`, onToggle: () => onToggleRowExpanded(row.id), testId: `${rowTestId(row)}-toggle` }));
-    }
-    function renderExpansion(row, as, colSpan) {
-        if (!isRowExpandable || expandedRowIds?.has(row.id) !== true)
-            return null;
-        const content = renderExpandedRow(row);
-        if (as === "item") {
-            return (_jsx("li", { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "border-b border-border-row bg-muted px-4 pt-1 pb-3.5", children: content }));
-        }
-        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 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 = 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;
-        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);
-                            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 }))] }) }));
-    }
-    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.
-        if (showsBareCheckMark(col.type, row.values[col.field], col.renderer))
-            return col.label;
-        return (_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, compactFile: true }), ...(onCellChange !== undefined && {
-                onChange: (value) => onCellChange(row.id, col.field, value),
-            }), ...cellLinkProp(col, row, !(rowIsLink && !rowClickIsHidden(row))) }));
-    }
-    function renderCard(row) {
-        const metaColumns = cardMetaColumns.filter((col) => !isEmptyCellValue(row.values[col.field]) &&
-            !isUnlabeledFalse(col.type, row.values[col.field], col.renderer));
-        const showStatus = cardStatusColumn !== undefined && !isEmptyCellValue(row.values[cardStatusColumn.field]);
-        const hasMenu = menuActions !== undefined && menuActions.length > 0;
-        const opensOnClick = rowIsLink && !rowClickIsHidden(row);
-        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 || 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();
-                        e.stopPropagation();
-                        onRowClick(row);
-                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink, compact: true }) }))] }, row.id));
-        if (!isRowExpandable)
-            return rowItem;
-        // The expansion is a sibling <li>, outside the row's click target, so
-        // clicks in the sub-area never navigate the parent row.
-        return (_jsxs(Fragment, { children: [rowItem, renderExpansion(row, "item", 0)] }, row.id));
-    }
-    function cardsInner() {
-        if (isEmpty)
-            return emptyBlock;
-        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 && 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: [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 ||
-        facetCluster !== undefined ||
-        toolbarEndHasContent(view, exportList, toolbarEnd);
+// `screenPadding`: on a list screen this wrapper IS the screen container,
+// so it takes the same token as FormScreenShell/PageSection instead of its
+// own inset — a list ends at the same footer distance as a form.
+// Explicit `false` (vs. the default/omitted case) means a host that
+// already pads its own children — a relatedList section nested in a
+// tabs-mode Card — so this wrapper adds no inset of its
+// own, or its content would sit ~24px deeper than sibling banners in the
+// same Card body.
+function screenPaddingOf(screenPadding) {
+    if (screenPadding === true)
+        return screenPaddingClassName;
+    return screenPadding === false ? undefined : "p-6";
+}
+function wrapperClassName({ fillsHeight, screenPadding }) {
+    return cn("flex flex-col w-full", 
+    // scrollBody: the wrapper fills its container so the footer sits at the
+    // same spot at 3 and 300 rows; the 24px insets live in toolbar, cells
+    // and footer, so no outer padding.
+    fillsHeight ? "h-full min-h-0" : cn("gap-4", screenPaddingOf(screenPadding)));
+}
+export function DefaultDataTable(props) {
+    const model = useDataTableState(props);
+    const facetCluster = buildModelFacetCluster(model);
+    const hasToolbar = hasToolbarContent(model, facetCluster);
     // 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).
-    return (_jsxs("div", { className: cn("flex flex-col w-full", 
-        // scrollBody: the wrapper fills its container so the footer sits at the
-        // same spot at 3 and 300 rows; the 24px insets live in toolbar, cells
-        // and footer, so no outer padding.
-        fillsHeight
-            ? "h-full min-h-0"
-            : cn("gap-4", screenPadding === true
-                ? 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", 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"
-                            : "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] }));
+    // (that lives in the shell's breadcrumb). The toolbar is NOT sticky: lists
+    // typically scroll with the page container, not internally. Sticky would
+    // compete with the topbar.
+    return (_jsxs("div", { className: wrapperClassName(model), children: [hasToolbar && renderToolbar(model, facetCluster), renderToolbarDescription(model, hasToolbar), renderTableContent(model)] }));
 }

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

@@ -18,5 +18,5 @@ function FileValueRow({ fileId, previewOpenInitially, 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, index) => (_jsx(FileValueRow, { fileId: fileId, previewOpenInitially: previewOpenByDefault && index === 0, ...(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 === fileIds.length - 1, ...(testId !== undefined && { testId: `${testId}-${fileId}` }) }, fileId))) }));
 }