@nitrogenbuilder/connector-payload 0.1.35 → 0.1.37

package/dist/components/NitrogenDataViewer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import NitrogenDataViewerRuntime from './NitrogenDataViewerRuntime';
-const NitrogenDataViewer = ({ field, value }) => {
+const NitrogenDataViewer = ({ field, path, value }) => {
     const label = typeof field.label === 'string' ? field.label : field.name;
     const description = typeof field.admin?.description === 'string' ? field.admin.description : undefined;
-    return (_jsx(NitrogenDataViewerRuntime, { description: description, label: label, value: value }));
+    return (_jsx(NitrogenDataViewerRuntime, { description: description, initialValue: value, label: label, path: path }));
 };
 export default NitrogenDataViewer;

package/dist/components/NitrogenDataViewerRuntime.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 declare const NitrogenDataViewerRuntime: React.FC<{
     description?: string;
+    initialValue?: unknown;
     label: string;
-    value?: unknown;
+    path?: string;
 }>;
 export default NitrogenDataViewerRuntime;

package/dist/components/NitrogenDataViewerRuntime.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useField } from '@payloadcms/ui';
+import { useCallback, useMemo, useState } from 'react';
 function updateAtPath(root, path, newValue) {
     if (path.length === 0)
         return newValue;
@@ -73,10 +74,10 @@ function renameKeyAtPath(root, path, newKey) {
     return navigate(root, parentPath);
 }
 function addChildAtPath(root, path) {
-    function getAt(node, p) {
-        if (p.length === 0)
+    function getAt(node, currentPath) {
+        if (currentPath.length === 0)
             return node;
-        const [head, ...rest] = p;
+        const [head, ...rest] = currentPath;
         if (Array.isArray(node))
             return getAt(node[head], rest);
         if (typeof node === 'object' && node !== null) {
@@ -91,88 +92,117 @@ function addChildAtPath(root, path) {
     if (typeof target === 'object' && target !== null) {
         const obj = target;
         let key = 'newKey';
-        let i = 1;
-        while (key in obj)
-            key = `newKey${i++}`;
+        let index = 1;
+        while (key in obj) {
+            key = `newKey${index++}`;
+        }
         return updateAtPath(root, path, { ...obj, [key]: '' });
     }
     return root;
 }
-function InlineEdit({ display, onCommit, colorClass, }) {
+function coerceDisplayValue(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    return value != null ? JSON.stringify(value, null, 2) : '[]';
+}
+function parseJsonValue(value) {
+    if (typeof value === 'string') {
+        try {
+            return JSON.parse(value);
+        }
+        catch {
+            return [];
+        }
+    }
+    return value ?? [];
+}
+function InlineEdit({ colorClass, display, onCommit, }) {
     const [draft, setDraft] = useState(display);
     const commit = () => onCommit(draft);
-    return (_jsx("input", { autoFocus: true, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
+    return (_jsx("input", { autoFocus: true, className: colorClass, onBlur: commit, onChange: (event) => setDraft(event.target.value), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
                 commit();
             }
-            if (e.key === 'Escape')
+            if (event.key === 'Escape') {
                 onCommit(display);
-        }, onClick: (e) => e.stopPropagation(), className: colorClass, style: {
+            }
+        }, style: {
             background: 'transparent',
             border: 'none',
             borderBottom: '1px solid currentColor',
             color: 'inherit',
             font: 'inherit',
-            padding: '0 2px',
-            outline: 'none',
+            maxWidth: '500px',
             minWidth: '4ch',
+            outline: 'none',
+            padding: '0 2px',
             width: `${Math.max(draft.length + 2, 4)}ch`,
-            maxWidth: '500px',
-        } }));
+        }, value: draft }));
 }
-function ActionBtn({ label, color, onClick, }) {
-    return (_jsx("button", { type: "button", onClick: onClick, style: {
-            marginLeft: 6,
-            padding: '0 5px',
-            fontSize: '10px',
-            lineHeight: '16px',
+function ActionButton({ color, label, onClick, }) {
+    return (_jsx("button", { onClick: onClick, style: {
             background: color,
-            color: '#fff',
             border: 'none',
-            borderRadius: '3px',
+            borderRadius: 3,
+            color: '#fff',
             cursor: 'pointer',
             flexShrink: 0,
+            fontSize: 10,
+            lineHeight: '16px',
+            marginLeft: 6,
             opacity: 0.85,
-        }, children: label }));
+            padding: '0 5px',
+        }, type: "button", children: label }));
 }
-function JsonNode({ k, value, depth, forceOpen, path, unlocked, callbacks, }) {
+function JsonNode({ callbacks, depth, forceOpen, k, path, unlocked, value, }) {
     const defaultOpen = forceOpen !== null ? forceOpen : depth < 2;
     const [open, setOpen] = useState(defaultOpen);
-    const [editingValue, setEditingValue] = useState(false);
     const [editingKey, setEditingKey] = useState(false);
-    const { onUpdate, onDelete, onRenameKey, onAddChild } = callbacks;
-    const del = unlocked ? (_jsx(ActionBtn, { label: "\u00D7", color: "#ef4444", onClick: (e) => { e.stopPropagation(); onDelete(path); } })) : null;
-    const keyEl = k === undefined ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-key", children: ["\"", unlocked && editingKey ? (_jsx(InlineEdit, { display: k, colorClass: "njv-key", onCommit: (newKey) => {
+    const [editingValue, setEditingValue] = useState(false);
+    const { onAddChild, onDelete, onRenameKey, onUpdate } = callbacks;
+    const deleteButton = unlocked ? (_jsx(ActionButton, { color: "#ef4444", label: "\u00D7", onClick: (event) => {
+            event.stopPropagation();
+            onDelete(path);
+        } })) : null;
+    const keyElement = k === undefined ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-key", children: ["\"", unlocked && editingKey ? (_jsx(InlineEdit, { colorClass: "njv-key", display: k, onCommit: (newKey) => {
                             setEditingKey(false);
-                            if (newKey !== k)
+                            if (newKey !== k) {
                                 onRenameKey(path, newKey);
-                        } })) : (_jsx("span", { onClick: unlocked ? (e) => { e.stopPropagation(); setEditingKey(true); } : undefined, style: unlocked ? { cursor: 'text', borderBottom: '1px dotted currentColor' } : undefined, children: k })), "\""] }), _jsx("span", { className: "njv-brace", children: ": " })] }));
+                            }
+                        } })) : (_jsx("span", { onClick: unlocked ? (event) => { event.stopPropagation(); setEditingKey(true); } : undefined, style: unlocked ? { borderBottom: '1px dotted currentColor', cursor: 'text' } : undefined, children: k })), "\""] }), _jsx("span", { className: "njv-brace", children: ": " })] }));
     if (value === null) {
-        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyEl, _jsx("span", { className: "njv-null", title: unlocked ? 'Click to convert to empty string' : undefined, onClick: unlocked ? (e) => { e.stopPropagation(); onUpdate(path, ''); } : undefined, style: unlocked ? { cursor: 'pointer', borderBottom: '1px dotted currentColor' } : undefined, children: "null" })] }), del] }));
+        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyElement, _jsx("span", { className: "njv-null", onClick: unlocked ? (event) => { event.stopPropagation(); onUpdate(path, ''); } : undefined, style: unlocked ? { borderBottom: '1px dotted currentColor', cursor: 'pointer' } : undefined, title: unlocked ? 'Click to convert to empty string' : undefined, children: "null" })] }), deleteButton] }));
     }
     if (typeof value === 'string') {
-        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyEl, _jsxs("span", { className: "njv-string", children: ["\"", unlocked && editingValue ? (_jsx(InlineEdit, { display: value, colorClass: "njv-string", onCommit: (v) => {
+        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyElement, _jsxs("span", { className: "njv-string", children: ["\"", unlocked && editingValue ? (_jsx(InlineEdit, { colorClass: "njv-string", display: value, onCommit: (nextValue) => {
                                         setEditingValue(false);
-                                        onUpdate(path, v);
-                                    } })) : (_jsx("span", { onClick: unlocked ? (e) => { e.stopPropagation(); setEditingValue(true); } : undefined, style: unlocked ? { cursor: 'text', borderBottom: '1px dotted currentColor' } : undefined, children: value.length > 120 ? value.slice(0, 120) + '…' : value })), "\""] })] }), del] }));
+                                        onUpdate(path, nextValue);
+                                    } })) : (_jsx("span", { onClick: unlocked ? (event) => { event.stopPropagation(); setEditingValue(true); } : undefined, style: unlocked ? { borderBottom: '1px dotted currentColor', cursor: 'text' } : undefined, children: value.length > 120 ? `${value.slice(0, 120)}…` : value })), "\""] })] }), deleteButton] }));
     }
     if (typeof value === 'number') {
-        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyEl, _jsx("span", { className: "njv-number", children: unlocked && editingValue ? (_jsx(InlineEdit, { display: String(value), colorClass: "njv-number", onCommit: (v) => {
+        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyElement, _jsx("span", { className: "njv-number", children: unlocked && editingValue ? (_jsx(InlineEdit, { colorClass: "njv-number", display: String(value), onCommit: (nextValue) => {
                                     setEditingValue(false);
-                                    const n = Number(v);
-                                    onUpdate(path, Number.isNaN(n) ? v : n);
-                                } })) : (_jsx("span", { onClick: unlocked ? (e) => { e.stopPropagation(); setEditingValue(true); } : undefined, style: unlocked ? { cursor: 'text', borderBottom: '1px dotted currentColor' } : undefined, children: value })) })] }), del] }));
+                                    const numericValue = Number(nextValue);
+                                    onUpdate(path, Number.isNaN(numericValue) ? nextValue : numericValue);
+                                } })) : (_jsx("span", { onClick: unlocked ? (event) => { event.stopPropagation(); setEditingValue(true); } : undefined, style: unlocked ? { borderBottom: '1px dotted currentColor', cursor: 'text' } : undefined, children: value })) })] }), deleteButton] }));
     }
     if (typeof value === 'boolean') {
-        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyEl, _jsx("span", { className: "njv-boolean", onClick: unlocked ? (e) => { e.stopPropagation(); onUpdate(path, !value); } : undefined, title: unlocked ? 'Click to toggle' : undefined, style: unlocked ? { cursor: 'pointer', borderBottom: '1px dotted currentColor' } : undefined, children: String(value) })] }), del] }));
+        return (_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20 }, children: [keyElement, _jsx("span", { className: "njv-boolean", onClick: unlocked ? (event) => { event.stopPropagation(); onUpdate(path, !value); } : undefined, style: unlocked ? { borderBottom: '1px dotted currentColor', cursor: 'pointer' } : undefined, title: unlocked ? 'Click to toggle' : undefined, children: String(value) })] }), deleteButton] }));
     }
     if (Array.isArray(value)) {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20, cursor: 'pointer', userSelect: 'none' }, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: "njv-arrow", children: open ? '▼' : '▶' }), keyEl, _jsx("span", { className: "njv-brace", children: "[" }), !open && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-summary", children: [" ", value.length, " items "] }), _jsx("span", { className: "njv-brace", children: "]" })] }))] }), del] }), open && (_jsxs(_Fragment, { children: [value.map((item, i) => (_jsx(JsonNode, { value: item, depth: depth + 1, forceOpen: forceOpen, path: [...path, i], unlocked: unlocked, callbacks: callbacks }, i))), _jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsx("span", { className: "njv-code", style: { paddingLeft: (depth + 1) * 20 }, children: _jsx("span", { className: "njv-brace", children: "]" }) }), unlocked && (_jsx(ActionBtn, { label: "+ item", color: "#22c55e", onClick: (e) => { e.stopPropagation(); onAddChild(path); } }))] })] }))] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", onClick: () => setOpen((current) => !current), style: { cursor: 'pointer', paddingLeft: depth * 20, userSelect: 'none' }, children: [_jsx("span", { className: "njv-arrow", children: open ? '▼' : '▶' }), keyElement, _jsx("span", { className: "njv-brace", children: "[" }), !open ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-summary", children: [" ", value.length, " items "] }), _jsx("span", { className: "njv-brace", children: "]" })] })) : null] }), deleteButton] }), open ? (_jsxs(_Fragment, { children: [value.map((item, index) => (_jsx(JsonNode, { callbacks: callbacks, depth: depth + 1, forceOpen: forceOpen, path: [...path, index], unlocked: unlocked, value: item }, index))), _jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsx("span", { className: "njv-code", style: { paddingLeft: (depth + 1) * 20 }, children: _jsx("span", { className: "njv-brace", children: "]" }) }), unlocked ? (_jsx(ActionButton, { color: "#22c55e", label: "+ item", onClick: (event) => {
