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

package/dist/json/schema-value.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import type { JsonViewSchemaDescriptor, ValuePath } from '@script-it/json-views-core';
+export interface JsonViewSchemaExternalWidgetProps {
+    type: string;
+    value: unknown;
+    disabled: boolean;
+    descriptor: JsonViewSchemaDescriptor;
+    label: string;
+    onChange: (value: unknown) => void;
+}
+export type JsonViewSchemaExternalWidgetRenderer = (props: JsonViewSchemaExternalWidgetProps) => ReactNode;
+export declare function withColumnOptionColors(descriptor: JsonViewSchemaDescriptor, values: readonly unknown[], offset: number): JsonViewSchemaDescriptor;
+export declare function JsonViewSchemaValueDisplay({ compact, decorative, passive, sourcePath, descriptor, onOpen, renderMarkdown, value, }: {
+    compact?: boolean;
+    /** Suppresses duplicate checkbox semantics inside an interactive control. */
+    decorative?: boolean;
+    /** Removes nested interactions when a parent owns the cell interaction. */
+    passive?: boolean;
+    sourcePath?: ValuePath;
+    descriptor: JsonViewSchemaDescriptor;
+    onOpen: () => void;
+    renderMarkdown?: (content: string) => ReactNode;
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function SchemaEditor({ descriptor, disabled, label, minHeight, onCancel, onClear, onCommit, onOptionColorChange, renderExternalWidget, variant, value, }: {
+    descriptor: JsonViewSchemaDescriptor;
+    disabled: boolean;
+    label: string;
+    minHeight?: number;
+    onCancel: () => void;
+    onClear?: () => Promise<void>;
+    onCommit: (value: unknown) => Promise<void>;
+    onOptionColorChange?: (optionValue: string, color: string) => Promise<void>;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    variant: 'default' | 'record-title';
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function JsonViewSchemaValueCell({ compact, descriptor, initiallyEditing, label, onClear, onCommit, onOptionColorChange, onOpen, renderExternalWidget, renderMarkdown, saving, suppressRequiredValidation, variant, value, sourcePath, }: {
+    compact?: boolean;
+    descriptor: JsonViewSchemaDescriptor;
+    initiallyEditing?: boolean;
+    inputKey?: string;
+    label: string;
+    onClear?: () => Promise<void>;
+    onCommit?: (value: unknown) => Promise<void>;
+    onOptionColorChange?: (optionValue: string, color: string) => Promise<void>;
+    onOpen: () => void;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    renderMarkdown?: (content: string) => ReactNode;
+    saving?: boolean;
+    /** Avoids showing required-field errors while a newly-created record is still untouched. */
+    suppressRequiredValidation?: boolean;
+    /** Matches a record heading's typography and occupied space while editing. */
+    variant?: 'default' | 'record-title';
+    value: unknown;
+    sourcePath?: ValuePath;
+}): import("react").JSX.Element;

package/dist/json/schema-value.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { AlertTriangle, Check, ExternalLink } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { OptionPill, optionColorsForValues } from '../primitives/option-pill.js';
+import { EditValueAction, StructuredValueCellFrame } from '../structured-data/atomic-value-editor.js';
+import { StructuredCellFillContext } from '../structured-data/structured-cell-fill-context.js';
+import { ExpandValueButton, ValueCellContent } from '../tabular-data-view.js';
+import { JsonSourceNumber, useJsonSourceLiterals, useJsonSourceSubtreeRisk } from './source-literals.js';
+import { validateJsonViewSchemaValue } from '@script-it/json-views-core';
+import { useJsonViewsRegistries } from '../widget-registry.js';
+import { useEditBaseChanged } from '../structured-data/edit-base.js';
+import { HtmlPreview } from './html-preview.js';
+export function withColumnOptionColors(descriptor, values, offset) {
+    if (descriptor.type !== 'select' && descriptor.type !== 'multi-select')
+        return descriptor;
+    const choices = [...(descriptor.options ?? []), ...values.flatMap((value) => Array.isArray(value) ? value.map(String) : value == null ? [] : [String(value)])];
+    return { ...descriptor, optionColors: optionColorsForValues(choices, descriptor.optionColors, offset) };
+}
+function safeWebUrl(value) {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function JsonViewSchemaValueDisplay({ compact = false, decorative = false, passive = false, sourcePath, descriptor, onOpen, renderMarkdown, value, }) {
+    const sourceLiteral = useJsonSourceLiterals()(sourcePath);
+    const lossyContainer = useJsonSourceSubtreeRisk(sourcePath) && value !== null && typeof value === 'object';
+    const format = descriptor.type;
+    const choiceColors = optionColorsForValues([...(descriptor.options ?? []), ...(Array.isArray(value) ? value.map(String) : [String(value)])], descriptor.optionColors);
+    const { widgets } = useJsonViewsRegistries();
+    const CustomDisplay = widgets.getDisplay(format);
+    if (sourceLiteral !== undefined)
+        return _jsx(JsonSourceNumber, { literal: sourceLiteral });
+    if (lossyContainer)
+        return _jsx(ValueCellContent, { containerInteractive: !passive, sourcePath: sourcePath, value: value, onOpen: onOpen });
+    if (CustomDisplay && !passive)
+        return _jsx(CustomDisplay, { compact: compact, descriptor: descriptor, onOpen: onOpen, renderMarkdown: renderMarkdown, value: value });
+    if (value === undefined || value === null || value === '')
+        return _jsx("span", { className: "italic text-muted-foreground", children: "\u2014" });
+    if (compact && (format === 'body' || format === 'markdown' || format === 'html'))
+        return _jsx(ValueCellContent, { containerInteractive: !passive, sourcePath: sourcePath, value: value, onOpen: onOpen });
+    if (typeof value === 'string' && format === 'html')
+        return _jsx(HtmlPreview, { source: value, title: descriptor.title ?? 'Property' });
+    if (format === 'select')
+        return _jsx(OptionPill, { label: String(value), color: choiceColors[String(value)], className: "max-w-full", labelClassName: "truncate" });
+    if (format === 'multi-select' && Array.isArray(value)) {
+        return _jsx("span", { className: "flex min-w-0 flex-wrap gap-1", children: value.map((item, index) => _jsx(OptionPill, { label: String(item), color: choiceColors[String(item)], className: "max-w-full", labelClassName: "truncate" }, `${String(item)}-${index}`)) });
+    }
+    if (format === 'checkbox') {
+        return (_jsx("span", { role: decorative ? undefined : "checkbox", "aria-hidden": decorative || undefined, "aria-checked": decorative ? undefined : value === true, "aria-readonly": decorative ? undefined : true, "aria-label": decorative ? undefined : value === true ? 'Checked' : 'Unchecked', className: cn('inline-grid h-4 w-4 place-items-center rounded-sm border', value === true ? 'border-primary bg-primary text-primary-foreground' : 'border-border'), children: value === true && _jsx(Check, { className: "h-3 w-3" }) }));
+    }
+    if (typeof value === 'string' && descriptor.type === 'url') {
+        const href = safeWebUrl(value);
+        if (href && passive)
+            return _jsx("span", { className: "block truncate text-link", children: value });
+        if (href)
+            return _jsxs("a", { href: href, target: "_blank", rel: "noreferrer", className: "inline-flex min-w-0 items-center gap-1 text-link hover:underline", children: [_jsx(ExternalLink, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: value })] });
+    }
+    if (typeof value === 'string' && descriptor.type === 'email') {
+        if (passive)
+            return _jsx("span", { className: "block truncate text-link", children: value });
+        return _jsx("a", { href: `mailto:${value}`, className: "block truncate text-link hover:underline", children: value });
+    }
+    if (typeof value === 'string' && format === 'date') {
+        const timestamp = Date.parse(`${value}T00:00:00`);
+        return Number.isNaN(timestamp) ? _jsx("span", { children: value }) : _jsx("span", { title: value, children: new Date(timestamp).toLocaleDateString(undefined, { dateStyle: 'medium' }) });
+    }
+    if (typeof value === 'string' && ((format === 'body' || format === 'markdown') || (format === 'text' && descriptor.multiline === true))) {
+        return (format === 'body' || format === 'markdown') && renderMarkdown
+            ? _jsx("div", { className: "min-w-0", children: renderMarkdown(value) })
+            : _jsx("div", { "data-id": "jsonView-body-text", className: "min-w-0 whitespace-pre-wrap break-words leading-normal text-foreground", children: value });
+    }
+    return _jsx(ValueCellContent, { containerInteractive: !passive, sourcePath: sourcePath, value: value, onOpen: onOpen });
+}
+function sameValue(left, right) {
+    if (Object.is(left, right))
+        return true;
+    try {
+        return JSON.stringify(left) === JSON.stringify(right);
+    }
+    catch {
+        return false;
+    }
+}
+export function SchemaEditor({ descriptor, disabled, label, minHeight, onCancel, onClear, onCommit, onOptionColorChange, renderExternalWidget, variant, value, }) {
+    const { types, widgets } = useJsonViewsRegistries();
+    const [initial] = useState(() => {
+        try {
+            return { draft: types.parse(value, descriptor), error: undefined };
+        }
+        catch (cause) {
+            return { draft: value, error: cause instanceof Error ? cause.message : 'Could not open this editor' };
+        }
+    });
+    const [draft, setDraft] = useState(initial.draft);
+    const [error, setError] = useState(initial.error);
+    const draftRef = useRef(draft);
+    const containerRef = useRef(null);
+    const committingRef = useRef(false);
+    const originalValueRef = useRef(value);
+    const attemptedCommitRef = useRef(false);
+    const baseChanged = useEditBaseChanged();
+    const fillCell = useContext(StructuredCellFillContext);
+    const format = descriptor.type;
+    const stringDraft = typeof draft === 'string' || typeof draft === 'number' || typeof draft === 'boolean'
+        ? String(draft)
+        : Array.isArray(draft) ? JSON.stringify(draft) : '';
+    const commitValue = useCallback(async (candidate) => {
+        if (committingRef.current)
+            return;
+        if (baseChanged || (!attemptedCommitRef.current && !sameValue(value, originalValueRef.current))) {
+            setError('This document changed outside this editor. Cancel and reopen it before saving.');
+            return;
+        }
+        let next;
+        try {
+            next = sameValue(candidate, initial.draft) ? value : types.serialize(candidate, descriptor);
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'Could not convert this value');
+            return;
+        }
+        if (sameValue(next, value) && !error) {
+            onCancel();
+            return;
+        }
+        const nextError = validateJsonViewSchemaValue(next, descriptor, types);
+        if (nextError) {
+            setError(nextError);
+            return;
+        }
+        committingRef.current = true;
+        attemptedCommitRef.current = true;
+        setError(undefined);
+        try {
+            await onCommit(next);
+            onCancel();
+        }
+        catch (commitError) {
+            setError(commitError instanceof Error ? commitError.message : 'Could not save this value');
+        }
+        finally {
+            committingRef.current = false;
+        }
+    }, [baseChanged, descriptor, error, initial.draft, onCancel, onCommit, types, value]);
+    const updateDraft = useCallback((next) => {
+        draftRef.current = next;
+        setDraft(next);
+    }, []);
+    const commit = useCallback(() => commitValue(draftRef.current), [commitValue]);
+    const clear = useCallback(async () => {
+        if (descriptor.required) {
+            setError('A value is required');
+            return;
+        }
+        if (baseChanged || (!attemptedCommitRef.current && !sameValue(value, originalValueRef.current))) {
+            setError('This document changed outside this editor. Cancel and reopen it before saving.');
+            return;
+        }
+        if (!onClear) {
+            await commitValue(null);
+            return;
+        }
+        if (committingRef.current)
+            return;
+        committingRef.current = true;
+        setError(undefined);
+        try {
+            await onClear();
+            onCancel();
+        }
+        catch (commitError) {
+            setError(commitError instanceof Error ? commitError.message : 'Could not clear this value');
+        }
+        finally {
+            committingRef.current = false;
+        }
+    }, [baseChanged, commitValue, descriptor.required, onCancel, onClear, value]);
+    useEffect(() => {
+        // Autofocus belongs to opening the editor, not to changing callbacks
+        // when another cell saves and the parent rerenders. Popup widgets own
+        // their focus; focusing their trigger would dismiss a non-modal popup.
+        containerRef.current
+            ?.querySelector('input:not([type="hidden"]), textarea, select, button:not([aria-haspopup])')
+            ?.focus({ preventScroll: (format === 'body' || format === 'markdown' || format === 'html') || variant === 'record-title' });
+    }, [format, variant]);
+    useEffect(() => {
+        const cancelOnEscape = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            onCancel();
+        };
+        document.addEventListener('keydown', cancelOnEscape, true);
+        return () => document.removeEventListener('keydown', cancelOnEscape, true);
+    }, [onCancel]);
+    const Widget = widgets.get(format);
+    const control = Widget
+        ? _jsx(Widget, { descriptor: descriptor, disabled: disabled, error: error, label: label, minHeight: minHeight, value: draft, stringValue: stringDraft, onCancel: onCancel, onChange: updateDraft, onClear: onClear ? () => { void clear(); } : undefined, onCommit: (candidate) => { void commitValue(candidate === undefined ? draftRef.current : candidate); }, onOptionColorChange: onOptionColorChange ? (optionValue, color) => { void onOptionColorChange(optionValue, color).catch((cause) => setError(cause instanceof Error ? cause.message : 'Could not save option color')); } : undefined })
+        : renderExternalWidget?.({ type: format, value: draft, disabled, descriptor, label, onChange: updateDraft });
+    const editor = (_jsxs("div", { ref: containerRef, "data-id": "jsonView-schema-editor", className: cn('relative min-w-0', variant === 'record-title'
+            ? 'text-xl font-semibold tracking-tight [&_input]:min-h-10 [&_input]:px-1.5 [&_input]:py-1 [&_input]:font-sans [&_input]:text-xl [&_input]:font-semibold [&_input]:tracking-tight [&_textarea]:min-h-10 [&_textarea]:px-1.5 [&_textarea]:py-1 [&_textarea]:font-sans [&_textarea]:text-xl [&_textarea]:font-semibold [&_textarea]:tracking-tight'
+            : (format === 'body' || format === 'markdown' || format === 'html')
+                ? 'leading-normal [&_textarea]:[font:inherit]'
+                : '[&_input]:[font:inherit] [&_textarea]:[font:inherit]'), "aria-label": `Edit ${label}`, onKeyDown: (event) => {
+            if (event.key !== 'Enter' || event.target instanceof HTMLButtonElement)
+                return;
+            const textarea = event.target instanceof HTMLTextAreaElement;
+            if (textarea && !event.metaKey && !event.ctrlKey)
+                return;
+            event.preventDefault();
+            void commit();
+        }, children: [control, error && _jsx("p", { role: "alert", className: "absolute left-0 top-full z-[110] mt-1 rounded-md border border-destructive-border bg-destructive-surface px-2 py-1 text-[0.6875rem] text-destructive-foreground shadow-lg", children: error })] }));
+    return fillCell ? _jsx("div", { className: "px-1.5 py-1.5", children: editor }) : editor;
+}
+export function JsonViewSchemaValueCell({ compact = false, descriptor, initiallyEditing = false, label, onClear, onCommit, onOptionColorChange, onOpen, renderExternalWidget, renderMarkdown, saving = false, suppressRequiredValidation = false, variant = 'default', value, sourcePath, }) {
+    const [editing, setEditing] = useState(initiallyEditing);
+    const displayRef = useRef(null);
+    const [editorMinHeight, setEditorMinHeight] = useState();
+    const { types, widgets } = useJsonViewsRegistries();
+    const [quickError, setQuickError] = useState();
+    const [quickSaving, setQuickSaving] = useState(false);
+    const fillCell = useContext(StructuredCellFillContext);
+    const validationIssue = validateJsonViewSchemaValue(value, descriptor, types);
+    const invalid = suppressRequiredValidation && validationIssue === 'A value is required' ? undefined : validationIssue;
+    const warning = types.warnings(value, descriptor)[0];
+    const registration = widgets.getDefinition(descriptor.type);
+    const editable = Boolean(onCommit && (registration?.editor || renderExternalWidget));
+    const quickEdit = registration?.quickEdit;
+    const stableText = ((descriptor.type === 'body' || descriptor.type === 'markdown' || descriptor.type === 'html') || (descriptor.type === 'text' && descriptor.multiline === true)) && !compact;
+    const choiceLayout = descriptor.type === 'select' || descriptor.type === 'multi-select';
+    // A wrapped choice preview must not shrink while its popup is open:
+    // dismissing it on pointerdown would move the next row before the click.
+    const stableLayout = stableText || variant === 'record-title' || choiceLayout;
+    const preserveLayoutHeight = () => {
+        if (!stableLayout)
+            return;
+        const height = displayRef.current?.getBoundingClientRect().height ?? 0;
+        if (height > 0)
+            setEditorMinHeight(height);
+    };
+    const stopEditing = () => {
+        // Height is only reserved while editing; the preview must size naturally.
+        setEditorMinHeight(undefined);
+        setEditing(false);
+    };
+    if (quickEdit && onCommit) {
+        const checked = value === true;
+        return (_jsxs("div", { className: cn('h-full min-w-0', invalid && 'ring-1 ring-inset ring-destructive'), title: invalid, children: [_jsx("button", { type: "button", "data-id": "jsonView-checkbox-toggle", role: typeof value === 'boolean' ? 'checkbox' : undefined, "aria-label": typeof value === 'boolean' ? `${checked ? 'Uncheck' : 'Check'} ${label}` : `Edit ${label}`, "aria-checked": typeof value === 'boolean' ? checked : undefined, disabled: saving || quickSaving, className: cn('flex w-full items-center transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:opacity-50 dark:hover:bg-primary/25', fillCell ? 'h-full min-h-11 px-3 py-2' : 'min-h-7 rounded-md px-1.5'), onClick: () => {
+                        void (async () => {
+                            if (quickSaving)
+                                return;
+                            setQuickSaving(true);
+                            setQuickError(undefined);
+                            try {
+                                const next = types.serialize(quickEdit(types.parse(value, descriptor)), descriptor);
+                                const problem = validateJsonViewSchemaValue(next, descriptor, types);
+                                if (problem)
+                                    throw new Error(problem);
+                                await onCommit(next);
+                            }
+                            catch (cause) {
+                                setQuickError(cause instanceof Error ? cause.message : 'Could not save this value');
+                            }
+                            finally {
+                                setQuickSaving(false);
+                            }
+                        })();
+                    }, children: _jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, decorative: true, descriptor: descriptor, value: value, onOpen: onOpen }) }), quickError && _jsx("p", { role: "alert", className: "text-xs text-destructive", children: quickError })] }));
+    }
+    if (editing && editable && onCommit) {
+        const editor = _jsx(SchemaEditor, { descriptor: descriptor, disabled: saving, label: label, minHeight: editorMinHeight, value: value, onCancel: stopEditing, onClear: onClear, onCommit: onCommit, onOptionColorChange: onOptionColorChange, renderExternalWidget: renderExternalWidget, variant: variant }, `${descriptor.type}:${types.version}`);
+        return stableLayout
+            ? _jsx("div", { ref: displayRef, "data-id": "jsonView-schema-value", className: "h-full min-w-0", style: editorMinHeight ? { minHeight: editorMinHeight } : undefined, children: editor })
+            : editor;
+    }
+    const container = value !== null && typeof value === 'object' && descriptor.type !== 'multi-select';
+    const textPreview = compact && (descriptor.type === 'body' || descriptor.type === 'markdown' || descriptor.type === 'html');
+    const linkedValue = typeof value === 'string'
+        && (descriptor.type === 'url' || descriptor.type === 'email');
+    const interactiveText = ((descriptor.type === 'body' || descriptor.type === 'markdown') && renderMarkdown !== undefined || descriptor.type === 'html') && !compact && typeof value === 'string';
+    const explicitEditAction = linkedValue || descriptor.type === 'html';
+    const startEditing = () => {
+        preserveLayoutHeight();
+        setEditing(true);
+    };
+    const actions = (_jsxs(_Fragment, { children: [explicitEditAction && editable && _jsx(EditValueAction, { disabled: saving, label: label, onClick: startEditing }), (container || textPreview) && _jsx(ExpandValueButton, { onClick: onOpen })] }));
+    return (_jsx("div", { ref: displayRef, "data-id": "jsonView-schema-value", className: cn('h-full min-w-0', invalid && 'ring-1 ring-inset ring-destructive', !invalid && warning && 'ring-1 ring-inset ring-amber-500'), style: stableLayout && editorMinHeight ? { minHeight: editorMinHeight } : undefined, title: invalid ?? warning, children: _jsx(StructuredValueCellFrame, { actions: explicitEditAction || container || textPreview ? actions : undefined, overlayActions: descriptor.type === 'html' && !compact, activationDisabled: !editable || saving || explicitEditAction, activationLabel: editable && !explicitEditAction ? `Edit ${label}` : undefined, activationRole: interactiveText ? 'group' : 'button', className: variant === 'record-title' ? 'min-h-10 w-fit max-w-full px-1.5 py-1' : stableText ? 'px-0' : undefined, onActivate: editable && !explicitEditAction ? startEditing : undefined, children: stableText ? (_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) }) }));
+}

