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

package/dist/json/table-view.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isLongText } from './long-text.js';
+import { useJsonSourceLiterals } from './source-literals.js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useJsonViewsRegistries } from '../widget-registry.js';
+import { AtomicValueEditor } from '../structured-data/atomic-value-editor.js';
+import { isEditableAtomicValue } from '../structured-data/atomic-value.js';
+import { TabularObjectArrayView, ValueCell, ValueCellContent } from '../tabular-data-view.js';
+import {} from '@script-it/json-views-core';
+import { JSON_VIEW_PATH_MISSING, resolveJsonViewRowPath, schemaForJsonViewPath } from '@script-it/json-views-core';
+import { JsonViewSchemaValueCell, JsonViewSchemaValueDisplay, withColumnOptionColors } from './schema-value.js';
+import { projectJsonViewCollection } from '@script-it/json-views-core';
+import { GeneralJsonView } from './viewers/general/general-json-view.js';
+import {} from './view-types.js';
+import { matchesSearch, titleForRow, titleFieldForRow, rowAtSourcePath, sameJsonViewPath } from './view-model.js';
+import { blankRow, removalOrder, rowFieldPath } from './row-mutations.js';
+import { GeneralRecordView, RecordView } from './record-view.js';
+import { jsonRowsCopyText, jsonRowsReferenceText } from './copy-json.js';
+const FILTER_OPERATORS = [
+    { value: 'eq', label: 'is' },
+    { value: 'neq', label: 'is not' },
+    { value: 'in', label: 'is any of' },
+    { value: 'notIn', label: 'is none of' },
+    { value: 'gt', label: 'is greater than' },
+    { value: 'gte', label: 'is at least' },
+    { value: 'lt', label: 'is less than' },
+    { value: 'lte', label: 'is at most' },
+    { value: 'contains', label: 'contains' },
+    { value: 'notContains', label: 'does not contain' },
+    { value: 'isEmpty', label: 'is empty' },
+    { value: 'isNotEmpty', label: 'is not empty' },
+];
+const DATE_FILTER_OPERATORS = [
+    { value: 'eq', label: 'is' },
+    { value: 'neq', label: 'is not' },
+    { value: 'lt', label: 'is before' },
+    { value: 'lte', label: 'is on or before' },
+    { value: 'gt', label: 'is after' },
+    { value: 'gte', label: 'is on or after' },
+    { value: 'isEmpty', label: 'is empty' },
+    { value: 'isNotEmpty', label: 'is not empty' },
+];
+export function ProjectedTableView({ compiled, editing, filePath, copyFileName, fillHeight, onSaveView, onCurrentPathChange, query, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }) {
+    const { types } = useJsonViewsRegistries();
+    const sourceLiteral = useJsonSourceLiterals();
+    const [editPath, setEditPath] = useState();
+    const [openRowPath, setOpenRowPath] = useState();
+    const [openCell, setOpenCell] = useState();
+    const unfilteredProjection = useMemo(() => projectJsonViewCollection(compiled.root, { ...view, filter: undefined }, compiled.schema, types, sourceLiteral), [compiled.root, compiled.schema, view, types, types.version, sourceLiteral]);
+    const completeProjection = useMemo(() => projectJsonViewCollection(compiled.root, view, compiled.schema, types, sourceLiteral), [compiled.root, compiled.schema, view, types, types.version, sourceLiteral]);
+    const projected = useMemo(() => {
+        const indices = completeProjection.rows.flatMap((row, index) => matchesSearch(row.value, query) ? [index] : []);
+        return {
+            columns: completeProjection.columns,
+            rows: indices.map((index) => completeProjection.rows[index]),
+            records: indices.map((index) => completeProjection.records[index]),
+        };
+    }, [completeProjection, query]);
+    const tableModel = useMemo(() => {
+        const visibleColumns = [...completeProjection.columns];
+        const fieldOccurrences = new Map();
+        const stateKeys = Object.fromEntries(visibleColumns.map((column) => {
+            const field = JSON.stringify(column.path.segments);
+            const occurrence = fieldOccurrences.get(field) ?? 0;
+            fieldOccurrences.set(field, occurrence + 1);
+            return [column.id, JSON.stringify([field, occurrence])];
+        }));
+        const descriptors = Object.fromEntries(visibleColumns.map((column) => {
+            const descriptor = unfilteredProjection.rows.flatMap((row) => {
+                const path = resolveJsonViewRowPath(compiled.root, row, column.path).sourcePath;
+                const schema = schemaForJsonViewPath(compiled.schema, path);
+                return schema ? [schema.descriptor] : [];
+            })[0] ?? compiled.schema.find((schema) => sameJsonViewPath(schema.path, column.path))?.descriptor;
+            return [column.id, descriptor];
+        }));
+        const columnFilterOperators = Object.fromEntries(visibleColumns.map((column) => {
+            const descriptor = descriptors[column.id];
+            const defaults = descriptor?.type === 'date' ? DATE_FILTER_OPERATORS : FILTER_OPERATORS;
+            const declared = descriptor ? types.filterOperators(descriptor) : undefined;
+            return [column.id, declared ? [
+                    ...defaults.filter((operator) => declared.includes(operator.value)),
+                    ...declared.filter((value) => !defaults.some((operator) => operator.value === value)).map((value) => ({ value, label: value })),
+                ] : defaults];
+        }));
+        return {
+            visibleColumns,
+            records: projected.records.map((record) => Object.fromEntries(visibleColumns.flatMap((column) => column.id in record ? [[column.id, record[column.id]]] : []))),
+            labels: Object.fromEntries(visibleColumns.map((column) => [column.id, column.label])),
+            stateKeys,
+            columnFilterOperators,
+            columnFilterValues: Object.fromEntries(visibleColumns.map((column) => [
+                column.id,
+                unfilteredProjection.records.flatMap((record) => column.id in record ? [record[column.id]] : []),
+            ])),
+            titleColumn: visibleColumns[0],
+        };
+    }, [compiled.root, compiled.schema, completeProjection, projected.records, types, unfilteredProjection]);
+    const declaredColumnActions = rawView && onSaveView ? {
+        activeFilters: view.filter?.rules.flatMap((rule) => {
+            const column = tableModel.visibleColumns.find((candidate) => sameJsonViewPath(candidate.path, rule.path));
+            return column ? [{
+                    column: column.id,
+                    operator: rule.operator,
+                    ...(rule.value === undefined ? {} : { value: rule.value }),
+                }] : [];
+        }) ?? [],
+        activeSort: (() => {
+            for (const sort of view.sort) {
+                const column = tableModel.visibleColumns.find((candidate) => sameJsonViewPath(candidate.path, sort.path));
+                if (column)
+                    return { column: column.id, direction: sort.direction };
+            }
+            return null;
+        })(),
+        rename: async (columnId, label) => {
+            const columns = tableModel.visibleColumns.map((column) => ({
+                label: column.id === columnId ? label : column.label,
+                path: column.path.source,
+            }));
+            await onSaveView({ ...rawView, columns });
+        },
+        hide: async (columnId) => {
+            const columns = tableModel.visibleColumns
+                .filter((column) => column.id !== columnId)
+                .map((column) => ({ label: column.label, path: column.path.source }));
+            if (columns.length === 0)
+                throw new Error('Keep at least one column visible');
+            await onSaveView({ ...rawView, columns });
+        },
+        move: async (columnId, targetId, position) => {
+            if (columnId === targetId)
+                return;
+            const columns = [...tableModel.visibleColumns];
+            const sourceIndex = columns.findIndex((column) => column.id === columnId);
+            const targetIndex = columns.findIndex((column) => column.id === targetId);
+            if (sourceIndex < 0 || targetIndex < 0)
+                return;
+            const [moved] = columns.splice(sourceIndex, 1);
+            const updatedTargetIndex = columns.findIndex((column) => column.id === targetId);
+            columns.splice(updatedTargetIndex + (position === 'after' ? 1 : 0), 0, moved);
+            await onSaveView({ ...rawView, columns: columns.map((column) => ({ label: column.label, path: column.path.source })) });
+        },
+        filter: async (columnId, filter) => {
+            const target = tableModel.visibleColumns.find((column) => column.id === columnId);
+            if (!target)
+                return;
+            const replacement = filter ? {
+                path: target.path.source,
+                operator: filter.operator,
+                ...((filter.operator === 'isEmpty' || filter.operator === 'isNotEmpty') ? {} : { value: filter.value }),
+            } : undefined;
+            let inserted = false;
+            const rules = (view.filter?.rules ?? []).flatMap((rule) => {
+                if (!sameJsonViewPath(rule.path, target.path))
+                    return [{
+                            path: rule.path.source,
+                            operator: rule.operator,
+                            ...((rule.operator === 'isEmpty' || rule.operator === 'isNotEmpty') ? {} : { value: rule.value }),
+                        }];
+                if (!replacement || inserted)
+                    return [];
+                inserted = true;
+                return [replacement];
+            });
+            if (replacement && !inserted)
+                rules.push(replacement);
+            const next = { ...rawView };
+            if (rules.length > 0)
+                next.filter = {
+                    ...(view.filter?.match === 'any' ? { match: 'any' } : {}),
+                    rules,
+                };
+            else
+                delete next.filter;
+            await onSaveView(next);
+        },
+        sort: async (columnId, direction) => {
+            const target = tableModel.visibleColumns.find((column) => column.id === columnId);
+            if (!target)
+                return;
+            const remaining = view.sort
+                .filter((sort) => !sameJsonViewPath(sort.path, target.path))
+                .map((sort) => ({ path: sort.path.source, direction: sort.direction }));
+            const next = { ...rawView };
+            const sort = direction ? [{ path: target.path.source, direction }, ...remaining] : remaining;
+            if (sort.length > 0)
+                next.sort = sort;
+            else
+                delete next.sort;
+            await onSaveView(next);
+        },
+    } : undefined;
+    const getCellSourcePath = useCallback((rowIndex, columnId) => {
+        const column = tableModel.visibleColumns.find((candidate) => candidate.id === columnId);
+        return column && resolveJsonViewRowPath(compiled.root, projected.rows[rowIndex], column.path).sourcePath;
+    }, [compiled.root, projected.rows, tableModel.visibleColumns]);
+    const openRow = rowAtSourcePath(compiled.root, openRowPath);
+    const reportedPath = openRow?.sourcePath ?? openCell?.path ?? view.sourcePath;
+    const reportedPathKey = JSON.stringify(reportedPath);
+    useEffect(() => {
+        if (openRow || openCell)
+            onCurrentPathChange?.(reportedPath);
+    }, [onCurrentPathChange, reportedPathKey, Boolean(openRow), Boolean(openCell)]);
+    const reportVisibleRows = useCallback((indices, filtered) => {
+        const narrowed = filtered || Boolean(view.filter?.rules.length) || query.trim().length > 0;
+        onCurrentPathChange?.(view.sourcePath, narrowed
+            ? indices.map((index) => projected.rows[index].sourcePath)
+            : undefined);
+    }, [onCurrentPathChange, projected.rows, query, view.filter, view.sourcePath]);
+    if (openRow)
+        return _jsx(RecordView, { editPath: editPath, compiled: compiled, editing: editing, filePath: filePath, copyFileName: copyFileName, fillHeight: fillHeight, onBack: () => { setOpenRowPath(undefined); setEditPath(undefined); }, onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, row: openRow, uiSize: uiSize, view: view });
+    if (openCell) {
+        return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx(GeneralJsonView, { breadcrumb: { ancestors: [view.name, openCell.rowLabel], backLabel: `Back to ${view.name} table`, onBack: () => setOpenCell(undefined) }, root: compiled.root, initialPath: openCell.path, defaultKey: openCell.fieldLabel, filePath: `${filePath ?? 'json'}#${view.id}:cell:${JSON.stringify(openCell.path)}`, editing: editing, onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, schemaForPath: (path) => schemaForJsonViewPath(compiled.schema, path)?.descriptor, uiSize: uiSize, fillHeight: fillHeight, renderRecord: (target) => _jsx(GeneralRecordView, { ...target, compiled: compiled, copyFileName: copyFileName, editing: editing, filePath: filePath, fillHeight: fillHeight, name: view.name, onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize }) }) }));
+    }
+    const { columnFilterOperators, columnFilterValues, labels, records, stateKeys, titleColumn, visibleColumns } = tableModel;
+    const collection = view.value;
+    const addRow = editing && Array.isArray(collection) ? async () => {
+        const sourcePath = [...view.sourcePath, collection.length];
+        await editing.append(view.sourcePath, blankRow(compiled, view));
+        editing.registerDraftRow?.(sourcePath);
+        setOpenRowPath(sourcePath);
+    } : undefined;
+    const addColumn = editing?.addColumn && rawView && view.declarationIndex >= 0 && Array.isArray(collection) ? async ({ label, type }) => {
+        let base = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '') || 'property';
+        if (/^[0-9]/.test(base))
+            base = `property_${base}`;
+        const existing = new Set(collection.flatMap((row) => row && typeof row === 'object' && !Array.isArray(row) ? Object.keys(row) : []));
+        let property = base;
+        let suffix = 2;
+        while (existing.has(property))
+            property = `${base}_${suffix++}`;
+        const schemaPath = `${view.path.source}[*].${property}`;
+        const descriptor = { type, title: label };
+        if (type === 'select' || type === 'multi-select')
+            descriptor.options = [];
+        await editing.addColumn(view.sourcePath, property, schemaPath, descriptor, view.declarationIndex);
+    } : undefined;
+    const deleteColumn = editing?.deleteColumn && rawView && Array.isArray(collection) ? async (columnId) => {
+        const column = tableModel.visibleColumns.find((candidate) => candidate.id === columnId);
+        const relative = column ? rowFieldPath(view, column.path) : undefined;
+        if (!column || !relative || relative.length !== 1)
+            throw new Error('Only direct row properties can be deleted');
+        await editing.deleteColumn(view.sourcePath, relative[0], column.path.source);
+    } : undefined;
+    return (_jsx(TabularObjectArrayView, { arr: records, getCellSourcePath: getCellSourcePath, rowKeys: projected.rows.map((row) => JSON.stringify(row.sourcePath)), onVisibleRowsChange: reportVisibleRows, columns: visibleColumns.map(({ id }) => id), columnLabels: labels, filePath: filePath, columnStateKeys: stateKeys, viewStateKey: `jsonView:${view.id}`, presentationControls: view.declarationIndex < 0 || compiled.recognized === false, activeColumnFilters: declaredColumnActions?.activeFilters, activeColumnSort: declaredColumnActions?.activeSort, columnFilterOperators: columnFilterOperators, columnFilterValues: columnFilterValues, onColumnFilter: declaredColumnActions?.filter, onColumnRename: declaredColumnActions?.rename, onColumnHide: declaredColumnActions?.hide, onColumnMove: declaredColumnActions?.move, onColumnDelete: deleteColumn, onAddColumn: addColumn, onColumnSort: declaredColumnActions?.sort, fillHeight: fillHeight, uiSize: uiSize, recordNavigation: titleColumn ? {
+            titleColumn: titleColumn.id,
+            getLabel: (rowIndex) => {
+                const row = projected.rows[rowIndex];
+                return sourceLiteral(titleFieldForRow(compiled.root, view, row)?.path) ?? titleForRow(compiled.root, view, row);
+            },
+            onOpen: (rowIndex) => setOpenRowPath(projected.rows[rowIndex].sourcePath),
+            renderTitle: ({ value, rowIndex }) => {
+                const row = projected.rows[rowIndex];
+                const resolved = resolveJsonViewRowPath(compiled.root, row, titleColumn.path);
+                const descriptor = schemaForJsonViewPath(compiled.schema, resolved.sourcePath)?.descriptor;
+                const coloredDescriptor = descriptor && withColumnOptionColors(descriptor, columnFilterValues[titleColumn.id] ?? [value], visibleColumns.findIndex((candidate) => candidate.id === titleColumn.id));
+                if (resolved.value === JSON_VIEW_PATH_MISSING)
+                    return _jsx("span", { className: "italic text-muted-foreground", children: "Untitled" });
+                return coloredDescriptor
+                    ? _jsx(JsonViewSchemaValueDisplay, { sourcePath: resolved.sourcePath, compact: true, decorative: true, passive: true, descriptor: coloredDescriptor, value: value, onOpen: () => undefined, renderMarkdown: renderMarkdown })
+                    : _jsx(ValueCellContent, { containerInteractive: false, sourcePath: resolved.sourcePath, value: value, onOpen: () => undefined });
+            },
+        } : undefined, onOpenCell: ({ rowIndex, column }) => {
+            const displayColumn = visibleColumns.find((candidate) => candidate.id === column);
+            const row = projected.rows[rowIndex];
+            if (!displayColumn || !row)
+                return;
+            const resolved = resolveJsonViewRowPath(compiled.root, row, displayColumn.path);
+            if (resolved.value !== JSON_VIEW_PATH_MISSING)
+                setOpenCell({
+                    fieldLabel: displayColumn.label,
+                    path: resolved.sourcePath,
+                    rowLabel: titleForRow(compiled.root, view, row),
+                });
+        }, renderCell: ({ value, rowIndex, column, open }) => {
+            const displayColumn = visibleColumns.find((candidate) => candidate.id === column);
+            const row = projected.rows[rowIndex];
+            if (!displayColumn || !row)
+                return null;
+            const resolved = resolveJsonViewRowPath(compiled.root, row, displayColumn.path);
+            const schema = schemaForJsonViewPath(compiled.schema, resolved.sourcePath);
+            const descriptor = schema?.descriptor;
+            const coloredDescriptor = descriptor && withColumnOptionColors(descriptor, columnFilterValues[column] ?? [value], visibleColumns.findIndex((candidate) => candidate.id === column));
+            if (isLongText(value, descriptor))
+                return (_jsx("button", { type: "button", className: "block h-full w-full min-w-0 truncate px-1.5 py-1 text-left hover:bg-accent focus-visible:ring-1 focus-visible:ring-ring", "aria-label": `Open ${displayColumn.label} in record`, onClick: () => { setEditPath(resolved.sourcePath); setOpenRowPath(row.sourcePath); }, children: value || '—' }));
+            if (coloredDescriptor) {
+                return (_jsx(JsonViewSchemaValueCell, { sourcePath: resolved.sourcePath, descriptor: coloredDescriptor, suppressRequiredValidation: editing?.isDraftRow?.(row.sourcePath) === true, onOptionColorChange: editing?.setOptionColor && schema ? (optionValue, color) => editing.setOptionColor(schema.declaration, optionValue, color) : undefined, inputKey: String(resolved.sourcePath[resolved.sourcePath.length - 1] ?? displayColumn.label), label: descriptor.title ?? displayColumn.label, value: value, onOpen: open, onClear: editing && resolved.value !== JSON_VIEW_PATH_MISSING ? () => editing.clear(resolved.sourcePath) : undefined, onCommit: editing && editing.canReplace?.(resolved.sourcePath) !== false && resolved.value !== JSON_VIEW_PATH_MISSING ? (next) => editing.replace(resolved.sourcePath, next) : undefined, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, saving: editing?.saving }));
+            }
+            if (editing && editing.canReplace?.(resolved.sourcePath) !== false && resolved.value !== JSON_VIEW_PATH_MISSING && isEditableAtomicValue(value)) {
+                return (_jsx(AtomicValueEditor, { label: displayColumn.label, value: value, saving: editing.saving, onCommit: (next) => editing.replace(resolved.sourcePath, next), children: _jsx(ValueCellContent, { sourcePath: resolved.sourcePath, value: value, onOpen: open }) }));
+            }
+            return _jsx(ValueCell, { sourcePath: resolved.sourcePath, value: value, onOpen: open });
+        }, onAddRow: addRow, getRowsCopyText: (rowIndices) => jsonRowsCopyText(rowIndices.flatMap((index) => {
+            const row = projected.rows[index];
+            return row ? [{ value: row.value, sourcePath: row.sourcePath }] : [];
+        }), sourceLiteral), getRowsReferenceText: (rowIndices) => jsonRowsReferenceText(copyFileName, rowIndices.flatMap((index) => {
+            const row = projected.rows[index];
+            return row ? [{ sourcePath: row.sourcePath }] : [];
+        })), onDeleteRows: editing ? (rowIndices) => editing.removeMany(removalOrder(rowIndices.map((index) => projected.rows[index]?.sourcePath).filter((path) => path !== undefined))) : undefined, rowAdditionDisabled: editing?.saving, rowDeletionDisabled: editing?.saving }));
+}

