@nitrogenbuilder/connector-payload 0.1.34 → 0.1.35

package/dist/collections/NitrogenComponentCatalog.d.ts

@@ -0,0 +1,2 @@
+import type { CollectionConfig } from 'payload';
+export declare const NitrogenComponentCatalog: CollectionConfig;

package/dist/collections/NitrogenComponentCatalog.js

@@ -0,0 +1,44 @@
+const isAuthenticated = ({ req }) => !!req.user;
+export const NitrogenComponentCatalog = {
+    slug: 'nitrogen-component-catalog',
+    admin: {
+        hidden: true,
+        useAsTitle: 'componentName',
+        defaultColumns: ['componentName', 'sidebarCategory', 'scope', 'updatedAt'],
+        group: 'Nitrogen',
+    },
+    access: {
+        read: isAuthenticated,
+        create: isAuthenticated,
+        update: isAuthenticated,
+        delete: isAuthenticated,
+    },
+    fields: [
+        {
+            name: 'componentName',
+            type: 'text',
+            required: true,
+            unique: true,
+        },
+        {
+            name: 'scope',
+            type: 'text',
+        },
+        {
+            name: 'sidebarCategory',
+            type: 'text',
+        },
+        {
+            name: 'icon',
+            type: 'text',
+        },
+        {
+            name: 'definition',
+            type: 'json',
+        },
+        {
+            name: 'source',
+            type: 'text',
+        },
+    ],
+};

package/dist/collections/NitrogenComponentUsage.d.ts

@@ -0,0 +1,2 @@
+import type { CollectionConfig } from 'payload';
+export declare const NitrogenComponentUsage: CollectionConfig;

package/dist/collections/NitrogenComponentUsage.js

@@ -0,0 +1,81 @@
+const isAuthenticated = ({ req }) => !!req.user;
+export const NitrogenComponentUsage = {
+    slug: 'nitrogen-component-usage',
+    admin: {
+        hidden: true,
+        useAsTitle: 'usageKey',
+        defaultColumns: ['componentName', 'sourceCollection', 'sourceTitle', 'updatedAt'],
+        group: 'Nitrogen',
+    },
+    access: {
+        read: isAuthenticated,
+        create: isAuthenticated,
+        update: isAuthenticated,
+        delete: isAuthenticated,
+    },
+    fields: [
+        {
+            name: 'usageKey',
+            type: 'text',
+            required: true,
+            unique: true,
+        },
+        {
+            name: 'componentName',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'depth',
+            type: 'number',
+        },
+        {
+            name: 'sourceCollection',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'sourceType',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'sourceDocumentId',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'sourceTitle',
+            type: 'text',
+        },
+        {
+            name: 'sourceSlug',
+            type: 'text',
+        },
+        {
+            name: 'sourceStatus',
+            type: 'text',
+        },
+        {
+            name: 'moduleId',
+            type: 'text',
+        },
+        {
+            name: 'modulePath',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'parentComponentName',
+            type: 'text',
+        },
+        {
+            name: 'parentModuleId',
+            type: 'text',
+        },
+        {
+            name: 'parentModulePath',
+            type: 'text',
+        },
+    ],
+};

package/dist/components/LockedJsonField.d.ts

@@ -1,9 +1,2 @@
-export declare const LockedJsonField: import("react").ComponentType<{
-    path: string;
-    field: {
-        name: string;
-        admin?: {
-            description?: string;
-        };
-    };
-}>;
+import type { JSONFieldServerComponent } from 'payload';
+export declare const LockedJsonField: JSONFieldServerComponent;

package/dist/components/LockedJsonField.js

