@nitrogenbuilder/connector-payload 0.1.11 → 0.1.13

package/README.md

@@ -1,39 +1,39 @@
-# Nitrogen Connector Payload
+# @nitrogenbuilder/connector-payload
 
-A Payload CMS plugin for visual page building with Nitrogen.
+Payload CMS 3.x plugin for visual page building with Nitrogen.
 
-## Setup
-
-This project uses the `nitrogen-connector-payload` plugin for visual page building with Nitrogen. Here's how to install it in a fresh Payload CMS project:
-
-### 1. Install Dependencies
+## Install
 
 ```bash
-pnpm add nitrogen-connector-payload //This is not done yet. It's dev only for now.
-pnpm add @nitrogenbuilder/client-react @nitrogenbuilder/client-core @nitrogenbuilder/types
+pnpm add @nitrogenbuilder/connector-payload
 ```
 
-### 2. Add Plugin to Payload Config
+## Setup
 
-In your `src/plugins/index.ts` (or wherever you configure plugins):
+### 1. Add the plugin to your Payload config
 
 ```ts
-import { nitrogenConnectorPlugin } from "nitrogen-connector-payload"; //This is not done yet. For Dev: "link:../nitrogen-connector-payload"
-
-export const plugins: Plugin[] = [
-  nitrogenConnectorPlugin({
-    collections: ["pages", "posts"], // Collections to enable Nitrogen editing on
-  }),
-  // ... other plugins
-];
+import { nitrogenConnectorPlugin } from '@nitrogenbuilder/connector-payload'
+
+export default buildConfig({
+  plugins: [
+    nitrogenConnectorPlugin({
+      collections: ['pages', 'posts'], // collections to enable Nitrogen editing on
+    }),
+  ],
+})
 ```
 
-### 3. Wrap Your Page Routes
+The plugin automatically:
+- Injects `nitrogenData` and `pageSettings` JSON fields into each collection
+- Adds an "Edit in Nitrogen" button to each document in the Payload admin
+- Registers the `NitrogenTemplates` collection and `NitrogenSettings` global
+- Creates all required API endpoints under `/api/nitrogen/v1/`
 
-In your page route files (e.g., `src/app/(frontend)/[slug]/page.tsx`), wrap your content with `NitrogenWrapper`:
+### 2. Wrap your page routes
 
 ```tsx
-import { NitrogenWrapper } from 'nitrogen-connector-payload/frontend'
+import { NitrogenWrapper } from '@nitrogenbuilder/connector-payload/frontend'
 
 export default async function Page({ params, searchParams }) {
   const page = await queryPage(...)
@@ -41,7 +41,6 @@ export default async function Page({ params, searchParams }) {
 
   return (
     <NitrogenWrapper page={page} searchParams={search} collection="pages">
-      {/* Your regular page content */}
       <RenderHero {...page.hero} />
       <RenderBlocks blocks={page.layout} />
     </NitrogenWrapper>
@@ -49,53 +48,66 @@ export default async function Page({ params, searchParams }) {
 }
 ```
 
-That's it! The `NitrogenWrapper` component automatically:
-
-- Detects when the Nitrogen editor is requesting the page (via `?nitrogen-builder` query param)
-- Checks if the page has Nitrogen data
-- Renders the Nitrogen visual builder when needed, otherwise renders your regular content
+`NitrogenWrapper` detects when the Nitrogen editor is loading the page (via `?nitrogen-builder` query param) and renders the visual builder. Otherwise it renders your normal content.
 
-### Adding Custom Components
+### 3. Register components
 
