@nitrogenbuilder/connector-payload 0.1.19 → 0.1.20

package/dist/components/LockedJsonField.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-export declare const LockedJsonField: React.FC<{
+export declare const LockedJsonField: import("react").ComponentType<{
     path: string;
     field: {
         name: string;

package/dist/components/LockedJsonField.js

@@ -1,38 +1,6 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useField } from "@payloadcms/ui";
-export const LockedJsonField = ({ path, field }) => {
-    const [unlocked, setUnlocked] = useState(false);
-    const { value, setValue } = useField({ path });
-    const displayValue = value ? JSON.stringify(value, null, 2) : "";
-    return (_jsxs("div", { style: { marginBottom: "1.5rem" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [_jsx("label", { style: { fontWeight: 500 }, children: field.name }), _jsx("button", { type: "button", onClick: () => setUnlocked(!unlocked), style: {
-                            padding: "4px 12px",
-                            fontSize: "12px",
-                            background: unlocked ? "#ef4444" : "#6b7280",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: "4px",
-                            cursor: "pointer",
-                        }, children: unlocked ? "Lock" : "Unlock Edit" })] }), _jsx("textarea", { value: displayValue, readOnly: !unlocked, onChange: (e) => {
-                    if (!unlocked)
-                        return;
-                    try {
-                        setValue(JSON.parse(e.target.value));
-                    }
-                    catch {
-                        // Allow typing invalid JSON while editing
-                    }
-                }, style: {
-                    width: "100%",
-                    minHeight: "120px",
-                    fontFamily: "monospace",
-                    fontSize: "12px",
-                    padding: "8px",
-                    background: unlocked ? "#1a1a2e" : "#111",
-                    color: unlocked ? "#e2e8f0" : "#888",
-                    border: `1px solid ${unlocked ? "#ef4444" : "#333"}`,
-                    borderRadius: "4px",
-                    resize: "vertical",
-                } }), field.admin?.description && (_jsx("p", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: field.admin.description }))] }));
-};
+'use client';
+import dynamic from 'next/dynamic';
+export const LockedJsonField = dynamic(() => import('./LockedJsonFieldRuntime').then((module) => module.LockedJsonFieldRuntime), {
+    loading: () => null,
+    ssr: false,
+});

package/dist/components/LockedJsonFieldRuntime.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const LockedJsonFieldRuntime: React.FC<{
+    path: string;
+    field: {
+        name: string;
+        admin?: {
+            description?: string;
+        };
+    };
+}>;

package/dist/components/LockedJsonFieldRuntime.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useField } from '@payloadcms/ui';
+export const LockedJsonFieldRuntime = ({ path, field }) => {
+    const [unlocked, setUnlocked] = useState(false);
+    const { value, setValue } = useField({ path });
+    const displayValue = value ? JSON.stringify(value, null, 2) : '';
+    return (_jsxs("div", { style: { marginBottom: '1.5rem' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.5rem' }, children: [_jsx("label", { style: { fontWeight: 500 }, children: field.name }), _jsx("button", { type: "button", onClick: () => setUnlocked(!unlocked), style: {
+                            padding: '4px 12px',
+                            fontSize: '12px',
+                            background: unlocked ? '#ef4444' : '#6b7280',
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                        }, children: unlocked ? 'Lock' : 'Unlock Edit' })] }), _jsx("textarea", { value: displayValue, readOnly: !unlocked, onChange: (e) => {
+                    if (!unlocked)
+                        return;
+                    try {
+                        setValue(JSON.parse(e.target.value));
+                    }
+                    catch {
+                        // Allow typing invalid JSON while editing
+                    }
+                }, style: {
+                    width: '100%',
+                    minHeight: '120px',
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    padding: '8px',
+                    background: unlocked ? '#1a1a2e' : '#111',
+                    color: unlocked ? '#e2e8f0' : '#888',
+                    border: `1px solid ${unlocked ? '#ef4444' : '#333'}`,
+                    borderRadius: '4px',
+                    resize: 'vertical',
+                } }), field.admin?.description && (_jsx("p", { style: { fontSize: '12px', color: '#888', marginTop: '4px' }, children: field.admin.description }))] }));
+};

package/dist/components/NitrogenDataViewer.js

