@nuasite/cms 0.26.0 → 0.28.0

package/package.json

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

package/src/collection-scanner.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { isMap, isPair, isScalar, parse as parseYaml, parseDocument } from 'yaml'
 import { getProjectRoot } from './config'
 import { slugifyHref } from './shared'
-import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldType } from './types'
+import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldHints, FieldType } from './types'
 
 /** Regex patterns for type inference */
 const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}/
@@ -31,7 +31,6 @@ const SIDEBAR_FIELD_NAMES = new Set([
 	'author',
 ])
 
-/** Directive pattern: # @position <value> or # @group <value> */
 /** Matches `@position <value>` or `@group <value>` in YAML comment text (# already stripped by parser) */
 const DIRECTIVE_PATTERN = /^\s*@(position|group)\s+(.+)$/
 
@@ -400,10 +399,6 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 			const fullPath = path.join(projectRoot, configPath)
 			const content = await fs.readFile(fullPath, 'utf-8')
 
-			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,
-			)
-
 			// Map variable names to collection names from exports
 			const varToName = new Map<string, string>()
 			const exportMatch = content.match(/export\s+const\s+collections\s*=\s*\{([\s\S]*?)\}/)
@@ -414,13 +409,32 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 				}
 			}
 
+			// Find schema block starts via regex, then extract bodies with brace counting
+			// to correctly handle nested objects like n.number({ min: 1, max: 100 })
+			const schemaStart = /(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*(?:z|n)\.object\s*\(\s*\{/g
 			const blocks: Array<{ collectionName: string; schemaBody: string }> = []
-			for (const block of collectionBlocks) {
-				const varName = block[1]
-				const schemaBody = block[2]!
+
+			let match
+			while ((match = schemaStart.exec(content)) !== null) {
+				const varName = match[1]
 				const collectionName = varName ? varToName.get(varName) : undefined
 				if (!collectionName) continue
-				blocks.push({ collectionName, schemaBody })
+
+				// Brace-balanced extraction: the regex consumed the opening {,
+				// so start at depth 1 and scan forward for the matching }
+				const bodyStart = match.index + match[0].length
+				let depth = 1
+				let i = bodyStart
+				while (i < content.length && depth > 0) {
+					if (content[i] === '{') depth++
+					else if (content[i] === '}') depth--
+					i++
+				}
+
+				if (depth === 0) {
+					// i is one past the matching }, so body is [bodyStart, i-1)
+					blocks.push({ collectionName, schemaBody: content.slice(bodyStart, i - 1) })
+				}
 			}
 
 			if (blocks.length > 0) return blocks
@@ -455,7 +469,7 @@ function parseContentConfigReferences(
 }
 
 /** Valid field type names exported by `n` helper from @nuasite/cms */
-const FIELD_HELPER_TYPES = new Set(['image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
+const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
 
 /**
  * Parse the content config file to extract explicit field type hints:
@@ -500,6 +514,54 @@ function parseContentConfigFieldTypes(
 	return result
 }
 
+/**
+ * Parse the content config to find `.orderBy('asc'|'desc')` markers on fields.
+ * Matches patterns like `fieldName: n.number().orderBy('asc')`.
+ * Returns a map: collectionName → { field, direction }.
+ */
+function parseContentConfigOrderBy(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, { field: string; direction: 'asc' | 'desc' }> {
+	const result = new Map<string, { field: string; direction: 'asc' | 'desc' }>()
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const match = schemaBody.match(/(\w+)\s*:.*\.orderBy\s*\(\s*(?:['"](\w+)['"])?\s*\)/)
+		if (match) {
+			const direction = match[2] === 'desc' ? 'desc' as const : 'asc' as const
+			result.set(collectionName, { field: match[1]!, direction })
+		}
+	}
+	return result
+}
+
+/**
+ * Apply orderBy configuration: set the field name and direction on the definition, then re-sort entries.
+ */
+function applyCollectionOrderBy(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	const orderByFields = parseContentConfigOrderBy(schemaBlocks)
+	for (const [collectionName, { field: fieldName, direction }] of orderByFields) {
+		const def = collections[collectionName]
+		if (!def) continue
+		def.orderBy = fieldName
+		def.orderDirection = direction
+		if (def.entries && def.entries.length > 1) {
+			const dir = direction === 'desc' ? -1 : 1
+			def.entries.sort((a, b) => {
+				const aVal = a.data?.[fieldName]
+				const bVal = b.data?.[fieldName]
+				if (aVal == null && bVal == null) return 0
+				if (aVal == null) return 1
+				if (bVal == null) return -1
+				if (typeof aVal === 'number' && typeof bVal === 'number') return (aVal - bVal) * dir
+				if (aVal instanceof Date && bVal instanceof Date) return (aVal.getTime() - bVal.getTime()) * dir
+				return String(aVal).localeCompare(String(bVal)) * dir
+			})
+		}
+	}
+}
+
 /**
  * Extract all top-level field names from a schema body string.
  * Matches `fieldName:` patterns at the start of lines within z.object({...}).
@@ -552,6 +614,82 @@ function applyConfigFieldTypes(
 	}
 }
 
+/** 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 */
+const NUMERIC_HINT_KEYS = new Set(['min', 'max', 'step', 'maxLength', 'minLength', 'rows'])
+
+/**
+ * Parse `n.type({ key: value, ... })` options objects from schema blocks.
+ * Returns a map: collectionName → fieldName → FieldHints.
+ */
+function parseContentConfigFieldHints(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, FieldHints>> {
+	const result = new Map<string, Map<string, FieldHints>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, FieldHints>()
+
+		// Match: fieldName: n.helperName({ ...options })
+		const fieldMatches = schemaBody.matchAll(/(\w+)\s*:\s*n\.\w+\s*\(\s*\{([\s\S]*?)}\s*\)/g)
+		for (const m of fieldMatches) {
+			const fieldName = m[1]!
+			const optionsBody = m[2]!
+			const raw: Record<string, string | number> = {}
+
+			// Extract key-value pairs from the options body
+			const kvMatches = optionsBody.matchAll(/(\w+)\s*:\s*(?:"([^"]*)"|'([^']*)'|(-?[\d.]+))/g)
+			for (const kv of kvMatches) {
+				const key = kv[1]!
+				if (!VALID_HINT_KEYS.has(key)) continue
+				const strValue = kv[2] ?? kv[3]
+				const numValue = kv[4]
+
+				if (numValue != null && NUMERIC_HINT_KEYS.has(key)) {
+					raw[key] = Number(numValue)
+				} else if (strValue != null) {
+					if (NUMERIC_HINT_KEYS.has(key)) {
+						const parsed = Number(strValue)
+						raw[key] = Number.isNaN(parsed) ? strValue : parsed
+					} else {
+						raw[key] = strValue
+					}
+				}
+			}
+			const hints = raw as FieldHints
+
+			if (Object.keys(hints).length > 0) {
+				fields.set(fieldName, hints)
+			}
+		}
+
+		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
+		}
+	}
+}
+
 /**
  * After all collections are scanned, detect reference fields.
  * Prefers explicit reference() declarations from the content config file.
@@ -787,12 +925,14 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: apply explicit type hints, detect references, and derived fields
+	// Post-scan: apply explicit type hints, field hints, detect references, derived fields, and ordering
 	const schemaBlocks = await parseContentConfigSchemaBlocks()
 	filterFieldsBySchema(collections, schemaBlocks)
 	applyConfigFieldTypes(collections, schemaBlocks)
+	applyConfigFieldHints(collections, schemaBlocks)
 	await detectReferenceFields(collections, schemaBlocks)
 	detectDerivedHrefFields(collections)
+	applyCollectionOrderBy(collections, schemaBlocks)
 
 	return collections
 }

package/src/dev-middleware.ts

@@ -302,6 +302,13 @@ export function createDevMiddleware(
 				return res.end(chunk, ...args)
 			}
 
+			// Skip CMS processing for internal preview pages
+			if (requestUrl.startsWith('/_nua/preview')) {
+				res.write = originalWrite
+				res.end = originalEnd
+				return (res.end as any)(chunk, ...args)
+			}
+
 			if (chunk) {
 				chunks!.push(Buffer.from(chunk))
 			}

package/src/editor/components/fields.tsx

@@ -39,13 +39,15 @@ export interface TextFieldProps {
 	label: string
 	value: string | undefined
 	placeholder?: string
+	maxLength?: number
+	minLength?: number
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
 	inputType?: string
 }
 
-export function TextField({ label, value, placeholder, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
+export function TextField({ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -53,6 +55,8 @@ export function TextField({ label, value, placeholder, onChange, isDirty, onRese
 				type={inputType}
 				value={value ?? ''}
 				placeholder={placeholder}
+				maxLength={maxLength}
+				minLength={minLength}
 				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',
@@ -270,12 +274,13 @@ export interface NumberFieldProps {
 	placeholder?: string
 	min?: number
 	max?: number
+	step?: number
 	onChange: (value: number | undefined) => void
 	isDirty?: boolean
 	onReset?: () => void
 }
 
-export function NumberField({ label, value, placeholder, min, max, onChange, isDirty, onReset }: NumberFieldProps) {
+export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset }: NumberFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -285,6 +290,7 @@ export function NumberField({ label, value, placeholder, min, max, onChange, isD
 				placeholder={placeholder}
 				min={min}
 				max={max}
+				step={step}
 				onInput={(e) => {
 					const val = (e.target as HTMLInputElement).value
 					onChange(val === '' ? undefined : Number(val))

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

@@ -395,6 +395,7 @@ export function SchemaFrontmatterField({
 	onChange,
 }: SchemaFrontmatterFieldProps) {
 	const label = formatFieldLabel(field.name)
+	const hints = field.hints
 
 	switch (field.type) {
 		case 'text':
@@ -404,7 +405,9 @@ export function SchemaFrontmatterField({
 				<TextField
 					label={label}
 					value={(value as string) ?? ''}
-					placeholder={getPlaceholder(field)}
+					placeholder={hints?.placeholder ?? getPlaceholder(field)}
+					maxLength={hints?.maxLength as number | undefined}
+					minLength={hints?.minLength as number | undefined}
 					onChange={(v) => onChange(v)}
 					inputType={field.type === 'text' ? undefined : field.type}
 				/>
@@ -442,8 +445,9 @@ export function SchemaFrontmatterField({
 					<textarea
 						value={(value as string) ?? ''}
 						onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}
-						placeholder={getPlaceholder(field)}
-						rows={3}
+						placeholder={hints?.placeholder ?? getPlaceholder(field)}
+						rows={hints?.rows ?? 3}
+						maxLength={hints?.maxLength as number | undefined}
 						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
 					/>
@@ -459,6 +463,8 @@ export function SchemaFrontmatterField({
 					<input
 						type={field.type === 'datetime' ? 'datetime-local' : field.type}
 						value={(value as string) ?? ''}
+						min={hints?.min != null ? String(hints.min) : undefined}
+						max={hints?.max != null ? String(hints.max) : undefined}
 						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
@@ -471,6 +477,10 @@ export function SchemaFrontmatterField({
 				<NumberField
 					label={label}
 					value={(value as number) ?? undefined}
+					placeholder={hints?.placeholder}
+					min={typeof hints?.min === 'number' ? hints.min : undefined}
+					max={typeof hints?.max === 'number' ? hints.max : undefined}
+					step={hints?.step}
 					onChange={(v) => onChange(v ?? 0)}
 				/>
 			)

package/src/editor/components/link-edit-popover.tsx

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { HighlightMatch } from './fields'
+
+export interface LinkSuggestion {
+	value: string
+	label: string
+	description?: string
+}
+
+export interface LinkEditPopoverProps {
+	initialUrl: string
+	suggestions?: LinkSuggestion[]
+	onApply: (url: string) => void
+	onRemove?: () => void
+	onClose: () => void
+	/** Use static positioning instead of absolute (for inline contexts) */
+	inline?: boolean
+}
+
+export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, onClose, inline }: LinkEditPopoverProps) {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const rootRef = useRef<HTMLDivElement>(null)
+	const listRef = useRef<HTMLDivElement>(null)
+	const [query, setQuery] = useState(initialUrl)
+	const [showSuggestions, setShowSuggestions] = useState(false)
+	const [highlightedIndex, setHighlightedIndex] = useState(-1)
+
+	const filtered = useMemo(() => {
+		if (!suggestions?.length) return []
+		if (!query || query === 'https://') return suggestions
+		const q = query.toLowerCase()
+		return suggestions.filter(
+			o => o.value.toLowerCase().includes(q) || o.label.toLowerCase().includes(q),
+		)
+	}, [query, suggestions])
+
+	useEffect(() => {
+		const input = inputRef.current
+		if (input) {
+			input.focus()
+			input.select()
+		}
+	}, [])
+
+	// Close on click outside — uses `click` in bubble phase so form submit
+	// (which fires synchronously during the button's click) completes first
+	useEffect(() => {
+		const handler = (e: MouseEvent) => {
+			if (rootRef.current && !e.composedPath().includes(rootRef.current)) {
+				onClose()
+			}
+		}
+		document.addEventListener('click', handler)
+		return () => document.removeEventListener('click', handler)
+	}, [onClose])
+
+	// Scroll highlighted item into view
+	useEffect(() => {
+		if (highlightedIndex >= 0 && listRef.current) {
+			const item = listRef.current.children[highlightedIndex] as HTMLElement | undefined
+			item?.scrollIntoView({ block: 'nearest' })
+		}
+	}, [highlightedIndex])
+
+	const handleSubmit = useCallback((e: Event) => {
+		e.preventDefault()
+		const url = inputRef.current?.value.trim()
+		if (url) {
+			onApply(url)
+		}
+	}, [onApply])
+
+	const selectOption = useCallback((value: string) => {
+		if (inputRef.current) inputRef.current.value = value
+		setQuery(value)
+		setShowSuggestions(false)
+		onApply(value)
+	}, [onApply])
+
+	const handleInput = useCallback((e: Event) => {
+		const v = (e.target as HTMLInputElement).value
+		setQuery(v)
+		setShowSuggestions(true)
+		setHighlightedIndex(-1)
+	}, [])
+
+	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			if (showSuggestions && filtered.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				setShowSuggestions(false)
+				return
+			}
+			e.preventDefault()
+			e.stopPropagation()
+			onClose()
+			return
+		}
+
+		if (!showSuggestions || filtered.length === 0) return
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault()
+			setHighlightedIndex(i => Math.min(i + 1, filtered.length - 1))
+		} 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)
+		}
+	}, [showSuggestions, filtered, highlightedIndex, selectOption, onClose])
+
+	const handleFocus = useCallback(() => {
+		setShowSuggestions(true)
+	}, [])
+
+	const handleBlur = useCallback(() => {
+		setTimeout(() => setShowSuggestions(false), 150)
+	}, [])
+
+	const showDropdown = showSuggestions && filtered.length > 0
+
+	return (
+		<div
+			ref={rootRef}
+			class={inline ? 'slide-in' : 'relative z-[9999] slide-in shrink-0'}
+			data-cms-ui
+		>
+			<form
+				onSubmit={handleSubmit}
+				class={`flex items-center gap-2 ${inline ? 'py-1.5' : 'px-4 py-2.5 bg-cms-dark border-b border-white/10'}`}
+			>
+				<svg class="w-4 h-4 text-white/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+					/>
+				</svg>
+
+				<div class="flex-1 min-w-0 relative">
+					<input
+						ref={inputRef}
+						type="text"
+						defaultValue={initialUrl}
+						placeholder="https://example.com or /page"
+						onInput={handleInput}
+						onFocus={handleFocus}
+						onBlur={handleBlur}
+						onKeyDown={handleKeyDown}
+						autocomplete="off"
+						class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white placeholder:text-white/30 outline-none focus:border-cms-primary/50 transition-colors"
+						data-cms-ui
+					/>
+					{showDropdown && (
+						<div
+							ref={listRef}
+							class="absolute z-50 left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-sm shadow-lg"
+							data-cms-ui
+						>
+							{filtered.map((opt, i) => (
+								<button
+									key={opt.value}
+									type="button"
+									onMouseDown={(e) => {
+										e.preventDefault()
+										selectOption(opt.value)
+									}}
+									class={`w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer ${
+										i === highlightedIndex
+											? 'bg-white/15 text-white'
+											: 'text-white/70 hover:bg-white/10 hover:text-white'
+									}`}
+									data-cms-ui
+								>
+									<span class="block truncate font-medium">
+										<HighlightMatch text={opt.label} query={query === 'https://' ? '' : query} />
+									</span>
+									{opt.description && (
+										<span class="block truncate text-white/40">
+											<HighlightMatch text={opt.description} query={query === 'https://' ? '' : query} />
+										</span>
+									)}
+								</button>
+							))}
+						</div>
+					)}
+				</div>
+
+				<button
+					type="submit"
+					class="px-3 py-1.5 bg-cms-primary text-cms-primary-text text-[12px] font-medium rounded-cms-sm hover:bg-cms-primary-hover transition-colors shrink-0"
+					data-cms-ui
+				>
+					Apply
+				</button>
+
+				{onRemove && (
+					<button
+						type="button"
+						onClick={onRemove}
+						class="p-1.5 text-white/40 hover:text-red-400 hover:bg-red-500/10 rounded-cms-sm transition-colors shrink-0"
+						title="Remove link"
+						data-cms-ui
+					>
+						<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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+							/>
+						</svg>
+					</button>
+				)}
+
+				<button
+					type="button"
+					onClick={onClose}
+					class="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-cms-sm transition-colors shrink-0"
+					title="Cancel"
+					data-cms-ui
+				>
+					<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="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</form>
+		</div>
+	)
+}

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