package/dist/json/source-default.d.ts

@@ -0,0 +1 @@
+export { prefersSource } from '@script-it/json-views-core';

package/dist/json/source-default.js

@@ -0,0 +1 @@
+export { prefersSource } from '@script-it/json-views-core';

package/dist/json/source-edit-capabilities.d.ts

@@ -0,0 +1,8 @@
+import { inspectJsonSource, type ValuePath } from '@script-it/json-views-core';
+type SourceDiagnostic = ReturnType<typeof inspectJsonSource>['diagnostics'][number];
+export declare function replacementIssue(diagnostics: readonly SourceDiagnostic[], path: ValuePath): SourceDiagnostic | undefined;
+/** Source-preserving mutations must still address an unambiguous JSON location. */
+export declare function assertUnambiguousSourcePath(source: string, paths: readonly ValuePath[]): void;
+/** Replacing a subtree would serialize all its numbers and duplicate properties. */
+export declare function assertSourceReplacementSafe(source: string, paths: readonly ValuePath[]): void;
+export {};

package/dist/json/source-edit-capabilities.js

@@ -0,0 +1,22 @@
+import { inspectJsonSource } from '@script-it/json-views-core';
+function containsPath(parent, child) {
+    return parent.length <= child.length && parent.every((segment, index) => segment === child[index]);
+}
+export function replacementIssue(diagnostics, path) {
+    return diagnostics.find((issue) => containsPath(path, issue.sourcePath)
+        || (issue.code === 'duplicate-key' && containsPath(issue.sourcePath, path)));
+}
+/** Source-preserving mutations must still address an unambiguous JSON location. */
+export function assertUnambiguousSourcePath(source, paths) {
+    const issue = inspectJsonSource(source).diagnostics.find((diagnostic) => diagnostic.code === 'duplicate-key'
+        && paths.some((path) => containsPath(diagnostic.sourcePath, path)));
+    if (issue)
+        throw new Error('This path contains a duplicate property name. Edit the JSON source to disambiguate it first.');
+}
+/** Replacing a subtree would serialize all its numbers and duplicate properties. */
+export function assertSourceReplacementSafe(source, paths) {
+    const diagnostics = inspectJsonSource(source).diagnostics;
+    if (paths.some((path) => replacementIssue(diagnostics, path))) {
+        throw new Error('This value contains a number or duplicate property that cannot be represented losslessly. Edit the JSON source for this value.');
+    }
+}

