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

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

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../lib/ui-size.js';
+import { type ValuePath } from '@script-it/json-views-core';
+import { type CompiledJsonViewMetadata } from '@script-it/json-views-core';
+import { type JsonViewSchemaExternalWidgetRenderer } from './schema-value.js';
+import type { JsonValueReplacement } from '@script-it/json-views-core';
+export interface JsonViewJsonEditing {
+    canEditViews?: boolean;
+    /** Why view creation is visible but unavailable. */
+    viewCreationUnavailableReason?: string;
+    /** Embedded/session metadata saves immediately; structural conversions wait for an explicit save. */
+    viewSaveMode?: 'automatic' | 'explicit';
+    /** Whether a replacement can preserve the source representation at this path. */
+    canReplace?: (path: ValuePath) => boolean;
+    addColumn?: (arrayPath: ValuePath, property: string, schemaPath: string, descriptor: Record<string, unknown>, viewDeclarationIndex: number) => Promise<void>;
+    deleteColumn?: (arrayPath: ValuePath, property: string, schemaPath: string) => Promise<void>;
+    append: (arrayPath: ValuePath, value: unknown) => Promise<void>;
+    /** Marks a newly appended record as an unfinished draft until its first edit. */
+    registerDraftRow?: (path: ValuePath) => void;
+    isDraftRow?: (path: ValuePath) => boolean;
+    clear: (path: ValuePath) => Promise<void>;
+    replace: (path: ValuePath, value: unknown) => Promise<void>;
+    replaceMany: (replacements: readonly JsonValueReplacement[]) => Promise<void>;
+    setOptionColor?: (schemaPath: string, optionValue: string, color: string) => Promise<void>;
+    replaceViews: (views: readonly unknown[]) => Promise<void>;
+    removeMany: (paths: ValuePath[]) => Promise<void>;
+    saving: boolean;
+}
+export interface JsonViewerProps {
+    compiled: CompiledJsonViewMetadata;
+    defaultKey: string;
+    editing?: JsonViewJsonEditing;
+    filePath?: string;
+    fillHeight?: boolean;
+    renderMarkdown?: (content: string) => ReactNode;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    /** Reports the current location and, when narrowed by a filter/search, matching paths in display order. */
+    onCurrentPathChange?: (path: ValuePath, sourcePaths?: readonly ValuePath[]) => void;
+    sourceContent?: ReactNode;
+    sourceVisible?: boolean;
+    onSourceVisibleChange?: (visible: boolean) => void;
+    sourceControl?: ReactNode;
+    uiSize?: UiSize;
+    viewsEnabled?: boolean;
+    /** CSV is already tabular, irrespective of JSON prediction confidence. */
+    tabularRoot?: boolean;
+}

package/dist/json/view-types.js

@@ -0,0 +1,4 @@
+import {} from 'react';
+import {} from '@script-it/json-views-core';
+import {} from '@script-it/json-views-core';
+import {} from './schema-value.js';

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

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../../lib/ui-size.js';
+import { type ValuePath } from '@script-it/json-views-core';
+import type { JsonViewSchemaDescriptor } from '@script-it/json-views-core';
+import type { JsonViewSchemaExternalWidgetRenderer } from '../../schema-value.js';
+export interface GeneralJsonRecordTarget {
+    path: ValuePath;
+    titleKey?: string;
+    onBack?: () => void;
+    breadcrumbLabels?: readonly string[];
+    backLabel?: string;
+}
+interface GeneralJsonViewProps {
+    root: unknown;
+    defaultKey: string;
+    breadcrumb?: {
+        ancestors: readonly string[];
+        backLabel: string;
+        onBack?: () => void;
+    };
+    /** Absolute source path used as this navigator's root. */
+    initialPath?: ValuePath;
+    filePath?: string;
+    editing?: {
+        canReplace?: (path: ValuePath) => boolean;
+        clear: (path: ValuePath) => Promise<void>;
+        replace: (path: ValuePath, value: unknown) => Promise<void>;
+        removeMany: (paths: ValuePath[]) => Promise<void>;
+        saving: boolean;
+    };
+    renderMarkdown?: (content: string) => ReactNode;
+    uiSize?: UiSize;
+    fillHeight?: boolean;
+    schemaForPath?: (path: ValuePath) => JsonViewSchemaDescriptor | undefined;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    onCurrentPathChange?: (path: ValuePath, sourcePaths?: readonly ValuePath[]) => void;
+    renderRecord?: (target: GeneralJsonRecordTarget) => ReactNode;
+}
+export declare function NavigationBreadcrumb({ labels, onBack, backLabel }: {
+    labels: readonly string[];
+    onBack?: () => void;
+    backLabel?: string;
+}): import("react").JSX.Element | null;
+/** Owns navigation and display state for the general JSON renderer. */
+export declare function GeneralJsonView({ breadcrumb, root, defaultKey, initialPath, filePath, editing, renderMarkdown, uiSize, fillHeight, schemaForPath, renderExternalWidget, onCurrentPathChange, renderRecord, }: GeneralJsonViewProps): import("react").JSX.Element;
+export {};

