@nitrogenbuilder/connector-payload 0.1.39 → 0.1.40

package/dist/components/NitrogenComponentInventoryClient.d.ts

@@ -8,6 +8,7 @@ type InventoryClientProps = {
         isUnknown: boolean;
         usages: NitrogenComponentUsageDoc[];
     }>;
+    previewUrl: string;
 };
-export default function NitrogenComponentInventoryClient({ adminRoute, components, }: InventoryClientProps): import("react/jsx-runtime").JSX.Element;
+export default function NitrogenComponentInventoryClient({ adminRoute, components, previewUrl, }: InventoryClientProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NitrogenComponentInventoryClient.js

@@ -1,7 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { formatAdminURL } from 'payload/shared';
+const EDITABLE_PROP_TYPES = new Set([
+    'boolean',
+    'color',
+    'color-select',
+    'color-swatch',
+    'enum',
+    'enum-inline',
+    'number',
+    'string',
+    'url',
+    'wysiwyg',
+]);
 function formatSourceLabel(slug) {
     if (slug === 'nitrogen-templates') {
         return 'Nitrogen Templates';
@@ -12,6 +24,86 @@ function formatSourceLabel(slug) {
         .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
         .join(' ');
 }
+function getPreviewTargetOrigin(previewUrl) {
+    try {
+        return new URL(previewUrl).origin;
+    }
+    catch {
+        return '*';
+    }
+}
+function normalizeManifestOptions(options) {
+    if (!options?.length) {
+        return undefined;
+    }
+    return options.map((option) => {
+        if (typeof option === 'string') {
+            return {
+                label: option,
+                value: option,
+            };
+        }
+        return {
+            label: option.label || option.value,
+            value: option.value,
+        };
+    });
+}
+function isEditableProp(prop) {
+    return EDITABLE_PROP_TYPES.has(prop.type);
+}
+function collectEditablePropOptions(definition) {
+    if (!definition) {
+        return [];
+    }
+    const options = [];
+    Object.values(definition.categories).forEach((category) => {
+        Object.values(category.groups).forEach((group) => {
+            Object.entries(group.props).forEach(([propName, prop]) => {
+                if (!isEditableProp(prop)) {
+                    return;
+                }
+                options.push({
+                    defaultValue: prop.default,
+                    label: `${category.label} / ${group.label} / ${prop.label || propName}`,
+                    options: normalizeManifestOptions(prop.options),
+                    path: `${group.key}.${propName}`,
+                    type: prop.type,
+                });
+            });
+        });
+    });
+    return options;
+}
+function stringifyPropValue(value, propType) {
+    if (propType === 'boolean') {
+        return Boolean(value);
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return String(value);
+    }
+    return '';
+}
+function coercePropValue(value, propType) {
+    if (propType === 'boolean') {
+        return Boolean(value);
+    }
+    if (propType === 'number') {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    return String(value);
+}
+function getDefaultDraft(option) {
+    return {
+        propPath: option?.path || '',
+        status: 'idle',
+        value: option ? stringifyPropValue(option.defaultValue, option.type) : '',
+    };
+}
 function renderProp(name, prop, depth = 0) {
     return (_jsxs("div", { style: { paddingLeft: depth * 16 }, children: [_jsxs("div", { style: { fontFamily: 'monospace', fontSize: 12, lineHeight: 1.5 }, children: [_jsx("strong", { children: name }), " ", _jsxs("span", { style: { color: '#6b7280' }, children: ["(", prop.type, ")"] }), prop.label ? _jsxs("span", { style: { color: '#6b7280' }, children: [" - ", prop.label] }) : null] }), prop.props ? (_jsx("div", { style: { marginTop: 4 }, children: Object.entries(prop.props).map(([childName, childProp]) => renderProp(childName, childProp, depth + 1)) })) : null] }, `${name}-${depth}`));
 }
@@ -34,51 +126,22 @@ function buttonStyle(kind) {
         padding: '8px 12px',
     };
 }
-function buildRelationshipSummaries(usages, getRelationshipName) {
-    const relationshipMap = new Map();
-    usages.forEach((usage) => {
-        const relationshipName = getRelationshipName(usage);
-        if (!relationshipName) {
-            return;
-        }
-        const entry = relationshipMap.get(relationshipName) ?? {
-            documentKeys: new Set(),
-            occurrenceCount: 0,
-        };
-        entry.occurrenceCount += 1;
-        entry.documentKeys.add(`${usage.sourceCollection}:${usage.sourceDocumentId}`);
-        relationshipMap.set(relationshipName, entry);
-    });
-    return Array.from(relationshipMap.entries())
-        .map(([componentName, entry]) => ({
-        componentName,
-        documentCount: entry.documentKeys.size,
-        occurrenceCount: entry.occurrenceCount,
-    }))
-        .sort((a, b) => {
-        if (b.documentCount !== a.documentCount) {
-            return b.documentCount - a.documentCount;
-        }
-        if (b.occurrenceCount !== a.occurrenceCount) {
-            return b.occurrenceCount - a.occurrenceCount;
-        }
-        return a.componentName.localeCompare(b.componentName);
-    });
-}
-function renderRelationshipList(title, summaries, emptyMessage) {
-    return (_jsxs("div", { style: { marginTop: 16 }, children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: title }), summaries.length ? (_jsx("div", { style: { display: 'grid', gap: 8 }, children: summaries.map((summary) => (_jsxs("div", { style: {
-                        border: '1px solid #e5e7eb',
-                        borderRadius: 6,
-                        padding: 12,
-                    }, children: [_jsx("div", { style: { fontWeight: 600 }, children: summary.componentName }), _jsxs("div", { style: { color: '#6b7280', fontSize: 12, marginTop: 2 }, children: [summary.documentCount, " doc", summary.documentCount === 1 ? '' : 's', " \u00B7", ' ', summary.occurrenceCount, " occurrence", summary.occurrenceCount === 1 ? '' : 's'] })] }, `${title}-${summary.componentName}`))) })) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: emptyMessage }))] }));
-}
-export default function NitrogenComponentInventoryClient({ adminRoute, components, }) {
+export default function NitrogenComponentInventoryClient({ adminRoute, components, previewUrl, }) {
     const sourceFilterRef = useRef(null);
+    const previewFrameRefs = useRef({});
     const allComponentNames = useMemo(() => components.map(({ componentName }) => componentName), [components]);
     const [searchValue, setSearchValue] = useState('');
     const [sourceSearchValue, setSourceSearchValue] = useState('');
     const [selectedSources, setSelectedSources] = useState([]);
     const [openNames, setOpenNames] = useState({});
+    const [previewStates, setPreviewStates] = useState({});
+    const [propUpdateDrafts, setPropUpdateDrafts] = useState({});
+    const editablePropOptionsByComponent = useMemo(() => {
+        return new Map(components.map((component) => [
+            component.componentName,
+            collectEditablePropOptions(component.definition),
+        ]));
+    }, [components]);
     const sourceOptions = useMemo(() => {
         const collectionOptions = new Map();
         const documentOptions = new Map();
@@ -140,15 +203,6 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
             return !hasSourceFilter || component.usages.length > 0;
         });
     }, [components, selectedSources]);