@@ -1,361 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
-import { Collapsible, useField } from '@payloadcms/ui';
-function updateAtPath(root, path, newValue) {
-    if (path.length === 0)
-        return newValue;
-    const [head, ...rest] = path;
-    if (Array.isArray(root)) {
-        const copy = [...root];
-        copy[head] = updateAtPath(copy[head], rest, newValue);
-        return copy;
-    }
-    if (typeof root === 'object' && root !== null) {
-        const obj = root;
-        return { ...obj, [head]: updateAtPath(obj[head], rest, newValue) };
-    }
-    return root;
-}
-function deleteAtPath(root, path) {
-    if (path.length === 0)
-        return root;
-    if (path.length === 1) {
-        const [head] = path;
-        if (Array.isArray(root))
-            return root.filter((_, i) => i !== head);
-        if (typeof root === 'object' && root !== null) {
-            const { [head]: _removed, ...rest } = root;
-            return rest;
-        }
-        return root;
-    }
-    const [head, ...rest] = path;
-    if (Array.isArray(root)) {
-        const copy = [...root];
-        copy[head] = deleteAtPath(copy[head], rest);
-        return copy;
-    }
-    if (typeof root === 'object' && root !== null) {
-        const obj = root;
-        return { ...obj, [head]: deleteAtPath(obj[head], rest) };
-    }
-    return root;
-}
-function renameKeyAtPath(root, path, newKey) {
-    if (path.length === 0)
-        return root;
-    const parentPath = path.slice(0, -1);
-    const oldKey = path[path.length - 1];
-    function navigate(node, remaining) {
-        if (remaining.length === 0) {
-            if (typeof node === 'object' && node !== null && !Array.isArray(node)) {
-                const obj = node;
-                const result = {};
-                for (const [k, v] of Object.entries(obj)) {
-                    result[k === oldKey ? newKey : k] = v;
-                }
-                return result;
-            }
-            return node;
-        }
-        const [head, ...rest] = remaining;
-        if (Array.isArray(node)) {
-            const copy = [...node];
-            copy[head] = navigate(copy[head], rest);
-            return copy;
-        }
-        if (typeof node === 'object' && node !== null) {
-            const obj = node;
-            return { ...obj, [head]: navigate(obj[head], rest) };
-        }
-        return node;
-    }
-    return navigate(root, parentPath);
-}
-function addChildAtPath(root, path) {
-    function getAt(node, p) {
-        if (p.length === 0)
-            return node;
-        const [head, ...rest] = p;
-        if (Array.isArray(node))
-            return getAt(node[head], rest);
-        if (typeof node === 'object' && node !== null)
-            return getAt(node[head], rest);
-        return undefined;
-    }
-    const target = getAt(root, path);
-    if (Array.isArray(target)) {
-        return updateAtPath(root, path, [...target, '']);
-    }
-    if (typeof target === 'object' && target !== null) {
-        const obj = target;
-        let key = 'newKey';
-        let i = 1;
-        while (key in obj)
-            key = `newKey${i++}`;
-        return updateAtPath(root, path, { ...obj, [key]: '' });
-    }
-    return root;
-}
-// ── Inline text input for editing values and keys ─────────────────────
-function InlineEdit({ display, onCommit, colorClass, }) {
-    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();
-                commit();
-            }
-            if (e.key === 'Escape') {
-                onCommit(display);
-            } // cancel
-        }, onClick: (e) => e.stopPropagation(), className: colorClass, style: {
-            background: 'transparent',
-            border: 'none',
-            borderBottom: '1px solid currentColor',
-            color: 'inherit',
-            font: 'inherit',
-            padding: '0 2px',
-            outline: 'none',
-            minWidth: '4ch',
-            width: `${Math.max(draft.length + 2, 4)}ch`,
-            maxWidth: '500px',
-        } }));
-}
-// ── Small action button (delete / add) ────────────────────────────────
-function ActionBtn({ label, color, onClick, }) {
-    return (_jsx("button", { type: "button", onClick: onClick, style: {
-            marginLeft: 6,
-            padding: '0 5px',
-            fontSize: '10px',
-            lineHeight: '16px',
-            background: color,
-            color: '#fff',
-            border: 'none',
-            borderRadius: '3px',
-            cursor: 'pointer',
-            flexShrink: 0,
-            opacity: 0.85,
-        }, children: label }));
-}
-function JsonNode({ k, value, depth, forceOpen, path, unlocked, callbacks, }) {
-    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;
-    // Key display — clicking it opens inline edit when unlocked
-    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) => {
-                            setEditingKey(false);
-                            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: ": " })] }));
-    // ── null ──
-    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] }));
-    }
-    // ── string ──
-    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) => { 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] }));
-    }
-    // ── number ──
-    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) => {
-                                    setEditingValue(false);
-                                    const n = Number(v);
-                                    onUpdate(path, 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] }));
-    }
-    // ── boolean — click to toggle ──
-    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] }));
-    }
-    // ── array ──
-    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); } }))] })] }))] }));
-    }
-    // ── object ──
-    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 null;
-}
-// ── Injected styles ───────────────────────────────────────────────────
-const stylesId = 'nitrogen-json-viewer-styles';
-function ensureStyles() {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById(stylesId))
-        return;
-    const style = document.createElement('style');
-    style.id = stylesId;
-    style.textContent = `
-    .njv-root {
-      --njv-bg: var(--theme-elevation-50, #f8f8f8);
-      --njv-border: var(--theme-elevation-150, #ddd);
-      --njv-toolbar-bg: var(--theme-elevation-100, #eee);
-      --njv-gutter-bg: var(--theme-elevation-50, #f0f0f0);
-      --njv-gutter-color: var(--theme-elevation-400, #999);
-      --njv-gutter-border: var(--theme-elevation-150, #ddd);
-      --njv-key: #0451a5;
-      --njv-string: #a31515;
-      --njv-number: #098658;
-      --njv-boolean: #0000ff;
-      --njv-null: #0000ff;
-      --njv-brace: var(--theme-elevation-800, #333);
-      --njv-arrow: var(--theme-elevation-500, #888);
-      --njv-summary: var(--theme-elevation-400, #888);
-
-      .collapsible__content { padding: 0; }
-    }
-
-    [data-theme="dark"] .njv-root {
-      --njv-key: #9cdcfe;
-      --njv-string: #ce9178;
-      --njv-number: #b5cea8;
-      --njv-boolean: #569cd6;
-      --njv-null: #569cd6;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .njv-root:not([data-theme="light"] .njv-root) {
-        --njv-key: #9cdcfe;
-        --njv-string: #ce9178;
-        --njv-number: #b5cea8;
-        --njv-boolean: #569cd6;
-        --njv-null: #569cd6;
-      }
-    }
-
-    .njv-key     { color: var(--njv-key); }
-    .njv-string  { color: var(--njv-string); word-break: break-all; white-space: normal; }
-    .njv-number  { color: var(--njv-number); }
-    .njv-boolean { color: var(--njv-boolean); }
-    .njv-null    { color: var(--njv-null); font-style: italic; }
-    .njv-brace   { color: var(--njv-brace); }
-    .njv-arrow   {
-      color: var(--njv-arrow);
-      display: inline-block;
-      width: 14px;
-      font-size: 9px;
-      margin-right: 4px;
-      text-align: center;
-    }
-    .njv-summary { color: var(--njv-summary); font-style: italic; }
-
-    .njv-body { counter-reset: njv-line; }
-
-    .njv-line {
-      display: flex;
-      align-items: baseline;
-      min-height: 24px;
-      line-height: 24px;
-      counter-increment: njv-line;
-    }
-
-    .njv-line::before {
-      content: counter(njv-line);
-      flex-shrink: 0;
-      width: 44px;
-      text-align: right;
-      padding-right: 12px;
-      color: var(--njv-gutter-color);
-      background: var(--njv-gutter-bg);
-      border-right: 1px solid var(--njv-gutter-border);
-      user-select: none;
-      position: sticky;
-      left: 0;
-      z-index: 1;
-    }
-
-    .njv-code {
-      padding-left: 12px;
-      white-space: nowrap;
-      flex: 1;
-    }
-
-    .njv-toolbar {
-      display: flex;
-      gap: 8px 12px;
-      padding: 0 12px;
-      border-bottom: 1px solid var(--njv-border);
-      background: var(--njv-toolbar-bg);
-      button { margin-block: 12px; }
-    }
-  `;
-    document.head.appendChild(style);
-}
-// ── Main component ────────────────────────────────────────────────────
-const NitrogenDataViewer = ({ path, field }) => {
-    const { value, setValue } = useField({ path });
-    const [copied, setCopied] = useState(false);
-    const [pasted, setPasted] = useState(false);
-    const [forceOpen, setForceOpen] = useState(null);
-    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 moduleCount = Array.isArray(parsed) ? parsed.length : null;
-    const handleCopy = useCallback(() => {
-        navigator.clipboard.writeText(jsonString).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        });
-    }, [jsonString]);
-    const handlePaste = useCallback(() => {
-        navigator.clipboard.readText().then((text) => {
-            try {
-                const parsed = JSON.parse(text);
-                setValue(parsed);
-                setPasted(true);
-                setTimeout(() => setPasted(false), 2000);
-            }
-            catch {
-                // ignore invalid JSON
-            }
-        });
-    }, [setValue]);
-    const expandAll = useCallback(() => {
-        setForceOpen(true);
-        setTreeKey((k) => k + 1);
-    }, []);
-    const collapseAll = useCallback(() => {
-        setForceOpen(false);
-        setTreeKey((k) => k + 1);
-    }, []);
-    const callbacks = {
-        onUpdate: (p, v) => setValue(updateAtPath(parsed, p, v)),
-        onDelete: (p) => setValue(deleteAtPath(parsed, p)),
-        onRenameKey: (p, newKey) => setValue(renameKeyAtPath(parsed, p, newKey)),
-        onAddChild: (p) => setValue(addChildAtPath(parsed, p)),
-    };
-    const header = (_jsxs("span", { children: [typeof field.label === 'string' ? field.label : field.name, 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: [_jsx(Collapsible, { header: header, initCollapsed: true, children: _jsxs("div", { style: { border: '1px solid var(--njv-border)', borderRadius: '0 0 4px 4px', overflow: 'hidden' }, 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' }), unlocked && (_jsx("button", { type: "button", className: "btn btn--size-small btn--style-secondary", onClick: handlePaste, children: pasted ? '✓ Pasted' : 'Paste' })), _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("button", { type: "button", onClick: () => setUnlocked((u) => !u), style: {
-                                        marginBlock: '12px',
-                                        marginLeft: 'auto',
-                                        padding: '4px 12px',
-                                        fontSize: '12px',
-                                        background: unlocked ? '#ef4444' : '#6b7280',
-                                        color: '#fff',
-                                        border: 'none',
-                                        borderRadius: '4px',
-                                        cursor: 'pointer',
-                                    }, children: unlocked ? 'Lock' : 'Unlock Edit' })] }), _jsx("div", { className: "njv-body", style: {
-                                maxHeight: '50vh',
-                                overflow: 'auto',
-                                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: unlocked, callbacks: callbacks }, treeKey) })] }) }), typeof field.admin?.description === 'string' && (_jsx("p", { style: { fontSize: '12px', color: '#888', marginTop: '4px' }, children: field.admin.description }))] }));
-};
+import dynamic from 'next/dynamic';
+const NitrogenDataViewer = dynamic(() => import('./NitrogenDataViewerRuntime'), {
+    loading: () => null,
+    ssr: false,
+});
 export default NitrogenDataViewer;

