@cosmicdrift/kumiko-renderer 0.387.0 → 0.389.0

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { DataTableBulkAction } from "../../../data-table-bulk-types.ts";
+import type { Translate } from "../../../headless/index.ts";
+import type { BulkRunState } from "../../../hooks/use-bulk-run.ts";
+export declare function BulkSelectionBar({ flush, actions, selectedCount, isFull, runState, resultActionLabel, pendingAction, t, onRequest, onConfirm, onConfirmClose, onCancel, onClear, onDismissResult, }: {
+    readonly flush: boolean;
+    readonly actions: readonly DataTableBulkAction[];
+    readonly selectedCount: number;
+    readonly isFull: boolean;
+    readonly runState: BulkRunState;
+    readonly resultActionLabel: string;
+    readonly pendingAction: DataTableBulkAction | undefined;
+    readonly t: Translate;
+    readonly onRequest: (action: DataTableBulkAction) => void;
+    readonly onConfirm: (action: DataTableBulkAction) => void;
+    readonly onConfirmClose: () => void;
+    readonly onCancel: () => void;
+    readonly onClear: () => void;
+    readonly onDismissResult: () => void;
+}): ReactNode;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MAX_BULK_SELECTION } from "@cosmicdrift/kumiko-framework/ui-types";
+import { cn } from "../../lib/cn.js";
+import { DefaultBanner } from "../banner.js";
+import { DefaultButton } from "../button.js";
+import { DefaultDialog } from "../dialog.js";
+const BAR_CLASS = "flex flex-wrap items-center gap-2 bg-muted/60 py-2 text-sm text-foreground";
+// A scrollBody table has no frame of its own, so the bar spans it like the toolbar does.
+const FLUSH_BAR_CLASS = "border-t px-6 max-md:px-3";
+const FRAMED_BAR_CLASS = "rounded-lg border px-3";
+function ResultBanner({ result, actionLabel, t, onDismiss, }) {
+    const tallies = [
+        { key: "succeeded", text: "kumiko.list.bulk.result.succeeded", ids: result.succeededIds },
+        { key: "failed", text: "kumiko.list.bulk.result.failed", ids: result.failedIds },
+        { key: "skipped", text: "kumiko.list.bulk.result.skipped", ids: result.skippedIds },
+        { key: "not-started", text: "kumiko.list.bulk.result.not-started", ids: result.notStartedIds },
+    ];
+    return (_jsxs(DefaultBanner, { variant: result.failedIds.length > 0 ? "warning" : "info", title: t("kumiko.list.bulk.result.title", { action: actionLabel }), testId: "bulk-result", actions: _jsx(DefaultButton, { variant: "secondary", size: "sm", onClick: onDismiss, testId: "bulk-result-dismiss", children: t("kumiko.list.bulk.result.dismiss") }), children: [_jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-4 p-0", children: tallies
+                    .filter((tally) => tally.key === "succeeded" || tally.ids.length > 0)
+                    .map((tally) => (_jsx("li", { "data-testid": `bulk-result-${tally.key}`, children: t(tally.text, { count: tally.ids.length }) }, tally.key))) }), result.firstFailureMessage !== undefined && (_jsx("p", { "data-testid": "bulk-result-error", className: "m-0 mt-1 text-foreground-secondary", children: result.firstFailureMessage }))] }));
+}
+function RunProgress({ state, t, onCancel, barClassName, }) {
+    return (_jsxs("div", { "data-testid": "bulk-bar", "data-phase": "running", className: barClassName, children: [_jsx("span", { "data-testid": "bulk-progress", className: "tabular-nums", "aria-live": "polite", children: t("kumiko.list.bulk.progress", { settled: state.settled, total: state.total }) }), _jsx(DefaultButton, { variant: "secondary", size: "sm", onClick: onCancel, disabled: state.cancelRequested, testId: "bulk-cancel", className: "ms-auto", children: t(state.cancelRequested ? "kumiko.list.bulk.cancelling" : "kumiko.list.bulk.cancel") })] }));
+}
+export function BulkSelectionBar({ flush, actions, selectedCount, isFull, runState, resultActionLabel, pendingAction, t, onRequest, onConfirm, onConfirmClose, onCancel, onClear, onDismissResult, }) {
+    const confirmText = pendingAction?.confirmText?.(selectedCount);
+    // skip: nothing selected, no run and no result leaves no bar in the DOM
+    if (runState.phase === "idle" && selectedCount === 0 && pendingAction === undefined)
+        return null;
+    const barClassName = cn(BAR_CLASS, flush ? FLUSH_BAR_CLASS : FRAMED_BAR_CLASS);
+    return (_jsxs("div", { className: flush ? "flex flex-col" : "flex flex-col gap-2", children: [runState.phase === "finished" && (_jsx("div", { className: flush ? "px-6 pb-2 max-md:px-3" : undefined, children: _jsx(ResultBanner, { result: runState.result, actionLabel: resultActionLabel, t: t, onDismiss: onDismissResult }) })), runState.phase === "running" ? (_jsx(RunProgress, { state: runState, t: t, onCancel: onCancel, barClassName: barClassName })) : (selectedCount > 0 && (_jsxs("div", { "data-testid": "bulk-bar", "data-phase": "idle", className: barClassName, children: [_jsx("span", { "data-testid": "bulk-selected-count", className: "font-medium tabular-nums", children: t("kumiko.list.bulk.selected", { count: selectedCount }) }), actions.map((action) => (_jsx(DefaultButton, { variant: action.style === "danger" ? "danger" : "secondary", size: "sm", onClick: () => onRequest(action), testId: `bulk-action-${action.id}`, ...(action.icon !== undefined && { icon: action.icon }), children: action.label }, action.id))), isFull && (_jsx("span", { "data-testid": "bulk-limit", className: "text-foreground-secondary", children: t("kumiko.list.bulk.limit", { max: MAX_BULK_SELECTION }) })), _jsx(DefaultButton, { variant: "ghost", size: "sm", onClick: onClear, testId: "bulk-clear", className: "ms-auto", children: t("kumiko.list.bulk.clear") })] }))), pendingAction !== undefined && (_jsx(DefaultDialog, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        onConfirmClose();
+                }, title: pendingAction.label, ...(confirmText !== undefined && { description: confirmText }), confirmLabel: pendingAction.confirmLabel ?? pendingAction.label, variant: pendingAction.style === "danger" ? "danger" : "default", 
+                // The run must not hold the dialog open: the bar shows its progress.
+                onConfirm: () => onConfirm(pendingAction), testId: "bulk-confirm" }))] }));
+}