-    const allSourceFilteredUsages = useMemo(() => sourceFilteredComponents.flatMap((component) => component.usages), [sourceFilteredComponents]);
-    const containsByComponent = useMemo(() => {
-        const componentMap = new Map();
-        sourceFilteredComponents.forEach(({ componentName }) => {
-            const summaries = buildRelationshipSummaries(allSourceFilteredUsages.filter((usage) => usage.parentComponentName === componentName), (usage) => usage.componentName);
-            componentMap.set(componentName, summaries);
-        });
-        return componentMap;
-    }, [allSourceFilteredUsages, sourceFilteredComponents]);
     const filteredComponents = useMemo(() => {
         const normalizedQuery = searchValue.trim().toLowerCase();
         return sourceFilteredComponents.filter((component) => {
@@ -170,6 +224,22 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
             document.removeEventListener('mousedown', handlePointerDown);
         };
     }, []);
+    useEffect(() => {
+        setPropUpdateDrafts((current) => {
+            const next = { ...current };
+            Object.entries(next).forEach(([componentName, draft]) => {
+                if (!draft.result) {
+                    return;
+                }
+                next[componentName] = {
+                    ...draft,
+                    result: undefined,
+                    status: 'idle',
+                };
+            });
+            return next;
+        });
+    }, [selectedSources]);
     const expandAll = () => {
         setOpenNames((current) => ({
             ...current,
@@ -196,6 +266,154 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
         : selectedSourceLabels.length === 1
             ? selectedSourceLabels[0]
             : `${selectedSourceLabels.length} sources`;
+    const postPreviewDataToFrame = useCallback((componentName, data) => {
+        if (!previewUrl || !data) {
+            return;
+        }
+        const frameWindow = previewFrameRefs.current[componentName]?.contentWindow;
+        if (!frameWindow) {
+            return;
+        }
+        frameWindow.postMessage({
+            componentName,
+            payload: data,
+            type: 'nitrogen-component-preview',
+        }, getPreviewTargetOrigin(previewUrl));
+    }, [previewUrl]);
+    const loadPreviewData = useCallback(async (componentName, usages) => {
+        if (!previewUrl) {
+            return;
+        }
+        setPreviewStates((current) => {
+            if (current[componentName]?.status === 'loading' || current[componentName]?.data) {
+                return current;
+            }
+            return {
+                ...current,
+                [componentName]: {
+                    status: 'loading',
+                },
+            };
+        });
+        const previewUsage = usages[0];
+        const params = new URLSearchParams({
+            componentName,
+        });
+        if (previewUsage) {
+            params.set('sourceCollection', previewUsage.sourceCollection);
+            params.set('sourceDocumentId', previewUsage.sourceDocumentId);
+            if (previewUsage.moduleId) {
+                params.set('moduleId', previewUsage.moduleId);
+            }
+        }
+        try {
+            const response = await fetch(`/api/nitrogen/v1/component-inventory/preview-data?${params}`);
+            const data = (await response.json());
+            if (!response.ok || !('success' in data)) {
+                throw new Error('error' in data && data.error ? data.error : 'Failed to load preview data.');
+            }
+            setPreviewStates((current) => ({
+                ...current,
+                [componentName]: {
+                    data,
+                    status: 'loaded',
+                },
+            }));
+            window.setTimeout(() => postPreviewDataToFrame(componentName, data), 0);
+        }
+        catch (error) {
+            setPreviewStates((current) => ({
+                ...current,
+                [componentName]: {
+                    error: error instanceof Error ? error.message : 'Failed to load preview data.',
+                    status: 'error',
+                },
+            }));
+        }
+    }, [postPreviewDataToFrame, previewUrl]);
+    useEffect(() => {
+        filteredComponents.forEach((component) => {
+            if (openNames[component.componentName]) {
+                void loadPreviewData(component.componentName, component.usages);
+            }
+        });
+    }, [filteredComponents, loadPreviewData, openNames]);
+    useEffect(() => {
+        function handlePreviewReady(event) {
+            if (!previewUrl || event.origin !== getPreviewTargetOrigin(previewUrl)) {
+                return;
+            }
+            const data = event.data;
+            if (data.type !== 'nitrogen-component-preview-ready' || typeof data.componentName !== 'string') {
+                return;
+            }
+            postPreviewDataToFrame(data.componentName, previewStates[data.componentName]?.data);
+        }
+        window.addEventListener('message', handlePreviewReady);
+        return () => {
+            window.removeEventListener('message', handlePreviewReady);
+        };
+    }, [postPreviewDataToFrame, previewStates, previewUrl]);
+    function updatePropDraft(componentName, nextDraft) {
+        setPropUpdateDrafts((current) => ({
+            ...current,
+            [componentName]: {
+                ...(current[componentName] || getDefaultDraft()),
+                ...nextDraft,
+            },
+        }));
+    }
+    async function runPropUpdate(componentName, editableProps, mode, usages) {
+        const draft = propUpdateDrafts[componentName] || getDefaultDraft(editableProps[0]);
+        const selectedProp = editableProps.find((option) => option.path === draft.propPath);
+        if (!selectedProp) {
+            updatePropDraft(componentName, {
+                error: 'Select a supported prop first.',
+                status: 'error',
+            });
+            return;
+        }
+        updatePropDraft(componentName, {
+            error: undefined,
+            status: mode === 'apply' ? 'applying' : 'previewing',
+        });
+        try {
+            const response = await fetch(`/api/nitrogen/v1/component-inventory/prop-update/${mode}`, {
+                body: JSON.stringify({
+                    componentName,
+                    propPath: selectedProp.path,
+                    sourceFilters: selectedSources,
+                    value: coercePropValue(draft.value, selectedProp.type),
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            const result = (await response.json());
+            if (!response.ok || !('success' in result)) {
+                throw new Error('error' in result && result.error ? result.error : 'Prop update failed.');
+            }
+            updatePropDraft(componentName, {
+                result,
+                status: mode === 'apply' ? 'applied' : 'ready',
+            });
+            if (mode === 'apply') {
+                setPreviewStates((current) => {
+                    const next = { ...current };
+                    delete next[componentName];
+                    return next;
+                });
+                void loadPreviewData(componentName, usages);
+            }
+        }
+        catch (error) {
+            updatePropDraft(componentName, {
+                error: error instanceof Error ? error.message : 'Prop update failed.',
+                status: 'error',
+            });
+        }
+    }
     return (_jsxs("div", { style: { display: 'grid', gap: 16 }, children: [_jsxs("div", { style: {
                     alignItems: 'center',
                     display: 'flex',
@@ -267,8 +485,13 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
                                                                                     }, children: option.kind === 'collection' ? 'Collection' : 'Item' })] }), _jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: option.description })] })] }, option.key));
                                                     })) : (_jsx("p", { style: { color: '#6b7280', fontSize: 13, margin: 0 }, children: "No sources match." })) })] }) })] }), _jsx("button", { onClick: expandAll, style: buttonStyle('secondary'), type: "button", children: "Expand All" }), _jsx("button", { onClick: collapseAll, style: buttonStyle('secondary'), type: "button", children: "Collapse All" })] })] }), filteredComponents.map(({ componentName, definition, isUnknown, usages }) => {
                 const isOpen = Boolean(openNames[componentName]);
-                const usedInside = buildRelationshipSummaries(usages, (usage) => usage.parentComponentName);
-                const contains = containsByComponent.get(componentName) ?? [];
+                const editableProps = editablePropOptionsByComponent.get(componentName) || [];
+                const propDraft = propUpdateDrafts[componentName] || getDefaultDraft(editableProps[0]);
+                const selectedEditableProp = editableProps.find((option) => option.path === propDraft.propPath);
+                const previewState = previewStates[componentName] || { status: 'idle' };
+                const componentPreviewUrl = previewUrl
+                    ? `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}componentName=${encodeURIComponent(componentName)}`
+                    : '';
                 return (_jsxs("section", { style: {
                         background: '#fff',
                         border: '1px solid #e5e7eb',
@@ -289,21 +512,105 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
                                 padding: 16,
                                 textAlign: 'left',
                                 width: '100%',
-                            }, type: "button", children: [_jsxs("div", { style: { display: 'grid', gap: 4 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("span", { style: { fontSize: 16, fontWeight: 700 }, children: componentName }), _jsxs("span", { style: { color: '#6b7280', fontSize: 13, fontWeight: 500 }, children: [usages.length, " usage", usages.length === 1 ? '' : 's'] }), contains.length ? (_jsxs("span", { style: { color: '#6b7280', fontSize: 13, fontWeight: 500 }, children: ["Contains ", contains.length, " component", contains.length === 1 ? '' : 's'] })) : null, isUnknown ? (_jsx("span", { style: { color: '#b45309', fontSize: 13, fontWeight: 600 }, children: "Missing from manifest" })) : null] }), definition ? (_jsxs("div", { style: { color: '#6b7280', fontSize: 13 }, children: [definition.sidebarCategory || 'Uncategorized', definition.scope ? ` - ${definition.scope}` : ''] })) : null] }), _jsx("span", { style: { color: '#6b7280', fontSize: 18, lineHeight: 1 }, children: isOpen ? '−' : '+' })] }), isOpen ? (_jsxs("div", { style: {
+                            }, type: "button", children: [_jsxs("div", { style: { display: 'grid', gap: 4 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("span", { style: { fontSize: 16, fontWeight: 700 }, children: componentName }), _jsxs("span", { style: { color: '#6b7280', fontSize: 13, fontWeight: 500 }, children: [usages.length, " usage", usages.length === 1 ? '' : 's'] }), isUnknown ? (_jsx("span", { style: { color: '#b45309', fontSize: 13, fontWeight: 600 }, children: "Missing from manifest" })) : null] }), definition ? (_jsxs("div", { style: { color: '#6b7280', fontSize: 13 }, children: [definition.sidebarCategory || 'Uncategorized', definition.scope ? ` - ${definition.scope}` : ''] })) : null] }), _jsx("span", { style: { color: '#6b7280', fontSize: 18, lineHeight: 1 }, children: isOpen ? '−' : '+' })] }), isOpen ? (_jsxs("div", { style: {
                                 borderTop: '1px solid #e5e7eb',
                                 display: 'grid',
                                 gap: 0,
-                                gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
-                            }, children: [_jsxs("div", { style: { borderRight: '1px solid #e5e7eb', padding: 16 }, children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: "Used On" }), usages.length ? (_jsx("div", { style: { display: 'grid', gap: 8 }, children: usages.map((usage) => (_jsxs("a", { href: formatAdminURL({
-                                                    adminRoute,
-                                                    path: `/collections/${usage.sourceCollection}/${usage.sourceDocumentId}`,
-                                                }), style: {
-                                                    border: '1px solid #e5e7eb',
-                                                    borderRadius: 6,
-                                                    color: 'inherit',
+                                gridTemplateColumns: 'minmax(0, 1.45fr) minmax(300px, 0.9fr)',
+                            }, children: [_jsxs("div", { style: {
+                                        borderRight: '1px solid #e5e7eb',
+                                        display: 'grid',
+                                        gap: 18,
+                                        padding: 16,
+                                    }, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: "Used On" }), usages.length ? (_jsx("div", { style: { display: 'grid', gap: 8 }, children: usages.map((usage) => (_jsxs("a", { href: formatAdminURL({
+                                                            adminRoute,
+                                                            path: `/collections/${usage.sourceCollection}/${usage.sourceDocumentId}`,
+                                                        }), style: {
+                                                            border: '1px solid #e5e7eb',
+                                                            borderRadius: 6,
+                                                            color: 'inherit',
+                                                            display: 'block',
+                                                            padding: 12,
+                                                            textDecoration: 'none',
+                                                        }, children: [_jsx("div", { style: { fontWeight: 600 }, children: usage.sourceTitle || usage.sourceSlug || usage.sourceDocumentId }), _jsxs("div", { style: { color: '#6b7280', fontSize: 12, marginTop: 2 }, children: [usage.sourceCollection, " - ", usage.modulePath] })] }, usage.usageKey))) })) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "No indexed usages yet." }))] }), _jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: "Props" }), definition ? (Object.values(definition.categories).map((category) => renderCategory(category))) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "No manifest definition available." }))] }), _jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: "Update Prop Across Site" }), editableProps.length ? (_jsxs("div", { style: {
+                                                        border: '1px solid #e5e7eb',
+                                                        borderRadius: 8,
+                                                        display: 'grid',
+                                                        gap: 10,
+                                                        padding: 12,
+                                                    }, children: [_jsxs("label", { style: { display: 'grid', gap: 6, fontSize: 13, fontWeight: 600 }, children: ["Prop", _jsx("select", { onChange: (event) => {
+                                                                        const nextProp = editableProps.find((option) => option.path === event.target.value);
+                                                                        updatePropDraft(componentName, {
+                                                                            error: undefined,
+                                                                            propPath: event.target.value,
+                                                                            result: undefined,
+                                                                            status: 'idle',
+                                                                            value: nextProp
+                                                                                ? stringifyPropValue(nextProp.defaultValue, nextProp.type)
+                                                                                : '',
+                                                                        });
+                                                                    }, style: {
+                                                                        border: '1px solid #d1d5db',
+                                                                        borderRadius: 6,
+                                                                        color: '#111827',
+                                                                        maxWidth: 520,
+                                                                        padding: '8px 10px',
+                                                                        width: '100%',
+                                                                    }, value: propDraft.propPath, children: editableProps.map((option) => (_jsx("option", { value: option.path, children: option.label }, option.path))) })] }), selectedEditableProp?.type === 'boolean' ? (_jsxs("label", { style: { alignItems: 'center', display: 'flex', gap: 8, fontSize: 13 }, children: [_jsx("input", { checked: Boolean(propDraft.value), onChange: (event) => updatePropDraft(componentName, {
+                                                                        result: undefined,
+                                                                        status: 'idle',
+                                                                        value: event.target.checked,
+                                                                    }), type: "checkbox" }), "Value"] })) : selectedEditableProp?.options?.length ? (_jsxs("label", { style: { display: 'grid', gap: 6, fontSize: 13, fontWeight: 600 }, children: ["Value", _jsx("select", { onChange: (event) => updatePropDraft(componentName, {
+                                                                        result: undefined,
+                                                                        status: 'idle',
+                                                                        value: event.target.value,
+                                                                    }), style: {
+                                                                        border: '1px solid #d1d5db',
+                                                                        borderRadius: 6,
+                                                                        color: '#111827',
+                                                                        maxWidth: 520,
+                                                                        padding: '8px 10px',
+                                                                        width: '100%',
+                                                                    }, value: String(propDraft.value), children: selectedEditableProp.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })) : (_jsxs("label", { style: { display: 'grid', gap: 6, fontSize: 13, fontWeight: 600 }, children: ["Value", _jsx("input", { onChange: (event) => updatePropDraft(componentName, {
+                                                                        result: undefined,
+                                                                        status: 'idle',
+                                                                        value: event.target.value,
+                                                                    }), style: {
+                                                                        border: '1px solid #d1d5db',
+                                                                        borderRadius: 6,
+                                                                        color: '#111827',
+                                                                        maxWidth: 520,
+                                                                        padding: '8px 10px',
+                                                                        width: '100%',
+                                                                    }, type: selectedEditableProp?.type === 'number' ? 'number' : 'text', value: String(propDraft.value) })] })), _jsxs("div", { style: { color: '#6b7280', fontSize: 12 }, children: ["Scope: ", selectedSources.length ? sourceFilterLabel : 'all indexed usages'] }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("button", { disabled: propDraft.status === 'previewing' || propDraft.status === 'applying', onClick: () => void runPropUpdate(componentName, editableProps, 'preview', usages), style: buttonStyle('secondary'), type: "button", children: propDraft.status === 'previewing' ? 'Checking...' : 'Dry Run' }), _jsx("button", { disabled: propDraft.status === 'previewing' ||
+                                                                        propDraft.status === 'applying' ||
+                                                                        !propDraft.result, onClick: () => void runPropUpdate(componentName, editableProps, 'apply', usages), style: {
+                                                                        ...buttonStyle('primary'),
+                                                                        opacity: propDraft.result ? 1 : 0.5,
+                                                                    }, type: "button", children: propDraft.status === 'applying' ? 'Applying...' : 'Apply Update' })] }), propDraft.error ? (_jsx("p", { style: { color: '#b91c1c', fontSize: 13, margin: 0 }, children: propDraft.error })) : null, propDraft.result ? (_jsxs("div", { style: { color: '#374151', fontSize: 13 }, children: [propDraft.result.mode === 'apply' ? 'Updated' : 'Would update', ' ', propDraft.result.occurrenceCount, " occurrence", propDraft.result.occurrenceCount === 1 ? '' : 's', " in", ' ', propDraft.result.documentCount, " document", propDraft.result.documentCount === 1 ? '' : 's', "."] })) : null] })) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "No scalar props are available for bulk updates." }))] })] }), _jsxs("div", { style: { padding: 16 }, children: [_jsxs("div", { style: {
+                                                alignItems: 'center',
+                                                display: 'flex',
+                                                gap: 12,
+                                                justifyContent: 'space-between',
+                                                marginBottom: 10,
+                                            }, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: 0, fontSize: 15 }, children: "Preview" }), previewState.data?.source ? (_jsxs("div", { style: { color: '#6b7280', fontSize: 12, marginTop: 2 }, children: ["Rendering saved usage from ", previewState.data.source.title || previewState.data.source.documentId] })) : null] }), previewState.status === 'loading' ? (_jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: "Loading preview..." })) : null] }), !previewUrl ? (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "Configure a Nitrogen development or frontend URL to enable component previews." })) : previewState.status === 'error' ? (_jsx("p", { style: { color: '#b91c1c', margin: 0 }, children: previewState.error })) : (_jsx("div", { style: {
+                                                background: '#f9fafb',
+                                                border: '1px solid #e5e7eb',
+                                                borderRadius: 8,
+                                                overflow: 'hidden',
+                                                position: 'relative',
+                                                width: '100%',
+                                                aspectRatio: '4 / 3',
+                                            }, children: _jsx("iframe", { ref: (element) => {
+                                                    previewFrameRefs.current[componentName] = element;
+                                                }, onLoad: () => postPreviewDataToFrame(componentName, previewState.data), src: componentPreviewUrl, style: {
+                                                    border: 0,
                                                     display: 'block',
-                                                    padding: 12,
-                                                    textDecoration: 'none',
-                                                }, children: [_jsx("div", { style: { fontWeight: 600 }, children: usage.sourceTitle || usage.sourceSlug || usage.sourceDocumentId }), _jsxs("div", { style: { color: '#6b7280', fontSize: 12, marginTop: 2 }, children: [usage.sourceCollection, " - ", usage.modulePath] })] }, usage.usageKey))) })) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "No indexed usages yet." })), renderRelationshipList('Used Inside', usedInside, 'This component is not indexed inside another component.')] }), _jsxs("div", { style: { padding: 16 }, children: [renderRelationshipList('Contains', contains, 'No nested child components were indexed for this component.'), _jsx("h3", { style: { margin: '16px 0 10px', fontSize: 15 }, children: "Props" }), definition ? (Object.values(definition.categories).map((category) => renderCategory(category))) : (_jsx("p", { style: { color: '#6b7280', margin: 0 }, children: "No manifest definition available." }))] })] })) : null] }, componentName));
+                                                    height: '100%',
+                                                    left: 0,
+                                                    position: 'absolute',
+                                                    top: 0,
+                                                    width: '100%',
+                                                }, title: `${componentName} preview` }) }))] })] })) : null] }, componentName));
             })] }));
 }

