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

package/src/entry-editor.tsx

@@ -0,0 +1,346 @@
+/**
+ * Entry editor — editable form built from a collection's `FieldDefinition[]`,
+ * with debounced optimistic save and `409` conflict resolution (cms-headless F3.2).
+ *
+ * Layout is driven by the field definitions:
+ *  - `hidden` fields are dropped.
+ *  - `position: 'header'` fields render in a top strip; `position: 'sidebar'` in a
+ *    side column; the rest in the main column. `role` (`publish-toggle`/`publish-date`)
+ *    pins a field to the top of the sidebar and styles it as a publish control.
+ *  - `group` inserts a section header within a column.
+ *  - the markdown `body` is edited as a textarea below the main fields.
+ *
+ * Save flow (see `phase-3-collections-tab.md`): edits update a native draft and
+ * schedule a debounced `PATCH { frontmatter, body, baseHash }`. `GET …/entries/:slug`
+ * exposes no hash, so the first save sends no `baseHash` (the sidecar skips the
+ * check) and adopts `MutationResult.sourceHash` as the new baseHash; later saves
+ * carry it. A `409` opens the conflict dialog: "use server" adopts the server copy
+ * + `serverHash`; "use ours" re-PATCHes with `baseHash = serverHash` (force-over).
+ */
+
+import type { CollectionDefinition, FieldDefinition } from '@nuasite/cms-types'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { CmsClient, CmsConflict } from './client'
+import { CmsClientError } from './client'
+import { type EditorContext, FieldEditor } from './field-editor'
+import { draftFromEntry, draftFromServerFrontmatter, type EntryDraft, setDraftField } from './form-model'
+
+const SAVE_DEBOUNCE_MS = 700
+
+type SaveStatus =
+	| { kind: 'idle' }
+	| { kind: 'saving' }
+	| { kind: 'saved' }
+	| { kind: 'conflict'; conflict: CmsConflict }
+	| { kind: 'error'; message: string }
+
+interface PartitionedFields {
+	header: FieldDefinition[]
+	sidebar: FieldDefinition[]
+	main: FieldDefinition[]
+}
+
+/**
+ * Split visible fields into layout columns. Sidebar leads with `role`-tagged
+ * publish fields (toggle then date), then other sidebar-positioned fields.
+ */
+function partitionFields(fields: FieldDefinition[]): PartitionedFields {
+	const visible = fields.filter(f => !f.hidden)
+	const header = visible.filter(f => f.position === 'header')
+	// A `role`-tagged field lives in the sidebar even without an explicit position.
+	const sidebarPositioned = visible.filter(f => f.position === 'sidebar' || (f.role !== undefined && f.position !== 'header'))
+	const main = visible.filter(f => f.position === undefined && f.role === undefined)
+
+	const roleRank = (f: FieldDefinition): number => (f.role === 'publish-toggle' ? 0 : f.role === 'publish-date' ? 1 : 2)
+	const sidebar = sidebarPositioned.slice().sort((a, b) => roleRank(a) - roleRank(b))
+	return { header, sidebar, main }
+}
+
+/** Render a column of fields, emitting a section header whenever `group` changes. */
+function FieldColumn({ fields, draft, onField, ctx }: {
+	fields: FieldDefinition[]
+	draft: EntryDraft
+	onField: (name: string, value: unknown) => void
+	ctx: EditorContext
+}) {
+	let lastGroup: string | undefined
+	const rows: React.ReactNode[] = []
+	for (const field of fields) {
+		if (field.group && field.group !== lastGroup) {
+			rows.push(<h4 key={`group-${field.group}`} className="nua-cadmin-group-title">{field.group}</h4>)
+			lastGroup = field.group
+		}
+		rows.push(
+			<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>,
+		)
+	}
+	return <>{rows}</>
+}
+
+// ============================================================================
+// Conflict dialog
+// ============================================================================
+
+function ConflictDialog({ onUseServer, onUseOurs, onDismiss }: {
+	onUseServer: () => void
+	onUseOurs: () => void
+	onDismiss: () => void
+}) {
+	return (
+		<div className="nua-cadmin-dialog-backdrop" role="dialog" aria-modal="true" aria-label="Edit conflict">
+			<div className="nua-cadmin-dialog">
+				<div className="nua-cadmin-dialog-title">This entry changed elsewhere</div>
+				<div className="nua-cadmin-dialog-body">
+					Someone (or the agent) edited this entry after you opened it. Choose which version to keep.
+				</div>
+				<div className="nua-cadmin-dialog-actions">
+					<button type="button" className="nua-cadmin-btn" onClick={onUseServer}>Use server version</button>
+					<button type="button" className="nua-cadmin-btn nua-cadmin-btn-primary" onClick={onUseOurs}>Keep my changes</button>
+					<button type="button" className="nua-cadmin-btn nua-cadmin-btn-ghost" onClick={onDismiss}>Keep editing</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ============================================================================
+// Status badge
+// ============================================================================
+
+function StatusBadge({ status }: { status: SaveStatus }) {
+	switch (status.kind) {
+		case 'saving':
+			return <span className="nua-cadmin-status nua-cadmin-status-saving">Saving…</span>
+		case 'saved':
+			return <span className="nua-cadmin-status nua-cadmin-status-saved">Saved</span>
+		case 'conflict':
+			return <span className="nua-cadmin-status nua-cadmin-status-conflict">Conflict</span>
+		case 'error':
+			return <span className="nua-cadmin-status nua-cadmin-status-error">{status.message}</span>
+		default:
+			return null
+	}
+}
+
+// ============================================================================
+// Editor
+// ============================================================================
+
+export function EntryEditor({ client, definition, collection, slug, onDeleted, onRenamed }: {
+	client: CmsClient
+	definition: CollectionDefinition | undefined
+	collection: string
+	slug: string
+	onDeleted: () => void
+	onRenamed: (newSlug: string) => void
+}) {
+	const fields = useMemo(() => definition?.fields ?? [], [definition])
+	const [draft, setDraft] = useState<EntryDraft | null>(null)
+	const [loadError, setLoadError] = useState<Error | null>(null)
+	const [status, setStatus] = useState<SaveStatus>({ kind: 'idle' })
+
+	// `baseHash` is the optimistic-concurrency token. It starts undefined (GET
+	// exposes no hash) and is adopted from each successful `MutationResult.sourceHash`.
+	const baseHashRef = useRef<string | undefined>(undefined)
+	const draftRef = useRef<EntryDraft | null>(null)
+	draftRef.current = draft
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	const ctx: EditorContext = useMemo(() => ({ client, collection, slug }), [client, collection, slug])
+
+	// Load the entry → build the native draft.
+	useEffect(() => {
+		let active = true
+		baseHashRef.current = undefined
+		setDraft(null)
+		setLoadError(null)
+		setStatus({ kind: 'idle' })
+		client.getEntry(collection, slug).then(
+			entry => {
+				if (active) setDraft(draftFromEntry(entry, fields))
+			},
+			(err: unknown) => {
+				if (active) setLoadError(err instanceof Error ? err : new Error(String(err)))
+			},
+		)
+		return () => {
+			active = false
+			if (timerRef.current) clearTimeout(timerRef.current)
+		}
+	}, [client, collection, slug, fields])
+
+	// Persist the current draft. `force` re-uses the server hash to win a conflict.
+	const persist = useCallback(
+		async (next: EntryDraft, baseHash: string | undefined) => {
+			setStatus({ kind: 'saving' })
+			try {
+				const outcome = await client.updateEntry(collection, slug, {
+					frontmatter: next.frontmatter,
+					body: next.body,
+					baseHash,
+				})
+				if (outcome.status === 'conflict') {
+					setStatus({ kind: 'conflict', conflict: outcome.conflict })
+					return
+				}
+				if (outcome.result.sourceHash !== undefined) baseHashRef.current = outcome.result.sourceHash
+				setStatus({ kind: 'saved' })
+			} catch (err: unknown) {
+				setStatus({ kind: 'error', message: err instanceof CmsClientError ? err.message : 'Save failed' })
+			}
+		},
+		[client, collection, slug],
+	)
+
+	const scheduleSave = useCallback(
+		(next: EntryDraft) => {
+			if (timerRef.current) clearTimeout(timerRef.current)
+			timerRef.current = setTimeout(() => {
+				void persist(next, baseHashRef.current)
+			}, SAVE_DEBOUNCE_MS)
+		},
+		[persist],
+	)
+
+	const onField = useCallback(
+		(name: string, value: unknown) => {
+			setDraft(prev => {
+				if (!prev) return prev
+				const next = setDraftField(prev, name, value)
+				scheduleSave(next)
+				return next
+			})
+		},
+		[scheduleSave],
+	)
+
+	const onBody = useCallback(
+		(body: string) => {
+			setDraft(prev => {
+				if (!prev) return prev
+				const next = { ...prev, body }
+				scheduleSave(next)
+				return next
+			})
+		},
+		[scheduleSave],
+	)
+
+	// --- Conflict resolution ---
+	// These act on the current `conflict` status; the dialog only renders while
+	// `status.kind === 'conflict'`, so reading `status` directly here is safe.
+
+	const resolveUseServer = useCallback(() => {
+		if (status.kind !== 'conflict') return
+		const adopted = draftFromServerFrontmatter(status.conflict.serverFrontmatter, status.conflict.serverBody, fields)
+		baseHashRef.current = status.conflict.serverHash
+		setDraft(adopted)
+		setStatus({ kind: 'saved' })
+	}, [status, fields])
+
+	const resolveUseOurs = useCallback(() => {
+		if (status.kind !== 'conflict') return
+		const current = draftRef.current
+		if (current) void persist(current, status.conflict.serverHash)
+	}, [status, persist])
+
+	const dismissConflict = useCallback(() => {
+		if (status.kind === 'conflict') setStatus({ kind: 'idle' })
+	}, [status])
+
+	// --- Delete / rename ---
+
+	const onDelete = useCallback(async () => {
+		if (typeof window !== 'undefined' && !window.confirm(`Delete entry "${slug}"? This cannot be undone.`)) return
+		try {
+			await client.deleteEntry(collection, slug)
+			onDeleted()
+		} catch (err: unknown) {
+			setStatus({ kind: 'error', message: err instanceof CmsClientError ? err.message : 'Delete failed' })
+		}
+	}, [client, collection, slug, onDeleted])
+
+	const onRename = useCallback(async () => {
+		if (typeof window === 'undefined') return
+		const to = window.prompt('Rename entry to (new slug):', slug)
+		if (to === null || to.trim() === '' || to === slug) return
+		try {
+			await client.renameEntry(collection, slug, to.trim())
+			onRenamed(to.trim())
+		} catch (err: unknown) {
+			setStatus({ kind: 'error', message: err instanceof CmsClientError ? err.message : 'Rename failed' })
+		}
+	}, [client, collection, slug, onRenamed])
+
+	if (loadError) {
+		return (
+			<div className="nua-cadmin-error">
+				<div className="nua-cadmin-error-title">Could not load entry</div>
+				<div>{loadError.message}</div>
+			</div>
+		)
+	}
+	if (!draft) {
+		return (
+			<div className="nua-cadmin-state">
+				<div className="nua-cadmin-spinner" />
+				<div>Loading entry…</div>
+			</div>
+		)
+	}
+
+	const { header, sidebar, main } = partitionFields(fields)
+
+	return (
+		<div className="nua-cadmin-editor">
+			<div className="nua-cadmin-editor-toolbar">
+				<StatusBadge status={status} />
+				<span className="nua-cadmin-spacer" />
+				<button type="button" className="nua-cadmin-btn nua-cadmin-btn-ghost" onClick={() => void onRename()}>Rename</button>
+				<button type="button" className="nua-cadmin-btn nua-cadmin-btn-danger" onClick={() => void onDelete()}>Delete</button>
+			</div>
+
+			{header.length > 0
+				? (
+					<div className="nua-cadmin-editor-header-fields">
+						<FieldColumn fields={header} draft={draft} onField={onField} ctx={ctx} />
+					</div>
+				)
+				: null}
+
+			<div className="nua-cadmin-editor-grid">
+				<div className="nua-cadmin-editor-main">
+					<FieldColumn fields={main} draft={draft} onField={onField} ctx={ctx} />
+					{definition?.type !== 'data'
+						? (
+							<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={16} onChange={e => onBody(e.target.value)} />
+							</div>
+						)
+						: null}
+				</div>
+				{sidebar.length > 0
+					? (
+						<div className="nua-cadmin-editor-sidebar">
+							<FieldColumn fields={sidebar} draft={draft} onField={onField} ctx={ctx} />
+						</div>
+					)
+					: null}
+			</div>
+
+			{status.kind === 'conflict'
+				? <ConflictDialog onUseServer={resolveUseServer} onUseOurs={resolveUseOurs} onDismiss={dismissConflict} />
+				: null}
+		</div>
+	)
+}

package/src/field-editor.tsx

@@ -0,0 +1,341 @@
+/**
+ * Editable field widgets, driven entirely by a `FieldDefinition` (cms-headless F3.2).
+ *
+ * Each widget maps a `FieldType` to a control, reads/writes a *native* value
+ * (numbers, booleans, arrays, objects — see form-model), and reports changes via
+ * `onChange`. The renderer is recursive: `object` nests a group of widgets and
+ * `array` repeats the item widget. Media (`image`/`astroImage`) and `reference`
+ * widgets reach the sidecar through the injected `EditorContext`.
+ */
+
+import type { FieldDefinition, FieldType } from '@nuasite/cms-types'
+import { useCallback, useEffect, useState } from 'react'
+import type { CmsClient } from './client'
+import { blankValue, coerceInput, valueToArray, valueToBoolean, valueToInput, valueToObject } from './form-model'
+import { MediaPicker } from './media-picker'
+
+/** Cross-cutting services a widget may need (media uploads, reference lookups). */
+export interface EditorContext {
+	client: CmsClient
+	/** The collection + slug being edited, used as upload context for media. */
+	collection: string
+	slug?: string
+}
+
+interface FieldEditorProps {
+	field: FieldDefinition
+	value: unknown
+	onChange: (value: unknown) => void
+	ctx: EditorContext
+}
+
+// ============================================================================
+// Scalar widgets
+// ============================================================================
+
+/** HTML `<input type>` for the text-like scalar field types. */
+const TEXT_INPUT_TYPE: Partial<Record<FieldType, string>> = {
+	url: 'url',
+	email: 'email',
+	tel: 'tel',
+}
+
+/** Native date/time control type per temporal field type. */
+const DATE_INPUT_TYPE: Partial<Record<FieldType, string>> = {
+	date: 'date',
+	datetime: 'datetime-local',
+	time: 'time',
+	month: 'month',
+}
+
+function TextWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	const hints = field.hints
+	return (
+		<input
+			type={TEXT_INPUT_TYPE[field.type] ?? 'text'}
+			className="nua-cadmin-input"
+			value={valueToInput(value)}
+			placeholder={hints?.placeholder}
+			maxLength={hints?.maxLength}
+			minLength={hints?.minLength}
+			onChange={e => onChange(coerceInput(field.type, e.target.value))}
+		/>
+	)
+}
+
+function TextareaWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	return (
+		<textarea
+			className="nua-cadmin-textarea"
+			value={valueToInput(value)}
+			rows={field.hints?.rows ?? 4}
+			placeholder={field.hints?.placeholder}
+			maxLength={field.hints?.maxLength}
+			onChange={e => onChange(e.target.value)}
+		/>
+	)
+}
+
+function NumberWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	return (
+		<input
+			type="number"
+			className="nua-cadmin-input"
+			value={valueToInput(value)}
+			min={field.hints?.min}
+			max={field.hints?.max}
+			step={field.hints?.step}
+			placeholder={field.hints?.placeholder}
+			onChange={e => onChange(coerceInput('number', e.target.value))}
+		/>
+	)
+}
+
+/** Year is a plain bounded number input (`<input type="year">` is not a thing). */
+function YearWidget({ value, onChange }: { value: unknown; onChange: (v: unknown) => void }) {
+	return (
+		<input
+			type="number"
+			className="nua-cadmin-input"
+			value={valueToInput(value)}
+			min={1000}
+			max={9999}
+			step={1}
+			onChange={e => onChange(coerceInput('year', e.target.value))}
+		/>
+	)
+}
+
+function DateWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	return (
+		<input
+			type={DATE_INPUT_TYPE[field.type] ?? 'date'}
+			className="nua-cadmin-input"
+			value={valueToInput(value)}
+			onChange={e => onChange(e.target.value)}
+		/>
+	)
+}
+
+/**
+ * Boolean toggle. The `publish-toggle` role gets a pinned/styled appearance so
+ * the publish switch reads as a first-class control rather than a generic field.
+ */
+function BooleanWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	const on = valueToBoolean(value)
+	const isPublish = field.role === 'publish-toggle'
+	return (
+		<button
+			type="button"
+			className={`nua-cadmin-toggle${on ? ' nua-cadmin-toggle-on' : ''}${isPublish ? ' nua-cadmin-toggle-publish' : ''}`}
+			role="switch"
+			aria-checked={on}
+			onClick={() => onChange(!on)}
+		>
+			<span className="nua-cadmin-toggle-knob" />
+			<span className="nua-cadmin-toggle-label">{on ? 'On' : 'Off'}</span>
+		</button>
+	)
+}
+
+function SelectWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	const options = field.options ?? []
+	const current = valueToInput(value)
+	return (
+		<select className="nua-cadmin-input" value={current} onChange={e => onChange(e.target.value)}>
+			{field.required ? null : <option value="">— none —</option>}
+			{options.map(opt => (
+				<option key={opt} value={opt}>
+					{opt}
+				</option>
+			))}
+			{current !== '' && !options.includes(current) ? <option value={current}>{current} (current)</option> : null}
+		</select>
+	)
+}
+
+// ============================================================================
+// Reference widget — picks an entry from the target collection.
+// ============================================================================
+
+function ReferenceWidget({ field, value, onChange, ctx }: FieldEditorProps) {
+	const target = field.collection
+	const [slugs, setSlugs] = useState<string[] | null>(null)
+	const [failed, setFailed] = useState(false)
+	const current = valueToInput(value)
+
+	useEffect(() => {
+		if (!target) return
+		let active = true
+		ctx.client.getEntries(target, { fields: 'slug,title', draft: 'all', limit: 200 }).then(
+			result => {
+				if (active) setSlugs(result.entries.map(e => e.slug))
+			},
+			() => {
+				if (active) setFailed(true)
+			},
+		)
+		return () => {
+			active = false
+		}
+	}, [ctx.client, target])
+
+	// No target collection, or the lookup failed → fall back to a free-text slug
+	// input rather than blocking the editor.
+	if (!target || failed) {
+		return <input type="text" className="nua-cadmin-input" value={current} placeholder="entry slug" onChange={e => onChange(e.target.value)} />
+	}
+	if (slugs === null) {
+		return <div className="nua-cadmin-field-loading">Loading {target}…</div>
+	}
+	return (
+		<select className="nua-cadmin-input" value={current} onChange={e => onChange(e.target.value)}>
+			<option value="">— none —</option>
+			{slugs.map(slug => (
+				<option key={slug} value={slug}>
+					{slug}
+				</option>
+			))}
+			{current !== '' && !slugs.includes(current) ? <option value={current}>{current} (current)</option> : null}
+		</select>
+	)
+}
+
+// ============================================================================
+// Array repeater — recurses the item widget.
+// ============================================================================
+
+function ArrayWidget({ field, value, onChange, ctx }: FieldEditorProps) {
+	const items = valueToArray(value)
+	const itemType: FieldType = field.itemType ?? 'text'
+	const itemField: FieldDefinition = {
+		name: field.name,
+		type: itemType,
+		required: false,
+		fields: field.fields,
+		options: field.options,
+		collection: field.collection,
+	}
+
+	const setItem = useCallback(
+		(index: number, next: unknown) => {
+			const copy = items.slice()
+			copy[index] = next
+			onChange(copy)
+		},
+		[items, onChange],
+	)
+	const removeItem = useCallback(
+		(index: number) => {
+			onChange(items.filter((_, i) => i !== index))
+		},
+		[items, onChange],
+	)
+	const addItem = useCallback(() => {
+		onChange([...items, blankValue(itemType)])
+	}, [items, itemType, onChange])
+
+	return (
+		<div className="nua-cadmin-array">
+			{items.length === 0 ? <div className="nua-cadmin-field-empty">No items.</div> : null}
+			{items.map((item, index) => (
+				// Array items have no stable id; positional index keys are correct here.
+				<div key={index} className="nua-cadmin-array-item">
+					<div className="nua-cadmin-array-item-body">
+						<FieldEditor field={itemField} value={item} onChange={next => setItem(index, next)} ctx={ctx} />
+					</div>
+					<button type="button" className="nua-cadmin-icon-btn" aria-label="Remove item" onClick={() => removeItem(index)}>
+						×
+					</button>
+				</div>
+			))}
+			<button type="button" className="nua-cadmin-add-btn" onClick={addItem}>
+				+ Add item
+			</button>
+		</div>
+	)
+}
+
+// ============================================================================
+// Nested object group.
+// ============================================================================
+
+function ObjectWidget({ field, value, onChange, ctx }: FieldEditorProps) {
+	const obj = valueToObject(value)
+	const subFields = field.fields ?? []
+	const setKey = useCallback(
+		(name: string, next: unknown) => {
+			onChange({ ...obj, [name]: next })
+		},
+		[obj, onChange],
+	)
+	if (subFields.length === 0) {
+		return <div className="nua-cadmin-field-empty">No nested fields.</div>
+	}
+	return (
+		<div className="nua-cadmin-object">
+			{subFields.map(sub => (
+				<div key={sub.name} className="nua-cadmin-object-field">
+					<div className="nua-cadmin-field-label">
+						<span>{sub.name}</span>
+						<span className="nua-cadmin-field-type">{sub.type}</span>
+					</div>
+					<FieldEditor field={sub} value={obj[sub.name]} onChange={next => setKey(sub.name, next)} ctx={ctx} />
+				</div>
+			))}
+		</div>
+	)
+}
+
+// ============================================================================
+// Renderer
+// ============================================================================
+
+/**
+ * Render the editable control for `field`. Pure dispatch on `field.type`; the
+ * value is always native (coercion happens inside each widget on input).
+ */
+export function FieldEditor({ field, value, onChange, ctx }: FieldEditorProps) {
+	switch (field.type) {
+		case 'text':
+		case 'url':
+		case 'email':
+		case 'tel':
+		case 'color':
+			return <TextWidget field={field} value={value} onChange={onChange} />
+		case 'textarea':
+			return <TextareaWidget field={field} value={value} onChange={onChange} />
+		case 'number':
+			return <NumberWidget field={field} value={value} onChange={onChange} />
+		case 'year':
+			return <YearWidget value={value} onChange={onChange} />
+		case 'date':
+		case 'datetime':
+		case 'time':
+		case 'month':
+			return <DateWidget field={field} value={value} onChange={onChange} />
+		case 'boolean':
+			return <BooleanWidget field={field} value={value} onChange={onChange} />
+		case 'select':
+			return <SelectWidget field={field} value={value} onChange={onChange} />
+		case 'image':
+		case 'file':
+			return (
+				<MediaPicker
+					client={ctx.client}
+					value={valueToInput(value)}
+					collection={ctx.collection}
+					entry={ctx.slug}
+					field={field.name}
+					accept={field.hints?.accept}
+					onChange={url => onChange(url)}
+				/>
+			)
+		case 'reference':
+			return <ReferenceWidget field={field} value={value} onChange={onChange} ctx={ctx} />
+		case 'array':
+			return <ArrayWidget field={field} value={value} onChange={onChange} ctx={ctx} />
+		case 'object':
+			return <ObjectWidget field={field} value={value} onChange={onChange} ctx={ctx} />
+	}
+}