@nuasite/cms 0.13.3 → 0.14.1

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.13.3",
+  "version": "0.14.1",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",
@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@astrojs/compiler": "^2.13.1",
+    "@astrojs/compiler": "^3.0.0",
     "@babel/parser": "^7.29.0",
     "node-html-parser": "^7.1.0",
     "yaml": "^2.8.2"
@@ -39,12 +39,12 @@
     "@milkdown/preset-gfm": "^7.19.0",
     "@milkdown/prose": "^7.19.0",
     "@milkdown/utils": "^7.19.0",
-    "@preact/signals": "^2.8.1",
+    "@preact/signals": "^2.8.2",
     "@tailwindcss/vite": "^4.2.1",
     "@types/bun": "1.3.10",
     "clsx": "^2.1.1",
-    "marked": "^17.0.3",
-    "preact": "^10.28.4",
+    "marked": "^17.0.4",
+    "preact": "^10.29.0",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
@@ -57,7 +57,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "astro": "^5.17",
+    "astro": "^6.0.2",
     "typescript": "^5",
     "vite": "^7.3.1",
     "@aws-sdk/client-s3": "^3.0.0"

package/src/dev-middleware.ts

@@ -4,7 +4,14 @@ 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 {
+	buildMapPattern,
+	detectArrayPattern,
+	extractArrayElementProps,
+	handleAddArrayItem,
+	handleRemoveArrayItem,
+	parseInlineArrayName,
+} from './handlers/array-ops'
 import {
 	extractPropsFromSource,
 	findComponentInvocationLine,

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

@@ -1,5 +1,5 @@
-import { useMemo } from 'preact/hooks'
 import { signal } from '@preact/signals'
+import { useMemo } from 'preact/hooks'
 import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
@@ -144,66 +144,68 @@ export function CollectionsBrowser() {
 						)}
 						{entries.map((entry) => (
 							<div key={entry.slug} class="relative" data-cms-ui>
-								{confirmDeleteSlug.value === entry.slug ? (
-									<div class="flex items-center gap-2 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-cms-lg" data-cms-ui>
-										<div class="flex-1 min-w-0 text-sm text-white/70">
-											Delete "{entry.title || entry.slug}"?
-										</div>
-										<button
-											type="button"
-											onClick={() => handleConfirmDelete(entry.slug, entry.sourcePath)}
-											disabled={deletingEntry.value === entry.slug}
-											class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-cms-pill transition-colors disabled:opacity-50"
-											data-cms-ui
-										>
-											{deletingEntry.value === entry.slug ? 'Deleting...' : 'Delete'}
-										</button>
-										<button
-											type="button"
-											onClick={handleCancelDelete}
-											class="px-3 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/10 hover:bg-white/20 rounded-cms-pill transition-colors"
-											data-cms-ui
-										>
-											Cancel
-										</button>
-									</div>
-								) : (
-									<button
-										type="button"
-										onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
-										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
-									>
-										<div class="flex-1 min-w-0">
-											<div class={`font-medium truncate ${entry.draft ? 'text-white/40' : 'text-white'}`}>
-												{entry.title || entry.slug}
+								{confirmDeleteSlug.value === entry.slug
+									? (
+										<div class="flex items-center gap-2 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-cms-lg" data-cms-ui>
+											<div class="flex-1 min-w-0 text-sm text-white/70">
+												Delete "{entry.title || entry.slug}"?
 											</div>
-											{entry.title && <div class="text-white/30 text-xs truncate">{entry.slug}</div>}
+											<button
+												type="button"
+												onClick={() => handleConfirmDelete(entry.slug, entry.sourcePath)}
+												disabled={deletingEntry.value === entry.slug}
+												class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-cms-pill transition-colors disabled:opacity-50"
+												data-cms-ui
+											>
+												{deletingEntry.value === entry.slug ? 'Deleting...' : 'Delete'}
+											</button>
+											<button
+												type="button"
+												onClick={handleCancelDelete}
+												class="px-3 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/10 hover:bg-white/20 rounded-cms-pill transition-colors"
+												data-cms-ui
+											>
+												Cancel
+											</button>
 										</div>
-										{entry.draft && (
-											<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-amber-400/80 bg-amber-400/10 rounded-full border border-amber-400/20">
-												Draft
-											</span>
-										)}
+									)
+									: (
 										<button
 											type="button"
-											onClick={(e) => handleDeleteClick(e, entry.slug)}
-											class="shrink-0 p-1 text-white/0 group-hover:text-white/30 hover:!text-red-400 rounded transition-colors"
-											title="Delete entry"
+											onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
+											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
 										>
-											<TrashIcon />
+											<div class="flex-1 min-w-0">
+												<div class={`font-medium truncate ${entry.draft ? 'text-white/40' : 'text-white'}`}>
+													{entry.title || entry.slug}
+												</div>
+												{entry.title && <div class="text-white/30 text-xs truncate">{entry.slug}</div>}
+											</div>
+											{entry.draft && (
+												<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-amber-400/80 bg-amber-400/10 rounded-full border border-amber-400/20">
+													Draft
+												</span>
+											)}
+											<button
+												type="button"
+												onClick={(e) => handleDeleteClick(e, entry.slug)}
+												class="shrink-0 p-1 text-white/0 group-hover:text-white/30 hover:!text-red-400 rounded transition-colors"
+												title="Delete entry"
+												data-cms-ui
+											>
+												<TrashIcon />
+											</button>
+											<svg
+												class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+											</svg>
 										</button>
-										<svg
-											class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-										</svg>
-									</button>
-								)}
+									)}
 							</div>
 						))}
 					</div>
