@nitrogenbuilder/connector-payload 0.1.34 → 0.1.36

package/dist/components/NitrogenComponentInventoryNavLink.js

@@ -0,0 +1,75 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+const groupSelector = '#nav-group-Nitrogen .nav-group__content';
+export default function NitrogenComponentInventoryNavLink() {
+    const pathname = usePathname();
+    const isActive = pathname === '/admin/nitrogen/components' || pathname?.startsWith('/admin/nitrogen/components/');
+    useEffect(() => {
+        const linkId = 'nitrogen-components-nav-link';
+        const renderLink = () => {
+            const target = document.querySelector(groupSelector);
+            if (!target) {
+                return;
+            }
+            const existing = document.getElementById(linkId);
+            if (existing) {
+                existing.remove();
+            }
+            const link = document.createElement('a');
+            link.id = linkId;
+            link.href = '/admin/nitrogen/components';
+            link.textContent = 'Nitrogen Components';
+            link.style.alignItems = 'center';
+            link.style.color = 'inherit';
+            link.style.display = 'flex';
+            link.style.fontSize = '18px';
+            link.style.fontWeight = isActive ? '700' : '500';
+            link.style.gap = '12px';
+            link.style.minHeight = '40px';
+            link.style.opacity = isActive ? '1' : '0.92';
+            link.style.padding = '6px 0';
+            link.style.textDecoration = 'none';
+            const icon = document.createElement('span');
+            icon.ariaHidden = 'true';
+            icon.style.color = '#6b7280';
+            icon.style.display = 'inline-flex';
+            icon.style.fontSize = '16px';
+            icon.style.justifyContent = 'center';
+            icon.style.width = '20px';
+            icon.innerHTML = `
+        <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M4 5.5C4 4.67157 4.67157 4 5.5 4H14.5C15.3284 4 16 4.67157 16 5.5V14.5C16 15.3284 15.3284 16 14.5 16H5.5C4.67157 16 4 15.3284 4 14.5V5.5Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+          />
+          <path d="M7 8H13" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" />
+          <path d="M7 10.5H13" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" />
+          <path d="M7 13H10.5" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" />
+        </svg>
+      `;
+            const label = document.createElement('span');
+            label.textContent = 'Nitrogen Components';
+            link.textContent = '';
+            link.append(icon, label);
+            if (isActive) {
+                link.setAttribute('aria-current', 'page');
+            }
+            target.append(link);
+        };
+        renderLink();
+        const observer = new MutationObserver(() => {
+            renderLink();
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+            document.getElementById(linkId)?.remove();
+        };
+    }, [isActive]);
+    return null;
+}

package/dist/components/NitrogenComponentInventoryReindexButton.d.ts

@@ -0,0 +1 @@
+export default function NitrogenComponentInventoryReindexButton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/NitrogenComponentInventoryReindexButton.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+const statusStorageKey = 'nitrogen-component-inventory:last-reindex-status';
+export default function NitrogenComponentInventoryReindexButton() {
+    const [loading, setLoading] = useState(false);
+    const [status, setStatus] = useState(null);
+    useEffect(() => {
+        const rawValue = window.sessionStorage.getItem(statusStorageKey);
+        if (!rawValue) {
+            return;
+        }
+        try {
+            setStatus(JSON.parse(rawValue));
+        }
+        catch {
+            window.sessionStorage.removeItem(statusStorageKey);
+        }
+    }, []);
+    function persistStatus(nextStatus) {
+        setStatus(nextStatus);
+        window.sessionStorage.setItem(statusStorageKey, JSON.stringify(nextStatus));
+    }
+    async function handleClick() {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/nitrogen/v1/component-inventory/reindex', {
+                method: 'POST',
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                persistStatus({
+                    kind: 'error',
+                    message: data?.error || 'Failed to reindex component inventory.',
+                    timestamp: new Date().toISOString(),
+                });
+                return;
+            }
+            persistStatus({
+                kind: 'success',
+                message: `Reindexed ${data.documentCount} documents and ${data.usageCount} component usages.`,
+                timestamp: new Date().toISOString(),
+            });
+            window.location.reload();
+        }
+        catch (error) {
+            console.error(error);
+            persistStatus({
+                kind: 'error',
+                message: 'Failed to reindex component inventory.',
+                timestamp: new Date().toISOString(),
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    function clearStatus() {
+        setStatus(null);
+        window.sessionStorage.removeItem(statusStorageKey);
+    }
+    return (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }, children: _jsx("button", { type: "button", onClick: handleClick, disabled: loading, style: {
+                        border: 'none',
+                        borderRadius: 6,
+                        background: '#171717',
+                        color: '#fff',
+                        cursor: loading ? 'wait' : 'pointer',
+                        fontSize: 14,
+                        fontWeight: 600,
+                        padding: '10px 14px',
+                    }, children: loading ? 'Reindexing...' : 'Reindex Components' }) }), status ? (_jsxs("div", { style: {
+                    alignItems: 'start',
+                    background: status.kind === 'success' ? '#ecfdf5' : '#fef2f2',
+                    border: `1px solid ${status.kind === 'success' ? '#a7f3d0' : '#fecaca'}`,
+                    borderRadius: 10,
+                    color: status.kind === 'success' ? '#065f46' : '#991b1b',
+                    display: 'grid',
+                    gap: 6,
+                    gridTemplateColumns: '1fr auto',
+                    padding: '12px 14px',
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700 }, children: status.kind === 'success' ? 'Last Reindex Completed' : 'Reindex Failed' }), _jsx("div", { style: { fontSize: 13, marginTop: 2 }, children: status.message }), _jsx("div", { style: { fontSize: 12, marginTop: 4, opacity: 0.75 }, children: new Date(status.timestamp).toLocaleString() })] }), _jsx("button", { type: "button", onClick: clearStatus, style: {
+                            appearance: 'none',
+                            background: 'transparent',
+                            border: 'none',
+                            color: 'inherit',
+                            cursor: 'pointer',
+                            fontSize: 12,
+                            fontWeight: 700,
+                            padding: 0,
+                        }, children: "Dismiss" })] })) : null] }));
+}

