@cosmicdrift/kumiko-renderer 0.388.0 → 0.389.0

package/dist/web/primitives/data-table/server-group-header.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { useOptionalLocale, useOptionalTranslation } from "../../../index.js";
+import { DataTableCell } from "../data-table-cell.js";
+import { MeasureValue, measureLabel } from "./measure-value.js";
+const NO_ROW = {};
+// Reports the header once it scrolls near the viewport; without an observer
+// (tests, old engines) every header counts as visible right away.
+function useReportWhenVisible(onVisible) {
+    const ref = useRef(null);
+    const onVisibleRef = useRef(onVisible);
+    onVisibleRef.current = onVisible;
+    useEffect(() => {
+        const node = ref.current;
+        if (node === null)
+            return;
+        if (typeof IntersectionObserver === "undefined") {
+            onVisibleRef.current();
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (!entries.some((entry) => entry.isIntersecting))
+                return;
+            observer.disconnect();
+            onVisibleRef.current();
+        }, { rootMargin: "200px" });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return ref;
+}
+function GroupValueLabel({ group, column, }) {
+    const translate = useOptionalTranslation();
+    const locale = useOptionalLocale();
+    if (group.label !== undefined)
+        return group.label;
+    if (group.value === null || group.value === "") {
+        return translate?.("kumiko.list.group.empty") ?? "(empty)";
+    }
+    return (_jsx(DataTableCell, { value: group.value, row: NO_ROW, field: column?.field ?? "", type: column?.type ?? "text", translate: translate, locale: locale, ...(column?.optionLabels !== undefined && { optionLabels: column.optionLabels }), ...(column?.optionTones !== undefined && { optionTones: column.optionTones }) }));
+}
+/** Header of a server group: toggle, value, server row count and the group's measures. */
+export function ServerGroupHeader({ group, groupColumn, columnOf, onToggle, onVisible, }) {
+    const translate = useOptionalTranslation();
+    const reportRef = useReportWhenVisible(() => onVisible(group.key));
+    return (_jsxs("div", { ref: reportRef, className: "flex flex-wrap items-center gap-x-4 gap-y-1 pe-4 text-xs text-foreground-secondary", children: [_jsxs("button", { type: "button", "aria-expanded": !group.collapsed, "data-testid": `row-group-${group.key}-toggle`, onClick: () => onToggle(group.key), className: "flex items-center gap-2 py-2 ps-4 text-left font-medium", children: [group.collapsed ? (_jsx(ChevronRight, { className: "size-3.5", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "size-3.5", "aria-hidden": "true" })), _jsx(GroupValueLabel, { group: group, column: groupColumn }), _jsx("span", { "data-testid": `row-group-${group.key}-count`, className: "rounded-full bg-muted px-2 py-0.5 tabular-nums text-muted-foreground", children: group.count.toLocaleString() })] }), group.measures.map((measure) => {
+                const column = columnOf(measure.field);
+                return (_jsxs("span", { "data-testid": `row-group-${group.key}-${measure.kind}-${measure.field}`, className: "inline-flex items-center gap-1.5 tabular-nums", children: [_jsx("span", { className: "text-muted-foreground", children: measureLabel(measure, column, translate) }), _jsx(MeasureValue, { measure: measure, column: column })] }, `${measure.kind}-${measure.field}`));
+            })] }));
+}

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

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { DataTableSort } from "../../../index.ts";
+export declare function SortableHeader({ field, label, sortable, highlighted, numeric, fitContent, className, sort, onSortChange, style, columnField, trailing, }: {
+    readonly field: string;
+    readonly label: string;
+    readonly sortable: boolean;
+    readonly highlighted?: boolean;
+    readonly numeric?: boolean;
+    readonly fitContent?: boolean;
+    readonly className?: string;
+    readonly sort?: DataTableSort;
+    readonly onSortChange?: (next: DataTableSort | null) => void;
+    readonly style?: CSSProperties;
+    readonly columnField?: string;
+    /** Rendered inside the th after the label, e.g. a resize handle. */
+    readonly trailing?: ReactNode;
+}): ReactNode;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { TableHead } from "../../ui/table.js";
+import { FIT_CONTENT_CELL_CLASS } from "../data-table-cell.js";
+// SortableHeader: renders the th header per column, with or without
+// click-sort. Three paths:
+//   (a) sortable=false OR no onSortChange -> plain label, no cursor
+//       interaction (DataTable purely as a view without sort wiring).
+//   (b) sortable=true + onSortChange -> header is a button, click
+//       cycles asc -> desc -> null. aria-sort mirrors the state.
+//   (c) sortable=true in the schema but no onSortChange prop -> still
+//       label-only, but data-sortable=true stays so tests that know the
+//       schema view keep working.
+export function SortableHeader({ field, label, sortable, highlighted, numeric, fitContent, className, sort, onSortChange, style, columnField, trailing, }) {
+    const active = sort?.field === field ? sort : undefined;
+    const ariaSort = active?.dir === "asc" ? "ascending" : active?.dir === "desc" ? "descending" : "none";
+    const cellExtras = {
+        ...(style !== undefined && { style }),
+        ...(columnField !== undefined && { "data-column-field": columnField }),
+    };
+    if (!sortable || onSortChange === undefined) {
+        return (_jsxs(TableHead, { "data-testid": `column-${field}`, "data-sortable": sortable === true ? true : undefined, "data-highlighted": highlighted === true ? "true" : undefined, className: cn("font-medium whitespace-normal text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40", trailing !== undefined && "group/header relative", className), ...cellExtras, children: [label, trailing] }));
+    }
+    const Icon = active?.dir === "asc" ? ArrowUp : active?.dir === "desc" ? ArrowDown : ArrowUpDown;
+    const next = nextSortState(active?.dir, field);
+    return (_jsxs(TableHead, { "data-testid": `column-${field}`, "data-sortable": "true", "data-highlighted": highlighted === true ? "true" : undefined, "aria-sort": ariaSort, className: cn(active !== undefined
+            ? "font-semibold text-foreground"
+            : "font-medium text-muted-foreground", "whitespace-normal", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40", trailing !== undefined && "group/header relative", className), ...cellExtras, children: [_jsxs("button", { type: "button", onClick: () => onSortChange(next), className: cn("group/sort inline-flex h-8 items-center gap-1.5 rounded-sm px-2 -mx-2 text-sm [font-weight:inherit]", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active !== undefined && "text-foreground"), children: [_jsx("span", { children: label }), _jsx(Icon, { "data-sort-icon": active === undefined ? "idle" : "active", className: cn("size-3.5", active === undefined &&
+                            "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40"), "aria-hidden": "true" })] }), trailing] }));
+}
+// 3-state toggle: no sort -> asc -> desc -> no sort. Idiomatic for
+// power-user lists where "I want the server default order back" is a
+// real action (instead of toggling asc<->desc forever).
+function nextSortState(current, field) {
+    if (current === undefined)
+        return { field, dir: "asc" };
+    if (current === "asc")
+        return { field, dir: "desc" };
+    return null;
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode, TableHTMLAttributes } from "react";
+export declare function FlushTable({ className, ...props }: TableHTMLAttributes<HTMLTableElement>): ReactNode;
+export declare const FILL_TABLE_CLASS: string;
+export declare const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
+export declare const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
+export declare const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
+export declare function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }: {
+    readonly expanded: boolean;
+    readonly controlsId: string;
+    readonly label: string;
+    readonly onToggle: () => void;
+    readonly testId: string;
+}): ReactNode;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Button as UiButton } from "../../ui/button.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>.
+export 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.
+export 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.
+export const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
+export const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
+export const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
+export 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" }) }));
+}

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/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/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-measured-column-widths.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from "react";
+export declare const COLUMN_FIELD_ATTRIBUTE = "data-column-field";
+export declare const EXPAND_COLUMN_WIDTH_PX = 40;
+export declare const SELECT_COLUMN_WIDTH_PX = 40;
+export type MeasuredColumnWidths = {
+    readonly fields: Readonly<Record<string, number>>;
+    readonly select: number;
+    readonly expand: number;
+    readonly actions: number;
+};
+/** Header cell widths for sticky offsets and the fixed layout's total width; undefined while disabled. */
+export declare function useMeasuredColumnWidths(enabled: boolean): {
+    readonly headerRowRef: RefObject<HTMLTableRowElement | null>;
+    readonly measured: MeasuredColumnWidths | undefined;
+};