@cosmicdrift/kumiko-renderer 0.388.0 → 0.390.0

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableCell } from "../../ui/table.js";
+import { cellLinkProp, cellTitle, DataTableCell, FIT_CONTENT_CELL_CLASS, FirstCellLink, isEmptyCellValue, NUMERIC_COLUMN_TYPES, TABULAR_COLUMN_TYPES, } from "../data-table-cell.js";
+import { columnCellPresentationProps } from "./data-cell-props.js";
+// 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.
+function dataCellClassName(m, col, colIndex, pinClassName) {
+    return cn(col.fileDisplay === undefined
+        ? cn(m.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", m.density.cell, pinClassName);
+}
+export function renderDataCell(m, row, col, colIndex, opensOnClick) {
+    const { getCellTestId, onCellChange, onRowClick, tableTranslate, tableLocale } = m;
+    const bodyPin = m.pins.bodyCell(col.field);
+    const linksFirstCell = colIndex === 0 && opensOnClick && onCellChange === undefined;
+    return (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, className: dataCellClassName(m, col, colIndex, bodyPin.className), style: bodyPin.style, title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: linksFirstCell, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: m.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, ...columnCellPresentationProps(col), ...(col.fileDisplay !== undefined && {
+                    fileDisplay: col.fileDisplay,
+                }), ...(onCellChange !== undefined && {
+                    onChange: (value) => onCellChange(row.id, col.field, value),
+                }), ...cellLinkProp(col, row, !linksFirstCell) }) }) }, col.field));
+}

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

