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

package/dist/structured-data/copy-json-action.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Copy } from 'lucide-react';
+import { copyTextToClipboard } from '../lib/clipboard.js';
+import { InlineFeedbackAction } from '../primitives/inline-feedback-action.js';
+import { cn } from '../lib/cn.js';
+export function CopyJsonAction({ className, dataId, getPathText, getRecordText, label, pathLabel, recordLabel, tone = 'default', }) {
+    const [status, setStatus] = useState('idle');
+    const [copying, setCopying] = useState(false);
+    const [format, setFormat] = useState('path');
+    const resetTimer = useRef(undefined);
+    const rootRef = useRef(null);
+    const selectedLabel = useRef(null);
+    const alternateLabel = useRef(null);
+    const previousLabelRects = useRef(undefined);
+    useEffect(() => () => {
+        if (resetTimer.current)
+            clearTimeout(resetTimer.current);
+    }, []);
+    useLayoutEffect(() => {
+        const previous = previousLabelRects.current;
+        previousLabelRects.current = undefined;
+        if (!previous || (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches))
+            return;
+        for (const copyFormat of ['path', 'record']) {
+            const choice = copyFormat === format ? selectedLabel.current : alternateLabel.current;
+            const prior = previous[copyFormat];
+            if (!choice || !prior || typeof choice.animate !== 'function')
+                continue;
+            const next = choice.getBoundingClientRect();
+            const x = prior.left - next.left;
+            if (Math.abs(x) < 1)
+                continue;
+            choice.animate([{ transform: `translateX(${x}px)` }, { transform: 'translateX(0)' }], { duration: 180, easing: 'cubic-bezier(.2, .8, .2, 1)' });
+        }
+    }, [format]);
+    const scheduleReset = () => {
+        if (resetTimer.current)
+            clearTimeout(resetTimer.current);
+        resetTimer.current = setTimeout(() => {
+            const restoreFocus = rootRef.current?.contains(document.activeElement) === true;
+            setStatus('idle');
+            setFormat('path');
+            if (restoreFocus)
+                setTimeout(() => rootRef.current?.querySelector('button')?.focus(), 0);
+        }, 2000);
+    };
+    const copy = async (nextFormat) => {
+        if (copying)
+            return;
+        if (resetTimer.current)
+            clearTimeout(resetTimer.current);
+        if (status === 'copied' && nextFormat !== format) {
+            const alternateFormat = format === 'path' ? 'record' : 'path';
+            previousLabelRects.current = {
+                [format]: selectedLabel.current?.getBoundingClientRect(),
+                [alternateFormat]: alternateLabel.current?.getBoundingClientRect(),
+            };
+        }
+        setCopying(true);
+        try {
+            await copyTextToClipboard(nextFormat === 'path' ? getPathText() : getRecordText());
+            setFormat(nextFormat);
+            setStatus('copied');
+            scheduleReset();
+        }
+        catch {
+            previousLabelRects.current = undefined;
+            setStatus('error');
+        }
+        finally {
+            setCopying(false);
+        }
+    };
+    const names = { path: pathLabel, record: recordLabel };
+    const alternateFormat = format === 'path' ? 'record' : 'path';
+    return (_jsx("div", { ref: rootRef, className: cn('inline-flex shrink-0 items-center', className), children: status === 'copied' ? (_jsxs("div", { "data-id": dataId, role: "group", "aria-label": "Copy format", "aria-live": "polite", className: "inline-flex h-6 items-center gap-0.5 rounded-lg bg-muted p-0.5", children: [_jsxs("button", { type: "button", "data-copy-format": format, "aria-label": `Copied ${names[format]}`, "aria-pressed": "true", disabled: copying, className: "inline-flex h-5 items-center gap-1 whitespace-nowrap rounded-md bg-card px-1.5 text-xs font-medium text-foreground shadow-sm transition-[background-color,color,box-shadow] disabled:opacity-50", onClick: (event) => {
+                        event.stopPropagation();
+                        void copy(format);
+                    }, children: [_jsx("span", { children: "Copied" }), _jsx("span", { ref: selectedLabel, children: names[format] })] }), _jsx("button", { type: "button", "data-copy-format": alternateFormat, "aria-label": `Copy ${names[alternateFormat]}`, "aria-pressed": "false", disabled: copying, className: "inline-flex h-5 items-center whitespace-nowrap rounded-md px-1.5 text-xs font-normal text-muted-foreground/65 transition-colors hover:text-foreground disabled:opacity-50", onClick: (event) => {
+                        event.stopPropagation();
+                        void copy(alternateFormat);
+                    }, children: _jsx("span", { ref: alternateLabel, children: `${names[alternateFormat].charAt(0).toUpperCase()}${names[alternateFormat].slice(1)}` }) })] })) : (_jsx(InlineFeedbackAction, { dataId: dataId, disabled: copying, feedback: status === 'error' ? 'Could not copy' : undefined, icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: label, onClick: (event) => {
+                event.stopPropagation();
+                void copy('path');
+            }, tone: status === 'error' ? 'destructive' : tone })) }));
+}

