@nuasite/cms 0.12.4 → 0.13.1

package/package.json

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

package/src/dev-middleware.ts

@@ -2,8 +2,9 @@ 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 { detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem } from './handlers/array-ops'
+import { buildMapPattern, detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem, parseInlineArrayName } from './handlers/array-ops'
 import {
 	extractPropsFromSource,
 	findComponentInvocationLine,
@@ -13,7 +14,7 @@ import {
 	handleRemoveComponent,
 	normalizeFilePath,
 } from './handlers/component-ops'
-import { handleCreateMarkdown, handleGetMarkdownContent, handleUpdateMarkdown } from './handlers/markdown-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 { processHtml } from './html-processor'
@@ -29,8 +30,19 @@ interface ViteDevServerLike {
 		use: (middleware: (req: IncomingMessage, res: ServerResponse, next: () => void) => void) => void
 	}
 	transformIndexHtml: (url: string, html: string) => Promise<string>
+	watcher?: {
+		on: (event: string, listener: (...args: any[]) => void) => any
+		removeListener: (event: string, listener: (...args: any[]) => void) => any
+	}
 }
 
+/**
+ * Set of absolute file paths that the CMS expects to be deleted.
+ * When Vite/Astro detects an unlink for one of these files, the CMS
+ * intercepts the event and prevents a full page reload.
+ */
+export const expectedDeletions = new Set<string>()
+
 export interface DevMiddlewareOptions {
 	enableCmsApi?: boolean
 	mediaAdapter?: MediaStorageAdapter
@@ -89,7 +101,7 @@ export function createDevMiddleware(
 
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
-			handleCmsApiRoute(route, req, res, manifestWriter, options.mediaAdapter).catch(
+			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter).catch(
 				(error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -279,6 +291,7 @@ async function handleCmsApiRoute(
 	req: IncomingMessage,
 	res: ServerResponse,
 	manifestWriter: ManifestWriter,
+	contentDir: string,
 	mediaAdapter?: MediaStorageAdapter,
 ): Promise<void> {
 	// POST /_nua/cms/update
@@ -354,6 +367,24 @@ async function handleCmsApiRoute(
 		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) {
@@ -507,6 +538,10 @@ async function processHtmlForDev(
 	}
 
 	for (const comp of Object.values(result.components)) {
+		// Skip inline array components — they have no <Tag> in source;
+		// their props are resolved in the array-group pass below
+		if (comp.componentName.startsWith('__array:')) continue
+
 		let found = false
 
 		// Try invocationSourcePath first (may point to a layout, not the page)
@@ -547,7 +582,7 @@ async function processHtmlForDev(
 	}
 
 	for (const group of componentGroups.values()) {
-		if (group.length <= 1) continue
+		if (group.length < 1) continue
 		// Only process groups where at least one component has empty props (spread case)
 		if (!group.some(c => Object.keys(c.props).length === 0)) continue
 
@@ -556,11 +591,33 @@ async function processHtmlForDev(
 		const lines = await readLines(path.resolve(projectRoot, filePath))
 		if (!lines) continue
 
-		// Find the invocation line (occurrence 0, since .map() has a single <Component> tag)
-		const invLine = findComponentInvocationLine(lines, firstComp.componentName, 0)
-		if (invLine < 0) continue
-
-		const pattern = detectArrayPattern(lines, invLine)
+		// For inline array components (__array:varName or __array:varName#N), find the .map() line
+		// directly instead of searching for a component tag that won't exist
+		let pattern: ReturnType<typeof detectArrayPattern>
+		const parsed = parseInlineArrayName(firstComp.componentName)
+		if (parsed) {
+			const { arrayVarName, mapOccurrence } = parsed
+			const fmEndCheck = findFrontmatterEnd(lines)
+			const mapRegex = new RegExp(buildMapPattern(arrayVarName))
+			let mapLine = -1
+			let seen = 0
+			for (let i = fmEndCheck; i < lines.length; i++) {
+				if (mapRegex.test(lines[i]!)) {
+					if (seen === mapOccurrence) {
+						mapLine = i
+						break
+					}
+					seen++
+				}
+			}
+			if (mapLine < 0) continue
+			pattern = { arrayVarName, mapLineIndex: mapLine }
+		} else {
+			// Find the invocation line (occurrence 0, since .map() has a single <Component> tag)
+			const invLine = findComponentInvocationLine(lines, firstComp.componentName, 0)
+			if (invLine < 0) continue
+			pattern = detectArrayPattern(lines, invLine)
+		}
 		if (!pattern) continue
 
 		const fmEnd = findFrontmatterEnd(lines)

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

@@ -1,6 +1,9 @@
 import { useMemo } from 'preact/hooks'
+import { signal } from '@preact/signals'
+import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
+	config,
 	isCollectionsBrowserOpen,
 	manifest,
 	openMarkdownEditorForEntry,
@@ -10,6 +13,9 @@ import {
 } from '../signals'
 import { savePendingEntryNavigation } from '../storage'
 
+const deletingEntry = signal<string | null>(null)
+const confirmDeleteSlug = signal<string | null>(null)
+
 export function CollectionsBrowser() {
 	const visible = isCollectionsBrowserOpen.value
 	const selected = selectedBrowserCollection.value
@@ -54,6 +60,44 @@ export function CollectionsBrowser() {
 			openMarkdownEditorForNewPage(selected, def)
 		}
 
+		const handleDeleteClick = (e: Event, slug: string) => {
+			e.stopPropagation()
+			confirmDeleteSlug.value = slug
+		}
+
+		const handleConfirmDelete = async (slug: string, sourcePath: string) => {
+			deletingEntry.value = slug
+
+			// Optimistically remove the entry from the manifest
+			const defs = manifest.value.collectionDefinitions
+			const currentDef = defs?.[selected]
+			if (currentDef) {
+				const updatedEntries = (currentDef.entries ?? []).filter(e => e.slug !== slug)
+				manifest.value = {
+					...manifest.value,
+					collectionDefinitions: {
+						...defs,
+						[selected]: {
+							...currentDef,
+							entries: updatedEntries,
+							entryCount: updatedEntries.length,
+						},
+					},
+				}
+			}
+
+			deletingEntry.value = null
+			confirmDeleteSlug.value = null
+
+			// Fire the API call in the background
+			deleteMarkdownPage(config.value, sourcePath)
+		}
+
+		const handleCancelDelete = (e: Event) => {
+			e.stopPropagation()
+			confirmDeleteSlug.value = null
+		}
+
 		return (
 			<div
 				class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -99,33 +143,68 @@ export function CollectionsBrowser() {
 							</div>
 						)}
 						{entries.map((entry) => (
-							<button
-								key={entry.slug}
-								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}
+							<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>
-									{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={() => 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}
+											</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>
 				</div>
@@ -250,3 +329,11 @@ function BackArrowIcon() {
 		</svg>
 	)
 }
+
+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" />
+		</svg>
+	)
+}

package/src/editor/markdown-api.ts

@@ -107,6 +107,33 @@ export async function fetchMarkdownContent(
 	return res.json()
 }
 
+/**
+ * Delete a markdown page (collection entry)
+ */
+export async function deleteMarkdownPage(
+	config: CmsConfig,
+	filePath: string,
+): Promise<{ success: boolean; error?: string }> {
+	const res = await fetchWithTimeout(`${config.apiBase}/markdown/delete`, {
+		method: 'POST',
+		credentials: 'include',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({ filePath }),
+	})
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '')
+		return {
+			success: false,
+			error: `Delete failed (${res.status}): ${text || res.statusText}`,
+		}
+	}
+
+	return res.json()
+}
+
 /**
  * Fetch media library items
  */

package/src/handlers/array-ops.ts

@@ -3,7 +3,7 @@ import fs from 'node:fs/promises'
 import { getProjectRoot } from '../config'
 import type { ManifestWriter } from '../manifest-writer'
 import type { CmsManifest, ComponentInstance } from '../types'
-import { acquireFileLock, normalizePagePath, resolveAndValidatePath } from '../utils'
+import { acquireFileLock, escapeRegex, normalizePagePath, resolveAndValidatePath } from '../utils'
 import {
 	findComponentInvocationFile,
 	findComponentInvocationLine,
@@ -13,6 +13,40 @@ import {
 	normalizeFilePath,
 } from './component-ops'
 
+/**
+ * Parse an inline array component name like `__array:varName` or `__array:varName#1`.
+ * Returns the variable name and the .map() occurrence index (0-based).
+ */
+export function parseInlineArrayName(componentName: string): { arrayVarName: string; mapOccurrence: number } | null {
+	if (!componentName.startsWith('__array:')) return null
+	const rest = componentName.slice('__array:'.length)
+	const hashIndex = rest.indexOf('#')
+	if (hashIndex < 0) return { arrayVarName: rest, mapOccurrence: 0 }
+	const occurrence = Number(rest.slice(hashIndex + 1))
+	if (Number.isNaN(occurrence)) return null
+	return {
+		arrayVarName: rest.slice(0, hashIndex),
+		mapOccurrence: occurrence,
+	}
+}
+
+/**
+ * Build a regex pattern string that matches `.map(` calls on variables/properties.
+ *
+ * Supports simple variables (`{items.map(`) and dotted property paths
+ * (`{data.items.map(`, `{Astro.props.items.map(`).
+ * Also handles optional chaining (`{items?.map(`).
+ *
+ * If `varName` is omitted, uses a capture group to match any variable name
+ * (captures only the last segment before `.map`).
+ */
+export function buildMapPattern(varName?: string): string {
+	// Allow optional leading dotted path segments (e.g. `Astro.props.`)
+	const prefix = '(?:[\\w]+\\.)*'
+	const name = varName ? escapeRegex(varName) : '(\\w+)'
+	return `\\{${prefix}${name}\\??\\.map\\s*\\(`
+}
+
 export interface AddArrayItemRequest {
 	referenceComponentId: string
 	position: 'before' | 'after'
@@ -55,8 +89,7 @@ export function detectArrayPattern(
 	const searchStart = Math.max(0, invocationLineIndex - 5)
 	for (let i = invocationLineIndex; i >= searchStart; i--) {
 		const line = lines[i]!
-		// Match patterns like: {varName.map( or varName.map(
-		const match = line.match(/\{?\s*(\w+)\.map\s*\(/)
+		const match = line.match(new RegExp(buildMapPattern()))
 		if (match) {
 			return { arrayVarName: match[1]!, mapLineIndex: i }
 		}
@@ -131,7 +164,7 @@ function extractElementBounds(
 ): ArrayElementBounds[] {
 	const bounds: ArrayElementBounds[] = []
 	for (const el of elements) {
-		if (el?.loc) {
+		if (el?.loc && el.type !== 'SpreadElement') {
 			bounds.push({
 				// Babel loc is 1-indexed; convert to 0-indexed file lines
 				startLine: el.loc.start.line - 1 + frontmatterStartLine,
@@ -254,6 +287,66 @@ async function resolveArrayContext(
 ) {
 	const projectRoot = getProjectRoot()
 
+	// Inline array components (__array:varName or __array:varName#N) — find .map() line directly
+	const parsed = parseInlineArrayName(component.componentName)
+	if (parsed) {
+		const { arrayVarName, mapOccurrence } = parsed
+		const filePath = normalizeFilePath(component.invocationSourcePath ?? component.sourcePath)
+		const fullPath = resolveAndValidatePath(filePath)
+		const content = await fs.readFile(fullPath, 'utf-8')
+		const lines = content.split('\n')
+
+		// Find the Nth .map() line by searching the template section
+		const fmEnd = findFrontmatterEnd(lines)
+		if (fmEnd === 0) return null
+
+		let mapLineIndex = -1
+		let occurrencesSeen = 0
+		const mapPattern = new RegExp(buildMapPattern(arrayVarName))
+		for (let i = fmEnd; i < lines.length; i++) {
+			if (mapPattern.test(lines[i]!)) {
+				if (occurrencesSeen === mapOccurrence) {
+					mapLineIndex = i
+					break
+				}
+				occurrencesSeen++
+			}
+		}
+		if (mapLineIndex < 0) return null
+
+		const frontmatterStartLine = 1
+		const frontmatterContent = lines.slice(1, fmEnd - 1).join('\n')
+
+		const elementBounds = findArrayDeclaration(
+			frontmatterContent,
+			frontmatterStartLine,
+			arrayVarName,
+		)
+		if (!elementBounds || elementBounds.length === 0) return null
+
+		// Get array index from same-source components (sorted by invocationIndex for reliable ordering)
+		const sameSourceComponents = Object.values(manifest.components)
+			.filter(c =>
+				c.componentName === component.componentName
+				&& c.invocationSourcePath === component.invocationSourcePath
+			)
+			.sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
+		const arrayIndex = sameSourceComponents.findIndex(c => c.id === component.id)
+		if (arrayIndex < 0 || arrayIndex >= elementBounds.length) return null
+
+		return {
+			filePath,
+			fullPath,
+			lines,
+			content,
+			elementBounds,
+			arrayIndex,
+			frontmatterContent,
+			frontmatterStartLine,
+			arrayVarName,
+		}
+	}
+
 	const invocation = await findComponentInvocationFile(
 		projectRoot,
 		pageUrl,
@@ -308,11 +401,13 @@ async function resolveArrayContext(
 	// which maps directly to the Nth array element.
 	const occurrenceIndex = getComponentOccurrenceIndex(manifest, component)
 	// Count only components with the same name AND same invocationSourcePath to get array index
+	// Sort by invocationIndex for reliable ordering (don't rely on Object.values insertion order)
 	const sameSourceComponents = Object.values(manifest.components)
 		.filter(c =>
 			c.componentName === component.componentName
 			&& c.invocationSourcePath === component.invocationSourcePath
 		)
+		.sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
 	const arrayIndex = sameSourceComponents.findIndex(c => c.id === component.id)
 
 	if (arrayIndex < 0 || arrayIndex >= elementBounds.length) {
@@ -329,7 +424,6 @@ async function resolveArrayContext(
 		frontmatterContent,
 		frontmatterStartLine,
 		arrayVarName: pattern.arrayVarName,
-		occurrenceIndex,
 	}
 }
 
@@ -366,15 +460,25 @@ export async function handleRemoveArrayItem(
 			return { success: false, error: 'Could not detect array pattern for this component' }
 		}
 
-		const { fullPath, lines, elementBounds, arrayIndex } = ctx
+		const { fullPath, arrayIndex } = ctx
 
 		const release = await acquireFileLock(fullPath)
 		try {
-			// Re-read the file to avoid stale data
+			// Re-read the file and recompute bounds to avoid stale data
 			const freshContent = await fs.readFile(fullPath, 'utf-8')
 			const freshLines = freshContent.split('\n')
 
-			const bounds = elementBounds[arrayIndex]!
+			const freshFmEnd = findFrontmatterEnd(freshLines)
+			if (freshFmEnd === 0) {
+				return { success: false, error: 'Could not find frontmatter in source file' }
+			}
+			const freshFmContent = freshLines.slice(1, freshFmEnd - 1).join('\n')
+			const freshBounds = findArrayDeclaration(freshFmContent, 1, ctx.arrayVarName)
+			if (!freshBounds || arrayIndex >= freshBounds.length) {
+				return { success: false, error: 'Array declaration not found or index out of bounds after re-read' }
+			}
+
+			const bounds = freshBounds[arrayIndex]!
 			const removeStart = bounds.startLine
 			let removeEnd = bounds.endLine
 
@@ -387,8 +491,8 @@ export async function handleRemoveArrayItem(
 				// now becomes the last element (remove its trailing comma)
 			}
 
-			// Check line after removeEnd for a comma-only or blank line
-			if (removeEnd + 1 < freshLines.length && freshLines[removeEnd + 1]!.trim() === '') {
+			// Check line after removeEnd for a blank separator line (only between elements, not at start)
+			if (removeStart > 0 && removeEnd + 1 < freshLines.length && freshLines[removeEnd + 1]!.trim() === '') {
 				removeEnd++
 			}
 
@@ -454,14 +558,25 @@ export async function handleAddArrayItem(
 			return { success: false, error: 'Could not detect array pattern for this component' }
 		}
 
-		const { fullPath, elementBounds, arrayIndex } = ctx
+		const { fullPath, arrayIndex } = ctx
 
 		const release = await acquireFileLock(fullPath)
 		try {
+			// Re-read the file and recompute bounds to avoid stale data
 			const freshContent = await fs.readFile(fullPath, 'utf-8')
 			const freshLines = freshContent.split('\n')
 
-			const refBounds = elementBounds[arrayIndex]!
+			const freshFmEnd = findFrontmatterEnd(freshLines)
+			if (freshFmEnd === 0) {
+				return { success: false, error: 'Could not find frontmatter in source file' }
+			}
+			const freshFmContent = freshLines.slice(1, freshFmEnd - 1).join('\n')
+			const freshBounds = findArrayDeclaration(freshFmContent, 1, ctx.arrayVarName)
+			if (!freshBounds || arrayIndex >= freshBounds.length) {
+				return { success: false, error: 'Array declaration not found or index out of bounds after re-read' }
+			}
+
+			const refBounds = freshBounds[arrayIndex]!
 
 			// Generate JS object literal from props
 			const newElement = generateObjectLiteral(props)
@@ -482,7 +597,7 @@ export async function handleAddArrayItem(
 			if (position === 'before') {
 				// Insert before the reference element
 				const insertLine = refBounds.startLine
-				freshLines.splice(insertLine, 0, indentedLines + ',')
+				freshLines.splice(insertLine, 0, ...(indentedLines + ',').split('\n'))
 			} else {
 				// Insert after the reference element
 				const insertLine = refBounds.endLine + 1
@@ -491,17 +606,19 @@ export async function handleAddArrayItem(
 				if (!refEndLine.trimEnd().endsWith(',')) {
 					freshLines[refBounds.endLine] = refEndLine.replace(/(\s*)$/, ',$1')
 				}
-				freshLines.splice(insertLine, 0, indentedLines + ',')
+				freshLines.splice(insertLine, 0, ...(indentedLines + ',').split('\n'))
 			}
 
 			// Clean up trailing comma before closing bracket
-			// Find the closing ] and remove comma from the last element
-			for (let i = freshLines.length - 1; i >= 0; i--) {
+			// Search forward from the last element to find this array's closing ]
+			// The insertion always happens within the array, so the ] shifts by addedLineCount
+			const lastEl = freshBounds[freshBounds.length - 1]!
+			const addedLineCount = indentedLines.split('\n').length
+			const closingSearchStart = lastEl.endLine + addedLineCount + 1
+			for (let i = closingSearchStart; i < closingSearchStart + 5 && i < freshLines.length; i++) {
 				if (freshLines[i]!.trim().startsWith(']')) {
 					const prev = freshLines[i - 1]
 					if (prev?.trimEnd().endsWith(',')) {
-						// Check if this is the array we're editing by scanning backwards
-						// to find the array variable
 						freshLines[i - 1] = prev.replace(/,(\s*)$/, '$1')
 					}
 					break
@@ -528,7 +645,7 @@ export async function handleAddArrayItem(
  * Generate a JavaScript object literal string from props.
  * Example: { name: 'Components', slug: 'components' }
  */
-function generateObjectLiteral(props: Record<string, unknown>): string {
+export function generateObjectLiteral(props: Record<string, unknown>): string {
 	const entries = Object.entries(props)
 	if (entries.length === 0) return '{}'
 
@@ -545,9 +662,10 @@ function generateObjectLiteral(props: Record<string, unknown>): string {
 }
 
 function formatValue(value: unknown): string {
-	if (typeof value === 'string') return `'${value.replace(/'/g, "\\'")}'`
+	if (typeof value === 'string') return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
 	if (typeof value === 'number' || typeof value === 'boolean') return String(value)
-	if (value === null || value === undefined) return 'undefined'
+	if (value === null) return 'null'
+	if (value === undefined) return 'undefined'
 	if (Array.isArray(value)) return `[${value.map(formatValue).join(', ')}]`
 	if (typeof value === 'object') return generateObjectLiteral(value as Record<string, unknown>)
 	return String(value)

package/src/handlers/markdown-ops.ts

@@ -41,6 +41,15 @@ export interface UpdateMarkdownResponse {
 	error?: string
 }
 
+export interface DeleteMarkdownRequest {
+	filePath: string
+}
+
+export interface DeleteMarkdownResponse {
+	success: boolean
+	error?: string
+}
+
 export interface GetMarkdownContentResponse {
 	content: string
 	frontmatter: BlogFrontmatter
@@ -135,6 +144,26 @@ export async function handleCreateMarkdown(
 	}
 }
 
+export async function handleDeleteMarkdown(
+	request: DeleteMarkdownRequest,
+): Promise<DeleteMarkdownResponse> {
+	try {
+		const fullPath = resolveAndValidatePath(request.filePath)
+
+		// Verify the file exists before deleting
+		await fs.access(fullPath)
+		await fs.unlink(fullPath)
+
+		return { success: true }
+	} catch (error) {
+		if (error instanceof Error && 'code' in error && (error as NodeJS.ErrnoException).code === 'ENOENT') {
+			return { success: false, error: `File not found: ${request.filePath}` }
+		}
+		const message = error instanceof Error ? error.message : String(error)
+		return { success: false, error: message }
+	}
+}
+
 // --- Internal helpers ---
 
 /**

package/src/handlers/source-writer.ts

@@ -1,6 +1,6 @@
+import { NodeType, parse as parseHtml } from 'node-html-parser'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { NodeType, parse as parseHtml } from 'node-html-parser'
 import { getProjectRoot } from '../config'
 import type { AttributeChangePayload, ChangePayload, SaveBatchRequest } from '../editor/types'
 import type { ManifestWriter } from '../manifest-writer'