package/dist/json/source-literals.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { inspectJsonSource, ValuePath } from '@script-it/json-views-core';
+type SourceDiagnostic = ReturnType<typeof inspectJsonSource>['diagnostics'][number];
+type LiteralLookup = (path?: ValuePath | null) => string | undefined;
+/** The original number token stays authoritative when JavaScript cannot represent it. */
+export declare function JsonSourceLiteralsProvider({ diagnostics, children }: {
+    diagnostics: readonly SourceDiagnostic[];
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useJsonSourceLiterals(): LiteralLookup;
+export declare function useJsonSourceSubtreeRisk(path?: ValuePath): boolean;
+export declare function JsonSourceNumber({ literal }: {
+    literal: string;
+}): import("react").JSX.Element;
+export {};

package/dist/json/source-literals.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const SourceLiteralsContext = createContext({ lookup: () => undefined, containsRisk: () => false });
+/** The original number token stays authoritative when JavaScript cannot represent it. */
+export function JsonSourceLiteralsProvider({ diagnostics, children }) {
+    const literalsContext = useMemo(() => {
+        const literals = new Map(diagnostics.filter((issue) => issue.code === 'unsafe-number' && !issue.shadowed)
+            .map((issue) => [JSON.stringify(issue.sourcePath), issue.token]));
+        return {
+            lookup: (path) => path == null ? undefined : literals.get(JSON.stringify(path)),
+            containsRisk: (path) => path !== undefined && diagnostics.some((issue) => path.length <= issue.sourcePath.length && path.every((part, index) => part === issue.sourcePath[index])),
+        };
+    }, [diagnostics]);
+    return _jsx(SourceLiteralsContext.Provider, { value: literalsContext, children: children });
+}
+export function useJsonSourceLiterals() {
+    return useContext(SourceLiteralsContext).lookup;
+}
+export function useJsonSourceSubtreeRisk(path) {
+    return useContext(SourceLiteralsContext).containsRisk(path);
+}
+export function JsonSourceNumber({ literal }) {
+    return _jsx("span", { "data-id": "jsonView-exact-source-number", className: "min-w-0 break-all font-mono text-foreground", title: "Exact numeric literal from JSON source", children: literal });
+}

package/dist/json/source-recovery.d.ts

@@ -0,0 +1,32 @@
+import { Component, type ReactNode } from 'react';
+/** Keeps the original source recoverable when annotations or a plugin fail. */
+export declare function JsonSourceRecovery({ source, error, onCommit }: {
+    source: string;
+    error: string;
+    onCommit?: (source: string) => Promise<void>;
+}): import("react").JSX.Element;
+export declare class JsonRendererBoundary extends Component<{
+    children: ReactNode;
+    source: string;
+    onCommit?: (source: string) => Promise<void>;
+}, {
+    error?: string;
+    source?: string;
+}> {
+    state: {
+        error?: string;
+        source?: string;
+    };
+    static getDerivedStateFromProps(props: {
+        source: string;
+    }, state: {
+        source?: string;
+    }): {
+        source: string;
+        error: undefined;
+    } | null;
+    static getDerivedStateFromError(cause: unknown): {
+        error: string;
+    };
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}

package/dist/json/source-recovery.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useState } from 'react';
+/** Keeps the original source recoverable when annotations or a plugin fail. */
+export function JsonSourceRecovery({ source, error, onCommit }) {
+    const [draft, setDraft] = useState(source);
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState();
+    return _jsxs("section", { className: "grid min-h-0 gap-3 p-4", children: [_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }), _jsxs("label", { className: "grid min-h-0 gap-2 text-sm", children: ["JSON source", _jsx("textarea", { "aria-label": "JSON source", className: "min-h-64 w-full rounded-md border border-border bg-background p-3 font-mono text-xs text-foreground", value: draft, readOnly: !onCommit, onChange: (event) => setDraft(event.target.value) })] }), onCommit && _jsx("button", { type: "button", disabled: saving, className: "w-fit rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-50", onClick: () => {
+                    void (async () => {
+                        setSaving(true);
+                        setSaveError(undefined);
+                        try {
+                            JSON.parse(draft);
+                            await onCommit(draft);
+                        }
+                        catch (cause) {
+                            setSaveError(cause instanceof Error ? cause.message : 'Could not save the source');
+                        }
+                        finally {
+                            setSaving(false);
+                        }
+                    })();
+                }, children: saving ? 'Saving…' : 'Save JSON source' }), saveError && _jsx("p", { role: "alert", className: "text-sm text-destructive", children: saveError })] });
+}
+export class JsonRendererBoundary extends Component {
+    state = { source: this.props.source };
+    static getDerivedStateFromProps(props, state) {
+        return props.source !== state.source ? { source: props.source, error: undefined } : null;
+    }
+    static getDerivedStateFromError(cause) {
+        return { error: cause instanceof Error ? cause.message : 'Could not render this JSON' };
+    }
+    render() {
+        return this.state.error
+            ? _jsx(JsonSourceRecovery, { source: this.props.source, error: `The viewer could not render this document: ${this.state.error}`, onCommit: this.props.onCommit })
+            : this.props.children;
+    }
+}