-To register custom Nitrogen components, create a client component:
+Create a client component that registers your Nitrogen components:
 
 ```tsx
 // src/components/NitrogenComponents.tsx
 "use client";
 
-import { nitrogen } from "nitrogen-connector-payload/frontend";
-import type {
-  ComponentSettings,
-  ComponentSettingsToProps,
-} from "nitrogen-connector-payload/frontend";
-import MyComponent from "./MyComponent";
+import { nitrogen } from '@nitrogenbuilder/connector-payload'
+import type { ComponentSettings, ComponentSettingsToProps } from '@nitrogenbuilder/connector-payload'
+import MyComponent from './MyComponent'
 
 const myComponentSettings = {
   categories: {
     content: {
-      label: "Content",
+      label: 'Content',
       groups: {
         content: {
-          label: "Content",
+          label: 'Content',
           props: {
-            title: { type: "string", default: "Hello" },
+            title: { type: 'string', default: 'Hello' },
           },
         },
       },
     },
   },
-} as const satisfies ComponentSettings;
+} as const satisfies ComponentSettings
 
-// Register on module load
-nitrogen.registerModule("my-component", MyComponent, myComponentSettings);
+nitrogen.registerModule('my-component', MyComponent, myComponentSettings)
 
-export {};
+export {}
 ```
 
 Then import it in your page route:
 
 ```tsx
-import "@/components/NitrogenComponents";
+import '@/components/NitrogenComponents'
 ```
 
----
+## Plugin Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `collections` | `string[]` | Slugs of existing Payload collections to enable Nitrogen editing on |
+| `disabled` | `boolean` | Disable the plugin without removing it from config |
+
+## Exports
+
+| Export | Description |
+|--------|-------------|
+| `nitrogenConnectorPlugin` | The Payload plugin |
+| `NitrogenWrapper` | Frontend wrapper component (from `/frontend`) |
+| `NitrogenPageClient` | Low-level client component (from `/frontend`) |
+| `nitrogen` | Re-export of `@nitrogenbuilder/client-core` |
+| `ComponentSettings` | Type for component settings definitions |
+| `ComponentSettingsToProps` | Type helper to derive props from settings |
+| `NitrogenEditButton` | Admin UI button component |
+| `NitrogenViewButton` | Admin UI view button component |
+| `createCollectionEndpoints` | Factory for generating collection API endpoints |
+| `buildDynamicData` | Helper for building dynamic data in page routes |
+| `getNitrogenSettings` | Helper for fetching Nitrogen global settings |

package/dist/components/NitrogenDataViewer.d.ts

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

package/dist/components/NitrogenDataViewer.js

@@ -0,0 +1,347 @@
+'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 [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 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' }), _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 NitrogenDataViewer;

package/dist/globals/NitrogenSettings.js

@@ -38,6 +38,9 @@ export const NitrogenSettings = {
             type: 'json',
             admin: {
                 description: 'Full Nitrogen configuration JSON (colors, variables, CSS injection, URL maps, etc.)',
+                components: {
+                    Field: '@nitrogenbuilder/connector-payload/components/NitrogenDataViewer',
+                },
             },
         },
     ],

package/dist/index.js

@@ -6,7 +6,6 @@ import { nitrogenSettingsEndpoints } from "./endpoints/nitrogen-settings";
 import { allEndpoints } from "./endpoints/all";
 import { menuEndpoints } from "./endpoints/menu";
 import { createCollectionEndpoints } from "./endpoints/collection-endpoints";
-import { collectionPickerEndpoints } from "./endpoints/collection-picker";
 import { registerCollection } from "./collection-registry";
 /** Fields required by Nitrogen that will be injected into collections if missing */
 const nitrogenRequiredFields = [
@@ -48,7 +47,6 @@ export const nitrogenConnectorPlugin = (options = {}) => (incomingConfig) => {
         ...nitrogenSettingsEndpoints,
         ...allEndpoints,
         ...menuEndpoints,
-        ...collectionPickerEndpoints,
     ];
     // Register templates collection
     registerCollection("nitrogen-templates", "nitrogen-templates");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitrogenbuilder/connector-payload",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Nitrogen page builder connector plugin for Payload CMS 3.x",
   "author": "Leonardo Dentzien <leo@torchmedia.ca>",
   "type": "module",
@@ -24,6 +24,11 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "payload": "^3.0.0",
     "next": "^15.0.0",
@@ -41,8 +46,7 @@
     "@nitrogenbuilder/client-core": "link:../monogen/packages/client-core",
     "@nitrogenbuilder/types": "link:../monogen/packages/types"
   },
-  "scripts": {
-    "build": "tsc",
-    "typecheck": "tsc --noEmit"
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild", "sharp"]
   }
-}
+}