@@ -1,6 +1,7 @@
-'use client';
-import dynamic from 'next/dynamic';
-export const LockedJsonField = dynamic(() => import('./LockedJsonFieldRuntime').then((module) => module.LockedJsonFieldRuntime), {
-    loading: () => null,
-    ssr: false,
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LockedJsonFieldRuntime } from './LockedJsonFieldRuntime';
+export const LockedJsonField = ({ field, value }) => {
+    const label = typeof field.label === 'string' ? field.label : field.name;
+    const description = typeof field.admin?.description === 'string' ? field.admin.description : undefined;
+    return (_jsx(LockedJsonFieldRuntime, { description: description, label: label, value: value }));
+};

package/dist/components/LockedJsonFieldRuntime.d.ts

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

package/dist/components/LockedJsonFieldRuntime.js

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

package/dist/components/NitrogenComponentInventoryClient.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentManifestEntry } from '@nitrogenbuilder/types';
+import type { NitrogenComponentUsageDoc } from '../types';
+type InventoryClientProps = {
+    adminRoute: string;
+    components: Array<{
+        componentName: string;
+        definition?: ComponentManifestEntry;
+        isUnknown: boolean;
+        usages: NitrogenComponentUsageDoc[];
+    }>;
+};
+export default function NitrogenComponentInventoryClient({ adminRoute, components, }: InventoryClientProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NitrogenComponentInventoryClient.js

@@ -0,0 +1,309 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
+function formatSourceLabel(slug) {
+    if (slug === 'nitrogen-templates') {
+        return 'Nitrogen Templates';
+    }
+    return slug
+        .split(/[-_]/g)
+        .filter(Boolean)
+        .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+        .join(' ');
+}
+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}`));
+}
+function renderGroup(group) {
+    return (_jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h4", { style: { margin: '0 0 6px', fontSize: 14 }, children: group.label }), _jsx("div", { style: { display: 'grid', gap: 6 }, children: Object.entries(group.props).map(([propName, prop]) => renderProp(propName, prop)) })] }, group.key));
+}
+function renderCategory(category) {
+    return (_jsxs("div", { style: { marginTop: 16 }, children: [_jsx("h3", { style: { margin: '0 0 8px', fontSize: 16 }, children: category.label }), Object.values(category.groups).map((group) => renderGroup(group))] }, category.key));
+}
+function buttonStyle(kind) {
+    return {
+        appearance: 'none',
+        background: kind === 'primary' ? '#111827' : '#ffffff',
+        border: `1px solid ${kind === 'primary' ? '#111827' : '#d1d5db'}`,
+        borderRadius: 8,
+        color: kind === 'primary' ? '#ffffff' : '#111827',
+        cursor: 'pointer',
+        fontSize: 13,
+        fontWeight: 600,
+        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, }) {
+    const sourceFilterRef = useRef(null);
+    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 sourceOptions = useMemo(() => {
+        const collectionOptions = new Map();
+        const documentOptions = new Map();
+        components.forEach(({ usages }) => {
+            usages.forEach((usage) => {
+                const collectionLabel = formatSourceLabel(usage.sourceCollection);
+                const collectionKey = `collection:${usage.sourceCollection}`;
+                const documentLabel = usage.sourceTitle || usage.sourceSlug || usage.sourceDocumentId;
+                const documentKey = `document:${usage.sourceCollection}:${usage.sourceDocumentId}`;
+                if (!collectionOptions.has(collectionKey)) {
+                    collectionOptions.set(collectionKey, {
+                        description: usage.sourceCollection,
+                        key: collectionKey,
+                        kind: 'collection',
+                        label: collectionLabel,
+                        searchValue: `${collectionLabel} ${usage.sourceCollection}`.toLowerCase(),
+                    });
+                }
+                if (!documentOptions.has(documentKey)) {
+                    documentOptions.set(documentKey, {
+                        description: `${collectionLabel} (${usage.sourceCollection})`,
+                        key: documentKey,
+                        kind: 'document',
+                        label: documentLabel,
+                        searchValue: `${documentLabel} ${collectionLabel} ${usage.sourceCollection} ${usage.sourceSlug || ''}`.toLowerCase(),
+                    });
+                }
+            });
+        });
+        return [
+            ...Array.from(collectionOptions.values()).sort((a, b) => a.label.localeCompare(b.label)),
+            ...Array.from(documentOptions.values()).sort((a, b) => a.label.localeCompare(b.label)),
+        ];
+    }, [components]);
+    const visibleSourceOptions = useMemo(() => {
+        const normalizedQuery = sourceSearchValue.trim().toLowerCase();
+        if (!normalizedQuery) {
+            return sourceOptions;
+        }
+        return sourceOptions.filter((option) => option.searchValue.includes(normalizedQuery));
+    }, [sourceOptions, sourceSearchValue]);
+    const sourceFilteredComponents = useMemo(() => {
+        const hasSourceFilter = selectedSources.length > 0;
+        return components
+            .map((component) => {
+            const filteredUsages = hasSourceFilter
+                ? component.usages.filter((usage) => {
+                    const collectionKey = `collection:${usage.sourceCollection}`;
+                    const documentKey = `document:${usage.sourceCollection}:${usage.sourceDocumentId}`;
+                    return selectedSources.includes(collectionKey) || selectedSources.includes(documentKey);
+                })
+                : component.usages;
+            return {
+                ...component,
+                usages: filteredUsages,
+            };
+        })
+            .filter((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) => {
+            return !normalizedQuery || component.componentName.toLowerCase().includes(normalizedQuery);
+        });
+    }, [searchValue, sourceFilteredComponents]);
+    const filteredComponentNames = useMemo(() => filteredComponents.map(({ componentName }) => componentName), [filteredComponents]);
+    useEffect(() => {
+        function handlePointerDown(event) {
+            const details = sourceFilterRef.current;
+            const target = event.target;
+            if (!(target instanceof Node) || !details?.open || details.contains(target)) {
+                return;
+            }
+            details.open = false;
+        }
+        document.addEventListener('mousedown', handlePointerDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+        };
+    }, []);
+    const expandAll = () => {
+        setOpenNames((current) => ({
+            ...current,
+            ...Object.fromEntries(filteredComponentNames.map((name) => [name, true])),
+        }));
+    };
+    const collapseAll = () => {
+        if (!filteredComponentNames.length) {
+            return;
+        }
+        setOpenNames((current) => {
+            const next = { ...current };
+            filteredComponentNames.forEach((name) => {
+                delete next[name];
+            });
+            return next;
+        });
+    };
+    const selectedSourceLabels = useMemo(() => sourceOptions
+        .filter((option) => selectedSources.includes(option.key))
+        .map((option) => option.label), [selectedSources, sourceOptions]);
+    const sourceFilterLabel = selectedSourceLabels.length === 0
+        ? 'All Sources'
+        : selectedSourceLabels.length === 1
+            ? selectedSourceLabels[0]
+            : `${selectedSourceLabels.length} sources`;
+    return (_jsxs("div", { style: { display: 'grid', gap: 16 }, children: [_jsxs("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 8,
+                    justifyContent: 'space-between',
+                }, children: [_jsxs("div", { style: { color: '#4b5563', fontSize: 13 }, children: [filteredComponents.length, " component", filteredComponents.length === 1 ? '' : 's', filteredComponents.length !== allComponentNames.length
+                                ? ` of ${allComponentNames.length}`
+                                : ''] }), _jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("input", { onChange: (event) => setSearchValue(event.target.value), placeholder: "Search components...", style: {
+                                    background: '#ffffff',
+                                    border: '1px solid #d1d5db',
+                                    borderRadius: 8,
+                                    color: '#111827',
+                                    fontSize: 13,
+                                    minWidth: 240,
+                                    padding: '8px 12px',
+                                }, type: "search", value: searchValue }), _jsxs("details", { ref: sourceFilterRef, style: { position: 'relative' }, children: [_jsxs("summary", { style: {
+                                            alignItems: 'center',
+                                            appearance: 'none',
+                                            background: '#ffffff',
+                                            border: '1px solid #d1d5db',
+                                            borderRadius: 8,
+                                            color: '#111827',
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            fontSize: 13,
+                                            gap: 8,
+                                            listStyle: 'none',
+                                            minWidth: 220,
+                                            padding: '8px 12px',
+                                            userSelect: 'none',
+                                        }, children: [_jsx("span", { children: "Sources:" }), _jsx("span", { style: { color: '#4b5563', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: sourceFilterLabel }), _jsx("span", { style: { color: '#6b7280', marginLeft: 'auto' }, children: "\u25BE" })] }), _jsx("div", { style: {
+                                            background: '#ffffff',
+                                            border: '1px solid #d1d5db',
+                                            borderRadius: 10,
+                                            boxShadow: '0 12px 32px rgba(17, 24, 39, 0.12)',
+                                            marginTop: 8,
+                                            padding: 12,
+                                            position: 'absolute',
+                                            right: 0,
+                                            width: 320,
+                                            zIndex: 20,
+                                        }, children: _jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx("input", { onChange: (event) => setSourceSearchValue(event.target.value), placeholder: "Search collections or items...", style: {
+                                                        background: '#ffffff',
+                                                        border: '1px solid #d1d5db',
+                                                        borderRadius: 8,
+                                                        color: '#111827',
+                                                        fontSize: 13,
+                                                        padding: '8px 12px',
+                                                        width: '100%',
+                                                    }, type: "search", value: sourceSearchValue }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx("button", { onClick: () => setSelectedSources(sourceOptions.map((option) => option.key)), style: buttonStyle('secondary'), type: "button", children: "Select All" }), _jsx("button", { onClick: () => setSelectedSources([]), style: buttonStyle('secondary'), type: "button", children: "Clear" })] }), _jsx("div", { style: { display: 'grid', gap: 8, maxHeight: 220, overflow: 'auto' }, children: visibleSourceOptions.length ? (visibleSourceOptions.map((option) => {
+                                                        const checked = selectedSources.includes(option.key);
+                                                        return (_jsxs("label", { style: {
+                                                                cursor: 'pointer',
+                                                                display: 'grid',
+                                                                gap: 10,
+                                                                fontSize: 13,
+                                                                gridTemplateColumns: 'auto 1fr',
+                                                            }, children: [_jsx("input", { checked: checked, onChange: () => setSelectedSources((current) => checked
+                                                                        ? current.filter((value) => value !== option.key)
+                                                                        : [...current, option.key]), style: { marginTop: 2 }, type: "checkbox" }), _jsxs("div", { style: { display: 'grid', gap: 2 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: 8 }, children: [_jsx("span", { children: option.label }), _jsx("span", { style: {
+                                                                                        background: option.kind === 'collection' ? '#eef2ff' : '#f3f4f6',
+                                                                                        borderRadius: 999,
+                                                                                        color: option.kind === 'collection' ? '#3730a3' : '#4b5563',
+                                                                                        fontSize: 11,
+                                                                                        fontWeight: 700,
+                                                                                        padding: '2px 8px',
+                                                                                        textTransform: 'uppercase',
+                                                                                    }, 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) ?? [];
+                return (_jsxs("section", { style: {
+                        background: '#fff',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: 10,
+                        overflow: 'hidden',
+                    }, children: [_jsxs("button", { onClick: () => setOpenNames((current) => ({
+                                ...current,
+                                [componentName]: !current[componentName],
+                            })), style: {
+                                alignItems: 'center',
+                                appearance: 'none',
+                                background: 'transparent',
+                                border: 0,
+                                cursor: 'pointer',
+                                display: 'flex',
+                                gap: 12,
+                                justifyContent: 'space-between',
+                                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: {
+                                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',
+                                                    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));
+            })] }));
+}

package/dist/components/NitrogenComponentInventoryField.d.ts

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

package/dist/components/NitrogenComponentInventoryField.js

@@ -0,0 +1,26 @@
+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 NitrogenComponentInventoryClient from './NitrogenComponentInventoryClient';
+import NitrogenComponentInventoryReindexButton from './NitrogenComponentInventoryReindexButton';
+const NitrogenComponentInventoryField = async ({ payload, req, }) => {
+    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 (_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 })] }));
+};
+export default NitrogenComponentInventoryField;

package/dist/components/NitrogenComponentInventoryNavLink.d.ts

@@ -0,0 +1 @@
+export default function NitrogenComponentInventoryNavLink(): null;