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

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

@@ -0,0 +1,179 @@
+import { useEffect, useRef } from 'react';
+// Measure the stationary columns once. Hovering never changes their geometry or
+// renders the cards; only the insertion marker moves, at most once per frame.
+export function useKanbanColumnDrag({ enabled, scope, onMove }) {
+    const boardRef = useRef(null);
+    const markerRef = useRef(null);
+    const sessionRef = useRef(undefined);
+    const moveRef = useRef(onMove);
+    moveRef.current = onMove;
+    function clear() {
+        const session = sessionRef.current;
+        sessionRef.current = undefined;
+        boardRef.current?.removeAttribute('data-column-reordering');
+        if (markerRef.current)
+            markerRef.current.hidden = true;
+        if (!session)
+            return;
+        if (session.frame !== undefined)
+            cancelAnimationFrame(session.frame);
+        session.source.removeAttribute('data-column-dragging');
+        session.cleanup();
+    }
+    useEffect(() => clear, [scope, enabled]);
+    function destination(session) {
+        const board = boardRef.current;
+        if (!board)
+            return;
+        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 remaining = session.columns.filter(column => column.key !== session.key);
+        let index = remaining.findIndex(column => x < (column.left + column.right) / 2);
+        if (index < 0)
+            index = remaining.length;
+        // Dropping back in the original slot is a no-op, including either adjacent gap.
+        if (index === session.columns.findIndex(column => column.key === session.key))
+            return;
+        const next = remaining[index];
+        const previous = remaining[index - 1];
+        if (next)
+            return { key: next.key, position: 'before', x: Math.max(2, next.left - 6) };
+        if (previous)
+            return { key: previous.key, position: 'after', x: previous.right + 6 };
+    }
+    function paint(time) {
+        const session = sessionRef.current;
+        const board = boardRef.current;
+        const marker = markerRef.current;
+        if (!session || !board || !marker)
+            return;
+        session.frame = undefined;
+        const bounds = board.getBoundingClientRect();
+        const inside = session.x >= bounds.left && session.x <= bounds.right && session.y >= bounds.top && session.y <= bounds.bottom;
+        const edge = Math.min(64, bounds.width / 4);
+        const speed = !inside ? 0 : session.x < bounds.left + edge
+            ? -Math.min(1, (bounds.left + edge - session.x) / edge)
+            : session.x > bounds.right - edge ? Math.min(1, (session.x - bounds.right + edge) / edge) : 0;
+        const elapsed = Math.min(32, session.previousTime === undefined ? 16 : time - session.previousTime);
+        session.previousTime = time;
+        const beforeScroll = board.scrollLeft;
+        if (speed)
+            board.scrollLeft += speed * elapsed * 0.65;
+        const target = destination(session);
+        marker.hidden = !target;
+        if (target) {
+            marker.style.transform = `translateX(${target.x}px)`;
+            marker.style.top = `${board.scrollTop + 12}px`;
+            marker.style.height = `${Math.max(40, Math.min(board.clientHeight - 24, session.height))}px`;
+            marker.dataset.position = target.position;
+            marker.dataset.target = target.key;
+        }
+        if (speed && beforeScroll !== board.scrollLeft)
+            session.frame = requestAnimationFrame(paint);
+    }
+    function schedule() {
+        const session = sessionRef.current;
+        if (session && session.frame === undefined)
+            session.frame = requestAnimationFrame(paint);
+    }
+    function start(event, key) {
+        if (!enabled || !boardRef.current) {
+            event.preventDefault();
+            return;
+        }
+        clear();
+        const board = boardRef.current;
+        const bounds = board.getBoundingClientRect();
+        const columns = Array.from(board.querySelectorAll('[data-id="jsonView-kanban-column"]')).map(element => {
+            const rect = element.getBoundingClientRect();
+            return { key: element.dataset.groupKey, element, left: rect.left - bounds.left + board.scrollLeft, right: rect.right - bounds.left + board.scrollLeft };
+        });
+        const source = columns.find(column => column.key === key)?.element;
+        if (!source) {
+            event.preventDefault();
+            return;
+        }
+        event.stopPropagation();
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('application/x-jsonView-kanban-group', key);
+        // A compact, opaque header preview follows the cursor instead of a tiny grip
+        // or a ghost containing hundreds of cards.
+        const header = event.currentTarget;
+        const ghost = header.cloneNode(true);
+        ghost.setAttribute('aria-hidden', 'true');
+        ghost.removeAttribute('data-id');
+        ghost.className = 'flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 text-xs font-medium text-foreground shadow-lg';
+        Object.assign(ghost.style, { position: 'fixed', top: '-10000px', left: '0', width: `${source.offsetWidth}px`, height: '40px', pointerEvents: 'none' });
+        board.appendChild(ghost);
+        event.dataTransfer.setDragImage?.(ghost, Math.max(0, Math.min(source.offsetWidth, event.clientX - source.getBoundingClientRect().left)), 20);
+        source.setAttribute('data-column-dragging', 'true');
+        board.setAttribute('data-column-reordering', 'true');
+        const doc = board.ownerDocument;
+        const escape = (event) => { if (event.key === 'Escape')
+            clear(); };
+        const leaveWindow = () => clear();
+        doc.addEventListener('keydown', escape, true);
+        doc.addEventListener('dragend', clear);
+        doc.addEventListener('drop', clear);
+        doc.defaultView?.addEventListener('blur', leaveWindow);
+        board.addEventListener('scroll', schedule, { passive: true });
+        sessionRef.current = {
+            key, source, columns, height: Math.max(...columns.map(column => column.element.offsetHeight)), x: event.clientX, y: event.clientY,
+            cleanup: () => {
+                ghost.remove();
+                doc.removeEventListener('keydown', escape, true);
+                doc.removeEventListener('dragend', clear);
+                doc.removeEventListener('drop', clear);
+                doc.defaultView?.removeEventListener('blur', leaveWindow);
+                board.removeEventListener('scroll', schedule);
+            },
+        };
+    }
+    return {
+        boardRef, markerRef, start,
+        onDragEnterCapture(event) {
+            if (!sessionRef.current)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        // Capture prevents card drop handlers from swallowing a column drop. The
+        // entire board, including gaps and the space below short lanes, is a target.
+        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 target = destination(session);
+            clear();
+            if (target)
+                moveRef.current(session.key, target.key, target.position);
+        },
+        onDragLeave(event) {
+            if (!sessionRef.current || (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;
+            sessionRef.current.x = -Infinity;
+            if (markerRef.current)
+                markerRef.current.hidden = true;
+        },
+    };
+}

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

@@ -0,0 +1,4 @@
+import { type CompiledJsonViewMetadata } from '@script-it/json-views-core';
+export declare function Diagnostics({ compiled }: {
+    compiled: CompiledJsonViewMetadata;
+}): import("react").JSX.Element | null;

package/dist/json/view-diagnostics.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from 'lucide-react';
+import {} from '@script-it/json-views-core';
+import { pathLabel } from './view-model.js';
+function groupKey(item) {
+    return JSON.stringify([item.scope, item.code, item.message, item.severity, item.metadataPath, item.declaration, item.viewId]);
+}
+export function Diagnostics({ compiled }) {
+    if (compiled.diagnostics.length === 0)
+        return null;
+    const groups = Array.from(compiled.diagnostics.reduce((result, item) => {
+        const key = groupKey(item);
+        const existing = result.get(key);
+        if (existing) {
+            existing.items.push(item);
+        }
+        else {
+            result.set(key, { item, items: [item] });
+        }
+        return result;
+    }, new Map()).values());
+    return (_jsxs("details", { "data-id": "jsonView-json-diagnostics", className: "relative shrink-0 text-xs", children: [_jsxs("summary", { "aria-label": `${groups.length} JSON ${groups.length === 1 ? 'issue' : 'issues'}`, title: `${groups.length} JSON ${groups.length === 1 ? 'issue' : 'issues'}`, className: "flex h-7 cursor-pointer list-none items-center gap-1 rounded-md px-1.5 text-warning hover:bg-accent", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] tabular-nums", children: groups.length })] }), _jsxs("div", { className: "absolute right-0 top-8 z-30 max-h-[min(24rem,60vh)] w-[min(28rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-border bg-card p-3 text-foreground shadow-lg", children: [_jsx("div", { className: "font-medium", children: "JSON issues" }), _jsx("ul", { className: "mt-2 grid gap-2", children: groups.map(({ item, items }) => {
+                            const examples = items.flatMap((entry) => entry.sourcePath ? [pathLabel(entry.sourcePath)] : []).slice(0, 2);
+                            return (_jsxs("li", { className: "min-w-0", children: [_jsxs("div", { children: [item.message, items.length > 1 ? ` (${items.length})` : ''] }), _jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground", children: item.declaration ?? pathLabel(item.metadataPath) }), examples.length > 0 && _jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground", children: examples.join(', ') }), item.help && (_jsxs("details", { className: "mt-1 rounded border border-border p-2", children: [_jsx("summary", { "aria-label": `How to fix: ${item.message}`, className: "cursor-pointer font-medium", children: "How to fix" }), _jsxs("div", { className: "mt-2 grid gap-2 break-words", children: [_jsx("div", { children: item.help.fix }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Expected: " }), item.help.expected] }), _jsxs("div", { className: "font-mono text-[10px]", children: [item.metadataSource === 'external' ? 'External annotations: ' : 'Annotation: ', pathLabel(item.metadataPath)] }), item.help.received !== undefined && _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Received: " }), _jsx("code", { children: item.help.received })] }), item.help.allowedValues && _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Supported: " }), item.help.allowedValues.length ? item.help.allowedValues.join(', ') : 'No shared supported values; adjust the field types or remove this configuration.'] }), item.help.examples && _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Examples" }), _jsx("pre", { className: "mt-1 whitespace-pre-wrap rounded bg-muted p-2 text-[10px]", children: item.help.examples.map((example) => JSON.stringify(example, null, 2)).join('\n') })] }), item.help.capabilities && _jsx("ul", { className: "list-disc space-y-1 pl-4", children: item.help.capabilities.map((capability) => _jsx("li", { children: capability }, capability)) }), items.some((entry) => entry.sourcePath) && (_jsxs("div", { children: [_jsxs("div", { className: "font-medium", children: ["Affected data", items.length > 1 ? ` (${items.length})` : ''] }), _jsx("ul", { className: "mt-1 grid max-h-40 gap-1 overflow-y-auto font-mono text-[10px]", children: items.map((entry, index) => entry.sourcePath && _jsxs("li", { children: [pathLabel(entry.sourcePath), entry.scope === 'value' && entry.help?.received !== undefined ? `: ${entry.help.received}` : ''] }, index)) })] })), _jsxs("div", { className: "text-[10px] text-muted-foreground", children: [item.severity ?? 'error', " \u00B7 ", item.code] })] })] }))] }, groupKey(item)));
+                        }) })] })] }));
+}

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