package/dist/components/NitrogenDataViewerRuntime.d.ts

@@ -0,0 +1,3 @@
+import type { JSONFieldClientComponent } from 'payload';
+declare const NitrogenDataViewerRuntime: JSONFieldClientComponent;
+export default NitrogenDataViewerRuntime;

package/dist/components/NitrogenDataViewerRuntime.js

@@ -0,0 +1,353 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Collapsible, useField } from '@payloadcms/ui';
+function updateAtPath(root, path, newValue) {
+    if (path.length === 0)
+        return newValue;
+    const [head, ...rest] = path;
+    if (Array.isArray(root)) {
+        const copy = [...root];
+        copy[head] = updateAtPath(copy[head], rest, newValue);
+        return copy;
+    }
+    if (typeof root === 'object' && root !== null) {
+        const obj = root;
+        return { ...obj, [head]: updateAtPath(obj[head], rest, newValue) };
+    }
+    return root;
+}
+function deleteAtPath(root, path) {
+    if (path.length === 0)
+        return root;
+    if (path.length === 1) {
+        const [head] = path;
+        if (Array.isArray(root))
+            return root.filter((_, i) => i !== head);
+        if (typeof root === 'object' && root !== null) {
+            const { [head]: _removed, ...rest } = root;
+            return rest;
+        }
+        return root;
+    }
+    const [head, ...rest] = path;
+    if (Array.isArray(root)) {
+        const copy = [...root];
+        copy[head] = deleteAtPath(copy[head], rest);
+        return copy;
+    }
+    if (typeof root === 'object' && root !== null) {
+        const obj = root;
+        return { ...obj, [head]: deleteAtPath(obj[head], rest) };
+    }
+    return root;
+}
+function renameKeyAtPath(root, path, newKey) {
+    if (path.length === 0)
+        return root;
+    const parentPath = path.slice(0, -1);
+    const oldKey = path[path.length - 1];
+    function navigate(node, remaining) {
+        if (remaining.length === 0) {
+            if (typeof node === 'object' && node !== null && !Array.isArray(node)) {
+                const obj = node;
+                const result = {};
+                for (const [k, v] of Object.entries(obj)) {
+                    result[k === oldKey ? newKey : k] = v;
+                }
+                return result;
+            }
+            return node;
+        }
+        const [head, ...rest] = remaining;
+        if (Array.isArray(node)) {
+            const copy = [...node];
+            copy[head] = navigate(copy[head], rest);
+            return copy;
+        }
+        if (typeof node === 'object' && node !== null) {
+            const obj = node;
+            return { ...obj, [head]: navigate(obj[head], rest) };
+        }
+        return node;
+    }
+    return navigate(root, parentPath);
+}
+function addChildAtPath(root, path) {
+    function getAt(node, p) {
+        if (p.length === 0)
+            return node;
+        const [head, ...rest] = p;
+        if (Array.isArray(node))
+            return getAt(node[head], rest);
+        if (typeof node === 'object' && node !== null) {
+            return getAt(node[head], rest);
+        }
+        return undefined;
+    }
+    const target = getAt(root, path);
+    if (Array.isArray(target)) {
+        return updateAtPath(root, path, [...target, '']);
+    }
+    if (typeof target === 'object' && target !== null) {
+        const obj = target;
+        let key = 'newKey';
+        let i = 1;
+        while (key in obj)
+            key = `newKey${i++}`;
+        return updateAtPath(root, path, { ...obj, [key]: '' });
+    }
+    return root;
+}
+function InlineEdit({ display, onCommit, colorClass, }) {
+    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();
+                commit();
+            }
+            if (e.key === 'Escape')
+                onCommit(display);
+        }, onClick: (e) => e.stopPropagation(), className: colorClass, style: {
+            background: 'transparent',
+            border: 'none',
+            borderBottom: '1px solid currentColor',
+            color: 'inherit',
+            font: 'inherit',
+            padding: '0 2px',
+            outline: 'none',
+            minWidth: '4ch',
+            width: `${Math.max(draft.length + 2, 4)}ch`,
+            maxWidth: '500px',
+        } }));
+}
+function ActionBtn({ label, color, onClick, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, style: {
+            marginLeft: 6,
+            padding: '0 5px',
+            fontSize: '10px',
+            lineHeight: '16px',
+            background: color,
+            color: '#fff',
+            border: 'none',
+            borderRadius: '3px',
+            cursor: 'pointer',
+            flexShrink: 0,
+            opacity: 0.85,
+        }, children: label }));
+}
+function JsonNode({ k, value, depth, forceOpen, path, unlocked, callbacks, }) {
+    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) => {
+                            setEditingKey(false);
+                            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: ": " })] }));
+    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] }));
+    }
+    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) => {
+                                        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] }));
+    }
+    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) => {
+                                    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] }));
+    }
+    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] }));
+    }
+    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); } }))] })] }))] }));
+    }
+    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 null;
+}
+const stylesId = 'nitrogen-json-viewer-styles';
+function ensureStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(stylesId))
+        return;
+    const style = document.createElement('style');
+    style.id = stylesId;
+    style.textContent = `
+    .njv-root {
+      --njv-bg: var(--theme-elevation-50, #f8f8f8);
+      --njv-border: var(--theme-elevation-150, #ddd);
+      --njv-toolbar-bg: var(--theme-elevation-100, #eee);
+      --njv-gutter-bg: var(--theme-elevation-50, #f0f0f0);
+      --njv-gutter-color: var(--theme-elevation-400, #999);
+      --njv-gutter-border: var(--theme-elevation-150, #ddd);
+      --njv-key: #0451a5;
+      --njv-string: #a31515;
+      --njv-number: #098658;
+      --njv-boolean: #0000ff;
+      --njv-null: #0000ff;
+      --njv-brace: var(--theme-elevation-800, #333);
+      --njv-arrow: var(--theme-elevation-500, #888);
+      --njv-summary: var(--theme-elevation-400, #888);
+
+      .collapsible__content { padding: 0; }
+    }
+
+    [data-theme="dark"] .njv-root {
+      --njv-key: #9cdcfe;
+      --njv-string: #ce9178;
+      --njv-number: #b5cea8;
+      --njv-boolean: #569cd6;
+      --njv-null: #569cd6;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .njv-root:not([data-theme="light"] .njv-root) {
+        --njv-key: #9cdcfe;
+        --njv-string: #ce9178;
+        --njv-number: #b5cea8;
+        --njv-boolean: #569cd6;
+        --njv-null: #569cd6;
+      }
+    }
+
+    .njv-key     { color: var(--njv-key); }
+    .njv-string  { color: var(--njv-string); word-break: break-all; white-space: normal; }
+    .njv-number  { color: var(--njv-number); }
+    .njv-boolean { color: var(--njv-boolean); }
+    .njv-null    { color: var(--njv-null); font-style: italic; }
+    .njv-brace   { color: var(--njv-brace); }
+    .njv-arrow   {
+      color: var(--njv-arrow);
+      display: inline-block;
+      width: 14px;
+      font-size: 9px;
+      margin-right: 4px;
+      text-align: center;
+    }
+    .njv-summary { color: var(--njv-summary); font-style: italic; }
+
+    .njv-body { counter-reset: njv-line; }
+
+    .njv-line {
+      display: flex;
+      align-items: baseline;
+      min-height: 24px;
+      line-height: 24px;
+      counter-increment: njv-line;
+    }
+
+    .njv-line::before {
+      content: counter(njv-line);
+      flex-shrink: 0;
+      width: 44px;
+      text-align: right;
+      padding-right: 12px;
+      color: var(--njv-gutter-color);
+      background: var(--njv-gutter-bg);
+      border-right: 1px solid var(--njv-gutter-border);
+      user-select: none;
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+
+    .njv-code {
+      padding-left: 12px;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .njv-toolbar {
+      display: flex;
+      gap: 8px 12px;
+      padding: 0 12px;
+      border-bottom: 1px solid var(--njv-border);
+      background: var(--njv-toolbar-bg);
+      button { margin-block: 12px; }
+    }
+  `;
+    document.head.appendChild(style);
+}
+const NitrogenDataViewerRuntime = ({ path, field }) => {
+    const { value, setValue } = useField({ path });
+    const [copied, setCopied] = useState(false);
+    const [pasted, setPasted] = useState(false);
+    const [forceOpen, setForceOpen] = useState(null);
+    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 moduleCount = Array.isArray(parsed) ? parsed.length : null;
+    const handleCopy = useCallback(() => {
+        navigator.clipboard.writeText(jsonString).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [jsonString]);
+    const handlePaste = useCallback(() => {
+        navigator.clipboard.readText().then((text) => {
+            try {
+                const parsedValue = JSON.parse(text);
+                setValue(parsedValue);
+                setPasted(true);
+                setTimeout(() => setPasted(false), 2000);
+            }
+            catch {
+                // ignore invalid JSON
+            }
+        });
+    }, [setValue]);
+    const expandAll = useCallback(() => {
+        setForceOpen(true);
+        setTreeKey((k) => k + 1);
+    }, []);
+    const collapseAll = useCallback(() => {
+        setForceOpen(false);
+        setTreeKey((k) => k + 1);
+    }, []);
+    const callbacks = {
+        onUpdate: (p, v) => setValue(updateAtPath(parsed, p, v)),
+        onDelete: (p) => setValue(deleteAtPath(parsed, p)),
+        onRenameKey: (p, newKey) => setValue(renameKeyAtPath(parsed, p, newKey)),
+        onAddChild: (p) => setValue(addChildAtPath(parsed, p)),
+    };
+    const header = (_jsxs("span", { children: [typeof field.label === 'string' ? field.label : field.name, 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: [_jsx(Collapsible, { header: header, initCollapsed: true, children: _jsxs("div", { style: { border: '1px solid var(--njv-border)', borderRadius: '0 0 4px 4px', overflow: 'hidden' }, 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' }), unlocked && (_jsx("button", { type: "button", className: "btn btn--size-small btn--style-secondary", onClick: handlePaste, children: pasted ? '✓ Pasted' : 'Paste' })), _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("button", { type: "button", onClick: () => setUnlocked((u) => !u), style: {
+                                        marginBlock: '12px',
+                                        marginLeft: 'auto',
+                                        padding: '4px 12px',
+                                        fontSize: '12px',
+                                        background: unlocked ? '#ef4444' : '#6b7280',
+                                        color: '#fff',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        cursor: 'pointer',
+                                    }, children: unlocked ? 'Lock' : 'Unlock Edit' })] }), _jsx("div", { className: "njv-body", style: {
+                                maxHeight: '50vh',
+                                overflow: 'auto',
+                                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: unlocked, callbacks: callbacks }, treeKey) })] }) }), typeof field.admin?.description === 'string' && (_jsx("p", { style: { fontSize: '12px', color: '#888', marginTop: '4px' }, children: field.admin.description }))] }));
+};
+export default NitrogenDataViewerRuntime;

