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

package/dist/standalone.css

@@ -0,0 +1,113 @@
+.json-views-app {
+  --background: var(--json-views-background, oklch(0.988 0.003 280));
+  --foreground: var(--json-views-foreground, oklch(0.27 0.018 280));
+  --card: var(--json-views-card, oklch(1 0 0));
+  --card-foreground: var(--json-views-card-foreground, oklch(0.27 0.018 280));
+  --muted: var(--json-views-muted, oklch(0.957 0.008 280));
+  --muted-foreground: var(--json-views-muted-foreground, oklch(0.49 0.022 280));
+  --accent: var(--json-views-accent, oklch(0.94 0.019 285));
+  --accent-foreground: var(--json-views-accent-foreground, oklch(0.36 0.065 285));
+  --primary: var(--json-views-primary, oklch(0.49 0.15 285));
+  --primary-foreground: var(--json-views-primary-foreground, oklch(0.99 0.003 285));
+  --border: var(--json-views-border, oklch(0.901 0.009 280));
+  --input: var(--json-views-input, oklch(0.901 0.009 280));
+  --ring: var(--json-views-ring, oklch(0.55 0.15 285));
+  --link: var(--json-views-link, oklch(0.48 0.14 250));
+  --warning: var(--json-views-warning, oklch(0.48 0.09 70));
+  --destructive: var(--json-views-destructive, oklch(0.49 0.16 25));
+  --destructive-border: var(--json-views-destructive-border, oklch(0.86 0.055 25));
+  --destructive-surface: var(--json-views-destructive-surface, oklch(0.965 0.015 25));
+  --destructive-foreground: var(--json-views-destructive-foreground, oklch(0.43 0.12 25));
+}
+
+.json-views-app[data-json-views-theme="dark"] {
+  --background: var(--json-views-background, oklch(0.205 0.012 280));
+  --foreground: var(--json-views-foreground, oklch(0.93 0.01 280));
+  --card: var(--json-views-card, oklch(0.245 0.015 280));
+  --card-foreground: var(--json-views-card-foreground, oklch(0.93 0.01 280));
+  --muted: var(--json-views-muted, oklch(0.27 0.014 280));
+  --muted-foreground: var(--json-views-muted-foreground, oklch(0.71 0.025 280));
+  --accent: var(--json-views-accent, oklch(0.31 0.035 285));
+  --accent-foreground: var(--json-views-accent-foreground, oklch(0.87 0.035 285));
+  --primary: var(--json-views-primary, oklch(0.79 0.105 285));
+  --primary-foreground: var(--json-views-primary-foreground, oklch(0.23 0.04 285));
+  --border: var(--json-views-border, oklch(0.355 0.019 280));
+  --input: var(--json-views-input, oklch(0.355 0.019 280));
+  --ring: var(--json-views-ring, oklch(0.73 0.12 285));
+  --link: var(--json-views-link, oklch(0.77 0.1 250));
+  --warning: var(--json-views-warning, oklch(0.81 0.11 80));
+  --destructive: var(--json-views-destructive, oklch(0.77 0.13 25));
+  --destructive-border: var(--json-views-destructive-border, oklch(0.46 0.08 25));
+  --destructive-surface: var(--json-views-destructive-surface, oklch(0.28 0.03 25));
+  --destructive-foreground: var(--json-views-destructive-foreground, oklch(0.86 0.07 25));
+}
+
+.json-views-app .json-views-inline-feedback-action {
+  display: inline-flex;
+  width: auto;
+  min-width: 24px;
+  max-width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: var(--muted-foreground);
+  background: transparent;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: max-width 220ms cubic-bezier(.2, .8, .2, 1), padding 220ms ease, gap 220ms ease, color 150ms ease, background-color 150ms ease;
+}
+.json-views-app .json-views-inline-feedback-action:hover,
+.json-views-app .json-views-inline-feedback-action.is-feedback {
+  color: var(--foreground);
+  background: var(--accent);
+}
+.json-views-app .json-views-inline-feedback-action.is-strong { color: var(--foreground); }
+.json-views-app .json-views-inline-feedback-action.is-destructive { color: var(--destructive); }
+.json-views-app .json-views-inline-feedback-action.is-feedback {
+  max-width: 150px;
+  gap: 5px;
+  padding-inline: 7px;
+}
+.json-views-app .json-views-inline-feedback-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+.json-views-app .json-views-inline-feedback-action:disabled { cursor: default; opacity: .5; }
+.json-views-app .json-views-inline-feedback-action > svg { flex-shrink: 0; }
+.json-views-app .json-views-inline-feedback-action.is-feedback > svg { animation: json-views-action-confirm 220ms cubic-bezier(.2, .8, .2, 1); }
+.json-views-app .json-views-inline-feedback-label {
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: max-width 220ms cubic-bezier(.2, .8, .2, 1), opacity 150ms ease 50ms, transform 220ms ease;
+}
+.json-views-app .json-views-inline-feedback-action.is-feedback .json-views-inline-feedback-label {
+  max-width: 120px;
+  opacity: 1;
+  transform: translateX(0);
+}
+@keyframes json-views-action-confirm {
+  from { opacity: .4; transform: scale(.72); }
+  to { opacity: 1; transform: scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .json-views-app .json-views-inline-feedback-action,
+  .json-views-app .json-views-inline-feedback-label { transition: none; }
+  .json-views-app .json-views-inline-feedback-action.is-feedback > svg { animation: none; }
+}
+
+
+.json-views-app {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: var(--json-views-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+}

package/dist/structured-data/atomic-value-editor.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { AtomicValue } from './atomic-value.js';
+interface AtomicValueEditorProps {
+    actions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    editorClassName?: string;
+    label: string;
+    multiline?: boolean;
+    onCommit: (value: AtomicValue) => Promise<void>;
+    preserveLayout?: boolean;
+    saving?: boolean;
+    value: AtomicValue;
+}
+export declare function EditValueAction({ disabled, label, onClick, }: {
+    disabled?: boolean;
+    label: string;
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function AtomicValueEditor({ actions, children, className, editorClassName, label, multiline, onCommit, preserveLayout, saving, value, }: AtomicValueEditorProps): import("react").JSX.Element;
+export declare function StructuredValueCellFrame({ activationDisabled, activationLabel, activationRole, actions, children, leading, className, onActivate, overlayActions, }: {
+    activationDisabled?: boolean;
+    activationLabel?: string;
+    /** Use a group when rendered content contains its own interactive descendants. */
+    activationRole?: 'button' | 'group';
+    actions?: ReactNode;
+    children: ReactNode;
+    leading?: ReactNode;
+    className?: string;
+    onActivate?: () => void;
+    overlayActions?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/structured-data/atomic-value-editor.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { Pencil } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { StructuredCellFillContext } from './structured-cell-fill-context.js';
+import { useEditBaseChanged } from './edit-base.js';
+const CONTROL_CLASS = 'min-h-8 w-full min-w-0 rounded-md border border-border bg-background px-2 [font:inherit] text-foreground outline-none transition-colors placeholder:text-muted-foreground hover:border-input focus:border-ring focus:ring-2 focus:ring-inset focus:ring-ring/20';
+export function EditValueAction({ disabled = false, label, onClick, }) {
+    return (_jsx("button", { type: "button", "data-id": "structured-edit-value", "aria-label": `Edit ${label}`, disabled: disabled, className: "grid h-6 w-6 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40", onClick: (event) => {
+            event.stopPropagation();
+            onClick();
+        }, children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }));
+}
+export function AtomicValueEditor({ actions, children, className, editorClassName, label, multiline = false, onCommit, preserveLayout = false, saving = false, value, }) {
+    const [editing, setEditing] = useState(false);
+    const fillCell = useContext(StructuredCellFillContext);
+    const frameRef = useRef(null);
+    const [editorMinHeight, setEditorMinHeight] = useState();
+    const stableLayout = multiline || preserveLayout;
+    const preserveHeight = () => {
+        if (!stableLayout)
+            return;
+        const height = frameRef.current?.getBoundingClientRect().height ?? 0;
+        if (height > 0)
+            setEditorMinHeight(height);
+    };
+    const stopEditing = () => {
+        setEditorMinHeight(undefined);
+        setEditing(false);
+    };
+    if (editing) {
+        const editor = (_jsx(AtomicValueDirectEditor, { controlClassName: editorClassName, label: label, disabled: saving, minHeight: editorMinHeight, multiline: multiline, onCancel: stopEditing, onCommit: async (nextValue) => {
+                await onCommit(nextValue);
+                stopEditing();
+            }, value: value }));
+        // A zero-padding host cell would press the input against the cell
+        // borders. Deliberately tighter than the idle frame's px-3/py-2: the
+        // 32px control plus py-1.5 matches the 44px row exactly (py-2 would grow
+        // the row on every edit toggle), and the control's own ~8px text inset
+        // on top of px-1.5 lands the edited text near the idle text position.
+        const paddedEditor = fillCell ? _jsx("div", { className: "px-1.5 py-1.5", children: editor }) : editor;
+        return stableLayout
+            ? _jsx("div", { ref: frameRef, "data-id": "atomic-value-editor-frame", className: "h-full min-w-0", style: editorMinHeight ? { minHeight: editorMinHeight } : undefined, children: paddedEditor })
+            : paddedEditor;
+    }
+    const display = (_jsx(StructuredValueCellFrame, { actions: actions, activationDisabled: saving, activationLabel: `Edit ${label}`, className: className, onActivate: () => {
+            preserveHeight();
+            setEditing(true);
+        }, children: children }));
+    return stableLayout
+        ? _jsx("div", { ref: frameRef, "data-id": "atomic-value-editor-frame", className: "h-full min-w-0", style: editorMinHeight ? { minHeight: editorMinHeight } : undefined, children: display })
+        : display;
+}
+export function StructuredValueCellFrame({ activationDisabled = false, activationLabel, activationRole = 'button', actions, children, leading, className, onActivate, overlayActions = false, }) {
+    const fillCell = useContext(StructuredCellFillContext);
+    // An editable cell advertises itself with a primary-tinted hover — the
+    // neutral accent tone sits on white/card surfaces where it is barely
+    // perceptible. A low alpha reads on white but is swallowed by the
+    // near-black dark surfaces, so dark raises it.
+    return (_jsxs("div", { "data-id": "structured-value-cell", className: cn('group/structured-cell json-viewer-hovercell relative flex min-h-7 w-full min-w-0 items-start transition-colors', 
+        // Inside a zero-padding table cell the frame IS the cell face:
+        // square corners, and the padding the cell would otherwise carry.
+        // Table values use the entire width up to the column divider. The
+        // right edge is deliberately flush so clipped content makes the
+        // boundary of its column unmistakable.
+        fillCell ? 'h-full items-center rounded-none py-2 pl-3 pr-0' : 'rounded-md px-1.5', onActivate && !activationDisabled
+            ? fillCell
+                ? 'before:absolute before:inset-y-0 before:-left-5 before:right-0 hover:before:bg-primary/10 dark:hover:before:bg-primary/25'
+                : 'hover:bg-primary/10 dark:hover:bg-primary/25'
+            : fillCell
+                ? 'before:absolute before:inset-y-0 before:-left-5 before:right-0 hover:before:bg-accent/70'
+                : 'hover:bg-accent/70', fillCell && onActivate && !activationDisabled && 'cursor-text', className), onClick: (event) => {
+            // The table cell's padding belongs to the same action as its value.
+            // Child actions keep their own handlers and must not activate twice.
+            if (fillCell && event.target === event.currentTarget && !activationDisabled)
+                onActivate?.();
+        }, children: [leading && _jsx("span", { className: "mr-1.5 flex min-h-7 shrink-0 items-center", children: leading }), _jsx("div", { "data-id": onActivate ? 'atomic-edit-value' : undefined, "aria-disabled": onActivate ? activationDisabled : undefined, "aria-label": onActivate ? activationLabel : undefined, role: onActivate ? activationRole : undefined, tabIndex: onActivate && !activationDisabled ? 0 : undefined, title: onActivate ? activationLabel : undefined, className: cn('flex min-h-7 min-w-0 flex-1 items-center', fillCell && 'self-stretch', 
+                // The actions overlay the trailing edge, so the value ends before
+                // their lane: truncation stops short of the chip rather than being
+                // covered by it. Reserved unconditionally — sizing it on hover
+                // would re-truncate the text under the pointer.
+                actions && !fillCell && !overlayActions && 'pr-6', onActivate && !activationDisabled && 'cursor-text focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'), onClick: (event) => {
+                    if (!onActivate || activationDisabled)
+                        return;
+                    const interactiveTarget = event.target instanceof Element
+                        ? event.target.closest('a[href], button, input, textarea, select, summary, [controls], [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="slider"], [role="tab"], [role="menuitem"], [role="option"]')
+                        : null;
+                    if (interactiveTarget && interactiveTarget !== event.currentTarget)
+                        return;
+                    onActivate();
+                }, onKeyDown: (event) => {
+                    if (!onActivate || activationDisabled)
+                        return;
+                    if (event.target !== event.currentTarget)
+                        return;
+                    if (event.key !== 'Enter' && event.key !== ' ')
+                        return;
+                    event.preventDefault();
+                    onActivate();
+                }, children: children }), actions && (
+            // No `z-index`: a rank here escapes the cell and bids against
+            // whatever else the surface stacks — a table's sticky header sits in
+            // a different subtree, so an equal rank hands the win to this one on
+            // DOM order alone. On touch there is no `hover:hover` to fall back
+            // on, so these are visible on every row at once, including rows
+            // scrolled under a sticky header.
+            _jsx("div", { "data-id": "structured-value-cell-actions", className: cn('absolute right-1 flex opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/structured-cell:opacity-100 [@media(hover:hover)]:group-focus-within/structured-cell:opacity-100', 
+                // No surface of its own: the layer is exactly the chip, so it
+                // never has to guess the colour of the cell face it sits on —
+                // which the row wash and the frame's own hover both repaint.
+                // A table row is a uniform height, so the chip centres in it;
+                // a free-standing cell can be a tall block of prose, where the
+                // chip belongs beside its first line.
+                overlayActions ? 'top-2 right-2 rounded-md bg-background/90 shadow-sm' : fillCell ? 'top-1/2 -translate-y-1/2' : 'top-0.5'), children: actions }))] }));
+}
+function AtomicValueDirectEditor({ controlClassName, disabled = false, label, minHeight, multiline, onCancel, onCommit, value, }) {
+    const [draft, setDraft] = useState(typeof value === 'boolean' ? value : String(value));
+    const [error, setError] = useState();
+    const containerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const committingRef = useRef(false);
+    const originalValueRef = useRef(value);
+    const attemptedCommitRef = useRef(false);
+    const baseChanged = useEditBaseChanged();
+    useEffect(() => {
+        containerRef.current?.querySelector('input, textarea')?.focus({ preventScroll: multiline });
+    }, [multiline]);
+    useLayoutEffect(() => {
+        if (!multiline || !textareaRef.current)
+            return;
+        const textarea = textareaRef.current;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${Math.max(minHeight ?? 0, textarea.scrollHeight)}px`;
+    }, [draft, minHeight, multiline]);
+    const commit = async (nextBoolean) => {
+        if (committingRef.current)
+            return;
+        if (baseChanged || (!attemptedCommitRef.current && !Object.is(value, originalValueRef.current))) {
+            setError('This document changed outside this editor. Cancel and reopen it before saving.');
+            return;
+        }
+        let nextValue;
+        if (typeof value === 'boolean') {
+            nextValue = nextBoolean ?? Boolean(draft);
+        }
+        else if (typeof value === 'number') {
+            const parsed = Number(draft);
+            if (typeof draft !== 'string' || draft.trim() === '' || !Number.isFinite(parsed)) {
+                setError('Enter a valid number');
+                return;
+            }
+            nextValue = parsed;
+        }
+        else {
+            nextValue = String(draft);
+        }
+        if (Object.is(nextValue, value) && !error) {
+            onCancel();
+            return;
+        }
+        committingRef.current = true;
+        attemptedCommitRef.current = true;
+        setError(undefined);
+        try {
+            await onCommit(nextValue);
+        }
+        catch (commitError) {
+            setError(commitError instanceof Error ? commitError.message : 'Could not save this value');
+        }
+        finally {
+            committingRef.current = false;
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, "data-id": "atomic-direct-editor", className: "relative min-w-0", onBlur: (event) => {
+            if (event.currentTarget.contains(event.relatedTarget))
+                return;
+            void commit();
+        }, onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                onCancel();
+                return;
+            }
+            const isTextarea = event.target instanceof HTMLTextAreaElement;
+            if (event.key === 'Enter' && (!isTextarea || event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                void commit();
+            }
+        }, children: [typeof value === 'boolean' ? (_jsxs("label", { className: cn('flex min-h-8 items-center gap-2 rounded-md border border-border bg-background px-2 text-xs text-foreground', controlClassName), children: [_jsx("input", { "aria-label": `Edit ${label}`, type: "checkbox", disabled: disabled, checked: draft === true, className: "h-4 w-4 accent-primary", onChange: (event) => {
+                            const next = event.target.checked;
+                            setDraft(next);
+                            void commit(next);
+                        } }), _jsx("span", { children: draft === true ? 'True' : 'False' })] })) : multiline ? (_jsx("textarea", { ref: textareaRef, "aria-label": `Edit ${label}`, disabled: disabled, className: cn(CONTROL_CLASS, 'min-h-24 resize-y py-2', controlClassName), style: minHeight ? { minHeight } : undefined, value: draft, onChange: (event) => setDraft(event.target.value) })) : (_jsx("input", { "aria-label": `Edit ${label}`, type: "text", disabled: disabled, inputMode: typeof value === 'number' ? 'decimal' : undefined, className: cn(CONTROL_CLASS, controlClassName), value: draft, onChange: (event) => setDraft(event.target.value) })), error && _jsx("p", { role: "alert", className: "mt-1 text-[0.6875rem] text-destructive", children: error })] }));
+}

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

@@ -0,0 +1,3 @@
+export type AtomicValue = string | number | boolean;
+/** Values whose editor type is unambiguous from the source value itself. */
+export declare function isEditableAtomicValue(value: unknown): value is AtomicValue;

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

@@ -0,0 +1,6 @@
+/** Values whose editor type is unambiguous from the source value itself. */
+export function isEditableAtomicValue(value) {
+    return typeof value === 'string'
+        || typeof value === 'boolean'
+        || (typeof value === 'number' && Number.isFinite(value));
+}

package/dist/structured-data/column-controls.d.ts

@@ -0,0 +1,21 @@
+import type { ColumnFilterOperatorOption, ColumnFilterRule, SortConfig, SortDirection, TabularObjectArrayViewProps } from './table-types.js';
+export declare function AddColumnHeader({ onAdd }: {
+    onAdd: NonNullable<TabularObjectArrayViewProps['onAddColumn']>;
+}): import("react").JSX.Element;
+export declare function ColumnHeaderMenu({ activeFilter, activeSort, canHide, column, draggable, dragging, filterOperators, filterValues, label, onFilter, onHide, onMoveFirst, onDelete, onRename, onSort, }: {
+    activeFilter?: ColumnFilterRule;
+    activeSort: SortConfig;
+    canHide: boolean;
+    column: string;
+    draggable?: boolean;
+    dragging?: boolean;
+    filterOperators?: readonly ColumnFilterOperatorOption[];
+    filterValues?: readonly unknown[];
+    label: string;
+    onFilter?: (column: string, filter: ColumnFilterRule | null) => void | Promise<void>;
+    onMoveFirst?: () => void | Promise<void>;
+    onHide?: (column: string) => void | Promise<void>;
+    onDelete?: (column: string) => void | Promise<void>;
+    onRename?: (column: string, label: string) => void | Promise<void>;
+    onSort?: (column: string, direction: SortDirection | null) => void | Promise<void>;
+}): import("react").JSX.Element;

package/dist/structured-data/column-controls.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsonValueText } from '@script-it/json-views-core';
+import { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowLeftToLine, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, EyeOff, Filter, Plus, Trash2, X } from 'lucide-react';
+import { useDismiss } from '../lib/use-dismiss.js';
+import { useAnchoredPosition } from '../lib/use-anchored-position.js';
+import { MenuSelect } from '../primitives/menu-select.js';
+import { useJsonViewsPortalContainer } from '../surface.js';
+const DEFAULT_FILTER_OPERATORS = [
+    { value: 'eq', label: 'is' },
+    { value: 'neq', label: 'is not' },
+    { value: 'in', label: 'is any of' },
+    { value: 'notIn', label: 'is none of' },
+    { value: 'gt', label: 'is greater than' },
+    { value: 'gte', label: 'is at least' },
+    { value: 'lt', label: 'is less than' },
+    { value: 'lte', label: 'is at most' },
+    { value: 'contains', label: 'contains' },
+    { value: 'notContains', label: 'does not contain' },
+    { value: 'isEmpty', label: 'is empty' },
+    { value: 'isNotEmpty', label: 'is not empty' },
+];
+function filterValueText(value, operator) {
+    if ((operator === 'in' || operator === 'notIn') && Array.isArray(value))
+        return value.map(jsonValueText).join(', ');
+    if (typeof value === 'string')
+        return value;
+    if (value === undefined)
+        return '';
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return jsonValueText(value);
+    }
+}
+export function AddColumnHeader({ onAdd }) {
+    const portalContainer = useJsonViewsPortalContainer();
+    const [open, setOpen] = useState(false);
+    const [label, setLabel] = useState('');
+    const [type, setType] = useState('text');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState();
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const position = useAnchoredPosition(open, triggerRef, dialogRef);
+    const close = () => { if (!saving) {
+        setOpen(false);
+        setError(undefined);
+    } };
+    const show = () => {
+        setOpen(true);
+    };
+    useDismiss({ enabled: open, onDismiss: close, insideRefs: [triggerRef, dialogRef] });
+    return _jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "data-id": "tabular-add-column", className: "flex h-full min-h-9 w-full items-center gap-1.5 px-3 py-2 text-left text-muted-foreground hover:bg-accent hover:text-foreground", onClick: show, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Add property"] }), open && typeof document !== 'undefined' && createPortal(_jsxs("form", { ref: dialogRef, "aria-label": "Add property", className: "z-[100] grid w-64 gap-3 rounded-md border border-border bg-card p-3 text-foreground shadow-lg", style: position, onSubmit: (event) => {
+                    event.preventDefault();
+                    const nextLabel = label.trim();
+                    if (!nextLabel)
+                        return;
+                    setSaving(true);
+                    setError(undefined);
+                    void Promise.resolve(onAdd({ label: nextLabel, type })).then(() => {
+                        setLabel('');
+                        setType('text');
+                        setOpen(false);
+                    }).catch((cause) => setError(cause instanceof Error ? cause.message : 'Could not add this property')).finally(() => setSaving(false));
+                }, children: [_jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Name", _jsx("input", { autoFocus: true, value: label, onChange: (event) => setLabel(event.target.value), className: "h-8 rounded-md border border-input bg-background px-2 text-sm font-normal outline-none focus-visible:ring-1 focus-visible:ring-ring" })] }), _jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Type", _jsx(MenuSelect, { ariaLabel: "Property type", options: [
+                                    { value: 'text', label: 'Text' },
+                                    { value: 'markdown', label: 'Markdown' },
+                                    { value: 'html', label: 'HTML' },
+                                    { value: 'number', label: 'Number' },
+                                    { value: 'checkbox', label: 'Checkbox' },
+                                    { value: 'date', label: 'Date' },
+                                    { value: 'select', label: 'Select' },
+                                    { value: 'multi-select', label: 'Multi-select' },
+                                ], value: type, onChange: (next) => { if (next)
+                                    setType(next); } })] }), error && _jsx("p", { role: "alert", className: "m-0 text-xs text-destructive", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { type: "button", className: "h-8 rounded-md px-2 text-xs hover:bg-accent", onClick: close, children: "Cancel" }), _jsx("button", { type: "submit", disabled: saving || !label.trim(), className: "h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-50", children: "Add property" })] })] }), portalContainer ?? document.body)] });
+}
+export function ColumnHeaderMenu({ activeFilter, activeSort, canHide, column, draggable = false, dragging = false, filterOperators = DEFAULT_FILTER_OPERATORS, filterValues = [], label, onFilter, onHide, onMoveFirst, onDelete, onRename, onSort, }) {
+    const portalContainer = useJsonViewsPortalContainer();
+    const [open, setOpen] = useState(false);
+    const [draftLabel, setDraftLabel] = useState(label);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState();
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [editingFilter, setEditingFilter] = useState(false);
+    const [editingSort, setEditingSort] = useState(false);
+    const [draftFilterOperator, setDraftFilterOperator] = useState(activeFilter?.operator ?? filterOperators[0]?.value ?? 'eq');
+    const [draftFilterValue, setDraftFilterValue] = useState(() => filterValueText(activeFilter?.value, activeFilter?.operator));
+    const filterValueListId = useId();
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const sortTriggerRef = useRef(null);
+    const sortMenuRef = useRef(null);
+    const menuPosition = useAnchoredPosition(open, triggerRef, menuRef);
+    const sortPosition = useAnchoredPosition(open && editingSort, sortTriggerRef, sortMenuRef, 'right');
+    const renameTimerRef = useRef(undefined);
+    const renameVersionRef = useRef(0);
+    const sort = activeSort?.column === column ? activeSort.direction : undefined;
+    useEffect(() => setDraftLabel(label), [label]);
+    useEffect(() => {
+        if (dragging)
+            setOpen(false);
+    }, [dragging]);
+    useEffect(() => () => {
+        if (renameTimerRef.current !== undefined)
+            clearTimeout(renameTimerRef.current);
+    }, []);
+    const run = async (action) => {
+        setSaving(true);
+        setError(undefined);
+        try {
+            await action();
+            setOpen(false);
+        }
+        catch (actionError) {
+            setError(actionError instanceof Error ? actionError.message : 'Could not update this column');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const saveRename = (value, delay = 0) => {
+        if (renameTimerRef.current !== undefined)
+            clearTimeout(renameTimerRef.current);
+        const next = value.trim();
+        if (!onRename || !next || next === label)
+            return;
+        const version = ++renameVersionRef.current;
+        const save = () => {
+            renameTimerRef.current = undefined;
+            setSaving(true);
+            void Promise.resolve(onRename(column, next)).then(() => {
+                if (version === renameVersionRef.current)
+                    setError(undefined);
+            }).catch((renameError) => {
+                if (version === renameVersionRef.current)
+                    setError(renameError instanceof Error ? renameError.message : 'Could not rename this column');
+            }).finally(() => {
+                if (version === renameVersionRef.current)
+                    setSaving(false);
+            });
+        };
+        if (delay > 0)
+            renameTimerRef.current = setTimeout(save, delay);
+        else
+            save();
+    };
+    const openMenu = () => {
+        setDraftLabel(label);
+        setError(undefined);
+        setConfirmDelete(false);
+        setEditingFilter(false);
+        setEditingSort(false);
+        setDraftFilterOperator(activeFilter?.operator ?? filterOperators[0]?.value ?? 'eq');
+        setDraftFilterValue(filterValueText(activeFilter?.value, activeFilter?.operator));
+        setOpen(true);
+    };
+    const closeMenu = () => {
+        setOpen(false);
+        saveRename(draftLabel);
+    };
+    useDismiss({ enabled: open, onDismiss: closeMenu, insideRefs: [triggerRef, menuRef] });
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "data-id": "tabular-column-menu", "aria-label": `Column options for ${label}`, "aria-expanded": open, "aria-haspopup": "menu", draggable: draggable, className: "flex h-full min-h-9 w-full min-w-0 items-center px-3 py-2 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", title: label, onClick: openMenu, children: [_jsx("span", { className: "block min-w-0 flex-1 overflow-hidden whitespace-nowrap", children: label }), activeFilter && _jsx(Filter, { "data-id": "tabular-column-filter-active", "aria-hidden": true, className: "ml-1.5 h-3 w-3 shrink-0 text-primary" })] }), open && typeof document !== 'undefined' && createPortal(_jsxs("div", { ref: menuRef, role: "menu", className: "z-[100] w-60 rounded-md border border-border bg-card p-1.5 text-foreground shadow-lg", style: menuPosition, children: [confirmDelete ? _jsxs("div", { className: "grid gap-2 p-1", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Delete ", label, " from every row?"] }), _jsxs("div", { className: "flex justify-end gap-1.5", children: [_jsx("button", { type: "button", className: "rounded-md px-2 py-1.5 text-xs hover:bg-accent", onClick: () => setConfirmDelete(false), children: "Cancel" }), _jsx("button", { type: "button", "data-id": "tabular-confirm-delete-column", disabled: saving, className: "rounded-md border border-destructive-border bg-destructive-surface px-2 py-1.5 text-xs font-medium text-destructive-foreground hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50", onClick: () => { if (onDelete)
+                                            void run(() => onDelete(column)); }, children: "Delete property" })] })] }) : editingFilter ? _jsxs("form", { className: "grid gap-2 p-1", "aria-label": `Filter ${label}`, onSubmit: (event) => {
+                            event.preventDefault();
+                            if (!onFilter)
+                                return;
+                            const presenceOnly = draftFilterOperator === 'isEmpty' || draftFilterOperator === 'isNotEmpty';
+                            void run(() => onFilter(column, {
+                                operator: draftFilterOperator,
+                                ...(presenceOnly ? {} : { value: draftFilterValue }),
+                            }));
+                        }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Filter, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", children: ["Filter ", label] })] }), _jsxs("label", { className: "grid gap-1 text-[0.6875rem] text-muted-foreground", children: ["Condition", _jsx(MenuSelect, { ariaLabel: `Filter ${label} condition`, options: filterOperators, value: draftFilterOperator, onChange: setDraftFilterOperator })] }), draftFilterOperator !== 'isEmpty' && draftFilterOperator !== 'isNotEmpty' && _jsxs("label", { className: "grid gap-1 text-[0.6875rem] text-muted-foreground", children: ["Value", _jsx("input", { autoFocus: true, "aria-label": `Filter ${label} value`, list: filterValueListId, className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring", placeholder: draftFilterOperator === 'in' || draftFilterOperator === 'notIn' ? 'Comma-separated values' : 'Value', value: draftFilterValue, onChange: (event) => setDraftFilterValue(event.target.value) }), filterValues.length > 0 && _jsx("datalist", { id: filterValueListId, children: filterValues.map((value, index) => _jsx("option", { value: filterValueText(value) }, `${filterValueText(value)}:${index}`)) })] }), _jsxs("div", { className: "flex justify-between gap-2 pt-1", children: [_jsx("button", { type: "button", "data-id": "tabular-clear-filter", disabled: saving || !activeFilter, className: "h-8 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40", onClick: () => { if (onFilter)
+                                            void run(() => onFilter(column, null)); }, children: "Clear" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", className: "h-8 rounded-md px-2 text-xs hover:bg-accent", onClick: () => setEditingFilter(false), children: "Back" }), _jsx("button", { type: "submit", "data-id": "tabular-apply-filter", disabled: saving || ((draftFilterOperator !== 'isEmpty' && draftFilterOperator !== 'isNotEmpty') && !draftFilterValue.trim()), className: "h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-50", children: "Apply" })] })] })] }) : _jsxs(_Fragment, { children: [onRename && (_jsx("div", { className: "mb-1", children: _jsx("input", { "aria-label": `Rename ${label}`, className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring", value: draftLabel, onChange: (event) => {
+                                        setDraftLabel(event.target.value);
+                                        saveRename(event.target.value, 300);
+                                    }, onBlur: (event) => saveRename(event.target.value) }) })), onRename && _jsx("div", { className: "-mx-1.5 my-1 h-px bg-border" }), onSort && (_jsxs("div", { role: "none", className: "relative", children: [_jsxs("button", { ref: sortTriggerRef, type: "button", role: "menuitem", "data-id": "tabular-sort-column", "aria-haspopup": "menu", "aria-expanded": editingSort, disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => setEditingSort((current) => !current), children: [_jsx(ArrowUpDown, { className: "mr-2 h-3.5 w-3.5" }), " Sort ", _jsx(ChevronRight, { className: "ml-auto h-3.5 w-3.5 text-muted-foreground" })] }), editingSort && (_jsxs("div", { ref: sortMenuRef, role: "menu", "aria-label": `Sort ${label}`, className: "z-[101] w-52 rounded-md border border-border bg-card p-1.5 text-foreground shadow-lg", style: sortPosition, children: [_jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-sort-ascending", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void run(() => onSort(column, 'asc')); }, children: [_jsx(ChevronUp, { className: "mr-2 h-3.5 w-3.5" }), " Sort ascending"] }), _jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-sort-descending", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void run(() => onSort(column, 'desc')); }, children: [_jsx(ChevronDown, { className: "mr-2 h-3.5 w-3.5" }), " Sort descending"] }), sort && _jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-clear-sort", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void run(() => onSort(column, null)); }, children: [_jsx(X, { className: "mr-2 h-3.5 w-3.5" }), " Clear sort"] })] })] }))] })), onFilter && (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-filter-column", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { setEditingSort(false); setEditingFilter(true); }, children: [_jsx(Filter, { className: "mr-2 h-3.5 w-3.5" }), " ", activeFilter ? 'Edit filter' : 'Filter'] })] })), onMoveFirst && _jsxs("button", { type: "button", role: "menuitem", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void run(onMoveFirst); }, children: [_jsx(ArrowLeftToLine, { className: "mr-2 h-3.5 w-3.5" }), " Move first"] }), onHide && (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-hide-column", disabled: saving || !canHide, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => { void run(() => onHide(column)); }, children: [_jsx(EyeOff, { className: "mr-2 h-3.5 w-3.5" }), " Hide column"] })] })), onDelete && _jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs("button", { type: "button", role: "menuitem", "data-id": "tabular-delete-column", disabled: saving, className: "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm text-destructive outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50", onClick: () => setConfirmDelete(true), children: [_jsx(Trash2, { className: "mr-2 h-3.5 w-3.5" }), " Delete property"] })] })] }), error && _jsx("p", { role: "alert", className: "px-2 py-1 text-xs text-destructive", children: error })] }), portalContainer ?? document.body)] }));
+}

package/dist/structured-data/copy-json-action.d.ts

@@ -0,0 +1,10 @@
+export declare function CopyJsonAction({ className, dataId, getPathText, getRecordText, label, pathLabel, recordLabel, tone, }: {
+    className?: string;
+    dataId: string;
+    getPathText: () => string;
+    getRecordText: () => string;
+    label: string;
+    pathLabel: 'path' | 'paths';
+    recordLabel: 'record' | 'records';
+    tone?: 'default' | 'strong';
+}): import("react").JSX.Element;