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

package/src/app.tsx

@@ -1,20 +1,21 @@
 /**
- * collections-admin SPA — read-only milestone (cms-headless F3.1).
+ * collections-admin SPA (cms-headless F3.1 read-only + F3.2 editing).
  *
  * 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
+ * navigation (list → entries → editor/create) 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.
+ * Browse collections, list entries (sparse projection + cursor pagination), and
+ * edit an entry: a field→widget form built from `FieldDefinition[]` with debounced
+ * optimistic save and `409` conflict resolution, plus create/delete/rename flows.
  */
 
-import type { CollectionDefinition, CollectionEntry, CollectionEntryInfo, FieldDefinition } from '@nuasite/cms-types'
+import type { CollectionDefinition, CollectionEntryInfo } from '@nuasite/cms-types'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { type CmsClient, CmsClientError, createClient } from './client'
-import { FieldRow } from './field-view'
+import { EntryCreate } from './entry-create'
+import { EntryEditor } from './entry-editor'
 import './styles.css'
 
 // ============================================================================
@@ -25,6 +26,7 @@ type View =
 	| { view: 'list' }
 	| { view: 'entries'; collection: string }
 	| { view: 'detail'; collection: string; slug: string }
+	| { view: 'create'; collection: string }
 
 // ============================================================================
 // Shared async-load hook
