@nitrogenbuilder/connector-payload 0.1.18 → 0.1.20

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,86 +1,6 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-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)}`;
-    const buttonStyle = {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "8px 16px",
-        background: "#6366f1",
-        color: "#fff",
-        borderRadius: "4px",
-        textDecoration: "none",
-        fontSize: "14px",
-        fontWeight: 500,
-    };
-    return (_jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [slug && frontendUrl && (_jsx("a", { href: `${frontendUrl}/${slug}`, target: "_blank", rel: "noopener noreferrer", style: {
-                    ...buttonStyle,
-                    background: "#10b981",
-                }, children: "View Page" })), hasDevelopmentUrl ? (_jsxs(_Fragment, { children: [_jsx("a", { href: baseHref, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: "Edit (Live)" }), _jsx("a", { href: `${baseHref}&development=true`, target: "_blank", rel: "noopener noreferrer", style: {
-                            ...buttonStyle,
-                            background: "#374151",
-                        }, children: "Edit (Dev)" })] })) : (_jsx("a", { href: baseHref, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, 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,55 +1,6 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-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]);
-    console.log('[NitrogenViewButton] mounted', { slug, frontendUrl, collection });
-    if (!slug || !frontendUrl) {
-        console.log('[NitrogenViewButton] hidden — slug:', slug, 'frontendUrl:', frontendUrl);
-        return _jsx("span", { style: { color: 'red', fontSize: '12px' }, children: "View button: waiting for data..." });
-    }
-    const href = `${frontendUrl}/${slug}`;
-    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "8px 16px",
-            background: "#10b981",
-            color: "#fff",
-            borderRadius: "4px",
-            textDecoration: "none",
-            fontSize: "14px",
-            fontWeight: 500,
-        }, 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" }));
+};