package/dist/json/viewers/general/general-json-view.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { useViewerState } from '../../../viewer-state.js';
+import { getValueAtPath, isJsonViewTableCandidate, valuePathKey, VALUE_PATH_MISSING, } from '@script-it/json-views-core';
+import { useJsonViewsRegistries } from '../../../widget-registry.js';
+import { GeneralJsonNodeView } from './json-node-view.js';
+function BreadcrumbSegment({ label }) {
+    const characters = Array.from(label);
+    const clipped = characters.length > 20;
+    const visible = clipped ? `${characters.slice(0, 10).join('')}…` : label;
+    return _jsx("span", { title: clipped ? label : undefined, "aria-label": clipped ? label : undefined, children: visible });
+}
+export function NavigationBreadcrumb({ labels, onBack, backLabel }) {
+    if (!onBack)
+        return null;
+    return _jsxs("nav", { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-2", children: [_jsx("button", { type: "button", className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", "aria-label": backLabel ?? 'Back', onClick: onBack, title: "Back", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("span", { "data-id": "jsonView-breadcrumb-path", className: "flex min-w-0 items-center whitespace-nowrap text-xs text-muted-foreground", children: labels.map((label, index) => _jsxs("span", { className: "contents", children: [index > 0 && _jsx("span", { "aria-hidden": true, className: "mx-1", children: ' / ' }), _jsx(BreadcrumbSegment, { label: label })] }, `${index}:${label}`)) })] });
+}
+function rootHistory(defaultKey, initialPath) {
+    return [{ key: defaultKey, path: initialPath, kind: 'value' }];
+}
+function restoreHistory(root, defaultKey, initialPath, state, filePath) {
+    const saved = filePath ? state.get(filePath) : undefined;
+    if (!saved)
+        return rootHistory(defaultKey, initialPath);
+    const currentIsInitial = saved.currentPath.length === initialPath.length
+        && initialPath.every((segment, index) => saved.currentPath[index] === segment);
+    const currentKey = currentIsInitial
+        ? defaultKey
+        : saved.currentPath.length > 0
+            ? String(saved.currentPath[saved.currentPath.length - 1])
+            : defaultKey;
+    const history = [
+        ...saved.stack.map(({ key, path, kind = 'value', titleKey }) => ({ key, path, kind, titleKey })),
+        { key: currentKey, path: saved.currentPath, kind: saved.currentKind ?? 'value', titleKey: saved.currentTitleKey },
+    ];
+    const current = history[history.length - 1];
+    const remainsInsideView = current && initialPath.every((segment, index) => current.path[index] === segment);
+    return current && remainsInsideView && getValueAtPath(root, current.path) !== VALUE_PATH_MISSING
+        ? history
+        : rootHistory(defaultKey, initialPath);
+}
+/** Owns navigation and display state for the general JSON renderer. */
+export function GeneralJsonView({ breadcrumb, root, defaultKey, initialPath = [], filePath, editing, renderMarkdown, uiSize, fillHeight = false, schemaForPath, renderExternalWidget, onCurrentPathChange, renderRecord, }) {
+    const { widgets } = useJsonViewsRegistries();
+    const { general, navigation } = useViewerState();
+    const savedGeneralState = filePath ? general.get(filePath) : undefined;
+    const [history, setHistory] = useState(() => restoreHistory(root, defaultKey, initialPath, navigation, filePath));
+    const scrollContainerRef = useRef(null);
+    const scrollSaveTimer = useRef(undefined);
+    const scrollPositionsRef = useRef({ ...savedGeneralState?.scrollPositions });
+    const tableCellPositionsRef = useRef({});
+    const [visibleSourcePaths, setVisibleSourcePaths] = useState({ pathKey: '' });
+    const current = history[history.length - 1] ?? rootHistory(defaultKey, initialPath)[0];
+    const resolvedNode = getValueAtPath(root, current.path);
+    const navigationIsValid = resolvedNode !== VALUE_PATH_MISSING;
+    const effectiveHistory = navigationIsValid ? history : rootHistory(defaultKey, initialPath);
+    const effectiveCurrent = effectiveHistory[effectiveHistory.length - 1];
+    const initialNode = getValueAtPath(root, initialPath);
+    const currentNode = navigationIsValid
+        ? resolvedNode
+        : initialNode === VALUE_PATH_MISSING ? root : initialNode;
+    const currentPathKey = valuePathKey(effectiveCurrent.path);
+    const currentSourcePaths = visibleSourcePaths.pathKey === currentPathKey ? visibleSourcePaths.paths : undefined;
+    const currentSourcePathsKey = JSON.stringify(currentSourcePaths);
+    useEffect(() => {
+        onCurrentPathChange?.(effectiveCurrent.path, currentSourcePaths);
+    }, [currentPathKey, currentSourcePathsKey, onCurrentPathChange]);
+    const reportVisibleSourcePaths = useCallback((paths) => {
+        setVisibleSourcePaths((current) => current.pathKey === currentPathKey && JSON.stringify(current.paths) === JSON.stringify(paths)
+            ? current
+            : { pathKey: currentPathKey, paths });
+    }, [currentPathKey]);
+    useEffect(() => {
+        if (!filePath)
+            return;
+        const next = {
+            stack: effectiveHistory.slice(0, -1),
+            currentPath: effectiveCurrent.path,
+            currentKind: effectiveCurrent.kind,
+            currentTitleKey: effectiveCurrent.titleKey,
+        };
+        if (JSON.stringify(navigation.get(filePath)) !== JSON.stringify(next))
+            navigation.set(filePath, next);
+    }, [effectiveCurrent.path, effectiveHistory, filePath, navigation]);
+    useEffect(() => {
+        const frameId = window.requestAnimationFrame(() => {
+            if (!scrollContainerRef.current)
+                return;
+            scrollContainerRef.current.scrollTop = scrollPositionsRef.current[currentPathKey] ?? 0;
+        });
+        return () => window.cancelAnimationFrame(frameId);
+    }, [currentPathKey]);
+    const flushScrollPosition = useCallback(() => {
+        if (!scrollSaveTimer.current || !filePath)
+            return;
+        clearTimeout(scrollSaveTimer.current);
+        scrollSaveTimer.current = undefined;
+        general.set(filePath, {
+            ...general.get(filePath),
+            scrollPositions: { ...scrollPositionsRef.current },
+        });
+    }, [filePath, general]);
+    const captureScrollPosition = () => {
+        scrollPositionsRef.current[currentPathKey] = scrollContainerRef.current?.scrollTop ?? 0;
+        if (!filePath)
+            return;
+        if (scrollSaveTimer.current)
+            clearTimeout(scrollSaveTimer.current);
+        scrollSaveTimer.current = setTimeout(flushScrollPosition, 120);
+    };
+    useEffect(() => {
+        window.addEventListener('pagehide', flushScrollPosition, true);
+        return () => {
+            window.removeEventListener('pagehide', flushScrollPosition, true);
+            flushScrollPosition();
+        };
+    }, [flushScrollPosition]);
+    const navigateTo = (key, relativePath = [key], record) => {
+        const nextPath = [...effectiveCurrent.path, ...relativePath];
+        if (getValueAtPath(root, nextPath) === VALUE_PATH_MISSING)
+            return;
+        captureScrollPosition();
+        setHistory((currentHistory) => [
+            ...(navigationIsValid ? currentHistory : rootHistory(defaultKey, initialPath)),
+            { key, path: nextPath, kind: record ? 'record' : 'value', titleKey: record?.titleKey },
+        ]);
+    };
+    const goBack = () => {
+        captureScrollPosition();
+        setHistory((currentHistory) => currentHistory.length > 1
+            ? currentHistory.slice(0, -1)
+            : currentHistory);
+    };
+    const atomicEditing = editing
+        ? {
+            canReplace: editing.canReplace,
+            clear: editing.clear,
+            commit: editing.replace,
+            removeMany: editing.removeMany,
+            saving: editing.saving,
+        }
+        : undefined;
+    const individualObject = currentNode !== null && typeof currentNode === 'object' && !Array.isArray(currentNode)
+        && !isJsonViewTableCandidate(currentNode);
+    const currentDescriptor = schemaForPath?.(effectiveCurrent.path);
+    const registeredContainer = currentDescriptor && (widgets.get(currentDescriptor.type) || widgets.getDisplay(currentDescriptor.type) || renderExternalWidget);
+    if (renderRecord && !registeredContainer && (effectiveCurrent.kind === 'record' || individualObject)) {
+        return _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: renderRecord({
+                path: effectiveCurrent.path,
+                titleKey: effectiveCurrent.titleKey,
+                onBack: effectiveHistory.length > 1 ? goBack : breadcrumb?.onBack,
+                breadcrumbLabels: [...(breadcrumb?.ancestors ?? []), ...effectiveHistory.map(({ key }) => key)],
+                backLabel: effectiveHistory.length > 1 ? 'Back' : breadcrumb?.backLabel,
+            }) });
+    }
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx(NavigationBreadcrumb, { labels: [...(breadcrumb?.ancestors ?? []), ...effectiveHistory.map(({ key }) => key)], onBack: effectiveHistory.length > 1 ? goBack : breadcrumb?.onBack, backLabel: effectiveHistory.length > 1 ? 'Back' : breadcrumb?.backLabel }), _jsx("div", { ref: scrollContainerRef, className: fillHeight
+                    ? 'flex min-h-0 flex-1 flex-col overflow-auto overscroll-x-none'
+                    : 'flex-1 overflow-auto overscroll-x-none', onScroll: captureScrollPosition, children: _jsx(GeneralJsonNodeView, { node: currentNode, navigateTo: navigateTo, filePath: filePath, currentPathKey: currentPathKey, currentJsonPath: effectiveCurrent.path, currentLabel: effectiveCurrent.key, renderAsMarkdown: typeof currentNode === 'string'
+                        && schemaForPath?.(effectiveCurrent.path)?.type === 'markdown', getTableCellPosition: (path) => tableCellPositionsRef.current[path], setTableCellPosition: (path, cell) => {
+                        tableCellPositionsRef.current[path] = cell;
+                    }, renderMarkdown: renderMarkdown, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: reportVisibleSourcePaths }) })] }));
+}