@@ -4,10 +4,12 @@ import { slugify } from '../../shared'
 import { updateMarkdownPage } from '../api'
 import { STORAGE_KEYS, Z_INDEX } from '../constants'
 import { createMarkdownPage } from '../markdown-api'
+import { MDX_EXPR_PREFIX } from '../milkdown-mdx-plugin'
 import {
 	config,
 	currentMarkdownPage,
 	isMarkdownPreview,
+	manifest,
 	markdownEditorState,
 	pendingCollectionEntries,
 	resetMarkdownEditorState,
@@ -244,6 +246,41 @@ export function MarkdownEditorOverlay() {
 			try {
 				const view = editorInstanceRef.current.ctx.get(editorViewCtx)
 				el.innerHTML = view.dom.innerHTML
+
+				// Replace MDX block cards with rendered component previews
+				el.querySelectorAll('.mdx-block-card-wrapper[data-mdx-component]').forEach((wrapper) => {
+					const name = wrapper.getAttribute('data-mdx-component')
+					if (!name) return
+					const def = manifest.value?.componentDefinitions?.[name]
+					if (!def?.file) return
+
+					const propsJson = wrapper.getAttribute('data-mdx-props') || '{}'
+					const childrenText = wrapper.getAttribute('data-mdx-children') || ''
+					let props: Record<string, string> = {}
+					try {
+						props = JSON.parse(propsJson)
+					} catch {}
+
+					// Filter out expression props
+					const staticProps: Record<string, string> = {}
+					for (const [k, v] of Object.entries(props)) {
+						if (!v.startsWith(MDX_EXPR_PREFIX)) staticProps[k] = v
+					}
+
+					const params = new URLSearchParams({ file: def.file, props: JSON.stringify(staticProps) })
+					if (childrenText) params.set('children', childrenText)
+
+					const iframe = document.createElement('iframe')
+					iframe.src = `/_nua/preview?${params}`
+					iframe.style.cssText = 'width:100%;border:0;display:block;min-height:60px'
+					iframe.onload = () => {
+						try {
+							const h = iframe.contentDocument?.body?.scrollHeight
+							if (h) iframe.style.height = `${h + 16}px`
+						} catch {}
+					}
+					wrapper.replaceWith(iframe)
+				})
 			} catch (error) {
 				console.error('Failed to get editor HTML for preview:', error)
 				originalHTMLRef.current = null