@script-it/json-views-react 0.1.0-beta.1

package/dist/tabular-data-view.js

@@ -0,0 +1,493 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { parseFilterValue } from './structured-data/filter-value.js';
+import { compareJsonValues, matchesJsonValueFilter, jsonValueText } from '@script-it/json-views-core';
+import { useJsonSourceLiterals } from './json/source-literals.js';
+import { AddColumnHeader, ColumnHeaderMenu } from './structured-data/column-controls.js';
+import { ValueCell } from './structured-data/value-cell.js';
+export { ExpandValueButton, ValueCell, ValueCellContent } from './structured-data/value-cell.js';
+import { useViewerState } from './viewer-state.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { File, Plus } from 'lucide-react';
+import { UI_SIZE_SCALE } from './lib/ui-size.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './primitives/tooltip.js';
+import { cn } from './lib/cn.js';
+import { Checkbox } from './primitives/checkbox.js';
+import { StructuredCellFillContext } from './structured-data/structured-cell-fill-context.js';
+import { DeleteSelectedRowsAction } from './structured-data/delete-row-action.js';
+import { RowSelectionIcon } from './structured-data/row-selection-icon.js';
+import { CopyJsonAction } from './structured-data/copy-json-action.js';
+import { useJsonViewsDevice } from './browser-device.js';
+import { StructuredValueCellFrame } from './structured-data/atomic-value-editor.js';
+const DEFAULT_COLUMN_WIDTH = 200;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_CACHED_COLUMN_WIDTH = 4000;
+const MIN_VISIBLE_COLUMNS = 3;
+/** Row height at the small (100%) UI size; scaled by the active `UI_SIZE_SCALE`. */
+const ROW_HEIGHT = 45;
+export const TABULAR_DATA_FRAME_CLASS = 'overflow-hidden border-y border-border bg-background';
+function normalizeCollapsedColumns(hiddenColumns, allColumns) {
+    const minimumVisibleColumns = Math.min(MIN_VISIBLE_COLUMNS, allColumns.length);
+    const maxHiddenColumns = Math.max(0, allColumns.length - minimumVisibleColumns);
+    const normalizedHiddenColumns = allColumns
+        .filter((column) => hiddenColumns.includes(column))
+        .slice(0, maxHiddenColumns);
+    return new Set(normalizedHiddenColumns);
+}
+function normalizeColumnWidths(widths, columns) {
+    if (!widths)
+        return {};
+    return Object.fromEntries(columns.flatMap((column) => {
+        const width = widths[column];
+        return Number.isFinite(width) && width >= MIN_COLUMN_WIDTH
+            ? [[column, Math.min(width, MAX_CACHED_COLUMN_WIDTH)]]
+            : [];
+    }));
+}
+function restoreSort(sort, columns, stateKeys) {
+    if (!sort || (sort.direction !== 'asc' && sort.direction !== 'desc'))
+        return null;
+    const column = columns.find((candidate) => (stateKeys?.[candidate] ?? candidate) === sort.column);
+    return column === undefined ? null : { column, direction: sort.direction };
+}
+function restoreCollapsedColumns(hidden, columns, stateKeys) {
+    return normalizeCollapsedColumns(columns.filter((column) => hidden.includes(stateKeys?.[column] ?? column)), columns);
+}
+function restoreFilters(filters, columns, stateKeys) {
+    if (!filters)
+        return [];
+    return filters.flatMap((filter) => {
+        const column = columns.find((candidate) => (stateKeys?.[candidate] ?? candidate) === filter.column);
+        return column && filter.operator.trim()
+            ? [{ column, operator: filter.operator, ...(filter.value === undefined ? {} : { value: filter.value }) }]
+            : [];
+    });
+}
+function primitiveFilterValue(value, sample) {
+    const populated = sample.filter((item) => item !== undefined && item !== null);
+    const kinds = new Set(populated.map((item) => typeof item));
+    return parseFilterValue(value, kinds.size === 1 ? [...kinds][0] : undefined);
+}
+function parseColumnFilter(filter, sample) {
+    if (filter.operator === 'isEmpty' || filter.operator === 'isNotEmpty')
+        return { operator: filter.operator };
+    const text = typeof filter.value === 'string' ? filter.value : jsonValueText(filter.value ?? '');
+    if (filter.operator === 'in' || filter.operator === 'notIn') {
+        return {
+            operator: filter.operator,
+            value: text.split(',').map((value) => primitiveFilterValue(value.trim(), sample)).filter((value) => value !== ''),
+        };
+    }
+    return { operator: filter.operator, value: primitiveFilterValue(text, sample) };
+}
+function filterValueSuggestions(values) {
+    const suggestions = new Map();
+    for (const value of values) {
+        if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean')
+            continue;
+        const key = `${typeof value}:${String(value)}`;
+        if (!suggestions.has(key))
+            suggestions.set(key, value);
+        if (suggestions.size > 20)
+            return [];
+    }
+    return Array.from(suggestions.values());
+}
+export function TabularObjectArrayView({ arr, rowKeys, getCellSourcePath, columns, columnLabels, columnStateKeys, filePath, viewStateKey, onOpenCell, onVisibleRowsChange, renderCell, recordNavigation, onAddRow, onDeleteRows, getRowsCopyText, getRowsReferenceText, rowAdditionDisabled = false, rowDeletionDisabled = false, initialCell, uiSize = 'small', fillHeight = false, presentationControls = true, activeColumnFilters, activeColumnSort, columnFilterOperators, columnFilterValues, onColumnFilter, onColumnSort, onColumnRename, onColumnHide, onColumnMove, onColumnDelete, onAddColumn, }) {
+    const numberAtPath = useJsonSourceLiterals();
+    const { tables: tableState } = useViewerState();
+    const compact = useJsonViewsDevice() === 'mobile';
+    const cacheKey = JSON.stringify([filePath, viewStateKey]);
+    const savedTableState = filePath ? tableState.get(cacheKey) : undefined;
+    const columnLabel = (column) => columnLabels?.[column] ?? column;
+    const columnStateKey = (column) => columnStateKeys?.[column] ?? column;
+    const savedCollapsedColumns = presentationControls && filePath
+        ? (savedTableState?.collapsedColumns ?? [])
+        : [];
+    const [collapsedColumns, setLocalCollapsedColumns] = useState(() => restoreCollapsedColumns(savedCollapsedColumns, columns, columnStateKeys));
+    const selectable = onDeleteRows !== undefined || getRowsCopyText !== undefined;
+    const [selectedRows, setSelectedRows] = useState(() => new Set());
+    const [rowAdditionError, setRowAdditionError] = useState();
+    // Selected indices address rows of the current source; any content change
+    // may reshuffle them, so a new array drops the selection during render
+    // (React's "reset state on prop change" pattern) before it can mis-target.
+    const [seenArr, setSeenArr] = useState(arr);
+    if (seenArr !== arr) {
+        setSeenArr(arr);
+        if (selectedRows.size > 0)
+            setSelectedRows(new Set());
+    }
+    const [columnWidths, setColumnWidths] = useState(() => normalizeColumnWidths(savedTableState?.columnWidths, columns.map(columnStateKey)));
+    const columnWidthsRef = useRef(columnWidths);
+    const [dialogContainer, setDialogContainer] = useState(null);
+    const [hiddenRowHeight, setHiddenRowHeight] = useState(0);
+    const [draggedColumn, setDraggedColumn] = useState();
+    const [dropTarget, setDropTarget] = useState();
+    const draggedColumnRef = useRef(undefined);
+    const resizeRef = useRef(null);
+    const resizeCleanupRef = useRef(null);
+    const hiddenRowRef = useRef(null);
+    const saveTableState = useCallback((patch) => {
+        if (!filePath)
+            return;
+        tableState.set(cacheKey, { ...tableState.get(cacheKey), ...patch });
+    }, [cacheKey, filePath, tableState]);
+    const onResizeStart = useCallback((col, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const th = e.target.closest('th');
+        if (!th)
+            return;
+        resizeRef.current = {
+            col,
+            startX: e.clientX,
+            startWidth: th.getBoundingClientRect().width,
+        };
+        let rafId = null;
+        const onMouseMove = (ev) => {
+            if (!resizeRef.current)
+                return;
+            const newWidth = Math.max(MIN_COLUMN_WIDTH, resizeRef.current.startWidth + (ev.clientX - resizeRef.current.startX));
+            columnWidthsRef.current = { ...columnWidthsRef.current, [col]: newWidth };
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                setColumnWidths(columnWidthsRef.current);
+                rafId = null;
+            });
+        };
+        const onMouseUp = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            setColumnWidths(columnWidthsRef.current);
+            saveTableState({ columnWidths: columnWidthsRef.current });
+            resizeRef.current = null;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+            resizeCleanupRef.current = null;
+        };
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        resizeCleanupRef.current = onMouseUp;
+    }, [saveTableState]);
+    useEffect(() => {
+        return () => {
+            resizeCleanupRef.current?.();
+        };
+    }, []);
+    const columnsKey = JSON.stringify([columns, columnStateKeys]);
+    // Column contents, rather than the caller's array identity, define table state.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const stableColumns = useMemo(() => columns, [columnsKey]);
+    useEffect(() => {
+        setLocalCollapsedColumns(restoreCollapsedColumns(presentationControls && filePath ? (tableState.get(cacheKey)?.collapsedColumns ?? []) : [], stableColumns, columnStateKeys));
+        const nextWidths = normalizeColumnWidths(filePath ? tableState.get(cacheKey)?.columnWidths : undefined, stableColumns.map(columnStateKey));
+        columnWidthsRef.current = nextWidths;
+        setColumnWidths(nextWidths);
+    }, [filePath, presentationControls, stableColumns, columnsKey, cacheKey, tableState]);
+    const visibleColumns = stableColumns.filter((col) => !collapsedColumns.has(col));
+    const visibleTitleColumn = recordNavigation && visibleColumns.includes(recordNavigation.titleColumn)
+        ? recordNavigation.titleColumn
+        : undefined;
+    const controlColumn = visibleTitleColumn ?? visibleColumns[0];
+    const hiddenColumns = stableColumns.filter((col) => collapsedColumns.has(col));
+    useEffect(() => {
+        const element = hiddenRowRef.current;
+        if (!element) {
+            setHiddenRowHeight(0);
+            return;
+        }
+        const updateHeight = () => {
+            setHiddenRowHeight(element.getBoundingClientRect().height);
+        };
+        updateHeight();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [hiddenColumns.length]);
+    const toggleColumn = (col) => {
+        if (!presentationControls)
+            return;
+        const next = new Set(collapsedColumns);
+        if (next.has(col))
+            next.delete(col);
+        else
+            next.add(col);
+        const normalized = normalizeCollapsedColumns(Array.from(next), stableColumns);
+        setLocalCollapsedColumns(normalized);
+        saveTableState({ collapsedColumns: Array.from(normalized, columnStateKey) });
+    };
+    const [sortConfig, setSortConfig] = useState(() => (presentationControls ? restoreSort(savedTableState?.sort, columns, columnStateKeys) : null));
+    const [filterConfig, setFilterConfig] = useState(() => (presentationControls ? restoreFilters(savedTableState?.filters, columns, columnStateKeys) : []));
+    const effectiveSort = activeColumnSort === undefined ? sortConfig : activeColumnSort;
+    const effectiveFilters = activeColumnFilters === undefined ? filterConfig : activeColumnFilters;
+    const sortColumn = onColumnSort ?? (presentationControls ? (column, direction) => {
+        const next = direction ? { column, direction } : null;
+        setSortConfig(next);
+        saveTableState({ sort: direction ? { column: columnStateKey(column), direction } : null });
+    } : undefined);
+    const filterColumn = onColumnFilter ? (column, filter) => {
+        const sample = (columnFilterValues?.[column] ?? arr.map((row) => row[column]));
+        return onColumnFilter(column, filter ? parseColumnFilter(filter, sample) : null);
+    } : presentationControls ? (column, filter) => {
+        const sample = (columnFilterValues?.[column] ?? arr.map((row) => row[column]));
+        const next = [
+            ...filterConfig.filter((candidate) => candidate.column !== column),
+            ...(filter ? [{ column, ...parseColumnFilter(filter, sample) }] : []),
+        ];
+        setSelectedRows(new Set());
+        setFilterConfig(next);
+        saveTableState({ filters: next.map((candidate) => ({
+                ...candidate,
+                column: columnStateKey(candidate.column),
+            })) });
+    } : undefined;
+    const hideColumn = onColumnHide ?? (presentationControls ? (column) => toggleColumn(column) : undefined);
+    useEffect(() => {
+        setSortConfig(presentationControls ? restoreSort(tableState.get(cacheKey)?.sort, stableColumns, columnStateKeys) : null);
+        setFilterConfig(presentationControls ? restoreFilters(tableState.get(cacheKey)?.filters, stableColumns, columnStateKeys) : []);
+    }, [cacheKey, presentationControls, stableColumns, columnsKey, tableState]);
+    const indexedData = useMemo(() => {
+        return arr.map((item, i) => ({ item, originalIndex: i }));
+    }, [arr]);
+    const filteredData = useMemo(() => {
+        if (activeColumnFilters !== undefined || filterConfig.length === 0)
+            return indexedData;
+        return indexedData.filter(({ item, originalIndex }) => filterConfig.every((filter) => matchesJsonValueFilter(Object.hasOwn(item, filter.column) ? item[filter.column] : undefined, filter.operator, filter.value, { numberAtPath, leftPath: getCellSourcePath?.(originalIndex, filter.column) })));
+    }, [activeColumnFilters, filterConfig, indexedData, numberAtPath, getCellSourcePath]);
+    const sortedData = useMemo(() => {
+        if (!sortConfig || activeColumnSort !== undefined)
+            return filteredData;
+        const { column, direction } = sortConfig;
+        return [...filteredData].sort((a, b) => {
+            const aVal = Object.hasOwn(a.item, column) ? a.item[column] : undefined;
+            const bVal = Object.hasOwn(b.item, column) ? b.item[column] : undefined;
+            if (aVal == null && bVal == null)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            const cmp = compareJsonValues(aVal, bVal, { numberAtPath, leftPath: getCellSourcePath?.(a.originalIndex, column), rightPath: getCellSourcePath?.(b.originalIndex, column) });
+            return direction === 'asc' ? cmp : -cmp;
+        });
+    }, [activeColumnSort, filteredData, sortConfig, numberAtPath, getCellSourcePath]);
+    const hasActiveFilters = effectiveFilters.length > 0;
+    useEffect(() => {
+        onVisibleRowsChange?.(sortedData.map(({ originalIndex }) => originalIndex), hasActiveFilters);
+    }, [hasActiveFilters, onVisibleRowsChange, sortedData]);
+    // Compact widths are a presentation constraint, never persisted over the
+    // user's desktop column sizes. Every column and the same editors remain.
+    const visibleColumnWidths = visibleColumns.map((col) => compact
+        ? Math.min(columnWidths[columnStateKey(col)] ?? DEFAULT_COLUMN_WIDTH, col === controlColumn ? 168 : 184)
+        : columnWidths[columnStateKey(col)] ?? DEFAULT_COLUMN_WIDTH);
+    const rowCountLabel = `${sortedData.length.toLocaleString()} ${sortedData.length === 1 ? 'row' : 'rows'} · ${stableColumns.length.toLocaleString()} ${stableColumns.length === 1 ? 'field' : 'fields'}`;
+    const canHideMoreColumns = visibleColumns.length > Math.min(MIN_VISIBLE_COLUMNS, stableColumns.length);
+    const scrollContainerRef = useRef(null);
+    const scrollSaveTimer = useRef(undefined);
+    const pendingScrollPosition = useRef(undefined);
+    const flushScrollPosition = useCallback(() => {
+        if (scrollSaveTimer.current)
+            clearTimeout(scrollSaveTimer.current);
+        scrollSaveTimer.current = undefined;
+        if (!pendingScrollPosition.current)
+            return;
+        saveTableState(pendingScrollPosition.current);
+        pendingScrollPosition.current = undefined;
+    }, [saveTableState]);
+    const saveScrollPosition = useCallback(() => {
+        if (scrollSaveTimer.current)
+            clearTimeout(scrollSaveTimer.current);
+        const element = scrollContainerRef.current;
+        if (!element)
+            return;
+        pendingScrollPosition.current = { scrollLeft: element.scrollLeft, scrollTop: element.scrollTop };
+        scrollSaveTimer.current = setTimeout(flushScrollPosition, 120);
+    }, [flushScrollPosition]);
+    useEffect(() => {
+        const element = scrollContainerRef.current;
+        if (!element || !filePath)
+            return;
+        const saved = tableState.get(cacheKey);
+        const frame = requestAnimationFrame(() => {
+            element.scrollLeft = saved?.scrollLeft ?? 0;
+            element.scrollTop = saved?.scrollTop ?? 0;
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [cacheKey, filePath, tableState]);
+    useEffect(() => {
+        window.addEventListener('pagehide', flushScrollPosition, true);
+        return () => {
+            window.removeEventListener('pagehide', flushScrollPosition, true);
+            flushScrollPosition();
+        };
+    }, [flushScrollPosition]);
+    // Rows hold rem-sized text, so their height must track the host's UI size.
+    const rowHeight = Math.round((compact ? 60 : ROW_HEIGHT) * UI_SIZE_SCALE[uiSize]);
+    const rowVirtualizer = useVirtualizer({
+        count: sortedData.length,
+        getItemKey: (index) => rowKeys?.[sortedData[index].originalIndex] ?? sortedData[index].originalIndex,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: () => rowHeight,
+        overscan: 10,
+    });
+    useEffect(() => {
+        rowVirtualizer.measure();
+    }, [rowHeight, rowVirtualizer]);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const totalTableWidth = visibleColumnWidths.reduce((sum, width) => sum + width, 0) + (onAddColumn ? 180 : 0);
+    const tableColumnCount = visibleColumns.length + (onAddColumn ? 1 : 0);
+    const allSelected = selectable && sortedData.length > 0 && sortedData.every(({ originalIndex }) => selectedRows.has(originalIndex));
+    const toggleAllRows = () => {
+        setSelectedRows((previous) => {
+            const next = new Set(previous);
+            sortedData.forEach(({ originalIndex }) => {
+                if (allSelected)
+                    next.delete(originalIndex);
+                else
+                    next.add(originalIndex);
+            });
+            return next;
+        });
+    };
+    const toggleRow = (index) => {
+        setSelectedRows((previous) => {
+            const next = new Set(previous);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            return next;
+        });
+    };
+    const deleteSelectedRows = async () => {
+        if (!onDeleteRows || selectedRows.size === 0)
+            return;
+        await onDeleteRows(Array.from(selectedRows).sort((a, b) => b - a));
+    };
+    const selectedRowsInVisibleOrder = () => sortedData.flatMap(({ originalIndex }) => (selectedRows.has(originalIndex) ? [originalIndex] : []));
+    const addRow = async () => {
+        if (!onAddRow)
+            return;
+        setRowAdditionError(undefined);
+        try {
+            await onAddRow();
+        }
+        catch (error) {
+            setRowAdditionError(error instanceof Error ? error.message : 'Could not add a row');
+        }
+    };
+    const [highlightCell, setHighlightCell] = useState(initialCell ?? null);
+    useEffect(() => {
+        if (!initialCell)
+            return;
+        rowVirtualizer.scrollToIndex(initialCell.row, { align: 'center' });
+        // Scroll column into view
+        const colIdx = visibleColumns.indexOf(initialCell.col);
+        if (colIdx >= 0 && scrollContainerRef.current) {
+            const left = visibleColumnWidths.slice(0, colIdx).reduce((sum, width) => sum + width, 0);
+            scrollContainerRef.current.scrollLeft = Math.max(0, left - 50);
+        }
+        const timeout = setTimeout(() => setHighlightCell(null), 1500);
+        return () => clearTimeout(timeout);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs("div", { ref: setDialogContainer, "data-id": "tabular-data-dialog-host", className: cn('relative isolate', fillHeight ? 'flex max-h-full min-h-0 flex-col gap-1' : 'mb-4'), children: [compact && visibleColumns.length > 1 && _jsx("p", { className: "json-views-table-hint", children: "Swipe for more fields \u00B7 tap a value to open or edit" }), _jsx("div", { "data-id": "tabular-data-frame", className: cn(TABULAR_DATA_FRAME_CLASS, fillHeight && 'flex min-h-0 flex-col'), children: _jsx("div", { ref: scrollContainerRef, "data-id": "tabular-scroll-area", tabIndex: 0, role: "region", "aria-label": "Scrollable records", onScroll: saveScrollPosition, className: cn('overflow-auto overscroll-x-none', fillHeight && 'min-h-0'), style: fillHeight ? undefined : { maxHeight: 'min(600px, 70vh)' }, children: _jsx(StructuredCellFillContext.Provider, { value: true, children: _jsxs("table", { "aria-label": "JSON records", "aria-rowcount": sortedData.length + (hiddenColumns.length > 0 ? 2 : 1), "aria-colcount": tableColumnCount, "data-selection-active": selectable && selectedRows.size > 0, className: "tabular-data-table w-full table-fixed border-separate border-spacing-0 text-sm", style: { minWidth: totalTableWidth }, children: [_jsxs("colgroup", { children: [visibleColumns.map((col, index) => (_jsx("col", { style: { width: visibleColumnWidths[index] } }, col))), onAddColumn && _jsx("col", { style: { width: 180 } })] }), _jsxs("thead", { children: [hiddenColumns.length > 0 && (_jsx("tr", { children: _jsx("th", { ref: hiddenRowRef, colSpan: Math.max(tableColumnCount, 1), className: "sticky top-0 z-30 bg-background px-3 py-2 text-left font-normal", children: _jsx("div", { className: "flex w-full gap-1.5 overflow-x-auto overscroll-x-none whitespace-nowrap", children: hiddenColumns.map((col) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => toggleColumn(col), className: "shrink-0 rounded border border-border bg-card px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", "aria-label": `Show column: ${columnLabel(col)}`, children: columnLabel(col) }) }), _jsxs(TooltipContent, { side: "top", children: ["Show column: ", columnLabel(col)] })] }, col))) }) }) })), _jsxs("tr", { children: [visibleColumns.map((col, index) => {
+                                                    const width = visibleColumnWidths[index];
+                                                    return (_jsxs("th", { "data-id": "tabular-column-header", "data-column": col, "data-pinned": compact && col === controlColumn || undefined, className: `relative sticky z-20 border-r border-b border-border bg-background p-0 text-left font-normal text-muted-foreground whitespace-nowrap last:border-r-0 ${onColumnMove ? 'cursor-grab active:cursor-grabbing' : ''} ${hiddenColumns.length > 0 ? 'border-t border-border' : ''} ${draggedColumn === col ? 'opacity-50' : ''} ${dropTarget?.column === col && dropTarget.position === 'before' ? 'border-l-2 border-l-primary' : ''} ${dropTarget?.column === col && dropTarget.position === 'after' ? 'border-r-2 border-r-primary' : ''}`, style: {
+                                                            top: hiddenColumns.length > 0 ? hiddenRowHeight : 0,
+                                                            width,
+                                                            minWidth: width,
+                                                            maxWidth: width,
+                                                        }, onDragStart: (event) => {
+                                                            if (!onColumnMove || event.target.closest('[role="separator"]')) {
+                                                                event.preventDefault();
+                                                                return;
+                                                            }
+                                                            event.dataTransfer.effectAllowed = 'move';
+                                                            event.dataTransfer.setData('application/x-json-views-column', col);
+                                                            draggedColumnRef.current = col;
+                                                            setDraggedColumn(col);
+                                                        }, onDragOver: (event) => {
+                                                            const source = draggedColumnRef.current ?? draggedColumn;
+                                                            if (!onColumnMove || !source || source === col)
+                                                                return;
+                                                            event.preventDefault();
+                                                            event.dataTransfer.dropEffect = 'move';
+                                                            const bounds = event.currentTarget.getBoundingClientRect();
+                                                            const pointerX = Number.isFinite(event.clientX) ? event.clientX : bounds.left;
+                                                            setDropTarget({ column: col, position: pointerX <= bounds.left + bounds.width / 2 ? 'before' : 'after' });
+                                                        }, onDragLeave: (event) => {
+                                                            if (event.currentTarget === event.target)
+                                                                setDropTarget((current) => current?.column === col ? undefined : current);
+                                                        }, onDragEnd: () => {
+                                                            draggedColumnRef.current = undefined;
+                                                            setDraggedColumn(undefined);
+                                                            setDropTarget(undefined);
+                                                        }, onDrop: (event) => {
+                                                            const source = draggedColumnRef.current ?? draggedColumn ?? event.dataTransfer.getData('application/x-json-views-column');
+                                                            if (!onColumnMove || !source || source === col)
+                                                                return;
+                                                            event.preventDefault();
+                                                            const bounds = event.currentTarget.getBoundingClientRect();
+                                                            const pointerX = Number.isFinite(event.clientX) ? event.clientX : bounds.left;
+                                                            const position = dropTarget?.column === col
+                                                                ? dropTarget.position
+                                                                : pointerX <= bounds.left + bounds.width / 2 ? 'before' : 'after';
+                                                            void onColumnMove(source, col, position);
+                                                            draggedColumnRef.current = undefined;
+                                                            setDraggedColumn(undefined);
+                                                            setDropTarget(undefined);
+                                                        }, children: [_jsxs("div", { className: "flex items-center", children: [col === controlColumn && selectable && (_jsx("span", { className: "ml-3 flex h-3.5 w-3.5 shrink-0 items-center", "data-id": "tabular-select-all-slot", children: _jsx(Checkbox, { "aria-label": allSelected ? 'Deselect all rows' : 'Select all rows', className: "tabular-selection-checkbox h-3.5 w-3.5 border-muted-foreground", "data-id": "tabular-select-all-rows", checked: allSelected ? true : selectedRows.size > 0 ? 'indeterminate' : false, disabled: rowDeletionDisabled || sortedData.length === 0, onCheckedChange: toggleAllRows }) })), _jsx("div", { className: cn('min-w-0 flex-1', col === controlColumn && selectable && '[&>button]:pl-1.5'), children: _jsx(ColumnHeaderMenu, { activeFilter: effectiveFilters.find((filter) => filter.column === col), activeSort: effectiveSort, canHide: onColumnHide ? visibleColumns.length > 1 : canHideMoreColumns, column: col, draggable: onColumnMove !== undefined, dragging: draggedColumn === col, filterOperators: columnFilterOperators?.[col], filterValues: filterValueSuggestions(columnFilterValues?.[col] ?? arr.map((row) => row[col])), label: columnLabel(col), onFilter: filterColumn, onHide: hideColumn, onDelete: onColumnDelete && columns.length > 1 ? onColumnDelete : undefined, onMoveFirst: onColumnMove && index > 0
+                                                                                ? () => onColumnMove(col, visibleColumns[0], 'before')
+                                                                                : undefined, onRename: onColumnRename, onSort: sortColumn }) })] }), _jsx("div", { role: "separator", tabIndex: 0, "aria-label": `Resize ${columnLabel(col)} column`, "aria-orientation": "vertical", "aria-valuemin": MIN_COLUMN_WIDTH, "aria-valuenow": Math.round(width), className: "absolute bottom-0 right-0 top-0 w-1.5 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 focus-visible:bg-primary/40 focus-visible:outline-none", onMouseDown: (e) => onResizeStart(columnStateKey(col), e), onKeyDown: (event) => {
+                                                                    if (!['ArrowLeft', 'ArrowRight', 'Home'].includes(event.key))
+                                                                        return;
+                                                                    event.preventDefault();
+                                                                    event.stopPropagation();
+                                                                    const next = event.key === 'Home' ? MIN_COLUMN_WIDTH : Math.max(MIN_COLUMN_WIDTH, width + (event.key === 'ArrowRight' ? 1 : -1) * (event.shiftKey ? 50 : 10));
+                                                                    const widths = { ...columnWidthsRef.current, [columnStateKey(col)]: next };
+                                                                    columnWidthsRef.current = widths;
+                                                                    setColumnWidths(widths);
+                                                                    saveTableState({ columnWidths: widths });
+                                                                } })] }, col));
+                                                }), onAddColumn && _jsx("th", { className: "sticky z-20 border-b border-border bg-background p-0 text-left font-normal", style: { top: hiddenColumns.length > 0 ? hiddenRowHeight : 0, width: 180 }, children: _jsx(AddColumnHeader, { onAdd: onAddColumn }) })] })] }), _jsx("tbody", { children: visibleColumns.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-4 text-sm italic text-muted-foreground", children: "All columns are hidden" }) })) : (_jsxs(_Fragment, { children: [virtualItems.length > 0 && (_jsx("tr", { style: { height: virtualItems[0].start }, "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, className: "border-0 p-0" }) })), virtualItems.map((virtualRow) => {
+                                                const { item, originalIndex } = sortedData[virtualRow.index];
+                                                const isLastRow = virtualRow.index === sortedData.length - 1;
+                                                const rowControl = _jsx(RowSelectionIcon, { icon: visibleTitleColumn ? _jsx(File, { "aria-hidden": true, "data-id": "jsonView-row-page-icon", className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : null, checked: selectedRows.has(originalIndex), disabled: rowDeletionDisabled, label: `Select row ${originalIndex + 1}`, onToggle: selectable ? () => toggleRow(originalIndex) : undefined });
+                                                return (_jsxs("tr", { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, "aria-rowindex": virtualRow.index + (hiddenColumns.length > 0 ? 3 : 2), "aria-selected": selectable ? selectedRows.has(originalIndex) : undefined, className: "group bg-background hover:bg-accent/40", children: [visibleColumns.map((col, colIdx) => {
+                                                            const hasKey = Object.prototype.hasOwnProperty.call(item, col);
+                                                            const width = visibleColumnWidths[colIdx];
+                                                            const value = hasKey ? item[col] : undefined;
+                                                            const cellContent = (() => {
+                                                                if (recordNavigation && col === visibleTitleColumn) {
+                                                                    return (_jsx(StructuredValueCellFrame, { leading: rowControl, actions: _jsx("button", { type: "button", "data-id": "tabular-open-record", "aria-label": `Open record ${recordNavigation.getLabel(originalIndex)}`, className: "cursor-pointer opacity-0 group-hover/structured-cell:opacity-100 group-focus-within/structured-cell:opacity-100 transition-opacity [@media(hover:none)]:opacity-100 h-6 rounded-sm border border-border bg-background px-2 text-[0.625rem] font-medium tracking-wide text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => recordNavigation.onOpen(originalIndex), children: "OPEN" }), activationLabel: `Open ${recordNavigation.getLabel(originalIndex)}`, className: "cursor-pointer [&_[data-id=atomic-edit-value]]:cursor-pointer", onActivate: () => recordNavigation.onOpen(originalIndex), children: _jsx("span", { className: "flex min-w-0 items-center font-medium", children: recordNavigation.renderTitle({ value, rowIndex: originalIndex, column: col }) }) }));
+                                                                }
+                                                                if (!hasKey)
+                                                                    return _jsx("span", { className: "block px-3 py-2 italic text-muted-foreground", children: "\u2014" });
+                                                                const openCell = () => onOpenCell({
+                                                                    value,
+                                                                    rowIndex: originalIndex,
+                                                                    column: col,
+                                                                });
+                                                                return renderCell
+                                                                    ? renderCell({ value, rowIndex: originalIndex, column: col, open: openCell })
+                                                                    : _jsx(ValueCell, { value: value, onOpen: openCell });
+                                                            })();
+                                                            return (_jsx("td", { "data-pinned": compact && col === controlColumn || undefined, className: `tabular-data-cell overflow-hidden border-r border-border p-0 last:border-r-0 ${isLastRow ? '' : 'border-b border-border'} ${highlightCell?.row === originalIndex && highlightCell?.col === col ? 'animate-[highlight-fade_1.5s_ease-out]' : ''}`, style: { width, minWidth: width, maxWidth: width }, children: col === controlColumn && col !== visibleTitleColumn && selectable ? _jsxs("div", { className: "relative h-full pl-5", children: [_jsx("span", { className: "absolute inset-y-0 left-3 z-10 flex items-center", children: rowControl }), cellContent] }) : cellContent }, col));
+                                                        }), onAddColumn && _jsx("td", { "aria-hidden": true, className: `${isLastRow ? '' : 'border-b border-border'} p-0` })] }, virtualRow.key));
+                                            }), virtualItems.length > 0 && (_jsx("tr", { style: {
+                                                    height: rowVirtualizer.getTotalSize() -
+                                                        virtualItems[virtualItems.length - 1].end,
+                                                }, "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, className: "border-0 p-0" }) }))] })) })] }) }) }) }), _jsxs("div", { "data-id": "tabular-footer", className: cn('flex min-h-7 items-center gap-2 pt-1 text-xs text-muted-foreground', fillHeight && 'shrink-0'), children: [onAddRow && selectedRows.size === 0 && (_jsxs("button", { type: "button", "data-id": "tabular-add-row", disabled: rowAdditionDisabled, className: "flex h-6 items-center gap-1 rounded-md px-3 font-medium text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void addRow(); }, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Add row"] })), selectedRows.size === 0 && rowAdditionError && _jsx("span", { role: "alert", className: "text-destructive", children: rowAdditionError }), selectable && selectedRows.size > 0 && (_jsxs("div", { "data-id": "tabular-selection-bar", className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", "data-id": "tabular-clear-selection", "aria-label": `Clear ${selectedRows.size.toLocaleString()} selected ${selectedRows.size === 1 ? 'row' : 'rows'}`, title: "Clear selection", className: "flex h-6 items-center rounded-md px-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => setSelectedRows(new Set()), children: [selectedRows.size.toLocaleString(), " selected"] }), onDeleteRows && (_jsx(DeleteSelectedRowsAction, { count: selectedRows.size, disabled: rowDeletionDisabled, portalContainer: dialogContainer, onDelete: deleteSelectedRows })), getRowsCopyText && getRowsReferenceText && (_jsx(CopyJsonAction, { dataId: "structured-data-copy-selected-rows", getPathText: () => getRowsReferenceText(selectedRowsInVisibleOrder()), getRecordText: () => getRowsCopyText(selectedRowsInVisibleOrder()), label: "Copy paths", pathLabel: "paths", recordLabel: "records", tone: "strong" }, Array.from(selectedRows).join(',')))] })), _jsx("span", { className: "ml-auto", children: rowCountLabel })] })] }));
+}

package/dist/viewer-state.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from 'react';
+import type { ValuePath } from '@script-it/json-views-core';
+export interface JsonViewsTablePresentationState {
+    collapsedColumns?: string[];
+    columnWidths?: Record<string, number>;
+    filters?: Array<{
+        column: string;
+        operator: string;
+        value?: unknown;
+    }>;
+    scrollLeft?: number;
+    scrollTop?: number;
+    sort?: {
+        column: string;
+        direction: 'asc' | 'desc';
+    } | null;
+}
+export interface JsonViewsNavigationPresentationState {
+    stack: Array<{
+        path: ValuePath;
+        key: string;
+        kind?: 'value' | 'record';
+        titleKey?: string;
+    }>;
+    currentPath: ValuePath;
+    currentKind?: 'value' | 'record';
+    currentTitleKey?: string;
+}
+export interface JsonViewsGeneralPresentationState {
+    scrollPositions?: Record<string, number>;
+}
+/**
+ * Serializable, visual-only state for one document. Hosts may cache this beside
+ * a document, but must not write it into the document's `$jsonviews` metadata.
+ */
+export interface JsonViewsPresentationState {
+    version: 1;
+    activeView?: string;
+    queries?: Record<string, string>;
+    /** Unsaved explicit view configuration, scoped by view and data path. */
+    viewDrafts?: Record<string, Record<string, unknown>>;
+    navigation?: Record<string, JsonViewsNavigationPresentationState>;
+    tables?: Record<string, JsonViewsTablePresentationState>;
+    general?: Record<string, JsonViewsGeneralPresentationState>;
+}
+type PresentationStateChange = (state: JsonViewsPresentationState) => void;
+/** Bounded, instance-owned presentation state. Never shared across host viewers. */
+export declare class ViewStateCache<T> {
+    private readonly onChange?;
+    private readonly entries;
+    constructor(initial?: Record<string, T>, onChange?: (() => void) | undefined);
+    get(key: string): T | undefined;
+    set(key: string, value: T): void;
+    delete(key: string): void;
+    toRecord(): Record<string, T>;
+}
+export declare function ViewerStateProvider({ children, initialState, onChange, }: {
+    children: ReactNode;
+    initialState?: JsonViewsPresentationState;
+    onChange?: PresentationStateChange;
+}): import("react").JSX.Element;
+export declare function useViewerState(): {
+    readonly activeView: string | undefined;
+    setActiveView(value: string): void;
+    queries: ViewStateCache<string>;
+    viewDrafts: ViewStateCache<Record<string, unknown>>;
+    navigation: ViewStateCache<JsonViewsNavigationPresentationState>;
+    tables: ViewStateCache<JsonViewsTablePresentationState>;
+    general: ViewStateCache<JsonViewsGeneralPresentationState>;
+    snapshot(): JsonViewsPresentationState;
+};
+export {};