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

package/dist/json/json-source-editor.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { basicSetup } from 'codemirror';
+import { json } from '@codemirror/lang-json';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState, StateEffect, StateField, Transaction } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { AlignLeft, ArrowLeft, Code2 } from 'lucide-react';
+import { useJsonViewsDevice } from '../browser-device.js';
+import { cn } from '../lib/cn.js';
+import { ConditionalTooltip } from '../primitives/tooltip.js';
+const SOURCE_BUTTON_CLASS = 'grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:scale-[0.97]';
+export function SourceToggle({ active, format, onToggle, disabled = false }) {
+    const action = active ? 'Hide' : 'Show';
+    return (_jsx(ConditionalTooltip, { enabled: disabled, label: `${format} must be valid before switching to views.`, children: _jsx("span", { className: "inline-flex shrink-0", tabIndex: disabled ? 0 : undefined, children: _jsx("button", { type: "button", "data-id": "jsonView-source-toggle", "aria-label": `${action} ${format} source`, title: disabled ? undefined : `${action} ${format} source`, disabled: disabled, "aria-pressed": active, className: cn(SOURCE_BUTTON_CLASS, 'disabled:pointer-events-none disabled:opacity-50', active && 'bg-accent text-foreground'), onClick: onToggle, children: _jsx(Code2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }) }) }));
+}
+export const setSourceTargetRanges = StateEffect.define();
+function sourceTargetSet(ranges, length) {
+    return Decoration.set(ranges.flatMap((range) => range.start >= 0 && range.start < range.end && range.end <= length
+        ? [Decoration.mark({ class: 'cm-source-target', attributes: { 'data-id': 'jsonView-source-target' } }).range(range.start, range.end)]
+        : []), true);
+}
+export const sourceTargetDecorations = StateField.define({
+    create: () => Decoration.none,
+    update: (decorations, transaction) => {
+        let next = decorations.map(transaction.changes);
+        for (const effect of transaction.effects) {
+            if (effect.is(setSourceTargetRanges))
+                next = sourceTargetSet(effect.value, transaction.state.doc.length);
+        }
+        return next;
+    },
+    provide: (field) => EditorView.decorations.from(field),
+});
+const jsonHighlightStyle = HighlightStyle.define([
+    { tag: tags.propertyName, color: 'var(--jv-source-key)' },
+    { tag: tags.string, color: 'var(--jv-source-string)' },
+    { tag: tags.number, color: 'var(--jv-source-number)' },
+    { tag: [tags.bool, tags.null], color: 'var(--jv-source-literal)' },
+    { tag: [tags.brace, tags.squareBracket, tags.separator], color: 'var(--jv-muted-foreground)' },
+]);
+function sourceEditorTheme(fontSize) {
+    return EditorView.theme({
+        '&': {
+            height: '100%',
+            minHeight: '100%',
+            backgroundColor: 'transparent',
+            color: 'var(--jv-foreground)',
+            fontSize: `${fontSize}px`,
+        },
+        '&.cm-focused': { outline: 'none' },
+        '.cm-scroller': {
+            overflow: 'auto',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            lineHeight: `${fontSize * 1.625}px`,
+        },
+        '.cm-content': {
+            minHeight: '100%',
+            padding: '12px 0',
+            caretColor: 'var(--jv-foreground)',
+        },
+        '.cm-cursorLayer .cm-cursor, .cm-dropCursor': {
+            borderLeftColor: 'var(--jv-foreground) !important',
+            borderLeftWidth: '2px !important',
+        },
+        '.cm-line': { padding: '0 12px 0 6px' },
+        '.cm-gutters': {
+            backgroundColor: 'transparent',
+            color: 'var(--jv-muted-foreground)',
+            border: 'none',
+            paddingLeft: '4px',
+        },
+        '.cm-gutterElement': { padding: '0 3px' },
+        '.cm-foldGutter .cm-gutterElement': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 2px',
+        },
+        '.cm-foldGutter .cm-gutterElement > span': {
+            display: 'inline-flex',
+            width: '12px',
+            height: '12px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            lineHeight: '1',
+            transform: 'translateY(-1px)',
+        },
+        '.cm-activeLine, .cm-activeLineGutter': {
+            backgroundColor: 'color-mix(in srgb, var(--jv-accent) 45%, transparent)',
+        },
+        '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
+            backgroundColor: 'color-mix(in srgb, var(--jv-primary) 22%, transparent)',
+        },
+        '.cm-foldPlaceholder': {
+            backgroundColor: 'var(--jv-muted)',
+            color: 'var(--jv-muted-foreground)',
+            border: '1px solid var(--jv-border)',
+        },
+        '.cm-source-target': {
+            backgroundColor: 'color-mix(in srgb, var(--jv-primary) 20%, transparent)',
+            borderRadius: '2px',
+        },
+    });
+}
+function CodeMirrorSource({ content, format, onChange, readOnly, targetRanges, syntaxDisabled, }) {
+    const device = useJsonViewsDevice();
+    const mount = useRef(null);
+    const view = useRef(undefined);
+    const applyingExternalContent = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const languageCompartment = useMemo(() => new Compartment(), []);
+    const readOnlyCompartment = useMemo(() => new Compartment(), []);
+    const themeCompartment = useMemo(() => new Compartment(), []);
+    const targetKey = JSON.stringify(targetRanges);
+    const revealedTarget = useRef(false);
+    onChangeRef.current = onChange;
+    useLayoutEffect(() => {
+        if (!mount.current)
+            return;
+        const extensions = [
+            basicSetup,
+            sourceTargetDecorations,
+            syntaxHighlighting(jsonHighlightStyle),
+            EditorState.tabSize.of(2),
+            EditorView.editorAttributes.of({ 'data-id': 'jsonView-source-editor' }),
+            EditorView.contentAttributes.of({ 'aria-label': `${format} source`, spellcheck: 'false' }),
+            readOnlyCompartment.of([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+            themeCompartment.of(sourceEditorTheme(device === 'mobile' ? 16 : 12)),
+            EditorView.updateListener.of((update) => {
+                if (update.docChanged && !applyingExternalContent.current)
+                    onChangeRef.current(update.state.doc.toString());
+            }),
+        ];
+        extensions.push(languageCompartment.of(format === 'JSON' && !syntaxDisabled ? json() : []));
+        view.current = new EditorView({
+            state: EditorState.create({ doc: content, extensions }),
+            parent: mount.current,
+        });
+        return () => {
+            view.current?.destroy();
+            view.current = undefined;
+        };
+    }, []);
+    useLayoutEffect(() => {
+        view.current?.dispatch({ effects: languageCompartment.reconfigure(format === 'JSON' && !syntaxDisabled ? json() : []) });
+    }, [format, syntaxDisabled, languageCompartment]);
+    useLayoutEffect(() => {
+        const editor = view.current;
+        if (!editor || editor.state.doc.toString() === content)
+            return;
+        applyingExternalContent.current = true;
+        editor.dispatch({
+            changes: { from: 0, to: editor.state.doc.length, insert: content },
+            effects: editor.scrollSnapshot(),
+            annotations: Transaction.addToHistory.of(false),
+        });
+        applyingExternalContent.current = false;
+    }, [content]);
+    useLayoutEffect(() => {
+        view.current?.dispatch({
+            effects: readOnlyCompartment.reconfigure([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+        });
+    }, [readOnly, readOnlyCompartment]);
+    useLayoutEffect(() => {
+        view.current?.dispatch({
+            effects: themeCompartment.reconfigure(sourceEditorTheme(device === 'mobile' ? 16 : 12)),
+        });
+    }, [device, themeCompartment]);
+    useLayoutEffect(() => {
+        const editor = view.current;
+        if (!editor)
+            return;
+        editor.dispatch({ effects: setSourceTargetRanges.of(targetRanges) });
+    }, [targetKey]);
+    useEffect(() => {
+        const editor = view.current;
+        const first = targetRanges[0];
+        if (!editor || !first || revealedTarget.current)
+            return;
+        const timer = setTimeout(() => {
+            if (view.current !== editor || revealedTarget.current)
+                return;
+            revealedTarget.current = true;
+            const lineTop = editor.lineBlockAt(first.start).top;
+            const viewportHeight = editor.scrollDOM.clientHeight;
+            editor.scrollDOM.scrollTop = Math.max(0, lineTop - viewportHeight * 0.35);
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [targetKey]);
+    return _jsx("div", { ref: mount, className: "h-full min-h-full w-full" });
+}
+export function SourceFormatButton({ format, disabled, onFormat }) {
+    return _jsx("button", { type: "button", "data-id": "jsonView-source-format", "aria-label": `Format ${format}`, title: `Format ${format}`, className: cn(SOURCE_BUTTON_CLASS, 'disabled:pointer-events-none disabled:opacity-50'), disabled: disabled, onClick: onFormat, children: _jsx(AlignLeft, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) });
+}
+export function SourceEditor({ embedded = false, content, dirty, fillHeight, format, invalidSourceError, saveStatus, onChange, onClose, onFormat, readOnly, saveError, saving, targetRanges = [], }) {
+    const error = invalidSourceError ?? saveError;
+    const [targetDismissed, setTargetDismissed] = useState(false);
+    const visibleTargetRanges = targetDismissed ? [] : targetRanges;
+    const dismissTarget = useCallback(() => setTargetDismissed(true), []);
+    return (_jsx("div", { "data-id": "jsonView-source-view", className: cn('flex min-h-0 flex-1 flex-col bg-background text-foreground', fillHeight && 'h-full'), onPointerDownCapture: dismissTarget, onClickCapture: dismissTarget, children: _jsxs("div", { className: cn('mx-auto flex min-h-0 w-full flex-1 flex-col', !embedded && 'max-w-6xl px-3 py-4 sm:px-6 sm:py-5', fillHeight && 'h-full'), children: [!embedded && _jsxs("div", { "data-id": "json-viewer-toolbar", className: "relative flex min-h-8 shrink-0 items-center gap-2", children: [!embedded && _jsx(ConditionalTooltip, { enabled: Boolean(invalidSourceError), label: `${format} must be valid before switching to views.`, children: _jsx("span", { className: "mr-auto inline-flex", tabIndex: invalidSourceError ? 0 : undefined, children: _jsxs("button", { type: "button", "data-id": "jsonView-source-views", className: "disabled:pointer-events-none disabled:opacity-50 mr-auto flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", disabled: Boolean(invalidSourceError), onClick: onClose, children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), " Views"] }) }) }), onFormat && _jsx(SourceFormatButton, { format: format, disabled: Boolean(invalidSourceError) || saving, onFormat: onFormat }), !saveStatus && _jsx("span", { className: cn('min-w-12 text-right text-xs text-muted-foreground', error && 'text-destructive'), role: "status", children: invalidSourceError ? `Invalid ${format}` : saveError ? 'Save failed' : saving ? 'Saving…' : readOnly ? 'Read only' : dirty ? 'Unsaved changes' : 'Saved' }), !embedded && _jsx(SourceToggle, { active: true, format: format, onToggle: onClose, disabled: Boolean(invalidSourceError) }), !embedded && saveStatus] }), !saveStatus && error && _jsx("p", { "data-id": "jsonView-source-error", role: error ? 'alert' : undefined, className: cn('flex shrink-0 items-center overflow-hidden text-ellipsis whitespace-nowrap text-xs text-destructive', error ? 'h-6' : 'h-1'), title: error ?? undefined, children: error }), _jsx("div", { className: cn('relative mt-1 w-full flex-1 overflow-hidden rounded-md border border-border bg-background focus-within:ring-1 focus-within:ring-ring', fillHeight ? 'min-h-0' : 'min-h-96'), children: _jsx(CodeMirrorSource, { syntaxDisabled: invalidSourceError?.includes('nesting limit'), content: content, format: format, onChange: (next) => { dismissTarget(); onChange(next); }, readOnly: readOnly, targetRanges: visibleTargetRanges }) })] }) }));
+}

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

@@ -0,0 +1,3 @@
+import { type JsonViewerProps } from './view-types.js';
+export declare function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, uiSize, viewsEnabled, tabularRoot, }: JsonViewerProps): import("react").JSX.Element;
+export type { JsonViewJsonEditing } from './view-types.js';

package/dist/json/json-view.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HtmlView } from './html-view.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Braces, LayoutGrid, Columns3, FileText, Search, Table2 } from 'lucide-react';
+import { useJsonViewsRegistries } from '../widget-registry.js';
+import { cn } from '../lib/cn.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../primitives/tabs.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.js';
+import {} from '@script-it/json-views-core';
+import { compileJsonViewMetadata, schemaForJsonViewPath } from '@script-it/json-views-core';
+import {} from './schema-value.js';
+import { JsonViewAddView, JsonViewViewSettings } from './view-settings.js';
+import { GeneralJsonView } from './viewers/general/general-json-view.js';
+import {} from './view-types.js';
+import { isRecordCollection, presentsRecordCollection, rawViewsFor, rawViewFor, uniqueViewName, uniqueViewId, jsonPathForValuePath, rowForPage } from './view-model.js';
+import { Diagnostics } from './view-diagnostics.js';
+import { GeneralRecordView, RecordView } from './record-view.js';
+import { ProjectedTableView } from './table-view.js';
+import { KanbanView } from './kanban-view.js';
+import { useViewerState } from '../viewer-state.js';
+const VIEW_TAB_CLASS = 'h-7 shrink-0 gap-1.5 rounded-md px-2 py-0 text-xs font-medium text-muted-foreground shadow-none hover:bg-accent hover:text-foreground data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=active]:shadow-none [&>svg]:shrink-0';
+function slashPath(view) {
+    const segments = view.path.segments.map((segment) => {
+        if (segment.kind === 'property')
+            return segment.key;
+        if (segment.kind === 'index')
+            return String(segment.index);
+        return '*';
+    });
+    return `/${segments.join('/')}`;
+}
+function ViewTab({ children, id, path, value }) {
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    return (_jsxs(Tooltip, { open: tooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex shrink-0", onBlur: () => setTooltipOpen(false), onFocus: (event) => {
+                        if (event.target instanceof HTMLElement && event.target.matches(':focus-visible'))
+                            setTooltipOpen(true);
+                    }, children: _jsx(TabsTrigger, { value: value, "data-id": id, className: VIEW_TAB_CLASS, children: children }) }) }), _jsx(TooltipContent, { side: "bottom", className: "max-w-80 break-all font-mono", children: path })] }));
+}
+function isRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function isInferredSingleRecord(view) {
+    return view.declarationIndex < 0 && Array.isArray(view.value)
+        && view.value.length === 1 && isRecord(view.value[0]);
+}
+function metadataWithViews(compiled, views) {
+    const metadata = isRecord(compiled.metadata) ? compiled.metadata : {};
+    return {
+        ...metadata,
+        version: 1,
+        ...(metadata.schema === undefined && compiled.inference && Object.keys(compiled.inference.schema).length > 0
+            ? { schema: compiled.inference.schema }
+            : {}),
+        views,
+    };
+}
+function labelForPath(path, fallback) {
+    const last = path.at(-1);
+    if (last === undefined)
+        return fallback;
+    if (typeof last === 'number')
+        return `Item ${last + 1}`;
+    const words = last.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').trim();
+    return words ? words.charAt(0).toUpperCase() + words.slice(1) : fallback;
+}
+function AdaptiveView({ forceTable = false, compiled, copyFileName, editing, filePath, fillHeight, onSaveView, onCurrentPathChange, query, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }) {
+    const { widgets } = useJsonViewsRegistries();
+    const descriptor = schemaForJsonViewPath(compiled.schema, view.sourcePath)?.descriptor;
+    const registered = descriptor && (widgets.get(descriptor.type) || widgets.getDisplay(descriptor.type) || renderExternalWidget);
+    const singleInferredRecord = isInferredSingleRecord(view) && !forceTable && !registered;
+    if (singleInferredRecord)
+        return _jsx(GeneralRecordView, { path: [...view.sourcePath, 0], compiled: compiled, copyFileName: copyFileName, editing: editing, filePath: filePath, fillHeight: fillHeight, name: view.name, onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize });
+    const projected = presentsRecordCollection(view, forceTable) && !registered;
+    if (projected)
+        return _jsx(ProjectedTableView, { compiled: compiled, copyFileName: copyFileName, editing: editing, filePath: filePath, fillHeight: fillHeight, onCurrentPathChange: onCurrentPathChange, onSaveView: onSaveView, query: query, rawView: rawView, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize, view: view });
+    return (_jsx(GeneralJsonView, { root: compiled.root, initialPath: view.sourcePath, defaultKey: view.name, filePath: `${filePath ?? 'json'}#view:${view.id}`, 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 })) }));
+}
+function PageView({ compiled, copyFileName, editing, filePath, fillHeight, onCurrentPathChange, renderExternalWidget, renderMarkdown, uiSize, view, }) {
+    const row = rowForPage(view);
+    useEffect(() => {
+        onCurrentPathChange?.(view.sourcePath);
+    }, [onCurrentPathChange, view.sourcePath]);
+    if (!row)
+        return null;
+    return _jsx(RecordView, { compiled: compiled, copyFileName: copyFileName, editing: editing, filePath: filePath, fillHeight: fillHeight, onCurrentPathChange: onCurrentPathChange, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, row: row, uiSize: uiSize, view: view });
+}
+function ConfiguredView(props) {
+    if (props.view.display === 'html')
+        return _jsx(HtmlView, { ...props });
+    if (props.view.display === 'kanban')
+        return _jsx(KanbanView, { ...props });
+    if (props.view.declarationIndex >= 0
+        && props.view.value !== null
+        && typeof props.view.value === 'object'
+        && !Array.isArray(props.view.value)
+        && !isRecordCollection(props.view.value)) {
+        return _jsx(PageView, { ...props });
+    }
+    return _jsx(AdaptiveView, { ...props });
+}
+export function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight = false, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, uiSize, viewsEnabled = true, tabularRoot = false, }) {
+    const { types } = useJsonViewsRegistries();
+    const viewerState = useViewerState();
+    const firstViewTab = viewsEnabled && compiled.views[0] ? `view:${compiled.views[0].id}` : 'root';
+    const initialActiveTab = viewerState.activeView ?? firstViewTab;
+    const [activeTab, setActiveTab] = useState(initialActiveTab);
+    const [queries, setQueries] = useState(() => viewerState.queries.toRecord());
+    const [searchOpenTab, setSearchOpenTab] = useState(() => queries[initialActiveTab] ? initialActiveTab : undefined);
+    const [currentPaths, setCurrentPaths] = useState({});
+    const [sourcePaths, setSourcePaths] = useState({});
+    const searchInput = useRef(null);
+    const usableTabs = useMemo(() => new Set(['root', ...(viewsEnabled ? compiled.views.map((view) => `view:${view.id}`) : [])]), [compiled.views, viewsEnabled]);
+    const structuredTab = usableTabs.has(activeTab) ? activeTab : firstViewTab;
+    const selectedTab = sourceVisible && sourceContent ? 'source' : structuredTab;
+    const rootView = useMemo(() => ({
+        id: '__root__',
+        name: defaultKey,
+        path: { source: '$', root: '$', segments: [] },
+        sourcePath: [],
+        value: compiled.root,
+        display: 'adaptive',
+        sort: [],
+        declarationIndex: -1,
+        metadataPath: [],
+    }), [compiled.root, defaultKey]);
+    const declaredView = viewsEnabled ? compiled.views.find((view) => `view:${view.id}` === structuredTab) : undefined;
+    const activeView = declaredView ?? rootView;
+    const rememberCurrentPath = useCallback((path, paths) => {
+        setCurrentPaths((current) => JSON.stringify(current[selectedTab]) === JSON.stringify(path)
+            ? current
+            : { ...current, [selectedTab]: path });
+        setSourcePaths((current) => JSON.stringify(current[selectedTab]) === JSON.stringify(paths)
+            ? current
+            : { ...current, [selectedTab]: paths });
+    }, [selectedTab]);
+    const currentPath = currentPaths[structuredTab] ?? activeView.sourcePath;
+    const currentPathKey = JSON.stringify(currentPath);
+    const sourcePathsKey = JSON.stringify(sourcePaths[selectedTab]);
+    const viewSaveMode = editing?.viewSaveMode ?? 'automatic';
+    const viewDraftKey = JSON.stringify([structuredTab, jsonPathForValuePath(currentPath)]);
+    const activeRawView = declaredView ? rawViewFor(compiled, declaredView) : undefined;
+    const rawViews = rawViewsFor(compiled);
+    const rootDraftRawView = useMemo(() => {
+        const name = uniqueViewName(labelForPath(currentPath, Array.isArray(compiled.root) ? 'Data' : defaultKey), rawViews);
+        return { id: uniqueViewId(name, rawViews), name, path: jsonPathForValuePath(currentPath) };
+    }, [compiled.root, currentPath, defaultKey, rawViews]);
+    const settingsRawView = activeRawView ?? rootDraftRawView;
+    const settingsDeclarationIndex = declaredView?.declarationIndex ?? rawViews.length;
+    const settingsView = useMemo(() => {
+        if (declaredView)
+            return declaredView;
+        const candidate = compileJsonViewMetadata(compiled.root, types, {
+            metadata: metadataWithViews(compiled, [...rawViews, rootDraftRawView]),
+        });
+        return candidate.views.find((view) => view.declarationIndex === rawViews.length);
+    }, [compiled, declaredView, rawViews, rootDraftRawView, types, types.version]);
+    const [previewState, setPreviewState] = useState(() => {
+        const cached = viewerState.viewDrafts.get(viewDraftKey);
+        return { key: viewDraftKey, ...(cached ? { value: cached } : {}) };
+    });
+    const previewRawView = previewState.key === viewDraftKey
+        ? previewState.value
+        : viewerState.viewDrafts.get(viewDraftKey);
+    const previewView = useMemo(() => {
+        if (!previewRawView)
+            return undefined;
+        const views = [...rawViews];
+        if (declaredView)
+            views[declaredView.declarationIndex] = previewRawView;
+        else
+            views.push(previewRawView);
+        const candidate = compileJsonViewMetadata(compiled.root, types, { metadata: metadataWithViews(compiled, views) });
+        return candidate.views.find((view) => view.declarationIndex === settingsDeclarationIndex);
+    }, [compiled, declaredView, previewRawView, rawViews, settingsDeclarationIndex, types, types.version]);
+    const previewSettings = useCallback((next) => {
+        setPreviewState((current) => current.key === viewDraftKey && JSON.stringify(current.value) === JSON.stringify(next)
+            ? current
+            : { key: viewDraftKey, ...(next ? { value: next } : {}) });
+        if (next)
+            viewerState.viewDrafts.set(viewDraftKey, next);
+        else
+            viewerState.viewDrafts.delete(viewDraftKey);
+    }, [viewDraftKey, viewerState]);
+    const renderedView = previewView ?? activeView;
+    const renderedRawView = previewView ? previewRawView : activeRawView;
+    const query = queries[selectedTab] ?? '';
+    const hasTabs = viewsEnabled && compiled.views.length > 0;
+    const addViewUnavailableReason = currentPath[0] === '$jsonviews'
+        ? '$jsonviews stores internal view configuration, so it cannot be saved as another view.'
+        : editing?.canEditViews === false
+            ? editing.viewCreationUnavailableReason ?? 'This document’s view metadata cannot be saved.'
+            : undefined;
+    const canAddViews = viewsEnabled && editing !== undefined && compiled.root !== null
+        && (typeof compiled.root === 'object' || compiled.metadataSource === 'external');
+    const canPersistViews = canAddViews && editing.canEditViews !== false;
+    const settingsUnavailableReason = !declaredView && currentPath[0] === '$jsonviews'
+        ? '$jsonviews stores internal view configuration, so it cannot be configured as a data view.'
+        : settingsView && (declaredView !== undefined || presentsRecordCollection(settingsView))
+            ? undefined
+            : 'This location uses the natural JSON layout, so it has no configurable table view.';
+    const forceTable = tabularRoot && renderedView.sourcePath.length === 0;
+    const searchable = renderedView.display !== 'html' && presentsRecordCollection(renderedView, forceTable);
+    const searchOpen = searchable && (searchOpenTab === selectedTab || query.length > 0);
+    const hasToolbar = hasTabs || searchable || compiled.diagnostics.length > 0
+        || canAddViews || sourceControl !== undefined
+        || (editing !== undefined && settingsRawView !== undefined);
+    useEffect(() => {
+        viewerState.setActiveView(selectedTab);
+    }, [selectedTab, viewerState]);
+    useEffect(() => {
+        if (selectedTab !== 'source')
+            onCurrentPathChange?.(currentPath, sourcePaths[selectedTab]);
+    }, [currentPathKey, sourcePathsKey, selectedTab, onCurrentPathChange]);
+    const persistViews = useCallback(async (views, requiredIndex) => {
+        if (!editing)
+            throw new Error('This JSON is read-only');
+        if (requiredIndex !== undefined) {
+            const candidate = compileJsonViewMetadata(compiled.root, types, { metadata: metadataWithViews(compiled, views) });
+            const valid = candidate.views.some((view) => view.declarationIndex === requiredIndex);
+            const issue = candidate.diagnostics.find((item) => item.scope === 'view' && item.metadataPath[2] === requiredIndex);
+            if (!valid)
+                throw new Error(issue?.message ?? 'The view is not valid for this JSON');
+        }
+        await editing.replaceViews(views);
+    }, [compiled, editing, types, types.version]);
+    const saveActiveView = useCallback(async (next) => {
+        if (!declaredView)
+            throw new Error('Select a saved view first');
+        const nextViews = [...rawViews];
+        nextViews[declaredView.declarationIndex] = next;
+        await persistViews(nextViews, declaredView.declarationIndex);
+    }, [declaredView, persistViews, rawViews]);
+    const saveSettingsView = useCallback(async (next) => {
+        if (declaredView) {
+            await saveActiveView(next);
+        }
+        else {
+            const nextViews = [...rawViews, next];
+            await persistViews(nextViews, nextViews.length - 1);
+            if (typeof next.id === 'string')
+                setActiveTab(`view:${next.id}`);
+        }
+        // An older save must not discard a newer working configuration.
+        if (JSON.stringify(viewerState.viewDrafts.get(viewDraftKey)) === JSON.stringify(next))
+            previewSettings(undefined);
+    }, [declaredView, persistViews, rawViews, saveActiveView, viewerState, viewDraftKey, previewSettings]);
+    const settingsDraftRawView = previewRawView
+        ? previewRawView
+        : settingsRawView;
+    const columnRawView = viewSaveMode === 'explicit'
+        ? settingsDraftRawView
+        : renderedRawView;
+    const saveColumnView = canPersistViews
+        ? viewSaveMode === 'explicit'
+            ? async (next) => { previewSettings(next); }
+            : declaredView && activeRawView
+                ? async (next) => {
+                    previewSettings(next);
+                    try {
+                        await saveSettingsView(next);
+                    }
+                    finally {
+                        // The document owns pending and failed writes once submitted.
+                        if (JSON.stringify(viewerState.viewDrafts.get(viewDraftKey)) === JSON.stringify(next))
+                            previewSettings(undefined);
+                    }
+                }
+                : undefined
+        : undefined;
+    const addView = async (option) => {
+        const name = uniqueViewName(option.name, rawViews);
+        const id = uniqueViewId(name, rawViews);
+        const nextView = { id, name, path: option.path };
+        if (option.display === 'kanban' && option.groupBy) {
+            nextView.display = 'kanban';
+            nextView.groupBy = option.groupBy;
+        }
+        const nextViews = [...rawViews, nextView];
+        await persistViews(nextViews, nextViews.length - 1);
+        setActiveTab(`view:${id}`);
+    };
+    useEffect(() => {
+        if (searchOpen)
+            searchInput.current?.focus();
+    }, [searchOpen]);
+    const setQuery = (value) => {
+        setQueries((current) => ({ ...current, [selectedTab]: value }));
+        viewerState.queries.set(selectedTab, value);
+    };
+    const closeSearch = () => {
+        if (!query)
+            setSearchOpenTab(undefined);
+    };
+    return (_jsx(Tabs, { value: selectedTab, onValueChange: (value) => { if (value !== 'source')
+            setActiveTab(value); onSourceVisibleChange?.(value === 'source'); }, className: cn('flex min-h-0 flex-1 flex-col bg-background text-foreground', fillHeight && 'h-full'), children: _jsxs("div", { "data-id": "json-viewer-content", className: cn('flex min-h-0 w-full max-w-none flex-1 flex-col px-3 py-4 sm:px-6 sm:py-5', fillHeight && 'h-full'), children: [hasToolbar && (_jsxs("div", { "data-id": "json-viewer-toolbar", className: "relative flex min-h-8 shrink-0 flex-nowrap items-center gap-x-2", children: [_jsxs("div", { "data-id": "jsonView-toolbar-actions", className: "ml-auto flex h-8 shrink-0 items-center gap-1", children: [selectedTab !== 'source' && searchable && (searchOpen ? (_jsxs("label", { "data-id": "jsonView-search-control", className: "flex h-7 w-44 items-center overflow-hidden rounded-md border border-transparent bg-transparent transition-[width,background-color] focus-within:border-border focus-within:bg-card sm:w-52", children: [_jsx(Search, { className: "mx-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("input", { ref: searchInput, "aria-label": "Search rows", className: "h-full min-w-0 flex-1 bg-transparent pr-2 text-xs outline-none placeholder:text-muted-foreground", value: query, onBlur: closeSearch, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                                if (event.key === 'Escape') {
+                                                    setQuery('');
+                                                    setSearchOpenTab(undefined);
+                                                }
+                                            }, placeholder: "Type to search\u2026" })] })) : (_jsx("button", { "data-id": "jsonView-search-button", type: "button", "aria-label": "Search rows", title: "Search", className: "grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => setSearchOpenTab(selectedTab), children: _jsx(Search, { className: "h-3.5 w-3.5" }) }))), editing && settingsRawView && (_jsx(JsonViewViewSettings, { hasUnsavedChanges: previewRawView !== undefined, view: previewView ?? settingsView ?? activeView, rawView: activeView.display === 'html' ? activeRawView ?? settingsDraftRawView : settingsDraftRawView, schema: compiled.schema, disabled: editing.saving, saveMode: viewSaveMode, saveUnavailableReason: canPersistViews ? undefined : editing.viewCreationUnavailableReason, unavailableReason: settingsUnavailableReason, onPreview: previewSettings, onSave: saveSettingsView, onDuplicate: declaredView && activeRawView && canPersistViews ? async () => {
+                                        const name = uniqueViewName(`${declaredView.name} copy`, rawViews);
+                                        const id = uniqueViewId(name, rawViews);
+                                        const duplicate = { ...activeRawView, id, name };
+                                        const nextViews = [...rawViews];
+                                        const duplicateIndex = declaredView.declarationIndex + 1;
+                                        nextViews.splice(duplicateIndex, 0, duplicate);
+                                        await persistViews(nextViews, duplicateIndex);
+                                        setActiveTab(`view:${id}`);
+                                    } : undefined, onDelete: declaredView && canPersistViews ? async () => {
+                                        const nextViews = [...rawViews];
+                                        nextViews.splice(declaredView.declarationIndex, 1);
+                                        await persistViews(nextViews);
+                                        setActiveTab('root');
+                                    } : undefined }, typeof settingsDraftRawView.id === 'string' ? settingsDraftRawView.id : '__view_settings__')), sourceControl, _jsx(Diagnostics, { compiled: compiled })] }), (hasTabs || canAddViews || sourceContent) && (_jsxs("div", { "data-id": "jsonView-view-controls", className: "flex min-w-0 flex-1 items-center", children: [canAddViews && _jsx(JsonViewAddView, { align: "start", root: compiled.root, schema: compiled.schema, currentPath: jsonPathForValuePath(currentPath), disabled: editing.saving, onAdd: addView, unavailableReason: addViewUnavailableReason }, "add-view"), (hasTabs || sourceContent) && (_jsxs(TabsList, { "data-id": "jsonView-json-tabs", className: "h-8 min-w-0 flex-initial justify-start gap-0.5 overflow-x-auto overscroll-x-contain rounded-none bg-transparent p-0", children: [compiled.views.map((view) => {
+                                            const Icon = view.display === 'html' ? LayoutGrid : view.display === 'kanban'
+                                                ? Columns3
+                                                : isInferredSingleRecord(view) || (view.value !== null && typeof view.value === 'object' && !Array.isArray(view.value) && !isRecordCollection(view.value))
+                                                    ? FileText
+                                                    : Table2;
+                                            return _jsxs(ViewTab, { id: `jsonView-json-tab-${view.id}`, value: `view:${view.id}`, path: slashPath(view), children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), view.name] }, view.id);
+                                        }), _jsxs(ViewTab, { id: "jsonView-json-tab-root", value: "root", path: isInferredSingleRecord(rootView) && !forceTable ? 'Root record' : 'Root table', children: [isInferredSingleRecord(rootView) && !forceTable ? _jsx(FileText, { className: "h-3.5 w-3.5" }) : _jsx(Table2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: isInferredSingleRecord(rootView) && !forceTable ? 'Record' : 'Table' })] }), sourceContent && _jsxs(ViewTab, { id: "jsonView-json-tab-source", value: "source", path: "Source", children: [_jsx(Braces, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: "Source" })] })] }, "view-tabs"))] }))] })), _jsx(TabsContent, { value: selectedTab, className: cn('mt-2 min-w-0', fillHeight && 'flex min-h-0 flex-1 flex-col'), children: selectedTab === 'source' ? sourceContent : _jsx(ConfiguredView, { forceTable: forceTable, compiled: compiled, copyFileName: defaultKey === 'root' ? 'document.json' : defaultKey, editing: editing, filePath: filePath, fillHeight: fillHeight, onCurrentPathChange: rememberCurrentPath, onSaveView: saveColumnView, query: query, rawView: columnRawView, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize, view: renderedView }, selectedTab) })] }) }));
+}

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../lib/ui-size.js';
+import { type CompiledJsonViewMetadata, type CompiledJsonViewView } from '@script-it/json-views-core';
+import { type JsonViewSchemaExternalWidgetRenderer } from './schema-value.js';
+import { type JsonViewJsonEditing, type JsonViewerProps } from './view-types.js';
+export declare function KanbanView({ compiled, copyFileName, editing, filePath, fillHeight, query, onCurrentPathChange, onSaveView, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }: {
+    compiled: CompiledJsonViewMetadata;
+    copyFileName: string;
+    editing?: JsonViewJsonEditing;
+    filePath?: string;
+    fillHeight: boolean;
+    query: string;
+    onCurrentPathChange?: JsonViewerProps['onCurrentPathChange'];
+    onSaveView?: (value: Record<string, unknown>) => Promise<void>;
+    rawView?: Record<string, unknown>;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    renderMarkdown?: (content: string) => ReactNode;
+    uiSize?: UiSize;
+    view: CompiledJsonViewView;
+}): import("react").JSX.Element;