package/dist/components/NitrogenComponentInventoryView.d.ts

@@ -0,0 +1,2 @@
+import type { AdminViewServerProps } from 'payload';
+export default function NitrogenComponentInventoryView({ clientConfig, initPageResult, i18n, locale, params, searchParams, viewActions, viewType, }: AdminViewServerProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/NitrogenComponentInventoryView.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-expect-error The consuming Payload app provides @payloadcms/next at runtime.
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { findAllDocs, NITROGEN_COMPONENT_CATALOG_COLLECTION, NITROGEN_COMPONENT_USAGE_COLLECTION, } from '../inventory/indexing';
+import NitrogenComponentInventoryClient from './NitrogenComponentInventoryClient';
+import NitrogenComponentInventoryReindexButton from './NitrogenComponentInventoryReindexButton';
+export default async function NitrogenComponentInventoryView({ clientConfig, initPageResult, i18n, locale, params, searchParams, viewActions, viewType, }) {
+    const payload = initPageResult.req.payload;
+    const [catalogDocs, usageDocs] = await Promise.all([
+        findAllDocs(payload, NITROGEN_COMPONENT_CATALOG_COLLECTION),
+        findAllDocs(payload, NITROGEN_COMPONENT_USAGE_COLLECTION),
+    ]);
+    const catalogByName = new Map(catalogDocs.map((doc) => [doc.componentName, doc.definition]));
+    const usageByName = new Map();
+    for (const usageDoc of usageDocs) {
+        const docs = usageByName.get(usageDoc.componentName) || [];
+        docs.push(usageDoc);
+        usageByName.set(usageDoc.componentName, docs);
+    }
+    const componentNames = Array.from(new Set([...catalogByName.keys(), ...usageByName.keys()])).sort((a, b) => a.localeCompare(b));
+    const components = componentNames.map((componentName) => ({
+        componentName,
+        definition: catalogByName.get(componentName),
+        isUnknown: !catalogByName.get(componentName),
+        usages: usageByName.get(componentName) || [],
+    }));
+    return (_jsx(DefaultTemplate, { i18n: i18n, locale: locale, params: params, payload: payload, req: initPageResult.req, searchParams: searchParams, user: initPageResult.req.user, viewActions: viewActions, viewType: viewType, visibleEntities: initPageResult.visibleEntities, children: _jsxs("div", { style: { padding: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12, marginBottom: 24 }, children: [_jsx("h1", { style: { margin: 0, fontSize: 28 }, children: "Nitrogen Components" }), _jsx("p", { style: { margin: 0, color: '#4b5563', maxWidth: 920 }, children: "Inventory view for the registered Nitrogen component manifest and all indexed usages across Nitrogen-enabled documents and templates." }), _jsx(NitrogenComponentInventoryReindexButton, {})] }), _jsx(NitrogenComponentInventoryClient, { adminRoute: clientConfig.routes.admin, components: components })] }) }));
+}

package/dist/components/NitrogenDataViewer.d.ts

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

package/dist/components/NitrogenDataViewer.js

@@ -1,7 +1,8 @@
-'use client';
-import dynamic from 'next/dynamic';
-const NitrogenDataViewer = dynamic(() => import('./NitrogenDataViewerRuntime'), {
-    loading: () => null,
-    ssr: false,
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import NitrogenDataViewerRuntime from './NitrogenDataViewerRuntime';
+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, initialValue: value, label: label, path: path }));
+};
 export default NitrogenDataViewer;

package/dist/components/NitrogenDataViewerRuntime.d.ts

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

package/dist/components/NitrogenDataViewerRuntime.js

@@ -1,7 +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';
+import { useField } from '@payloadcms/ui';
+import { useCallback, useMemo, useState } from 'react';
 function updateAtPath(root, path, newValue) {
     if (path.length === 0)
         return newValue;
@@ -74,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) {
@@ -92,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;
 }
@@ -281,73 +310,122 @@ function ensureStyles() {
   `;
     document.head.appendChild(style);
 }
-const NitrogenDataViewerRuntime = ({ path, field }) => {
-    const { value, setValue } = useField({ path });
+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 [pasted, setPasted] = 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 handlePaste = useCallback(() => {
+    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) => {
-            try {
-                const parsedValue = JSON.parse(text);
-                setValue(parsedValue);
-                setPasted(true);
-                setTimeout(() => setPasted(false), 2000);
-            }
-            catch {
-                // ignore invalid JSON
-            }
+            applyPastedJson(text);
+        }, () => {
+            setPasteError('Clipboard access was blocked. Paste manually below.');
+            setShowPastePanel(true);
         });
-    }, [setValue]);
+    }, [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: (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 }))] }));
+    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',
+                            borderBottom: collapsed ? 'none' : '1px solid var(--njv-border)',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '12px 16px',
+                            width: '100%',
+                        }, 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)',
+                                    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/components/NitrogenNavGroup.d.ts

@@ -0,0 +1 @@
+export default function NitrogenNavGroup(): import("react/jsx-runtime").JSX.Element;