package/dist/json/viewers/general/json-flatten.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pure helpers for deciding how the JSON viewer should present a value.
+ *
+ * Kept free of React/DOM so the detection logic is unit-testable on its own.
+ */
+/**
+ * True for `{...}` values. The `[object Object]` tag excludes arrays, null, and
+ * boxed built-ins (Date, Map, RegExp, …) that a bare `typeof` check would admit,
+ * keeping this safe if reused outside `JSON.parse` output.
+ */
+export declare function isPlainObject(value: unknown): value is Record<string, unknown>;
+/**
+ * Describes a `{ key: object, ... }` map that can be flattened into a table:
+ * one row per top-level key, the nested object's fields spread across columns.
+ */
+export interface DictTableInfo {
+    /** Synthetic leading column holding each entry's top-level key. */
+    keyColumn: string;
+    /** All columns in display order: `keyColumn` first, then nested fields. */
+    columns: string[];
+    /** One record per entry, shaped `{ [keyColumn]: key, ...nestedObject }`. */
+    records: Record<string, unknown>[];
+    /** The original top-level keys, parallel to `records`, for path building. */
+    keys: string[];
+}
+/**
+ * Detect a map of similarly-shaped records — `{ key: {…}, key: {…} }` — so it
+ * can be rendered as a flat table instead of a key→"{…}" drill-in list.
+ *
+ * Uses the same conservative eligibility check as inferred tables. The map key
+ * is only a navigation column, not evidence that its values form useful rows.
+ */
+export declare function getDictOfObjectsInfo(obj: Record<string, unknown>): DictTableInfo | null;

