@cosmicdrift/kumiko-renderer 0.388.0 → 0.390.0

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/row-render-parts.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { ListRowViewModel } from "../../../headless/index.ts";
+import { type DataTableBandItem } from "./group-band.tsx";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderExpandToggle(m: DataTableModel, row: ListRowViewModel): ReactNode;
+export declare function renderExpansion(m: DataTableModel, row: ListRowViewModel, as: "row" | "item", colSpan: number): ReactNode;
+export declare function renderBand(m: DataTableModel, item: DataTableBandItem): ReactNode;
+export declare function renderEmptyBlock(m: DataTableModel): ReactNode;

package/dist/web/primitives/data-table/row-render-parts.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableCell, TableRow } from "../../ui/table.js";
+import { cellTitle } from "../data-table-cell.js";
+import { GroupBand } from "./group-band.js";
+import { EXPANSION_CELL_CLASS, EXPANSION_CONTENT_CLASS, RowExpandToggle } from "./table-chrome.js";
+// The expand toggle of a row, shared by table and card layout. Named after
+// the first data column, the one a user recognizes the row by.
+export function renderExpandToggle(m, row) {
+    const { expansion, expandedRowIds, columns, tableTranslate } = m;
+    if (expansion === undefined)
+        return null;
+    const expanded = expandedRowIds?.has(row.id) === true;
+    const firstColumn = columns[0];
+    const title = (firstColumn !== undefined ? cellTitle(row.values[firstColumn.field]) : undefined) ?? "";
+    const labelKey = expanded ? "kumiko.list.row.collapse" : "kumiko.list.row.expand";
+    return (_jsx(RowExpandToggle, { expanded: expanded, controlsId: m.expansionDomId(row), label: tableTranslate?.(labelKey, { title }) ?? `${expanded ? "Collapse" : "Expand"} ${title}`, onToggle: () => expansion.onToggleRowExpanded(row.id), testId: `${m.rowTestId(row)}-toggle` }));
+}
+export function renderExpansion(m, row, as, colSpan) {
+    const { expansion, expandedRowIds } = m;
+    if (expansion === undefined || expandedRowIds?.has(row.id) !== true)
+        return null;
+    const content = expansion.renderExpandedRow(row);
+    if (as === "item") {
+        return (_jsx("li", { id: m.expansionDomId(row), "data-testid": `${m.rowTestId(row)}-expansion`, className: "border-b border-border-row bg-muted px-4 pt-1 pb-3.5", children: content }));
+    }
+    return (_jsx(TableRow, { id: m.expansionDomId(row), "data-testid": `${m.rowTestId(row)}-expansion`, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colSpan, className: EXPANSION_CELL_CLASS, children: _jsx("div", { className: EXPANSION_CONTENT_CLASS, children: content }) }) }));
+}
+export function renderBand(m, item) {
+    return _jsx(GroupBand, { item: item, columnOf: m.columnOf });
+}
+export function renderEmptyBlock(m) {
+    const { testId, chromeless, fillsHeight, emptyState, tableTranslate } = m;
+    return (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-empty` : "render-list-empty", className: cn("flex flex-col items-center justify-center p-12 text-sm text-muted-foreground gap-3", chromeless !== true && !fillsHeight && "rounded-md border border-dashed"), children: emptyState ?? _jsx("span", { children: tableTranslate?.("kumiko.list.no-entries") ?? "No entries." }) }));
+}

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

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-body.d.ts

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../../lib/cn.js";
+import { TableBody, TableCell, TableRow } from "../../ui/table.js";
+import { rowToneClass } from "../data-table-cell.js";
+import { RowActionsCell } from "../row-actions.js";
+import { ActionsBodyCell } from "./actions-column.js";
+import { bandClassName, bandReactKey, bandTestId } from "./group-band.js";
+import { renderBand, renderExpandToggle, renderExpansion } from "./row-render-parts.js";
+import { EXPAND_TOGGLE_CELL_CLASS } from "./table-chrome.js";
+import { renderDataCell } from "./table-data-cell.js";
+import { EXPAND_COLUMN_KEY, SELECT_COLUMN_KEY } from "./use-column-pins.js";
+function renderBandRow(m, item) {
+    return (_jsx(TableRow, { "data-testid": bandTestId(item), children: _jsx(TableCell, { colSpan: m.fullColSpan, className: bandClassName(item), children: renderBand(m, item) }) }, bandReactKey(item)));
+}
+function renderExpandCell(m, row) {
+    const expandBodyPin = m.pins.bodyCell(EXPAND_COLUMN_KEY);
+    return (_jsx(TableCell, { "data-testid": m.getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: cn(EXPAND_TOGGLE_CELL_CLASS, expandBodyPin.className), style: expandBodyPin.style, children: renderExpandToggle(m, row) }));
+}
+function renderActionsCell(m, row, tableActions) {
+    return (_jsx(ActionsBodyCell, { testId: m.getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, fillsHeight: m.fillsHeight, measureContent: m.sizing !== undefined, children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: m.rowActionMode, rowIsLink: m.onRowClick !== undefined }) }));
+}
+function renderDataRow(m, row) {
+    const { rowTone, density, tableActions } = m;
+    const openRow = m.rowOpener(row);
+    const opensOnClick = openRow !== undefined;
+    const keyboard = m.keyboardRow(row.id, openRow);
+    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": m.rowTestId(row), "data-tone": rowTone?.(row), onClick: openRow, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", m.fillsHeight && "h-10 border-border-row hover:bg-muted", density.row, keyboard.className), ...keyboard.props, children: [m.selection.bodyCell(row, m.pins.bodyCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandCell(m, row), m.columns.map((col, colIndex) => renderDataCell(m, row, col, colIndex, opensOnClick)), m.hasTableActions && tableActions !== undefined && renderActionsCell(m, row, tableActions)] }), renderExpansion(m, row, "row", m.fullColSpan)] }, row.id));
+}
+export function renderTableBody(m) {
+    return (_jsx(TableBody, { children: m.tableItems.map((item) => item.kind === "row" ? renderDataRow(m, item.row) : renderBandRow(m, item)) }));
+}

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-content.d.ts

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

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

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfiniteSentinel, Pager } from "../pager.js";
+import { renderCardsView } from "./card-view.js";
+import { renderEmptyBlock } from "./row-render-parts.js";
+import { DataTableFooter } from "./table-footer.js";
+import { renderTableView } from "./table-view.js";
+// The pager is ALWAYS rendered below the table (even with rows=[]) so the
+// user can page back on a filter hit of zero without losing the list.
+// Except total === 0: then there is nothing to paginate. Incompatible with
+// infinite scroll: the caller sets either pager OR onReachEnd.
+function renderPager(m) {
+    const { pager, serverGroups, itemNoun, testId } = m;
+    if (pager === undefined || !(pager.total > 0) || serverGroups !== undefined)
+        return undefined;
+    return (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: m.fillsHeight }));
+}
+function renderSentinel(m, pagerElement) {
+    const { onReachEnd, serverGroups, testId } = m;
+    if (pagerElement !== undefined || onReachEnd === undefined || serverGroups !== undefined) {
+        return undefined;
+    }
+    return (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: m.loadingMore === true, hasMore: m.hasMore !== false, rowsCount: m.rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" }));
+}
+function renderTableBodyContent(m) {
+    if (m.isEmpty)
+        return renderEmptyBlock(m);
+    return m.isNarrow ? renderCardsView(m) : renderTableView(m);
+}
+export function renderTableContent(m) {
+    const { testId, itemNoun, serverGroups } = m;
+    const tableContent = renderTableBodyContent(m);
+    const pagerElement = renderPager(m);
+    const sentinelElement = renderSentinel(m, pagerElement);
+    // With scrollBody the footer (pager, else the entry count) sits OUTSIDE the
+    // scroll surface so it stays put at any row count; the infinite sentinel
+    // stays INSIDE, or it would never intersect the scrollport.
+    if (!m.fillsHeight) {
+        return (_jsxs(_Fragment, { children: [m.selection.bar, tableContent, pagerElement, sentinelElement] }));
+    }
+    return (_jsxs(_Fragment, { children: [m.selection.bar, _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: serverGroups?.totalCount ?? m.rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] }));
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { ListColumnViewModel, ListRowViewModel } from "../../../headless/index.ts";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderDataCell(m: DataTableModel, row: ListRowViewModel, col: ListColumnViewModel, colIndex: number, opensOnClick: boolean): ReactNode;