package/dist/json/use-kanban-card-drag.d.ts

@@ -0,0 +1,13 @@
+import { type DragEvent, type RefObject } from 'react';
+export declare function useKanbanCardDrag({ boardRef, enabled, scope, onMove }: {
+    boardRef: RefObject<HTMLDivElement | null>;
+    enabled: boolean;
+    scope: string;
+    onMove: (id: string, group: string, before?: string) => void;
+}): {
+    start: (event: DragEvent<HTMLElement>, id: string) => void;
+    onDragEnterCapture(event: DragEvent<HTMLDivElement>): void;
+    onDragOverCapture(event: DragEvent<HTMLDivElement>): void;
+    onDropCapture(event: DragEvent<HTMLDivElement>): void;
+    onDragLeave(event: DragEvent<HTMLDivElement>): void;
+};

package/dist/json/use-kanban-card-drag.js

@@ -0,0 +1,255 @@
+import { useEffect, useRef } from 'react';
+// Geometry is measured once, then projected from the current slot. Card widgets
+// never rerender on hover; transform-only movement is batched to one frame.
+export function useKanbanCardDrag({ boardRef, enabled, scope, onMove }) {
+    const sessionRef = useRef(undefined);
+    const moveRef = useRef(onMove);
+    moveRef.current = onMove;
+    function clear() {
+        const session = sessionRef.current;
+        sessionRef.current = undefined;
+        if (!session)
+            return;
+        if (session.frame !== undefined)
+            cancelAnimationFrame(session.frame);
+        session.cleanup();
+        session.restore.reverse().forEach(restore => restore());
+        session.card.element.removeAttribute('aria-grabbed');
+    }
+    useEffect(() => clear, [scope, enabled]);
+    function cardsIn(session, lane) {
+        return lane.cards.filter(card => card !== session.card);
+    }
+    function destination(session) {
+        const board = boardRef.current;
+        const bounds = board.getBoundingClientRect();
+        if (session.x < bounds.left || session.x > bounds.right || session.y < bounds.top || session.y > bounds.bottom)
+            return;
+        const x = session.x - bounds.left + board.scrollLeft;
+        const y = session.y - bounds.top + board.scrollTop;
+        // Include the narrow gutters, but not arbitrary space beyond the board.
+        const lane = session.lanes.find(lane => x >= lane.left - 6 && x <= lane.right + 6);
+        if (!lane)
+            return;
+        const cards = cardsIn(session, lane);
+        let top = lane.top + lane.padding;
+        for (const [index, card] of cards.entries()) {
+            if (session.slot?.lane === lane && session.slot.index === index)
+                top += session.card.height + lane.gap;
+            if (y < top + card.height / 2)
+                return { lane, index };
+            top += card.height + lane.gap;
+        }
+        return { lane, index: cards.length };
+    }
+    function saveStyle(session, element) {
+        const original = element.getAttribute('style');
+        session.restore.push(() => {
+            if (original === null)
+                element.removeAttribute('style');
+            else
+                element.setAttribute('style', original);
+        });
+    }
+    function prepare(session) {
+        if (session.prepared)
+            return;
+        session.prepared = true;
+        const board = boardRef.current;
+        saveStyle(session, board);
+        // Keep short/empty lanes reachable while their cards move to another lane.
+        board.style.minHeight = `${board.clientHeight}px`;
+        for (const lane of session.lanes) {
+            saveStyle(session, lane.list);
+            Object.assign(lane.list.style, { display: 'block', position: 'relative' });
+            let top = lane.padding;
+            for (const card of lane.cards) {
+                saveStyle(session, card.element);
+                Object.assign(card.element.style, { position: 'absolute', left: '0', top: '0', width: '100%', height: `${card.height}px`, transform: `translateY(${top}px)` });
+                top += card.height + lane.gap;
+            }
+        }
+        session.card.element.style.opacity = '0';
+        // Commit the starting geometry before enabling transitions.
+        void board.offsetHeight;
+        board.setAttribute('data-card-reordering', 'true');
+    }
+    function project(session, slot) {
+        if (session.projected && session.slot?.lane === slot?.lane && session.slot?.index === slot?.index)
+            return;
+        session.projected = true;
+        session.slot = slot;
+        // Outside the board, restore the original arrangement until the drag returns.
+        const landing = slot ?? session.original;
+        for (const lane of session.lanes) {
+            const cards = cardsIn(session, lane);
+            let top = lane.padding;
+            for (let index = 0; index <= cards.length; index++) {
+                if (landing.lane === lane && landing.index === index) {
+                    lane.list.appendChild(session.preview);
+                    session.preview.style.transform = `translateY(${top}px)`;
+                    top += session.card.height + lane.gap;
+                }
+                const card = cards[index];
+                if (card) {
+                    card.element.style.transform = `translateY(${top}px)`;
+                    top += card.height + lane.gap;
+                }
+            }
+            lane.list.style.height = `${Math.max(lane.padding, top - lane.gap)}px`;
+        }
+        session.preview.hidden = !slot;
+        session.card.element.style.opacity = slot ? '0' : '';
+    }
+    function paint(time) {
+        const session = sessionRef.current;
+        const board = boardRef.current;
+        if (!session || !board)
+            return;
+        session.frame = undefined;
+        prepare(session);
+        const bounds = board.getBoundingClientRect();
+        const inside = session.x >= bounds.left && session.x <= bounds.right && session.y >= bounds.top && session.y <= bounds.bottom;
+        const speed = (point, start, end) => {
+            const edge = Math.min(56, (end - start) / 4);
+            return point < start + edge ? -Math.min(1, (start + edge - point) / edge)
+                : point > end - edge ? Math.min(1, (point - end + edge) / edge) : 0;
+        };
+        const elapsed = Math.min(32, session.time === undefined ? 16 : time - session.time);
+        session.time = time;
+        const left = board.scrollLeft;
+        const top = board.scrollTop;
+        if (inside) {
+            board.scrollLeft = Math.max(0, board.scrollLeft + speed(session.x, bounds.left, bounds.right) * elapsed * .65);
+            board.scrollTop = Math.max(0, board.scrollTop + speed(session.y, bounds.top, bounds.bottom) * elapsed * .65);
+        }
+        project(session, destination(session));
+        if (board.scrollLeft !== left || board.scrollTop !== top)
+            schedule();
+    }
+    function schedule() {
+        const session = sessionRef.current;
+        if (session && session.frame === undefined)
+            session.frame = requestAnimationFrame(paint);
+    }
+    function start(event, id) {
+        const board = boardRef.current;
+        if (!enabled || !board) {
+            event.preventDefault();
+            return;
+        }
+        clear();
+        const bounds = board.getBoundingClientRect();
+        const lanes = Array.from(board.querySelectorAll('[data-id="jsonView-kanban-column"]')).map(element => {
+            const rect = element.getBoundingClientRect();
+            const list = element.querySelector('[data-id="jsonView-kanban-cards"]');
+            const style = getComputedStyle(list);
+            return {
+                key: element.dataset.groupKey, list,
+                left: rect.left - bounds.left + board.scrollLeft, right: rect.right - bounds.left + board.scrollLeft,
+                top: list.getBoundingClientRect().top - bounds.top + board.scrollTop,
+                padding: parseFloat(style.paddingTop) || 0, gap: parseFloat(style.rowGap) || 10,
+                cards: Array.from(list.querySelectorAll('[data-id="jsonView-kanban-card"]')).map(element => ({ id: element.dataset.rowId, element, height: element.getBoundingClientRect().height })),
+            };
+        });
+        const lane = lanes.find(lane => lane.cards.some(card => card.id === id));
+        const card = lane?.cards.find(card => card.id === id);
+        if (!lane || !card) {
+            event.preventDefault();
+            return;
+        }
+        event.stopPropagation();
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('application/x-jsonView-json-row', id);
+        const preview = card.element.cloneNode(true);
+        // This is a visual clone, not another interactive or accessible card.
+        for (const element of [preview, ...preview.querySelectorAll('*')]) {
+            element.removeAttribute('id');
+            element.removeAttribute('data-id');
+            element.removeAttribute('data-row-id');
+        }
+        preview.inert = true;
+        preview.draggable = false;
+        preview.setAttribute('aria-hidden', 'true');
+        preview.setAttribute('data-id', 'jsonView-kanban-card-preview');
+        Object.assign(preview.style, { position: 'absolute', top: '0', left: '0', width: '100%', height: `${card.height}px` });
+        const ghost = preview.cloneNode(true);
+        ghost.removeAttribute('data-id');
+        Object.assign(ghost.style, { position: 'fixed', left: '-10000px', width: `${card.element.getBoundingClientRect().width}px` });
+        board.appendChild(ghost);
+        const cardBounds = card.element.getBoundingClientRect();
+        event.dataTransfer.setDragImage?.(ghost, Math.max(0, event.clientX - cardBounds.left), Math.max(0, event.clientY - cardBounds.top));
+        card.element.setAttribute('aria-grabbed', 'true');
+        const doc = board.ownerDocument;
+        const escape = (event) => { if (event.key === 'Escape')
+            clear(); };
+        const resize = () => clear();
+        const original = { lane, index: lane.cards.indexOf(card) };
+        sessionRef.current = {
+            card, lanes, original, slot: original, preview, x: event.clientX, y: event.clientY, prepared: false, projected: false, restore: [],
+            cleanup: () => {
+                board.removeAttribute('data-card-reordering');
+                preview.remove();
+                ghost.remove();
+                doc.removeEventListener('keydown', escape, true);
+                doc.removeEventListener('dragend', clear);
+                doc.removeEventListener('drop', clear);
+                doc.defaultView?.removeEventListener('blur', clear);
+                doc.defaultView?.removeEventListener('resize', resize);
+                board.removeEventListener('scroll', schedule);
+            },
+        };
+        doc.addEventListener('keydown', escape, true);
+        doc.addEventListener('dragend', clear);
+        doc.addEventListener('drop', clear);
+        doc.defaultView?.addEventListener('blur', clear);
+        doc.defaultView?.addEventListener('resize', resize);
+        board.addEventListener('scroll', schedule, { passive: true });
+        schedule();
+    }
+    return {
+        start,
+        onDragEnterCapture(event) {
+            if (!sessionRef.current)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        onDragOverCapture(event) {
+            const session = sessionRef.current;
+            if (!session)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.dataTransfer.dropEffect = 'move';
+            session.x = event.clientX;
+            session.y = event.clientY;
+            schedule();
+        },
+        onDropCapture(event) {
+            const session = sessionRef.current;
+            if (!session)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            session.x = event.clientX;
+            session.y = event.clientY;
+            const slot = destination(session);
+            const before = slot && cardsIn(session, slot.lane)[slot.index]?.id;
+            clear();
+            if (slot && (slot.lane !== session.original.lane || slot.index !== session.original.index))
+                moveRef.current(session.card.id, slot.lane.key, before);
+        },
+        onDragLeave(event) {
+            const session = sessionRef.current;
+            if (!session || (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)))
+                return;
+            const bounds = event.currentTarget.getBoundingClientRect();
+            if (event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom)
+                return;
+            session.x = -Infinity;
+            if (session.prepared)
+                project(session);
+        },
+    };
+}

package/dist/json/use-kanban-column-drag.d.ts

@@ -0,0 +1,14 @@
+import { type DragEvent } from 'react';
+export declare function useKanbanColumnDrag({ enabled, scope, onMove }: {
+    enabled: boolean;
+    scope: string;
+    onMove: (source: string, target: string, position: 'before' | 'after') => void;
+}): {
+    boardRef: import("react").RefObject<HTMLDivElement | null>;
+    markerRef: import("react").RefObject<HTMLDivElement | null>;
+    start: (event: DragEvent<HTMLElement>, key: string) => void;
+    onDragEnterCapture(event: DragEvent<HTMLDivElement>): void;
+    onDragOverCapture(event: DragEvent<HTMLDivElement>): void;
+    onDropCapture(event: DragEvent<HTMLDivElement>): void;
+    onDragLeave(event: DragEvent<HTMLDivElement>): void;
+};