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

package/dist/json/kanban-view.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonSourceLiterals } from './source-literals.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { File, FileText, GripVertical } from 'lucide-react';
+import { useJsonViewsRegistries } from '../widget-registry.js';
+import { cn } from '../lib/cn.js';
+import {} from '@script-it/json-views-core';
+import { JSON_VIEW_PATH_MISSING, resolveJsonViewRowPath, schemaForJsonViewPath } from '@script-it/json-views-core';
+import { JsonViewSchemaValueCell } from './schema-value.js';
+import { applyJsonViewViewRows, projectJsonViewCollection } from '@script-it/json-views-core';
+import { GeneralJsonView } from './viewers/general/general-json-view.js';
+import { OptionPill, optionColorsForValues } from '../primitives/option-pill.js';
+import {} from './view-types.js';
+import { matchesSearch, inferredDescriptor, rowHasLongText, titleForRow, titleFieldForRow, rowAtSourcePath, sameJsonViewPath } from './view-model.js';
+import { GeneralRecordView, RecordView } from './record-view.js';
+import { useKanbanColumnDrag } from './use-kanban-column-drag.js';
+import { useKanbanCardDrag } from './use-kanban-card-drag.js';
+const KANBAN_GROUP_COLORS = {
+    gray: 'border-border bg-muted/40',
+    blue: 'border-border bg-muted/40',
+    green: 'border-border bg-muted/40',
+    yellow: 'border-border bg-muted/40',
+    orange: 'border-border bg-muted/40',
+    red: 'border-border bg-muted/40',
+    purple: 'border-border bg-muted/40',
+    pink: 'border-border bg-muted/40',
+};
+function kanbanGroup(value) {
+    if (value === JSON_VIEW_PATH_MISSING || value == null || value === '') {
+        return { key: 'empty', label: 'No value', value: '' };
+    }
+    return {
+        key: `value:${typeof value}:${JSON.stringify(value)}`,
+        label: String(value),
+        value,
+    };
+}
+function groupValues(compiled, view, rows) {
+    if (!view.groupBy)
+        return [];
+    const samplePath = rows[0]
+        ? resolveJsonViewRowPath(compiled.root, rows[0], view.groupBy).sourcePath
+        : view.groupBy.segments.map((segment) => {
+            if (segment.kind === 'property')
+                return segment.key;
+            if (segment.kind === 'index')
+                return segment.index;
+            return 0;
+        });
+    const configured = schemaForJsonViewPath(compiled.schema, samplePath)?.descriptor.options;
+    const values = new Map();
+    view.groupOrder?.forEach((item) => {
+        const group = kanbanGroup(item);
+        values.set(group.key, group);
+    });
+    if (Array.isArray(configured)) {
+        configured.filter((item) => typeof item === 'string').forEach((item) => {
+            const group = kanbanGroup(item);
+            values.set(group.key, group);
+        });
+    }
+    for (const row of rows) {
+        const value = resolveJsonViewRowPath(compiled.root, row, view.groupBy).value;
+        const group = kanbanGroup(value);
+        values.set(group.key, group);
+    }
+    const positions = new Map(view.groupOrder?.map((value, index) => [kanbanGroup(value).key, index]));
+    return Array.from(values.values()).sort((left, right) => {
+        const leftPosition = positions.get(left.key);
+        const rightPosition = positions.get(right.key);
+        if (leftPosition !== undefined || rightPosition !== undefined) {
+            return (leftPosition ?? Infinity) - (rightPosition ?? Infinity);
+        }
+        if (left.key === 'empty' || right.key === 'empty')
+            return left.key === 'empty' ? 1 : -1;
+        if (typeof left.value === 'number' && typeof right.value === 'number')
+            return left.value - right.value;
+        return left.label.localeCompare(right.label, undefined, { numeric: true, sensitivity: 'base' });
+    });
+}
+function rowIdentity(row) {
+    return JSON.stringify(row.sourcePath);
+}
+function groupValueForRow(root, view, row) {
+    if (!view.groupBy)
+        return kanbanGroup(JSON_VIEW_PATH_MISSING);
+    const value = resolveJsonViewRowPath(root, row, view.groupBy).value;
+    return kanbanGroup(value);
+}
+function orderRows(root, view, rows, temporaryOrder) {
+    if (view.orderPath) {
+        return rows.map((row, index) => ({ row, index })).sort((left, right) => {
+            const leftValue = resolveJsonViewRowPath(root, left.row, view.orderPath).value;
+            const rightValue = resolveJsonViewRowPath(root, right.row, view.orderPath).value;
+            if (typeof leftValue === 'number' && typeof rightValue === 'number')
+                return leftValue - rightValue || left.index - right.index;
+            if (typeof leftValue === 'number')
+                return -1;
+            if (typeof rightValue === 'number')
+                return 1;
+            return left.index - right.index;
+        }).map(({ row }) => row);
+    }
+    if (!temporaryOrder)
+        return rows;
+    const positions = new Map(temporaryOrder.map((id, index) => [id, index]));
+    return rows.map((row, index) => ({ row, index })).sort((left, right) => ((positions.get(rowIdentity(left.row)) ?? Number.MAX_SAFE_INTEGER)
+        - (positions.get(rowIdentity(right.row)) ?? Number.MAX_SAFE_INTEGER)
+        || left.index - right.index)).map(({ row }) => row);
+}
+export function KanbanView({ compiled, copyFileName, editing, filePath, fillHeight, query, onCurrentPathChange, onSaveView, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }) {
+    const { types } = useJsonViewsRegistries();
+    const sourceLiteral = useJsonSourceLiterals();
+    const rowTitle = (row) => sourceLiteral(titleFieldForRow(compiled.root, view, row)?.path) ?? titleForRow(compiled.root, view, row);
+    const [openRowPath, setOpenRowPath] = useState();
+    const [pendingGroups, setPendingGroups] = useState();
+    const savingGroups = useRef(false);
+    const [dragError, setDragError] = useState();
+    const boardRef = useRef(null);
+    const boardPosition = useRef({ left: 0, top: 0 });
+    useEffect(() => {
+        if (openRowPath)
+            return;
+        const board = boardRef.current;
+        if (board) {
+            board.scrollLeft = boardPosition.current.left;
+            board.scrollTop = boardPosition.current.top;
+        }
+    }, [openRowPath]);
+    const [moveNotice, setMoveNotice] = useState('');
+    const [temporaryOrder, setTemporaryOrder] = useState({});
+    const completeRows = useMemo(() => applyJsonViewViewRows(compiled.root, view, compiled.schema, types, sourceLiteral), [compiled.root, compiled.schema, view, types, types.version, sourceLiteral]);
+    const rows = useMemo(() => completeRows.filter((row) => matchesSearch(row.value, query)), [completeRows, query]);
+    const openRow = rowAtSourcePath(compiled.root, openRowPath);
+    const reportedPath = openRow?.sourcePath ?? view.sourcePath;
+    const reportedPathKey = JSON.stringify(reportedPath);
+    const savedGroups = useMemo(() => groupValues(compiled, view, completeRows), [compiled, view, completeRows]);
+    const groups = pendingGroups ?? savedGroups;
+    const hasGroupReordering = rawView !== undefined && onSaveView !== undefined && groups.length > 1;
+    const canReorderGroups = hasGroupReordering && !pendingGroups && !editing?.saving;
+    const moveGroup = async (sourceKey, targetKey, position) => {
+        if (!canReorderGroups || savingGroups.current || sourceKey === targetKey)
+            return;
+        const ordered = [...groups];
+        const sourceIndex = ordered.findIndex((group) => group.key === sourceKey);
+        const targetIndex = ordered.findIndex((group) => group.key === targetKey);
+        if (sourceIndex < 0 || targetIndex < 0)
+            return;
+        const [moved] = ordered.splice(sourceIndex, 1);
+        const updatedTargetIndex = ordered.findIndex((group) => group.key === targetKey);
+        ordered.splice(updatedTargetIndex + (position === 'after' ? 1 : 0), 0, moved);
+        if (ordered.every((group, index) => group.key === groups[index].key))
+            return;
+        setDragError(undefined);
+        savingGroups.current = true;
+        setPendingGroups(ordered);
+        try {
+            await onSaveView({ ...rawView, groupOrder: ordered.map((group) => group.value) });
+        }
+        catch (error) {
+            setDragError(error instanceof Error ? error.message : 'Could not reorder these columns');
+        }
+        finally {
+            savingGroups.current = false;
+            setPendingGroups(undefined);
+        }
+    };
+    const columnDrag = useKanbanColumnDrag({
+        enabled: canReorderGroups && !openRow,
+        scope: JSON.stringify([filePath, view.id, view.groupBy?.source, savedGroups.map(group => group.key)]),
+        onMove: (source, target, position) => { void moveGroup(source, target, position); },
+    });
+    const projected = useMemo(() => projectJsonViewCollection(compiled.root, view, compiled.schema, types, sourceLiteral), [compiled, view, types, types.version, sourceLiteral]);
+    const cardFields = useMemo(() => projected.columns.filter((column) => {
+        if (sameJsonViewPath(column.path, projected.columns[0]?.path) || sameJsonViewPath(column.path, view.groupBy))
+            return false;
+        return !projected.rows.some((row) => {
+            const resolved = resolveJsonViewRowPath(compiled.root, row, column.path);
+            if (resolved.value === JSON_VIEW_PATH_MISSING)
+                return false;
+            const descriptor = schemaForJsonViewPath(compiled.schema, resolved.sourcePath)?.descriptor;
+            if (Array.isArray(resolved.value))
+                return descriptor?.type !== 'multi-select';
+            return resolved.value !== null && typeof resolved.value === 'object';
+        });
+    }).slice(0, 3), [projected, compiled, view]);
+    const rowsByGroup = useMemo(() => {
+        const buckets = new Map();
+        for (const row of rows) {
+            const key = groupValueForRow(compiled.root, view, row).key;
+            const bucket = buckets.get(key);
+            if (bucket)
+                bucket.push(row);
+            else
+                buckets.set(key, [row]);
+        }
+        for (const [key, bucket] of buckets)
+            buckets.set(key, orderRows(compiled.root, view, bucket, temporaryOrder[key]));
+        return buckets;
+    }, [compiled.root, view, rows, temporaryOrder]);
+    const sourcePaths = !openRow && view.groupBy && (view.filter?.rules.length || query.trim())
+        ? groups.flatMap((group) => (rowsByGroup.get(group.key) ?? []).map((row) => row.sourcePath))
+        : undefined;
+    const sourcePathsKey = JSON.stringify(sourcePaths);
+    useEffect(() => {
+        onCurrentPathChange?.(reportedPath, sourcePaths);
+    }, [onCurrentPathChange, reportedPathKey, sourcePathsKey]);
+    const cardDrag = useKanbanCardDrag({
+        boardRef: columnDrag.boardRef,
+        enabled: !!editing && !editing.saving && !openRow,
+        scope: JSON.stringify([filePath, view.id, view.groupBy?.source, groups.map(group => group.key), rows.map(row => [rowIdentity(row), row.value]), temporaryOrder]),
+        onMove: (id, key, before) => {
+            const row = completeRows.find(row => rowIdentity(row) === id);
+            const group = groups.find(group => group.key === key);
+            if (row && group)
+                void place(row, group, completeRows.find(row => rowIdentity(row) === before));
+        },
+    });
+    if (openRow)
+        return _jsx(RecordView, { compiled: compiled, copyFileName: copyFileName, editing: editing, filePath: filePath, fillHeight: fillHeight, onBack: () => setOpenRowPath(undefined), onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, row: openRow, uiSize: uiSize, view: view });
+    if (!view.groupBy)
+        return _jsx(GeneralJsonView, { root: compiled.root, initialPath: view.sourcePath, defaultKey: view.name, editing: editing, fillHeight: fillHeight, uiSize: uiSize, 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 place = async (row, group, beforeRow) => {
+        const resolved = resolveJsonViewRowPath(compiled.root, row, view.groupBy);
+        if (!editing || editing.saving || editing.canReplace?.(resolved.sourcePath) === false || resolved.value === JSON_VIEW_PATH_MISSING)
+            return;
+        const currentGroup = groupValueForRow(compiled.root, view, row);
+        const targetRows = orderRows(compiled.root, view, completeRows.filter((candidate) => groupValueForRow(compiled.root, view, candidate).key === group.key && rowIdentity(candidate) !== rowIdentity(row)), temporaryOrder[group.key]);
+        const targetIndex = beforeRow ? targetRows.findIndex((candidate) => rowIdentity(candidate) === rowIdentity(beforeRow)) : -1;
+        const insertAt = targetIndex < 0 ? targetRows.length : targetIndex;
+        targetRows.splice(insertAt, 0, row);
+        setDragError(undefined);
+        try {
+            setMoveNotice('');
+            if (!view.orderPath) {
+                // Keep the exact previewed slot even when a cross-column move only
+                // persists the grouping field (there is no numeric orderPath).
+                setTemporaryOrder((current) => ({ ...current, [group.key]: targetRows.map(rowIdentity) }));
+                if (currentGroup.key === group.key) {
+                    setMoveNotice(`${rowTitle(row)} reordered in ${group.label}`);
+                    return;
+                }
+                await editing.replace(resolved.sourcePath, group.value);
+                setMoveNotice(`${rowTitle(row)} moved to ${group.label}`);
+                return;
+            }
+            const affectedGroups = currentGroup.key === group.key ? [targetRows] : [
+                orderRows(compiled.root, view, completeRows.filter((candidate) => groupValueForRow(compiled.root, view, candidate).key === currentGroup.key && rowIdentity(candidate) !== rowIdentity(row))),
+                targetRows,
+            ];
+            const replacements = [];
+            if (currentGroup.key !== group.key)
+                replacements.push({ path: resolved.sourcePath, value: group.value });
+            for (const groupRows of affectedGroups) {
+                for (const [index, candidate] of groupRows.entries()) {
+                    const order = resolveJsonViewRowPath(compiled.root, candidate, view.orderPath);
+                    if (order.value === JSON_VIEW_PATH_MISSING || typeof order.value !== 'number') {
+                        throw new Error(`orderPath must point to an existing number on every card`);
+                    }
+                    if (order.value !== index)
+                        replacements.push({ path: order.sourcePath, value: index });
+                }
+            }
+            if (replacements.some(({ path }) => editing.canReplace?.(path) === false))
+                throw new Error('One of the affected fields is read-only');
+            if (replacements.length > 0)
+                await editing.replaceMany(replacements);
+            setMoveNotice(`${rowTitle(row)} moved in ${group.label}`);
+        }
+        catch (error) {
+            setDragError(error instanceof Error ? error.message : 'Could not move this card');
+        }
+    };
+    return (_jsxs("div", { "data-id": "jsonView-kanban-layout", className: cn('min-w-0 max-w-full', fillHeight && 'flex min-h-0 flex-1 flex-col'), children: [_jsx("span", { role: "status", className: moveNotice ? 'mb-2 text-xs text-muted-foreground' : 'sr-only', children: moveNotice }), dragError && _jsx("p", { role: "alert", className: "mb-2 rounded-md border border-destructive-border bg-destructive-surface px-3 py-2 text-xs text-destructive-foreground", children: dragError }), _jsx("div", { ref: (node) => { boardRef.current = node; columnDrag.boardRef.current = node; }, "data-id": "jsonView-kanban", onScroll: () => {
+                    const board = boardRef.current;
+                    if (!board)
+                        return;
+                    boardPosition.current = { left: board.scrollLeft, top: board.scrollTop };
+                }, onDragEnterCapture: event => { columnDrag.onDragEnterCapture(event); cardDrag.onDragEnterCapture(event); }, onDragOverCapture: event => { columnDrag.onDragOverCapture(event); cardDrag.onDragOverCapture(event); }, onDropCapture: event => { columnDrag.onDropCapture(event); cardDrag.onDropCapture(event); }, onDragLeave: event => { columnDrag.onDragLeave(event); cardDrag.onDragLeave(event); }, className: cn('min-w-0 max-w-full overflow-x-auto overscroll-x-contain', fillHeight && 'min-h-0 flex-1 overflow-y-auto'), children: _jsxs("div", { className: "relative flex w-max min-w-full items-start gap-3 py-3 pr-3", children: [_jsxs("div", { ref: columnDrag.markerRef, "data-id": "jsonView-kanban-column-drop-indicator", hidden: true, "aria-hidden": true, className: "pointer-events-none absolute left-0 z-20 w-[3px] rounded-full bg-blue-500 ring-2 ring-background", children: [_jsx("span", { className: "absolute -left-[3px] -top-1 size-[9px] rounded-full bg-blue-500" }), _jsx("span", { className: "absolute -bottom-1 -left-[3px] size-[9px] rounded-full bg-blue-500" })] }), groups.map((group) => {
+                            const groupDescriptor = schemaForJsonViewPath(compiled.schema, view.groupBy.segments.map((segment) => (segment.kind === 'property' ? segment.key : segment.kind === 'index' ? segment.index : 0)))?.descriptor;
+                            const groupColors = optionColorsForValues([...(groupDescriptor?.options ?? []), ...groups.filter((entry) => entry.key !== 'empty').map((entry) => entry.label)], groupDescriptor?.optionColors);
+                            const groupColor = group.key === 'empty' ? 'gray' : groupColors[group.label];
+                            const grouped = rowsByGroup.get(group.key) ?? [];
+                            return (_jsxs("section", { "data-id": "jsonView-kanban-column", "data-group-value": group.label, "data-group-key": group.key, "data-group-color": groupColor, className: cn('relative w-64 shrink-0 rounded-lg border p-2.5 transition-colors data-[column-dragging=true]:opacity-40', KANBAN_GROUP_COLORS[groupColor]), children: [_jsxs("header", { "data-id": "jsonView-kanban-column-header", draggable: canReorderGroups, className: cn('flex h-8 select-none items-center justify-between gap-2 px-1 text-xs font-medium', canReorderGroups && 'cursor-grab active:cursor-grabbing'), onDragStart: (event) => columnDrag.start(event, group.key), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [hasGroupReordering && (_jsx("button", { type: "button", "data-id": "jsonView-kanban-column-move", draggable: canReorderGroups, disabled: !canReorderGroups, "aria-label": `Reorder ${group.label} column`, title: "Drag or use arrow keys to reorder this column", className: "shrink-0 cursor-grab rounded-sm text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-wait disabled:opacity-50", onKeyDown: (event) => {
+                                                            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+                                                                return;
+                                                            event.preventDefault();
+                                                            const offset = event.key === 'ArrowLeft' ? -1 : 1;
+                                                            const target = groups[groups.indexOf(group) + offset];
+                                                            if (target)
+                                                                void moveGroup(group.key, target.key, event.key === 'ArrowLeft' ? 'before' : 'after');
+                                                        }, children: _jsx(GripVertical, { "aria-hidden": true, className: "h-3.5 w-3.5" }) })), _jsx(OptionPill, { label: group.label, color: groupColor, className: "min-w-0 max-w-[10rem]", labelClassName: "truncate" })] }), _jsx("span", { className: "font-mono text-muted-foreground", children: grouped.length })] }), _jsxs("div", { "data-id": "jsonView-kanban-cards", className: "grid gap-2.5 pt-1.5", children: [grouped.length === 0 && _jsx("p", { className: "px-2 py-5 text-center text-xs text-muted-foreground", children: query ? 'No matching cards' : 'No cards' }), grouped.map((row, rowIndex) => {
+                                                const groupPath = resolveJsonViewRowPath(compiled.root, row, view.groupBy);
+                                                const canMove = editing !== undefined && editing.canReplace?.(groupPath.sourcePath) !== false && groupPath.value !== JSON_VIEW_PATH_MISSING;
+                                                const hasLongText = rowHasLongText(compiled, row.sourcePath);
+                                                const PageIcon = hasLongText ? FileText : File;
+                                                const rowId = rowIdentity(row);
+                                                return (_jsxs("article", { "data-id": "jsonView-kanban-card", "data-row-id": rowId, draggable: canMove && !editing.saving, className: "min-w-0 overflow-hidden rounded-md border border-border bg-card p-3 shadow-sm", onDragStart: (event) => {
+                                                        const target = event.target instanceof Element ? event.target : null;
+                                                        if (!canMove || (target?.closest('a, button, input, select, textarea, summary') && !target.closest('[data-id="jsonView-kanban-move"]'))) {
+                                                            event.preventDefault();
+                                                            return;
+                                                        }
+                                                        cardDrag.start(event, rowId);
+                                                    }, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-1.5", children: [_jsx("button", { type: "button", "data-id": "jsonView-kanban-move", draggable: canMove && !editing.saving, "aria-label": `Reorder ${rowTitle(row)}`, title: "Drag to move; use arrow keys when focused", disabled: !canMove || editing?.saving, className: "mt-0.5 shrink-0 cursor-grab rounded-sm text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default", onKeyDown: (event) => {
+                                                                        if (!canMove || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key))
+                                                                            return;
+                                                                        event.preventDefault();
+                                                                        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                                                                            const target = groups[groups.indexOf(group) + (event.key === 'ArrowLeft' ? -1 : 1)];
+                                                                            if (target)
+                                                                                void place(row, target);
+                                                                        }
+                                                                        else if (event.key === 'ArrowUp' && rowIndex > 0)
+                                                                            void place(row, group, grouped[rowIndex - 1]);
+                                                                        else if (event.key === 'ArrowDown' && rowIndex < grouped.length - 1)
+                                                                            void place(row, group, grouped[rowIndex + 2]);
+                                                                    }, children: _jsx(GripVertical, { "aria-hidden": true, className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", className: "min-w-0 flex-1 text-left text-xs font-medium leading-5 hover:underline", onClick: () => setOpenRowPath(row.sourcePath), children: _jsx("span", { className: "line-clamp-3", children: rowTitle(row) }) }), _jsx(PageIcon, { "data-id": "jsonView-row-page-icon", "data-page-content": hasLongText ? 'text' : 'empty', className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" })] }), _jsx("div", { className: "mt-2 grid gap-1.5 text-xs text-muted-foreground", children: cardFields.map((column) => {
+                                                                const resolved = resolveJsonViewRowPath(compiled.root, row, column.path);
+                                                                if (resolved.value === JSON_VIEW_PATH_MISSING)
+                                                                    return null;
+                                                                const schema = schemaForJsonViewPath(compiled.schema, resolved.sourcePath);
+                                                                const descriptor = schema?.descriptor ?? inferredDescriptor(resolved.value);
+                                                                return (_jsx("div", { className: "min-w-0", children: _jsx(JsonViewSchemaValueCell, { sourcePath: resolved.sourcePath, compact: true, descriptor: descriptor, 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] ?? column.label), label: descriptor.title ?? column.label, value: resolved.value, onOpen: () => setOpenRowPath(row.sourcePath), 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 }) }, column.id));
+                                                            }) })] }, JSON.stringify(row.sourcePath)));
+                                            })] })] }, group.key));
+                        })] }) })] }));
+}

