@calliopelabs/ui 0.14.0 → 0.18.0

package/dist/workbench/DataGrid.js

@@ -0,0 +1,590 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDownIcon, ArrowUpIcon, ChevronDownIcon, ChevronsUpDownIcon, CopyIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, EyeOffIcon, FunnelIcon, Maximize2Icon, PlusIcon, RotateCcwIcon, SearchIcon, Trash2Icon, XIcon, } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { readLocal, subscribeLocal, writeLocal } from "../lib/local-store.js";
+import { Button } from "../primitives/Button.js";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, } from "../primitives/ContextMenu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../primitives/DropdownMenu.js";
+import { useUI } from "../provider/UIProvider.js";
+import { ErrorState } from "../states/ErrorState.js";
+import { LoadingState } from "../states/LoadingState.js";
+import { downloadExport } from "./download.js";
+import { ColumnKeyIcons, ColumnTypeIcon, GridCellValue } from "./GridCell.js";
+import { CellDetailDialog, RowDetailDrawer } from "./GridDetails.js";
+import { EXPORT_FORMATS, exportMatrix, formatMatrix, selectionMatrix, } from "./grid-format.js";
+import { buildColumnMeta, cellText, columnSignature, isNumericType, viewRowIndexes, } from "./grid-model.js";
+import { EMPTY_SELECTION, extendRowSelection, extendSelection, isColumnSelected, isRowSelected, isSelected, moveActive, selectAll, selectCell, selectColumn, selectRow, selectionBounds, selectionSize, toggleCell, } from "./grid-selection.js";
+import { computeStats, formatStatValue, numericSummary } from "./grid-stats.js";
+import { PendingChangesBar } from "./PendingChangesBar.js";
+import { NO_CHANGES, addRow, deleteRows, editCell, insertedKeys, isCellChanged, parseCellInput, pendingCounts, pendingValue, revertRow, toChangeSet, } from "./pending.js";
+import { formatShortcut } from "./keys.js";
+import { TruncationBanner } from "./TruncationBanner.js";
+const ROW_H = 28;
+const HEADER_H = 32;
+const GUTTER_W = 64;
+const DEFAULT_COL_W = 160;
+const MIN_COL_W = 60;
+const MAX_COL_W = 800;
+const RESIZE_STEP = 16;
+/** Rows sampled when fitting a column to its content. */
+const AUTOFIT_SAMPLE = 500;
+const WIDTHS_PREFIX = "calliope-ui:grid-widths:";
+function parseWidths(raw) {
+    if (!raw)
+        return {};
+    try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object")
+            return {};
+        const out = {};
+        for (const [name, width] of Object.entries(parsed)) {
+            if (typeof width === "number" && Number.isFinite(width))
+                out[name] = width;
+        }
+        return out;
+    }
+    catch {
+        return {};
+    }
+}
+const clampWidth = (w) => Math.min(MAX_COL_W, Math.max(MIN_COL_W, Math.round(w)));
+/**
+ * A data grid for query results and table data: rows and columns both
+ * virtualized (50,000 rows by 30 columns is a few hundred nodes), the
+ * WAI-ARIA grid pattern for the keyboard, cell, row and column selection,
+ * sort (NULLs last), filter, hidden and resizable columns, copy and export
+ * in six text formats, selection statistics, cell and row detail, and
+ * optional editing with pending changes the host commits. Host-driven: the
+ * rows come in, changes go out through callbacks, nothing fetches.
+ */
+export function DataGrid(props) {
+    const key = `${props.storageKey ?? ""}\u0000${columnSignature(props.columns)}`;
+    return _jsx(GridSurface, { ...props }, key);
+}
+function GridSurface({ columns: columnsIn, rows, label, loading = false, error, onRetry, totalRows, hasMore = false, storageKey, tableName, exportName, onCopy, onExport, exportFormats, editable = false, onCommit, pending: pendingIn, onPendingChange, toolbar, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const gridId = React.useId();
+    const scrollRef = React.useRef(null);
+    const [sort, setSort] = React.useState(null);
+    const [filterInput, setFilterInput] = React.useState("");
+    const [filter, setFilter] = React.useState("");
+    const [hidden, setHidden] = React.useState([]);
+    const [selection, setSelection] = React.useState(EMPTY_SELECTION);
+    const [scrollLeft, setScrollLeft] = React.useState(0);
+    const [cellDetail, setCellDetail] = React.useState(null);
+    const [rowDetail, setRowDetail] = React.useState(null);
+    const [editing, setEditing] = React.useState(null);
+    const [ownPending, setOwnPending] = React.useState(NO_CHANGES);
+    const [committing, setCommitting] = React.useState(false);
+    const [commitError, setCommitError] = React.useState(null);
+    const pending = pendingIn ?? ownPending;
+    const setPending = (next) => {
+        if (pendingIn === undefined)
+            setOwnPending(next);
+        onPendingChange?.(next);
+    };
+    // Widths: the stored ones, with a drag in progress on top.
+    const storeKey = storageKey ? WIDTHS_PREFIX + storageKey : null;
+    const stored = React.useSyncExternalStore(subscribeLocal, () => (storeKey ? readLocal(storeKey) : null), () => null);
+    const [localWidths, setLocalWidths] = React.useState({});
+    const widths = React.useMemo(() => ({ ...parseWidths(stored), ...localWidths }), [stored, localWidths]);
+    const saveWidth = (name, width) => {
+        const next = { ...widths, [name]: clampWidth(width) };
+        setLocalWidths(next);
+        if (storeKey)
+            writeLocal(storeKey, JSON.stringify(next));
+    };
+    const meta = React.useMemo(() => buildColumnMeta(columnsIn, rows), [columnsIn, rows]);
+    const columns = React.useMemo(() => meta.filter((c) => !hidden.includes(c.name)), [meta, hidden]);
+    const names = React.useMemo(() => columns.map((c) => c.name), [columns]);
+    const primaryKeys = React.useMemo(() => meta.filter((c) => c.primaryKey).map((c) => c.name), [meta]);
+    React.useEffect(() => {
+        if (filterInput === filter)
+            return;
+        // Scanning every cell of a 50k-row result per keystroke is the one thing that can make it slow.
+        const timer = window.setTimeout(() => setFilter(filterInput), 150);
+        return () => window.clearTimeout(timer);
+    }, [filterInput, filter]);
+    /** Row keys in view order: source rows filtered and sorted, then rows inserted while editing. */
+    const viewKeys = React.useMemo(() => {
+        const keys = viewRowIndexes(rows, names, filter, sort);
+        return editable ? keys.concat(insertedKeys(pending)) : keys;
+    }, [rows, names, filter, sort, editable, pending]);
+    const rowCount = viewKeys.length;
+    const colCount = columns.length;
+    const widthOf = React.useCallback((name) => widths[name] ?? DEFAULT_COL_W, [widths]);
+    const totalWidth = columns.reduce((sum, c) => sum + widthOf(c.name), 0);
+    // eslint-disable-next-line react-hooks/incompatible-library -- the virtualizer is read during render by design
+    const rowVirtualizer = useVirtualizer({
+        count: rowCount,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => ROW_H,
+        overscan: 12,
+        paddingStart: HEADER_H,
+    });
+    const columnVirtualizer = useVirtualizer({
+        horizontal: true,
+        count: colCount,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: (index) => widthOf(columns[index]?.name ?? ""),
+        overscan: 3,
+        paddingStart: GUTTER_W,
+    });
+    React.useEffect(() => {
+        columnVirtualizer.measure();
+    }, [columnVirtualizer, widths, columns]);
+    const sourceOf = React.useCallback((key) => (key >= 0 ? rows[key] : undefined), [rows]);
+    const valueAt = React.useCallback((row, col) => {
+        const key = viewKeys[row];
+        const column = names[col];
+        if (key === undefined || column === undefined)
+            return undefined;
+        return pendingValue(pending, key, column, sourceOf(key));
+    }, [viewKeys, names, pending, sourceOf]);
+    const rowAt = (row) => {
+        const key = viewKeys[row];
+        if (key === undefined)
+            return {};
+        return pending.rows.get(key)?.values ?? sourceOf(key) ?? {};
+    };
+    function canEdit(key) {
+        if (!editable || key === undefined)
+            return false;
+        const state = pending.rows.get(key)?.state;
+        if (state === "deleted")
+            return false;
+        return state === "added" || primaryKeys.length > 0;
+    }
+    function reveal(cell) {
+        rowVirtualizer.scrollToIndex(cell.row, { align: "auto" });
+        columnVirtualizer.scrollToIndex(cell.col, { align: "auto" });
+    }
+    function focusGrid() {
+        scrollRef.current?.focus({ preventScroll: true });
+    }
+    const copyMatrix = () => {
+        if (selection.ranges.length > 0)
+            return selectionMatrix(selection, names, valueAt);
+        return {
+            headers: names,
+            rows: viewKeys.map((_, row) => names.map((_, col) => valueAt(row, col))),
+        };
+    };
+    function copyAs(format) {
+        const matrix = copyMatrix();
+        if (matrix.rows.length === 0)
+            return;
+        const text = formatMatrix(format, matrix, { tableName });
+        const cells = matrix.rows.length * matrix.headers.length;
+        void navigator.clipboard?.writeText(text).then(() => onCopy?.({ format, text, cells }), () => { });
+    }
+    function runExport(format) {
+        const matrix = {
+            headers: names,
+            rows: viewKeys.map((_, row) => names.map((_, col) => valueAt(row, col))),
+        };
+        const own = EXPORT_FORMATS.includes(format);
+        const file = own
+            ? exportMatrix(format, matrix, { tableName, baseName: exportName })
+            : null;
+        if (onExport)
+            onExport({ format, matrix, file });
+        else if (file)
+            downloadExport(file);
+    }
+    function startEdit(cell, seed) {
+        const key = viewKeys[cell.row];
+        if (key === undefined || !canEdit(key) || !names[cell.col])
+            return false;
+        reveal(cell);
+        setEditing({ key, col: cell.col, seed });
+        return true;
+    }
+    function finishEdit(text, move) {
+        if (!editing)
+            return;
+        const column = columns[editing.col];
+        if (text !== null && column) {
+            const original = pendingValue(pending, editing.key, column.name, sourceOf(editing.key));
+            const value = parseCellInput(text, original, column.type);
+            if (!Object.is(value, original)) {
+                setPending(editCell(pending, editing.key, column.name, value, sourceOf(editing.key)));
+            }
+        }
+        setEditing(null);
+        const active = selection.active;
+        if (move && active) {
+            const next = moveActive(selection, { row: active.row + move.row, col: active.col + move.col }, rowCount, colCount, false);
+            setSelection(next);
+            if (next.active)
+                reveal(next.active);
+        }
+        focusGrid();
+    }
+    /** Rows covered by the selection (or the active row), as keys. */
+    function selectedKeys() {
+        const bounds = selectionBounds(selection);
+        if (!bounds)
+            return [];
+        const keys = [];
+        for (let row = bounds.minRow; row <= bounds.maxRow; row++) {
+            const key = viewKeys[row];
+            if (key !== undefined)
+                keys.push(key);
+        }
+        return keys;
+    }
+    const deletable = (editable ? selectedKeys() : []).filter((key) => pending.rows.get(key)?.state === "added" || (primaryKeys.length > 0 && key >= 0));
+    function addNewRow(from) {
+        const { changes } = addRow(pending, meta.map((c) => c.name), from);
+        setPending(changes);
+        // The new row is last in view.
+        const cell = { row: rowCount, col: 0 };
+        setSelection(selectCell(cell));
+        requestAnimationFrame(() => reveal(cell));
+    }
+    async function commit() {
+        if (!onCommit || committing)
+            return;
+        const changeSet = toChangeSet(pending, { columns: meta.map((c) => c.name), primaryKeys });
+        setCommitting(true);
+        setCommitError(null);
+        try {
+            await onCommit(changeSet);
+            setPending(NO_CHANGES);
+        }
+        catch (reason) {
+            const failure = reason;
+            const message = typeof failure?.message === "string" && failure.message !== ""
+                ? failure.message
+                : String(reason);
+            const row = typeof failure?.key === "number" ? viewKeys.indexOf(failure.key) : -1;
+            setCommitError({ message, row: row >= 0 ? row + 1 : null });
+        }
+        finally {
+            setCommitting(false);
+        }
+    }
+    function handleKeyDown(event) {
+        // Keys typed into a header control or the cell editor are theirs.
+        if (event.target !== event.currentTarget)
+            return;
+        if (rowCount === 0 || colCount === 0)
+            return;
+        const mod = event.metaKey || event.ctrlKey;
+        const active = selection.active ?? { row: 0, col: 0 };
+        const viewport = scrollRef.current?.clientHeight ?? ROW_H * 20;
+        const page = Math.max(1, Math.floor((viewport - HEADER_H) / ROW_H) - 1);
+        const go = (row, col) => {
+            event.preventDefault();
+            // The first move lands on the first cell rather than skipping it.
+            const to = selection.active ? { row, col } : { row: 0, col: 0 };
+            const next = moveActive(selection, to, rowCount, colCount, event.shiftKey);
+            setSelection(next);
+            if (next.active)
+                reveal(next.active);
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                return go(active.row + 1, active.col);
+            case "ArrowUp":
+                return go(active.row - 1, active.col);
+            case "ArrowRight":
+                return go(active.row, active.col + 1);
+            case "ArrowLeft":
+                return go(active.row, active.col - 1);
+            case "PageDown":
+                return go(active.row + page, active.col);
+            case "PageUp":
+                return go(active.row - page, active.col);
+            case "Home":
+                return go(mod ? 0 : active.row, 0);
+            case "End":
+                return go(mod ? rowCount - 1 : active.row, colCount - 1);
+            case "Enter":
+                event.preventDefault();
+                if (event.shiftKey)
+                    setRowDetail(active.row);
+                else if (!startEdit(active))
+                    setCellDetail(active);
+                return;
+            case "F2":
+                event.preventDefault();
+                startEdit(active);
+                return;
+            case "Escape":
+                if (selection.ranges.length === 0)
+                    return;
+                event.preventDefault();
+                setSelection(EMPTY_SELECTION);
+                return;
+            default:
+                break;
+        }
+        if (mod && (event.key === "a" || event.key === "A")) {
+            event.preventDefault();
+            setSelection(selectAll(rowCount, colCount));
+            return;
+        }
+        if (mod && (event.key === "c" || event.key === "C")) {
+            event.preventDefault();
+            copyAs(event.shiftKey ? "tsv-headers" : "tsv");
+            return;
+        }
+        // Typing a character starts an edit with it, as a spreadsheet does.
+        if (!mod && !event.altKey && event.key.length === 1 && editable && selection.active) {
+            if (startEdit(selection.active, event.key))
+                event.preventDefault();
+        }
+    }
+    function handleCellMouseDown(event, cell) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        focusGrid();
+        if (event.shiftKey)
+            setSelection((prev) => extendSelection(prev, cell));
+        else if (event.metaKey || event.ctrlKey)
+            setSelection((prev) => toggleCell(prev, cell));
+        else
+            setSelection(selectCell(cell));
+    }
+    function autoFit(name) {
+        let longest = name.length;
+        const sample = Math.min(viewKeys.length, AUTOFIT_SAMPLE);
+        const col = names.indexOf(name);
+        for (let row = 0; row < sample; row++) {
+            longest = Math.max(longest, cellText(valueAt(row, col)).length);
+        }
+        // Monospace text-xs is a shade over 7px a character; 48px is the padding and the controls.
+        saveWidth(name, longest * 7.3 + 48);
+    }
+    const selectedCount = selectionSize(selection);
+    const activeColumn = selection.active ? names[selection.active.col] : undefined;
+    const activeValue = selection.active
+        ? cellText(valueAt(selection.active.row, selection.active.col))
+        : undefined;
+    const footer = React.useMemo(() => {
+        const bounds = selectionBounds(selection);
+        if (!bounds)
+            return null;
+        const wholeColumn = rowCount > 0 &&
+            bounds.minCol === bounds.maxCol &&
+            bounds.minRow === 0 &&
+            bounds.maxRow === rowCount - 1;
+        if (wholeColumn) {
+            const column = names[bounds.minCol];
+            if (column !== undefined) {
+                return {
+                    kind: "column",
+                    name: column,
+                    stats: computeStats(viewKeys.map((_, row) => valueAt(row, bounds.minCol))),
+                };
+            }
+        }
+        const values = [];
+        for (let row = bounds.minRow; row <= bounds.maxRow; row++) {
+            for (let col = bounds.minCol; col <= bounds.maxCol; col++) {
+                if (isSelected(selection, row, col))
+                    values.push(valueAt(row, col));
+            }
+        }
+        return { kind: "selection", summary: numericSummary(values) };
+    }, [selection, rowCount, names, viewKeys, valueAt]);
+    const counts = pendingCounts(pending);
+    const truncated = rows.length > 0 && totalRows != null && totalRows > rows.length
+        ? t.gridTruncated(rows.length, totalRows)
+        : rows.length > 0 && hasMore
+            ? t.gridTruncated(rows.length, null)
+            : null;
+    const errorMessage = typeof error === "string" ? error : error?.message;
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const activeId = selection.active &&
+        virtualRows.some((v) => v.index === selection.active?.row) &&
+        virtualColumns.some((v) => v.index === selection.active?.col)
+        ? `${gridId}-${selection.active.row}-${selection.active.col}`
+        : undefined;
+    const extraFormats = onExport ? (exportFormats ?? []) : [];
+    const detailCell = cellDetail && names[cellDetail.col] !== undefined ? cellDetail : null;
+    const detailRow = rowDetail !== null && rowDetail < rowCount ? rowDetail : null;
+    let body;
+    if (error) {
+        body = (_jsx(ErrorState, { title: t.gridLoadFailed, error: errorMessage || t.gridLoadFailed, onRetry: onRetry, retryLabel: t.retry }));
+    }
+    else if (loading && rows.length === 0) {
+        body = _jsx(LoadingState, { label: t.gridLoading, rows: 8 });
+    }
+    else {
+        body = (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("div", { ref: scrollRef, role: "grid", tabIndex: 0, "aria-label": label ?? t.gridLabel, "aria-rowcount": rowCount + 1, "aria-colcount": colCount + 1, "aria-multiselectable": true, "aria-busy": loading || undefined, "aria-activedescendant": activeId, onKeyDown: handleKeyDown, onScroll: (event) => {
+                            const left = event.currentTarget.scrollLeft;
+                            setScrollLeft((prev) => (prev === left ? prev : left));
+                        }, className: "relative min-h-0 flex-1 overflow-auto font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset", children: [_jsxs("div", { role: "rowgroup", className: "relative", style: {
+                                    width: GUTTER_W + totalWidth,
+                                    height: Math.max(rowVirtualizer.getTotalSize(), HEADER_H),
+                                }, children: [_jsxs("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-20 bg-muted", style: { height: HEADER_H, width: GUTTER_W + totalWidth }, children: [_jsx("div", { role: "columnheader", "aria-colindex": 1, className: "absolute top-0 left-0 z-10 flex h-full border-r border-b bg-muted", style: { width: GUTTER_W, transform: `translateX(${scrollLeft}px)` }, children: _jsx("button", { type: "button", "aria-label": t.gridSelectAll, className: "flex flex-1 items-center justify-center text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", onClick: () => {
+                                                        setSelection(selectAll(rowCount, colCount));
+                                                        focusGrid();
+                                                    }, children: "#" }) }), virtualColumns.map((vc) => {
+                                                const column = columns[vc.index];
+                                                if (!column)
+                                                    return null;
+                                                return (_jsx(HeaderCell, { column: column, index: vc.index, left: vc.start, width: vc.size, sort: sort?.column === column.name ? sort.direction : null, selected: isColumnSelected(selection, vc.index, rowCount), hiddenCount: hidden.length, activeValue: activeColumn === column.name ? activeValue : undefined, onSort: (direction) => setSort(direction ? { column: column.name, direction } : null), onSelect: (additive) => {
+                                                        setSelection((prev) => selectColumn(prev, vc.index, rowCount, additive));
+                                                        focusGrid();
+                                                    }, onResize: (width) => saveWidth(column.name, width), onResizing: (width) => setLocalWidths((prev) => ({ ...prev, [column.name]: clampWidth(width) })), onAutoFit: () => autoFit(column.name), onHide: () => {
+                                                        setHidden((prev) => [...prev, column.name]);
+                                                        setSelection(EMPTY_SELECTION);
+                                                    }, onShowAll: () => setHidden([]), onFilterByValue: (value) => {
+                                                        setFilterInput(value);
+                                                        setFilter(value);
+                                                    }, onCopyName: () => void navigator.clipboard?.writeText(column.name) }, column.name));
+                                            })] }), virtualRows.map((vr) => {
+                                        const key = viewKeys[vr.index];
+                                        if (key === undefined)
+                                            return null;
+                                        const state = pending.rows.get(key)?.state;
+                                        const rowSelected = isRowSelected(selection, vr.index, colCount);
+                                        const failed = commitError?.row === vr.index + 1;
+                                        return (_jsxs("div", { role: "row", "aria-rowindex": vr.index + 2, "aria-selected": rowSelected, "data-state": state, className: cn("absolute top-0 left-0", vr.index % 2 === 1 && "bg-muted/30", state === "deleted" && "text-muted-foreground", failed && "ring-1 ring-danger ring-inset"), style: {
+                                                height: vr.size,
+                                                width: GUTTER_W + totalWidth,
+                                                transform: `translateY(${vr.start}px)`,
+                                            }, children: [_jsxs("div", { role: "rowheader", "aria-colindex": 1, className: cn("absolute top-0 left-0 z-10 flex h-full cursor-pointer items-center justify-end gap-1 border-r border-b bg-muted px-2 text-muted-foreground tabular-nums select-none", state && "border-l-2", state === "added" && "border-l-success", state === "modified" && "border-l-warning", state === "deleted" && "border-l-danger", rowSelected && "bg-primary/15 text-foreground"), style: { width: GUTTER_W, transform: `translateX(${scrollLeft}px)` }, onMouseDown: (event) => {
+                                                        if (event.button !== 0)
+                                                            return;
+                                                        event.preventDefault();
+                                                        if (event.shiftKey)
+                                                            setSelection((prev) => extendRowSelection(prev, vr.index, colCount));
+                                                        else
+                                                            setSelection((prev) => selectRow(prev, vr.index, colCount, event.metaKey || event.ctrlKey));
+                                                        focusGrid();
+                                                    }, children: [key < 0 ? "+" : (vr.index + 1).toLocaleString(), state && _jsx("span", { className: "sr-only", children: ` ${t.gridRowState(state)}` })] }), virtualColumns.map((vc) => {
+                                                    const column = columns[vc.index];
+                                                    if (!column)
+                                                        return null;
+                                                    const value = pendingValue(pending, key, column.name, sourceOf(key));
+                                                    const cell = { row: vr.index, col: vc.index };
+                                                    const selected = isSelected(selection, cell.row, cell.col);
+                                                    const active = selection.active?.row === cell.row && selection.active.col === cell.col;
+                                                    const isEditing = editing?.key === key && editing.col === vc.index;
+                                                    const changed = isCellChanged(pending, key, column.name);
+                                                    return (_jsx("div", { id: `${gridId}-${cell.row}-${cell.col}`, role: "gridcell", "aria-colindex": vc.index + 2, "aria-selected": selected, "aria-readonly": editable ? !canEdit(key) : undefined, title: isEditing ? undefined : cellText(value), className: cn("absolute top-0 flex h-full items-center overflow-hidden border-r border-b px-2", isNumericType(column.type) || typeof value === "number"
+                                                            ? "justify-end tabular-nums"
+                                                            : "justify-start", state === "deleted" && "line-through", changed && "bg-warning/15", state === "added" && "bg-success/10", selected && "bg-primary/15", active && "ring-2 ring-ring ring-inset", isEditing && "p-0"), style: { left: vc.start, width: vc.size }, onMouseDown: (event) => {
+                                                            if (!isEditing)
+                                                                handleCellMouseDown(event, cell);
+                                                        }, onDoubleClick: () => {
+                                                            if (!startEdit(cell))
+                                                                setCellDetail(cell);
+                                                        }, onContextMenu: () => {
+                                                            if (!isSelected(selection, cell.row, cell.col))
+                                                                setSelection(selectCell(cell));
+                                                        }, children: isEditing ? (_jsx(CellEditor, { label: t.gridEditCell(column.name), initial: editing.seed ?? cellText(value), numeric: isNumericType(column.type), onDone: finishEdit })) : (_jsx(GridCellValue, { value: value })) }, column.name));
+                                                })] }, key));
+                                    })] }), rowCount === 0 && (_jsx("p", { className: "absolute inset-x-0 py-8 text-center font-sans text-sm text-muted-foreground", style: { top: HEADER_H }, children: rows.length === 0 ? t.gridNoRows : t.gridNoMatches }))] }) }), _jsxs(ContextMenuContent, { className: "w-60", children: [_jsxs(ContextMenuItem, { onSelect: () => copyAs("tsv"), children: [_jsx(CopyIcon, { "aria-hidden": true }), t.gridCopy, _jsx(ContextMenuShortcut, { children: formatShortcut("Mod+C") })] }), _jsxs(ContextMenuItem, { onSelect: () => copyAs("tsv-headers"), children: [_jsx(CopyIcon, { "aria-hidden": true }), t.gridCopyWithHeaders, _jsx(ContextMenuShortcut, { children: formatShortcut("Mod+Shift+C") })] }), _jsx(ContextMenuLabel, { children: t.gridCopyAs }), ["csv", "json", "insert", "markdown"].map((format) => (_jsx(ContextMenuItem, { onSelect: () => copyAs(format), children: t.gridCopyFormat(format) }, format))), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: selection.active === null, onSelect: () => selection.active && setRowDetail(selection.active.row), children: [_jsx(Maximize2Icon, { "aria-hidden": true }), t.gridRowDetail, _jsx(ContextMenuShortcut, { children: formatShortcut("Shift+Enter") })] }), _jsxs(ContextMenuItem, { disabled: selection.active === null, onSelect: () => selection.active && setCellDetail(selection.active), children: [_jsx(Maximize2Icon, { "aria-hidden": true }), t.gridCellDetail] }), editable && (_jsxs(_Fragment, { children: [_jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { onSelect: () => addNewRow(), children: [_jsx(PlusIcon, { "aria-hidden": true }), t.gridAddRow] }), _jsxs(ContextMenuItem, { disabled: selection.active === null, onSelect: () => selection.active && addNewRow(rowAt(selection.active.row)), children: [_jsx(CopyIcon, { "aria-hidden": true }), t.gridDuplicateRow] }), _jsxs(ContextMenuItem, { variant: "destructive", disabled: deletable.length === 0, onSelect: () => setPending(deleteRows(pending, deletable, sourceOf)), children: [_jsx(Trash2Icon, { "aria-hidden": true }), t.gridDeleteRows(deletable.length)] }), _jsxs(ContextMenuItem, { disabled: !selection.active || !pending.rows.has(viewKeys[selection.active.row] ?? NaN), onSelect: () => {
+                                        const key = selection.active ? viewKeys[selection.active.row] : undefined;
+                                        if (key !== undefined)
+                                            setPending(revertRow(pending, key));
+                                    }, children: [_jsx(RotateCcwIcon, { "aria-hidden": true }), t.gridRevertRow] })] })), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { onSelect: () => setSelection(EMPTY_SELECTION), children: [t.gridClearSelection, _jsx(ContextMenuShortcut, { children: formatShortcut("Escape") })] })] })] }));
+    }
+    return (_jsxs("div", { "data-slot": "data-grid", className: cn("flex min-h-0 min-w-0 flex-col bg-background text-sm", className), children: [_jsxs("div", { className: "flex min-h-9 shrink-0 flex-wrap items-center gap-2 border-b bg-muted/40 px-2 py-1 text-xs", children: [_jsxs("span", { className: "text-muted-foreground tabular-nums", children: [t.gridRows(rowCount, rows.length + (editable ? insertedKeys(pending).length : 0)), ", ", t.gridColumns(colCount)] }), _jsxs("label", { className: "flex h-7 max-w-xs min-w-32 flex-1 items-center gap-1 rounded-lg border bg-background px-2 focus-within:ring-2 focus-within:ring-ring/50", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: t.gridFilter }), _jsx("input", { type: "search", value: filterInput, onChange: (event) => setFilterInput(event.target.value), placeholder: t.gridFilter, className: "w-full min-w-0 bg-transparent outline-none placeholder:text-muted-foreground" }), filterInput && (_jsx("button", { type: "button", "aria-label": t.gridClearFilter, className: "text-muted-foreground hover:text-foreground", onClick: () => {
+                                    setFilterInput("");
+                                    setFilter("");
+                                }, children: _jsx(XIcon, { "aria-hidden": true, className: "size-3" }) }))] }), hidden.length > 0 && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => setHidden([]), children: [_jsx(EyeIcon, { "aria-hidden": true }), t.gridHidden(hidden.length)] })), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [editable && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => addNewRow(), children: [_jsx(PlusIcon, { "aria-hidden": true }), t.gridAddRow] }), _jsxs(Button, { variant: "ghost", size: "xs", disabled: deletable.length === 0, onClick: () => setPending(deleteRows(pending, deletable, sourceOf)), children: [_jsx(Trash2Icon, { "aria-hidden": true }), t.gridDeleteRows(Math.max(deletable.length, 1))] })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", disabled: rowCount === 0, children: [_jsx(DownloadIcon, { "aria-hidden": true }), t.gridExport, _jsx(ChevronDownIcon, { "aria-hidden": true })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: t.gridExportScope(rowCount, colCount) }), _jsx(DropdownMenuSeparator, {}), EXPORT_FORMATS.map((format) => (_jsx(DropdownMenuItem, { onSelect: () => runExport(format), children: t.gridExportFormat(format) }, format))), extraFormats.length > 0 && _jsx(DropdownMenuSeparator, {}), extraFormats.map((format) => (_jsx(DropdownMenuItem, { onSelect: () => runExport(format.id), children: format.label }, format.id)))] })] }), toolbar] })] }), truncated && _jsx(TruncationBanner, { children: truncated }), editable && (_jsx(PendingChangesBar, { counts: counts, committing: committing, error: commitError?.message, errorRow: commitError?.row, note: primaryKeys.length === 0 ? t.gridNoPrimaryKey : null, onCommit: () => void commit(), onDiscard: () => {
+                    setPending(NO_CHANGES);
+                    setCommitError(null);
+                } })), body, footer && (_jsxs("section", { "aria-label": t.gridStatistics, className: "flex min-h-8 shrink-0 flex-wrap items-center gap-x-4 gap-y-1 border-t bg-muted/40 px-3 py-1 text-xs text-muted-foreground", children: [footer.kind === "column" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-foreground", children: footer.name }), _jsx(Stat, { label: t.gridStat("rows"), value: footer.stats.count.toLocaleString() }), _jsx(Stat, { label: t.gridStat("nulls"), value: footer.stats.nulls.toLocaleString() }), _jsx(Stat, { label: t.gridStat("distinct"), value: footer.stats.distinct.toLocaleString() }), footer.stats.min !== undefined && (_jsx(Stat, { label: t.gridStat("min"), value: formatStatValue(footer.stats.min) })), footer.stats.max !== undefined && (_jsx(Stat, { label: t.gridStat("max"), value: formatStatValue(footer.stats.max) })), footer.stats.numeric && (_jsxs(_Fragment, { children: [_jsx(Stat, { label: t.gridStat("avg"), value: formatStatValue(footer.stats.avg) }), _jsx(Stat, { label: t.gridStat("sum"), value: formatStatValue(footer.stats.sum) })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground tabular-nums", children: t.gridSelected(selectedCount) }), footer.summary ? (_jsxs(_Fragment, { children: [_jsx(Stat, { label: t.gridStat("sum"), value: formatStatValue(footer.summary.sum) }), _jsx(Stat, { label: t.gridStat("avg"), value: formatStatValue(footer.summary.avg) }), _jsx(Stat, { label: t.gridStat("min"), value: formatStatValue(footer.summary.min) }), _jsx(Stat, { label: t.gridStat("max"), value: formatStatValue(footer.summary.max) })] })) : (_jsx("span", { children: t.gridNoNumeric }))] })), _jsx(Button, { variant: "ghost", size: "icon-xs", className: "ml-auto", "aria-label": t.gridClearSelection, onClick: () => setSelection(EMPTY_SELECTION), children: _jsx(XIcon, { "aria-hidden": true }) })] })), detailCell && (_jsx(CellDetailDialog, { open: true, onOpenChange: (open) => !open && setCellDetail(null), column: names[detailCell.col] ?? "", value: valueAt(detailCell.row, detailCell.col) })), detailRow !== null && (_jsx(RowDetailDrawer, { open: true, onOpenChange: (open) => !open && setRowDetail(null), row: rowAt(detailRow), columns: columns, rowNumber: detailRow + 1, rowTotal: rowCount, onNavigate: (delta) => setRowDetail((prev) => prev === null ? prev : Math.min(Math.max(prev + delta, 0), rowCount - 1)) }))] }));
+}
+function Stat({ label, value }) {
+    return (_jsxs("span", { children: [label, ": ", _jsx("span", { className: "text-foreground tabular-nums", children: value })] }));
+}
+/** The input a cell edits in. Enter keeps and moves down, Tab keeps and moves across, Escape cancels. */
+function CellEditor({ label, initial, numeric, onDone, }) {
+    const [text, setText] = React.useState(initial);
+    const done = React.useRef(false);
+    const finish = (value, move) => {
+        if (done.current)
+            return;
+        done.current = true;
+        onDone(value, move);
+    };
+    return (_jsx("input", { 
+        // The editor exists because the person asked to edit: it takes focus.
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: true, "aria-label": label, value: text, inputMode: numeric ? "decimal" : undefined, onFocus: (event) => {
+            if (text === initial && initial.length > 1)
+                event.currentTarget.select();
+        }, onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                finish(text, { row: event.shiftKey ? -1 : 1, col: 0 });
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                finish(null, null);
+            }
+            else if (event.key === "Tab") {
+                event.preventDefault();
+                finish(text, { row: 0, col: event.shiftKey ? -1 : 1 });
+            }
+        }, onBlur: () => finish(text, null), className: "size-full bg-background px-2 font-mono text-xs ring-2 ring-ring outline-none ring-inset" }));
+}
+/**
+ * One column header: what the column is, how it sorts, and what can be done
+ * to it. The name selects the column; sorting is its own button, so a click
+ * never does both.
+ */
+function HeaderCell({ column, index, left, width, sort, selected, hiddenCount, activeValue, onSort, onSelect, onResize, onResizing, onAutoFit, onHide, onShowAll, onFilterByValue, onCopyName, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const typeLabel = column.dataType ?? t.gridType(column.type);
+    function startDrag(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const startX = event.clientX;
+        let latest = width;
+        const move = (e) => {
+            latest = clampWidth(width + e.clientX - startX);
+            onResizing(latest);
+        };
+        const up = () => {
+            handle.removeEventListener("pointermove", move);
+            handle.removeEventListener("pointerup", up);
+            handle.removeEventListener("pointercancel", up);
+            onResize(latest);
+        };
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", up);
+        handle.addEventListener("pointercancel", up);
+    }
+    return (_jsxs("div", { role: "columnheader", "aria-colindex": index + 2, "aria-sort": sort === "asc" ? "ascending" : sort === "desc" ? "descending" : undefined, "aria-selected": selected, className: cn("group absolute top-0 flex h-full items-center gap-1 overflow-hidden border-r border-b pr-2 pl-2 font-sans font-medium", selected ? "bg-primary/15 text-foreground" : "text-muted-foreground"), style: { left, width }, children: [_jsx(ColumnTypeIcon, { type: column.type }), _jsx("button", { type: "button", className: "min-w-0 flex-1 truncate rounded-sm text-left outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", title: `${column.name} (${typeLabel}${column.nullable === false ? `, ${t.gridNotNull}` : ""})${column.references ? ` → ${column.references}` : ""}`, onClick: (event) => onSelect(event.metaKey || event.ctrlKey), onDoubleClick: onAutoFit, children: column.name }), column.nullable === true && (_jsx("span", { className: "shrink-0 text-muted-foreground", title: t.gridNullable, "aria-hidden": true, children: "?" })), _jsx(ColumnKeyIcons, { column: column }), _jsx("button", { type: "button", "aria-label": t.gridSortBy(column.name), className: cn("shrink-0 rounded-sm outline-none hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50", sort ? "text-foreground" : "opacity-40 group-hover:opacity-100"), onClick: () => onSort(sort === "asc" ? "desc" : sort === "desc" ? null : "asc"), children: sort === "asc" ? (_jsx(ArrowUpIcon, { "aria-hidden": true, className: "size-3" })) : sort === "desc" ? (_jsx(ArrowDownIcon, { "aria-hidden": true, className: "size-3" })) : (_jsx(ChevronsUpDownIcon, { "aria-hidden": true, className: "size-3" })) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": t.gridColumnMenu(column.name), className: "shrink-0 rounded-sm opacity-40 outline-none group-hover:opacity-100 hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:opacity-100", children: _jsx(EllipsisVerticalIcon, { "aria-hidden": true, className: "size-3" }) }), _jsxs(DropdownMenuContent, { className: "w-56", children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: "truncate font-mono", children: column.name }), _jsx("span", { className: "ml-auto font-normal text-muted-foreground", children: typeLabel })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => onSort("asc"), children: [_jsx(ArrowUpIcon, { "aria-hidden": true }), t.gridSortAscending] }), _jsxs(DropdownMenuItem, { onSelect: () => onSort("desc"), children: [_jsx(ArrowDownIcon, { "aria-hidden": true }), t.gridSortDescending] }), sort && (_jsxs(DropdownMenuItem, { onSelect: () => onSort(null), children: [_jsx(XIcon, { "aria-hidden": true }), t.gridClearSort] })), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: activeValue === undefined, onSelect: () => activeValue !== undefined && onFilterByValue(activeValue), children: [_jsx(FunnelIcon, { "aria-hidden": true }), _jsx("span", { className: "truncate", children: t.gridFilterByValue(activeValue ?? null) })] }), _jsxs(DropdownMenuItem, { onSelect: onHide, children: [_jsx(EyeOffIcon, { "aria-hidden": true }), t.gridHideColumn] }), hiddenCount > 0 && (_jsxs(DropdownMenuItem, { onSelect: onShowAll, children: [_jsx(EyeIcon, { "aria-hidden": true }), t.gridShowAllColumns(hiddenCount)] })), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: onCopyName, children: [_jsx(CopyIcon, { "aria-hidden": true }), t.gridCopyColumnName] })] })] }), _jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": t.gridResizeColumn(column.name), "aria-valuenow": width, "aria-valuemin": MIN_COL_W, "aria-valuemax": MAX_COL_W, onPointerDown: startDrag, onDoubleClick: onAutoFit, onKeyDown: (event) => {
+                    const step = event.shiftKey ? RESIZE_STEP * 4 : RESIZE_STEP;
+                    const next = event.key === "ArrowRight"
+                        ? width + step
+                        : event.key === "ArrowLeft"
+                            ? width - step
+                            : event.key === "Home"
+                                ? MIN_COL_W
+                                : event.key === "End"
+                                    ? MAX_COL_W
+                                    : event.key === "Enter"
+                                        ? null
+                                        : undefined;
+                    if (next === undefined)
+                        return;
+                    event.preventDefault();
+                    if (next === null)
+                        onAutoFit();
+                    else
+                        onResize(next);
+                }, className: "absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none outline-none select-none hover:bg-primary/50 focus-visible:bg-ring" })] }));
+}

package/dist/workbench/DataProfile.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type GridColumn, type GridRow } from "./grid-model.js";
+export interface DataProfileProps {
+    columns: readonly (string | GridColumn)[];
+    rows: readonly GridRow[];
+    /** A note that the rows themselves are capped (the grid's truncation sentence). */
+    truncated?: string | null;
+    /** Rows profiled at most; the rest are left out and the banner says so. */
+    rowCap?: number;
+    className?: string;
+}
+/**
+ * A card per column: completeness, distinct values, range, mean and median
+ * for numbers, and the most frequent values. Honest about its sample: a
+ * profile of the fetched rows is not a profile of the table.
+ */
+export declare function DataProfile(props: DataProfileProps): React.JSX.Element;