@nuasite/cms 0.28.0 → 0.29.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/collection-scanner.ts

@@ -469,7 +469,7 @@ function parseContentConfigReferences(
 }
 
 /** Valid field type names exported by `n` helper from @nuasite/cms */
-const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
+const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'tel', 'color', 'date', 'datetime', 'time', 'textarea'])
 
 /**
  * Parse the content config file to extract explicit field type hints:
@@ -562,17 +562,8 @@ function applyCollectionOrderBy(
 	}
 }
 
-/**
- * Extract all top-level field names from a schema body string.
- * Matches `fieldName:` patterns at the start of lines within z.object({...}).
- */
-function extractSchemaFieldNames(schemaBody: string): Set<string> {
-	const names = new Set<string>()
-	for (const m of schemaBody.matchAll(/^\s*(\w+)\s*:/gm)) {
-		names.add(m[1]!)
-	}
-	return names
-}
+/** Match `fieldName:` patterns at the start of lines within a schema body. */
+const SCHEMA_FIELD_PATTERN = /^\s*(\w+)\s*:/gm
 
 /**
  * When a content config schema exists, filter scanned fields to only include
@@ -586,34 +577,45 @@ function filterFieldsBySchema(
 	for (const { collectionName, schemaBody } of schemaBlocks) {
 		const def = collections[collectionName]
 		if (!def) continue
-		const schemaNames = extractSchemaFieldNames(schemaBody)
+		const schemaNames = new Set<string>()
+		for (const m of schemaBody.matchAll(SCHEMA_FIELD_PATTERN)) {
+			schemaNames.add(m[1]!)
+		}
 		if (schemaNames.size === 0) continue
 		def.fields = def.fields.filter(f => schemaNames.has(f.name))
 	}
 }
 
 /**
- * Apply field type overrides from config parsing to scanned collections.
+ * Apply a parsed per-field config map to scanned collection definitions.
  */