package/dist/json/long-text.d.ts

@@ -0,0 +1,3 @@
+import type { JsonViewSchemaDescriptor } from '@script-it/json-views-core';
+/** Presentation only: never changes the stored value or inferred data type. */
+export declare function isLongText(value: unknown, descriptor?: JsonViewSchemaDescriptor): value is string;

package/dist/json/long-text.js

@@ -0,0 +1,6 @@
+/** Presentation only: never changes the stored value or inferred data type. */
+export function isLongText(value, descriptor) {
+    return typeof value === 'string'
+        && (!descriptor || descriptor.type === 'text' || descriptor.type === 'body' || descriptor.type === 'markdown' || descriptor.type === 'html')
+        && (descriptor?.multiline === true || descriptor?.type === 'body' || descriptor?.type === 'markdown' || descriptor?.type === 'html' || value.length > 120 || /[\r\n]/.test(value));
+}

package/dist/json/record-view.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../lib/ui-size.js';
+import { type ValuePath } from '@script-it/json-views-core';
+import { type CompiledJsonViewMetadata, type CompiledJsonViewView, type JsonViewViewRow } from '@script-it/json-views-core';
+import { type JsonViewSchemaExternalWidgetRenderer } from './schema-value.js';
+import { type GeneralJsonRecordTarget } from './viewers/general/general-json-view.js';
+import { type JsonViewJsonEditing } from './view-types.js';
+interface GeneralRecordViewProps extends GeneralJsonRecordTarget {
+    compiled: CompiledJsonViewMetadata;
+    editing?: JsonViewJsonEditing;
+    filePath?: string;
+    copyFileName: string;
+    fillHeight: boolean;
+    name: string;
+    onCurrentPathChange?: (path: ValuePath) => void;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    renderMarkdown?: (content: string) => ReactNode;
+    uiSize?: UiSize;
+}
+export declare function GeneralRecordView({ path, titleKey, name, ...props }: GeneralRecordViewProps): import("react").JSX.Element | null;
+export declare function RecordView({ compiled, editing, filePath, copyFileName, fillHeight, onBack, breadcrumbLabels, backLabel, editPath, onCurrentPathChange, renderExternalWidget, renderMarkdown, row, uiSize, view, }: {
+    compiled: CompiledJsonViewMetadata;
+    editing?: JsonViewJsonEditing;
+    filePath?: string;
+    copyFileName: string;
+    fillHeight: boolean;
+    editPath?: ValuePath;
+    onBack?: () => void;
+    breadcrumbLabels?: readonly string[];
+    backLabel?: string;
+    onCurrentPathChange?: (path: ValuePath) => void;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    renderMarkdown?: (content: string) => ReactNode;
+    row: JsonViewViewRow;
+    uiSize?: UiSize;
+    view: CompiledJsonViewView;
+}): import("react").JSX.Element;
+export {};