package/dist/components/NitrogenEditButton.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
-export declare const NitrogenEditButton: React.FC<{
+export declare const NitrogenEditButton: import("react").ComponentType<{
     collection: string;
 }>;

package/dist/components/NitrogenEditButton.js

@@ -1,78 +1,6 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@payloadcms/ui";
-import { useState, useEffect } from "react";
-import { nitrogenButtonGroupStyle, nitrogenEditDevButtonVars, nitrogenEditLiveButtonVars, nitrogenSecondaryButtonVars, nitrogenViewButtonVars, } from "./nitrogenAdminButtonStyles";
-export const NitrogenEditButton = ({ collection }) => {
-    const [id, setId] = useState(undefined);
-    const [token, setToken] = useState(undefined);
-    const [hasDevelopmentUrl, setHasDevelopmentUrl] = useState(false);
-    const [slug, setSlug] = useState(undefined);
-    const [frontendUrl, setFrontendUrl] = useState(undefined);
-    const [instanceUrl, setInstanceUrl] = useState(undefined);
-    const [authorId, setAuthorId] = useState(undefined);
-    useEffect(() => {
-        const segments = window.location.pathname.split("/").filter(Boolean);
-        const docId = segments.length >= 4 ? segments[3] : undefined;
-        if (docId) {
-            setId(docId);
-            // Fetch the document to get its slug (for View button)
-            fetch(`/api/${collection}/${docId}`)
-                .then((res) => res.json())
-                .then((data) => {
-                if (data.slug) {
-                    setSlug(data.slug);
-                }
-            })
-                .catch((err) => {
-                console.error("Failed to fetch document:", err);
-            });
-        }
-        // Fetch the current user's ID for the authorId param
-        fetch("/api/users/me")
-            .then((res) => res.json())
-            .then((data) => {
-            if (data.user?.id) {
-                setAuthorId(String(data.user.id));
-            }
-        })
-            .catch((err) => {
-            console.error("Failed to fetch current user:", err);
-        });
-        // Fetch the connector token and URLs from NitrogenSettings global
-        fetch("/api/globals/nitrogen-settings")
-            .then((res) => res.json())
-            .then((data) => {
-            if (data.connectorToken) {
-                setToken(data.connectorToken);
-            }
-            if (data.developmentUrl) {
-                setHasDevelopmentUrl(true);
-            }
-            if (data.instanceUrl) {
-                setInstanceUrl(data.instanceUrl.replace(/\/$/, ""));
-            }
-            const url = data.frontendUrl;
-            if (url) {
-                setFrontendUrl(url.replace(/\/$/, ""));
-            }
-        })
-            .catch((err) => {
-            console.error("Failed to fetch nitrogen settings:", err);
-        });
-    }, [collection]);
-    if (!id || !token || !authorId)
-        return null;
-    const param = collection === "nitrogen-templates" ? "templateId" : "pageId";
-    const editorBase = instanceUrl ?? "";
-    const baseHref = `${editorBase}/nitrogen-editor?token=${encodeURIComponent(token)}&collection=${encodeURIComponent(collection)}&${param}=${id}&authorId=${encodeURIComponent(authorId)}`;
-    return (_jsxs("div", { style: nitrogenButtonGroupStyle, children: [slug && frontendUrl && (_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: `${frontendUrl}/${slug}`, extraButtonProps: {
-                    style: nitrogenViewButtonVars,
-                }, children: "View Page" })), hasDevelopmentUrl ? (_jsxs(_Fragment, { children: [_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: baseHref, extraButtonProps: {
-                            style: nitrogenEditLiveButtonVars,
-                        }, children: "Edit (Live)" }), _jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: `${baseHref}&development=true`, extraButtonProps: {
-                            style: nitrogenEditDevButtonVars,
-                        }, children: "Edit (Dev)" })] })) : (_jsx(Button, { buttonStyle: "secondary", el: "anchor", margin: false, newTab: true, url: baseHref, extraButtonProps: {
-                    style: nitrogenSecondaryButtonVars,
-                }, children: "Edit with Nitrogen" }))] }));
-};
+'use client';
+import dynamic from 'next/dynamic';
+export const NitrogenEditButton = dynamic(() => import('./NitrogenEditButtonRuntime').then((module) => module.NitrogenEditButtonRuntime), {
+    loading: () => null,
+    ssr: false,
+});