-function applyConfigFieldTypes(
+function applyPerFieldConfig<T>(
 	collections: Record<string, CollectionDefinition>,
-	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+	configMap: Map<string, Map<string, T>>,
+	apply: (field: FieldDefinition, value: T) => void,
 ): void {
-	const configTypes = parseContentConfigFieldTypes(schemaBlocks)
-	for (const [collectionName, fieldTypes] of configTypes) {
+	for (const [collectionName, fieldMap] of configMap) {
 		const def = collections[collectionName]
 		if (!def) continue
-		for (const [fieldName, override] of fieldTypes) {
+		for (const [fieldName, value] of fieldMap) {
 			const field = def.fields.find(f => f.name === fieldName)
 			if (!field) continue
-			field.type = override.type
-			if (override.options) {
-				field.options = override.options
-			}
+			apply(field, value)
 		}
 	}
 }
 
+/** Apply field type overrides from config parsing to scanned collections. */
+function applyConfigFieldTypes(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	applyPerFieldConfig(collections, parseContentConfigFieldTypes(schemaBlocks), (field, override) => {
+		field.type = override.type
+		if (override.options) field.options = override.options
+	})
+}
+
 /** All recognized hint keys */
 const VALID_HINT_KEYS = new Set(['min', 'max', 'step', 'placeholder', 'maxLength', 'minLength', 'rows', 'accept'])
 /** Subset of hint keys that take numeric values */
@@ -672,22 +674,53 @@ function parseContentConfigFieldHints(
 }
 
 /**
- * Apply field hints from content config parsing to scanned collections.
+ * Parse required/optional status from schema blocks.
+ * In Zod, fields are required by default. `.optional()`, `.nullable()`, and `.default(...)` make them not required.
  */
+function parseContentConfigRequiredFields(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, boolean>> {
+	const result = new Map<string, Map<string, boolean>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, boolean>()
+
+		const fieldMatches = [...schemaBody.matchAll(SCHEMA_FIELD_PATTERN)]
+		for (let i = 0; i < fieldMatches.length; i++) {
+			const fieldName = fieldMatches[i]![1]!
+			const start = fieldMatches[i]!.index!
+			const end = i + 1 < fieldMatches.length ? fieldMatches[i + 1]!.index! : schemaBody.length
+			const fieldSource = schemaBody.slice(start, end)
+
+			const isOptional = /\.(optional|nullable|default)\s*\(/.test(fieldSource)
+			fields.set(fieldName, !isOptional)
+		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
+	}
+	return result
+}
+
+/** Apply field hints from content config parsing to scanned collections. */
 function applyConfigFieldHints(
 	collections: Record<string, CollectionDefinition>,
 	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
 ): void {
-	const configHints = parseContentConfigFieldHints(schemaBlocks)
-	for (const [collectionName, fieldHints] of configHints) {
-		const def = collections[collectionName]
-		if (!def) continue
-		for (const [fieldName, hints] of fieldHints) {
-			const field = def.fields.find(f => f.name === fieldName)
-			if (!field) continue
-			field.hints = hints
-		}
-	}
+	applyPerFieldConfig(collections, parseContentConfigFieldHints(schemaBlocks), (field, hints) => {
+		field.hints = hints
+	})
+}
+
+/** Apply required/optional status from content config to scanned collections. */
+function applyConfigRequiredFields(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	applyPerFieldConfig(collections, parseContentConfigRequiredFields(schemaBlocks), (field, required) => {
+		field.required = required
+	})
 }
 
 /**
@@ -925,11 +958,12 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: apply explicit type hints, field hints, detect references, derived fields, and ordering
+	// Post-scan: apply explicit type hints, field hints, required status, detect references, derived fields, and ordering
 	const schemaBlocks = await parseContentConfigSchemaBlocks()
 	filterFieldsBySchema(collections, schemaBlocks)
 	applyConfigFieldTypes(collections, schemaBlocks)
 	applyConfigFieldHints(collections, schemaBlocks)
+	applyConfigRequiredFields(collections, schemaBlocks)
 	await detectReferenceFields(collections, schemaBlocks)
 	detectDerivedHrefFields(collections)
 	applyCollectionOrderBy(collections, schemaBlocks)

package/src/dev-middleware.ts

@@ -2,7 +2,6 @@ import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
 import { getProjectRoot } from './config'
-import { awaitNextContentStoreUpdate } from './content-invalidator'
 import { handleCmsApiRoute } from './handlers/api-routes'
 import { buildMapPattern, detectArrayPattern, extractArrayElementProps, parseInlineArrayName } from './handlers/array-ops'
 import {
@@ -104,43 +103,6 @@ export function createDevMiddleware(
 	if (options.enableCmsApi) {
 		const projectRoot = getProjectRoot()
 
-		/**
-		 * Hold the HTTP response for a `markdown/update` (or equivalent) call
-		 * until Astro's content layer has actually re-synced the edited file.
-		 *
-		 * The race we're fixing: handleUpdateMarkdown writes the file and
-		 * returns immediately, the editor then triggers a full-reload, and
-		 * the next page render reads a still-cached `astro:data-layer-content`
-		 * virtual module — so the user sees their edit disappear until Astro's
-		 * async chain (glob loader → syncData → 500 ms save debounce → atomic
-		 * write → fs.watch → invalidateModule) finally catches up.
-		 *
-		 * The fix, end to end:
-		 *
-		 *   1. `server.watcher.emit('change', fullPath)` kicks Astro's glob
-		 *      loader directly. It is registered on this exact watcher (see
-		 *      astro/dist/core/dev/dev.js — `viteServer.watcher` is handed to
-		 *      `globalContentLayer.init`), so synthetic change events fire its
-		 *      `onChange` handler and trigger `syncData`. This also works
-		 *      around Vite's bundled chokidar missing some edits.
-		 *   2. `awaitNextContentStoreUpdate` parks until the shared data-store
-		 *      watcher (in `vite-plugin.ts`) observes the resulting atomic
-		 *      write and finishes invalidating the SSR module graph.
-		 *   3. Only then do we return — so the subsequent full-reload lands
-		 *      on a page that will re-execute with fresh content.
-		 *
-		 * The timeout fallback covers edits that legitimately do not rewrite
-		 * the data store (Astro's MutableDataStore skips identical writes).
-		 * In that case no fs.watch event will ever fire, and 3 s is plenty of
-		 * budget before we give up and let the response through anyway.
-		 */
-		const notifyContentChanged = async (filePath: string): Promise<void> => {
-			const fullPath = path.resolve(projectRoot, filePath)
-			const waiter = awaitNextContentStoreUpdate(3000)
-			server.watcher?.emit('change', fullPath)
-			await waiter
-		}
-
 		server.middlewares.use((req, res, next) => {
 			const url = req.url || ''
 			if (!url.startsWith('/_nua/cms/')) {
@@ -152,7 +114,7 @@ export function createDevMiddleware(
 
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
-			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter, notifyContentChanged)
+			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter)
 				.catch((error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -177,11 +139,31 @@ export function createDevMiddleware(
 				pageMap.set(pagePath, { pathname: pagePath })
 			}
 
-			// 2. Add collection entry pages from collection definitions
+			// 2. Add collection entry pages from collection definitions,
+			//    pre-populating pathnames from filesystem routes so the collections
+			//    browser can redirect to detail pages without visiting them first.
+			//    We build patched copies rather than mutating the originals so that
+			//    heuristic pathnames don't persist if the route file is later removed.
 			const collectionDefs = manifestWriter.getCollectionDefinitions()
-			for (const def of Object.values(collectionDefs)) {
-				if (def.entries) {
-					for (const entry of def.entries) {
+			const collectionRoutes = await discoverCollectionRoutes()
+			const responseCollectionDefs: Record<string, CollectionDefinition> = {}
+
+			for (const [name, def] of Object.entries(collectionDefs)) {
+				const routePrefix = collectionRoutes.get(def.name)
+				const needsPatching = routePrefix && def.entries?.some(e => !e.pathname)
+
+				if (!needsPatching) {
+					responseCollectionDefs[name] = def
+				} else {
+					responseCollectionDefs[name] = {
+						...def,
+						entries: def.entries!.map(e => e.pathname ? e : { ...e, pathname: `${routePrefix}${e.slug}` }),
+					}
+				}
+
+				const entries = responseCollectionDefs[name].entries
+				if (entries) {
+					for (const entry of entries) {
 						if (entry.pathname) {
 							pageMap.set(entry.pathname, { pathname: entry.pathname, title: entry.title })
 						}
@@ -205,8 +187,8 @@ export function createDevMiddleware(
 				availableTextStyles: manifestWriter.getAvailableTextStyles(),
 				pages,
 			}
-			if (Object.keys(collectionDefs).length > 0) {
-				manifest.collectionDefinitions = collectionDefs
+			if (Object.keys(responseCollectionDefs).length > 0) {
+				manifest.collectionDefinitions = responseCollectionDefs
 			}
 			const mdxComponents = manifestWriter.getMdxComponents()
 			if (mdxComponents) {
@@ -626,6 +608,65 @@ async function discoverPagesFromFilesystem(): Promise<string[]> {
 	return pages
 }
 
+/** Cached result of collection route discovery; invalidated by file watcher */
+let collectionRoutesCache: Map<string, string> | null = null
+
+/** Invalidate the cached collection routes (called from vite-plugin when route files change) */
+export function invalidateCollectionRoutesCache() {
+	collectionRoutesCache = null
+}
+
+/**
+ * Discover collection route patterns by scanning src/pages for dynamic route files
+ * (e.g. [slug].astro) that call getCollection(). Returns a map from collection name
+ * to the URL prefix (e.g. 'blog' → '/blog/'). Result is cached after first call.
+ */
+async function discoverCollectionRoutes(): Promise<Map<string, string>> {
+	if (collectionRoutesCache) return collectionRoutesCache
+
+	const projectRoot = getProjectRoot()
+	const pagesDir = path.join(projectRoot, 'src', 'pages')
+	const routes = new Map<string, string>()
+
+	try {
+		await fs.access(pagesDir)
+	} catch {
+		collectionRoutesCache = routes
+		return routes
+	}
+
+	async function walk(dir: string, urlPrefix: string) {
+		const entries = await fs.readdir(dir, { withFileTypes: true })
+		for (const entry of entries) {
+			if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+			const fullPath = path.join(dir, entry.name)
+			if (entry.isDirectory()) {
+				// Skip directories with dynamic segments
+				if (entry.name.includes('[')) continue
+				await walk(fullPath, `${urlPrefix}${entry.name}/`)
+			} else {
+				const ext = path.extname(entry.name)
+				if (!PAGE_EXTENSIONS.has(ext)) continue
+				// Only interested in dynamic route files
+				if (!entry.name.includes('[')) continue
+
+				try {
+					const content = await fs.readFile(fullPath, 'utf-8')
+					const match = content.match(/getCollection\(\s*['"](\w+)['"]\s*\)/)
+					if (match?.[1]) {
+						routes.set(match[1], urlPrefix)
+					}
+				} catch { /* skip unreadable files */ }
+			}
+		}
+	}
+
+	await walk(pagesDir, '/')
+	collectionRoutesCache = routes
+	return routes
+}
+
 function mediaMimeFromExt(ext: string): string {
 	const map: Record<string, string> = {
 		'.jpg': 'image/jpeg',

package/src/editor/components/collections-browser.tsx

@@ -11,7 +11,6 @@ import {
 	selectBrowserCollection,
 	selectedBrowserCollection,
 } from '../signals'
-import { savePendingEntryNavigation } from '../storage'
 import { ChevronRightIcon, CollectionIcon } from './create-page-modal'
 import { CloseButton, ModalBackdrop, ModalHeader } from './modal-shell'
 
@@ -51,16 +50,9 @@ export function CollectionsBrowser() {
 		const def = selectedDef
 		if (!def) return null
 
-		const handleEntryClick = (slug: string, sourcePath: string, pathname?: string) => {
+		const handleEntryClick = (slug: string, sourcePath: string) => {
 			closeCollectionsBrowser()
-			if (pathname) {
-				// Navigate to the collection detail page to edit inline.
-				savePendingEntryNavigation({ collectionName: selected, slug, sourcePath, pathname })
-				window.location.href = pathname
-			} else {
-				// No detail page exists for this entry — open the markdown editor inline.
-				openMarkdownEditorForEntry(selected, slug, sourcePath, def)
-			}
+			openMarkdownEditorForEntry(selected, slug, sourcePath, def)
 		}
 
 		const handleAddNew = () => {
@@ -201,7 +193,7 @@ export function CollectionsBrowser() {
 								: (
 									<button
 										type="button"
-										onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
+										onClick={() => handleEntryClick(entry.slug, entry.sourcePath)}
 										class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-lg transition-colors text-left group"
 										data-cms-ui
 									>

package/src/editor/components/create-page-modal.tsx

@@ -206,7 +206,12 @@ function NewPageForm() {
 	}
 
 	return (
-		<>
+		<form
+			onSubmit={(e) => {
+				e.preventDefault()
+				handleSubmit()
+			}}
+		>
 			<ModalHeader title="New Blank Page" onBack={() => setCreatePageMode('pick')} onClose={() => resetCreatePageState()} />
 			<div class="p-5 space-y-4">
 				<Field label="Title">
@@ -215,6 +220,7 @@ function NewPageForm() {
 						value={form.title}
 						onInput={(e) => form.handleTitleChange((e.target as HTMLInputElement).value)}
 						placeholder="My New Page"
+						required
 						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
 						autoFocus
 						data-cms-ui
@@ -229,6 +235,7 @@ function NewPageForm() {
 							value={form.slug}
 							onInput={(e) => form.handleSlugChange((e.target as HTMLInputElement).value)}
 							placeholder="my-new-page"
+							required
 							class="flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
 							data-cms-ui
 						/>
@@ -253,16 +260,15 @@ function NewPageForm() {
 			<ModalFooter>
 				<CancelButton onClick={() => resetCreatePageState()} />
 				<button
-					type="button"
-					onClick={handleSubmit}
-					disabled={!canSubmit}
+					type="submit"
+					disabled={!!form.slugError || form.slugChecking || form.isSubmitting}
 					class="px-5 py-2.5 text-sm font-medium rounded-cms-pill transition-colors cursor-pointer bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover disabled:opacity-40 disabled:cursor-not-allowed"
 					data-cms-ui
 				>
 					Create Page
 				</button>
 			</ModalFooter>
-		</>
+		</form>
 	)
 }
 
@@ -302,7 +308,12 @@ function DuplicatePageForm() {
 	}
 
 	return (
-		<>
+		<form
+			onSubmit={(e) => {
+				e.preventDefault()
+				handleSubmit()
+			}}
+		>
 			<ModalHeader title="Duplicate Page" onBack={() => setCreatePageMode('pick')} onClose={() => resetCreatePageState()} />
 			<div class="p-5 space-y-4">
 				<Field label="Source Page">
@@ -312,6 +323,7 @@ function DuplicatePageForm() {
 							setSourcePath((e.target as HTMLSelectElement).value)
 							form.resetSlugManual()
 						}}
+						required
 						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white focus:outline-none focus:border-cms-primary/50"
 						data-cms-ui
 					>
@@ -342,6 +354,7 @@ function DuplicatePageForm() {
 							value={form.slug}
 							onInput={(e) => form.handleSlugChange((e.target as HTMLInputElement).value)}
 							placeholder="new-page-slug"
+							required
 							class="flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
 							data-cms-ui
 						/>
@@ -363,16 +376,15 @@ function DuplicatePageForm() {
 			<ModalFooter>
 				<CancelButton onClick={() => resetCreatePageState()} />
 				<button
-					type="button"
-					onClick={handleSubmit}
-					disabled={!canSubmit}
+					type="submit"
+					disabled={!!form.slugError || form.slugChecking || form.isSubmitting}
 					class="px-5 py-2.5 text-sm font-medium rounded-cms-pill transition-colors cursor-pointer bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover disabled:opacity-40 disabled:cursor-not-allowed"
 					data-cms-ui
 				>
 					Duplicate Page
 				</button>
 			</ModalFooter>
-		</>
+		</form>
 	)
 }
 

package/src/editor/components/fields.tsx

@@ -45,9 +45,12 @@ export interface TextFieldProps {
 	isDirty?: boolean
 	onReset?: () => void
 	inputType?: string
+	required?: boolean
 }
 
-export function TextField({ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
+export function TextField(
+	{ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text', required }: TextFieldProps,
+) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -57,6 +60,7 @@ export function TextField({ label, value, placeholder, maxLength, minLength, onC
 				placeholder={placeholder}
 				maxLength={maxLength}
 				minLength={minLength}
+				required={required}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 				class={cn(
 					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -82,9 +86,10 @@ export interface ImageFieldProps {
 	onBrowse: () => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset }: ImageFieldProps) {
+export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset, required }: ImageFieldProps) {
 	const hasImage = !!value && value.length > 0
 
 	return (
@@ -114,6 +119,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 min-w-0 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -147,9 +153,10 @@ export interface ColorFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ColorField({ label, value, placeholder, onChange, isDirty, onReset }: ColorFieldProps) {
+export function ColorField({ label, value, placeholder, onChange, isDirty, onReset, required }: ColorFieldProps) {
 	const colorValue = value || '#000000'
 	// Validate hex for the native picker (must be #rrggbb)
 	const isValidHex = /^#[0-9a-fA-F]{6}$/.test(colorValue)
@@ -170,6 +177,7 @@ export function ColorField({ label, value, placeholder, onChange, isDirty, onRes
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder ?? '#000000'}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -278,9 +286,10 @@ export interface NumberFieldProps {
 	onChange: (value: number | undefined) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset }: NumberFieldProps) {
+export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset, required }: NumberFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -291,6 +300,7 @@ export function NumberField({ label, value, placeholder, min, max, step, onChang
 				min={min}
 				max={max}
 				step={step}
+				required={required}
 				onInput={(e) => {
 					const val = (e.target as HTMLInputElement).value
 					onChange(val === '' ? undefined : Number(val))
@@ -336,9 +346,10 @@ export interface ComboBoxFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset }: ComboBoxFieldProps) {
+export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset, required }: ComboBoxFieldProps) {
 	const [query, setQuery] = useState('')
 	const [isOpen, setIsOpen] = useState(false)
 	const [highlightedIndex, setHighlightedIndex] = useState(-1)
@@ -378,6 +389,13 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 	}, [onChange])
 
 	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			if (isOpen && highlightedIndex >= 0 && filtered[highlightedIndex]) {
+				selectOption(filtered[highlightedIndex]!.value)
+			}
+			return
+		}
 		if (!isOpen || filtered.length === 0) return
 		if (e.key === 'ArrowDown') {
 			e.preventDefault()
@@ -385,9 +403,6 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault()
 			setHighlightedIndex(i => Math.max(i - 1, 0))
-		} else if (e.key === 'Enter' && highlightedIndex >= 0) {
-			e.preventDefault()
-			selectOption(filtered[highlightedIndex]!.value)
 		} else if (e.key === 'Escape') {
 			setIsOpen(false)
 		}
@@ -411,6 +426,7 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 				type="text"
 				value={value ?? ''}
 				placeholder={placeholder}
+				required={required}
 				onInput={handleInput}
 				onFocus={handleFocus}
 				onBlur={handleBlur}

package/src/editor/components/frontmatter-fields.tsx

@@ -394,7 +394,7 @@ export function SchemaFrontmatterField({
 	value,
 	onChange,
 }: SchemaFrontmatterFieldProps) {
-	const label = formatFieldLabel(field.name)
+	const label = field.required ? `${formatFieldLabel(field.name)} *` : formatFieldLabel(field.name)
 	const hints = field.hints
 
 	switch (field.type) {
@@ -410,6 +410,7 @@ export function SchemaFrontmatterField({
 					minLength={hints?.minLength as number | undefined}
 					onChange={(v) => onChange(v)}
 					inputType={field.type === 'text' ? undefined : field.type}
+					required={field.required}
 				/>
 			)
 
@@ -425,6 +426,7 @@ export function SchemaFrontmatterField({
 							onChange(url)
 						})
 					}}
+					required={field.required}
 				/>
 			)
 
@@ -435,6 +437,7 @@ export function SchemaFrontmatterField({
 					value={(value as string) ?? ''}
 					placeholder={getPlaceholder(field)}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -448,6 +451,7 @@ export function SchemaFrontmatterField({
 						placeholder={hints?.placeholder ?? getPlaceholder(field)}
 						rows={hints?.rows ?? 3}
 						maxLength={hints?.maxLength as number | undefined}
+						required={field.required}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40 resize-none"
 						data-cms-ui
 					/>
@@ -465,6 +469,7 @@ export function SchemaFrontmatterField({
 						value={(value as string) ?? ''}
 						min={hints?.min != null ? String(hints.min) : undefined}
 						max={hints?.max != null ? String(hints.max) : undefined}
+						required={field.required}
 						onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
 						data-cms-ui
@@ -482,6 +487,7 @@ export function SchemaFrontmatterField({
 					max={typeof hints?.max === 'number' ? hints.max : undefined}
 					step={hints?.step}
 					onChange={(v) => onChange(v ?? 0)}
+					required={field.required}
 				/>
 			)
 
@@ -505,6 +511,7 @@ export function SchemaFrontmatterField({
 						label: opt,
 					}))}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -517,6 +524,7 @@ export function SchemaFrontmatterField({
 					placeholder={`Select ${label.toLowerCase()}...`}
 					options={refOptions}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 		}