@nuasite/cms 0.3.0 → 0.5.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",
@@ -28,24 +28,23 @@
   "dependencies": {
     "@astrojs/compiler": "^2.13.0",
     "@babel/parser": "^7.24.0",
+    "node-html-parser": "^6.1.13",
+    "yaml": "^2.8.2"
+  },
+  "devDependencies": {
     "@milkdown/core": "^7.8.0",
+    "@milkdown/ctx": "^7.8.0",
     "@milkdown/plugin-listener": "^7.8.0",
     "@milkdown/preset-commonmark": "^7.8.0",
     "@milkdown/preset-gfm": "^7.8.0",
+    "@milkdown/prose": "^7.8.0",
     "@milkdown/utils": "^7.8.0",
     "@preact/signals": "^2.6.1",
     "@tailwindcss/vite": "^4.1.11",
+    "@types/bun": "latest",
     "clsx": "^2.1.1",
     "marked": "^17.0.1",
-    "node-html-parser": "^6.1.13",
     "preact": "^10.28.0",
-    "tailwind-merge": "^3.4.0",
-    "yaml": "^2.8.2"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "@milkdown/ctx": "^7.8.0",
-    "@milkdown/prose": "^7.8.0",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
@@ -54,7 +53,8 @@
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.10.5",
-    "prosemirror-view": "^1.41.5"
+    "prosemirror-view": "^1.41.5",
+    "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
     "astro": "^5.16.6",
@@ -68,7 +68,8 @@
     }
   },
   "scripts": {
-    "prepack": "bun run ../../scripts/workspace-deps/resolve-deps.ts"
+    "build": "vite build --config vite.config.editor.ts",
+    "prepack": "bun run build && bun run ../../scripts/workspace-deps/resolve-deps.ts"
   },
   "keywords": [
     "astro",

package/src/dev-middleware.ts

@@ -98,18 +98,50 @@ export function createDevMiddleware(
 	}
 
 	// Serve global CMS manifest (component definitions, available colors, collection definitions, and settings)
-	server.middlewares.use((req, res, next) => {
+	server.middlewares.use(async (req, res, next) => {
 		const pathname = (req.url || '').split('?')[0]
 		if (pathname === '/cms-manifest.json') {
 			res.setHeader('Content-Type', 'application/json')
 			res.setHeader('Access-Control-Allow-Origin', '*')
 			res.setHeader('Cache-Control', 'no-store')
+
+			// Build pages from visited pages (have titles from SEO) + filesystem scan
+			const pageMap = new Map<string, { pathname: string; title?: string }>()
+
+			// 1. Add pages discovered from filesystem (src/pages)
+			const discoveredPages = await discoverPagesFromFilesystem()
+			for (const pagePath of discoveredPages) {
+				pageMap.set(pagePath, { pathname: pagePath })
+			}
+
+			// 2. Add collection entry pages from collection definitions
+			const collectionDefs = manifestWriter.getCollectionDefinitions()
+			for (const def of Object.values(collectionDefs)) {
+				if (def.entries) {
+					for (const entry of def.entries) {
+						if (entry.pathname) {
+							pageMap.set(entry.pathname, { pathname: entry.pathname, title: entry.title })
+						}
+					}
+				}
+			}
+
+			// 3. Overlay visited pages (they have SEO titles)
+			for (const [pagePath, data] of manifestWriter.getPageDataForPreviews()) {
+				const existing = pageMap.get(pagePath)
+				const title = data.seo?.title?.content || existing?.title
+				pageMap.set(pagePath, { pathname: pagePath, ...(title ? { title } : {}) })
+			}
+
+			const pages = Array.from(pageMap.values())
+				.sort((a, b) => a.pathname.localeCompare(b.pathname))
+
 			const manifest: Record<string, unknown> = {
 				componentDefinitions,
 				availableColors: manifestWriter.getAvailableColors(),
 				availableTextStyles: manifestWriter.getAvailableTextStyles(),
+				pages,
 			}
-			const collectionDefs = manifestWriter.getCollectionDefinitions()
 			if (Object.keys(collectionDefs).length > 0) {
 				manifest.collectionDefinitions = collectionDefs
 			}
@@ -577,6 +609,54 @@ async function processHtmlForDev(
 	}
 }
 
+/** Page file extensions recognized by Astro */
+const PAGE_EXTENSIONS = new Set(['.astro', '.md', '.mdx'])
+
+/**
+ * Scan src/pages directory to discover all static page routes.
+ * Skips dynamic routes (files with [ in the name) and API routes (.ts/.js).
+ */
+async function discoverPagesFromFilesystem(): Promise<string[]> {
+	const projectRoot = getProjectRoot()
+	const pagesDir = path.join(projectRoot, 'src', 'pages')
+
+	try {
+		await fs.access(pagesDir)
+	} catch {
+		return []
+	}
+
+	const pages: string[] = []
+
+	async function walk(dir: string, urlPrefix: string) {
+		const entries = await fs.readdir(dir, { withFileTypes: true })
+		for (const entry of entries) {
+			if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+			const fullPath = path.join(dir, entry.name)
+			if (entry.isDirectory()) {
+				// Skip directories with dynamic segments
+				if (entry.name.includes('[')) continue
+				await walk(fullPath, `${urlPrefix}${entry.name}/`)
+			} else {
+				const ext = path.extname(entry.name)
+				if (!PAGE_EXTENSIONS.has(ext)) continue
+				// Skip dynamic routes
+				if (entry.name.includes('[')) continue
+
+				const baseName = path.basename(entry.name, ext)
+				const pagePath = baseName === 'index'
+					? urlPrefix.replace(/\/$/, '') || '/'
+					: `${urlPrefix}${baseName}`
+				pages.push(pagePath)
+			}
+		}
+	}
+
+	await walk(pagesDir, '/')
+	return pages
+}
+
 function mediaMimeFromExt(ext: string): string {
 	const map: Record<string, string> = {
 		'.jpg': 'image/jpeg',

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

@@ -7,7 +7,7 @@ import type { ComponentProp, InsertPosition } from '../types'
 export interface BlockEditorProps {
 	visible: boolean
 	componentId: string | null
-	rect: DOMRect | null
+	cursor: { x: number; y: number } | null
 	onClose: () => void
 	onUpdateProps: (componentId: string, props: Record<string, any>) => void
 	onInsertComponent: (
@@ -24,7 +24,7 @@ type EditorMode = 'edit' | 'insert-picker' | 'insert-props' | 'confirm-remove'
 export function BlockEditor({
 	visible,
 	componentId,
-	rect,
+	cursor,
 	onClose,
 	onUpdateProps,
 	onInsertComponent,
@@ -66,7 +66,7 @@ export function BlockEditor({
 			setSelectedComponent(null)
 			setInsertPosition('after')
 		}
-	}, [visible, componentId])
+	}, [visible])
 
 	useEffect(() => {
 		if (currentInstance) {
@@ -79,7 +79,6 @@ export function BlockEditor({
 
 		const updatePosition = () => {
 			const editorWidth = LAYOUT.BLOCK_EDITOR_WIDTH
-			const editorHeight = LAYOUT.BLOCK_EDITOR_HEIGHT
 			const padding = LAYOUT.VIEWPORT_PADDING
 			const viewportWidth = window.innerWidth
 			const viewportHeight = window.innerHeight
@@ -87,18 +86,11 @@ export function BlockEditor({
 			let top: number
 			let left: number
 
-			if (rect) {
-				top = rect.bottom + padding
-				left = rect.left
-
-				if (top + editorHeight > viewportHeight - padding) {
-					top = Math.max(padding, rect.top - editorHeight - padding)
-				}
-
-				if (top < padding) {
-					top = Math.max(padding, (viewportHeight - editorHeight) / 2)
-				}
+			if (cursor) {
+				top = cursor.y
+				left = cursor.x
 
+				// Keep within viewport bounds
 				if (left + editorWidth > viewportWidth - padding) {
 					left = viewportWidth - editorWidth - padding
 				}
@@ -106,7 +98,7 @@ export function BlockEditor({
 					left = padding
 				}
 			} else {
-				top = (viewportHeight - editorHeight) / 2
+				top = viewportHeight / 2
 				left = (viewportWidth - editorWidth) / 2
 			}
 
@@ -119,13 +111,11 @@ export function BlockEditor({
 
 		updatePosition()
 		window.addEventListener('resize', updatePosition)
-		window.addEventListener('scroll', updatePosition)
 
 		return () => {
 			window.removeEventListener('resize', updatePosition)
-			window.removeEventListener('scroll', updatePosition)
 		}
-	}, [visible, rect])
+	}, [visible, cursor])
 
 	// Inject/remove inline mock preview into the real page at the insertion point
 	useEffect(() => {
@@ -361,28 +351,13 @@ export function BlockEditor({
 				</div>
 
 				{/* Content */}
-				<div class="p-5 overflow-y-auto flex-1 bg-cms-dark">
+				<div class={`flex-1 flex flex-col overflow-hidden bg-cms-dark ${mode === 'edit' && currentDefinition ? '' : 'overflow-y-auto'}`}>
 					{mode === 'edit' && currentDefinition
 						? (
 							<>
-								{/* Insert buttons */}
-								<div class="mb-5 flex gap-2">
-									<button
-										onClick={() => handleStartInsert('before')}
-										class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
-									>
-										<span class="text-base">↑</span> {isArrayItem ? 'Add item before' : 'Insert before'}
-									</button>
-									<button
-										onClick={() => handleStartInsert('after')}
-										class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
-									>
-										<span class="text-base">↓</span> {isArrayItem ? 'Add item after' : 'Insert after'}
-									</button>
-								</div>
-
-								{/* Props editor */}
-								<div class="mb-5">
+								{/* Scrollable body */}
+								<div class="p-5 overflow-y-auto flex-1">
+									{/* Props editor */}
 									<div class="text-xs font-medium text-white/50 tracking-wide mb-3 uppercase">
 										Properties
 									</div>
@@ -396,34 +371,50 @@ export function BlockEditor({
 									))}
 								</div>
 
-								{/* Actions */}
-								<div class="flex gap-2 justify-between pt-4 border-t border-white/10 mt-4">
-									<button
-										onClick={() => setMode('confirm-remove')}
-										class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
-									>
-										{isArrayItem ? 'Remove item' : 'Remove'}
-									</button>
+								{/* Insert buttons + Actions — outside scroll area */}
+								<div class="px-5 py-4 border-t border-white/10 flex flex-col gap-3">
 									<div class="flex gap-2">
 										<button
-											onClick={onClose}
-											class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+											onClick={() => handleStartInsert('before')}
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
+										>
+											<span class="text-base">↑</span> {isArrayItem ? 'Add item before' : 'Insert before'}
+										</button>
+										<button
+											onClick={() => handleStartInsert('after')}
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
 										>
-											Cancel
+											<span class="text-base">↓</span> {isArrayItem ? 'Add item after' : 'Insert after'}
 										</button>
+									</div>
+									<div class="flex gap-2 justify-between">
 										<button
-											onClick={handleSave}
-											class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+											onClick={() => setMode('confirm-remove')}
+											class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 										>
-											Save
+											{isArrayItem ? 'Remove item' : 'Remove'}
 										</button>
+										<div class="flex gap-2">
+											<button
+												onClick={onClose}
+												class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+											>
+												Cancel
+											</button>
+											<button
+												onClick={handleSave}
+												class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+											>
+												Save
+											</button>
+										</div>
 									</div>
 								</div>
 							</>
 						)
 						: mode === 'confirm-remove'
 						? (
-							<div class="text-center py-4">
+							<div class="text-center p-5">
 								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-md mb-5 text-[13px] text-white">
 									{isArrayItem
 										? (
@@ -460,7 +451,7 @@ export function BlockEditor({
 						)
 						: mode === 'insert-props' && selectedComponent
 						? (
-							<>
+							<div class="p-5">
 								{/* New component props */}
 								<div class="mb-5">
 									<div class="px-4 py-3 bg-white/10 rounded-cms-md mb-4 text-[13px] text-white">
@@ -500,12 +491,12 @@ export function BlockEditor({
 										{isArrayItem ? 'Add item' : 'Insert component'}
 									</button>
 								</div>
-							</>
+							</div>
 						)
 						: mode === 'insert-picker'
 						? (
 							/* Component picker for insertion */
-							<div>
+							<div class="p-5">
 								<div class="text-xs font-medium text-white/50 tracking-wide mb-4 uppercase">
 									Select component to insert
 								</div>
@@ -559,7 +550,7 @@ export function BlockEditor({
 						)
 						: (
 							/* No component selected - show placeholder */
-							<div class="text-center text-white/50 py-8">
+							<div class="text-center text-white/50 p-5 py-8">
 								<p>Select a component to edit its properties.</p>
 							</div>
 						)}

package/src/editor/components/outline.tsx

@@ -110,6 +110,19 @@ export function Outline(
           box-shadow: 0 8px 32px rgba(0,0,0,0.3);
           pointer-events: auto;
           z-index: ${Z_INDEX.MODAL};
+          margin-top: 6px;
+        }
+
+        .element-toolbar::before {
+          content: '';
+          position: absolute;
+          top: -25px;
+          left: -50px;
+          right: -50px;
+          bottom: 0;
+          z-index: -1;
+          pointer-events: auto;
+          background: transparent;
         }
 
         .element-toolbar.hidden {
@@ -143,8 +156,8 @@ export function Outline(
         }
 
         .attr-button {
-          width: 24px;
-          height: 24px;
+          width: 32px;
+          height: 32px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -161,8 +174,8 @@ export function Outline(
         }
 
         .attr-button svg {
-          width: 14px;
-          height: 14px;
+          width: 18px;
+          height: 18px;
           color: rgba(255,255,255,0.7);
         }
 
@@ -325,41 +338,35 @@ export function Outline(
 					}
 				}
 
-				// Add color swatches
+				// Add unified color swatch
 				if (hasColorSwatches && colorClasses) {
-					// Create bg swatch
-					if (colorClasses.bg?.value) {
-						const parsed = parseColorClass(colorClasses.bg.value)
-						if (parsed) {
-							const preview = getColorPreview(parsed.colorName, parsed.shade)
-							const swatch = document.createElement('div')
-							swatch.className = `color-swatch${parsed.colorName === 'white' ? ' white' : ''}`
-							applySwatchStyle(swatch, parsed.colorName, preview)
-							swatch.title = `Background: ${colorClasses.bg.value}`
-							swatch.onclick = (e) => {
-								e.stopPropagation()
-								if (cmsId && onColorClick) onColorClick(cmsId, rect)
-							}
-							toolbarRef.current.appendChild(swatch)
-						}
+					const bgParsed = colorClasses.bg?.value ? parseColorClass(colorClasses.bg.value) : null
+					const textParsed = colorClasses.text?.value ? parseColorClass(colorClasses.text.value) : null
+					const bgPreview = bgParsed ? getColorPreview(bgParsed.colorName, bgParsed.shade) : null
+					const textPreview = textParsed ? getColorPreview(textParsed.colorName, textParsed.shade) : null
+
+					const swatch = document.createElement('div')
+					const isWhite = (bgParsed && !textParsed && bgParsed.colorName === 'white')
+						|| (!bgParsed && textParsed && textParsed.colorName === 'white')
+					swatch.className = `color-swatch${isWhite ? ' white' : ''}`
+
+					if (bgPreview && textPreview) {
+						// Split swatch: diagonal half bg, half text
+						swatch.style.background = `linear-gradient(135deg, ${bgPreview} 50%, ${textPreview} 50%)`
+						swatch.title = `Background: ${colorClasses.bg!.value} / Text: ${colorClasses.text!.value}`
+					} else if (bgParsed && bgPreview) {
+						applySwatchStyle(swatch, bgParsed.colorName, bgPreview)
+						swatch.title = `Background: ${colorClasses.bg!.value}`
+					} else if (textParsed && textPreview) {
+						applySwatchStyle(swatch, textParsed.colorName, textPreview)
+						swatch.title = `Text: ${colorClasses.text!.value}`
 					}
 
-					// Create text swatch
-					if (colorClasses.text?.value) {
-						const parsed = parseColorClass(colorClasses.text.value)
-						if (parsed) {
-							const preview = getColorPreview(parsed.colorName, parsed.shade)
-							const swatch = document.createElement('div')
-							swatch.className = `color-swatch${parsed.colorName === 'white' ? ' white' : ''}`
-							applySwatchStyle(swatch, parsed.colorName, preview)
-							swatch.title = `Text: ${colorClasses.text.value}`
-							swatch.onclick = (e) => {
-								e.stopPropagation()
-								if (cmsId && onColorClick) onColorClick(cmsId, rect)
-							}
-							toolbarRef.current.appendChild(swatch)
-						}
+					swatch.onclick = (e) => {
+						e.stopPropagation()
+						if (cmsId && onColorClick) onColorClick(cmsId, rect)
 					}
+					toolbarRef.current.appendChild(swatch)
 				}
 
 				// Add divider and attribute button if needed

package/src/editor/components/toolbar.tsx

@@ -18,6 +18,7 @@ export interface ToolbarCallbacks {
 	onToggleHighlights?: () => void
 	onSeoEditor?: () => void
 	onOpenCollection?: (name: string) => void
+	onOpenCollections?: () => void
 }
 
 export interface ToolbarProps {
@@ -143,11 +144,13 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 		})
 	}
 
-	// Collection items from definitions
+	// Single consolidated collections item
 	if (collectionDefinitions) {
-		for (const def of Object.values(collectionDefinitions)) {
+		const labels = Object.values(collectionDefinitions).map((d) => d.label)
+		const collectionsLabel = labels.length <= 2 ? labels.join(', ') : `${labels.slice(0, 2).join(', ')}, ...`
+		if (labels.length > 0) {
 			menuItems.push({
-				label: def.label,
+				label: collectionsLabel,
 				icon: (
 					<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<rect x="3" y="3" width="7" height="7" rx="1" />
@@ -156,7 +159,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 						<rect x="14" y="14" width="7" height="7" rx="1" />
 					</svg>
 				),
-				onClick: () => callbacks.onOpenCollection?.(def.name),
+				onClick: () => callbacks.onOpenCollections?.(),
 			})
 		}
 	}

package/src/editor/hooks/useBlockEditorHandlers.ts

@@ -50,16 +50,16 @@ export function useBlockEditorHandlers({
 	config,
 	showToast,
 }: BlockEditorHandlersOptions) {
-	const [blockEditorRect, setBlockEditorRect] = useState<DOMRect | null>(null)
+	const [blockEditorCursor, setBlockEditorCursor] = useState<{ x: number; y: number } | null>(null)
 
 	/**
 	 * Open block editor for a component
 	 */
 	const handleComponentSelect = useCallback(
-		(componentId: string, rect: DOMRect) => {
+		(componentId: string, cursor: { x: number; y: number }) => {
 			signals.setCurrentComponentId(componentId)
 			signals.setBlockEditorOpen(true)
-			setBlockEditorRect(rect)
+			setBlockEditorCursor(cursor)
 		},
 		[],
 	)
@@ -70,7 +70,7 @@ export function useBlockEditorHandlers({
 	const handleBlockEditorClose = useCallback(() => {
 		signals.setBlockEditorOpen(false)
 		signals.setCurrentComponentId(null)
-		setBlockEditorRect(null)
+		setBlockEditorCursor(null)
 	}, [])
 
 	/**
@@ -253,7 +253,7 @@ export function useBlockEditorHandlers({
 	)
 
 	return {
-		blockEditorRect,
+		blockEditorCursor,
 		handleComponentSelect,
 		handleBlockEditorClose,
 		handleUpdateProps,

package/src/editor/hooks/useElementDetection.ts

@@ -209,7 +209,7 @@ export function useElementDetection(): OutlineState {
 }
 
 export interface ComponentClickHandlerOptions {
-	onComponentSelect: (componentId: string, rect: DOMRect) => void
+	onComponentSelect: (componentId: string, cursor: { x: number; y: number }) => void
 }
 
 /**
@@ -269,7 +269,7 @@ export function useComponentClickHandler({
 					if (componentId) {
 						ev.preventDefault()
 						ev.stopPropagation()
-						onComponentSelect(componentId, rect)
+						onComponentSelect(componentId, { x: ev.clientX, y: ev.clientY })
 					}
 				}
 			}

package/src/editor/index.tsx

@@ -109,7 +109,7 @@ const CmsUI = () => {
 	})
 
 	const {
-		blockEditorRect,
+		blockEditorCursor,
 		handleComponentSelect,
 		handleBlockEditorClose,
 		handleUpdateProps,
@@ -287,6 +287,7 @@ const CmsUI = () => {
 						onToggleHighlights: handleToggleHighlights,
 						onSeoEditor: hasSeoData ? handleSeoEditor : undefined,
 						onOpenCollection: handleOpenCollection,
+						onOpenCollections: openCollectionsBrowser,
 					}}
 					collectionDefinitions={Object.keys(collectionDefinitions).length > 0 ? collectionDefinitions : undefined}
 				/>
@@ -346,7 +347,7 @@ const CmsUI = () => {
 				<BlockEditor
 					visible={blockEditorState.isOpen && isEditing}
 					componentId={blockEditorState.currentComponentId}
-					rect={blockEditorRect}
+					cursor={blockEditorCursor}
 					onClose={handleBlockEditorClose}
 					onUpdateProps={handleUpdateProps}
 					onInsertComponent={handleInsertComponent}

package/src/handlers/array-ops.ts

@@ -131,7 +131,7 @@ function extractElementBounds(
 ): ArrayElementBounds[] {
 	const bounds: ArrayElementBounds[] = []
 	for (const el of elements) {
-		if (el && el.loc) {
+		if (el?.loc) {
 			bounds.push({
 				// Babel loc is 1-indexed; convert to 0-indexed file lines
 				startLine: el.loc.start.line - 1 + frontmatterStartLine,
@@ -273,7 +273,7 @@ export async function handleRemoveArrayItem(
 			const freshLines = freshContent.split('\n')
 
 			const bounds = elementBounds[arrayIndex]!
-			let removeStart = bounds.startLine
+			const removeStart = bounds.startLine
 			let removeEnd = bounds.endLine
 
 			// Clean up trailing comma on the line after the element, or leading comma
@@ -298,7 +298,7 @@ export async function handleRemoveArrayItem(
 			if (removeStart > 0 && removeStart <= freshLines.length) {
 				const prevLine = freshLines[removeStart - 1]!
 				const nextLine = freshLines[removeStart]
-				if (nextLine !== undefined && nextLine.trim().startsWith(']') && prevLine.trimEnd().endsWith(',')) {
+				if (nextLine?.trim().startsWith(']') && prevLine.trimEnd().endsWith(',')) {
 					freshLines[removeStart - 1] = prevLine.replace(/,\s*$/, '')
 				}
 			}
@@ -397,7 +397,7 @@ export async function handleAddArrayItem(
 			for (let i = freshLines.length - 1; i >= 0; i--) {
 				if (freshLines[i]!.trim().startsWith(']')) {
 					const prev = freshLines[i - 1]
-					if (prev && prev.trimEnd().endsWith(',')) {
+					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')