package/dist/components/NitrogenEditButtonRuntime.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const NitrogenEditButtonRuntime: React.FC<{
+    collection: string;
+}>;

package/dist/components/NitrogenEditButtonRuntime.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Button } from '@payloadcms/ui';
+import { nitrogenButtonGroupStyle, nitrogenEditDevButtonVars, nitrogenEditLiveButtonVars, nitrogenSecondaryButtonVars, nitrogenViewButtonVars, } from './nitrogenAdminButtonStyles';
+export const NitrogenEditButtonRuntime = ({ collection }) => {
+    const [id, setId] = useState(undefined);
+    const [token, setToken] = useState(undefined);
+    const [hasDevelopmentUrl, setHasDevelopmentUrl] = useState(false);
+    const [slug, setSlug] = useState(undefined);
+    const [frontendUrl, setFrontendUrl] = useState(undefined);
+    const [instanceUrl, setInstanceUrl] = useState(undefined);
+    const [authorId, setAuthorId] = useState(undefined);
+    useEffect(() => {
+        const segments = window.location.pathname.split('/').filter(Boolean);
+        const docId = segments.length >= 4 ? segments[3] : undefined;
+        if (docId) {
+            setId(docId);
+            fetch(`/api/${collection}/${docId}`)
+                .then((res) => res.json())
+                .then((data) => {
+                if (data.slug) {
+                    setSlug(data.slug);
+                }
+            })
+                .catch((err) => {
+                console.error('Failed to fetch document:', err);
+            });
+        }
+        fetch('/api/users/me')
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.user?.id) {
+                setAuthorId(String(data.user.id));
+            }
+        })
+            .catch((err) => {
+            console.error('Failed to fetch current user:', err);
+        });
+        fetch('/api/globals/nitrogen-settings')
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.connectorToken) {
+                setToken(data.connectorToken);
+            }
+            if (data.developmentUrl) {
+                setHasDevelopmentUrl(true);
+            }
+            if (data.instanceUrl) {
+                setInstanceUrl(data.instanceUrl.replace(/\/$/, ''));
+            }
+            const url = data.frontendUrl;
+            if (url) {
+                setFrontendUrl(url.replace(/\/$/, ''));
+            }
+        })
+            .catch((err) => {
+            console.error('Failed to fetch nitrogen settings:', err);
+        });
+    }, [collection]);
+    if (!id || !token || !authorId)
+        return null;
+    const param = collection === 'nitrogen-templates' ? 'templateId' : 'pageId';
+    const editorBase = instanceUrl ?? '';
+    const baseHref = `${editorBase}/nitrogen-editor?token=${encodeURIComponent(token)}&collection=${encodeURIComponent(collection)}&${param}=${id}&authorId=${encodeURIComponent(authorId)}`;
+    return (_jsxs("div", { style: nitrogenButtonGroupStyle, children: [slug && frontendUrl && (_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: `${frontendUrl}/${slug}`, extraButtonProps: {
+                    style: nitrogenViewButtonVars,
+                }, children: "View Page" })), hasDevelopmentUrl ? (_jsxs(_Fragment, { children: [_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: baseHref, extraButtonProps: {
+                            style: nitrogenEditLiveButtonVars,
+                        }, children: "Edit (Live)" }), _jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: `${baseHref}&development=true`, extraButtonProps: {
+                            style: nitrogenEditDevButtonVars,
+                        }, children: "Edit (Dev)" })] })) : (_jsx(Button, { buttonStyle: "secondary", el: "anchor", margin: false, newTab: true, url: baseHref, extraButtonProps: {
+                    style: nitrogenSecondaryButtonVars,
+                }, children: "Edit with Nitrogen" }))] }));
+};