package/dist/web/primitives/data-table/card-sort-select.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { DataTableSort } from "../../../index.ts";
+type SortableColumn = {
+    readonly field: string;
+    readonly label: string;
+    readonly sortable?: boolean;
+};
+export declare function CardSortSelect({ columns, sort, onSortChange, testId, }: {
+    readonly columns: readonly SortableColumn[];
+    readonly sort: DataTableSort | null | undefined;
+    readonly onSortChange: ((next: DataTableSort | null) => void) | undefined;
+    readonly testId: string | undefined;
+}): ReactNode;
+export {};

package/dist/web/primitives/data-table/card-sort-select.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+// No column headers below the breakpoint, so the click-to-sort affordance
+// on SortableHeader has nothing to attach to. A single native <select> is
+// the whole fix — no custom widget, no menu — fed straight from the
+// columns marked sortable in the ViewModel. Options carry the resolved
+// {field, dir} directly so onChange can look the pick up by value instead
+// of parsing/casting the option string back apart.
+export function CardSortSelect({ columns, sort, onSortChange, testId, }) {
+    const translate = useOptionalTranslation();
+    const sortableColumns = columns.filter((col) => col.sortable);
+    if (onSortChange === undefined || sortableColumns.length === 0)
+        return null;
+    const sortOptions = sortableColumns.flatMap((col) => [
+        { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
+        { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
+    ]);
+    const sortLabel = sort !== undefined && sort !== null
+        ? (translate?.("kumiko.list.sort.by", {
+            column: columns.find((col) => col.field === sort.field)?.label ?? sort.field,
+        }) ?? `Sorted by ${sort.field}`)
+        : (translate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
+    const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
+    // URL state can carry a sort on a column that is not sortable; without an
+    // option for it the select would claim "Unsorted" while the list is sorted.
+    const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
+    const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
+    return (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && _jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" }), _jsxs("select", { "aria-label": translate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "") {
+                        onSortChange(null);
+                        return;
+                    }
+                    const picked = sortOptions.find((o) => o.value === raw);
+                    if (picked === undefined)
+                        return;
+                    onSortChange({ field: picked.field, dir: picked.dir });
+                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: translate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] }));
+}