package/dist/components/NitrogenComponentInventoryField.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { findAllDocs, NITROGEN_COMPONENT_CATALOG_COLLECTION, NITROGEN_COMPONENT_USAGE_COLLECTION, } from '../inventory/indexing';
+import { getNitrogenSettings } from '../endpoints/helpers';
 import NitrogenComponentInventoryClient from './NitrogenComponentInventoryClient';
 import NitrogenComponentInventoryReindexButton from './NitrogenComponentInventoryReindexButton';
+function buildComponentPreviewUrl(settings) {
+    const frontendBaseUrl = String(settings.developmentUrl || settings.frontendUrl || '').replace(/\/$/, '');
+    if (!frontendBaseUrl) {
+        return '';
+    }
+    const url = new URL('/nitrogen-component-preview', frontendBaseUrl);
+    return url.toString();
+}
 const NitrogenComponentInventoryField = async ({ payload, req, }) => {
-    const [catalogDocs, usageDocs] = await Promise.all([
+    const [catalogDocs, usageDocs, nitrogenSettings] = await Promise.all([
         findAllDocs(payload, NITROGEN_COMPONENT_CATALOG_COLLECTION),
         findAllDocs(payload, NITROGEN_COMPONENT_USAGE_COLLECTION),
+        getNitrogenSettings(payload).catch(() => null),
     ]);
     const catalogByName = new Map(catalogDocs.map((doc) => [doc.componentName, doc.definition]));
     const usageByName = new Map();
@@ -21,6 +31,6 @@ const NitrogenComponentInventoryField = async ({ payload, req, }) => {
         isUnknown: !catalogByName.get(componentName),
         usages: usageByName.get(componentName) || [],
     }));
-    return (_jsxs("div", { style: { display: 'grid', gap: 24, paddingBottom: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_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: req.payload.config.routes.admin, components: components })] }));
+    return (_jsxs("div", { style: { display: 'grid', gap: 24, paddingBottom: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_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: req.payload.config.routes.admin, components: components, previewUrl: nitrogenSettings ? buildComponentPreviewUrl(nitrogenSettings) : '' })] }));
 };
 export default NitrogenComponentInventoryField;