package/dist/structured-data/delete-row-action.d.ts

@@ -0,0 +1,10 @@
+interface DeleteSelectedRowsActionProps {
+    count: number;
+    disabled?: boolean;
+    onDelete: () => Promise<void>;
+    portalContainer?: HTMLElement | null;
+}
+/** Confirmed bulk deletion for the rows a table has selected. One dialog
+ * covers the whole batch, which lands as a single file write. */
+export declare function DeleteSelectedRowsAction({ count, disabled, onDelete, portalContainer, }: DeleteSelectedRowsActionProps): import("react").JSX.Element;
+export {};

package/dist/structured-data/delete-row-action.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button } from '../primitives/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../primitives/dialog.js';
+/** Confirmed bulk deletion for the rows a table has selected. One dialog
+ * covers the whole batch, which lands as a single file write. */
+export function DeleteSelectedRowsAction({ count, disabled = false, onDelete, portalContainer, }) {
+    const [open, setOpen] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [error, setError] = useState(null);
+    const rowsLabel = count === 1 ? '1 row' : `${count.toLocaleString()} rows`;
+    const confirmDelete = async () => {
+        setDeleting(true);
+        setError(null);
+        try {
+            await onDelete();
+            setOpen(false);
+        }
+        catch (caught) {
+            setError(caught instanceof Error ? caught.message : 'Could not delete the rows');
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    return (_jsxs(Dialog, { modal: portalContainer == null, open: open, onOpenChange: (next) => {
+            if (deleting)
+                return;
+            setOpen(next);
+            if (!next)
+                setError(null);
+        }, children: [_jsx("button", { type: "button", "data-id": "structured-data-delete-selected-rows", "aria-label": `Delete ${rowsLabel}`, title: `Delete ${rowsLabel}`, disabled: disabled, className: "grid h-6 w-6 shrink-0 place-items-center rounded-md text-destructive transition-colors hover:text-destructive/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", onClick: (event) => {
+                    event.stopPropagation();
+                    setOpen(true);
+                }, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), _jsxs(DialogContent, { className: "max-w-sm", contained: portalContainer != null, portalContainer: portalContainer, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Delete ", rowsLabel, "?"] }), _jsxs(DialogDescription, { children: ["This removes the selected ", count === 1 ? 'row' : 'rows', " from the file. This action cannot be undone."] })] }), error && _jsx("p", { role: "alert", className: "rounded-md border border-destructive-border bg-destructive-surface px-3 py-2 text-xs text-destructive-surface-foreground", children: error }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", disabled: deleting, onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", variant: "destructive", disabled: deleting, "data-id": "structured-data-confirm-delete-selected-rows", onClick: () => { void confirmDelete(); }, children: deleting ? 'Deleting…' : `Delete ${rowsLabel}` })] })] })] }));
+}

package/dist/structured-data/edit-base.d.ts

@@ -0,0 +1,3 @@
+/** Compare the saved source, so a failed optimistic save can still be retried. */
+export declare const EditBaseContext: import("react").Context<string | undefined>;
+export declare function useEditBaseChanged(): boolean;

package/dist/structured-data/edit-base.js

@@ -0,0 +1,8 @@
+import { createContext, useContext, useRef } from 'react';
+/** Compare the saved source, so a failed optimistic save can still be retried. */
+export const EditBaseContext = createContext(undefined);
+export function useEditBaseChanged() {
+    const source = useContext(EditBaseContext);
+    const initial = useRef(source);
+    return source !== initial.current;
+}

package/dist/structured-data/filter-value.d.ts

@@ -0,0 +1,2 @@
+/** Never silently round a value typed into a filter or saved-view editor. */
+export declare function parseFilterValue(value: string, kind?: string): unknown;

package/dist/structured-data/filter-value.js

@@ -0,0 +1,28 @@
+import { compareJsonNumberTokens, inspectJsonSource } from '@script-it/json-views-core';
+const PRECISION_ERROR = 'This filter value needs exact numeric source text. Define the filter in JSON source to preserve its precision.';
+/** Never silently round a value typed into a filter or saved-view editor. */
+export function parseFilterValue(value, kind) {
+    if (kind === 'string')
+        return value;
+    if (kind === 'boolean')
+        return value === 'true';
+    if (kind === 'number') {
+        const token = value.trim();
+        if (!/^-?(?:0|[1-9][0-9]*)(?:\.[0-9]+)?(?:[eE][+-]?[0-9]+)?$/.test(token))
+            return value;
+        const number = Number(token);
+        if (!Number.isFinite(number) || compareJsonNumberTokens(token, String(number)) !== 0)
+            throw new Error(PRECISION_ERROR);
+        return number;
+    }
+    let inspected;
+    try {
+        inspected = inspectJsonSource(value);
+    }
+    catch {
+        return value;
+    }
+    if (inspected.diagnostics.some((issue) => issue.code === 'unsafe-number'))
+        throw new Error(PRECISION_ERROR);
+    return inspected.value;
+}

package/dist/structured-data/row-selection-icon.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+/** Both faces share a fixed slot; an invisible checkbox stays in tab order. */
+export declare function RowSelectionIcon({ icon, checked, disabled, label, onToggle }: {
+    icon: ReactNode;
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    onToggle?: () => void;
+}): import("react").JSX.Element;

package/dist/structured-data/row-selection-icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../primitives/checkbox.js';
+/** Both faces share a fixed slot; an invisible checkbox stays in tab order. */
+export function RowSelectionIcon({ icon, checked, disabled, label, onToggle }) {
+    return _jsxs("span", { className: "tabular-row-icon relative grid h-3.5 w-3.5 shrink-0 place-items-center", "data-id": onToggle ? 'tabular-row-select' : undefined, children: [_jsx("span", { "aria-hidden": true, className: onToggle ? 'tabular-selection-icon flex' : 'flex', children: icon }), onToggle && _jsx(Checkbox, { "aria-label": label, checked: checked, disabled: disabled, className: "tabular-selection-checkbox absolute inset-0 h-3.5 w-3.5 border-muted-foreground", onCheckedChange: onToggle, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation() })] });
+}

package/dist/structured-data/structured-cell-fill-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * True inside a data cell of the tabular view, whose `<td>` carries no
+ * padding: the value frame supplies the cell padding itself, so its hover
+ * wash covers the full cell face instead of an inset box around the text.
+ */
+export declare const StructuredCellFillContext: import("react").Context<boolean>;

package/dist/structured-data/structured-cell-fill-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+/**
+ * True inside a data cell of the tabular view, whose `<td>` carries no
+ * padding: the value frame supplies the cell padding itself, so its hover
+ * wash covers the full cell face instead of an inset box around the text.
+ */
+export const StructuredCellFillContext = createContext(false);

package/dist/structured-data/structured-data-content.d.ts

@@ -0,0 +1 @@
+export { StructuredDataContent, type StructuredDataContentProps, type MetadataPersistence, type MetadataPersistenceRequest, type ObjectRootConversionRequest, } from '../json/json-content.js';

package/dist/structured-data/structured-data-content.js

@@ -0,0 +1 @@
+export { StructuredDataContent, } from '../json/json-content.js';

package/dist/structured-data/table-types.d.ts

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import type { UiSize } from '../lib/ui-size.js';
+import type { JsonViewFilterOperator, ValuePath } from '@script-it/json-views-core';
+export type SortDirection = 'asc' | 'desc';
+export type SortConfig = {
+    column: string;
+    direction: SortDirection;
+} | null;
+export interface ColumnFilterRule {
+    operator: JsonViewFilterOperator;
+    value?: unknown;
+}
+export interface ColumnFilterConfig extends ColumnFilterRule {
+    column: string;
+}
+export interface ColumnFilterOperatorOption {
+    label: string;
+    value: JsonViewFilterOperator;
+}
+export interface TabularObjectArrayViewProps {
+    arr: Record<string, unknown>[];
+    /** Stable source identities when the host reorders projected records. */
+    rowKeys?: readonly string[];
+    /** Exact source identity for comparison of numeric literals, including nested values. */
+    getCellSourcePath?: (rowIndex: number, column: string) => ValuePath | undefined;
+    columns: string[];
+    /** Optional display labels let projected views keep stable internal column
+     *  keys even when two declared labels are identical. */
+    columnLabels?: Readonly<Record<string, string>>;
+    /** Stable field identities for cached column state when projected columns move. */
+    columnStateKeys?: Readonly<Record<string, string>>;
+    filePath?: string;
+    viewStateKey: string;
+    onOpenCell: (cell: {
+        value: unknown;
+        rowIndex: number;
+        column: string;
+    }) => void;
+    /** All rows after filtering/sorting, in display order (independent of virtualization). */
+    onVisibleRowsChange?: (rowIndices: readonly number[], filtered: boolean) => void;
+    /** Lets a host add behavior around a cell without coupling this table to a schema. */
+    renderCell?: (cell: {
+        value: unknown;
+        rowIndex: number;
+        column: string;
+        open: () => void;
+    }) => ReactNode;
+    /** Declares the one cell that represents and opens the whole record. */
+    recordNavigation?: {
+        titleColumn: string;
+        getLabel: (rowIndex: number) => string;
+        onOpen: (rowIndex: number) => void;
+        renderTitle: (cell: {
+            value: unknown;
+            rowIndex: number;
+            column: string;
+        }) => ReactNode;
+    };
+    /** Appends a blank record to an array-backed table. */
+    onAddRow?: () => Promise<void>;
+    rowAdditionDisabled?: boolean;
+    /** Adds row deletion via checkbox selection plus the footer's delete
+     * action (single rows included). Receives unsorted row indices in
+     * descending order so positional patchers can apply them in one pass. */
+    onDeleteRows?: (rowIndices: number[]) => Promise<void>;
+    /** Enables selection for copying and returns agent-ready JSON for the
+     * selected unsorted row indices in their current visible table order. */
+    getRowsCopyText?: (rowIndices: readonly number[]) => string;
+    /** Returns filename-qualified JSON Pointer references for selected rows. */
+    getRowsReferenceText?: (rowIndices: readonly number[]) => string;
+    rowDeletionDisabled?: boolean;
+    initialCell?: {
+        row: number;
+        col: string;
+    };
+    /** Scales row height to match the host's UI size. */
+    uiSize?: UiSize;
+    /**
+     * When true, the table stays content-sized until it reaches the parent's
+     * height, then its rows scroll internally while the footer remains visible.
+     * When false (default), the scroll area is capped at min(600px, 70vh) for
+     * unbounded layouts (inline outputs, embeds).
+     */
+    fillHeight?: boolean;
+    /** Enables transient sort/hide state for tables without a saved view. */
+    presentationControls?: boolean;
+    /** Persisted views can expose the same actions directly from the column
+     *  heading while the host owns the metadata update. */
+    activeColumnSort?: SortConfig;
+    onColumnSort?: (column: string, direction: SortDirection | null) => void | Promise<void>;
+    /** Externally managed filters, used by declared JSON Views whose metadata
+     *  owns filtering. Omit to use transient table presentation state. */
+    activeColumnFilters?: readonly ColumnFilterConfig[];
+    /** Optional field-specific wording or operator restrictions. */
+    columnFilterOperators?: Readonly<Record<string, readonly ColumnFilterOperatorOption[]>>;
+    /** Values shown as input suggestions while still allowing free text. */
+    columnFilterValues?: Readonly<Record<string, readonly unknown[]>>;
+    onColumnFilter?: (column: string, filter: ColumnFilterRule | null) => void | Promise<void>;
+    onColumnRename?: (column: string, label: string) => void | Promise<void>;
+    onColumnHide?: (column: string) => void | Promise<void>;
+    /** Reorders a declared column while preserving its data path. */
+    onColumnMove?: (column: string, target: string, position: 'before' | 'after') => void | Promise<void>;
+    onColumnDelete?: (column: string) => void | Promise<void>;
+    onAddColumn?: (column: {
+        label: string;
+        type: 'text' | 'markdown' | 'html' | 'number' | 'checkbox' | 'date' | 'select' | 'multi-select';
+    }) => void | Promise<void>;
+}

package/dist/structured-data/table-types.js

@@ -0,0 +1 @@
+export {};

package/dist/structured-data/use-metadata-persistence.d.ts

@@ -0,0 +1,15 @@
+import type { StructuredDocumentFormat } from '@script-it/json-views-core';
+export type MetadataPersistence = 'inferred' | 'session' | 'embedded';
+/** Annotation storage is independent of source format conversion.
+ * Controlled metadata is always authoritative, including its removal.
+ */
+export declare function useMetadataPersistence({ metadata, mode, format, onMetadataChange }: {
+    metadata?: unknown;
+    mode?: MetadataPersistence;
+    format: StructuredDocumentFormat;
+    onMetadataChange?: (metadata: Record<string, unknown>) => Promise<void>;
+}): {
+    persistence: MetadataPersistence;
+    effectiveMetadata: {} | null | undefined;
+    saveSessionMetadata: (next: Record<string, unknown>) => Promise<void>;
+};

package/dist/structured-data/use-metadata-persistence.js

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+/** Annotation storage is independent of source format conversion.
+ * Controlled metadata is always authoritative, including its removal.
+ */
+export function useMetadataPersistence({ metadata, mode, format, onMetadataChange }) {
+    const [sessionMetadata, setSessionMetadata] = useState();
+    const persistence = metadata !== undefined ? 'session' : mode ?? (format === 'json-object' ? 'embedded' : 'inferred');
+    const effectiveMetadata = metadata !== undefined ? metadata : persistence === 'session' ? sessionMetadata : undefined;
+    const saveSessionMetadata = useCallback(async (next) => {
+        if (metadata !== undefined && !onMetadataChange)
+            throw new Error('These annotations are read-only');
+        await onMetadataChange?.(next);
+        // Do not cache controlled props: removing them must restore inference/embedded metadata.
+        if (metadata === undefined)
+            setSessionMetadata(next);
+    }, [metadata, onMetadataChange]);
+    return { persistence, effectiveMetadata, saveSessionMetadata };
+}

package/dist/structured-data/use-optimistic-text-document.d.ts

@@ -0,0 +1,22 @@
+import { type DocumentContentValidator, type JsonDocumentSave } from '@script-it/json-views-core';
+interface OptimisticTextDocumentOptions {
+    content: string;
+    documentKey?: string;
+    revision?: string;
+    saveContent?: JsonDocumentSave;
+    saving?: boolean;
+    validateContent?: DocumentContentValidator;
+}
+/** React subscription to a document session; the host owns durable persistence. */
+export declare function useOptimisticTextDocument({ content, documentKey, revision, saveContent, saving, validateContent, }: OptimisticTextDocumentOptions): {
+    canCommit: boolean;
+    commit: (buildNext: (source: string) => string) => Promise<void>;
+    content: string;
+    acknowledgedContent: string;
+    edit: (nextContent: string) => void;
+    saving: boolean;
+    error: string | undefined;
+    dirty: boolean;
+    reset: () => void;
+};
+export {};

package/dist/structured-data/use-optimistic-text-document.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
+import { JsonDocumentSession } from '@script-it/json-views-core';
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** React subscription to a document session; the host owns durable persistence. */
+export function useOptimisticTextDocument({ content, documentKey, revision, saveContent, saving = false, validateContent, }) {
+    const session = useMemo(() => new JsonDocumentSession({
+        id: documentKey ?? 'document', content, revision, validateContent,
+    }), [documentKey, validateContent]);
+    const snapshot = useSyncExternalStore(session.subscribe, session.getSnapshot, session.getSnapshot);
+    useBrowserLayoutEffect(() => { session.receive({ content, revision }); }, [session, content, revision]);
+    const commit = useCallback((buildNext) => {
+        if (!saveContent)
+            return Promise.reject(new Error('This file is read-only'));
+        if (saving)
+            return Promise.reject(new Error('A save is already in progress'));
+        return session.commit(buildNext, saveContent);
+    }, [session, saveContent, saving]);
+    const edit = useCallback((nextContent) => { session.edit(nextContent); }, [session]);
+    return {
+        canCommit: saveContent !== undefined,
+        commit,
+        content: snapshot.content,
+        acknowledgedContent: snapshot.acknowledgedContent,
+        edit,
+        saving: snapshot.saving || saving,
+        error: snapshot.error?.message,
+        dirty: snapshot.dirty,
+        reset: () => session.reset(),
+    };
+}

package/dist/structured-data/value-cell.d.ts

@@ -0,0 +1,15 @@
+import type { ValuePath } from '@script-it/json-views-core';
+export declare function ExpandValueButton({ onClick }: {
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function ValueCell({ value, sourcePath, onOpen, }: {
+    value: unknown;
+    sourcePath?: ValuePath;
+    onOpen: () => void;
+}): import("react").JSX.Element;
+export declare function ValueCellContent({ containerInteractive, value, sourcePath, onOpen, }: {
+    containerInteractive?: boolean;
+    value: unknown;
+    sourcePath?: ValuePath;
+    onOpen: () => void;
+}): import("react").JSX.Element;

package/dist/structured-data/value-cell.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Maximize2, Table2 } from 'lucide-react';
+import { JsonSourceNumber, useJsonSourceLiterals } from '../json/source-literals.js';
+import { formatAbsoluteTimestamp, formatRelativeTimeShortIfPast, parseIsoDateString } from '../lib/time.js';
+import { StructuredValueCellFrame } from './atomic-value-editor.js';
+import { OptionPill } from '../primitives/option-pill.js';
+function isSimpleList(value) {
+    return Array.isArray(value) && value.every((item) => item === null || ['string', 'number', 'boolean'].includes(typeof item));
+}
+function isWebUrl(value) {
+    if (typeof value !== 'string')
+        return false;
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+function getValuePreview(value, sourcePath, sourceLiteral, depth = 0) {
+    const entries = Array.isArray(value)
+        ? value.map((item, index) => [index, item])
+        : Object.entries(value);
+    if (entries.length === 0)
+        return '(empty)';
+    const limit = depth === 0 ? 8 : 2;
+    const parts = entries.slice(0, limit).map(([key, item]) => {
+        const path = sourcePath ? [...sourcePath, key] : undefined;
+        const literal = sourceLiteral(path);
+        const text = item === null ? 'null' : typeof item === 'object'
+            ? depth < 1 ? getValuePreview(item, path, sourceLiteral, depth + 1) : '…'
+            : literal ?? String(item);
+        return Array.isArray(value) ? text : `${key}: ${text}`;
+    });
+    return parts.join(', ') + (entries.length > limit ? ', …' : '');
+}
+export function ExpandValueButton({ onClick }) {
+    return (_jsx("button", { type: "button", className: "grid h-6 w-6 shrink-0 place-items-center rounded-md bg-transparent text-muted-foreground opacity-100 hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/structured-cell:opacity-100 [@media(hover:hover)]:group-focus-within/structured-cell:opacity-100", onClick: (event) => {
+            event.stopPropagation();
+            onClick();
+        }, title: "Expand value", children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) }));
+}
+export function ValueCell({ value, sourcePath, onOpen, }) {
+    const container = value !== null && typeof value === 'object' && !isSimpleList(value);
+    return (_jsx(StructuredValueCellFrame, { actions: container ? undefined : _jsx(ExpandValueButton, { onClick: onOpen }), activationLabel: container ? 'Open nested value' : undefined, onActivate: container ? onOpen : undefined, children: _jsx(ValueCellContent, { containerInteractive: !container, sourcePath: sourcePath, value: value, onOpen: onOpen }) }));
+}
+export function ValueCellContent({ containerInteractive = true, value, sourcePath, onOpen, }) {
+    const sourceLiteral = useJsonSourceLiterals();
+    const literal = sourceLiteral(sourcePath);
+    if (literal !== undefined)
+        return _jsx(JsonSourceNumber, { literal: literal });
+    if (isSimpleList(value)) {
+        if (value.every((item) => typeof item === 'string' && item.length <= 60 && !isWebUrl(item))) {
+            const visible = value.slice(0, 8);
+            return _jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap gap-1 py-0.5", children: [visible.length === 0 ? _jsx("span", { className: "text-muted-foreground", children: "(empty)" }) : visible.map((item, index) => _jsx(OptionPill, { label: item, className: "max-w-full", labelClassName: "truncate" }, index)), value.length > visible.length && _jsxs("button", { type: "button", className: "rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", onClick: (event) => { event.stopPropagation(); onOpen(); }, children: ["+", value.length - visible.length, " more"] })] });
+        }
+        return _jsx("span", { className: "min-w-0 flex-1 whitespace-normal break-words leading-5", children: value.length === 0 ? '(empty)' : value.map((item, index) => {
+                const itemLiteral = sourceLiteral(sourcePath ? [...sourcePath, index] : undefined);
+                return _jsxs("span", { children: [index > 0 && ', ', itemLiteral !== undefined ? _jsx(JsonSourceNumber, { literal: itemLiteral }) : isWebUrl(item)
+                            ? _jsx("a", { href: item, target: "_blank", rel: "noopener noreferrer", className: "text-link hover:underline", onClick: (event) => event.stopPropagation(), children: item })
+                            : String(item)] }, index);
+            }) });
+    }
+    const isObject = value !== null && typeof value === 'object';
+    if (!isObject) {
+        const scalarValue = String(value ?? '');
+        // An ISO datetime string reads as a local date-time ("Jul 5, 2026,
+        // 1:05 PM · 2h ago"); the raw value stays on the tooltip and in the
+        // expanded view, so nothing is lost for copying. The relative suffix
+        // only appears for past times — "ago" phrasing makes no sense for a
+        // future timestamp.
+        const isoMs = parseIsoDateString(value);
+        const relative = isoMs !== null ? formatRelativeTimeShortIfPast(isoMs) : null;
+        return (_jsx("div", { className: "min-w-0 flex-1 overflow-hidden whitespace-nowrap leading-[max(1.25rem,1.4em)] text-foreground", title: scalarValue, children: isoMs !== null ? (_jsxs(_Fragment, { children: [formatAbsoluteTimestamp(isoMs), relative !== null && (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", relative] }))] })) : (scalarValue) }));
+    }
+    const preview = getValuePreview(value, sourcePath, sourceLiteral);
+    const displayText = preview;
+    const content = (_jsxs(_Fragment, { children: [_jsx(Table2, { "aria-hidden": true, className: "h-4 w-4 shrink-0 text-source-number" }), _jsx("span", { className: "min-w-0 truncate underline", children: displayText })] }));
+    return containerInteractive ? (_jsx("button", { type: "button", className: "inline-flex min-h-7 max-w-full min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1 text-left leading-5 transition-colors hover:bg-accent", onClick: onOpen, title: preview, children: content })) : (_jsx("span", { className: "inline-flex min-h-7 max-w-full min-w-0 flex-1 items-center gap-2 px-1 leading-5", title: preview, children: content }));
+}