@@ -0,0 +1,7 @@
+import type { PointerEvent, ReactNode } from "react";
+export declare function DataTableFooter({ count, itemNoun, testId, }: {
+    readonly count: number;
+    readonly itemNoun?: (count: number) => string;
+    readonly testId: string;
+}): ReactNode;
+export declare function showFullTextOnHover(event: PointerEvent<HTMLElement>): void;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useOptionalTranslation } from "../../../index.js";
+import { TABLE_FOOTER_BAR_CLASS } from "../pager.js";
+export 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.
+export function showFullTextOnHover(event) {
+    const element = event.currentTarget;
+    element.title = element.scrollWidth > element.clientWidth ? (element.textContent ?? "") : "";
+}

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

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

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-end-cluster.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { DataTableExport, DataTableViewOptions } from "../../../data-table-view-types.ts";
+export declare function toolbarEndHasContent(view: DataTableViewOptions | undefined, exportList: DataTableExport | undefined, toolbarEnd: ReactNode): boolean;
+/** Right-hand toolbar group: view menu, export button, then the caller's own end content. */
+export declare function ToolbarEndCluster({ view, columnLabels, exportList, toolbarEnd, }: {
+    readonly view: DataTableViewOptions | undefined;
+    readonly columnLabels: ReadonlyMap<string, string>;
+    readonly exportList: DataTableExport | undefined;
+    readonly toolbarEnd: ReactNode;
+}): ReactNode;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExportButton } from "./export-button.js";
+import { ViewMenu, viewHasMenu } from "./view-menu.js";
+export function toolbarEndHasContent(view, exportList, toolbarEnd) {
+    return toolbarEnd !== undefined || viewHasMenu(view) || exportList !== undefined;
+}
+/** Right-hand toolbar group: view menu, export button, then the caller's own end content. */
+export function ToolbarEndCluster({ view, columnLabels, exportList, toolbarEnd, }) {
+    if (!toolbarEndHasContent(view, exportList, toolbarEnd))
+        return null;
+    const showsViewMenu = viewHasMenu(view);
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [showsViewMenu && _jsx(ViewMenu, { view: view, columnLabels: columnLabels }), exportList !== undefined && _jsx(ExportButton, { source: exportList }), toolbarEnd] }));
+}

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/totals-footer.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { DataTableTotals } from "../../../data-table-aggregate-types.ts";
+import type { ListColumnViewModel } from "../../../headless/index.ts";
+import { type PinnedCellProps } from "./use-column-pins.ts";
+/** Footer row under the table body, one cell per visible column. */
+export declare function TotalsFooterRow({ totals, columns, cellPin, leadingCells, actionsCell, cellClassName, }: {
+    readonly totals: DataTableTotals;
+    readonly columns: readonly ListColumnViewModel[];
+    readonly cellPin: (field: string) => PinnedCellProps;
+    readonly leadingCells: {
+        readonly select: boolean;
+        readonly expand: boolean;
+    };
+    /** Present when the table has an actions column; the cell then sticks like that column. */
+    readonly actionsCell: {
+        readonly fillsHeight: boolean;
+    } | undefined;
+    readonly cellClassName?: string;
+}): ReactNode;
+/** Card layout: the totals as a labelled list under the cards. */
+export declare function TotalsCard({ totals, columnOf, }: {
+    readonly totals: DataTableTotals;
+    readonly columnOf: (field: string) => ListColumnViewModel | undefined;
+}): ReactNode;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOptionalTranslation } from "../../../index.js";
+import { cn } from "../../lib/cn.js";
+import { TableCell, TableFooter, TableRow } from "../../ui/table.js";
+import { NUMERIC_COLUMN_TYPES } from "../data-table-cell.js";
+import { stickyActionsCellClass } from "./actions-column.js";
+import { MeasureValue, measureKindLabel, measureLabel } from "./measure-value.js";
+import { EXPAND_COLUMN_KEY, SELECT_COLUMN_KEY } from "./use-column-pins.js";
+function measuresOf(totals, field) {
+    return totals.measures.filter((measure) => measure.field === field);
+}
+// Same order as the body row: select before expand.
+function leadingCellKeys(leading) {
+    return [
+        ...(leading.select ? [SELECT_COLUMN_KEY] : []),
+        ...(leading.expand ? [EXPAND_COLUMN_KEY] : []),
+    ];
+}
+function totalsLabel(translate) {
+    return translate?.("kumiko.list.totals.label") ?? "Total";
+}
+function FooterMeasures({ measures, column, }) {
+    const translate = useOptionalTranslation();
+    if (measures.length === 1 && measures[0]?.kind === "sum") {
+        return _jsx(MeasureValue, { measure: measures[0], column: column });
+    }
+    return (_jsx("span", { className: "inline-flex flex-col gap-0.5", children: measures.map((measure) => (_jsxs("span", { className: "inline-flex items-baseline justify-end gap-1.5", children: [_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: measureKindLabel(measure.kind, translate) }), _jsx(MeasureValue, { measure: measure, column: column })] }, measure.kind))) }));
+}
+/** Footer row under the table body, one cell per visible column. */
+export function TotalsFooterRow({ totals, columns, cellPin, leadingCells, actionsCell, cellClassName, }) {
+    const translate = useOptionalTranslation();
+    return (_jsx(TableFooter, { "data-testid": "list-totals", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [leadingCellKeys(leadingCells).map((key) => {
+                    const pin = cellPin(key);
+                    return (_jsx(TableCell, { "data-testid": `list-totals-${key}`, className: pin.className, style: pin.style }, key));
+                }), columns.map((column, index) => {
+                    const measures = measuresOf(totals, column.field);
+                    const pin = cellPin(column.field);
+                    return (_jsx(TableCell, { "data-testid": `list-totals-${column.field}`, className: cn("tabular-nums", NUMERIC_COLUMN_TYPES.has(column.type) && "text-right", cellClassName, pin.className), style: pin.style, children: measures.length > 0 ? (_jsx(FooterMeasures, { measures: measures, column: column })) : index === 0 ? (totalsLabel(translate)) : null }, column.field));
+                }), actionsCell !== undefined && (_jsx(TableCell, { className: stickyActionsCellClass(actionsCell.fillsHeight) }))] }) }));
+}
+/** Card layout: the totals as a labelled list under the cards. */
+export function TotalsCard({ totals, columnOf, }) {
+    const translate = useOptionalTranslation();
+    return (_jsx("dl", { "data-testid": "list-totals", className: "m-0 flex flex-col gap-1 border-b border-border-row bg-muted/50 px-4 py-3 text-sm", children: totals.measures.map((measure) => {
+            const column = columnOf(measure.field);
+            return (_jsxs("div", { "data-testid": `list-totals-${measure.field}`, className: "flex items-baseline justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: measureLabel(measure, column, translate) }), _jsx("dd", { className: "m-0 font-medium tabular-nums", children: _jsx(MeasureValue, { measure: measure, column: column }) })] }, `${measure.kind}-${measure.field}`));
+        }) }));
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import type { DataTableBulk } from "../../../data-table-bulk-types.ts";
+import type { ListRowViewModel } from "../../../headless/index.ts";
+import type { PinnedCellProps } from "./use-column-pins.ts";
+export type BulkSelection = {
+    readonly active: boolean;
+    readonly bar: ReactNode;
+    readonly onKeyboardSelect: ((rowId: string) => void) | undefined;
+    readonly headerCell: (pin: PinnedCellProps) => ReactNode;
+    readonly bodyCell: (row: ListRowViewModel, pin: PinnedCellProps) => ReactNode;
+    readonly cardCheckbox: (row: ListRowViewModel) => ReactNode;
+};
+/** Row checkboxes, the selection bar and the run flow of a table with bulk actions. */
+export declare function useBulkSelection({ bulk, rows, titleField, rowTestId, flush, }: {
+    readonly bulk: DataTableBulk | undefined;
+    readonly rows: readonly ListRowViewModel[];
+    readonly titleField: string | undefined;
+    readonly rowTestId: (row: ListRowViewModel) => string;
+    /** The table has no frame (scrollBody): the bar spans its full width. */
+    readonly flush: boolean;
+}): BulkSelection;

package/dist/web/primitives/data-table/use-bulk-selection.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useBulkRun } from "../../../hooks/use-bulk-run.js";
+import { useOptionalTranslation } from "../../../i18n.js";
+import { cn } from "../../lib/cn.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { TableCell, TableHead } from "../../ui/table.js";
+import { cellTitle } from "../data-table-cell.js";
+import { BulkSelectionBar } from "./bulk-selection-bar.js";
+import { EXPAND_TOGGLE_CELL_CLASS } from "./table-chrome.js";
+import { useRowSelection } from "./use-row-selection.js";
+const INACTIVE = {
+    active: false,
+    bar: null,
+    onKeyboardSelect: undefined,
+    headerCell: () => null,
+    bodyCell: () => null,
+    cardCheckbox: () => null,
+};
+const keyAsText = (key) => key;
+// The checkbox sits inside a clickable row; its click must not open the row.
+function stopRowClick(event) {
+    event.stopPropagation();
+}
+/** Row checkboxes, the selection bar and the run flow of a table with bulk actions. */
+export function useBulkSelection({ bulk, rows, titleField, rowTestId, flush, }) {
+    const t = useOptionalTranslation() ?? keyAsText;
+    const selection = useRowSelection(rows);
+    const run = useBulkRun();
+    const [pendingAction, setPendingAction] = useState(undefined);
+    const [resultActionLabel, setResultActionLabel] = useState("");
+    if (bulk === undefined)
+        return INACTIVE;
+    const isRunning = run.state.phase === "running";
+    const reload = bulk.reload;
+    async function execute(action) {
+        setPendingAction(undefined);
+        setResultActionLabel(action.label);
+        const result = await run.start(action, selection.selectedRows);
+        // Failed rows stay selected for a retry; so do rows a cancel kept from running.
+        selection.retainOnly(new Set([...result.failedIds, ...result.notStartedIds]));
+        await reload();
+    }
+    function rowCheckbox(row) {
+        const checked = selection.isSelected(row.id);
+        const title = (titleField !== undefined ? cellTitle(row.values[titleField]) : undefined) ?? "";
+        return (_jsx(Checkbox, { checked: checked, disabled: isRunning || (!checked && selection.isFull), onCheckedChange: () => selection.toggle(row.id), onClick: stopRowClick, "aria-label": t("kumiko.list.bulk.select-row", { title }), "data-testid": `${rowTestId(row)}-select` }));
+    }
+    return {
+        active: true,
+        bar: (_jsx(BulkSelectionBar, { flush: flush, actions: bulk.actions, selectedCount: selection.selectedRows.length, isFull: selection.isFull, runState: run.state, resultActionLabel: resultActionLabel, pendingAction: pendingAction, t: t, onRequest: (action) => {
+                if (action.confirmText !== undefined)
+                    setPendingAction(action);
+                else
+                    void execute(action);
+            }, onConfirm: (action) => void execute(action), onConfirmClose: () => setPendingAction(undefined), onCancel: run.cancel, onClear: selection.clear, onDismissResult: run.dismissResult })),
+        onKeyboardSelect: isRunning ? undefined : selection.toggle,
+        headerCell: (pin) => (_jsx(TableHead, { "data-testid": "column-select", className: cn(EXPAND_TOGGLE_CELL_CLASS, "text-center", pin.className), style: pin.style, children: _jsx(Checkbox, { checked: selection.allState === "all"
+                    ? true
+                    : selection.allState === "some"
+                        ? "indeterminate"
+                        : false, disabled: isRunning || rows.length === 0, onCheckedChange: selection.toggleAll, "aria-label": t("kumiko.list.bulk.select-all"), "data-testid": "select-all" }) })),
+        bodyCell: (row, pin) => (_jsx(TableCell, { "data-testid": `cell-${row.id}-select`, className: cn(EXPAND_TOGGLE_CELL_CLASS, "text-center", pin.className), style: pin.style, children: rowCheckbox(row) })),
+        cardCheckbox: (row) => (_jsx("div", { className: "flex size-11 shrink-0 items-center justify-center", children: rowCheckbox(row) })),
+    };
+}

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

@@ -0,0 +1,32 @@
+import { type CSSProperties } from "react";
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+import type { MeasuredColumnWidths } from "./use-measured-column-widths.ts";
+export declare const EXPAND_COLUMN_KEY = "__expand";
+export declare const SELECT_COLUMN_KEY = "__select";
+export type PinnedCellProps = {
+    readonly style?: CSSProperties;
+    readonly className?: string;
+};
+export type PinnedHeaderCellProps = PinnedCellProps & {
+    readonly columnField?: string;
+};
+export type ColumnPins<TColumn> = {
+    readonly columns: readonly TColumn[];
+    readonly headerCell: (field: string) => PinnedHeaderCellProps;
+    readonly bodyCell: (field: string) => PinnedCellProps;
+    readonly actionsHeaderStyle: CSSProperties | undefined;
+};
+/** Reorders columns (left pins first, right pins last) and computes the sticky
+ *  styles of pinned cells. Inactive: columns unchanged, no styles. */
+export declare function useColumnPins<TColumn extends {
+    readonly field: string;
+}>({ columns, view, isNarrow, measured, hasActionsColumn, hasExpandColumn, hasSelectColumn, fillsHeight, }: {
+    readonly columns: readonly TColumn[];
+    readonly view: DataTableViewOptions | undefined;
+    readonly isNarrow: boolean;
+    readonly measured: MeasuredColumnWidths | undefined;
+    readonly hasActionsColumn: boolean;
+    readonly hasExpandColumn: boolean;
+    readonly hasSelectColumn?: boolean;
+    readonly fillsHeight: boolean;
+}): ColumnPins<TColumn>;

package/dist/web/primitives/data-table/use-column-pins.js

@@ -0,0 +1,117 @@
+import { useMemo } from "react";
+import { cn } from "../../lib/cn.js";
+import { isPinningActive } from "./column-layout-mode.js";
+import { ROW_FOCUS_RING_CELL_CLASS } from "./use-row-keyboard-navigation.js";
+export const EXPAND_COLUMN_KEY = "__expand";
+export const SELECT_COLUMN_KEY = "__select";
+// Header over pins over actions (10) over cells. Header z-index 30 also lifts
+// the sticky scrollBody header, whose class selector would otherwise set 10.
+const HEADER_Z_INDEX = 30;
+const PINNED_HEADER_Z_INDEX = 40;
+const PINNED_BODY_Z_INDEX = 20;
+function pinOf(view, field) {
+    return view?.pins?.[field];
+}
+function placePins(columns, pinOfField, measured, leading, hasActionsColumn) {
+    const placements = new Map();
+    const widthOf = (field) => measured.fields[field] ?? 0;
+    const leftFields = columns.filter((c) => pinOfField(c.field) === "left").map((c) => c.field);
+    const rightFields = columns.filter((c) => pinOfField(c.field) === "right").map((c) => c.field);
+    let left = 0;
+    // Leading select and expand columns stick ahead of left pins so they stay with their row.
+    if (leftFields.length > 0 && leading.hasSelectColumn) {
+        placements.set(SELECT_COLUMN_KEY, { side: "left", offset: left, onInnerEdge: false });
+        left += measured.select;
+    }
+    if (leftFields.length > 0 && leading.hasExpandColumn) {
+        placements.set(EXPAND_COLUMN_KEY, { side: "left", offset: left, onInnerEdge: false });
+        left += measured.expand;
+    }
+    leftFields.forEach((field, index) => {
+        placements.set(field, {
+            side: "left",
+            offset: left,
+            onInnerEdge: index === leftFields.length - 1,
+        });
+        left += widthOf(field);
+    });
+    let right = hasActionsColumn ? measured.actions : 0;
+    for (let index = rightFields.length - 1; index >= 0; index--) {
+        const field = rightFields[index];
+        if (field === undefined)
+            continue;
+        placements.set(field, { side: "right", offset: right, onInnerEdge: index === 0 });
+        right += widthOf(field);
+    }
+    return placements;
+}
+function pinnedStyle(placement, part, fillsHeight) {
+    const edgeLine = placement.side === "left" ? "inset -1px 0 0" : "inset 1px 0 0";
+    const shadows = [];
+    if (placement.onInnerEdge)
+        shadows.push(`${edgeLine} var(--color-border)`);
+    if (part === "header" && fillsHeight)
+        shadows.push("inset 0 -1px 0 var(--color-border)");
+    return {
+        position: "sticky",
+        [placement.side]: placement.offset,
+        zIndex: part === "header" ? PINNED_HEADER_Z_INDEX : PINNED_BODY_Z_INDEX,
+        ...(shadows.length > 0 && { boxShadow: shadows.join(", ") }),
+    };
+}
+function pinnedClassName(part, fillsHeight) {
+    if (part === "header")
+        return "bg-muted";
+    return cn(fillsHeight ? "bg-card" : "bg-background", ROW_FOCUS_RING_CELL_CLASS);
+}
+/** Reorders columns (left pins first, right pins last) and computes the sticky
+ *  styles of pinned cells. Inactive: columns unchanged, no styles. */
+export function useColumnPins({ columns, view, isNarrow, measured, hasActionsColumn, hasExpandColumn, hasSelectColumn = false, fillsHeight, }) {
+    const active = isPinningActive(view, isNarrow);
+    const pins = view?.pins;
+    const ordered = useMemo(() => {
+        if (!active)
+            return columns;
+        const pinFor = (column) => pins?.[column.field];
+        return [
+            ...columns.filter((c) => pinFor(c) === "left"),
+            ...columns.filter((c) => pinFor(c) === undefined),
+            ...columns.filter((c) => pinFor(c) === "right"),
+        ];
+    }, [active, columns, pins]);
+    return useMemo(() => {
+        const placements = active
+            ? placePins(ordered, (field) => pinOf(view, field), measured ?? { fields: {}, select: 0, expand: 0, actions: 0 }, { hasSelectColumn, hasExpandColumn }, hasActionsColumn)
+            : new Map();
+        const cellProps = (field, part) => {
+            if (!active)
+                return {};
+            const placement = placements.get(field);
+            if (placement === undefined) {
+                return part === "header" ? { style: { zIndex: HEADER_Z_INDEX } } : {};
+            }
+            return {
+                style: pinnedStyle(placement, part, fillsHeight),
+                className: pinnedClassName(part, fillsHeight),
+            };
+        };
+        return {
+            columns: ordered,
+            headerCell: (field) => ({
+                ...cellProps(field, "header"),
+                ...(measured !== undefined && { columnField: field }),
+            }),
+            bodyCell: (field) => cellProps(field, "body"),
+            actionsHeaderStyle: active ? { zIndex: HEADER_Z_INDEX } : undefined,
+        };
+    }, [
+        active,
+        ordered,
+        view,
+        measured,
+        hasSelectColumn,
+        hasExpandColumn,
+        hasActionsColumn,
+        fillsHeight,
+    ]);
+}

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

@@ -0,0 +1,22 @@
+import { type CSSProperties } from "react";
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+import { type MeasuredColumnWidths } from "./use-measured-column-widths.ts";
+export type ColumnSizing = {
+    readonly widthOf: (field: string) => number;
+    readonly minWidthOf: (field: string) => number;
+    readonly tableStyle: CSSProperties;
+    /** Live width while a drag is in progress; nothing reaches the view state until `commit`. */
+    readonly setLiveWidth: (field: string, width: number) => void;
+    readonly commit: (field: string, width: number) => void;
+};
+/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+export declare function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn, }: {
+    readonly columns: readonly {
+        readonly field: string;
+    }[];
+    readonly view: DataTableViewOptions | undefined;
+    readonly isNarrow: boolean;
+    readonly measured: MeasuredColumnWidths | undefined;
+    readonly hasExpandColumn: boolean;
+    readonly hasSelectColumn?: boolean;
+}): ColumnSizing | undefined;

package/dist/web/primitives/data-table/use-column-sizing.js

@@ -0,0 +1,44 @@
+import { useCallback, useMemo, useState } from "react";
+import { isResizingActive } from "./column-layout-mode.js";
+import { EXPAND_COLUMN_WIDTH_PX, SELECT_COLUMN_WIDTH_PX, } from "./use-measured-column-widths.js";
+/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn = false, }) {
+    const [live, setLive] = useState(null);
+    const active = isResizingActive(view, isNarrow);
+    const widths = view?.widths;
+    const minWidths = view?.minWidths;
+    const onWidthChange = view?.onWidthChange;
+    const commit = useCallback((field, width) => {
+        setLive(null);
+        onWidthChange?.(field, width);
+    }, [onWidthChange]);
+    return useMemo(() => {
+        if (!active || widths === undefined || minWidths === undefined)
+            return undefined;
+        const minWidthOf = (field) => minWidths[field] ?? 0;
+        const widthOf = (field) => live?.field === field ? live.width : (widths[field] ?? minWidthOf(field));
+        // The actions column keeps no width of its own: it absorbs the leftover space,
+        // so a dragged width holds exactly while the table is wider than its container.
+        const total = columns.reduce((sum, column) => sum + widthOf(column.field), 0) +
+            (hasExpandColumn ? EXPAND_COLUMN_WIDTH_PX : 0) +
+            (hasSelectColumn ? SELECT_COLUMN_WIDTH_PX : 0) +
+            (measured?.actions ?? 0);
+        return {
+            widthOf,
+            minWidthOf,
+            tableStyle: { tableLayout: "fixed", width: `max(100%, ${total}px)` },
+            setLiveWidth: (field, width) => setLive({ field, width }),
+            commit,
+        };
+    }, [
+        active,
+        widths,
+        minWidths,
+        live,
+        columns,
+        hasExpandColumn,
+        hasSelectColumn,
+        measured,
+        commit,
+    ]);
+}

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 {};