+                                        event.stopPropagation();
+                                        onAddChild(path);
+                                    } })) : null] })] })) : null] }));
     }
     if (typeof value === 'object') {
         const entries = Object.entries(value);
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", style: { paddingLeft: depth * 20, cursor: 'pointer', userSelect: 'none' }, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: "njv-arrow", children: open ? '▼' : '▶' }), keyEl, _jsx("span", { className: "njv-brace", children: '{' }), !open && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-summary", children: [" ", entries.length, " keys "] }), _jsx("span", { className: "njv-brace", children: '}' })] }))] }), del] }), open && (_jsxs(_Fragment, { children: [entries.map(([ek, ev]) => (_jsx(JsonNode, { k: ek, value: ev, depth: depth + 1, forceOpen: forceOpen, path: [...path, ek], unlocked: unlocked, callbacks: callbacks }, ek))), _jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsx("span", { className: "njv-code", style: { paddingLeft: (depth + 1) * 20 }, children: _jsx("span", { className: "njv-brace", children: '}' }) }), unlocked && (_jsx(ActionBtn, { label: "+ key", color: "#22c55e", onClick: (e) => { e.stopPropagation(); onAddChild(path); } }))] })] }))] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsxs("span", { className: "njv-code", onClick: () => setOpen((current) => !current), style: { cursor: 'pointer', paddingLeft: depth * 20, userSelect: 'none' }, children: [_jsx("span", { className: "njv-arrow", children: open ? '▼' : '▶' }), keyElement, _jsx("span", { className: "njv-brace", children: '{' }), !open ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "njv-summary", children: [" ", entries.length, " keys "] }), _jsx("span", { className: "njv-brace", children: '}' })] })) : null] }), deleteButton] }), open ? (_jsxs(_Fragment, { children: [entries.map(([entryKey, entryValue]) => (_jsx(JsonNode, { callbacks: callbacks, depth: depth + 1, forceOpen: forceOpen, k: entryKey, path: [...path, entryKey], unlocked: unlocked, value: entryValue }, entryKey))), _jsxs("div", { className: "njv-line", style: { alignItems: 'center' }, children: [_jsx("span", { className: "njv-code", style: { paddingLeft: (depth + 1) * 20 }, children: _jsx("span", { className: "njv-brace", children: '}' }) }), unlocked ? (_jsx(ActionButton, { color: "#22c55e", label: "+ key", onClick: (event) => {
+                                        event.stopPropagation();
+                                        onAddChild(path);
+                                    } })) : null] })] })) : null] }));
     }
     return null;
 }