package/dist/web/primitives/data-table/column-layout-mode.d.ts

@@ -0,0 +1,5 @@
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+/** Pinning, resizing and keyboard navigation only apply to the table layout (md and up). */
+export declare function isPinningActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;
+export declare function isResizingActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;
+export declare function isKeyboardNavigationActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;

package/dist/web/primitives/data-table/column-layout-mode.js

@@ -0,0 +1,10 @@
+/** Pinning, resizing and keyboard navigation only apply to the table layout (md and up). */
+export function isPinningActive(view, isNarrow) {
+    return !isNarrow && view?.pins !== undefined;
+}
+export function isResizingActive(view, isNarrow) {
+    return !isNarrow && view?.widths !== undefined && view.minWidths !== undefined;
+}
+export function isKeyboardNavigationActive(view, isNarrow) {
+    return !isNarrow && view?.keyboardNavigation === true;
+}

package/dist/web/primitives/data-table/column-picker-section.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { DataTableViewColumn } from "../../../data-table-view-types.ts";
+export declare function ColumnPickerSection({ columns, labels, onChange, }: {
+    readonly columns: readonly DataTableViewColumn[];
+    readonly labels: ReadonlyMap<string, string>;
+    readonly onChange: (next: readonly DataTableViewColumn[]) => void;
+}): ReactNode;

