@nuasite/cms 0.18.1 → 0.19.0

package/src/dev-middleware.ts

@@ -2,33 +2,29 @@ import { parse } from 'node-html-parser'
 import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
-import { scanCollections } from './collection-scanner'
 import { getProjectRoot } from './config'
-import {
-	buildMapPattern,
-	detectArrayPattern,
-	extractArrayElementProps,
-	handleAddArrayItem,
-	handleRemoveArrayItem,
-	parseInlineArrayName,
-} from './handlers/array-ops'
+import { handleCmsApiRoute } from './handlers/api-routes'
+import { buildMapPattern, detectArrayPattern, extractArrayElementProps, parseInlineArrayName } from './handlers/array-ops'
 import {
 	extractPropsFromSource,
 	findComponentInvocationLine,
 	findFrontmatterEnd,
 	getPageFileCandidates,
-	handleInsertComponent,
-	handleRemoveComponent,
 	normalizeFilePath,
 } from './handlers/component-ops'
-import { handleCreateMarkdown, handleDeleteMarkdown, handleGetMarkdownContent, handleUpdateMarkdown } from './handlers/markdown-ops'
-import { handleCors, parseJsonBody, parseMultipartFile, readBody, sendError, sendJson } from './handlers/request-utils'
-import { handleUpdate } from './handlers/source-writer'
+import { handleCors, sendError } from './handlers/request-utils'
 import { processHtml } from './html-processor'
 import type { ManifestWriter } from './manifest-writer'
 import type { MediaStorageAdapter } from './media/types'
-import { clearSourceFinderCache, findCollectionSource, findImageSourceLocation, initializeSearchIndex, parseMarkdownContent } from './source-finder'
-import type { CmsMarkerOptions, CollectionEntry, ComponentDefinition, PageSeoData } from './types'
+import {
+	clearSourceFinderCache,
+	findCollectionSource,
+	findImageSourceLocation,
+	findSourceLocation,
+	initializeSearchIndex,
+	parseMarkdownContent,
+} from './source-finder'
+import type { CmsMarkerOptions, CollectionEntry, ComponentDefinition } from './types'
 import { normalizePagePath } from './utils'
 
 /** Minimal ViteDevServer interface to avoid version conflicts between Astro's bundled Vite and root Vite */