@@ -280,43 +310,86 @@ function ensureStyles() {
   `;
     document.head.appendChild(style);
 }
-const NitrogenDataViewerRuntime = ({ description, label, value }) => {
-    const [copied, setCopied] = useState(false);
+const NitrogenDataViewerRuntime = ({ description, initialValue, label, path }) => {
+    const field = path ? useField({ path }) : null;
+    const value = field?.value ?? initialValue;
+    const setValue = field?.setValue;
     const [collapsed, setCollapsed] = useState(true);
+    const [copied, setCopied] = useState(false);
     const [forceOpen, setForceOpen] = useState(null);
+    const [manualPasteValue, setManualPasteValue] = useState('');
+    const [pasteError, setPasteError] = useState('');
+    const [pasted, setPasted] = useState(false);
+    const [showPastePanel, setShowPastePanel] = useState(false);
     const [treeKey, setTreeKey] = useState(0);
+    const [unlocked, setUnlocked] = useState(false);
     ensureStyles();
-    let parsed = [];
-    try {
-        parsed = typeof value === 'string' ? JSON.parse(value) : value;
-    }
-    catch {
-        parsed = [];
-    }
-    const jsonString = value != null ? JSON.stringify(value, null, 2) : '[]';
+    const parsed = useMemo(() => parseJsonValue(value), [value]);
+    const jsonString = useMemo(() => coerceDisplayValue(value), [value]);
     const moduleCount = Array.isArray(parsed) ? parsed.length : null;
+    const applyValue = useCallback((nextValue) => {
+        if (!setValue)
+            return;
+        setValue(nextValue);
+    }, [setValue]);
+    const callbacks = useMemo(() => ({
+        onAddChild: (targetPath) => {
+            applyValue(addChildAtPath(parsed, targetPath));
+        },
+        onDelete: (targetPath) => {
+            applyValue(deleteAtPath(parsed, targetPath));
+        },
+        onRenameKey: (targetPath, newKey) => {
+            applyValue(renameKeyAtPath(parsed, targetPath, newKey));
+        },
+        onUpdate: (targetPath, nextValue) => {
+            applyValue(updateAtPath(parsed, targetPath, nextValue));
+        },
+    }), [applyValue, parsed]);
     const handleCopy = useCallback(() => {
         navigator.clipboard.writeText(jsonString).then(() => {
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
         });
     }, [jsonString]);
+    const applyPastedJson = useCallback((rawValue) => {
+        const trimmed = rawValue.trim();
+        if (!trimmed) {
+            setPasteError('Paste some JSON first.');
+            return;
+        }
+        try {
+            const parsedValue = JSON.parse(trimmed);
+            applyValue(parsedValue);
+            setManualPasteValue('');
+            setPasteError('');
+            setPasted(true);
+            setShowPastePanel(false);
+            setTreeKey((current) => current + 1);
+            setTimeout(() => setPasted(false), 2000);
+        }
+        catch {
+            setPasteError('That is not valid JSON.');
+        }
+    }, [applyValue]);
+    const handlePasteFromClipboard = useCallback(() => {
+        navigator.clipboard.readText().then((text) => {
+            applyPastedJson(text);
+        }, () => {
+            setPasteError('Clipboard access was blocked. Paste manually below.');
+            setShowPastePanel(true);
+        });
+    }, [applyPastedJson]);
     const expandAll = useCallback(() => {
         setForceOpen(true);
-        setTreeKey((k) => k + 1);
+        setTreeKey((current) => current + 1);
     }, []);
     const collapseAll = useCallback(() => {
         setForceOpen(false);
-        setTreeKey((k) => k + 1);
+        setTreeKey((current) => current + 1);
     }, []);
-    const callbacks = {
-        onUpdate: () => undefined,
-        onDelete: () => undefined,
-        onRenameKey: () => undefined,
-        onAddChild: () => undefined,
-    };
-    const header = (_jsxs("span", { children: [label, moduleCount !== null && (_jsxs("span", { style: { opacity: 0.5, fontWeight: 400, marginLeft: 8 }, children: ["(", moduleCount, " item", moduleCount !== 1 ? 's' : '', ")"] }))] }));
-    return (_jsxs("div", { className: "njv-root field-type", style: { marginBottom: '1.5rem' }, children: [_jsxs("div", { style: { border: '1px solid var(--njv-border)', borderRadius: '4px', overflow: 'hidden' }, children: [_jsxs("button", { type: "button", onClick: () => setCollapsed((current) => !current), style: {
+    const header = (_jsxs("span", { children: [label, moduleCount !== null ? (_jsxs("span", { style: { fontWeight: 400, marginLeft: 8, opacity: 0.5 }, children: ["(", moduleCount, " item", moduleCount !== 1 ? 's' : '', ")"] })) : null] }));
+    return (_jsxs("div", { className: "njv-root field-type", style: { marginBottom: '1.5rem' }, children: [_jsxs("div", { style: { border: '1px solid var(--njv-border)', borderRadius: 4, overflow: 'hidden' }, children: [_jsxs("button", { onClick: () => setCollapsed((current) => !current), style: {
                             alignItems: 'center',
                             background: 'var(--theme-elevation-50, #f8f8f8)',
                             border: 'none',
@@ -326,12 +399,33 @@ const NitrogenDataViewerRuntime = ({ description, label, value }) => {
                             justifyContent: 'space-between',
                             padding: '12px 16px',
                             width: '100%',
-                        }, children: [header, _jsx("span", { style: { fontSize: 12, opacity: 0.65 }, children: collapsed ? 'Show' : 'Hide' })] }), !collapsed && (_jsxs("div", { children: [_jsxs("div", { className: "njv-toolbar", children: [_jsx("button", { type: "button", className: "btn btn--size-small btn--style-secondary", onClick: handleCopy, children: copied ? '✓ Copied' : 'Copy' }), _jsx("button", { type: "button", className: "btn btn--size-small btn--style-secondary", onClick: expandAll, children: "Expand All" }), _jsx("button", { type: "button", className: "btn btn--size-small btn--style-secondary", onClick: collapseAll, children: "Collapse All" })] }), _jsx("div", { className: "njv-body", style: {
-                                    maxHeight: '50vh',
-                                    overflow: 'auto',
+                        }, type: "button", children: [header, _jsx("span", { style: { fontSize: 12, opacity: 0.65 }, children: collapsed ? 'Show' : 'Hide' })] }), !collapsed ? (_jsxs("div", { children: [_jsxs("div", { className: "njv-toolbar", children: [_jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: handleCopy, type: "button", children: copied ? '✓ Copied' : 'Copy' }), _jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: () => setUnlocked((current) => !current), type: "button", children: unlocked ? 'Lock' : 'Unlock' }), unlocked ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: handlePasteFromClipboard, type: "button", children: pasted ? '✓ Pasted' : 'Paste' }), _jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: () => {
+                                                    setShowPastePanel((current) => !current);
+                                                    setPasteError('');
+                                                }, type: "button", children: showPastePanel ? 'Hide Paste Box' : 'Paste Manually' })] })) : null, _jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: expandAll, type: "button", children: "Expand All" }), _jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: collapseAll, type: "button", children: "Collapse All" })] }), unlocked && showPastePanel ? (_jsxs("div", { style: {
+                                    background: 'var(--theme-elevation-50, #f8f8f8)',
+                                    borderBottom: '1px solid var(--njv-border)',
+                                    display: 'grid',
+                                    gap: 8,
+                                    padding: 12,
+                                }, children: [_jsx("textarea", { onChange: (event) => setManualPasteValue(event.target.value), placeholder: "Paste Nitrogen JSON here...", style: {
+                                            border: '1px solid var(--theme-elevation-150, #ddd)',
+                                            borderRadius: 4,
+                                            fontFamily: 'var(--font-mono, \"SF Mono\", Menlo, Consolas, monospace)',
+                                            fontSize: 12,
+                                            minHeight: 160,
+                                            padding: 12,
+                                            resize: 'vertical',
+                                            width: '100%',
+                                        }, value: manualPasteValue }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("button", { className: "btn btn--size-small btn--style-primary", onClick: () => applyPastedJson(manualPasteValue), type: "button", children: "Apply Pasted JSON" }), _jsx("button", { className: "btn btn--size-small btn--style-secondary", onClick: () => {
+                                                    setManualPasteValue('');
+                                                    setPasteError('');
+                                                }, type: "button", children: "Clear" })] }), pasteError ? (_jsx("p", { style: { color: 'var(--theme-error-500, #dc2626)', fontSize: 12, margin: 0 }, children: pasteError })) : null] })) : null, _jsx("div", { className: "njv-body", style: {
+                                    backgroundColor: 'var(--njv-bg)',
                                     fontFamily: 'var(--font-mono, "SF Mono", Menlo, Consolas, monospace)',
                                     fontSize: 'var(--font-body-size, 13px)',
-                                    backgroundColor: 'var(--njv-bg)',
-                                }, children: _jsx(JsonNode, { value: parsed ?? [], depth: 0, forceOpen: forceOpen, path: [], unlocked: false, callbacks: callbacks }, treeKey) })] }))] }), typeof description === 'string' && (_jsx("p", { style: { fontSize: '12px', color: '#888', marginTop: '4px' }, children: description }))] }));
+                                    maxHeight: '50vh',
+                                    overflow: 'auto',
+                                }, children: _jsx(JsonNode, { callbacks: callbacks, depth: 0, forceOpen: forceOpen, path: [], unlocked: unlocked, value: parsed }, treeKey) })] })) : null] }), typeof description === 'string' ? (_jsx("p", { style: { color: '#888', fontSize: 12, marginTop: 4 }, children: description })) : null] }));
 };
 export default NitrogenDataViewerRuntime;

package/dist/endpoints/helpers.d.ts

@@ -65,10 +65,29 @@ export declare function buildMediaItemResponse(doc: MediaDoc): {
         medium?: import("../types").MediaSize;
         large?: import("../types").MediaSize;
     };
+    thumbnailURL: string;
     name: string;
     mime: string;
     ext: string;
     size: number;
+    post_date: string;
+    formats: {
+        thumbnail: {
+            url: string;
+            width: number;
+            height: number;
+        } | null;
+        medium: {
+            url: string;
+            width: number;
+            height: number;
+        } | null;
+        large: {
+            url: string;
+            width: number;
+            height: number;
+        } | null;
+    };
 };
 export declare function getNitrogenSettings(payload: Payload): Promise<NitrogenSettingsGlobal>;
 /**

package/dist/endpoints/helpers.js

@@ -96,6 +96,29 @@ export function buildListItemResponse(doc, settings, collectionSlug = 'pages') {
 export function buildMediaItemResponse(doc) {
     const filename = doc.filename || '';
     const ext = filename.includes('.') ? `.${filename.split('.').pop()}` : '';
+    const formats = {
+        thumbnail: doc.sizes?.thumbnail
+            ? {
+                url: doc.sizes.thumbnail.url || '',
+                width: doc.sizes.thumbnail.width || 0,
+                height: doc.sizes.thumbnail.height || 0,
+            }
+            : null,
+        medium: doc.sizes?.medium
+            ? {
+                url: doc.sizes.medium.url || '',
+                width: doc.sizes.medium.width || 0,
+                height: doc.sizes.medium.height || 0,
+            }
+            : null,
+        large: doc.sizes?.large
+            ? {
+                url: doc.sizes.large.url || '',
+                width: doc.sizes.large.width || 0,
+                height: doc.sizes.large.height || 0,
+            }
+            : null,
+    };
     return {
         // Payload-native fields (used by provider renderFiles/renderSelectedFile)
         id: doc.id,
@@ -108,13 +131,29 @@ export function buildMediaItemResponse(doc) {
         height: doc.height || 0,
         createdAt: doc.createdAt,
         sizes: doc.sizes || {},
+        thumbnailURL: formats.thumbnail?.url || doc.url || '',
         // CtrlFile-compatible aliases
         name: filename,
         mime: doc.mimeType || '',
         ext,
         size: doc.filesize ? Math.round((doc.filesize / 1024) * 10) / 10 : 0,
+        post_date: formatDateForWordPress(doc.createdAt),
+        formats,
     };
 }
+function formatDateForWordPress(value) {
+    if (!value)
+        return '';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    const pad = (part) => String(part).padStart(2, '0');
+    return [
+        date.getFullYear(),
+        pad(date.getMonth() + 1),
+        pad(date.getDate()),
+    ].join('-') + ` ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
 export async function getNitrogenSettings(payload) {
     return payload.findGlobal({ slug: 'nitrogen-settings' });
 }

package/dist/endpoints/media.js

@@ -1,4 +1,38 @@
 import { buildMediaItemResponse, requireAuth } from './helpers';
+const MIME_TYPES_BY_EXTENSION = {
+    '.jpg': ['image/jpeg'],
+    '.jpeg': ['image/jpeg'],
+    '.png': ['image/png'],
+    '.gif': ['image/gif'],
+    '.svg': ['image/svg+xml'],
+    '.apng': ['image/apng'],
+    '.avif': ['image/avif'],
+    '.webp': ['image/webp'],
+    '.ico': ['image/x-icon', 'image/vnd.microsoft.icon'],
+    '.bmp': ['image/bmp'],
+    '.tiff': ['image/tiff'],
+    '.tif': ['image/tiff'],
+    '.mp4': ['video/mp4', 'audio/mp4'],
+    '.webm': ['video/webm', 'audio/webm'],
+    '.ogg': ['video/ogg', 'audio/ogg'],
+    '.ogv': ['video/ogg'],
+    '.mp3': ['audio/mpeg'],
+    '.wav': ['audio/wav', 'audio/x-wav'],
+    '.m4a': ['audio/mp4', 'audio/x-m4a'],
+    '.aac': ['audio/aac'],
+    '.oga': ['audio/ogg'],
+    '.flac': ['audio/flac'],
+};
+function normalizeExtension(value) {
+    const trimmed = value.trim().toLowerCase();
+    if (!trimmed)
+        return '';
+    return trimmed.startsWith('.') ? trimmed : `.${trimmed}`;
+}
+function parsePositiveInteger(value, fallback) {
+    const parsed = Number.parseInt(value || '', 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
 export const mediaEndpoints = [
     // GET /api/nitrogen/v1/media — List media items
     {
@@ -9,33 +43,61 @@ export const mediaEndpoints = [
             const url = new URL(req.url || '', 'http://localhost');
             // Parse Payload-style query params: where[mimeType][in][0]=image/jpg
             const mimeTypes = [];
+            const extensions = [];
             for (const [key, value] of url.searchParams.entries()) {
                 if (/^where\[mimeType\]\[in\]\[\d+\]$/.test(key)) {
                     mimeTypes.push(value);
                 }
+                if (key === 'filters[ext]' || /^filters\[ext\](\[(\d*)\])?$/.test(key)) {
+                    const extension = normalizeExtension(value);
+                    if (extension) {
+                        extensions.push(extension);
+                        mimeTypes.push(...(MIME_TYPES_BY_EXTENSION[extension] || []));
+                    }
+                }
             }
-            // Parse search: where[filename][contains]=search
-            const search = url.searchParams.get('where[filename][contains]') || '';
-            // Parse page number
-            const page = parseInt(url.searchParams.get('page') || '1', 10);
-            const where = {};
+            // Parse search from either Payload-style or WordPress-compatible params.
+            const search = url.searchParams.get('where[filename][contains]') ||
+                url.searchParams.get('filters[search]') ||
+                '';
+            const page = parsePositiveInteger(url.searchParams.get('page') || url.searchParams.get('paged'), 1);
+            const limit = Math.min(parsePositiveInteger(url.searchParams.get('limit') || url.searchParams.get('per_page'), 100), 100);
+            const and = [];
             if (mimeTypes.length > 0) {
-                where.mimeType = { in: mimeTypes };
+                and.push({ mimeType: { in: Array.from(new Set(mimeTypes)) } });
+            }
+            else if (extensions.length > 0) {
+                and.push({
+                    or: Array.from(new Set(extensions)).map((extension) => ({
+                        filename: { contains: extension },
+                    })),
+                });
             }
             if (search) {
-                where.filename = { contains: search };
+                and.push({
+                    or: [
+                        { filename: { contains: search } },
+                        { alt: { contains: search } },
+                    ],
+                });
             }
+            const where = and.length > 1 ? { and } : and[0] || {};
             const result = await payload.find({
                 collection: 'media',
                 where,
                 page,
-                limit: 20,
+                limit,
                 sort: '-createdAt',
             });
             const docs = result.docs.map((doc) => buildMediaItemResponse(doc));
             return Response.json({
                 docs,
+                images: docs,
+                pages: result.totalPages,
                 totalPages: result.totalPages,
+                totalDocs: result.totalDocs,
+                page: result.page,
+                limit: result.limit,
             });
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitrogenbuilder/connector-payload",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "Nitrogen page builder connector plugin for Payload CMS 3.x",
   "author": "Leonardo Dentzien <leo@torchmedia.ca>",
   "type": "module",