package/dist/json/source-selection.d.ts

@@ -0,0 +1,3 @@
+import type { ValuePath } from '@script-it/json-views-core';
+/** A whole-data view is context, not a selection. Root metadata does not count as data. */
+export declare function coversAllDocumentData(root: unknown, paths: readonly ValuePath[]): boolean;

package/dist/json/source-selection.js

@@ -0,0 +1,16 @@
+/** A whole-data view is context, not a selection. Root metadata does not count as data. */
+export function coversAllDocumentData(root, paths) {
+    const covered = (value, path) => {
+        if (paths.some((selected) => selected.length <= path.length && selected.every((part, index) => part === path[index])))
+            return true;
+        if (value === null || typeof value !== 'object')
+            return false;
+        const keys = Array.isArray(value)
+            ? value.map((_, index) => index)
+            : Object.keys(value).filter((key) => path.length > 0 || key !== '$jsonviews');
+        if (keys.length === 0)
+            return false;
+        return keys.every((key) => covered(value[key], [...path, key]));
+    };
+    return covered(root, []);
+}

package/dist/json/table-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 ProjectedTableView({ compiled, editing, filePath, copyFileName, fillHeight, onSaveView, onCurrentPathChange, query, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }: {
+    compiled: CompiledJsonViewMetadata;
+    editing?: JsonViewJsonEditing;
+    filePath?: string;
+    copyFileName: string;
+    fillHeight: boolean;
+    onSaveView?: (value: Record<string, unknown>) => Promise<void>;
+    onCurrentPathChange?: JsonViewerProps['onCurrentPathChange'];
+    query: string;
+    rawView?: Record<string, unknown>;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    renderMarkdown?: (content: string) => ReactNode;
+    uiSize?: UiSize;
+    view: CompiledJsonViewView;
+}): import("react").JSX.Element;