@nuasite/cms 0.20.5 → 0.21.0

package/package.json

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

package/src/collection-scanner.ts

@@ -389,11 +389,10 @@ async function scanCollection(collectionPath: string, collectionName: string, co
 }
 
 /**
- * Parse the Astro content config file to extract explicit reference() declarations.
- * Returns a map: collectionName → { fieldName → { target, isArray } }
+ * Read and parse the Astro content config file, extracting schema blocks for each collection.
+ * Returns parsed blocks with collection names and their raw schema bodies.
  */
-async function parseContentConfigReferences(): Promise<Map<string, Map<string, { target: string; isArray: boolean }>>> {
-	const result = new Map<string, Map<string, { target: string; isArray: boolean }>>()
+async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName: string; schemaBody: string }>> {
 	const projectRoot = getProjectRoot()
 
 	for (const configPath of ['src/content/config.ts', 'src/content.config.ts']) {
@@ -401,7 +400,6 @@ async function parseContentConfigReferences(): Promise<Map<string, Map<string, {
 			const fullPath = path.join(projectRoot, configPath)
 			const content = await fs.readFile(fullPath, 'utf-8')
 
-			// Parse defineCollection blocks to extract schema bodies
 			const collectionBlocks = content.matchAll(
 				/(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*z\.object\s*\(\s*\{([\s\S]*?)\}\s*\)/g,
 			)
@@ -416,39 +414,125 @@ async function parseContentConfigReferences(): Promise<Map<string, Map<string, {
 				}
 			}
 
+			const blocks: Array<{ collectionName: string; schemaBody: string }> = []
 			for (const block of collectionBlocks) {
 				const varName = block[1]
 				const schemaBody = block[2]!
 				const collectionName = varName ? varToName.get(varName) : undefined
 				if (!collectionName) continue
-
-				const fields = new Map<string, { target: string; isArray: boolean }>()
-				const fieldRefs = schemaBody.matchAll(/(\w+)\s*:\s*(z\.array\s*\(\s*)?reference\s*\(\s*['"](\w+)['"]\s*\)/g)
-				for (const m of fieldRefs) {
-					fields.set(m[1]!, { target: m[3]!, isArray: !!m[2] })
-				}
-
-				if (fields.size > 0) {
-					result.set(collectionName, fields)
-				}
+				blocks.push({ collectionName, schemaBody })
 			}
 
-			if (result.size > 0) break // Found a config file with references
+			if (blocks.length > 0) return blocks
 		} catch {
 			// File doesn't exist, try next
 		}
 	}
+	return []
+}
+
+/**
+ * Parse the Astro content config file to extract explicit reference() declarations.
+ * Returns a map: collectionName → { fieldName → { target, isArray } }
+ */
+function parseContentConfigReferences(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, { target: string; isArray: boolean }>> {
+	const result = new Map<string, Map<string, { target: string; isArray: boolean }>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, { target: string; isArray: boolean }>()
+		const fieldRefs = schemaBody.matchAll(/(\w+)\s*:\s*(z\.array\s*\(\s*)?reference\s*\(\s*['"](\w+)['"]\s*\)/g)
+		for (const m of fieldRefs) {
+			fields.set(m[1]!, { target: m[3]!, isArray: !!m[2] })
+		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
+	}
 	return result
 }
 
+/** Valid field type names exported by `field` helper from @nuasite/cms */
+const FIELD_HELPER_TYPES = new Set(['image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
+
+/**
+ * Parse the content config file to extract explicit field type hints:
+ * - `field.image(...)`, `field.url(...)`, etc. from @nuasite/cms
+ * - `z.enum([...])` for select options
+ *
+ * Returns a map: collectionName → fieldName → { type, options? }
+ */
+function parseContentConfigFieldTypes(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, { type: FieldType; options?: string[] }>> {
+	const result = new Map<string, Map<string, { type: FieldType; options?: string[] }>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, { type: FieldType; options?: string[] }>()
+
+		// Detect field.image(...), field.url(...), etc.
+		const fieldHelpers = schemaBody.matchAll(/(\w+)\s*:\s*field\.(\w+)\s*\(/g)
+		for (const m of fieldHelpers) {
+			const fieldName = m[1]!
+			const helperName = m[2]!
+			if (FIELD_HELPER_TYPES.has(helperName)) {
+				fields.set(fieldName, { type: helperName as FieldType })
+			}
+		}
+
+		// Detect z.enum(['a', 'b', 'c'])
+		const enumFields = schemaBody.matchAll(/(\w+)\s*:\s*z\.enum\s*\(\s*\[([\s\S]*?)\]\s*\)/g)
+		for (const m of enumFields) {
+			const fieldName = m[1]!
+			const enumBody = m[2]!
+			const options = [...enumBody.matchAll(/['"]([^'"]+)['"]/g)].map(o => o[1]!)
+			if (options.length > 0) {
+				fields.set(fieldName, { type: 'select', options })
+			}
+		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
+	}
+	return result
+}
+
+/**
+ * Apply field type overrides from config parsing to scanned collections.
+ */
+function applyConfigFieldTypes(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	const configTypes = parseContentConfigFieldTypes(schemaBlocks)
+	for (const [collectionName, fieldTypes] of configTypes) {
+		const def = collections[collectionName]
+		if (!def) continue
+		for (const [fieldName, override] of fieldTypes) {
+			const field = def.fields.find(f => f.name === fieldName)
+			if (!field) continue
+			field.type = override.type
+			if (override.options) {
+				field.options = override.options
+			}
+		}
+	}
+}
+
 /**
  * After all collections are scanned, detect reference fields.
  * Prefers explicit reference() declarations from the content config file.
  * Falls back to heuristic slug matching when no config is available.
  */
-async function detectReferenceFields(collections: Record<string, CollectionDefinition>): Promise<void> {
+async function detectReferenceFields(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Promise<void> {
 	// Try parsing the content config first — this is the source of truth
-	const configRefs = await parseContentConfigReferences()
+	const configRefs = parseContentConfigReferences(schemaBlocks)
 	if (configRefs.size > 0) {
 		for (const [collectionName, fieldRefs] of configRefs) {
 			const def = collections[collectionName]
@@ -673,8 +757,10 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: detect cross-collection references and derived fields
-	await detectReferenceFields(collections)
+	// Post-scan: apply explicit type hints, detect references, and derived fields
+	const schemaBlocks = await parseContentConfigSchemaBlocks()
+	applyConfigFieldTypes(collections, schemaBlocks)
+	await detectReferenceFields(collections, schemaBlocks)
 	detectDerivedHrefFields(collections)
 
 	return collections

package/src/dev-middleware.ts

@@ -44,9 +44,6 @@ interface ViteDevServerLike {
 		on: (event: string, listener: (...args: any[]) => void) => any
 		removeListener: (event: string, listener: (...args: any[]) => void) => any
 	}
-	environments?: Record<string, {
-		moduleGraph: { invalidateAll: () => void }
-	}>
 }
 
 /**
@@ -115,17 +112,6 @@ export function createDevMiddleware(
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
 			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter)
-				.then(() => {
-					// Invalidate all Vite environment module caches after content-modifying
-					// routes so that a subsequent page reload serves fresh content.
-					// In sandboxed environments (e.g. E2B) chokidar doesn't detect file
-					// changes, leaving stale modules in Astro's SSR/prerender environments.
-					if (req.method === 'POST' && server.environments) {
-						for (const env of Object.values(server.environments)) {
-							env.moduleGraph.invalidateAll()
-						}
-					}
-				})
 				.catch((error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -181,6 +167,10 @@ export function createDevMiddleware(
 			if (Object.keys(collectionDefs).length > 0) {
 				manifest.collectionDefinitions = collectionDefs
 			}
+			const mdxComponents = manifestWriter.getMdxComponents()
+			if (mdxComponents) {
+				manifest.mdxComponents = mdxComponents
+			}
 			res.end(JSON.stringify(manifest, null, 2))
 			return
 		}

package/src/editor/api.ts

@@ -91,6 +91,8 @@ export async function fetchManifest(): Promise<CmsManifest> {
 		metadata: pageManifest?.metadata,
 		// SEO data from page-specific manifest
 		seo: pageManifest?.seo,
+		// MDX component allowlist from global manifest
+		mdxComponents: globalManifest?.mdxComponents,
 	} as CmsManifest
 }
 

package/src/editor/components/fields.tsx

@@ -42,14 +42,15 @@ export interface TextFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	inputType?: string
 }
 
-export function TextField({ label, value, placeholder, onChange, isDirty, onReset }: TextFieldProps) {
+export function TextField({ label, value, placeholder, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
 			<input
-				type="text"
+				type={inputType}
 				value={value ?? ''}
 				placeholder={placeholder}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}

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

@@ -1,5 +1,6 @@
 import type { ComponentChildren } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
+import { getCollectionEntryOptions } from '../manifest'
 import { renameMarkdownPage } from '../markdown-api'
 import {
 	config,
@@ -11,7 +12,7 @@ import {
 	updateMarkdownPageMeta,
 } from '../signals'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
-import { ComboBoxField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
+import { ColorField, ComboBoxField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
 import { groupFields } from './frontmatter-sidebar'
 
 function isArrayOfObjects(value: unknown[]): value is Record<string, unknown>[] {
@@ -188,7 +189,9 @@ export function CreateModeFrontmatter({
 	fields,
 	onSlugManualEdit,
 }: CreateModeFrontmatterProps) {
-	const displayFields = fields ?? collectionDefinition.fields
+	const allFields = fields ?? collectionDefinition.fields
+	// In create mode, skip complex fields (arrays, objects) — they can be edited after creation
+	const displayFields = allFields.filter(f => f.type !== 'array' && f.type !== 'object')
 	const groups = groupFields(displayFields)
 
 	return (
@@ -376,20 +379,6 @@ export function EditModeFrontmatter({
 	)
 }
 
-// ============================================================================
-// Collection Reference Helpers
-// ============================================================================
-
-function getCollectionEntryOptions(collectionName?: string): Array<{ value: string; label: string }> {
-	if (!collectionName) return []
-	const def = manifest.value.collectionDefinitions?.[collectionName]
-	if (!def?.entries) return []
-	return def.entries.map(e => ({
-		value: e.slug,
-		label: e.title ?? e.slug,
-	}))
-}
-
 // ============================================================================
 // Schema-aware Frontmatter Field
 // ============================================================================
@@ -410,12 +399,14 @@ export function SchemaFrontmatterField({
 	switch (field.type) {
 		case 'text':
 		case 'url':
+		case 'email':
 			return (
 				<TextField
 					label={label}
 					value={(value as string) ?? ''}
 					placeholder={getPlaceholder(field)}
 					onChange={(v) => onChange(v)}
+					inputType={field.type === 'text' ? undefined : field.type}
 				/>
 			)
 
@@ -434,6 +425,16 @@ export function SchemaFrontmatterField({
 				/>
 			)
 
+		case 'color':
+			return (
+				<ColorField
+					label={label}
+					value={(value as string) ?? ''}
+					placeholder={getPlaceholder(field)}
+					onChange={(v) => onChange(v)}
+				/>
+			)
+
 		case 'textarea':
 			return (
 				<div class="flex flex-col gap-1 col-span-2" data-cms-ui>
@@ -450,11 +451,13 @@ export function SchemaFrontmatterField({
 			)
 
 		case 'date':
+		case 'datetime':
+		case 'time':
 			return (
 				<div class="flex flex-col gap-1" data-cms-ui>
 					<label class="text-xs text-white/60 font-medium">{label}</label>
 					<input
-						type="date"
+						type={field.type === 'datetime' ? 'datetime-local' : field.type}
 						value={(value as string) ?? ''}
 						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"
@@ -496,7 +499,7 @@ export function SchemaFrontmatterField({
 			)
 
 		case 'reference': {
-			const refOptions = getCollectionEntryOptions(field.collection)
+			const refOptions = getCollectionEntryOptions(manifest.value, field.collection)
 			return (
 				<ComboBoxField
 					label={label}
@@ -512,7 +515,7 @@ export function SchemaFrontmatterField({
 			const items = Array.isArray(value) ? value : []
 			// Array of references — show multiselect with collection entries
 			if (field.itemType === 'reference' && field.collection) {
-				const refEntries = getCollectionEntryOptions(field.collection)
+				const refEntries = getCollectionEntryOptions(manifest.value, field.collection)
 				return (
 					<div class="col-span-2" data-cms-ui>
 						<MultiSelectField
@@ -536,7 +539,7 @@ export function SchemaFrontmatterField({
 					</div>
 				)
 			}
-			if (isArrayOfObjects(items)) {
+			if (field.itemType === 'object' || isArrayOfObjects(items)) {
 				return (
 					<ArrayOfObjectsField
 						label={label}
@@ -835,10 +838,18 @@ export function getPlaceholder(field: FieldDefinition): string {
 	switch (field.type) {
 		case 'url':
 			return 'https://...'
+		case 'email':
+			return 'name@example.com'
 		case 'image':
 			return '/images/...'
+		case 'color':
+			return '#000000'
 		case 'date':
 			return 'YYYY-MM-DD'
+		case 'datetime':
+			return 'YYYY-MM-DDTHH:MM'
+		case 'time':
+			return 'HH:MM'
 		default:
 			return `Enter ${formatFieldLabel(field.name).toLowerCase()}...`
 	}

package/src/editor/components/markdown-editor-overlay.tsx

@@ -2,13 +2,14 @@ import { type Editor, editorViewCtx } from '@milkdown/core'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { slugify } from '../../shared'
 import { updateMarkdownPage } from '../api'
-import { schedulePageReload, STORAGE_KEYS, Z_INDEX } from '../constants'
+import { STORAGE_KEYS, Z_INDEX } from '../constants'
 import { createMarkdownPage } from '../markdown-api'
 import {
 	config,
 	currentMarkdownPage,
 	isMarkdownPreview,
 	markdownEditorState,
+	pendingCollectionEntries,
 	resetMarkdownEditorState,
 	showToast,
 	startRedirectCountdown,
@@ -89,6 +90,22 @@ export function MarkdownEditorOverlay() {
 		}
 	}, [])
 
+	/** Create any collection entries that were queued during component insertion */
+	const flushPendingEntries = useCallback(async () => {
+		const entries = pendingCollectionEntries.value
+		if (entries.length === 0) return
+		pendingCollectionEntries.value = []
+		await Promise.all(entries.map(entry =>
+			createMarkdownPage(config.value, {
+				collection: entry.collection,
+				slug: entry.slug,
+				title: entry.title,
+				frontmatter: entry.frontmatter as any,
+				fileExtension: entry.fileExtension,
+			})
+		))
+	}, [])
+
 	const handleSave = useCallback(
 		async (content: string) => {
 			if (isSaving) return
@@ -97,6 +114,7 @@ export function MarkdownEditorOverlay() {
 
 			setIsSaving(true)
 			try {
+				await flushPendingEntries()
 				const result = await updateMarkdownPage(config.value.apiBase, {
 					filePath: currentPage.filePath,
 					content,
@@ -127,8 +145,6 @@ export function MarkdownEditorOverlay() {
 					// Clear pending entry navigation so editor doesn't auto-open after save
 					sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
 					resetMarkdownEditorState()
-
-					schedulePageReload()
 				} else {
 					showToast(result.error || 'Failed to save markdown', 'error')
 					setIsSaving(false)
@@ -162,6 +178,7 @@ export function MarkdownEditorOverlay() {
 
 		setIsSaving(true)
 		try {
+			await flushPendingEntries()
 			const isData = opts.collectionDefinition.type === 'data'
 
 			// Build frontmatter — for data collections include all fields; for markdown exclude title