package/dist/json/record-view.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonSourceLiterals } from './source-literals.js';
+import { useEffect, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { AtomicValueEditor } from '../structured-data/atomic-value-editor.js';
+import { isEditableAtomicValue } from '../structured-data/atomic-value.js';
+import { ValueCell, ValueCellContent } from '../tabular-data-view.js';
+import {} from '@script-it/json-views-core';
+import { getValueAtPath, VALUE_PATH_MISSING } from '@script-it/json-views-core';
+import { schemaForJsonViewPath } from '@script-it/json-views-core';
+import { JsonViewSchemaValueCell } from './schema-value.js';
+import { isLongText } from './long-text.js';
+import { GeneralJsonView, NavigationBreadcrumb } from './viewers/general/general-json-view.js';
+import {} from './view-types.js';
+import { nestedRecordView, titleFieldForRow, titleForRow } from './view-model.js';
+import { jsonPathReference, jsonRecordCopyText } from './copy-json.js';
+import { CopyJsonAction } from '../structured-data/copy-json-action.js';
+import { useViewerState } from '../viewer-state.js';
+export function GeneralRecordView({ path, titleKey, name, ...props }) {
+    const target = nestedRecordView(props.compiled.root, path, titleKey, name);
+    if (!target)
+        return null;
+    return _jsx(RecordView, { ...props, row: target.row, view: target.view });
+}
+export function RecordView({ compiled, editing, filePath, copyFileName, fillHeight, onBack, breadcrumbLabels, backLabel, editPath, onCurrentPathChange, renderExternalWidget, renderMarkdown, row, uiSize, view, }) {
+    const sourceLiteral = useJsonSourceLiterals();
+    const { navigation } = useViewerState();
+    const suppressRequiredValidation = editing?.isDraftRow?.(row.sourcePath) === true;
+    const nestedStateKey = `${filePath ?? 'json'}#record:${JSON.stringify(row.sourcePath)}`;
+    const [nestedPath, setNestedPath] = useState(() => {
+        const restored = filePath ? navigation.get(nestedStateKey)?.currentPath : undefined;
+        return restored && restored.length > row.sourcePath.length
+            && row.sourcePath.every((segment, index) => segment === restored[index])
+            && getValueAtPath(compiled.root, restored) !== VALUE_PATH_MISSING ? restored : undefined;
+    });
+    useEffect(() => {
+        if (nestedPath && (getValueAtPath(compiled.root, nestedPath) === VALUE_PATH_MISSING
+            || !row.sourcePath.every((segment, index) => segment === nestedPath[index])))
+            setNestedPath(undefined);
+    }, [compiled.root, nestedPath, row.sourcePath]);
+    useEffect(() => {
+        if (!filePath)
+            return;
+        const currentPath = nestedPath ?? row.sourcePath;
+        if (JSON.stringify(navigation.get(nestedStateKey)?.currentPath) !== JSON.stringify(currentPath)) {
+            navigation.set(nestedStateKey, { stack: [], currentPath });
+        }
+    }, [filePath, navigation, nestedPath, nestedStateKey, row.sourcePath]);
+    useEffect(() => {
+        if (!nestedPath)
+            onCurrentPathChange?.(row.sourcePath);
+    }, [nestedPath, onCurrentPathChange, row.sourcePath]);
+    const titleField = titleFieldForRow(compiled.root, view, row);
+    const rowTitle = titleField ? sourceLiteral(titleField.path) ?? titleForRow(compiled.root, view, row) : '';
+    const titleSchema = titleField ? schemaForJsonViewPath(compiled.schema, titleField.path) : undefined;
+    const titleDescriptor = titleSchema?.descriptor;
+    const titleTopLevelKey = titleField
+        && titleField.path.length === row.sourcePath.length + 1
+        && titleField.path.slice(0, row.sourcePath.length).every((segment, index) => segment === row.sourcePath[index])
+        && typeof titleField.path[titleField.path.length - 1] === 'string'
+        ? titleField.path[titleField.path.length - 1]
+        : undefined;
+    if (nestedPath) {
+        return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx(GeneralJsonView, { breadcrumb: { ancestors: row.sourcePath.map(String), backLabel: 'Back to record', onBack: () => setNestedPath(undefined) }, root: compiled.root, initialPath: nestedPath, defaultKey: String(nestedPath[nestedPath.length - 1] ?? view.name), filePath: `${filePath ?? 'json'}#${view.id}:nested:${JSON.stringify(nestedPath)}`, 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 entries = Object.entries(row.value).filter(([key]) => key !== titleTopLevelKey && key !== '$jsonviews')
+        .sort(([left, leftValue], [right, rightValue]) => Number(isLongText(leftValue, schemaForJsonViewPath(compiled.schema, [...row.sourcePath, left])?.descriptor)) - Number(isLongText(rightValue, schemaForJsonViewPath(compiled.schema, [...row.sourcePath, right])?.descriptor)));
+    return (_jsxs("div", { "data-id": "jsonView-record-view", className: cn('flex min-h-0 flex-1 flex-col', fillHeight && 'overflow-y-auto'), children: [_jsx(NavigationBreadcrumb, { labels: breadcrumbLabels ?? row.sourcePath.map(String), onBack: onBack, backLabel: backLabel }), _jsxs("article", { className: "mx-auto w-full max-w-2xl px-3 pb-6 sm:px-6", children: [titleField && _jsx("div", { "data-id": "jsonView-record-title-label", title: String(titleField.path[titleField.path.length - 1]), className: "mb-1 text-xs text-muted-foreground", children: titleDescriptor?.title ?? titleField.label.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').replace(/^./, (letter) => letter.toUpperCase()) }), _jsxs("div", { className: "-mx-1.5 flex min-w-0 items-start justify-end gap-1.5", children: [titleField && _jsx("div", { "data-id": "jsonView-record-title", role: "heading", "aria-level": 2, className: "min-w-0 max-w-full flex-1 text-xl font-semibold tracking-tight", children: titleField && titleDescriptor ? (_jsx(JsonViewSchemaValueCell, { sourcePath: titleField.path, descriptor: titleDescriptor, suppressRequiredValidation: suppressRequiredValidation, onOptionColorChange: editing?.setOptionColor && titleSchema ? (optionValue, color) => editing.setOptionColor(titleSchema.declaration, optionValue, color) : undefined, inputKey: String(titleField.path[titleField.path.length - 1] ?? 'title'), label: titleDescriptor.title ?? titleField.label, value: titleField.value, onOpen: () => undefined, onClear: editing ? () => editing.clear(titleField.path) : undefined, onCommit: editing && editing.canReplace?.(titleField.path) !== false ? (next) => editing.replace(titleField.path, next) : undefined, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, saving: editing?.saving, variant: "record-title" })) : titleField && editing && editing.canReplace?.(titleField.path) !== false && isEditableAtomicValue(titleField.value) ? (_jsx(AtomicValueEditor, { className: "min-h-10 w-fit max-w-full px-1.5 py-1", editorClassName: "min-h-10 text-xl font-semibold tracking-tight", label: titleField.label, preserveLayout: true, value: titleField.value, saving: editing.saving, onCommit: (next) => editing.replace(titleField.path, next), children: _jsx("span", { className: "break-words", children: rowTitle }) })) : _jsx("span", { className: "block px-1.5 py-1", children: rowTitle }) }), _jsx(CopyJsonAction, { className: "mt-1.5", dataId: "jsonView-copy-record", getPathText: () => jsonPathReference(copyFileName, row.sourcePath), getRecordText: () => jsonRecordCopyText(row.value, row.sourcePath, sourceLiteral), label: "Copy path", pathLabel: "path", recordLabel: "record" })] }), _jsx("dl", { className: cn("grid grid-cols-[minmax(6rem,10rem)_minmax(0,1fr)] gap-x-4 text-xs", titleField && "mt-5"), children: entries.map(([key, value]) => {
+                            const path = [...row.sourcePath, key];
+                            const schema = schemaForJsonViewPath(compiled.schema, path);
+                            const descriptor = schema?.descriptor;
+                            const focusedNested = editPath && editPath.length > path.length && path.every((part, index) => editPath[index] === part)
+                                ? nestedRecordView(compiled.root, path, undefined, key) : undefined;
+                            if (focusedNested)
+                                return _jsxs("div", { className: "col-span-2 min-w-0 py-3", children: [_jsx("dt", { className: "mb-2 text-muted-foreground", children: descriptor?.title ?? key }), _jsx("dd", { children: _jsx(RecordView, { compiled: compiled, row: focusedNested.row, view: focusedNested.view, editPath: editPath, editing: editing, filePath: filePath, copyFileName: copyFileName, fillHeight: false, renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, uiSize: uiSize }) })] }, key);
+                            if (typeof value === 'string' && (!descriptor || ['text', 'markdown', 'html'].includes(descriptor.type))) {
+                                const wide = isLongText(value, descriptor);
+                                return _jsx(RecordTextProperty, { wide: wide, value: value, descriptor: descriptor?.type === 'markdown' || descriptor?.type === 'html' ? descriptor : { ...descriptor, type: 'text', multiline: wide }, path: path, label: descriptor?.title ?? key, editing: editing, initiallyEditing: JSON.stringify(editPath) === JSON.stringify(path), renderMarkdown: renderMarkdown }, key);
+                            }
+                            return (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "min-w-0 break-words py-3 text-muted-foreground", children: descriptor?.title ?? key }), _jsx("dd", { className: "min-w-0 overflow-hidden py-1.5", children: descriptor ? (_jsx(JsonViewSchemaValueCell, { sourcePath: path, descriptor: descriptor, suppressRequiredValidation: suppressRequiredValidation, onOptionColorChange: editing?.setOptionColor && schema ? (optionValue, color) => editing.setOptionColor(schema.declaration, optionValue, color) : undefined, label: descriptor.title ?? key, value: value, inputKey: key, onOpen: () => setNestedPath(path), onClear: editing ? () => editing.clear(path) : undefined, onCommit: editing && editing.canReplace?.(path) !== false ? (next) => editing.replace(path, next) : undefined, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, saving: editing?.saving })) : isEditableAtomicValue(value) && editing && editing.canReplace?.(path) !== false ? (_jsx(AtomicValueEditor, { label: key, value: value, saving: editing.saving, onCommit: (next) => editing.replace(path, next), children: _jsx(ValueCellContent, { sourcePath: path, value: value, onOpen: () => undefined }) })) : (_jsx(ValueCell, { sourcePath: path, value: value, onOpen: () => setNestedPath(path) })) })] }, key));
+                        }) })] })] }));
+}
+function RecordTextProperty({ value, descriptor, path, label, editing, initiallyEditing, renderMarkdown, wide }) {
+    return _jsxs("div", { className: wide ? 'col-span-2 min-w-0 py-3' : 'contents', children: [_jsx("dt", { className: cn('min-w-0 text-muted-foreground', wide ? 'mb-2 flex items-center justify-between gap-2' : 'py-3'), children: _jsx("span", { className: "break-words", children: label }) }), _jsx("dd", { className: cn('min-w-0', !wide && 'py-1.5'), children: _jsx(JsonViewSchemaValueCell, { renderMarkdown: renderMarkdown, descriptor: descriptor, sourcePath: path, value: value, label: label, initiallyEditing: initiallyEditing, onOpen: () => undefined, onCommit: editing && editing.canReplace?.(path) !== false ? next => editing.replace(path, next) : undefined, onClear: editing ? () => editing.clear(path) : undefined, saving: editing?.saving }) })] });
+}