@@ -0,0 +1,27 @@
+import { type ValuePath } from '@script-it/json-views-core';
+import { type CompiledJsonViewMetadata, type CompiledJsonViewView, type JsonViewPath, type JsonViewSchemaDescriptor, type JsonViewViewRow } from '@script-it/json-views-core';
+export declare function isRecordCollection(value: unknown): boolean;
+export declare function presentsRecordCollection(view: CompiledJsonViewView, forceTable?: boolean): boolean;
+export declare function matchesSearch(value: unknown, query: string): boolean;
+export declare function rawViewsFor(compiled: CompiledJsonViewMetadata): unknown[];
+export declare function rawViewFor(compiled: CompiledJsonViewMetadata, view: CompiledJsonViewView): Record<string, unknown> | undefined;
+export declare function uniqueViewName(label: string, views: readonly unknown[]): string;
+export declare function uniqueViewId(name: string, views: readonly unknown[]): string;
+export declare function inferredDescriptor(value: unknown): JsonViewSchemaDescriptor;
+export declare function jsonPathForValuePath(path: ValuePath): string;
+export declare function rowHasLongText(compiled: CompiledJsonViewMetadata, rowPath: ValuePath): boolean;
+export interface RowTitleField {
+    label: string;
+    path: ValuePath;
+    value: unknown;
+}
+export declare function titleFieldForRow(root: unknown, view: CompiledJsonViewView, row: JsonViewViewRow): RowTitleField | undefined;
+export declare function nestedRecordView(root: unknown, rowPath: ValuePath, titleKey: string | undefined, name: string): {
+    row: JsonViewViewRow;
+    view: CompiledJsonViewView;
+} | undefined;
+export declare function titleForRow(root: unknown, view: CompiledJsonViewView, row: JsonViewViewRow): string;
+export declare function rowAtSourcePath(root: unknown, sourcePath: ValuePath | undefined): JsonViewViewRow | undefined;
+export declare function rowForPage(view: CompiledJsonViewView): JsonViewViewRow | undefined;
+export declare function pathLabel(path: ValuePath): string;
+export declare function sameJsonViewPath(left: JsonViewPath, right: JsonViewPath | undefined): boolean;