package/dist/components/NitrogenViewButton.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
-export declare const NitrogenViewButton: React.FC<{
+export declare const NitrogenViewButton: import("react").ComponentType<{
     collection: string;
 }>;

package/dist/components/NitrogenViewButton.js

@@ -1,46 +1,6 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@payloadcms/ui";
-import { useState, useEffect } from "react";
-import { nitrogenViewButtonVars, } from "./nitrogenAdminButtonStyles";
-export const NitrogenViewButton = ({ collection }) => {
-    const [slug, setSlug] = useState(undefined);
-    const [frontendUrl, setFrontendUrl] = useState(undefined);
-    useEffect(() => {
-        // Get the document ID from the URL
-        const segments = window.location.pathname.split("/").filter(Boolean);
-        const docId = segments.length >= 4 ? segments[3] : undefined;
-        if (!docId)
-            return;
-        // Fetch the document to get its slug
-        fetch(`/api/${collection}/${docId}`)
-            .then((res) => res.json())
-            .then((data) => {
-            if (data.slug) {
-                setSlug(data.slug);
-            }
-        })
-            .catch((err) => {
-            console.error("Failed to fetch document:", err);
-        });
-        // Fetch nitrogen settings to get the frontend URL
-        fetch("/api/globals/nitrogen-settings")
-            .then((res) => res.json())
-            .then((data) => {
-            const url = data.developmentUrl || data.frontendUrl;
-            if (url) {
-                setFrontendUrl(url.replace(/\/$/, ""));
-            }
-        })
-            .catch((err) => {
-            console.error("Failed to fetch nitrogen settings:", err);
-        });
-    }, [collection]);
-    if (!slug || !frontendUrl) {
-        return null;
-    }
-    const href = `${frontendUrl}/${slug}`;
-    return (_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: href, extraButtonProps: {
-            style: nitrogenViewButtonVars,
-        }, children: "View Page" }));
-};
+'use client';
+import dynamic from 'next/dynamic';
+export const NitrogenViewButton = dynamic(() => import('./NitrogenViewButtonRuntime').then((module) => module.NitrogenViewButtonRuntime), {
+    loading: () => null,
+    ssr: false,
+});