package/dist/components/NitrogenComponentInventoryView.js

@@ -2,13 +2,23 @@ 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 { getNitrogenSettings } from '../endpoints/helpers';
 import NitrogenComponentInventoryClient from './NitrogenComponentInventoryClient';
 import NitrogenComponentInventoryReindexButton from './NitrogenComponentInventoryReindexButton';
+function buildComponentPreviewUrl(settings) {
+    const frontendBaseUrl = String(settings.developmentUrl || settings.frontendUrl || '').replace(/\/$/, '');
+    if (!frontendBaseUrl) {
+        return '';
+    }
+    const url = new URL('/nitrogen-component-preview', frontendBaseUrl);
+    return url.toString();
+}
 export default async function NitrogenComponentInventoryView({ clientConfig, initPageResult, i18n, locale, params, searchParams, viewActions, viewType, }) {
     const payload = initPageResult.req.payload;
-    const [catalogDocs, usageDocs] = await Promise.all([
+    const [catalogDocs, usageDocs, nitrogenSettings] = await Promise.all([
         findAllDocs(payload, NITROGEN_COMPONENT_CATALOG_COLLECTION),
         findAllDocs(payload, NITROGEN_COMPONENT_USAGE_COLLECTION),
+        getNitrogenSettings(payload).catch(() => null),
     ]);
     const catalogByName = new Map(catalogDocs.map((doc) => [doc.componentName, doc.definition]));
     const usageByName = new Map();
@@ -24,5 +34,5 @@ export default async function NitrogenComponentInventoryView({ clientConfig, ini
         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 })] }) }));