@@ -263,7 +259,7 @@ export function createDevMiddleware(
 			const pagePath = normalizePagePath(requestUrl)
 
 			// Process HTML asynchronously
-			processHtmlForDev(html, pagePath, config, idCounter)
+			processHtmlForDev(html, pagePath, config, idCounter, manifestWriter)
 				.then(({ html: transformed, entries, components, collection, seo }) => {
 					manifestWriter.addPage(pagePath, entries, components, collection, seo)
 
@@ -293,193 +289,12 @@ export function createDevMiddleware(
 	})
 }
 
-async function handleCmsApiRoute(
-	route: string,
-	req: IncomingMessage,
-	res: ServerResponse,
-	manifestWriter: ManifestWriter,
-	contentDir: string,
-	mediaAdapter?: MediaStorageAdapter,
-): Promise<void> {
-	// POST /_nua/cms/update
-	if (route === 'update' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleUpdate>[0]>(req)
-		const result = await handleUpdate(body, manifestWriter)
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/insert-component
-	if (route === 'insert-component' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleInsertComponent>[0]>(req)
-		const result = await handleInsertComponent(body, manifestWriter)
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/remove-component
-	if (route === 'remove-component' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleRemoveComponent>[0]>(req)
-		const result = await handleRemoveComponent(body, manifestWriter)
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/add-array-item
-	if (route === 'add-array-item' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleAddArrayItem>[0]>(req)
-		const result = await handleAddArrayItem(body, manifestWriter)
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/remove-array-item
-	if (route === 'remove-array-item' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleRemoveArrayItem>[0]>(req)
-		const result = await handleRemoveArrayItem(body, manifestWriter)
-		sendJson(res, result)
-		return
-	}
-
-	// GET /_nua/cms/markdown/content?filePath=...
-	if (route === 'markdown/content' && req.method === 'GET') {
-		const urlObj = new URL(req.url!, `http://${req.headers.host}`)
-		const filePath = urlObj.searchParams.get('filePath')
-		if (!filePath) {
-			sendError(res, 'filePath query parameter required')
-			return
-		}
-		const result = await handleGetMarkdownContent(filePath)
-		if (!result) {
-			sendError(res, 'File not found', 404)
-			return
-		}
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/markdown/update
-	if (route === 'markdown/update' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleUpdateMarkdown>[0]>(req)
-		const result = await handleUpdateMarkdown(body)
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/markdown/create
-	if (route === 'markdown/create' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleCreateMarkdown>[0]>(req)
-		const result = await handleCreateMarkdown(body)
-		sendJson(res, result, result.success ? 200 : 400)
-		return
-	}
-
-	// POST /_nua/cms/markdown/delete
-	if (route === 'markdown/delete' && req.method === 'POST') {
-		const body = await parseJsonBody<Parameters<typeof handleDeleteMarkdown>[0]>(req)
-		// Register expected deletion so the Vite watcher ignores the unlink
-		const fullPath = path.resolve(getProjectRoot(), body.filePath?.replace(/^\//, '') ?? '')
-		expectedDeletions.add(fullPath)
-		const result = await handleDeleteMarkdown(body)
-		if (result.success) {
-			// Re-scan collections so the manifest reflects the deletion
-			const updatedCollections = await scanCollections(contentDir)
-			manifestWriter.setCollectionDefinitions(updatedCollections)
-		} else {
-			expectedDeletions.delete(fullPath)
-		}
-		sendJson(res, result, result.success ? 200 : 400)
-		return
-	}
-
-	// GET /_nua/cms/media/list
-	if (route === 'media/list' && req.method === 'GET') {
-		if (!mediaAdapter) {
-			sendError(res, 'Media storage not configured', 501)
-			return
-		}
-		const urlObj = new URL(req.url!, `http://${req.headers.host}`)
-		const parsedLimit = parseInt(urlObj.searchParams.get('limit') ?? '50', 10)
-		const limit = Number.isNaN(parsedLimit) || parsedLimit < 1 ? 50 : Math.min(parsedLimit, 1000)
-		const cursor = urlObj.searchParams.get('cursor') ?? undefined
-		const result = await mediaAdapter.list({ limit, cursor })
-		sendJson(res, result)
-		return
-	}
-
-	// POST /_nua/cms/media/upload
-	if (route === 'media/upload' && req.method === 'POST') {
-		if (!mediaAdapter) {
-			sendError(res, 'Media storage not configured', 501)
-			return
-		}
-		const contentType = req.headers['content-type'] ?? ''
-		if (!contentType.includes('multipart/form-data')) {
-			sendError(res, 'Expected multipart/form-data')
-			return
-		}
-		// 50 MB limit for file uploads
-		const body = await readBody(req, 50 * 1024 * 1024)
-		const file = parseMultipartFile(body, contentType)
-		if (!file) {
-			sendError(res, 'No file found in request')
-			return
-		}
-
-		// Validate file content type — allow images, videos, PDFs, and common web assets
-		const allowedTypes = [
-			'image/jpeg',
-			'image/png',
-			'image/gif',
-			'image/webp',
-			'image/avif',
-			'image/x-icon',
-			'video/mp4',
-			'video/webm',
-			'application/pdf',
-		]
-		// Block SVG (can contain scripts) unless explicitly served with safe headers
-		if (!allowedTypes.includes(file.contentType)) {
-			sendError(res, `File type not allowed: ${file.contentType}`)
-			return
-		}
-
-		const result = await mediaAdapter.upload(file.buffer, file.filename, file.contentType)
-		sendJson(res, result)
-		return
-	}
-
-	// DELETE /_nua/cms/media/<id> — only match paths with an actual ID segment
-	if (route.startsWith('media/') && req.method === 'DELETE') {
-		if (!mediaAdapter) {
-			sendError(res, 'Media storage not configured', 501)
-			return
-		}
-		const id = route.slice('media/'.length)
-		// Don't match known sub-routes like 'list' or 'upload'
-		if (!id || id === 'list' || id === 'upload') {
-			sendError(res, 'Not found', 404)
-			return
-		}
-		const result = await mediaAdapter.delete(decodeURIComponent(id))
-		sendJson(res, result)
-		return
-	}
-
-	// GET /_nua/cms/deployment/status
-	if (route === 'deployment/status' && req.method === 'GET') {
-		sendJson(res, { currentDeployment: null, pendingCount: 0, deploymentEnabled: false })
-		return
-	}
-
-	sendError(res, 'Not found', 404)
-}
-
 async function processHtmlForDev(
 	html: string,
 	pagePath: string,
 	config: Required<CmsMarkerOptions>,
 	idCounter: { value: number },
+	manifestWriter: ManifestWriter,
 ) {
 	// Clear cached parsed files so variable definitions reflect the latest source
 	clearSourceFinderCache()
@@ -524,6 +339,8 @@ async function processHtmlForDev(
 				: undefined,
 			// Pass SEO options
 			seo: config.seo,
+			// Pass collection definitions for resolving frontmatter text on listing pages
+			collectionDefinitions: manifestWriter.getCollectionDefinitions(),
 		},
 		idGenerator,
 	)
@@ -663,10 +480,8 @@ async function processHtmlForDev(
 	// (idempotent - only scans files on first call)
 	await initializeSearchIndex()
 
-	// In dev mode, we use the source info from Astro compiler attributes
-	// which is already extracted by html-processor
-	// Always search for image source by src value - the sourcePath from HTML attributes
-	// may point to a shared Image component rather than the actual usage site
+	// Re-resolve sources with the fully-built search index (the earlier enhancement
+	// step runs before the index is ready, so its results may be stale).
 	for (const entry of Object.values(result.entries)) {
 		if (entry.imageMetadata?.src) {
 			const imageSource = await findImageSourceLocation(entry.imageMetadata.src, entry.imageMetadata.srcSet)
@@ -675,6 +490,14 @@ async function processHtmlForDev(
 				entry.sourceLine = imageSource.line
 				entry.sourceSnippet = imageSource.snippet
 			}
+		} else if (entry.text && entry.tag) {
+			const textSource = await findSourceLocation(entry.text, entry.tag)
+			if (textSource) {
+				entry.sourcePath = textSource.file
+				entry.sourceLine = textSource.line
+				entry.sourceSnippet = textSource.snippet
+				if (textSource.variableName) entry.variableName = textSource.variableName
+			}
 		}
 	}
 

package/src/editor/api.ts

@@ -1,4 +1,5 @@
 import { API } from './constants'
+import { fetchWithTimeout } from './fetch'
 import { setAvailableTextStyles } from './text-styling'
 import type {
 	CmsManifest,
@@ -81,28 +82,6 @@ export interface CmsAiStreamCallbacks {
 	onDone?: (summary?: string) => void
 }
 
-/**
- * Create a fetch request with timeout
- */
-async function fetchWithTimeout(
-	url: string,
-	options: RequestInit = {},
-	timeoutMs: number = API.REQUEST_TIMEOUT_MS,
-): Promise<Response> {
-	const controller = new AbortController()
-	const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
-
-	try {
-		const response = await fetch(url, {
-			...options,
-			signal: controller.signal,
-		})
-		return response
-	} finally {
-		clearTimeout(timeoutId)
-	}
-}
-
 /**
  * Get the manifest URL for the current page
  * For example: /about -> /about.json

package/src/editor/components/ai-chat.tsx

@@ -1,6 +1,6 @@
 import { marked } from 'marked'
 import { useEffect, useRef, useState } from 'preact/hooks'
-import { CSS } from '../constants'
+import { CSS, Z_INDEX } from '../constants'
 import { getComponentInstance } from '../manifest'
 import * as signals from '../signals'
 
@@ -244,10 +244,10 @@ export const AIChat = ({ callbacks }: AIChatProps) => {
 			ref={containerRef}
 			class={`fixed ${dragPosition ? '' : positionClass} top-5 ${
 				isMinimized ? '' : 'bottom-5'
-			} w-100 max-w-[calc(100vw-40px)] bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] rounded-cms-xl border border-white/10 z-2147483645 flex flex-col font-sans overflow-hidden ${
+			} w-100 max-w-[calc(100vw-40px)] bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] rounded-cms-xl border border-white/10 flex flex-col font-sans overflow-hidden ${
 				isDragging ? '' : 'transition-all duration-300'
 			}`}
-			style={containerStyle}
+			style={{ ...containerStyle, zIndex: Z_INDEX.OVERLAY }}
 			data-cms-ui
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}

package/src/editor/components/ai-tooltip.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
+import { Z_INDEX } from '../constants'
 
 export interface AITooltipCallbacks {
 	onPromptSubmit: (prompt: string, elementId: string) => void
@@ -97,7 +98,7 @@ export function AITooltip({ callbacks, visible, elementId, rect, processing }: A
 				position: 'fixed',
 				left: `${left}px`,
 				top: `${top}px`,
-				zIndex: 2147483645,
+				zIndex: Z_INDEX.OVERLAY,
 				fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
 				fontSize: '12px',
 			}}

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

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { LAYOUT } from '../constants'
+import { LAYOUT, Z_INDEX } from '../constants'
 import { getComponentDefinition, getComponentDefinitions, getComponentInstance, getComponentInstances } from '../manifest'
 import { manifest } from '../signals'
-import type { ComponentProp, InsertPosition } from '../types'
+import type { InsertPosition } from '../types'
+import { ComponentCard, getDefaultProps } from './component-card'
+import { PropEditor } from './prop-editor'
 
 export interface BlockEditorProps {
 	visible: boolean
@@ -252,19 +254,10 @@ export function BlockEditor({
 		setInsertPosition(position)
 
 		if (isArrayItem && currentInstance) {
-			// For array items, skip the component picker — use the same component type
 			const definition = componentDefinitions[currentInstance.componentName]
 			if (definition) {
-				const defaultProps: Record<string, any> = {}
-				for (const prop of definition.props) {
-					if (prop.defaultValue !== undefined) {
-						defaultProps[prop.name] = prop.defaultValue
-					} else if (prop.required) {
-						defaultProps[prop.name] = ''
-					}
-				}
 				setSelectedComponent(currentInstance.componentName)
-				setPropValues(defaultProps)
+				setPropValues(getDefaultProps(definition))
 				setMode('insert-props')
 				return
 			}
@@ -279,18 +272,8 @@ export function BlockEditor({
 		const definition = componentDefinitions[componentName]
 		if (!definition) return
 
-		// Initialize with default values
-		const defaultProps: Record<string, any> = {}
-		for (const prop of definition.props) {
-			if (prop.defaultValue !== undefined) {
-				defaultProps[prop.name] = prop.defaultValue
-			} else if (prop.required) {
-				defaultProps[prop.name] = ''
-			}
-		}
-
 		setSelectedComponent(componentName)
-		setPropValues(defaultProps)
+		setPropValues(getDefaultProps(definition))
 		setMode('insert-props')
 	}
 
@@ -316,7 +299,8 @@ export function BlockEditor({
 				data-cms-ui
 				onClick={onClose}
 				onMouseDown={(e: MouseEvent) => e.stopPropagation()}
-				class="fixed inset-0 z-2147483646"
+				style={{ zIndex: Z_INDEX.SELECTION }}
+				class="fixed inset-0"
 			/>
 
 			{/* Editor panel */}
@@ -325,11 +309,12 @@ export function BlockEditor({
 				data-cms-ui
 				onMouseDown={(e: MouseEvent) => e.stopPropagation()}
 				onClick={(e: MouseEvent) => e.stopPropagation()}
-				class="fixed z-2147483647 w-100 max-w-[calc(100vw-32px)] bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] font-sans text-sm overflow-hidden flex flex-col rounded-cms-xl border border-white/10"
+				class="fixed w-100 max-w-[calc(100vw-32px)] bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] font-sans text-sm overflow-hidden flex flex-col rounded-cms-xl border border-white/10"
 				style={{
 					top: `${editorPosition.top}px`,
 					left: `${editorPosition.left}px`,
 					maxHeight: `${editorPosition.maxHeight}px`,
+					zIndex: Z_INDEX.MODAL,
 				}}
 			>
 				{/* Header */}
@@ -515,40 +500,11 @@ export function BlockEditor({
 								</div>
 								<div class="flex flex-col gap-2">
 									{Object.values(componentDefinitions).map((def) => (
-										<button
+										<ComponentCard
 											key={def.name}
+											def={def}
 											onClick={() => handleSelectComponentForInsert(def.name)}
-											class="p-4 bg-white/5 border border-white/10 rounded-cms-md cursor-pointer text-left transition-all hover:border-cms-primary/50 hover:bg-white/10 group"
-										>
-											{def.previewUrl && (
-												<div class="mb-3 rounded overflow-hidden bg-white h-30 relative">
-													{(() => {
-														const pw = def.previewWidth ?? 1280
-														const scale = 320 / pw
-														return (
-															<iframe
-																src={def.previewUrl}
-																class="border-none pointer-events-none"
-																style={{ width: `${pw}px`, height: `${Math.round(120 / scale)}px`, transform: `scale(${scale})`, transformOrigin: 'top left' }}
-																sandbox="allow-same-origin"
-																loading="lazy"
-																tabIndex={-1}
-															/>
-														)
-													})()}
-												</div>
-											)}
-											<div class="font-medium text-white">{def.name}</div>
-											{def.description && (
-												<div class="text-xs text-white/50 mt-1">
-													{def.description}
-												</div>
-											)}
-											<div class="text-[11px] text-white/40 mt-2 font-mono">
-												{def.props.length} props
-												{def.slots && def.slots.length > 0 && ` • ${def.slots.length} slots`}
-											</div>
-										</button>
+										/>
 									))}
 								</div>
 								<div class="mt-5 pt-4 border-t border-white/10">
@@ -572,54 +528,3 @@ export function BlockEditor({
 		</>
 	)
 }
-
-interface PropEditorProps {
-	prop: ComponentProp
-	value: string
-	onChange: (value: string) => void
-}
-
-function PropEditor({ prop, value, onChange }: PropEditorProps) {
-	const isBoolean = prop.type === 'boolean'
-	const isNumber = prop.type === 'number'
-
-	return (
-		<div class="mb-4">
-			<label class="block text-[13px] font-medium text-white mb-1.5">
-				{prop.name}
-				{prop.required && <span class="text-cms-error ml-1">*</span>}
-			</label>
-			{prop.description && (
-				<div class="text-[11px] text-white/50 mb-1.5">
-					{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"
-					/>
-				)}
-			<div class="text-[10px] text-white/40 mt-1.5 font-mono">
-				{prop.type}
-			</div>
-		</div>
-	)
-}