@nuasite/collections-admin 0.43.0-beta.4 → 0.43.0-beta.8

package/src/entry-editor.tsx

@@ -27,7 +27,8 @@ import {
 	type EntryDraft,
 	setDraftField,
 } from '@nuasite/cms-client'
-import type { CollectionDefinition, FieldDefinition } from '@nuasite/cms-types'
+import { MdxBodyEditor } from '@nuasite/cms-mdx-editor'
+import type { CollectionDefinition, ComponentDefinition, FieldDefinition } from '@nuasite/cms-types'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { type EditorContext, FieldEditor } from './field-editor'
 
@@ -40,53 +41,215 @@ type SaveStatus =
 	| { kind: 'conflict'; conflict: CmsConflict }
 	| { kind: 'error'; message: string }
 
-interface PartitionedFields {
+// ============================================================================
+// Layout resolution — sidebar + ordered sections (tabs / stacked)
+// ============================================================================
+
+interface RenderSection {
+	title?: string
+	fields: FieldDefinition[]
+	collapsed?: boolean
+}
+
+interface RenderLayout {
 	header: FieldDefinition[]
 	sidebar: FieldDefinition[]
-	main: FieldDefinition[]
+	sections: RenderSection[]
+	display: 'sections' | 'tabs'
+}
+
+/** Above this many main sections, default to tabs instead of a long stack. */
+const AUTO_TAB_THRESHOLD = 4
+
+const fieldLabel = (f: FieldDefinition): string => f.label ?? f.name
+/** Prettify a raw field name for a section title (e.g. `pricing_tiers` → `Pricing tiers`). */
+const prettify = (name: string): string => {
+	const spaced = name.replace(/[_-]+/g, ' ').trim()
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
+const roleRank = (f: FieldDefinition): number => (f.role === 'publish-toggle' ? 0 : f.role === 'publish-date' ? 1 : 2)
+
+/** Stable sort by explicit `order` (unset → keeps schema order). */
+function sortByOrder(fields: FieldDefinition[]): FieldDefinition[] {
+	return fields
+		.map((f, i) => [f, i] as const)
+		.sort((a, b) => (a[0].order ?? 0) - (b[0].order ?? 0) || a[1] - b[1])
+		.map(([f]) => f)
 }
 
 /**
- * Split visible fields into layout columns. Sidebar leads with `role`-tagged
- * publish fields (toggle then date), then other sidebar-positioned fields.
+ * Default sections when no `cms.sections` are declared: scalar fields group by
+ * `group` (consecutive same-group fields share a section; ungrouped → an untitled
+ * section), and each nested `object`/`array` field becomes its own collapsible
+ * section — so a big schema reads as discrete blocks rather than one long column.
  */
-function partitionFields(fields: FieldDefinition[]): PartitionedFields {
-	const visible = fields.filter(f => !f.hidden)
+function deriveDefaultSections(main: FieldDefinition[]): RenderSection[] {
+	// Scalars are consolidated (ungrouped → one section, else one per `group`, in
+	// first-appearance order); each nested object/array becomes its own collapsible
+	// section, appended after the scalars — so the tab/section list stays clean
+	// instead of interleaving repeated "General" buckets.
+	const scalarSections: RenderSection[] = []
+	const byGroup = new Map<string, RenderSection>()
+	const structural: RenderSection[] = []
+	for (const f of main) {
+		if (f.type === 'object' || f.type === 'array') {
+			structural.push({ title: f.label ?? prettify(f.name), fields: [f], collapsed: true })
+		} else {
+			const key = f.group ?? ''
+			let section = byGroup.get(key)
+			if (!section) {
+				section = { title: f.group, fields: [] }
+				byGroup.set(key, section)
+				scalarSections.push(section)
+			}
+			section.fields.push(f)
+		}
+	}
+	return [...scalarSections, ...structural]
+}
+
+/** Build the editor's render plan from the collection's declarative layout (if any) + heuristics. */
+function resolveLayout(definition: CollectionDefinition | undefined, fields: FieldDefinition[]): RenderLayout {
+	const visible = sortByOrder(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 byName = new Map(visible.map(f => [f.name, f]))
+	const layout = definition?.layout
+
+	const sidebar: FieldDefinition[] = []
+	const inSidebar = new Set<string>()
+	for (const name of layout?.sidebar ?? []) {
+		const f = byName.get(name)
+		if (f && f.position !== 'header' && !inSidebar.has(name)) {
+			sidebar.push(f)
+			inSidebar.add(name)
+		}
+	}
+	for (const f of visible) {
+		if (f.position === 'header' || inSidebar.has(f.name)) continue
+		if (f.position === 'sidebar' || f.role) {
+			sidebar.push(f)
+			inSidebar.add(f.name)
+		}
+	}
+	sidebar.sort((a, b) => roleRank(a) - roleRank(b))
+
+	const main = visible.filter(f => f.position !== 'header' && !inSidebar.has(f.name))
+
+	let sections: RenderSection[]
+	if (layout?.sections && layout.sections.length > 0) {
+		const used = new Set<string>()
+		sections = layout.sections
+			.map(s => {
+				const secFields = s.fields.map(n => byName.get(n)).filter((f): f is FieldDefinition => f !== undefined && main.includes(f))
+				for (const f of secFields) used.add(f.name)
+				return { title: s.title, fields: secFields, collapsed: s.collapsed }
+			})
+			.filter(s => s.fields.length > 0)
+		const leftover = main.filter(f => !used.has(f.name))
+		if (leftover.length > 0) sections.push({ title: 'Other', fields: leftover })
+	} else {
+		sections = deriveDefaultSections(main)
+	}
+
+	const display = layout?.display ?? (sections.length > AUTO_TAB_THRESHOLD ? 'tabs' : 'sections')
+	return { header, sidebar, sections, display }
+}
+
+// ============================================================================
+// Field + section rendering
+// ============================================================================
 
-	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 }
+/** A single field row: label (+ type + help) and its editor widget. */
+function FieldRow({ field, draft, onField, ctx }: {
+	field: FieldDefinition
+	draft: EntryDraft
+	onField: (name: string, value: unknown) => void
+	ctx: EditorContext
+}) {
+	return (
+		<div className={`nua-cadmin-field${field.width === 'half' ? ' nua-cadmin-field-half' : ''}${field.role ? ` nua-cadmin-field-${field.role}` : ''}`}>
+			<div className="nua-cadmin-field-label">
+				<span>{fieldLabel(field)}</span>
+				<span className="nua-cadmin-field-type">{field.type}{field.required ? ' · required' : ''}</span>
+			</div>
+			{field.help ? <div className="nua-cadmin-field-help">{field.help}</div> : null}
+			<FieldEditor
+				field={field}
+				value={draft.frontmatter[field.name]}
+				onChange={value =>
+					onField(field.name, value)}
+				ctx={ctx}
+			/>
+		</div>
+	)
 }
 
-/** Render a column of fields, emitting a section header whenever `group` changes. */
-function FieldColumn({ fields, draft, onField, ctx }: {
+/** Width-aware grid of field rows (`width: 'half'` lets two share a row). */
+function FieldGrid({ 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>
+	return (
+		<div className="nua-cadmin-field-grid">
+			{fields.map(field => <FieldRow key={field.name} field={field} draft={draft} onField={onField} ctx={ctx} />)}
+		</div>
+	)
+}
+
+/** Render the main column's sections, either stacked (collapsible) or as tabs. */
+function SectionsView({ sections, display, draft, onField, ctx }: {
+	sections: RenderSection[]
+	display: 'sections' | 'tabs'
+	draft: EntryDraft
+	onField: (name: string, value: unknown) => void
+	ctx: EditorContext
+}) {
+	const [activeTab, setActiveTab] = useState(0)
+
+	if (display === 'tabs') {
+		const active = sections[Math.min(activeTab, sections.length - 1)]
+		return (
+			<div className="nua-cadmin-tabs">
+				<div className="nua-cadmin-tabbar" role="tablist">
+					{sections.map((s, i) => (
+						<button
+							key={s.title ?? `section-${i}`}
+							type="button"
+							role="tab"
+							aria-selected={i === activeTab}
+							className={`nua-cadmin-tab${i === activeTab ? ' is-active' : ''}`}
+							onClick={() => setActiveTab(i)}
+						>
+							{s.title ?? 'General'}
+						</button>
+					))}
 				</div>
-				<FieldEditor field={field} value={draft.frontmatter[field.name]} onChange={value => onField(field.name, value)} ctx={ctx} />
-			</div>,
+				{active ? <FieldGrid fields={active.fields} draft={draft} onField={onField} ctx={ctx} /> : null}
+			</div>
 		)
 	}
-	return <>{rows}</>
+
+	return (
+		<>
+			{sections.map((s, i) => {
+				// Untitled section → render fields directly (no collapsible chrome).
+				if (s.title === undefined) {
+					return <FieldGrid key={`section-${i}`} fields={s.fields} draft={draft} onField={onField} ctx={ctx} />
+				}
+				return (
+					<details key={s.title} className="nua-cadmin-section" open={!s.collapsed}>
+						<summary className="nua-cadmin-section-summary">{s.title}</summary>
+						<div className="nua-cadmin-section-body">
+							<FieldGrid fields={s.fields} draft={draft} onField={onField} ctx={ctx} />
+						</div>
+					</details>
+				)
+			})}
+		</>
+	)
 }
 
 // ============================================================================
@@ -147,9 +310,13 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 	onRenamed: (newSlug: string) => void
 }) {
 	const fields = useMemo(() => definition?.fields ?? [], [definition])
+	const isMdx = definition?.fileExtension === 'mdx'
 	const [draft, setDraft] = useState<EntryDraft | null>(null)
 	const [loadError, setLoadError] = useState<Error | null>(null)
 	const [status, setStatus] = useState<SaveStatus>({ kind: 'idle' })
+	// Component definitions for the MDX block picker/labels. Only needed for mdx
+	// bodies; degrades to an empty list against an older sidecar (no /components).
+	const [components, setComponents] = useState<ComponentDefinition[]>([])
 
 	// `baseHash` is the optimistic-concurrency token. It starts undefined (GET
 	// exposes no hash) and is adopted from each successful `MutationResult.sourceHash`.
@@ -159,6 +326,8 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	const ctx: EditorContext = useMemo(() => ({ client, collection, slug }), [client, collection, slug])
+	// Upload context for the MDX editor's media library (files entry-relative uploads).
+	const mediaContext = useMemo(() => ({ collection, entry: slug }), [collection, slug])
 
 	// Load the entry → build the native draft.
 	useEffect(() => {
@@ -181,6 +350,23 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 		}
 	}, [client, collection, slug, fields])
 
+	// Load component definitions for the MDX editor (once per client; mdx only).
+	useEffect(() => {
+		if (!isMdx) return
+		let active = true
+		client.getComponents().then(
+			defs => {
+				if (active) setComponents(defs)
+			},
+			() => {
+				if (active) setComponents([])
+			},
+		)
+		return () => {
+			active = false
+		}
+	}, [client, isMdx])
+
 	// Persist the current draft. `force` re-uses the server hash to win a conflict.
 	const persist = useCallback(
 		async (next: EntryDraft, baseHash: string | undefined) => {
@@ -301,7 +487,7 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 		)
 	}
 
-	const { header, sidebar, main } = partitionFields(fields)
+	const { header, sidebar, sections, display } = resolveLayout(definition, fields)
 
 	return (
 		<div className="nua-cadmin-editor">
@@ -315,22 +501,24 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 			{header.length > 0
 				? (
 					<div className="nua-cadmin-editor-header-fields">
-						<FieldColumn fields={header} draft={draft} onField={onField} ctx={ctx} />
+						<FieldGrid 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} />
+					<SectionsView sections={sections} display={display} 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>
+									<span className="nua-cadmin-field-type">{isMdx ? 'mdx' : 'markdown'}</span>
 								</div>
-								<textarea className="nua-cadmin-body-editor" value={draft.body} rows={16} onChange={e => onBody(e.target.value)} />
+								{isMdx
+									? <MdxBodyEditor value={draft.body} onChange={onBody} components={components} media={client} mediaContext={mediaContext} />
+									: <textarea className="nua-cadmin-body-editor" value={draft.body} rows={16} onChange={e => onBody(e.target.value)} />}
 							</div>
 						)
 						: null}
@@ -338,7 +526,7 @@ export function EntryEditor({ client, definition, collection, slug, onDeleted, o
 				{sidebar.length > 0
 					? (
 						<div className="nua-cadmin-editor-sidebar">
-							<FieldColumn fields={sidebar} draft={draft} onField={onField} ctx={ctx} />
+							<FieldGrid fields={sidebar} draft={draft} onField={onField} ctx={ctx} />
 						</div>
 					)
 					: null}

package/src/field-editor.tsx

@@ -9,10 +9,14 @@
  */
 
 import { blankValue, type CmsClient, coerceInput, valueToArray, valueToBoolean, valueToInput, valueToObject } from '@nuasite/cms-client'
-import type { FieldDefinition, FieldType } from '@nuasite/cms-types'
-import { useCallback, useEffect, useState } from 'react'
+import { MdxBodyEditor } from '@nuasite/cms-mdx-editor'
+import type { ComponentDefinition, FieldDefinition, FieldType } from '@nuasite/cms-types'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { MediaPicker } from './media-picker'
 
+/** Markdown fields use the rich editor with no component blocks (plain prose + media). */
+const NO_COMPONENTS: ComponentDefinition[] = []
+
 /** Cross-cutting services a widget may need (media uploads, reference lookups). */
 export interface EditorContext {
 	client: CmsClient
@@ -62,15 +66,58 @@ function TextWidget({ field, value, onChange }: { field: FieldDefinition; value:
 	)
 }
 
-function TextareaWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+/** Textarea that grows with its content (no inner scrollbar), with a `rows` floor. */
+function AutosizeTextarea(
+	{ value, rows, placeholder, maxLength, onChange }: {
+		value: string
+		rows: number
+		placeholder?: string
+		maxLength?: number
+		onChange: (v: string) => void
+	},
+) {
+	const ref = useRef<HTMLTextAreaElement>(null)
+	useEffect(() => {
+		const el = ref.current
+		if (!el) return
+		el.style.height = 'auto'
+		el.style.height = `${el.scrollHeight}px`
+	}, [value])
 	return (
 		<textarea
-			className="nua-cadmin-textarea"
+			ref={ref}
+			className="nua-cadmin-textarea nua-cadmin-textarea-autosize"
+			value={value}
+			rows={rows}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			onChange={e => onChange(e.target.value)}
+		/>
+	)
+}
+
+function TextareaWidget({ field, value, onChange }: { field: FieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+	return (
+		<AutosizeTextarea
 			value={valueToInput(value)}
 			rows={field.hints?.rows ?? 4}
 			placeholder={field.hints?.placeholder}
 			maxLength={field.hints?.maxLength}
-			onChange={e => onChange(e.target.value)}
+			onChange={onChange}
+		/>
+	)
+}
+
+/** Markdown field — the rich MDX/markdown WYSIWYG editor, reused for frontmatter markdown values. */
+function MarkdownWidget({ value, onChange, ctx }: { value: unknown; onChange: (v: unknown) => void; ctx: EditorContext }) {
+	const mediaContext = useMemo(() => ({ collection: ctx.collection, entry: ctx.slug }), [ctx.collection, ctx.slug])
+	return (
+		<MdxBodyEditor
+			value={valueToInput(value)}
+			onChange={onChange}
+			components={NO_COMPONENTS}
+			media={ctx.client}
+			mediaContext={mediaContext}
 		/>
 	)
 }
@@ -304,6 +351,8 @@ export function FieldEditor({ field, value, onChange, ctx }: FieldEditorProps) {
 			return <TextWidget field={field} value={value} onChange={onChange} />
 		case 'textarea':
 			return <TextareaWidget field={field} value={value} onChange={onChange} />
+		case 'markdown':
+			return <MarkdownWidget value={value} onChange={onChange} ctx={ctx} />
 		case 'number':
 			return <NumberWidget field={field} value={value} onChange={onChange} />
 		case 'year':

package/src/media-picker.tsx

@@ -71,12 +71,26 @@ export function MediaPicker({ client, value, collection, entry, field, accept, o
 		}
 	}
 
-	const looksLikeUrl = value !== '' && /^(https?:\/\/|\/)/.test(value)
 	const canUpload = state.kind === 'ready' || state.kind === 'error'
 
+	// Preview source: absolute URLs (and host-served root-relative / data URLs) load
+	// directly; an entry-relative path (e.g. an Astro `image()` value like
+	// `../../src/assets/x.webp`) is resolved + streamed by the sidecar, which needs
+	// the owning entry's slug. Only render an `<img>` when the value looks like an
+	// image, so `file` fields (PDFs, etc.) don't show a broken thumbnail.
+	const isAbsolute = value !== '' && /^(https?:\/\/|data:|\/)/.test(value)
+	const previewSrc = value === ''
+		? ''
+		: isAbsolute
+		? value
+		: entry !== undefined
+		? client.mediaFileUrl(collection, entry, value)
+		: ''
+	const showPreview = previewSrc !== '' && (value.startsWith('data:image/') || /\.(png|jpe?g|gif|webp|avif|svg|ico|bmp)(\?|#|$)/i.test(value))
+
 	return (
 		<div className="nua-cadmin-media">
-			{looksLikeUrl ? <img className="nua-cadmin-img" src={value} alt="" /> : null}
+			{showPreview ? <img className="nua-cadmin-img" src={previewSrc} alt="" /> : null}
 			<div className="nua-cadmin-media-row">
 				<input
 					type="text"