@nuasite/collections-admin 0.43.0-beta.1 → 0.43.0-beta.3

package/src/styles.css

@@ -16,6 +16,7 @@
 	--nua-cadmin-danger: #b91c1c;
 	--nua-cadmin-danger-bg: #fef2f2;
 
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -369,3 +370,383 @@
 	border: 1px solid var(--nua-cadmin-border);
 	display: block;
 }
+
+/* --- Editor: form controls --- */
+
+.nua-cadmin-input,
+.nua-cadmin-textarea,
+.nua-cadmin-body-editor,
+select.nua-cadmin-input {
+	width: 100%;
+	padding: 7px 10px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 6px;
+	background: var(--nua-cadmin-bg);
+	color: var(--nua-cadmin-fg);
+	font-family: inherit;
+	font-size: 13px;
+	line-height: 1.5;
+}
+
+.nua-cadmin-input:focus,
+.nua-cadmin-textarea:focus,
+.nua-cadmin-body-editor:focus,
+select.nua-cadmin-input:focus {
+	outline: none;
+	border-color: var(--nua-cadmin-accent);
+	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.nua-cadmin-textarea,
+.nua-cadmin-body-editor {
+	resize: vertical;
+	min-height: 64px;
+}
+
+.nua-cadmin-body-editor {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 12px;
+}
+
+.nua-cadmin-field-loading {
+	padding: 6px 0;
+	color: var(--nua-cadmin-muted);
+	font-style: italic;
+}
+
+/* --- Boolean toggle --- */
+
+.nua-cadmin-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px;
+	padding-right: 10px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 999px;
+	background: var(--nua-cadmin-bg);
+	cursor: pointer;
+	color: var(--nua-cadmin-muted);
+	font-size: 12px;
+}
+
+.nua-cadmin-toggle-knob {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	background: var(--nua-cadmin-border);
+	transition: background 0.15s, transform 0.15s;
+}
+
+.nua-cadmin-toggle-on {
+	border-color: var(--nua-cadmin-accent);
+	color: var(--nua-cadmin-accent);
+}
+
+.nua-cadmin-toggle-on .nua-cadmin-toggle-knob {
+	background: var(--nua-cadmin-accent);
+	transform: translateX(2px);
+}
+
+.nua-cadmin-toggle-publish {
+	font-weight: 600;
+}
+
+/* --- Array repeater --- */
+
+.nua-cadmin-array {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.nua-cadmin-array-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 6px;
+}
+
+.nua-cadmin-array-item-body {
+	flex: 1;
+	min-width: 0;
+}
+
+.nua-cadmin-icon-btn {
+	flex-shrink: 0;
+	width: 28px;
+	height: 28px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 6px;
+	background: var(--nua-cadmin-bg);
+	color: var(--nua-cadmin-muted);
+	cursor: pointer;
+	font-size: 15px;
+	line-height: 1;
+}
+
+.nua-cadmin-icon-btn:hover {
+	border-color: var(--nua-cadmin-danger);
+	color: var(--nua-cadmin-danger);
+}
+
+.nua-cadmin-add-btn {
+	align-self: flex-start;
+	padding: 5px 10px;
+	border: 1px dashed var(--nua-cadmin-border);
+	border-radius: 6px;
+	background: var(--nua-cadmin-bg);
+	color: var(--nua-cadmin-accent);
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.nua-cadmin-add-btn:hover:not(:disabled) {
+	border-color: var(--nua-cadmin-accent);
+	background: var(--nua-cadmin-bg-subtle);
+}
+
+.nua-cadmin-add-btn:disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+/* --- Nested object group --- */
+
+.nua-cadmin-object {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px 10px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 8px;
+	background: var(--nua-cadmin-bg-subtle);
+}
+
+.nua-cadmin-object-field {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+/* --- Media picker --- */
+
+.nua-cadmin-media {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.nua-cadmin-media-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.nua-cadmin-media-hint {
+	color: var(--nua-cadmin-muted);
+	font-size: 12px;
+	font-style: italic;
+}
+
+.nua-cadmin-media-error {
+	color: var(--nua-cadmin-danger);
+	font-size: 12px;
+}
+
+.nua-cadmin-file-input {
+	display: none;
+}
+
+/* --- Editor layout --- */
+
+.nua-cadmin-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.nua-cadmin-editor-toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.nua-cadmin-entries-toolbar {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 10px;
+}
+
+.nua-cadmin-editor-header-fields {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid var(--nua-cadmin-border);
+}
+
+.nua-cadmin-editor-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 18px;
+}
+
+@media (min-width: 720px) {
+	.nua-cadmin-editor-grid:has(.nua-cadmin-editor-sidebar) {
+		grid-template-columns: minmax(0, 1fr) 240px;
+	}
+}
+
+.nua-cadmin-editor-main,
+.nua-cadmin-editor-sidebar {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	min-width: 0;
+}
+
+.nua-cadmin-editor-sidebar {
+	padding: 12px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 8px;
+	background: var(--nua-cadmin-bg-subtle);
+	align-self: start;
+}
+
+.nua-cadmin-field-publish-toggle,
+.nua-cadmin-field-publish-date {
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--nua-cadmin-border);
+}
+
+.nua-cadmin-group-title {
+	margin: 8px 0 2px;
+	font-size: 11px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--nua-cadmin-muted);
+}
+
+/* --- Buttons --- */
+
+.nua-cadmin-btn {
+	padding: 6px 12px;
+	border: 1px solid var(--nua-cadmin-border);
+	border-radius: 6px;
+	background: var(--nua-cadmin-bg);
+	color: var(--nua-cadmin-fg);
+	font-size: 12px;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.nua-cadmin-btn:hover:not(:disabled) {
+	background: var(--nua-cadmin-bg-subtle);
+}
+
+.nua-cadmin-btn:disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+.nua-cadmin-btn-primary {
+	border-color: var(--nua-cadmin-accent);
+	background: var(--nua-cadmin-accent);
+	color: #ffffff;
+}
+
+.nua-cadmin-btn-primary:hover:not(:disabled) {
+	background: #1d4ed8;
+}
+
+.nua-cadmin-btn-danger {
+	border-color: #fecaca;
+	color: var(--nua-cadmin-danger);
+}
+
+.nua-cadmin-btn-danger:hover:not(:disabled) {
+	background: var(--nua-cadmin-danger-bg);
+}
+
+.nua-cadmin-btn-ghost {
+	border-color: transparent;
+	background: transparent;
+	color: var(--nua-cadmin-muted);
+}
+
+.nua-cadmin-btn-ghost:hover:not(:disabled) {
+	background: var(--nua-cadmin-bg-subtle);
+	color: var(--nua-cadmin-fg);
+}
+
+/* --- Save status badge --- */
+
+.nua-cadmin-status {
+	display: inline-flex;
+	align-items: center;
+	padding: 3px 9px;
+	border-radius: 999px;
+	font-size: 11px;
+	font-weight: 600;
+}
+
+.nua-cadmin-status-saving {
+	background: var(--nua-cadmin-bg-subtle);
+	color: var(--nua-cadmin-muted);
+}
+
+.nua-cadmin-status-saved {
+	background: #ecfdf5;
+	color: #166534;
+}
+
+.nua-cadmin-status-conflict {
+	background: #fffbeb;
+	color: #92400e;
+}
+
+.nua-cadmin-status-error {
+	background: var(--nua-cadmin-danger-bg);
+	color: var(--nua-cadmin-danger);
+}
+
+/* --- Conflict dialog --- */
+
+.nua-cadmin-dialog-backdrop {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	background: rgba(17, 24, 39, 0.4);
+	z-index: 10;
+}
+
+.nua-cadmin-dialog {
+	width: 100%;
+	max-width: 420px;
+	padding: 18px;
+	border-radius: 10px;
+	background: var(--nua-cadmin-bg);
+	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.nua-cadmin-dialog-title {
+	font-size: 14px;
+	font-weight: 700;
+	margin-bottom: 8px;
+}
+
+.nua-cadmin-dialog-body {
+	color: var(--nua-cadmin-muted);
+	margin-bottom: 16px;
+}
+
+.nua-cadmin-dialog-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	justify-content: flex-end;
+}

package/dist/types/app.js

@@ -1,240 +0,0 @@
-/**
- * collections-admin SPA — read-only milestone (cms-headless F3.1).
- *
- * Host-agnostic: driven only by an `apiBase` prop, with internal view-state
- * navigation (list → entries → detail) via React state — never the host router.
- * That keeps the same component usable as a webmaster tab today and at
- * `/_nua/admin` for local dev later (F7).
- *
- * Read-only: browse collections, list entries (sparse projection + cursor
- * pagination), and view a single entry's frontmatter + markdown body. Mutations
- * (editor/media/conflict) arrive in F3.2.
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CmsClientError, createClient } from './client';
-import { FieldRow } from './field-view';
-import './styles.css';
-function useAsync(load, deps) {
-    const [state, setState] = useState({ data: null, error: null, loading: true });
-    const [nonce, setNonce] = useState(0);
-    const loadRef = useRef(load);
-    loadRef.current = load;
-    // `load` is read through a ref; re-runs are driven by the explicit `deps` and
-    // the reload `nonce` so the effect deps stay stable and lint-clean.
-    const effectDeps = [...deps, nonce];
-    useEffect(() => {
-        let active = true;
-        setState({ data: null, error: null, loading: true });
-        loadRef.current().then((data) => {
-            if (active)
-                setState({ data, error: null, loading: false });
-        }, (error) => {
-            if (active)
-                setState({ data: null, error: error instanceof Error ? error : new Error(String(error)), loading: false });
-        });
-        return () => {
-            active = false;
-        };
-    }, effectDeps);
-    const reload = useCallback(() => setNonce((n) => n + 1), []);
-    return { ...state, reload };
-}
-// ============================================================================
-// Presentational primitives
-// ============================================================================
-function Spinner({ label }) {
-    return (<div className="nua-cadmin-state">
-			<div className="nua-cadmin-spinner"/>
-			<div>{label}</div>
-		</div>);
-}
-function ErrorState({ error, onRetry }) {
-    const title = error instanceof CmsClientError && error.isUnauthorized
-        ? 'Session expired'
-        : error instanceof CmsClientError && error.isForbidden
-            ? 'No access'
-            : 'Something went wrong';
-    return (<div className="nua-cadmin-error">
-			<div className="nua-cadmin-error-title">{title}</div>
-			<div>{error.message}</div>
-			{onRetry ? <button type="button" className="nua-cadmin-retry" onClick={onRetry}>Try again</button> : null}
-		</div>);
-}
-function EmptyState({ label }) {
-    return <div className="nua-cadmin-state">{label}</div>;
-}
-// ============================================================================
-// Collection list
-// ============================================================================
-function CollectionList({ client, onOpen }) {
-    const { data, error, loading, reload } = useAsync(() => client.getCollections(), [client]);
-    if (loading)
-        return <Spinner label="Loading collections…"/>;
-    if (error)
-        return <ErrorState error={error} onRetry={reload}/>;
-    if (!data || data.length === 0)
-        return <EmptyState label="No collections found in this project."/>;
-    return (<div className="nua-cadmin-list">
-			{data.map((collection) => (<button key={collection.name} type="button" className="nua-cadmin-card" onClick={() => onOpen(collection.name)}>
-					<span className="nua-cadmin-card-main">
-						<span className="nua-cadmin-card-label">{collection.label || collection.name}</span>
-						<span className="nua-cadmin-card-sub">
-							{collection.name}
-							{collection.type ? ` · ${collection.type}` : ''}
-							{` · ${collection.fileExtension}`}
-						</span>
-					</span>
-					<span className="nua-cadmin-badge">{collection.entryCount} {collection.entryCount === 1 ? 'entry' : 'entries'}</span>
-				</button>))}
-		</div>);
-}
-// ============================================================================
-// Entries table (sparse projection + cursor pagination)
-// ============================================================================
-const ENTRIES_PAGE_SIZE = 50;
-const ENTRIES_FIELDS = 'slug,title,draft,pathname';
-function EntriesTable({ client, collection, onOpen }) {
-    const [rows, setRows] = useState([]);
-    const [cursor, setCursor] = useState(undefined);
-    const [hasMore, setHasMore] = useState(false);
-    const [error, setError] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [loadingMore, setLoadingMore] = useState(false);
-    const loadPage = useCallback(async (nextCursor, append) => {
-        if (append)
-            setLoadingMore(true);
-        else
-            setLoading(true);
-        setError(null);
-        try {
-            const result = await client.getEntries(collection, {
-                fields: ENTRIES_FIELDS,
-                draft: 'all',
-                limit: ENTRIES_PAGE_SIZE,
-                cursor: nextCursor,
-            });
-            setRows((prev) => (append ? [...prev, ...result.entries] : result.entries));
-            setCursor(result.cursor);
-            setHasMore(result.hasMore);
-        }
-        catch (e) {
-            setError(e instanceof Error ? e : new Error(String(e)));
-        }
-        finally {
-            setLoading(false);
-            setLoadingMore(false);
-        }
-    }, [client, collection]);
-    useEffect(() => {
-        setRows([]);
-        setCursor(undefined);
-        setHasMore(false);
-        void loadPage(undefined, false);
-    }, [loadPage]);
-    if (loading)
-        return <Spinner label="Loading entries…"/>;
-    if (error)
-        return <ErrorState error={error} onRetry={() => void loadPage(undefined, false)}/>;
-    if (rows.length === 0)
-        return <EmptyState label="This collection has no entries."/>;
-    return (<div>
-			<table className="nua-cadmin-table">
-				<thead>
-					<tr>
-						<th>Slug</th>
-						<th>Title</th>
-						<th>Draft</th>
-						<th>Pathname</th>
-					</tr>
-				</thead>
-				<tbody>
-					{rows.map((entry) => (<tr key={entry.slug} className="nua-cadmin-row" onClick={() => onOpen(entry.slug)}>
-							<td className="nua-cadmin-cell-mono">{entry.slug}</td>
-							<td>{entry.title ?? <span className="nua-cadmin-field-empty">—</span>}</td>
-							<td>{entry.draft ? <span className="nua-cadmin-badge nua-cadmin-badge-draft">draft</span> : ''}</td>
-							<td className="nua-cadmin-cell-mono">{entry.pathname ?? '—'}</td>
-						</tr>))}
-				</tbody>
-			</table>
-			{hasMore ? (<button type="button" className="nua-cadmin-load-more" disabled={loadingMore} onClick={() => void loadPage(cursor, true)}>
-					{loadingMore ? 'Loading…' : 'Load more'}
-				</button>) : null}
-		</div>);
-}
-// ============================================================================
-// Entry detail
-// ============================================================================
-/**
- * Order the collection's fields for display: `publish-toggle`/`publish-date`
- * roles and `sidebar`/`header` positioned fields first, then the rest in schema
- * order. Hidden fields are dropped.
- */
-function orderFields(fields) {
-    const visible = fields.filter((f) => !f.hidden);
-    const pinned = visible.filter((f) => f.role !== undefined || f.position !== undefined);
-    const rest = visible.filter((f) => f.role === undefined && f.position === undefined);
-    return [...pinned, ...rest];
-}
-function EntryDetail({ client, collections, collection, slug }) {
-    const { data, error, loading, reload } = useAsync(() => client.getEntry(collection, slug), [client, collection, slug]);
-    const def = useMemo(() => collections.find((c) => c.name === collection), [collections, collection]);
-    if (loading)
-        return <Spinner label="Loading entry…"/>;
-    if (error)
-        return <ErrorState error={error} onRetry={reload}/>;
-    if (!data)
-        return <EmptyState label="Entry not found."/>;
-    const fieldDefs = def ? orderFields(def.fields) : [];
-    const renderedNames = new Set(fieldDefs.map((f) => f.name));
-    // Frontmatter keys present on the entry but absent from the inferred schema.
-    const extraKeys = Object.keys(data.frontmatter).filter((k) => !renderedNames.has(k));
-    return (<div>
-			<div className="nua-cadmin-fields">
-				{fieldDefs.length === 0 && extraKeys.length === 0 ? <EmptyState label="No frontmatter fields."/> : null}
-				{fieldDefs.map((field) => (<FieldRow key={field.name} field={field} raw={data.frontmatter[field.name]?.value}/>))}
-				{extraKeys.map((key) => (<FieldRow key={key} field={{ name: key, type: 'text', required: false }} raw={data.frontmatter[key]?.value}/>))}
-			</div>
-
-			<h3 className="nua-cadmin-section-title">Body</h3>
-			{data.body.trim() === ''
-            ? <EmptyState label="This entry has no markdown body."/>
-            : <pre className="nua-cadmin-body-content">{data.body}</pre>}
-		</div>);
-}
-export function CollectionsAdminApp({ apiBase, onClose }) {
-    const client = useMemo(() => createClient(apiBase), [apiBase]);
-    const [state, setState] = useState({ view: 'list' });
-    // The collection definitions are needed by the detail view to drive field
-    // rendering; load them once at the root and pass down.
-    const collectionsState = useAsync(() => client.getCollections(), [client]);
-    const collections = collectionsState.data ?? [];
-    const goList = useCallback(() => setState({ view: 'list' }), []);
-    const goEntries = useCallback((collection) => setState({ view: 'entries', collection }), []);
-    const goDetail = useCallback((collection, slug) => setState({ view: 'detail', collection, slug }), []);
-    const activeCollection = state.view !== 'list'
-        ? collections.find((c) => c.name === state.collection)
-        : undefined;
-    const collectionLabel = activeCollection ? (activeCollection.label || activeCollection.name) : (state.view !== 'list' ? state.collection : '');
-    return (<div className="nua-cadmin">
-			<div className="nua-cadmin-header">
-				{state.view === 'entries' ? (<button type="button" className="nua-cadmin-back" onClick={goList}>← Collections</button>) : null}
-				{state.view === 'detail' ? (<button type="button" className="nua-cadmin-back" onClick={() => goEntries(state.collection)}>← {collectionLabel}</button>) : null}
-
-				{state.view === 'list' ? <h2 className="nua-cadmin-title">Collections</h2> : null}
-				{state.view === 'entries' ? <h2 className="nua-cadmin-title">{collectionLabel}</h2> : null}
-				{state.view === 'detail' ? (<h2 className="nua-cadmin-title">
-						{collectionLabel}
-						<span className="nua-cadmin-crumb"> / {state.slug}</span>
-					</h2>) : null}
-
-				<span className="nua-cadmin-spacer"/>
-				{onClose ? <button type="button" className="nua-cadmin-close" aria-label="Close" onClick={onClose}>×</button> : null}
-			</div>
-
-			<div className="nua-cadmin-body">
-				{state.view === 'list' ? <CollectionList client={client} onOpen={goEntries}/> : null}
-				{state.view === 'entries' ? <EntriesTable client={client} collection={state.collection} onOpen={(slug) => goDetail(state.collection, slug)}/> : null}
-				{state.view === 'detail' ? <EntryDetail client={client} collections={collections} collection={state.collection} slug={state.slug}/> : null}
-			</div>
-		</div>);
-}