package/dist/json/viewers/general/json-flatten.js

@@ -0,0 +1,51 @@
+/**
+ * Pure helpers for deciding how the JSON viewer should present a value.
+ *
+ * Kept free of React/DOM so the detection logic is unit-testable on its own.
+ */
+import { isJsonViewTableCandidate } from '@script-it/json-views-core';
+/**
+ * True for `{...}` values. The `[object Object]` tag excludes arrays, null, and
+ * boxed built-ins (Date, Map, RegExp, …) that a bare `typeof` check would admit,
+ * keeping this safe if reused outside `JSON.parse` output.
+ */
+export function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+/**
+ * Detect a map of similarly-shaped records — `{ key: {…}, key: {…} }` — so it
+ * can be rendered as a flat table instead of a key→"{…}" drill-in list.
+ *
+ * Uses the same conservative eligibility check as inferred tables. The map key
+ * is only a navigation column, not evidence that its values form useful rows.
+ */
+export function getDictOfObjectsInfo(obj) {
+    const entries = Object.entries(obj);
+    if (!isJsonViewTableCandidate(obj))
+        return null;
+    const seenColumns = new Set();
+    const nestedColumns = [];
+    for (const [, value] of entries) {
+        if (!isPlainObject(value))
+            return null;
+        const keys = Object.keys(value);
+        for (const key of keys) {
+            if (!seenColumns.has(key)) {
+                seenColumns.add(key);
+                nestedColumns.push(key);
+            }
+        }
+    }
+    if (nestedColumns.length === 0)
+        return null;
+    // Reserve a column for the map keys that can't clash with a nested field.
+    let keyColumn = 'key';
+    while (seenColumns.has(keyColumn))
+        keyColumn = `_${keyColumn}`;
+    const keys = entries.map(([key]) => key);
+    const records = entries.map(([key, value]) => ({
+        [keyColumn]: key,
+        ...value,
+    }));
+    return { keyColumn, columns: [keyColumn, ...nestedColumns], records, keys };
+}

package/dist/json/viewers/general/json-node-view.d.ts

@@ -0,0 +1,43 @@
+/** Renders one location in a general JSON document. */
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../../lib/ui-size.js';
+import { type ValuePath } from '@script-it/json-views-core';
+import type { JsonViewSchemaDescriptor } from '@script-it/json-views-core';
+import { type JsonViewSchemaExternalWidgetRenderer } from '../../schema-value.js';
+export interface GeneralJsonAtomicEditing {
+    canReplace?: (path: ValuePath) => boolean;
+    clear: (path: ValuePath) => Promise<void>;
+    commit: (path: ValuePath, value: unknown) => Promise<void>;
+    /** Removes several values as one commit (one file write). Positional paths
+     * must arrive deepest-index-first so earlier removals don't shift them. */
+    removeMany: (paths: ValuePath[]) => Promise<void>;
+    saving: boolean;
+}
+export type GeneralJsonNavigateTo = (key: string, relativePath?: ValuePath, record?: {
+    titleKey?: string;
+}) => void;
+export interface GeneralJsonNodeViewProps {
+    node: unknown;
+    navigateTo: GeneralJsonNavigateTo;
+    filePath?: string;
+    currentPathKey: string;
+    currentJsonPath: ValuePath;
+    currentLabel: string;
+    renderAsMarkdown: boolean;
+    getTableCellPosition?: (path: string) => {
+        row: number;
+        col: string;
+    } | undefined;
+    setTableCellPosition?: (path: string, cell: {
+        row: number;
+        col: string;
+    }) => void;
+    renderMarkdown?: (content: string) => ReactNode;
+    uiSize?: UiSize;
+    fillHeight?: boolean;
+    atomicEditing?: GeneralJsonAtomicEditing;
+    schemaForPath?: (path: ValuePath) => JsonViewSchemaDescriptor | undefined;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    onVisibleSourcePathsChange?: (paths?: readonly ValuePath[]) => void;
+}
+export declare function GeneralJsonNodeView(props: GeneralJsonNodeViewProps): import("react").JSX.Element;