package/dist/web/primitives/data-table/column-picker-section.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { usePointerDrag } from "../../widgets/use-pointer-drag.js";
+const ROW_HEIGHT_PX = 32;
+function moveColumn(columns, from, to) {
+    const target = Math.max(0, Math.min(columns.length - 1, to));
+    if (target === from)
+        return columns;
+    const next = [...columns];
+    const [moved] = next.splice(from, 1);
+    if (moved !== undefined)
+        next.splice(target, 0, moved);
+    return next;
+}
+function PickerRow({ columns, index, label, isLastVisible, onChange }) {
+    const translate = useOptionalTranslation();
+    const column = columns[index];
+    // Positions are relative to the order at pointer-down, so every move is idempotent.
+    const drag = usePointerDrag({
+        onStart: () => ({ snapshot: columns, from: index }),
+        onMove: (start, { dy }) => onChange(moveColumn(start.snapshot, start.from, start.from + Math.round(dy / ROW_HEIGHT_PX))),
+    });
+    if (column === undefined)
+        return null;
+    const checkboxId = `list-view-column-${column.field}`;
+    return (_jsxs("li", { className: "flex h-8 items-center gap-1.5", "data-testid": `list-view-column-row-${column.field}`, children: [_jsx("span", { ...drag, "aria-hidden": "true", className: "flex size-6 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground", children: _jsx(GripVertical, { className: "size-4" }) }), _jsx(Checkbox, { id: checkboxId, checked: column.visible, disabled: column.visible && isLastVisible, onCheckedChange: (checked) => onChange(columns.map((c, i) => (i === index ? { ...c, visible: checked === true } : c))) }), _jsx("label", { htmlFor: checkboxId, className: "min-w-0 flex-1 truncate text-sm", children: label }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === 0, "aria-label": translate?.("kumiko.list.view.column.move-up", { column: label }) ?? `Move ${label} up`, onClick: () => onChange(moveColumn(columns, index, index - 1)), children: _jsx(ArrowUp, { className: "size-3.5", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === columns.length - 1, "aria-label": translate?.("kumiko.list.view.column.move-down", { column: label }) ??
+                    `Move ${label} down`, onClick: () => onChange(moveColumn(columns, index, index + 1)), children: _jsx(ArrowDown, { className: "size-3.5", "aria-hidden": "true" }) })] }));
+}
+export function ColumnPickerSection({ columns, labels, onChange, }) {
+    const visibleCount = columns.filter((column) => column.visible).length;
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col p-0", "data-testid": "list-view-columns", children: columns.map((column, index) => (_jsx(PickerRow, { columns: columns, index: index, label: labels.get(column.field) ?? column.field, isLastVisible: visibleCount === 1, onChange: onChange }, column.field))) }));
+}

package/dist/web/primitives/data-table/column-resize-handle.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import type { ColumnSizing } from "./use-column-sizing.ts";
+export declare function ColumnWidthGroup({ fields, sizing, hasExpandColumn, hasSelectColumn, hasActionsColumn, }: {
+    readonly fields: readonly string[];
+    readonly sizing: ColumnSizing;
+    readonly hasExpandColumn: boolean;
+    readonly hasSelectColumn?: boolean;
+    readonly hasActionsColumn: boolean;
+}): ReactNode;
+export declare function ColumnResizeHandle({ field, label, sizing, }: {
+    readonly field: string;
+    readonly label: string;
+    readonly sizing: ColumnSizing;
+}): ReactNode;

package/dist/web/primitives/data-table/column-resize-handle.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { MAX_COLUMN_WIDTH_PX } from "../../../hooks/list-column-layout.js";
+import { useOptionalTranslation } from "../../../index.js";
+import { arrowKeyDelta, usePointerDrag } from "../../widgets/use-pointer-drag.js";
+import { EXPAND_COLUMN_WIDTH_PX, SELECT_COLUMN_WIDTH_PX } from "./use-measured-column-widths.js";
+export function ColumnWidthGroup({ fields, sizing, hasExpandColumn, hasSelectColumn = false, hasActionsColumn, }) {
+    return (_jsxs("colgroup", { children: [hasSelectColumn && _jsx("col", { style: { width: SELECT_COLUMN_WIDTH_PX } }), hasExpandColumn && _jsx("col", { style: { width: EXPAND_COLUMN_WIDTH_PX } }), fields.map((field) => (_jsx("col", { style: { width: sizing.widthOf(field) } }, field))), hasActionsColumn && _jsx("col", {})] }));
+}
+// Visible while the header is hovered or the grip has focus; the wider 8px hit area stays transparent.
+const HANDLE_CLASS = "absolute inset-y-0 right-0 z-10 m-0 h-full w-2 border-0 bg-transparent cursor-col-resize touch-none outline-none " +
+    "after:absolute after:inset-y-1 after:right-0 after:w-0.5 after:rounded-full after:bg-transparent " +
+    "group-hover/header:after:bg-border hover:after:bg-ring focus-visible:after:bg-ring active:after:bg-ring";
+export function ColumnResizeHandle({ field, label, sizing, }) {
+    const translate = useOptionalTranslation();
+    const width = sizing.widthOf(field);
+    const minWidth = sizing.minWidthOf(field);
+    const draggedWidth = useRef(null);
+    const clampToBounds = (value) => Math.min(MAX_COLUMN_WIDTH_PX, Math.max(minWidth, value));
+    const drag = usePointerDrag({
+        onStart: () => width,
+        onMove: (startWidth, { dx }) => {
+            const next = clampToBounds(startWidth + dx);
+            draggedWidth.current = next;
+            sizing.setLiveWidth(field, next);
+        },
+        onEnd: () => {
+            const final = draggedWidth.current;
+            draggedWidth.current = null;
+            if (final !== null)
+                sizing.commit(field, final);
+        },
+    });
+    const onKeyDown = (event) => {
+        event.stopPropagation();
+        const delta = arrowKeyDelta(event);
+        if (delta === undefined || delta.dx === 0)
+            return;
+        event.preventDefault();
+        sizing.commit(field, clampToBounds(width + delta.dx));
+    };
+    return (_jsx("hr", { "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": minWidth, "aria-valuemax": MAX_COLUMN_WIDTH_PX, "aria-label": translate?.("kumiko.list.column.resize", { column: label }) ?? `Resize ${label}`, tabIndex: 0, "data-testid": `column-resize-${field}`, className: HANDLE_CLASS, onClick: (event) => event.stopPropagation(), onKeyDown: onKeyDown, ...drag, onPointerDown: (event) => {
+            event.stopPropagation();
+            drag.onPointerDown(event);
+        } }));
+}

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

@@ -0,0 +1,14 @@
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+type DensityClasses = {
+    /** Table body row. */
+    readonly row: string;
+    /** Table body cell; `!` beats the fill-height table's own cell padding. */
+    readonly cell: string;
+    /** Header cell; keeps the horizontal inset in line with the body cells. */
+    readonly header: string;
+    /** Card row below the md breakpoint. */
+    readonly card: string;
+};
+/** Comfortable (and a table without `view`) adds no class at all, so the markup stays as it was. */
+export declare function densityClasses(view: DataTableViewOptions | undefined, keepsFillEdgeInset: boolean): DensityClasses;
+export {};

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

@@ -0,0 +1,20 @@
+const NO_DENSITY_CLASSES = { row: "", cell: "", header: "", card: "" };
+// A fill-height table insets its first and last column by 24px; compact keeps that edge.
+const FILL_EDGE_INSET = " first:pl-6! last:pr-6!";
+const DENSITY_CLASSES = {
+    comfortable: NO_DENSITY_CLASSES,
+    compact: { row: "h-8", cell: "p-1!", header: "px-1!", card: "min-h-14 py-2" },
+};
+/** Comfortable (and a table without `view`) adds no class at all, so the markup stays as it was. */
+export function densityClasses(view, keepsFillEdgeInset) {
+    if (view === undefined)
+        return NO_DENSITY_CLASSES;
+    const classes = DENSITY_CLASSES[view.density];
+    if (!keepsFillEdgeInset || classes.cell === "")
+        return classes;
+    return {
+        ...classes,
+        cell: classes.cell + FILL_EDGE_INSET,
+        header: classes.header + FILL_EDGE_INSET,
+    };
+}

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

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+import type { DataTableExport } from "../../../data-table-view-types.ts";
+export declare function ExportButton({ source }: {
+    readonly source: DataTableExport;
+}): ReactNode;

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

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download } from "lucide-react";
+import { useState } from "react";
+import { useOptionalTranslation } from "../../../index.js";
+import { requestXlsxExport } from "../../lib/export-xlsx-request.js";
+import { saveBlobAsFile } from "../../lib/file-ref-download.js";
+import { Button as UiButton } from "../../ui/button.js";
+function localDateStamp(now) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+export function ExportButton({ source }) {
+    const translate = useOptionalTranslation();
+    const [busy, setBusy] = useState(false);
+    const [outcome, setOutcome] = useState(undefined);
+    const run = async () => {
+        setBusy(true);
+        setOutcome(undefined);
+        const result = await requestXlsxExport(source);
+        setBusy(false);
+        if (result.status === "ok") {
+            saveBlobAsFile(`${source.screenShortId}-${localDateStamp(new Date())}.xlsx`, result.blob);
+        }
+        else {
+            setOutcome(result.status === "too-many" ? { kind: "too-many", maxRows: result.maxRows } : "failed");
+        }
+    };
+    const hint = outcome === undefined
+        ? undefined
+        : outcome === "failed"
+            ? (translate?.("kumiko.list.export-failed") ?? "The export failed. Try again.")
+            : (translate?.("kumiko.list.export-too-many", { max: outcome.maxRows ?? "" }) ??
+                "Too many rows. Narrow the list with a filter and export again.");
+    return (_jsxs(_Fragment, { children: [_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", className: "h-9", disabled: busy, onClick: () => void run(), "data-testid": "list-export", children: [_jsx(Download, { "aria-hidden": "true" }), busy
+                        ? (translate?.("kumiko.list.export-busy") ?? "Exporting…")
+                        : (translate?.("kumiko.list.export") ?? "Export")] }), hint !== undefined && (_jsx("span", { role: outcome === "failed" ? "alert" : "status", className: "text-sm text-muted-foreground", "data-testid": "list-export-hint", children: hint }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import { type DataTableProps } from "../../../index.ts";
+type FacetClusterProps = Pick<DataTableProps, "filterFacets" | "filterValues" | "onFilterChange" | "onFilterReset" | "dateRangeFacets" | "onDateRangeChange" | "rangeFacets" | "onRangeChange" | "resetAll" | "notice"> & {
+    readonly dense: boolean;
+};
+/** The toolbar's filter controls; undefined when the list has none. */
+export declare function buildFacetCluster({ filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, rangeFacets, onRangeChange, resetAll, notice, dense, }: FacetClusterProps): ReactNode | undefined;
+export {};

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+import { DateRangeFacetFilter, FacetFilter } from "../facet-filter.js";
+import { NumberRangeFacetFilter } from "../number-range-facet.js";
+import { ResetAllButton } from "./reset-all-button.js";
+function ListNotice({ notice }) {
+    const translate = useOptionalTranslation();
+    const fallback = notice === "truncated"
+        ? "Not every group is shown. Please narrow the list with a filter."
+        : "The search matched too many entries; groups and totals cover only part of them. Please filter further.";
+    return (_jsx("p", { role: "status", "data-testid": "list-notice", "data-notice": notice, className: "m-0 basis-full text-xs text-muted-foreground", children: translate?.(`kumiko.list.notice.${notice}`) ?? fallback }));
+}
+function FacetResetButton({ onReset }) {
+    const translate = useOptionalTranslation();
+    return (_jsxs(UiButton, { variant: "ghost", size: "sm", className: "h-9 px-2", onClick: onReset, "data-testid": "facet-reset", children: [translate?.("kumiko.list.filter.reset") ?? "Reset", _jsx(X, {})] }));
+}
+/** The toolbar's filter controls; undefined when the list has none. */
+export function buildFacetCluster({ filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, rangeFacets, onRangeChange, resetAll, notice, dense, }) {
+    const hasFacets = filterFacets !== undefined && filterFacets.length > 0 && onFilterChange !== undefined;
+    const hasDateRangeFacets = dateRangeFacets !== undefined && dateRangeFacets.length > 0 && onDateRangeChange !== undefined;
+    const hasRangeFacets = rangeFacets !== undefined && rangeFacets.length > 0 && onRangeChange !== undefined;
+    const hasActiveFilters = filterValues !== undefined && Object.values(filterValues).some((v) => v.length > 0);
+    const showsResetAll = resetAll?.active === true;
+    if (!hasFacets &&
+        !hasDateRangeFacets &&
+        !hasRangeFacets &&
+        !showsResetAll &&
+        notice === undefined) {
+        return undefined;
+    }
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [hasFacets &&
+                filterFacets.map((facet) => (_jsx(FacetFilter, { facet: facet, selected: filterValues?.[facet.field] ?? [], onChange: onFilterChange, dense: dense }, facet.field))), hasDateRangeFacets &&
+                dateRangeFacets.map((facet) => (_jsx(DateRangeFacetFilter, { facet: facet, onChange: onDateRangeChange }, facet.field))), hasRangeFacets &&
+                rangeFacets.map((facet) => (_jsx(NumberRangeFacetFilter, { facet: facet, onChange: onRangeChange }, facet.field))), resetAll === undefined && hasActiveFilters && onFilterReset !== undefined && (_jsx(FacetResetButton, { onReset: onFilterReset })), showsResetAll && _jsx(ResetAllButton, { onReset: resetAll.onReset }), notice !== undefined && _jsx(ListNotice, { notice: notice })] }));
+}

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { DataTableServerGroup, DataTableServerGroups } from "../../../data-table-aggregate-types.ts";
+import type { ListColumnViewModel, ListRowViewModel } from "../../../headless/index.ts";
+type ServerGroupItem = {
+    readonly group: DataTableServerGroup;
+    readonly owner: DataTableServerGroups;
+};
+export type DataTableItem = {
+    readonly kind: "row";
+    readonly row: ListRowViewModel;
+} | ({
+    readonly kind: "serverGroup";
+} & ServerGroupItem) | ({
+    readonly kind: "groupMore";
+} & ServerGroupItem);
+export type DataTableBandItem = Exclude<DataTableItem, {
+    readonly kind: "row";
+}>;
+/** Server groups slice the flat `rows` by each group's `rowCount`, in group order. */
+export declare function buildDataTableItems(rows: readonly ListRowViewModel[], serverGroups: DataTableServerGroups | undefined): readonly DataTableItem[];
+export declare function bandReactKey(item: DataTableBandItem): string;
+export declare function bandTestId(item: DataTableBandItem): string;
+export declare function bandClassName(item: DataTableBandItem): string;
+export declare function GroupBand({ item, columnOf, }: {
+    readonly item: DataTableBandItem;
+    readonly columnOf: (field: string) => ListColumnViewModel | undefined;
+}): ReactNode;
+export {};

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+import { ServerGroupHeader } from "./server-group-header.js";
+/** Server groups slice the flat `rows` by each group's `rowCount`, in group order. */
+export function buildDataTableItems(rows, serverGroups) {
+    if (serverGroups === undefined)
+        return rows.map((row) => ({ kind: "row", row }));
+    const items = [];
+    let offset = 0;
+    for (const group of serverGroups.groups) {
+        items.push({ kind: "serverGroup", group, owner: serverGroups });
+        const members = rows.slice(offset, offset + group.rowCount);
+        offset += group.rowCount;
+        if (group.collapsed)
+            continue;
+        for (const row of members)
+            items.push({ kind: "row", row });
+        if (group.hasMore || group.loading)
+            items.push({ kind: "groupMore", group, owner: serverGroups });
+    }
+    return items;
+}
+function bandGroupKey(item) {
+    return item.group.key;
+}
+export function bandReactKey(item) {
+    return `group-${bandGroupKey(item)}${item.kind === "groupMore" ? "-more" : ""}`;
+}
+export function bandTestId(item) {
+    return `row-group-${bandGroupKey(item)}${item.kind === "groupMore" ? "-more" : ""}`;
+}
+export function bandClassName(item) {
+    return item.kind === "groupMore" ? "p-0" : "bg-muted/40 p-0";
+}
+function GroupLoadMore({ item }) {
+    const translate = useOptionalTranslation();
+    const { group, owner } = item;
+    return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-1.5 text-xs text-muted-foreground", children: [_jsx(UiButton, { type: "button", variant: "ghost", size: "sm", disabled: group.loading, onClick: () => owner.onLoadMore(group.key), "data-testid": `row-group-${group.key}-load-more`, children: group.loading
+                    ? (translate?.("kumiko.list.group.loading") ?? "Loading…")
+                    : (translate?.("kumiko.list.group.load-more") ?? "Load more") }), _jsx("span", { className: "tabular-nums", children: translate?.("kumiko.list.group.loaded", {
+                    loaded: group.rowCount.toLocaleString(),
+                    count: group.count.toLocaleString(),
+                }) ?? `${group.rowCount} / ${group.count}` })] }));
+}
+export function GroupBand({ item, columnOf, }) {
+    switch (item.kind) {
+        case "serverGroup":
+            return (_jsx(ServerGroupHeader, { group: item.group, groupColumn: columnOf(item.owner.field), columnOf: columnOf, onToggle: item.owner.onToggle, onVisible: item.owner.onHeaderVisible }));
+        case "groupMore":
+            return _jsx(GroupLoadMore, { item: item });
+    }
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { DataTableMeasure } from "../../../data-table-aggregate-types.ts";
+import type { ListColumnViewModel } from "../../../headless/index.ts";
+export declare function measureLabel(measure: DataTableMeasure, column: ListColumnViewModel | undefined, translate: ((key: string, params?: Readonly<Record<string, unknown>>) => string) | undefined): string;
+export declare function measureKindLabel(kind: DataTableMeasure["kind"], translate: ((key: string, params?: Readonly<Record<string, unknown>>) => string) | undefined): string;
+/** One measure formatted like its column; a money measure lists every currency. */
+export declare function MeasureValue({ measure, column, }: {
+    readonly measure: DataTableMeasure;
+    readonly column: ListColumnViewModel | undefined;
+}): ReactNode;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isListAggregateCurrencyAmounts } from "@cosmicdrift/kumiko-types/list-aggregate-types";
+import { useOptionalLocale, useOptionalTranslation } from "../../../index.js";
+import { DataTableCell } from "../data-table-cell.js";
+// Money measures arrive in the storage scale (minor units, ×100), one entry per currency.
+const MONEY_STORAGE_SCALE = 100;
+const NO_ROW = {};
+function cellTypeOf(measure, column) {
+    return measure.kind === "count" ? "number" : (column?.type ?? "number");
+}
+export function measureLabel(measure, column, translate) {
+    const label = column?.label ?? measure.field;
+    return (translate?.(`kumiko.list.measure.${measure.kind}`, { label }) ?? `${measure.kind} ${label}`);
+}
+export function measureKindLabel(kind, translate) {
+    return translate?.(`kumiko.list.measure.kind.${kind}`) ?? kind;
+}
+/** One measure formatted like its column; a money measure lists every currency. */
+export function MeasureValue({ measure, column, }) {
+    const translate = useOptionalTranslation();
+    const locale = useOptionalLocale();
+    const type = cellTypeOf(measure, column);
+    const cell = (value, key) => (_jsx(DataTableCell, { value: value, row: NO_ROW, field: measure.field, type: type, renderer: measure.kind === "count" ? undefined : column?.renderer, translate: translate, locale: locale, ...(column?.optionLabels !== undefined && { optionLabels: column.optionLabels }), ...(column?.grouping !== undefined && { grouping: column.grouping }) }, key));
+    const { value } = measure;
+    if (!isListAggregateCurrencyAmounts(value))
+        return cell(value, measure.kind);
+    return (_jsx("span", { className: "inline-flex flex-col items-end", children: value.map((entry) => cell({ amount: entry.value / MONEY_STORAGE_SCALE, currency: entry.currency }, entry.currency)) }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { DataTableColumnPins } from "../../../data-table-view-types.ts";
+export declare function PinSection({ fields, labels, pins, onChange, }: {
+    readonly fields: readonly string[];
+    readonly labels: ReadonlyMap<string, string>;
+    readonly pins: DataTableColumnPins;
+    readonly onChange: (next: DataTableColumnPins) => void;
+}): ReactNode;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeft, PanelRight } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+function togglePin(pins, field, side) {
+    const { [field]: current, ...others } = pins;
+    return current === side ? others : { ...others, [field]: side };
+}
+function PinButton({ field, label, side, pinned, onClick, }) {
+    const translate = useOptionalTranslation();
+    const Icon = side === "left" ? PanelLeft : PanelRight;
+    const ariaLabel = translate?.(`kumiko.list.view.pin-${side}`, { column: label }) ?? `Pin ${label} ${side}`;
+    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-6 aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary/90", "aria-label": ariaLabel, "aria-pressed": pinned, "data-testid": `list-view-pin-${field}-${side}`, onClick: onClick, children: _jsx(Icon, { className: "size-3.5", "aria-hidden": "true" }) }));
+}
+export function PinSection({ fields, labels, pins, onChange, }) {
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col p-0", "data-testid": "list-view-pins", children: fields.map((field) => {
+            const label = labels.get(field) ?? field;
+            return (_jsxs("li", { className: "flex h-8 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm", children: label }), ["left", "right"].map((side) => (_jsx(PinButton, { field: field, label: label, side: side, pinned: pins[field] === side, onClick: () => onChange(togglePin(pins, field, side)) }, side)))] }, field));
+        }) }));
+}

package/dist/web/primitives/data-table/reset-all-button.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function ResetAllButton({ onReset }: {
+    readonly onReset: () => void;
+}): ReactNode;

package/dist/web/primitives/data-table/reset-all-button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+export function ResetAllButton({ onReset }) {
+    const translate = useOptionalTranslation();
+    return (_jsxs(UiButton, { variant: "ghost", size: "sm", className: "h-9 px-2", onClick: onReset, "data-testid": "list-reset-all", children: [translate?.("kumiko.list.reset-all") ?? "Reset", _jsx(X, {})] }));
+}

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { DataTableServerGroup } from "../../../data-table-aggregate-types.ts";
+import type { ListColumnViewModel } from "../../../headless/index.ts";
+/** Header of a server group: toggle, value, server row count and the group's measures. */
+export declare function ServerGroupHeader({ group, groupColumn, columnOf, onToggle, onVisible, }: {
+    readonly group: DataTableServerGroup;
+    readonly groupColumn: ListColumnViewModel | undefined;
+    readonly columnOf: (field: string) => ListColumnViewModel | undefined;
+    readonly onToggle: (key: string) => void;
+    readonly onVisible: (key: string) => void;
+}): ReactNode;

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}`));
+            })] }));
+}