package/dist/components/NitrogenViewButtonRuntime.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const NitrogenViewButtonRuntime: React.FC<{
+    collection: string;
+}>;

package/dist/components/NitrogenViewButtonRuntime.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Button } from '@payloadcms/ui';
+import { nitrogenViewButtonVars } from './nitrogenAdminButtonStyles';
+export const NitrogenViewButtonRuntime = ({ collection }) => {
+    const [slug, setSlug] = useState(undefined);
+    const [frontendUrl, setFrontendUrl] = useState(undefined);
+    useEffect(() => {
+        const segments = window.location.pathname.split('/').filter(Boolean);
+        const docId = segments.length >= 4 ? segments[3] : undefined;
+        if (!docId)
+            return;
+        fetch(`/api/${collection}/${docId}`)
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.slug) {
+                setSlug(data.slug);
+            }
+        })
+            .catch((err) => {
+            console.error('Failed to fetch document:', err);
+        });
+        fetch('/api/globals/nitrogen-settings')
+            .then((res) => res.json())
+            .then((data) => {
+            const url = data.developmentUrl || data.frontendUrl;
+            if (url) {
+                setFrontendUrl(url.replace(/\/$/, ''));
+            }
+        })
+            .catch((err) => {
+            console.error('Failed to fetch nitrogen settings:', err);
+        });
+    }, [collection]);
+    if (!slug || !frontendUrl) {
+        return null;
+    }
+    const href = `${frontendUrl}/${slug}`;
+    return (_jsx(Button, { buttonStyle: "primary", el: "anchor", margin: false, newTab: true, url: href, extraButtonProps: {
+            style: nitrogenViewButtonVars,
+        }, children: "View Page" }));
+};

package/package.json

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