package/dist/json/viewers/general/json-node-view.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Renders one location in a general JSON document. */
+import { useCallback, useMemo, useState } from 'react';
+import { JsonSourceNumber, useJsonSourceLiterals } from '../../source-literals.js';
+import { useJsonViewsRegistries } from '../../../widget-registry.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../primitives/tooltip.js';
+import { cn } from '../../../lib/cn.js';
+import { ExpandValueButton, TABULAR_DATA_FRAME_CLASS, TabularObjectArrayView, ValueCell, ValueCellContent, } from '../../../tabular-data-view.js';
+import { getDictOfObjectsInfo, isPlainObject } from './json-flatten.js';
+import { AtomicValueEditor, StructuredValueCellFrame, } from '../../../structured-data/atomic-value-editor.js';
+import { isEditableAtomicValue } from '../../../structured-data/atomic-value.js';
+import { inferJsonViewRecordTitleKey, isJsonViewTableCandidate } from '@script-it/json-views-core';
+import { JsonViewSchemaValueDisplay, JsonViewSchemaValueCell, } from '../../schema-value.js';
+export function GeneralJsonNodeView(props) {
+    return _jsx(AnnotatedJsonNodeView, { ...props }, props.currentPathKey);
+}
+function AnnotatedJsonNodeView({ currentPathKey, ...props }) {
+    const [expanded, setExpanded] = useState(false);
+    const { widgets } = useJsonViewsRegistries();
+    const descriptor = props.schemaForPath?.(props.currentJsonPath);
+    const container = props.node !== null && typeof props.node === 'object';
+    const registered = descriptor && (widgets.get(descriptor.type) || widgets.getDisplay(descriptor.type) || props.renderExternalWidget);
+    if (container && descriptor && registered && !expanded) {
+        const editing = props.atomicEditing?.canReplace?.(props.currentJsonPath) === false ? undefined : props.atomicEditing;
+        return _jsx(JsonViewSchemaValueCell, { sourcePath: props.currentJsonPath, descriptor: descriptor, label: descriptor.title ?? props.currentLabel, value: props.node, onOpen: () => setExpanded(true), onCommit: editing ? (value) => editing.commit(props.currentJsonPath, value) : undefined, onClear: editing ? () => editing.clear(props.currentJsonPath) : undefined, renderExternalWidget: props.renderExternalWidget, renderMarkdown: props.renderMarkdown, saving: editing?.saving });
+    }
+    return _jsxs(_Fragment, { children: [expanded && _jsx("button", { type: "button", className: "mb-2 w-fit rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", onClick: () => setExpanded(false), children: "Back to annotated value" }), _jsx(NodeView, { ...props, currentPath: currentPathKey })] });
+}
+function GeneralJsonValueCell({ atomicEditing, compact = false, label, navigateTo, path, renderMarkdown, renderExternalWidget, schemaForPath, value, }) {
+    if (path && atomicEditing?.canReplace?.(path) === false)
+        atomicEditing = undefined;
+    const descriptor = path ? schemaForPath?.(path) : undefined;
+    if (descriptor && path) {
+        return (_jsx(JsonViewSchemaValueCell, { sourcePath: path, compact: compact, descriptor: descriptor, inputKey: String(path[path.length - 1] ?? label), label: descriptor.title ?? label, onClear: atomicEditing ? () => atomicEditing.clear(path) : undefined, onCommit: atomicEditing ? (nextValue) => atomicEditing.commit(path, nextValue) : undefined, onOpen: navigateTo, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, saving: atomicEditing?.saving, value: value }));
+    }
+    const editable = atomicEditing !== undefined && path !== null && isEditableAtomicValue(value);
+    if (!editable || !atomicEditing || path === null)
+        return _jsx(ValueCell, { sourcePath: path ?? undefined, value: value, onOpen: navigateTo });
+    return (_jsx(AtomicValueEditor, { actions: _jsx(ExpandValueButton, { onClick: navigateTo }), label: label, multiline: typeof value === 'string' && value.includes('\n'), onCommit: (nextValue) => atomicEditing.commit(path, nextValue), saving: atomicEditing.saving, value: value, children: _jsx(ValueCellContent, { sourcePath: path ?? undefined, value: value, onOpen: navigateTo }) }));
+}
+function NodeView({ node, navigateTo, filePath, currentPath, currentJsonPath, currentLabel, renderAsMarkdown, getTableCellPosition, setTableCellPosition, renderMarkdown, uiSize, fillHeight = false, atomicEditing, schemaForPath, renderExternalWidget, onVisibleSourcePathsChange, }) {
+    const sourceLiteral = useJsonSourceLiterals()(currentJsonPath);
+    // A map of similarly-shaped records renders as a flat table (key column +
+    // the nested fields); any other object falls back to the key/value view.
+    const dictTableInfo = useMemo(() => (isPlainObject(node) ? getDictOfObjectsInfo(node) : null), [node]);
+    if (Array.isArray(node)) {
+        return (_jsx(ArrayView, { arr: node, navigateTo: navigateTo, filePath: filePath, currentPath: currentPath, currentJsonPath: currentJsonPath, getTableCellPosition: getTableCellPosition, setTableCellPosition: setTableCellPosition, renderMarkdown: renderMarkdown, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: onVisibleSourcePathsChange }));
+    }
+    if (dictTableInfo) {
+        return (_jsx(DictObjectTableView, { info: dictTableInfo, navigateTo: navigateTo, filePath: filePath, currentPath: currentPath, currentJsonPath: currentJsonPath, getTableCellPosition: getTableCellPosition, setTableCellPosition: setTableCellPosition, renderMarkdown: renderMarkdown, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: onVisibleSourcePathsChange }));
+    }
+    if (isPlainObject(node)) {
+        return _jsx(ObjectView, { obj: node, navigateTo: navigateTo, currentJsonPath: currentJsonPath, atomicEditing: atomicEditing, renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath });
+    }
+    if (atomicEditing?.canReplace?.(currentJsonPath) === false)
+        atomicEditing = undefined;
+    const currentDescriptor = schemaForPath?.(currentJsonPath);
+    if (currentDescriptor) {
+        return (_jsx(JsonViewSchemaValueCell, { sourcePath: currentJsonPath, descriptor: currentDescriptor, label: currentDescriptor.title ?? currentLabel, onClear: atomicEditing ? () => atomicEditing.clear(currentJsonPath) : undefined, onCommit: atomicEditing ? (nextValue) => atomicEditing.commit(currentJsonPath, nextValue) : undefined, onOpen: () => undefined, inputKey: String(currentJsonPath[currentJsonPath.length - 1] ?? currentLabel), renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, saving: atomicEditing?.saving, value: node }));
+    }
+    if (typeof node === 'string') {
+        const content = (_jsx(ExpandedStringValue, { value: node, renderAsMarkdown: renderAsMarkdown, renderMarkdown: renderMarkdown }));
+        return atomicEditing ? (_jsx(AtomicValueEditor, { label: currentLabel, multiline: node.includes('\n'), onCommit: (nextValue) => atomicEditing.commit(currentJsonPath, nextValue), saving: atomicEditing.saving, value: node, children: content })) : content;
+    }
+    const content = (_jsx("div", { className: "whitespace-pre-wrap text-sm text-foreground", style: { overflowWrap: 'anywhere' }, children: sourceLiteral !== undefined ? _jsx(JsonSourceNumber, { literal: sourceLiteral }) : String(node) }));
+    return atomicEditing && isEditableAtomicValue(node) ? (_jsx(AtomicValueEditor, { label: currentLabel, onCommit: (nextValue) => atomicEditing.commit(currentJsonPath, nextValue), saving: atomicEditing.saving, value: node, children: content })) : content;
+}
+function ExpandedStringValue({ value, renderAsMarkdown, renderMarkdown, }) {
+    return renderAsMarkdown && renderMarkdown ? (renderMarkdown(value)) : (_jsx("div", { className: "whitespace-pre-wrap text-sm text-foreground", style: { overflowWrap: 'anywhere' }, children: value }));
+}
+function getTabularInfo(arr) {
+    if (arr.length === 0)
+        return null;
+    const first = arr[0];
+    // Check if all items are arrays (tuples) with consistent length
+    if (Array.isArray(first)) {
+        const tupleLength = first.length;
+        if (tupleLength === 0)
+            return null;
+        // Verify all items are arrays with the same length and contain primitives
+        for (const item of arr) {
+            if (!Array.isArray(item))
+                return null;
+            if (item.length !== tupleLength)
+                return null;
+            // Check that tuple contains only primitives (not nested objects/arrays)
+            for (const val of item) {
+                if (val !== null && typeof val === 'object')
+                    return null;
+            }
+        }
+        return { type: 'tuples', length: tupleLength };
+    }
+    if (!isJsonViewTableCandidate(arr))
+        return null;
+    // Collect all unique keys, preserving order of first appearance
+    const seenKeys = new Set();
+    const columns = [];
+    for (const item of arr) {
+        for (const key of Object.keys(item)) {
+            if (!seenKeys.has(key)) {
+                seenKeys.add(key);
+                columns.push(key);
+            }
+        }
+    }
+    // Only show as table if we have at least one column
+    return columns.length > 0 ? { type: 'objects', columns } : null;
+}
+function ArrayView({ arr, navigateTo, filePath, currentPath, currentJsonPath, getTableCellPosition, setTableCellPosition, uiSize, fillHeight = false, atomicEditing, schemaForPath, renderMarkdown, renderExternalWidget, onVisibleSourcePathsChange, }) {
+    const sourceLiteral = useJsonSourceLiterals();
+    const getCellSourcePath = useCallback((rowIndex, column) => [...currentJsonPath, rowIndex, column], [currentJsonPath]);
+    if (arr.length === 0)
+        return _jsx("div", { className: "text-muted-foreground italic", children: "(empty list)" });
+    const tabularInfo = getTabularInfo(arr);
+    if (tabularInfo?.type === 'objects') {
+        const records = arr;
+        const titleKey = inferJsonViewRecordTitleKey(records) ?? tabularInfo.columns[0];
+        return (_jsx(TabularObjectArrayView, { arr: records, getCellSourcePath: getCellSourcePath, columns: [titleKey, ...tabularInfo.columns.filter((column) => column !== titleKey)], filePath: filePath, viewStateKey: currentPath, onOpenCell: ({ rowIndex, column }) => {
+                setTableCellPosition?.(currentPath, { row: rowIndex, col: column });
+                navigateTo(`${rowIndex}.${column}`, [rowIndex, column]);
+            }, initialCell: getTableCellPosition?.(currentPath), uiSize: uiSize, fillHeight: fillHeight, onVisibleRowsChange: (indices, filtered) => onVisibleSourcePathsChange?.(filtered
+                ? indices.map((index) => [...currentJsonPath, index])
+                : undefined), recordNavigation: {
+                titleColumn: titleKey,
+                getLabel: (rowIndex) => sourceLiteral([...currentJsonPath, rowIndex, titleKey])
+                    ?? String(records[rowIndex][titleKey] ?? `Item ${rowIndex + 1}`),
+                onOpen: (rowIndex) => navigateTo(String(rowIndex), [rowIndex], { titleKey }),
+                renderTitle: ({ value, rowIndex }) => {
+                    const path = [...currentJsonPath, rowIndex, titleKey];
+                    const descriptor = schemaForPath?.(path);
+                    return descriptor
+                        ? _jsx(JsonViewSchemaValueDisplay, { compact: true, decorative: true, passive: true, descriptor: descriptor, onOpen: () => undefined, renderMarkdown: renderMarkdown, sourcePath: path, value: value })
+                        : value === undefined
+                            ? _jsx("span", { className: "italic text-muted-foreground", children: "Untitled" })
+                            : _jsx(ValueCellContent, { containerInteractive: false, sourcePath: path, value: value, onOpen: () => undefined });
+                },
+            }, renderCell: ({ value, rowIndex, column, open }) => (_jsx(GeneralJsonValueCell, { atomicEditing: atomicEditing, compact: true, label: column, navigateTo: open, path: [...currentJsonPath, rowIndex, column], renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath, value: value })), onDeleteRows: atomicEditing
+                ? (rowIndices) => atomicEditing.removeMany(rowIndices.map((rowIndex) => [...currentJsonPath, rowIndex]))
+                : undefined, rowDeletionDisabled: atomicEditing?.saving }));
+    }
+    if (tabularInfo?.type === 'tuples') {
+        return (_jsx(TupleArrayView, { arr: arr, tupleLength: tabularInfo.length, navigateTo: navigateTo, filePath: filePath, arrayPath: currentPath, currentJsonPath: currentJsonPath, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: onVisibleSourcePathsChange }));
+    }
+    return (_jsx(SingleColumnArrayView, { arr: arr, navigateTo: navigateTo, filePath: filePath, arrayPath: currentPath, currentJsonPath: currentJsonPath, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: onVisibleSourcePathsChange }));
+}
+function TupleArrayView({ arr, tupleLength, navigateTo, filePath, arrayPath, currentJsonPath, uiSize, fillHeight = false, atomicEditing, schemaForPath, renderMarkdown, renderExternalWidget, onVisibleSourcePathsChange, }) {
+    const getCellSourcePath = useCallback((rowIndex, column) => [...currentJsonPath, rowIndex, Number(column)], [currentJsonPath]);
+    const columns = useMemo(() => Array.from({ length: tupleLength }, (_, i) => String(i)), [tupleLength]);
+    const records = useMemo(() => arr.map((tuple) => tuple.reduce((record, value, index) => {
+        record[String(index)] = value;
+        return record;
+    }, {})), [arr]);
+    return (_jsx(TabularObjectArrayView, { arr: records, getCellSourcePath: getCellSourcePath, columns: columns, filePath: filePath, viewStateKey: arrayPath, onOpenCell: ({ rowIndex, column }) => {
+            navigateTo(`${rowIndex}.${column}`, [rowIndex, Number(column)]);
+        }, uiSize: uiSize, fillHeight: fillHeight, onVisibleRowsChange: (indices, filtered) => onVisibleSourcePathsChange?.(filtered
+            ? indices.map((index) => [...currentJsonPath, index])
+            : undefined), renderCell: ({ value, rowIndex, column, open }) => (_jsx(GeneralJsonValueCell, { atomicEditing: atomicEditing, compact: true, label: column, navigateTo: open, path: [...currentJsonPath, rowIndex, Number(column)], renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath, value: value })), onDeleteRows: atomicEditing
+            ? (rowIndices) => atomicEditing.removeMany(rowIndices.map((rowIndex) => [...currentJsonPath, rowIndex]))
+            : undefined, rowDeletionDisabled: atomicEditing?.saving }));
+}
+function SingleColumnArrayView({ arr, navigateTo, filePath, arrayPath, currentJsonPath, uiSize, fillHeight = false, atomicEditing, schemaForPath, renderMarkdown, renderExternalWidget, onVisibleSourcePathsChange, }) {
+    const getCellSourcePath = useCallback((rowIndex) => [...currentJsonPath, rowIndex], [currentJsonPath]);
+    const records = useMemo(() => arr.map((item) => ({ Value: item })), [arr]);
+    return (_jsx(TabularObjectArrayView, { arr: records, getCellSourcePath: getCellSourcePath, columns: ['Value'], filePath: filePath, viewStateKey: arrayPath, onOpenCell: ({ rowIndex }) => navigateTo(String(rowIndex), [rowIndex]), uiSize: uiSize, fillHeight: fillHeight, onVisibleRowsChange: (indices, filtered) => onVisibleSourcePathsChange?.(filtered
+            ? indices.map((index) => [...currentJsonPath, index])
+            : undefined), renderCell: ({ value, rowIndex, open }) => (_jsx(GeneralJsonValueCell, { atomicEditing: atomicEditing, compact: true, label: "Value", navigateTo: open, path: [...currentJsonPath, rowIndex], renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath, value: value })), onDeleteRows: atomicEditing
+            ? (rowIndices) => atomicEditing.removeMany(rowIndices.map((rowIndex) => [...currentJsonPath, rowIndex]))
+            : undefined, rowDeletionDisabled: atomicEditing?.saving }));
+}
+function DictObjectTableView({ info, navigateTo, filePath, currentPath, currentJsonPath, getTableCellPosition, setTableCellPosition, uiSize, fillHeight = false, atomicEditing, schemaForPath, renderMarkdown, renderExternalWidget, onVisibleSourcePathsChange, }) {
+    const getCellSourcePath = useCallback((rowIndex, column) => column === info.keyColumn ? undefined : [...currentJsonPath, info.keys[rowIndex], column], [currentJsonPath, info]);
+    // Rows are keyed by their original map key (not row index). The key column
+    // drills into the whole record (`obj[key]`); every other column drills into
+    // `obj[key].<field>`. Keying both the node and the path off the map key means
+    // a click and a later replay land on the same node.
+    // The key column shows the map key as text but has no field of its own, so a
+    // click drills into the record object rather than the (dead-end) key string.
+    return (_jsx(TabularObjectArrayView, { arr: info.records, getCellSourcePath: getCellSourcePath, columns: info.columns, filePath: filePath, viewStateKey: currentPath, onOpenCell: ({ rowIndex, column }) => {
+            const key = info.keys[rowIndex];
+            const navigationKey = column === info.keyColumn ? key : `${key}.${column}`;
+            const relativePath = column === info.keyColumn ? [key] : [key, column];
+            setTableCellPosition?.(currentPath, { row: rowIndex, col: column });
+            navigateTo(navigationKey, relativePath);
+        }, initialCell: getTableCellPosition?.(currentPath), uiSize: uiSize, fillHeight: fillHeight, onVisibleRowsChange: (indices, filtered) => onVisibleSourcePathsChange?.(filtered
+            ? indices.map((index) => [...currentJsonPath, info.keys[index]])
+            : undefined), recordNavigation: {
+            titleColumn: info.keyColumn,
+            getLabel: (rowIndex) => info.keys[rowIndex],
+            onOpen: (rowIndex) => navigateTo(info.keys[rowIndex], [info.keys[rowIndex]], {}),
+            renderTitle: ({ value }) => _jsx("span", { className: "min-w-0 truncate", children: String(value) }),
+        }, renderCell: ({ value, rowIndex, column, open }) => (_jsx(GeneralJsonValueCell, { atomicEditing: atomicEditing, compact: true, label: column, navigateTo: open, path: column === info.keyColumn ? null : [...currentJsonPath, info.keys[rowIndex], column], renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath, value: value })), onDeleteRows: atomicEditing
+            ? (rowIndices) => atomicEditing.removeMany(rowIndices.map((rowIndex) => [...currentJsonPath, info.keys[rowIndex]]))
+            : undefined, rowDeletionDisabled: atomicEditing?.saving }));
+}
+function ObjectView({ obj, navigateTo, currentJsonPath, atomicEditing, renderMarkdown, renderExternalWidget, schemaForPath }) {
+    return (
+    // `shrink-0`: when the viewer fills a bounded viewport its scroller is a
+    // flex column, and this frame is a scroll container, so its `min-height:
+    // auto` resolves to 0 — without the guard a tall object is squeezed and
+    // clipped with no scrollbar of its own.
+    _jsx("div", { className: cn(TABULAR_DATA_FRAME_CLASS, 'shrink-0'), children: _jsx("div", { className: "@container max-w-full overflow-x-auto overscroll-x-none [word-break:normal] [overflow-wrap:normal]", children: _jsx("table", { className: "mb-0 w-full table-fixed border-separate border-spacing-0 text-sm", children: _jsx("tbody", { children: Object.entries(obj).map(([k, v], i, arr) => (_jsxs("tr", { children: [_jsx("th", { className: `w-[6rem] @[208px]:w-[45%] @[432px]:w-[12rem] border-r border-border bg-background px-4 py-1.5 text-left align-top font-normal text-muted-foreground ${i < arr.length - 1 ? 'border-b' : ''}`, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex min-h-7 items-center leading-5", children: _jsx("span", { className: "block min-w-0 truncate", children: k }) }) }), _jsx(TooltipContent, { side: "top", children: k })] }) }), _jsx("td", { className: `min-w-0 overflow-hidden break-words px-4 py-1.5 align-top transition-colors hover:bg-accent/50 ${i < arr.length - 1 ? 'border-b border-border' : ''}`, children: k === 'content'
+                                    && typeof v === 'string'
+                                    && renderMarkdown
+                                    && !schemaForPath?.([...currentJsonPath, k]) ? (() => {
+                                    const open = () => navigateTo(k, [k]);
+                                    const expandAction = _jsx(ExpandValueButton, { onClick: open });
+                                    const content = renderMarkdown(v);
+                                    const jsonPath = [...currentJsonPath, k];
+                                    if (!atomicEditing || atomicEditing.canReplace?.(jsonPath) === false) {
+                                        return (_jsx(StructuredValueCellFrame, { actions: expandAction, children: content }));
+                                    }
+                                    return (_jsx(AtomicValueEditor, { actions: expandAction, label: k, multiline: true, onCommit: (nextValue) => atomicEditing.commit(jsonPath, nextValue), saving: atomicEditing.saving, value: v, children: content }));
+                                })() : (_jsx(GeneralJsonValueCell, { atomicEditing: atomicEditing, label: k, navigateTo: () => navigateTo(k, [k]), path: [...currentJsonPath, k], renderMarkdown: renderMarkdown, renderExternalWidget: renderExternalWidget, schemaForPath: schemaForPath, value: v })) })] }, k))) }) }) }) }));
+}

package/dist/lib/clipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyTextToClipboard(value: string): Promise<void>;