package/dist/json/view-model.js

@@ -0,0 +1,180 @@
+import { schemaForJsonViewPath, getValueAtPath, isJsonViewTableCandidate, VALUE_PATH_MISSING } from '@script-it/json-views-core';
+import { JSON_VIEW_PATH_MISSING, inferJsonViewRecordTitleKey, parseJsonViewPath, resolveJsonViewRowPath } from '@script-it/json-views-core';
+import { isLongText } from './long-text.js';
+export function isRecordCollection(value) {
+    if (Array.isArray(value))
+        return value.every((item) => item !== null && typeof item === 'object' && !Array.isArray(item));
+    return value !== null
+        && typeof value === 'object'
+        && !Array.isArray(value)
+        && Object.values(value).every((item) => item !== null && typeof item === 'object' && !Array.isArray(item));
+}
+export function presentsRecordCollection(view, forceTable = false) {
+    if (!isRecordCollection(view.value))
+        return false;
+    if (view.display === 'kanban')
+        return true;
+    if (view.declarationIndex < 0 && !forceTable)
+        return Array.isArray(view.value) && isJsonViewTableCandidate(view.value);
+    return view.columns !== undefined
+        || view.filter !== undefined
+        || view.sort.length > 0
+        || (Array.isArray(view.value)
+            ? view.value.length > 0
+            : Object.keys(view.value).length > 0);
+}
+export function matchesSearch(value, query) {
+    const normalized = query.trim().toLocaleLowerCase();
+    if (!normalized)
+        return true;
+    try {
+        return JSON.stringify(value).toLocaleLowerCase().includes(normalized);
+    }
+    catch {
+        return String(value).toLocaleLowerCase().includes(normalized);
+    }
+}
+export function rawViewsFor(compiled) {
+    const metadata = compiled.metadata;
+    if (metadata !== null && typeof metadata === 'object' && !Array.isArray(metadata)) {
+        const views = metadata.views;
+        if (Array.isArray(views))
+            return views;
+    }
+    return compiled.inference?.views ?? [];
+}
+export function rawViewFor(compiled, view) {
+    const raw = rawViewsFor(compiled)[view.declarationIndex];
+    return raw !== null && typeof raw === 'object' && !Array.isArray(raw)
+        ? raw
+        : undefined;
+}
+export function uniqueViewName(label, views) {
+    const used = new Set(views.flatMap((view) => (view !== null && typeof view === 'object' && !Array.isArray(view) && typeof view.name === 'string'
+        ? [String(view.name).toLocaleLowerCase()]
+        : [])));
+    let name = label;
+    let suffix = 2;
+    while (used.has(name.toLocaleLowerCase())) {
+        name = `${label} ${suffix}`;
+        suffix += 1;
+    }
+    return name;
+}
+export function uniqueViewId(name, views) {
+    const used = new Set(views.flatMap((view) => (view !== null && typeof view === 'object' && !Array.isArray(view) && typeof view.id === 'string'
+        ? [String(view.id)]
+        : [])));
+    const base = name.toLocaleLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'view';
+    let id = base;
+    let suffix = 2;
+    while (used.has(id)) {
+        id = `${base}-${suffix}`;
+        suffix += 1;
+    }
+    return id;
+}
+export function inferredDescriptor(value) {
+    if (typeof value === 'boolean')
+        return { type: 'checkbox' };
+    if (typeof value === 'number')
+        return { type: 'number' };
+    return { type: 'text' };
+}
+export function jsonPathForValuePath(path) {
+    return path.reduce((source, segment) => {
+        if (typeof segment === 'number')
+            return `${source}[${segment}]`;
+        if (/^[A-Za-z_$][\w$]*$/.test(segment))
+            return `${source}.${segment}`;
+        const escaped = segment
+            .replace(/\\/g, '\\\\')
+            .replace(/'/g, "\\'")
+            .replace(/\n/g, '\\n')
+            .replace(/\r/g, '\\r')
+            .replace(/\t/g, '\\t');
+        return `${source}['${escaped}']`;
+    }, '$');
+}
+export function rowHasLongText(compiled, rowPath) {
+    const row = getValueAtPath(compiled.root, rowPath);
+    return row !== null && typeof row === 'object' && !Array.isArray(row) && Object.entries(row).some(([key, value]) => isLongText(value, schemaForJsonViewPath(compiled.schema, [...rowPath, key])?.descriptor));
+}
+export function titleFieldForRow(root, view, row) {
+    const first = view.columns?.[0];
+    if (first) {
+        const resolved = resolveJsonViewRowPath(root, row, first.path);
+        return { label: first.label, path: resolved.sourcePath, value: resolved.value === JSON_VIEW_PATH_MISSING ? undefined : resolved.value };
+    }
+    const key = inferJsonViewRecordTitleKey([row.value], false);
+    if (key)
+        return { label: key, path: [...row.sourcePath, key], value: row.value[key] };
+    return undefined;
+}
+export function nestedRecordView(root, rowPath, titleKey, name) {
+    const row = rowAtSourcePath(root, rowPath);
+    if (!row)
+        return undefined;
+    return {
+        row,
+        view: {
+            id: `nested:${JSON.stringify(rowPath)}`,
+            name,
+            path: parseJsonViewPath(jsonPathForValuePath(rowPath)),
+            sourcePath: rowPath,
+            value: row.value,
+            display: 'adaptive',
+            ...(titleKey ? { columns: [{ label: titleKey, path: parseJsonViewPath(jsonPathForValuePath([...rowPath, titleKey])), metadataPath: [] }] } : {}),
+            sort: [],
+            declarationIndex: -1,
+            metadataPath: [],
+        },
+    };
+}
+export function titleForRow(root, view, row) {
+    const field = titleFieldForRow(root, view, row);
+    if (field && field.value != null && String(field.value).trim())
+        return String(field.value);
+    if (field)
+        return 'Untitled';
+    return String(row.key);
+}
+export function rowAtSourcePath(root, sourcePath) {
+    if (!sourcePath)
+        return undefined;
+    const value = getValueAtPath(root, sourcePath);
+    if (value === VALUE_PATH_MISSING || value === null || typeof value !== 'object' || Array.isArray(value))
+        return undefined;
+    const key = sourcePath[sourcePath.length - 1] ?? '$';
+    return { key, value: value, sourcePath };
+}
+export function rowForPage(view) {
+    if (view.value === null || typeof view.value !== 'object' || Array.isArray(view.value))
+        return undefined;
+    return {
+        key: view.sourcePath[view.sourcePath.length - 1] ?? view.name,
+        value: view.value,
+        sourcePath: view.sourcePath,
+    };
+}
+export function pathLabel(path) {
+    return `$${path.map((segment) => (typeof segment === 'number'
+        ? `[${segment}]`
+        : /^[A-Za-z_$][\w$]*$/.test(segment)
+            ? `.${segment}`
+            : `[${JSON.stringify(segment)}]`)).join('')}`;
+}
+export function sameJsonViewPath(left, right) {
+    if (!right || left.root !== right.root || left.segments.length !== right.segments.length)
+        return false;
+    return left.segments.every((segment, index) => {
+        const candidate = right.segments[index];
+        if (segment.kind !== candidate?.kind)
+            return false;
+        if (segment.kind === 'property')
+            return segment.key === candidate.key;
+        if (segment.kind === 'index')
+            return segment.index === candidate.index;
+        return true;
+    });
+}

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

@@ -0,0 +1,12 @@
+/** The viewer owns annotation persistence; the host reports data-save progress. */
+export declare function ViewSaveStatus({ embedded, objectRoot, saving, dirty, error, invalidFormat, invalidSourceError, onSave, conversionConfirmation }: {
+    conversionConfirmation?: 'viewer' | 'host';
+    embedded: boolean;
+    objectRoot: boolean;
+    saving: boolean;
+    dirty: boolean;
+    invalidSourceError?: string;
+    invalidFormat?: string;
+    error?: string;
+    onSave?: () => Promise<void>;
+}): import("react").JSX.Element;

package/dist/json/view-save-status.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AlertCircle, Check, Loader2 } from 'lucide-react';
+import { ConditionalTooltip } from '../primitives/tooltip.js';
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from '../primitives/dialog.js';
+/** The viewer owns annotation persistence; the host reports data-save progress. */
+export function ViewSaveStatus({ embedded, objectRoot, saving, dirty, error, invalidFormat, invalidSourceError, onSave, conversionConfirmation = 'viewer' }) {
+    const [open, setOpen] = useState(false);
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const [failure, setFailure] = useState();
+    const [pending, setPending] = useState(false);
+    const problem = error || failure;
+    const busy = saving || pending;
+    const label = problem ? 'Changes are not saved.' : busy ? 'Saving…'
+        : invalidFormat ? dirty ? `Invalid ${invalidFormat}. Changes are not saved.` : `Data is saved, but this is not valid ${invalidFormat}.`
+            : dirty ? 'Changes are not saved.'
+                : embedded ? 'Data and views are saved.' : 'Data is saved, views are not. Click to save.';
+    const details = [invalidSourceError, problem].filter(Boolean).join("\n\n") || (invalidFormat ? `The source is not valid ${invalidFormat}.` : undefined);
+    const tooltip = details ? `${label} Click for details.` : label;
+    const actionable = !embedded && Boolean(onSave) && !busy && !dirty && !error && !invalidFormat;
+    const save = () => {
+        setOpen(false);
+        setFailure(undefined);
+        setPending(true);
+        void onSave?.().catch((cause) => setFailure(cause instanceof Error ? cause.message : 'Could not save views')).finally(() => setPending(false));
+    };
+    const icon = problem ? _jsx(AlertCircle, { className: "h-3.5 w-3.5" }) : busy ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Check, { className: "h-3.5 w-3.5" });
+    const className = `grid h-7 w-7 shrink-0 place-items-center rounded-md ${invalidFormat || problem ? 'text-red-400' : problem || dirty || !embedded ? 'text-orange-400' : 'text-green-600'}`;
+    return _jsxs(_Fragment, { children: [_jsx(ConditionalTooltip, { enabled: !open && !detailsOpen, label: tooltip, children: details ? _jsx("button", { type: "button", "aria-label": tooltip, className: `${className} hover:bg-accent`, onClick: () => setDetailsOpen(true), children: icon }) : actionable ? _jsx("button", { type: "button", "aria-label": label, className: `${className} hover:bg-accent`, onClick: () => { if (!objectRoot && conversionConfirmation === 'host')
+                        save();
+                    else {
+                        setFailure(undefined);
+                        setOpen(true);
+                    } }, children: icon })
+                    : _jsx("span", { role: "img", tabIndex: 0, "aria-label": label, className: className, children: icon }) }), _jsx(Dialog, { open: detailsOpen, onOpenChange: setDetailsOpen, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsx(DialogTitle, { children: invalidFormat ? `Invalid ${invalidFormat}` : 'Save error' }), _jsx(DialogDescription, { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words", children: details }), _jsx(DialogFooter, { children: _jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-sm", onClick: () => setDetailsOpen(false), children: "Close" }) })] }) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsx(DialogTitle, { children: "Save views to JSON?" }), _jsx(DialogDescription, { children: objectRoot
+                                ? 'Adds a $jsonviews property to this JSON. Future view changes will save there automatically.'
+                                : 'Saving views requires object-root JSON. Your data will move under a data property, alongside $jsonviews. Code that reads this document must use the data property after conversion.' }), _jsxs(DialogFooter, { children: [_jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-sm", onClick: () => setOpen(false), children: "Cancel" }), _jsx("button", { type: "button", className: "rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground", onClick: save, children: objectRoot ? 'Save views' : 'Convert to object-root JSON' })] })] }) })] });
+}

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

@@ -0,0 +1,36 @@
+import { type CompiledJsonViewSchema, type CompiledJsonViewView } from '@script-it/json-views-core';
+export interface JsonViewViewPathOption {
+    label: string;
+    path: string;
+    recordCollection: boolean;
+}
+export interface JsonViewNewViewDraft extends JsonViewViewPathOption {
+    display: 'table' | 'kanban';
+    groupBy?: string;
+    name: string;
+}
+declare function BuiltInViewSettings({ disabled, hasUnsavedChanges, onDelete, onDuplicate, onPreview, onSave, rawView, saveMode, saveUnavailableReason, schema, unavailableReason, view, }: {
+    disabled?: boolean;
+    hasUnsavedChanges?: boolean;
+    onDelete?: () => Promise<void>;
+    onDuplicate?: () => Promise<void>;
+    onPreview?: (value: Record<string, unknown> | undefined) => void;
+    onSave: (value: Record<string, unknown>) => Promise<void>;
+    rawView: Record<string, unknown>;
+    saveMode?: 'automatic' | 'explicit';
+    saveUnavailableReason?: string;
+    schema: readonly CompiledJsonViewSchema[];
+    unavailableReason?: string;
+    view: CompiledJsonViewView;
+}): import("react").JSX.Element;
+export declare function JsonViewAddView({ align, currentPath, disabled, onAdd, root, schema, unavailableReason: unavailableReasonOverride, }: {
+    align?: 'start' | 'end';
+    currentPath?: string;
+    disabled?: boolean;
+    onAdd: (option: JsonViewNewViewDraft) => Promise<void>;
+    root: unknown;
+    schema: readonly CompiledJsonViewSchema[];
+    unavailableReason?: string;
+}): import("react").JSX.Element;
+export declare function JsonViewViewSettings(props: Parameters<typeof BuiltInViewSettings>[0]): import("react").JSX.Element;
+export {};