@nuasite/cms 0.20.4 → 0.21.0

package/src/editor/components/prop-editor.tsx

@@ -1,4 +1,9 @@
+import { useMemo, useRef, useState } from 'preact/hooks'
+import { slugify } from '../../shared'
+import { getCollectionEntryOptions } from '../manifest'
+import { manifest, openMediaLibraryWithCallback, pendingCollectionEntries } from '../signals'
 import type { ComponentProp } from '../types'
+import { SchemaFrontmatterField } from './frontmatter-fields'
 
 export interface PropEditorProps {
 	prop: ComponentProp
@@ -6,10 +11,145 @@ export interface PropEditorProps {
 	onChange: (value: string) => void
 }
 
-export function PropEditor({ prop, value, onChange }: PropEditorProps) {
-	const isBoolean = prop.type === 'boolean'
-	const isNumber = prop.type === 'number'
+/**
+ * Parse a union of string literals like `'left' | 'right' | 'center'` into an array of options.
+ * Returns null if the type is not a pure string-literal union.
+ */
+function parseStringLiteralUnion(type: string): string[] | null {
+	const parts = type.split('|').map(s => s.trim())
+	const values: string[] = []
+	for (const part of parts) {
+		const match = part.match(/^['"](.+)['"]$/)
+		if (!match) return null
+		values.push(match[1]!)
+	}
+	return values.length > 0 ? values : null
+}
+
+/**
+ * Parse Reference<'collectionName'> and return the collection name, or null.
+ */
+function parseReference(type: string): string | null {
+	const match = type.match(/^Reference\s*<\s*['"](\w+)['"]\s*>$/)
+	return match?.[1] ?? null
+}
+
+const INPUT_TYPES: Record<string, string> = { number: 'number', url: 'url', date: 'date', datetime: 'datetime-local', time: 'time', email: 'email' }
+
+function renderPropInput(prop: ComponentProp, value: string, onChange: (value: string) => void) {
+	const typeLower = prop.type.toLowerCase()
+	const unionOptions = parseStringLiteralUnion(prop.type)
+	const referenceCollection = parseReference(prop.type)
+
+	if (typeLower === 'boolean') {
+		return (
+			<label class="flex items-center gap-2 cursor-pointer">
+				<input
+					type="checkbox"
+					checked={value === 'true'}
+					onChange={(e) => onChange((e.target as HTMLInputElement).checked ? 'true' : 'false')}
+					class="accent-cms-primary w-5 h-5 rounded"
+				/>
+				<span class="text-[13px] text-white">
+					{value === 'true' ? 'Enabled' : 'Disabled'}
+				</span>
+			</label>
+		)
+	}
+
+	if (referenceCollection) {
+		return <ReferenceSelect collection={referenceCollection} value={value} required={prop.required} onChange={onChange} />
+	}
+
+	if (unionOptions) {
+		return (
+			<select
+				value={value}
+				onChange={(e) => onChange((e.target as HTMLSelectElement).value)}
+				class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+			>
+				{!prop.required && <option value="">— None —</option>}
+				{unionOptions.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+			</select>
+		)
+	}
+
+	if (typeLower === 'image') {
+		return (
+			<div class="flex gap-2">
+				<input
+					type="text"
+					value={value}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					placeholder={prop.defaultValue || 'Select an image...'}
+					class="flex-1 px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+				/>
+				<button
+					type="button"
+					onClick={() => {
+						openMediaLibraryWithCallback((url: string) => {
+							onChange(url)
+						})
+					}}
+					class="px-3 py-2.5 bg-white/10 border border-white/20 text-white/70 hover:text-white hover:bg-white/15 rounded-cms-md transition-colors shrink-0"
+					title="Browse media"
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+				</button>
+			</div>
+		)
+	}
 
+	if (typeLower === 'color') {
+		return (
+			<div class="flex gap-2 items-center">
+				<input
+					type="color"
+					value={value || '#000000'}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					class="w-10 h-10 rounded-cms-md border border-white/20 bg-transparent cursor-pointer"
+				/>
+				<input
+					type="text"
+					value={value}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					placeholder={prop.defaultValue || '#000000'}
+					class="flex-1 px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md font-mono"
+				/>
+			</div>
+		)
+	}
+
+	if (typeLower === 'textarea') {
+		return (
+			<textarea
+				value={value}
+				onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}
+				placeholder={prop.defaultValue || `Enter ${prop.name}...`}
+				rows={3}
+				class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md resize-y"
+			/>
+		)
+	}
+
+	return (
+		<input
+			type={INPUT_TYPES[typeLower] ?? 'text'}
+			value={value}
+			onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+			placeholder={prop.defaultValue || `Enter ${prop.name}...`}
+			class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+		/>
+	)
+}
+
+export function PropEditor({ prop, value, onChange }: PropEditorProps) {
 	return (
 		<div class="mb-4">
 			<label class="block text-[13px] font-medium text-white mb-1.5">
@@ -21,32 +161,219 @@ export function PropEditor({ prop, value, onChange }: PropEditorProps) {
 					{prop.description}
 				</div>
 			)}
-			{isBoolean
-				? (
-					<label class="flex items-center gap-2 cursor-pointer">
-						<input
-							type="checkbox"
-							checked={value === 'true'}
-							onChange={(e) => onChange((e.target as HTMLInputElement).checked ? 'true' : 'false')}
-							class="accent-cms-primary w-5 h-5 rounded"
-						/>
-						<span class="text-[13px] text-white">
-							{value === 'true' ? 'Enabled' : 'Disabled'}
-						</span>
-					</label>
-				)
-				: (
-					<input
-						type={isNumber ? 'number' : 'text'}
-						value={value}
-						onInput={(e) => onChange((e.target as HTMLInputElement).value)}
-						placeholder={prop.defaultValue || `Enter ${prop.name}...`}
-						class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
-					/>
-				)}
+			{renderPropInput(prop, value, onChange)}
 			<div class="text-[10px] text-white/40 mt-1.5 font-mono">
 				{prop.type}
 			</div>
 		</div>
 	)
 }
+
+function ReferenceSelect({ collection, value, required, onChange }: {
+	collection: string
+	value: string
+	required: boolean
+	onChange: (value: string) => void
+}) {
+	const currentManifest = manifest.value
+	const options = useMemo(
+		() => currentManifest ? getCollectionEntryOptions(currentManifest, collection) : [],
+		[collection, currentManifest],
+	)
+	const collectionDef = currentManifest?.collectionDefinitions?.[collection]
+	const containerRef = useRef<HTMLDivElement>(null)
+	const [search, setSearch] = useState('')
+	const [isOpen, setIsOpen] = useState(false)
+	const [isCreating, setIsCreating] = useState(false)
+	const [newName, setNewName] = useState('')
+	const [formData, setFormData] = useState<Record<string, unknown>>({})
+
+	const filtered = useMemo(
+		() =>
+			search
+				? options.filter(o => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase()))
+				: options,
+		[options, search],
+	)
+
+	const selectedLabel = useMemo(
+		() => value ? (options.find(o => o.value === value)?.label ?? value) : '',
+		[options, value],
+	)
+
+	const formFields = useMemo(
+		() => collectionDef?.fields.filter(f => !f.hidden && f.name !== 'title' && f.name !== 'name') ?? [],
+		[collectionDef],
+	)
+
+	const resetCreateForm = () => {
+		setIsCreating(false)
+		setNewName('')
+		setFormData({})
+	}
+
+	const handleCreate = () => {
+		if (!collectionDef || !newName.trim()) return
+		const slug = slugify(newName.trim())
+		// Queue entry for creation when markdown is saved — no file write, no reload
+		pendingCollectionEntries.value = [
+			...pendingCollectionEntries.value,
+			{
+				collection,
+				slug,
+				title: newName.trim(),
+				frontmatter: { ...formData },
+				fileExtension: collectionDef.fileExtension,
+			},
+		]
+		onChange(slug)
+		resetCreateForm()
+	}
+
+	if (isCreating) {
+		const slug = slugify(newName.trim())
+		return (
+			<div class="p-3 bg-white/5 border border-white/15 rounded-cms-md space-y-3">
+				<div class="flex items-center justify-between">
+					<span class="text-[12px] font-medium text-white/70">Create new entry</span>
+					{options.length > 0 && (
+						<button
+							type="button"
+							onClick={resetCreateForm}
+							class="text-[11px] text-white/40 hover:text-white transition-colors"
+						>
+							Select existing
+						</button>
+					)}
+				</div>
+				<input
+					type="text"
+					value={newName}
+					onInput={(e) => setNewName((e.target as HTMLInputElement).value)}
+					placeholder="Enter name..."
+					class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+					autoFocus
+				/>
+				<div class="text-[11px] text-white/40 font-mono">
+					src/content/{collection}/{slug || 'your-slug'}.{collectionDef?.fileExtension ?? 'json'}
+				</div>
+				{/* Collection fields */}
+				{formFields.length > 0 && (
+					<div class="space-y-3 pt-1 border-t border-white/10">
+						{formFields.map((field) => (
+							<SchemaFrontmatterField
+								key={field.name}
+								field={field}
+								value={formData[field.name]}
+								onChange={(newValue) => setFormData(prev => ({ ...prev, [field.name]: newValue }))}
+							/>
+						))}
+					</div>
+				)}
+				<div class="flex gap-2 pt-1">
+					<button
+						type="button"
+						onClick={resetCreateForm}
+						class="px-3 py-1.5 text-[12px] text-white/60 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-cms-md transition-colors"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={handleCreate}
+						disabled={!newName.trim()}
+						class="px-3 py-1.5 text-[12px] bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-md transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						Create
+					</button>
+				</div>
+			</div>
+		)
+	}
+
+	if (options.length === 0 && !collectionDef) {
+		return (
+			<input
+				type="text"
+				value={value}
+				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+				placeholder={`Enter ${collection} entry ID...`}
+				class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+			/>
+		)
+	}
+
+	return (
+		<div class="relative" ref={containerRef}>
+			<input
+				type="text"
+				value={isOpen ? search : selectedLabel}
+				onInput={(e) => {
+					setSearch((e.target as HTMLInputElement).value)
+					setIsOpen(true)
+				}}
+				onFocus={() => setIsOpen(true)}
+				onBlur={(e) => {
+					const related = (e as FocusEvent).relatedTarget as Node | null
+					if (containerRef.current && related && containerRef.current.contains(related)) return
+					setIsOpen(false)
+				}}
+				placeholder={`Select ${collection} entry...`}
+				class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+			/>
+			{isOpen && (
+				<div class="absolute z-10 mt-1 w-full max-h-48 overflow-y-auto bg-cms-dark border border-white/20 rounded-cms-md shadow-lg">
+					{!required && (
+						<button
+							type="button"
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={() => {
+								onChange('')
+								setSearch('')
+								setIsOpen(false)
+							}}
+							class="w-full px-4 py-2 text-left text-[13px] text-white/50 hover:bg-white/10 transition-colors"
+						>
+							— None —
+						</button>
+					)}
+					{filtered.map((opt) => (
+						<button
+							key={opt.value}
+							type="button"
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={() => {
+								onChange(opt.value)
+								setSearch('')
+								setIsOpen(false)
+							}}
+							class={`w-full px-4 py-2 text-left text-[13px] transition-colors ${
+								opt.value === value ? 'bg-cms-primary/20 text-white' : 'text-white/80 hover:bg-white/10'
+							}`}
+						>
+							<div>{opt.label}</div>
+							{opt.label !== opt.value && <div class="text-[11px] text-white/40 font-mono">{opt.value}</div>}
+						</button>
+					))}
+					{filtered.length === 0 && <div class="px-4 py-2 text-[13px] text-white/40">No entries found</div>}
+					{collectionDef && (
+						<button
+							type="button"
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={() => {
+								setIsCreating(true)
+								setIsOpen(false)
+							}}
+							class="w-full px-4 py-2 text-left text-[13px] text-cms-primary hover:bg-cms-primary/10 transition-colors border-t border-white/10 flex items-center gap-2"
+						>
+							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+							</svg>
+							Create new {collectionDef.label?.toLowerCase() ?? collection}
+						</button>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}

package/src/editor/components/reference-picker.tsx

@@ -1,20 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { clampPanelPosition, schedulePageReload, Z_INDEX } from '../constants'
+import { clampPanelPosition, Z_INDEX } from '../constants'
+import { getCollectionEntryOptions } from '../manifest'
 import { updateMarkdownPage } from '../markdown-api'
 import { closeReferencePicker, config, manifest, referencePickerState, showToast } from '../signals'
 
 const PANEL_WIDTH = 320
 
-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,
-	}))
-}
-
 export function ReferencePicker() {
 	const state = referencePickerState.value
 	const panelRef = useRef<HTMLDivElement>(null)
@@ -23,7 +14,7 @@ export function ReferencePicker() {
 	const [saving, setSaving] = useState(false)
 
 	const options = useMemo(
-		() => getCollectionEntryOptions(state.collection ?? undefined),
+		() => manifest.value ? getCollectionEntryOptions(manifest.value, state.collection ?? undefined) : [],
 		[state.collection],
 	)
 
@@ -57,7 +48,6 @@ export function ReferencePicker() {
 			})
 			if (result.success) {
 				showToast('Reference updated', 'success')
-				schedulePageReload()
 			} else {
 				showToast(result.error || 'Failed to update reference', 'error')
 			}

package/src/editor/components/seo-editor.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'preact/hooks'
 import { saveBatchChanges } from '../api'
-import { schedulePageReload } from '../constants'
 import { isApplyingUndoRedo, recordChange } from '../history'
 import {
 	clearPendingSeoChanges,
@@ -227,7 +226,6 @@ export function SeoEditor() {
 				showToast(`Saved ${result.updated} SEO change(s) successfully!`, 'success')
 				clearPendingSeoChanges()
 				closeSeoEditor()
-				schedulePageReload()
 			}
 		} catch (error) {
 			showToast(error instanceof Error ? error.message : 'Failed to save SEO changes', 'error')

package/src/editor/constants.ts

@@ -43,21 +43,8 @@ export const TIMING = {
 	PREVIEW_ERROR_DURATION_MS: 5000,
 	/** Delay before focusing input after expansion (ms) */
 	FOCUS_DELAY_MS: 50,
-	/** Delay before reloading the page after a content-modifying save (ms) */
-	RELOAD_DELAY_MS: 100,
-	/** Longer reload delay to allow collapse animation to play (ms) */
-	RELOAD_COLLAPSE_DELAY_MS: 300,
 } as const
 
-/**
- * Schedule a page reload after a content-modifying save.
- * In normal dev, Vite HMR (via chokidar) usually reloads the page before this fires.
- * In sandboxed environments (e.g. E2B) where HMR is unavailable, this ensures the page still refreshes.
- */
-export function schedulePageReload(delayMs: number = TIMING.RELOAD_DELAY_MS) {
-	setTimeout(() => location.reload(), delayMs)
-}
-
 /**
  * Layout constants for UI positioning
  */

package/src/editor/editor.ts

@@ -1,5 +1,5 @@
 import { fetchManifest, getMarkdownContent, saveBatchChanges } from './api'
-import { CSS, schedulePageReload, TIMING } from './constants'
+import { CSS, TIMING } from './constants'
 import {
 	cleanupHighlightSystem,
 	disableAllInteractiveElements,
@@ -877,9 +877,6 @@ export async function saveAllChanges(
 		}
 
 		onStateChange?.()
-
-		schedulePageReload()
-
 		return { success: true, updated: result.updated }
 	} catch (err) {
 		console.error('[CMS] Save failed:', err)

package/src/editor/hooks/useBlockEditorHandlers.ts

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'preact/hooks'
-import { schedulePageReload, TIMING } from '../constants'
 import { logDebug } from '../dom'
 import { getComponentInstances } from '../manifest'
 import * as signals from '../signals'
@@ -153,7 +152,6 @@ export function useBlockEditorHandlers({
 					}
 
 					showToast(`Item added ${position} current item`, 'success')
-					schedulePageReload()
 				} else {
 					// Standard component insertion
 					const response = await fetch(`${config.apiBase}/insert-component`, {
@@ -178,7 +176,6 @@ export function useBlockEditorHandlers({
 					}
 
 					showToast(`${componentName} inserted ${position} component`, 'success')
-					schedulePageReload()
 				}
 			} catch (error) {
 				console.error('[CMS] Failed to insert component:', error)
@@ -237,11 +234,10 @@ export function useBlockEditorHandlers({
 
 				showToast(arrayMode ? 'Item removed' : 'Component removed', 'success')
 
-				// Visually collapse the component then reload to pick up file changes
+				// Visually collapse and hide the component until HMR refreshes the page
 				if (componentEl) {
 					collapseElement(componentEl)
 				}
-				schedulePageReload(TIMING.RELOAD_COLLAPSE_DELAY_MS)
 			} catch (error) {
 				console.error('[CMS] Failed to remove component:', error)
 				showToast(arrayMode ? 'Failed to remove item' : 'Failed to remove component', 'error')

package/src/editor/manifest.ts

@@ -23,3 +23,13 @@ export const getManifestEntryCount: GetManifestEntryCount = (manifest: CmsManife
 
 type GetAvailableComponentNames = (manifest: CmsManifest) => string[]
 export const getAvailableComponentNames: GetAvailableComponentNames = manifest => Object.keys(getComponentDefinitions(manifest))
+
+export function getCollectionEntryOptions(manifest: CmsManifest, collectionName?: string): Array<{ value: string; label: string }> {
+	if (!collectionName) return []
+	const def = manifest.collectionDefinitions?.[collectionName]
+	if (!def?.entries) return []
+	return def.entries.map(e => ({
+		value: e.slug,
+		label: e.title ?? e.slug,
+	}))
+}

package/src/editor/signals.ts

@@ -244,6 +244,16 @@ export const pendingColorChanges = signal<Map<string, PendingColorChange>>(
 export const pendingBgImageChanges = signal<Map<string, PendingBackgroundImageChange>>(
 	new Map(),
 )
+/** Pending collection entries to create when the markdown page is saved */
+export interface PendingCollectionEntry {
+	collection: string
+	slug: string
+	title: string
+	frontmatter: Record<string, unknown>
+	fileExtension?: string
+}
+export const pendingCollectionEntries = signal<PendingCollectionEntry[]>([])
+
 export const manifest = signal<CmsManifest>({
 	entries: {},
 	components: {},
@@ -810,6 +820,7 @@ export function updateMarkdownPageMeta(patch: Partial<Pick<MarkdownPageEntry, 's
 
 export function resetMarkdownEditorState(): void {
 	markdownEditorState.value = createInitialMarkdownEditorState()
+	pendingCollectionEntries.value = []
 }
 
 /**

package/src/field-types.ts

@@ -0,0 +1,42 @@
+/**
+ * Semantic field type wrappers for Zod schemas in content collections.
+ *
+ * These are identity functions — they return exactly what's passed in.
+ * The CMS collection scanner detects them by name in the source and
+ * renders the appropriate editor input.
+ *
+ * @example
+ * ```ts
+ * import { field } from '@nuasite/cms'
+ * import { z } from 'astro/zod'
+ *
+ * const schema = z.object({
+ *   photo: field.image(z.string()),
+ *   website: field.url(z.string()),
+ *   contact: field.email(z.string()),
+ *   accent: field.color(z.string()),
+ *   publishedAt: field.date(z.string()),
+ *   startsAt: field.datetime(z.string()),
+ *   opensAt: field.time(z.string()),
+ *   bio: field.textarea(z.string()),
+ * })
+ * ```
+ */
+export const field = {
+	/** Image picker (opens media library) */
+	image: <T>(schema: T): T => schema,
+	/** URL input */
+	url: <T>(schema: T): T => schema,
+	/** Email input */
+	email: <T>(schema: T): T => schema,
+	/** Color picker */
+	color: <T>(schema: T): T => schema,
+	/** Date picker */
+	date: <T>(schema: T): T => schema,
+	/** Date + time picker */
+	datetime: <T>(schema: T): T => schema,
+	/** Time picker */
+	time: <T>(schema: T): T => schema,
+	/** Multiline textarea */
+	textarea: <T>(schema: T): T => schema,
+}

package/src/handlers/markdown-ops.ts

@@ -308,8 +308,20 @@ function parseFrontmatter(raw: string): { frontmatter: Record<string, unknown>;
 	return { frontmatter, content }
 }
 
+/** Pattern for strings that YAML auto-parses as Date objects */
+const YAML_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}/
+
 function serializeFrontmatter(frontmatter: Record<string, unknown>, content: string): string {
-	const yamlStr = yaml.stringify(frontmatter).trim()
+	const doc = new yaml.Document(frontmatter)
+	// Force-quote strings that YAML would auto-parse as dates
+	yaml.visit(doc, {
+		Scalar(_key, node) {
+			if (typeof node.value === 'string' && YAML_DATE_PATTERN.test(node.value)) {
+				node.type = yaml.Scalar.QUOTE_SINGLE
+			}
+		},
+	})
+	const yamlStr = doc.toString().trim()
 	return `---\n${yamlStr}\n---\n${content}`
 }
 

package/src/index.ts

@@ -56,6 +56,13 @@ export interface NuaCmsOptions extends CmsMarkerOptions {
 	collections?: Record<string, {
 		fields?: Record<string, { position?: 'sidebar' | 'header'; group?: string }>
 	}>
+	/**
+	 * Enable polling for file watching.
+	 * Ensures reliable change detection after CMS edits.
+	 * Set to `false` to use native fs events instead.
+	 * @default true
+	 */
+	usePolling?: boolean
 }
 
 const VIRTUAL_CMS_PATH = '/@nuasite/cms-editor.js'
@@ -78,6 +85,7 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 		componentDirs = ['src/components'],
 		contentDir = 'src/content',
 		mdxComponentDirs,
+		usePolling = true,
 		seo = { trackSeo: true, markTitle: true, parseJsonLd: true },
 	} = options
 
@@ -277,6 +285,7 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 							: undefined,
 						server: {
 							proxy: proxyConfig,
+							...(usePolling ? { watch: { usePolling: true } } : {}),
 						},
 					},
 				})
@@ -337,10 +346,12 @@ async function mergeRedirects(dir: URL, logger: { info: (msg: string) => void })
 	logger.info(`Merged ${lineCount} CMS redirect(s) into _redirects`)
 }
 
+export { field } from './field-types'
 export { createContemberStorageAdapter as contemberMedia } from './media/contember'
 export { createLocalStorageAdapter as localMedia } from './media/local'
 export { createS3StorageAdapter as s3Media } from './media/s3'
 export type { MediaFolderItem, MediaItem, MediaListOptions, MediaListResult, MediaStorageAdapter, MediaTypeFilter } from './media/types'
+export type { Color, Date, DateTime, Email, Image, Reference, Textarea, Time, Url } from './prop-types'
 
 export { scanCollections } from './collection-scanner'
 export { getProjectRoot, resetProjectRoot, setProjectRoot } from './config'