@@ -333,7 +335,12 @@ function BackArrowIcon() {
 function TrashIcon() {
 	return (
 		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+			/>
 		</svg>
 	)
 }

package/src/handlers/source-writer.ts

@@ -152,7 +152,7 @@ function applyChanges(
 	return { newContent, appliedCount, failedChanges }
 }
 
-function applyImageChange(
+export function applyImageChange(
 	content: string,
 	change: ChangePayload,
 ): { success: true; content: string } | { success: false; error: string } {
@@ -223,19 +223,15 @@ function applyImageChange(
 
 		// Verify we're in an img or Image component context before replacing
 		if (/<img\b/i.test(regionText) || /<Image\b/.test(regionText)) {
-			// Match src attribute with expression value: src={...} (handling balanced braces)
 			const exprMatch = findExpressionSrcAttribute(regionText)
 			if (exprMatch) {
-				const regionOffset = regionStart > 0
-					? lines.slice(0, regionStart).join('\n').length + 1
-					: 0
-				const absoluteIndex = regionOffset + exprMatch.index
-
-				const escapedNewSrc = escapeReplacement(newSrc)
-				newContent = newContent.slice(0, absoluteIndex)
-					+ `src="${escapedNewSrc}"`
-					+ newContent.slice(absoluteIndex + exprMatch.length)
-				replacedIndex = absoluteIndex
+				// Any expression-based src (variable, function call, template literal, etc.)
+				// cannot be safely replaced with a static string — refuse the edit.
+				const exprContent = regionText.slice(
+					exprMatch.index + regionText.slice(exprMatch.index).indexOf('{') + 1,
+					exprMatch.index + exprMatch.length - 1,
+				).trim()
+				return { success: false, error: `Image src uses a dynamic expression (src={${exprContent}}) — edit the data source directly` }
 			}
 		}
 	}
@@ -250,28 +246,42 @@ function applyImageChange(
 		const searchEnd = Math.min(newContent.length, replacedIndex + 300)
 		const region = newContent.slice(searchStart, searchEnd)
 
+		// Try string-literal alt first, then expression alt with balanced braces
+		let altIndex = -1
+		let altLength = 0
+		let altQuote = '"'
+
 		const altPatternDouble = /alt="[^"]*"/
 		const altPatternSingle = /alt='[^']*'/
-		// Also match expression-based alt: alt={...}
-		const altPatternExpr = /alt\s*=\s*\{[^}]*\}/
-
 		const altDoubleMatch = region.match(altPatternDouble)
 		const altSingleMatch = region.match(altPatternSingle)
-		const altExprMatch = region.match(altPatternExpr)
 
-		// Pick the first match found (string literals preferred over expressions)
-		const altMatch = altDoubleMatch ?? altSingleMatch ?? altExprMatch
-		const altQuote = altDoubleMatch ? '"' : altSingleMatch ? "'" : '"'
+		if (altDoubleMatch && altDoubleMatch.index !== undefined) {
+			altIndex = altDoubleMatch.index
+			altLength = altDoubleMatch[0].length
+			altQuote = '"'
+		} else if (altSingleMatch && altSingleMatch.index !== undefined) {
+			altIndex = altSingleMatch.index
+			altLength = altSingleMatch[0].length
+			altQuote = "'"
+		} else {
+			// Expression-based alt={...} — use balanced brace matching
+			const altExprMatch = findExpressionAltAttribute(region)
+			if (altExprMatch) {
+				altIndex = altExprMatch.index
+				altLength = altExprMatch.length
+				altQuote = '"'
+			}
+		}
 
-		if (altMatch && altMatch.index !== undefined) {
-			const altAbsoluteIndex = searchStart + altMatch.index
-			// Escape quotes in alt text matching the quote style used
+		if (altIndex >= 0) {
+			const altAbsoluteIndex = searchStart + altIndex
 			const escapedAlt = altQuote === '"'
 				? newAlt.replace(/"/g, '&quot;')
 				: newAlt.replace(/'/g, '&#39;')
 			newContent = newContent.slice(0, altAbsoluteIndex)
 				+ `alt=${altQuote}${escapedAlt}${altQuote}`
-				+ newContent.slice(altAbsoluteIndex + altMatch[0].length)
+				+ newContent.slice(altAbsoluteIndex + altLength)
 		}
 	}
 
@@ -705,14 +715,12 @@ function resolveCmsPlaceholders(text: string, manifest: CmsManifest): string {
 }
 
 /**
- * Find a src attribute with expression value (e.g., src={variable}) in text.
- * Handles balanced braces for nested expressions.
+ * Find an attribute with expression value (e.g., attr={variable}) using balanced brace matching.
  * Returns the match with index and length, or null if not found.
  */
-function findExpressionSrcAttribute(text: string): { index: number; length: number } | null {
-	// Find 'src=' followed by '{'
-	const srcExprStart = /src\s*=\s*\{/
-	const match = text.match(srcExprStart)
+function findExpressionAttribute(text: string, attr: string): { index: number; length: number } | null {
+	const exprStart = new RegExp(`${attr}\\s*=\\s*\\{`)
+	const match = text.match(exprStart)
 	if (!match || match.index === undefined) return null
 
 	// Find the matching closing brace (handle nesting)
@@ -733,6 +741,14 @@ function findExpressionSrcAttribute(text: string): { index: number; length: numb
 	}
 }
 
+export function findExpressionSrcAttribute(text: string): { index: number; length: number } | null {
+	return findExpressionAttribute(text, 'src')
+}
+
+export function findExpressionAltAttribute(text: string): { index: number; length: number } | null {
+	return findExpressionAttribute(text, 'alt')
+}
+
 /**
  * Extract visible text from an HTML string the way a browser would render it.
  * Text nodes contribute their content, <br> elements become '\n',

package/src/source-finder/search-index.ts

@@ -339,18 +339,152 @@ export function indexFileContent(cached: CachedParsedFile, relFile: string): voi
 	visit(cached.ast)
 }
 
+/**
+ * Resolve a .map() callback parameter back to the source array path.
+ *
+ * Given expression text like:
+ *   "categories.map((cat) => (\n  cat.images.map((img, i) => (\n    "
+ * and a parameter name like "img", returns "categories[*].images" — the
+ * array path that the parameter iterates over.
+ *
+ * Supports chained .map() calls (nested loops).
+ */
+export function resolveMapChain(exprTexts: string[], paramName: string): string | null {
+	const fullText = exprTexts.join('')
+
+	// Find all .map() calls: <arrayExpr>.map((<param>, ...) =>
+	// Capture: [1] = array expression, [2] = first callback parameter
+	const mapPattern = /([\w.[\]]+)\.map\(\s*\(\s*(\w+)/g
+	const maps: Array<{ arrayExpr: string; param: string }> = []
+	let match: RegExpExecArray | null
+	while ((match = mapPattern.exec(fullText)) !== null) {
+		maps.push({ arrayExpr: match[1]!, param: match[2]! })
+	}
+
+	if (maps.length === 0) return null
+
+	// Find which .map() provides our paramName
+	const directMap = maps.find(m => m.param === paramName)
+	if (!directMap) return null
+
+	// Resolve the array expression by substituting outer .map() params
+	// e.g., "cat.images" where "cat" comes from "categories.map((cat) => ...)"
+	let arrayPath = directMap.arrayExpr
+	for (const outerMap of maps) {
+		if (outerMap === directMap) continue
+		// If arrayPath starts with an outer param name, substitute it
+		// e.g., "cat.images" and cat comes from "categories" → "categories[*].images"
+		if (arrayPath === outerMap.param || arrayPath.startsWith(outerMap.param + '.')) {
+			const suffix = arrayPath.slice(outerMap.param.length) // ".images" or ""
+			const resolvedOuter = resolveMapChain(exprTexts, outerMap.param)
+			if (resolvedOuter) {
+				arrayPath = resolvedOuter + '[*]' + suffix
+			} else {
+				arrayPath = outerMap.arrayExpr + '[*]' + suffix
+			}
+		}
+	}
+
+	return arrayPath
+}
+
+/**
+ * Index images from an expression-based src={variable} by tracing
+ * the variable through .map() calls back to the data source array,
+ * then adding each array element to the image search index.
+ */
+function indexExpressionImageSrc(
+	exprValue: string,
+	parentExpression: AstroNode,
+	cached: CachedParsedFile,
+	relFile: string,
+): void {
+	// Collect text content from the expression node (contains the .map() calls)
+	const exprTexts: string[] = []
+	if ('children' in parentExpression && Array.isArray(parentExpression.children)) {
+		for (const child of parentExpression.children) {
+			if (child.type === 'text' && (child as TextNode).value) {
+				exprTexts.push((child as TextNode).value)
+			}
+		}
+	}
+
+	if (exprTexts.length === 0) return
+
+	// Resolve the .map() chain to find the source array path
+	const arrayPath = resolveMapChain(exprTexts, exprValue)
+	if (!arrayPath) return
+
+	for (const def of cached.variableDefinitions) {
+		const defPath = buildDefinitionPath(def)
+		// Match definitions that are direct children of the array
+		// e.g., for "images" match "images[0]", "images[1]"
+		// e.g., for "categories[*].images" match "categories[0].images[0]", etc.
+		if (isChildOfArray(defPath, arrayPath)) {
+			const snippet = cached.lines[def.line - 1]?.trim() || ''
+			addToImageSearchIndex({
+				file: relFile,
+				line: def.line,
+				snippet,
+				src: def.value,
+			})
+		}
+	}
+}
+
+/**
+ * Check if a definition path is a direct element of the given array path.
+ * Converts the arrayPath pattern (with optional [*] wildcards) into a regex
+ * that matches concrete indices.
+ *
+ * e.g., "images[0]" is a child of "images"
+ * e.g., "categories[0].images[1]" is a child of "categories[*].images"
+ * e.g., "categories[0].images[1].url" is NOT a child (too deep)
+ */
+export function isChildOfArray(defPath: string, arrayPath: string): boolean {
+	// Split arrayPath on [*] to get segments, then build a regex
+	// "categories[*].images" → ["categories", ".images"] → /^categories\[\d+\]\.images\[\d+\]$/
+	const segments = arrayPath.split('[*]')
+	let regexStr = '^'
+	for (let i = 0; i < segments.length; i++) {
+		regexStr += escapeRegex(segments[i]!)
+		if (i < segments.length - 1) {
+			regexStr += '\\[\\d+\\]'
+		}
+	}
+	regexStr += '\\[\\d+\\]$'
+	return new RegExp(regexStr).test(defPath)
+}
+
 /**
  * Index all images from a parsed file
  */
 export function indexFileImages(cached: CachedParsedFile, relFile: string): void {
 	// For Astro files, use AST
 	if (relFile.endsWith('.astro')) {
-		function visit(node: AstroNode) {
-			if (node.type === 'element') {
-				const elemNode = node as ElementNode
-				if (elemNode.name.toLowerCase() === 'img') {
+		function visit(node: AstroNode, parentExpression: AstroNode | null) {
+			// Track the nearest ancestor expression node (contains .map() context)
+			const currentExpr = node.type === 'expression' ? node : parentExpression
+
+			if (node.type === 'element' || node.type === 'component') {
+				const elemNode = node as ElementNode | ComponentNode
+				const isImg = node.type === 'element' && elemNode.name.toLowerCase() === 'img'
+				const isImageComponent = node.type === 'component' && elemNode.name === 'Image'
+
+				if (isImg || isImageComponent) {
 					for (const attr of elemNode.attributes) {
-						if (attr.type === 'attribute' && attr.name === 'src' && attr.value) {
+						if (attr.type !== 'attribute' || attr.name !== 'src' || !attr.value) continue
+
+						if ((attr as any).kind === 'expression' && currentExpr) {
+							// Expression src={variable} — trace through .map() to data source
+							indexExpressionImageSrc(
+								attr.value,
+								currentExpr,
+								cached,
+								relFile,
+							)
+						} else if ((attr as any).kind !== 'expression') {
+							// Static src="..." — index directly
 							const srcLine = attr.position?.start.line ?? elemNode.position?.start.line ?? 0
 							const snippet = extractImageSnippet(cached.lines, srcLine - 1)
 							addToImageSearchIndex({
@@ -364,31 +498,13 @@ export function indexFileImages(cached: CachedParsedFile, relFile: string): void
 				}
 			}
 
-			// Also index component nodes with src attributes (e.g., <Image src="..." />)
-			// This captures image component usages where the actual src is defined
-			if (node.type === 'component') {
-				const compNode = node as ComponentNode
-				for (const attr of compNode.attributes) {
-					if (attr.type === 'attribute' && attr.name === 'src' && attr.value) {
-						const srcLine = attr.position?.start.line ?? compNode.position?.start.line ?? 0
-						const snippet = extractImageSnippet(cached.lines, srcLine - 1)
-						addToImageSearchIndex({
-							file: relFile,
-							line: srcLine,
-							snippet,
-							src: attr.value,
-						})
-					}
-				}
-			}
-
 			if ('children' in node && Array.isArray(node.children)) {
 				for (const child of node.children) {
-					visit(child)
+					visit(child, currentExpr)
 				}
 			}
 		}
-		visit(cached.ast)
+		visit(cached.ast, null)
 	} else {
 		// For tsx/jsx, use regex
 		const srcPatterns = [/src="([^"]+)"/g, /src='([^']+)'/g]

package/src/vite-plugin.ts

@@ -47,14 +47,14 @@ export function createVitePlugin(context: VitePluginContext): Plugin[] {
 			// processes them. We use prependListener so our handler runs first.
 			const watcher = server.watcher
 			const origEmit = watcher.emit.bind(watcher)
-			watcher.emit = function (event: string, filePath: string, ...args: any[]) {
+			watcher.emit = ((event: string, filePath: string, ...args: any[]) => {
 				if ((event === 'unlink' || event === 'unlinkDir') && expectedDeletions.has(filePath)) {
 					expectedDeletions.delete(filePath)
 					// Swallow the event — don't let Vite/Astro see it
 					return true
 				}
 				return origEmit(event, filePath, ...args)
-			} as typeof watcher.emit
+			}) as typeof watcher.emit
 		},
 	}