+    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, previewUrl: nitrogenSettings ? buildComponentPreviewUrl(nitrogenSettings) : '' })] }) }));
 }

package/dist/endpoints/component-inventory.js

@@ -1,5 +1,199 @@
 import { requireAuth } from './helpers';
-import { reindexAllComponentInventory } from '../inventory/indexing';
+import { findAllDocs, NITROGEN_COMPONENT_CATALOG_COLLECTION, NITROGEN_COMPONENT_USAGE_COLLECTION, reindexAllComponentInventory, } from '../inventory/indexing';
+function moduleNameFromNode(node) {
+    const value = node.module;
+    if (typeof value === 'string')
+        return value;
+    if (value && typeof value === 'object' && typeof value.name === 'string') {
+        return String(value.name);
+    }
+    return null;
+}
+function cloneJson(value) {
+    return value === undefined ? value : JSON.parse(JSON.stringify(value));
+}
+function isSourceFilterMatch(usage, sourceFilters) {
+    if (!sourceFilters.length) {
+        return true;
+    }
+    return (sourceFilters.includes(`collection:${usage.sourceCollection}`) ||
+        sourceFilters.includes(`document:${usage.sourceCollection}:${usage.sourceDocumentId}`));
+}
+async function findUsageDocsForComponent(payload, componentName, sourceFilters) {
+    const usageDocs = await findAllDocs(payload, NITROGEN_COMPONENT_USAGE_COLLECTION, {
+        limit: 200,
+        where: {
+            componentName: {
+                equals: componentName,
+            },
+        },
+    });
+    return usageDocs.filter((usage) => isSourceFilterMatch(usage, sourceFilters));
+}
+function findModuleInTree(modules, componentName, moduleId) {
+    if (!Array.isArray(modules)) {
+        return null;
+    }
+    for (const maybeNode of modules) {
+        if (!maybeNode || typeof maybeNode !== 'object') {
+            continue;
+        }
+        const node = maybeNode;
+        const nodeModuleId = typeof node.id === 'string' || typeof node.id === 'number' ? String(node.id) : undefined;
+        const nodeComponentName = moduleNameFromNode(node);
+        if (nodeComponentName === componentName &&
+            (!moduleId || !nodeModuleId || nodeModuleId === moduleId)) {
+            return node;
+        }
+        const props = node.props;
+        if (props && typeof props === 'object') {
+            const children = props.children;
+            if (Array.isArray(children)) {
+                const found = findModuleInTree(children, componentName, moduleId);
+                if (found)
+                    return found;
+            }
+            else if (children && typeof children === 'object') {
+                for (const slotChildren of Object.values(children)) {
+                    const found = findModuleInTree(slotChildren, componentName, moduleId);
+                    if (found)
+                        return found;
+                }
+            }
+        }
+        if (Array.isArray(node.children)) {
+            const found = findModuleInTree(node.children, componentName, moduleId);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function setValueAtPath(target, path, value) {
+    const parts = path.split('.').filter(Boolean);
+    let cursor = target;
+    parts.forEach((part, index) => {
+        if (index === parts.length - 1) {
+            cursor[part] = value;
+            return;
+        }
+        const next = cursor[part];
+        if (!next || typeof next !== 'object' || Array.isArray(next)) {
+            cursor[part] = {};
+        }
+        cursor = cursor[part];
+    });
+}
+function updateModulesForComponent(modules, componentName, propPath, value, options) {
+    if (!Array.isArray(modules)) {
+        return 0;
+    }
+    let occurrenceCount = 0;
+    modules.forEach((maybeNode) => {
+        if (!maybeNode || typeof maybeNode !== 'object') {
+            return;
+        }
+        const node = maybeNode;
+        if (moduleNameFromNode(node) === componentName) {
+            occurrenceCount += 1;
+            if (options.apply) {
+                if (!node.props || typeof node.props !== 'object' || Array.isArray(node.props)) {
+                    node.props = {};
+                }
+                setValueAtPath(node.props, propPath, value);
+            }
+        }
+        const props = node.props;
+        if (props && typeof props === 'object') {
+            const children = props.children;
+            if (Array.isArray(children)) {
+                occurrenceCount += updateModulesForComponent(children, componentName, propPath, value, options);
+            }
+            else if (children && typeof children === 'object') {
+                Object.values(children).forEach((slotChildren) => {
+                    occurrenceCount += updateModulesForComponent(slotChildren, componentName, propPath, value, options);
+                });
+            }
+        }
+        if (Array.isArray(node.children)) {
+            occurrenceCount += updateModulesForComponent(node.children, componentName, propPath, value, options);
+        }
+    });
+    return occurrenceCount;
+}
+async function getComponentCatalogDoc(payload, componentName) {
+    const docs = await findAllDocs(payload, NITROGEN_COMPONENT_CATALOG_COLLECTION, {
+        limit: 1,
+        where: {
+            componentName: {
+                equals: componentName,
+            },
+        },
+    });
+    return docs[0];
+}
+async function runComponentPropUpdate(payload, body, mode) {
+    const componentName = typeof body.componentName === 'string' ? body.componentName.trim() : '';
+    const propPath = typeof body.propPath === 'string' ? body.propPath.trim() : '';
+    const sourceFilters = Array.isArray(body.sourceFilters)
+        ? body.sourceFilters.filter((value) => typeof value === 'string')
+        : [];
+    if (!componentName || !propPath) {
+        return Response.json({ error: 'componentName and propPath are required.' }, { status: 400 });
+    }
+    const usageDocs = await findUsageDocsForComponent(payload, componentName, sourceFilters);
+    const sourceKeys = Array.from(new Set(usageDocs.map((usage) => `${usage.sourceCollection}:${usage.sourceDocumentId}`)));
+    const documents = [];
+    let occurrenceCount = 0;
+    for (const sourceKey of sourceKeys) {
+        const [collection, ...idParts] = sourceKey.split(':');
+        const documentId = idParts.join(':');
+        try {
+            const doc = (await payload.findByID({
+                collection: collection,
+                id: documentId,
+                depth: 0,
+                overrideAccess: true,
+            }));
+            const nextNitrogenData = cloneJson(doc.nitrogenData ?? []);
+            const docOccurrenceCount = updateModulesForComponent(nextNitrogenData, componentName, propPath, body.value, { apply: mode === 'apply' });
+            if (docOccurrenceCount === 0) {
+                continue;
+            }
+            occurrenceCount += docOccurrenceCount;
+            documents.push({
+                collection,
+                documentId,
+                occurrenceCount: docOccurrenceCount,
+                title: doc.title || doc.slug || undefined,
+            });
+            if (mode === 'apply') {
+                await payload.update({
+                    collection: collection,
+                    id: documentId,
+                    data: {
+                        nitrogenData: nextNitrogenData,
+                    },
+                    depth: 0,
+                    overrideAccess: true,
+                });
+            }
+        }
+        catch (error) {
+            payload.logger.warn(`[@nitrogenbuilder/connector-payload] Could not update "${componentName}" in ${sourceKey}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    return {
+        componentName,
+        documentCount: documents.length,
+        documents,
+        mode,
+        occurrenceCount,
+        propPath,
+        success: true,
+        value: body.value,
+    };
+}
 export function createComponentInventoryEndpoints(args) {
     return [
         {
@@ -16,5 +210,84 @@ export function createComponentInventoryEndpoints(args) {
                 });
             },
         },
+        {
+            path: '/nitrogen/v1/component-inventory/preview-data',
+            method: 'get',
+            handler: async (req) => {
+                const authError = requireAuth(req);
+                if (authError)
+                    return authError;
+                const url = new URL(req.url || '', 'http://localhost');
+                const componentName = url.searchParams.get('componentName')?.trim() || '';
+                const sourceCollection = url.searchParams.get('sourceCollection')?.trim() || '';
+                const sourceDocumentId = url.searchParams.get('sourceDocumentId')?.trim() || '';
+                const moduleId = url.searchParams.get('moduleId')?.trim() || undefined;
+                if (!componentName) {
+                    return Response.json({ error: 'componentName is required.' }, { status: 400 });
+                }
+                if (sourceCollection && sourceDocumentId) {
+                    try {
+                        const doc = (await req.payload.findByID({
+                            collection: sourceCollection,
+                            id: sourceDocumentId,
+                            depth: 0,
+                            overrideAccess: true,
+                        }));
+                        const module = findModuleInTree(doc.nitrogenData, componentName, moduleId);
+                        if (module) {
+                            return Response.json({
+                                componentName,
+                                module: cloneJson(module),
+                                source: {
+                                    collection: sourceCollection,
+                                    documentId: sourceDocumentId,
+                                    title: doc.title || doc.slug || '',
+                                },
+                                success: true,
+                            });
+                        }
+                    }
+                    catch {
+                        // Fall back to a default module below.
+                    }
+                }
+                const catalogDoc = await getComponentCatalogDoc(req.payload, componentName);
+                return Response.json({
+                    componentName,
+                    definition: catalogDoc?.definition || null,
+                    module: {
+                        id: `nitrogen-component-preview-${componentName}`,
+                        module: componentName,
+                        props: {},
+                    },
+                    source: null,
+                    success: true,
+                });
+            },
+        },
+        {
+            path: '/nitrogen/v1/component-inventory/prop-update/preview',
+            method: 'post',
+            handler: async (req) => {
+                const authError = requireAuth(req);
+                if (authError)
+                    return authError;
+                const body = (await req.json?.());
+                const result = await runComponentPropUpdate(req.payload, body || {}, 'preview');
+                return result instanceof Response ? result : Response.json(result);
+            },
+        },
+        {
+            path: '/nitrogen/v1/component-inventory/prop-update/apply',
+            method: 'post',
+            handler: async (req) => {
+                const authError = requireAuth(req);
+                if (authError)
+                    return authError;
+                const body = (await req.json?.());
+                const result = await runComponentPropUpdate(req.payload, body || {}, 'apply');
+                return result instanceof Response ? result : Response.json(result);
+            },
+        },
     ];
 }

package/package.json

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