@@ -134,7 +136,12 @@ function CollectionList({ client, onOpen }: { client: CmsClient; onOpen: (collec
 const ENTRIES_PAGE_SIZE = 50
 const ENTRIES_FIELDS = 'slug,title,draft,pathname'
 
-function EntriesTable({ client, collection, onOpen }: { client: CmsClient; collection: string; onOpen: (slug: string) => void }) {
+function EntriesTable({ client, collection, onOpen, onCreate }: {
+	client: CmsClient
+	collection: string
+	onOpen: (slug: string) => void
+	onCreate: () => void
+}) {
 	const [rows, setRows] = useState<CollectionEntryInfo[]>([])
 	const [cursor, setCursor] = useState<string | undefined>(undefined)
 	const [hasMore, setHasMore] = useState(false)
@@ -176,10 +183,25 @@ function EntriesTable({ client, collection, onOpen }: { client: CmsClient; colle
 
 	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." />
+
+	const toolbar = (
+		<div className="nua-cadmin-entries-toolbar">
+			<button type="button" className="nua-cadmin-btn nua-cadmin-btn-primary" onClick={onCreate}>+ New entry</button>
+		</div>
+	)
+
+	if (rows.length === 0) {
+		return (
+			<div>
+				{toolbar}
+				<EmptyState label="This collection has no entries." />
+			</div>
+		)
+	}
 
 	return (
 		<div>
+			{toolbar}
 			<table className="nua-cadmin-table">
 				<thead>
 					<tr>
@@ -211,57 +233,6 @@ function EntriesTable({ client, collection, onOpen }: { client: CmsClient; colle
 	)
 }
 
-// ============================================================================
-// 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: FieldDefinition[]): FieldDefinition[] {
-	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 }: {
-	client: CmsClient
-	collections: CollectionDefinition[]
-	collection: string
-	slug: string
-}) {
-	const { data, error, loading, reload } = useAsync<CollectionEntry>(() => 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>
-	)
-}
-
 // ============================================================================
 // Root
 // ============================================================================
@@ -280,25 +251,28 @@ export function CollectionsAdminApp({ apiBase, onClose }: CollectionsAdminAppPro
 	const client = useMemo(() => createClient(apiBase), [apiBase])
 	const [state, setState] = useState<View>({ view: 'list' })
 
-	// The collection definitions are needed by the detail view to drive field
-	// rendering; load them once at the root and pass down.
+	// The collection definitions drive the editor's field rendering; load them once
+	// at the root and pass the active one down.
 	const collectionsState = useAsync(() => client.getCollections(), [client])
 	const collections = collectionsState.data ?? []
 
 	const goList = useCallback(() => setState({ view: 'list' }), [])
 	const goEntries = useCallback((collection: string) => setState({ view: 'entries', collection }), [])
 	const goDetail = useCallback((collection: string, slug: string) => setState({ view: 'detail', collection, slug }), [])
+	const goCreate = useCallback((collection: string) => setState({ view: 'create', collection }), [])
 
 	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 : '')
 
+	const isEntryView = state.view === 'detail' || state.view === 'create'
+
 	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'
+				{isEntryView
 					? <button type="button" className="nua-cadmin-back" onClick={() => goEntries(state.collection)}>← {collectionLabel}</button>
 					: null}
 
@@ -312,6 +286,14 @@ export function CollectionsAdminApp({ apiBase, onClose }: CollectionsAdminAppPro
 						</h2>
 					)
 					: null}
+				{state.view === 'create'
+					? (
+						<h2 className="nua-cadmin-title">
+							{collectionLabel}
+							<span className="nua-cadmin-crumb">/ new entry</span>
+						</h2>
+					)
+					: null}
 
 				<span className="nua-cadmin-spacer" />
 				{onClose ? <button type="button" className="nua-cadmin-close" aria-label="Close" onClick={onClose}>×</button> : null}
@@ -320,9 +302,40 @@ export function CollectionsAdminApp({ apiBase, onClose }: CollectionsAdminAppPro
 			<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)} />
+					? (
+						<EntriesTable
+							client={client}
+							collection={state.collection}
+							onOpen={(slug) => goDetail(state.collection, slug)}
+							onCreate={() => goCreate(state.collection)}
+						/>
+					)
+					: null}
+				{state.view === 'detail'
+					? (
+						<EntryEditor
+							// Remount the editor when the slug changes so its draft/baseHash reset cleanly.
+							key={`${state.collection}/${state.slug}`}
+							client={client}
+							definition={activeCollection}
+							collection={state.collection}
+							slug={state.slug}
+							onDeleted={() => goEntries(state.collection)}
+							onRenamed={(newSlug) => goDetail(state.collection, newSlug)}
+						/>
+					)
+					: null}
+				{state.view === 'create'
+					? (
+						<EntryCreate
+							client={client}
+							definition={activeCollection}
+							collection={state.collection}
+							onCreated={(slug) => goDetail(state.collection, slug)}
+							onCancel={() => goEntries(state.collection)}
+						/>
+					)
 					: null}
-				{state.view === 'detail' ? <EntryDetail client={client} collections={collections} collection={state.collection} slug={state.slug} /> : null}
 			</div>
 		</div>
 	)

package/src/client.ts

@@ -1,5 +1,5 @@
 /**
- * Typed read-only client over the cms-sidecar `/cms/v1` HTTP contract.
+ * Typed client over the cms-sidecar `/cms/v1` HTTP contract (reads + mutations).
  *
  * The host (webmaster BFF, or a local dev proxy in F7) mounts the sidecar under
  * an `apiBase` and adds the `/cms/v1` prefix itself — so this client requests
@@ -7,11 +7,22 @@
  *
  * The structural model (collections/entries/fields) is reused 1:1 from
  * `@nuasite/cms-types`. The thin HTTP envelope (project model, sparse entries
- * list, error codes) mirrors the sidecar's wire types; it is declared here
- * because those types are not part of the `@nuasite/cms-types` contract surface.
+ * list, error codes, mutation bodies, conflict response) mirrors the sidecar's
+ * wire types; it is declared here because those types are not part of the
+ * `@nuasite/cms-types` contract surface.
  */
 
-import type { CollectionDefinition, CollectionEntry, CollectionEntryInfo } from '@nuasite/cms-types'
+import type {
+	CollectionDefinition,
+	CollectionEntry,
+	CollectionEntryInfo,
+	MediaListResult,
+	MediaUploadResult,
+	MutationResult,
+} from '@nuasite/cms-types'
+
+/** HTTP status the sidecar uses for an optimistic-concurrency conflict. */
+const STATUS_CONFLICT = 409
 
 // ============================================================================
 // Wire envelope (mirrors @nuasite/cms-sidecar's `/cms/v1` contract)
@@ -60,6 +71,53 @@ export interface CmsEntriesListResult {
 	hasMore: boolean
 }
 
+/**
+ * `409` body for a `PATCH` whose `baseHash` no longer matches disk (an agent or a
+ * human wrote in between). Carries the current server version so the UI can offer
+ * "use server" vs "use ours". Mirrors the sidecar `ConflictResponse`.
+ */
+export interface CmsConflict {
+	code: 'conflict'
+	serverHash: string
+	/** Raw (non-stringified) server frontmatter — unlike the line-keyed GET-detail shape. */
+	serverFrontmatter: Record<string, unknown>
+	serverBody?: string
+}
+
+/** `PATCH …/entries/:slug` — frontmatter keys are merged (not replaced). */
+export interface UpdateEntryInput {
+	frontmatter?: Record<string, unknown>
+	body?: string
+	/** Hash of the source the client edited; drives optimistic concurrency. */
+	baseHash?: string
+}
+
+export interface CreateEntryInput {
+	slug: string
+	frontmatter: Record<string, unknown>
+	body?: string
+	/** File extension override for data collections (e.g. 'json', 'yaml'). */
+	fileExtension?: string
+}
+
+/** Context passed to media operations so uploads can be filed against an entry/field. */
+export interface MediaContext {
+	collection?: string
+	entry?: string
+	field?: string
+	/** Subfolder under the media root. */
+	folder?: string
+}
+
+/**
+ * Either a successful `MutationResult` or a `409` conflict the caller must
+ * resolve. Returned (not thrown) by `updateEntry` so the editor can branch
+ * without exception flow.
+ */
+export type UpdateEntryResult =
+	| { status: 'ok'; result: MutationResult }
+	| { status: 'conflict'; conflict: CmsConflict }
+
 // ============================================================================
 // Client error
 // ============================================================================
@@ -113,12 +171,21 @@ export interface GetEntriesOptions {
 // ============================================================================
 
 function isApiError(value: unknown): value is CmsApiError {
-	return typeof value === 'object'
-		&& value !== null
-		&& 'error' in value
-		&& typeof (value as { error: unknown }).error === 'string'
-		&& 'code' in value
-		&& typeof (value as { code: unknown }).code === 'string'
+	return isRecord(value)
+		&& typeof value.error === 'string'
+		&& typeof value.code === 'string'
+}
+
+/** Narrow `unknown` to a record so property reads typecheck without casts. */
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null
+}
+
+function isConflict(value: unknown): value is CmsConflict {
+	if (!isRecord(value)) return false
+	return value.code === 'conflict'
+		&& typeof value.serverHash === 'string'
+		&& isRecord(value.serverFrontmatter)
 }
 
 const KNOWN_ERROR_CODES: readonly CmsErrorCode[] = [
@@ -140,6 +207,35 @@ export interface CmsClient {
 	getCollections(): Promise<CollectionDefinition[]>
 	getEntries(collection: string, options?: GetEntriesOptions): Promise<CmsEntriesListResult>
 	getEntry(collection: string, slug: string): Promise<CollectionEntry>
+
+	// --- Mutations ---
+
+	/**
+	 * Merge-patch an entry's frontmatter/body. Returns a discriminated result: a
+	 * `409` is surfaced as `{ status: 'conflict' }` (not thrown) so the editor can
+	 * open the conflict dialog. The new `baseHash` is on `result.sourceHash`.
+	 */
+	updateEntry(collection: string, slug: string, input: UpdateEntryInput): Promise<UpdateEntryResult>
+	createEntry(collection: string, input: CreateEntryInput): Promise<MutationResult>
+	deleteEntry(collection: string, slug: string): Promise<MutationResult>
+	renameEntry(collection: string, slug: string, to: string): Promise<MutationResult>
+	addArrayItem(collection: string, slug: string, field: string, value: unknown, index?: number): Promise<MutationResult>
+	removeArrayItem(collection: string, slug: string, field: string, index: number): Promise<MutationResult>
+
+	// --- Media (degrades gracefully when the sidecar has no adapter wired: 501). ---
+
+	listMedia(options?: { folder?: string; cursor?: string; limit?: number }): Promise<MediaListResult>
+	uploadMedia(file: File, context?: MediaContext): Promise<MediaUploadResult>
+	deleteMedia(id: string): Promise<{ success: boolean; error?: string }>
+}
+
+/**
+ * Whether a thrown `CmsClientError` means "media is not available" — the deployed
+ * sidecar may have no media adapter wired (`501 unsupported`). The picker uses
+ * this to degrade gracefully instead of surfacing a hard error.
+ */
+export function isMediaUnavailable(error: unknown): boolean {
+	return error instanceof CmsClientError && (error.status === 501 || error.code === 'unsupported')
 }
 
 export function createClient(apiBase: string): CmsClient {
@@ -164,32 +260,63 @@ export function createClient(apiBase: string): CmsClient {
 
 	async function toError(response: Response): Promise<CmsClientError> {
 		// 403 is produced by the BFF (project scope), not the sidecar, so it has no
-		// sidecar `code`; surface it as a distinct `forbidden`.
-		if (response.status === 403) {
-			const message = await readErrorMessage(response, 'You do not have access to this project.')
-			return new CmsClientError(403, 'forbidden', message)
+		// sidecar `code`; `errorFromBody` surfaces it as a distinct `forbidden`.
+		const body: unknown = await response.json().catch(() => null)
+		return errorFromBody(response.status, body)
+	}
+
+	function errorMessageFromBody(body: unknown, fallback: string): string {
+		if (isApiError(body)) return body.error
+		if (isRecord(body)) {
+			const err = body.error
+			if (isRecord(err) && typeof err.message === 'string') return err.message
 		}
+		return fallback
+	}
 
-		const body: unknown = await response.json().catch(() => null)
+	/** Build a `CmsClientError` from an already-parsed body (no re-read of the stream). */
+	function errorFromBody(status: number, body: unknown): CmsClientError {
+		if (status === 403) {
+			return new CmsClientError(403, 'forbidden', errorMessageFromBody(body, 'You do not have access to this project.'))
+		}
 		if (isApiError(body) && isErrorCode(body.code)) {
-			return new CmsClientError(response.status, body.code, body.error)
+			return new CmsClientError(status, body.code, body.error)
 		}
-		if (response.status === 401) {
+		if (status === 401) {
 			return new CmsClientError(401, 'unauthorized', 'Your session has expired. Please reload.')
 		}
-		return new CmsClientError(response.status, 'unknown', `Request failed (${response.status})`)
+		return new CmsClientError(status, 'unknown', errorMessageFromBody(body, `Request failed (${status})`))
 	}
 
-	async function readErrorMessage(response: Response, fallback: string): Promise<string> {
-		const body: unknown = await response.json().catch(() => null)
-		if (isApiError(body)) return body.error
-		if (typeof body === 'object' && body !== null && 'error' in body) {
-			const err = (body as { error: unknown }).error
-			if (typeof err === 'object' && err !== null && 'message' in err && typeof (err as { message: unknown }).message === 'string') {
-				return (err as { message: string }).message
-			}
+	function mutationInit(method: string, body?: unknown): RequestInit {
+		const init: RequestInit = {
+			method,
+			credentials: 'include',
+			headers: { accept: 'application/json' },
 		}
-		return fallback
+		if (body !== undefined) {
+			init.body = JSON.stringify(body)
+			init.headers = { accept: 'application/json', 'content-type': 'application/json' }
+		}
+		return init
+	}
+
+	/**
+	 * Send a JSON-body mutation (POST/PATCH/DELETE). Throws `CmsClientError` on any
+	 * non-2xx — used by the mutations that have no conflict branch. The
+	 * conflict-aware update has its own path below.
+	 */
+	async function mutate<T>(path: string, method: string, body?: unknown): Promise<T> {
+		const response = await fetch(`${base}${path}`, mutationInit(method, body))
+		if (!response.ok) throw await toError(response)
+		// Mutation responses are documented JSON; the asserted shape is trusted
+		// (`response.json()` widens to the declared `T`, mirroring `request`).
+		const value: T = await response.json()
+		return value
+	}
+
+	function entryPath(collection: string, slug: string): string {
+		return `/collections/${encodeURIComponent(collection)}/entries/${encodeURIComponent(slug)}`
 	}
 
 	return {
@@ -210,7 +337,69 @@ export function createClient(apiBase: string): CmsClient {
 			return request<CmsEntriesListResult>(`/collections/${encodeURIComponent(collection)}/entries${suffix}`)
 		},
 		getEntry(collection, slug) {
-			return request<CollectionEntry>(`/collections/${encodeURIComponent(collection)}/entries/${encodeURIComponent(slug)}`)
+			return request<CollectionEntry>(entryPath(collection, slug))
+		},
+
+		async updateEntry(collection, slug, input) {
+			const response = await fetch(`${base}${entryPath(collection, slug)}`, mutationInit('PATCH', input))
+			// A `409` carries the server version; parse and return it for the dialog.
+			if (response.status === STATUS_CONFLICT) {
+				const body: unknown = await response.json().catch(() => null)
+				if (isConflict(body)) return { status: 'conflict', conflict: body }
+				throw errorFromBody(response.status, body)
+			}
+			if (!response.ok) throw await toError(response)
+			const result: MutationResult = await response.json()
+			return { status: 'ok', result }
+		},
+		createEntry(collection, input) {
+			return mutate<MutationResult>(`/collections/${encodeURIComponent(collection)}/entries`, 'POST', input)
+		},
+		deleteEntry(collection, slug) {
+			return mutate<MutationResult>(entryPath(collection, slug), 'DELETE')
+		},
+		renameEntry(collection, slug, to) {
+			return mutate<MutationResult>(`${entryPath(collection, slug)}/rename`, 'POST', { to })
+		},
+		addArrayItem(collection, slug, field, value, index) {
+			const body = index === undefined ? { field, value } : { field, value, index }
+			return mutate<MutationResult>(`${entryPath(collection, slug)}/array`, 'POST', body)
+		},
+		removeArrayItem(collection, slug, field, index) {
+			return mutate<MutationResult>(`${entryPath(collection, slug)}/array`, 'DELETE', { field, index })
+		},
+
+		listMedia(options = {}) {
+			const params = new URLSearchParams()
+			if (options.folder !== undefined) params.set('folder', options.folder)
+			if (options.cursor !== undefined) params.set('cursor', options.cursor)
+			if (options.limit !== undefined) params.set('limit', String(options.limit))
+			const query = params.toString()
+			return request<MediaListResult>(`/media${query === '' ? '' : `?${query}`}`)
+		},
+		async uploadMedia(file, context = {}) {
+			// The sidecar reads upload context (collection/entry/field/folder) from the
+			// query string; the file rides in multipart form data under `file`.
+			const params = new URLSearchParams()
+			if (context.collection !== undefined) params.set('collection', context.collection)
+			if (context.entry !== undefined) params.set('entry', context.entry)
+			if (context.field !== undefined) params.set('field', context.field)
+			if (context.folder !== undefined) params.set('folder', context.folder)
+			const query = params.toString()
+			const form = new FormData()
+			form.append('file', file)
+			const response = await fetch(`${base}/media${query === '' ? '' : `?${query}`}`, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { accept: 'application/json' },
+				body: form,
+			})
+			if (!response.ok) throw await toError(response)
+			const result: MediaUploadResult = await response.json()
+			return result
+		},
+		deleteMedia(id) {
+			return mutate<{ success: boolean; error?: string }>(`/media/${encodeURIComponent(id)}`, 'DELETE')
 		},
 	}
 }

package/src/entry-create.tsx

@@ -0,0 +1,116 @@
+/**
+ * Create-entry form built from a collection's `FieldDefinition[]` (cms-headless F3.2).
+ *
+ * A required `slug` plus a field for each non-hidden definition (seeded from
+ * `defaultValue`). On submit it `POST`s the new entry and hands the created slug
+ * back to the host so it can open the editor. Reuses the same field widgets and
+ * native draft model as the editor.
+ */
+
+import type { CollectionDefinition, FieldDefinition } from '@nuasite/cms-types'
+import { useCallback, useMemo, useState } from 'react'
+import { type CmsClient, CmsClientError } from './client'
+import { type EditorContext, FieldEditor } from './field-editor'
+import { draftForCreate, type EntryDraft, setDraftField } from './form-model'
+
+function visibleFields(fields: FieldDefinition[]): FieldDefinition[] {
+	return fields.filter(f => !f.hidden)
+}
+
+export function EntryCreate({ client, definition, collection, onCreated, onCancel }: {
+	client: CmsClient
+	definition: CollectionDefinition | undefined
+	collection: string
+	onCreated: (slug: string) => void
+	onCancel: () => void
+}) {
+	const fields = useMemo(() => definition?.fields ?? [], [definition])
+	const [slug, setSlug] = useState('')
+	const [draft, setDraft] = useState<EntryDraft>(() => draftForCreate(fields))
+	const [submitting, setSubmitting] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+
+	const ctx: EditorContext = useMemo(() => ({ client, collection }), [client, collection])
+
+	const onField = useCallback((name: string, value: unknown) => {
+		setDraft(prev => setDraftField(prev, name, value))
+	}, [])
+
+	const submit = useCallback(async () => {
+		const trimmed = slug.trim()
+		if (trimmed === '') {
+			setError('A slug is required.')
+			return
+		}
+		setSubmitting(true)
+		setError(null)
+		try {
+			const result = await client.createEntry(collection, {
+				slug: trimmed,
+				frontmatter: draft.frontmatter,
+				body: draft.body,
+				fileExtension: definition?.fileExtension,
+			})
+			if (result.success) {
+				onCreated(trimmed)
+			} else {
+				setError(result.error ?? 'Could not create the entry.')
+			}
+		} catch (err: unknown) {
+			setError(err instanceof CmsClientError ? err.message : 'Could not create the entry.')
+		} finally {
+			setSubmitting(false)
+		}
+	}, [client, collection, definition, draft, slug, onCreated])
+
+	const isData = definition?.type === 'data'
+
+	return (
+		<div className="nua-cadmin-editor">
+			<div className="nua-cadmin-field">
+				<div className="nua-cadmin-field-label">
+					<span>slug</span>
+					<span className="nua-cadmin-field-type">text · required</span>
+				</div>
+				<input type="text" className="nua-cadmin-input" value={slug} placeholder="my-new-entry" onChange={e => setSlug(e.target.value)} />
+			</div>
+
+			{visibleFields(fields).map(field => (
+				<div key={field.name} className={`nua-cadmin-field${field.role ? ` nua-cadmin-field-${field.role}` : ''}`}>
+					<div className="nua-cadmin-field-label">
+						<span>{field.name}</span>
+						<span className="nua-cadmin-field-type">{field.type}{field.required ? ' · required' : ''}</span>
+					</div>
+					<FieldEditor field={field} value={draft.frontmatter[field.name]} onChange={value => onField(field.name, value)} ctx={ctx} />
+				</div>
+			))}
+
+			{!isData
+				? (
+					<div className="nua-cadmin-field">
+						<div className="nua-cadmin-field-label">
+							<span>Body</span>
+							<span className="nua-cadmin-field-type">markdown</span>
+						</div>
+						<textarea
+							className="nua-cadmin-body-editor"
+							value={draft.body}
+							rows={10}
+							onChange={e => setDraft(prev => ({ ...prev, body: e.target.value }))}
+						/>
+					</div>
+				)
+				: null}
+
+			{error ? <div className="nua-cadmin-media-error">{error}</div> : null}
+
+			<div className="nua-cadmin-editor-toolbar">
+				<button type="button" className="nua-cadmin-btn nua-cadmin-btn-ghost" disabled={submitting} onClick={onCancel}>Cancel</button>
+				<span className="nua-cadmin-spacer" />
+				<button type="button" className="nua-cadmin-btn nua-cadmin-btn-primary" disabled={submitting} onClick={() => void submit()}>
+					{submitting ? 'Creating…' : 'Create entry'}
+				</button>
+			</div>
+		</div>
+	)
+}