package/dist/json/row-mutations.d.ts

@@ -0,0 +1,7 @@
+import { type ValuePath } from '@script-it/json-views-core';
+import { type CompiledJsonViewMetadata, type CompiledJsonViewView, type JsonViewPath, type JsonViewSchemaDescriptor } from '@script-it/json-views-core';
+export declare function blankValue(descriptor: JsonViewSchemaDescriptor | undefined, sample: unknown): unknown;
+export declare function samePathSegment(left: JsonViewPath['segments'][number], right: JsonViewPath['segments'][number] | undefined): boolean;
+export declare function rowFieldPath(view: CompiledJsonViewView, field: JsonViewPath): string[] | undefined;
+export declare function blankRow(compiled: CompiledJsonViewMetadata, view: CompiledJsonViewView): Record<string, unknown>;
+export declare function removalOrder(paths: ValuePath[]): ValuePath[];

package/dist/json/row-mutations.js

@@ -0,0 +1,93 @@
+import {} from '@script-it/json-views-core';
+import { setJsonValueAtPath, schemaForJsonViewPath } from '@script-it/json-views-core';
+export function blankValue(descriptor, sample) {
+    if (descriptor) {
+        if (descriptor.type === 'checkbox')
+            return false;
+        if (descriptor.type === 'number') {
+            if (typeof descriptor.minimum === 'number')
+                return descriptor.minimum;
+            if (typeof descriptor.maximum === 'number' && descriptor.maximum < 0)
+                return descriptor.maximum;
+            return 0;
+        }
+        if (descriptor.type === 'multi-select')
+            return [];
+        if (descriptor.type === 'select')
+            return descriptor.required ? descriptor.options?.[0] ?? '' : null;
+        if (descriptor.type === 'date')
+            return null;
+        if (['text', 'url', 'email', 'body', 'markdown', 'html'].includes(descriptor.type))
+            return '';
+    }
+    if (Array.isArray(sample))
+        return [];
+    if (sample !== null && typeof sample === 'object')
+        return Object.fromEntries(Object.entries(sample).map(([key, value]) => [key, blankValue(undefined, value)]));
+    if (typeof sample === 'boolean')
+        return false;
+    if (typeof sample === 'number')
+        return 0;
+    if (typeof sample === 'string')
+        return '';
+    return sample ?? null;
+}
+export function samePathSegment(left, right) {
+    if (!right || left.kind !== right.kind)
+        return false;
+    if (left.kind === 'property')
+        return left.key === right.key;
+    if (left.kind === 'index')
+        return left.index === right.index;
+    return true;
+}
+export function rowFieldPath(view, field) {
+    if (!view.path.segments.every((segment, index) => samePathSegment(segment, field.segments[index])))
+        return undefined;
+    if (field.segments[view.path.segments.length]?.kind !== 'wildcard')
+        return undefined;
+    const relative = field.segments.slice(view.path.segments.length + 1);
+    if (relative.length === 0 || relative.some((segment) => segment.kind !== 'property'))
+        return undefined;
+    return relative.map((segment) => segment.kind === 'property' ? segment.key : '');
+}
+export function blankRow(compiled, view) {
+    const collection = view.value;
+    if (!Array.isArray(collection))
+        throw new TypeError('Rows can only be added to JSON arrays');
+    const sampleIndex = collection.findIndex((value) => value !== null && typeof value === 'object' && !Array.isArray(value));
+    if (sampleIndex >= 0) {
+        const sample = collection[sampleIndex];
+        return Object.fromEntries(Object.entries(sample).map(([key, value]) => {
+            const path = [...view.sourcePath, sampleIndex, key];
+            return [key, blankValue(schemaForJsonViewPath(compiled.schema, path)?.descriptor, value)];
+        }));
+    }
+    const result = {};
+    const fields = [
+        ...(view.columns ?? []).map((column) => column.path),
+        ...compiled.schema.map((entry) => entry.path),
+        ...(view.groupBy ? [view.groupBy] : []),
+    ];
+    const seen = new Set();
+    fields.forEach((field) => {
+        const relative = rowFieldPath(view, field);
+        if (!relative || seen.has(JSON.stringify(relative)))
+            return;
+        seen.add(JSON.stringify(relative));
+        const sourcePath = [...view.sourcePath, 0, ...relative];
+        setJsonValueAtPath(result, relative, blankValue(schemaForJsonViewPath(compiled.schema, sourcePath)?.descriptor, undefined));
+    });
+    return result;
+}
+export function removalOrder(paths) {
+    return [...paths].sort((left, right) => {
+        if (left.length !== right.length)
+            return right.length - left.length;
+        const leftLast = left[left.length - 1];
+        const rightLast = right[right.length - 1];
+        if (typeof leftLast === 'number' && typeof rightLast === 'number')
+            return rightLast - leftLast;
+        return 0;
+    });
+}