@nuasite/cms 0.2.2 → 0.3.0

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

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
-import { manifest } from '../signals'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { LAYOUT } from '../constants'
-import { getComponentDefinition, getComponentDefinitions, getComponentInstance } from '../manifest'
+import { getComponentDefinition, getComponentDefinitions, getComponentInstance, getComponentInstances } from '../manifest'
+import { manifest } from '../signals'
 import type { ComponentProp, InsertPosition } from '../types'
 
 export interface BlockEditorProps {
@@ -37,11 +37,37 @@ export function BlockEditor({
 	const containerRef = useRef<HTMLDivElement>(null)
 	const mockPreviewRef = useRef<HTMLElement | null>(null)
 	const removeOverlayRef = useRef<HTMLElement | null>(null)
-	const [editorPosition, setEditorPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 })
+	const [editorPosition, setEditorPosition] = useState<{ top: number; left: number; maxHeight: number }>({ top: 0, left: 0, maxHeight: 0 })
 	const componentDefinitions = getComponentDefinitions(manifest.value)
 	const currentInstance = componentId ? getComponentInstance(manifest.value, componentId) : null
 	const currentDefinition = currentInstance ? getComponentDefinition(manifest.value, currentInstance.componentName) : null
 
+	// Detect if this component is rendered from a data array (.map pattern)
+	const isArrayItem = useMemo(() => {
+		if (!currentInstance) return false
+		const instances = getComponentInstances(manifest.value)
+		let count = 0
+		for (const c of Object.values(instances)) {
+			if (
+				c.componentName === currentInstance.componentName
+				&& c.invocationSourcePath === currentInstance.invocationSourcePath
+			) {
+				count++
+				if (count > 1) return true
+			}
+		}
+		return false
+	}, [currentInstance])
+
+	// Reset internal state when modal opens or a different component is selected
+	useEffect(() => {
+		if (visible) {
+			setMode('edit')
+			setSelectedComponent(null)
+			setInsertPosition('after')
+		}
+	}, [visible, componentId])
+
 	useEffect(() => {
 		if (currentInstance) {
 			setPropValues(currentInstance.props || {})
@@ -84,7 +110,11 @@ export function BlockEditor({
 				left = (viewportWidth - editorWidth) / 2
 			}
 
-			setEditorPosition({ top, left })
+			// Clamp top so the panel never extends past the viewport bottom
+			top = Math.max(padding, Math.min(top, viewportHeight - padding - 100))
+			const maxHeight = viewportHeight - top - padding
+
+			setEditorPosition({ top, left, maxHeight })
 		}
 
 		updatePosition()
@@ -217,6 +247,26 @@ export function BlockEditor({
 
 	const handleStartInsert = (position: InsertPosition) => {
 		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)
+				setMode('insert-props')
+				return
+			}
+		}
+
 		setMode('insert-picker')
 		setSelectedComponent(null)
 		setPropValues({})
@@ -272,10 +322,11 @@ 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)] max-h-[calc(100vh-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 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"
 				style={{
 					top: `${editorPosition.top}px`,
 					left: `${editorPosition.left}px`,
+					maxHeight: `${editorPosition.maxHeight}px`,
 				}}
 			>
 				{/* Header */}
@@ -283,18 +334,22 @@ export function BlockEditor({
 					<span class="font-semibold text-white">
 						{mode === 'edit'
 							? (
-								currentDefinition ? `Edit ${currentDefinition.name}` : 'Block Editor'
+								currentDefinition
+									? (isArrayItem ? `Edit ${currentDefinition.name} Item` : `Edit ${currentDefinition.name}`)
+									: 'Block Editor'
 							)
 							: mode === 'confirm-remove'
 							? (
-								`Remove ${currentDefinition?.name ?? 'Component'}`
+								isArrayItem
+									? `Remove ${currentDefinition?.name ?? ''} Item`
+									: `Remove ${currentDefinition?.name ?? 'Component'}`
 							)
 							: mode === 'insert-picker'
 							? (
 								`Insert ${insertPosition === 'before' ? 'Before' : 'After'}`
 							)
 							: (
-								`Add ${selectedComponent}`
+								isArrayItem ? `Add ${selectedComponent} Item` : `Add ${selectedComponent}`
 							)}
 					</span>
 					<button
@@ -316,13 +371,13 @@ export function BlockEditor({
 										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> Insert before
+										<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> Insert after
+										<span class="text-base">↓</span> {isArrayItem ? 'Add item after' : 'Insert after'}
 									</button>
 								</div>
 
@@ -347,7 +402,7 @@ export function BlockEditor({
 										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"
 									>
-										Remove
+										{isArrayItem ? 'Remove item' : 'Remove'}
 									</button>
 									<div class="flex gap-2">
 										<button
@@ -370,7 +425,17 @@ export function BlockEditor({
 						? (
 							<div class="text-center py-4">
 								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-md mb-5 text-[13px] text-white">
-									The <strong>{currentDefinition?.name}</strong> component highlighted in the page will be removed. This cannot be undone.
+									{isArrayItem
+										? (
+											<>
+												This <strong>{currentDefinition?.name}</strong> item will be removed from the data array. This cannot be undone.
+											</>
+										)
+										: (
+											<>
+												The <strong>{currentDefinition?.name}</strong> component highlighted in the page will be removed. This cannot be undone.
+											</>
+										)}
 								</div>
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
@@ -388,7 +453,7 @@ export function BlockEditor({
 										}}
 										class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 									>
-										Confirm remove
+										{isArrayItem ? 'Confirm remove item' : 'Confirm remove'}
 									</button>
 								</div>
 							</div>
@@ -399,7 +464,17 @@ export function BlockEditor({
 								{/* 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">
-										Inserting <strong>{selectedComponent}</strong> {insertPosition} current component
+										{isArrayItem
+											? (
+												<>
+													Adding new <strong>{selectedComponent}</strong> item {insertPosition} current item
+												</>
+											)
+											: (
+												<>
+													Inserting <strong>{selectedComponent}</strong> {insertPosition} current component
+												</>
+											)}
 									</div>
 									{componentDefinitions[selectedComponent]?.props.map((prop) => (
 										<PropEditor
@@ -413,7 +488,7 @@ export function BlockEditor({
 
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
-										onClick={() => setMode('insert-picker')}
+										onClick={() => isArrayItem ? handleBackToEdit() : setMode('insert-picker')}
 										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"
 									>
 										Back
@@ -422,7 +497,7 @@ export function BlockEditor({
 										onClick={handleConfirmInsert}
 										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"
 									>
-										Insert component
+										{isArrayItem ? 'Add item' : 'Insert component'}
 									</button>
 								</div>
 							</>

package/src/editor/components/color-toolbar.tsx

@@ -19,7 +19,13 @@ export interface ColorToolbarProps {
 	element: HTMLElement | null
 	availableColors: AvailableColors | undefined
 	currentClasses: Record<string, Attribute> | undefined
-	onColorChange?: (type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText', oldClass: string, newClass: string, previousClassName: string, previousStyleCssText: string) => void
+	onColorChange?: (
+		type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText',
+		oldClass: string,
+		newClass: string,
+		previousClassName: string,
+		previousStyleCssText: string,
+	) => void
 	onClose?: () => void
 }
 

package/src/editor/components/editable-highlights.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
+import { getOutlineColor } from '../dom'
 import * as signals from '../signals'
 
 export interface EditableHighlightsProps {
@@ -224,6 +225,7 @@ function collectEditableElements(): HighlightRect[] {
  * Render highlight overlays efficiently by reusing DOM elements
  */
 function renderHighlights(container: HTMLDivElement, highlights: HighlightRect[]): void {
+	const outlineColor = getOutlineColor()
 	// Get existing overlay elements
 	const existingOverlays = container.querySelectorAll('.highlight-overlay')
 	const existingCount = existingOverlays.length
@@ -246,11 +248,12 @@ function renderHighlights(container: HTMLDivElement, highlights: HighlightRect[]
 		// Update class based on type
 		overlay.className = `highlight-overlay ${highlight.type}`
 
-		// Update position
+		// Update position and color
 		overlay.style.left = `${highlight.rect.left - 6}px`
 		overlay.style.top = `${highlight.rect.top - 6}px`
 		overlay.style.width = `${highlight.rect.width + 12}px`
 		overlay.style.height = `${highlight.rect.height + 12}px`
+		overlay.style.borderColor = outlineColor
 	})
 
 	// Remove extra overlays

package/src/editor/components/outline.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { getColorPreview, parseColorClass } from '../color-utils'
 import { Z_INDEX } from '../constants'
+import { isPageDark } from '../dom'
 import * as signals from '../signals'
 
 export interface OutlineProps {
@@ -226,14 +227,18 @@ export function Outline(
 		overlayRef.current.style.width = `${width}px`
 		overlayRef.current.style.height = `${height}px`
 
+		// Detect page brightness for contrast-aware outline colors
+		const dark = isPageDark()
+		const outlineColor = dark ? '#FFFFFF' : '#1A1A1A'
+
 		// Different styling for components vs text elements
 		if (isComponent) {
-			overlayRef.current.style.border = `2px solid #1A1A1A` // Dark border
-			overlayRef.current.style.backgroundColor = 'rgba(0, 0, 0, 0.03)'
-			overlayRef.current.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.08)'
+			overlayRef.current.style.border = `2px solid ${outlineColor}`
+			overlayRef.current.style.backgroundColor = dark ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)'
+			overlayRef.current.style.boxShadow = dark ? '0 4px 16px rgba(255, 255, 255, 0.08)' : '0 4px 16px rgba(0, 0, 0, 0.08)'
 			labelRef.current.style.display = 'flex'
-			labelRef.current.style.backgroundColor = '#1A1A1A'
-			labelRef.current.style.color = 'white'
+			labelRef.current.style.backgroundColor = dark ? '#FFFFFF' : '#1A1A1A'
+			labelRef.current.style.color = dark ? '#1A1A1A' : 'white'
 			toolbarRef.current.className = 'element-toolbar hidden' // Hide toolbar for components
 
 			// Build label content
@@ -280,7 +285,7 @@ export function Outline(
 				labelRef.current.style.left = `${labelLeft}px`
 			}
 		} else {
-			overlayRef.current.style.border = `2px dashed #1A1A1A`
+			overlayRef.current.style.border = `2px dashed ${outlineColor}`
 			overlayRef.current.style.backgroundColor = 'transparent'
 			overlayRef.current.style.boxShadow = 'none'
 			labelRef.current.style.display = 'none'

package/src/editor/constants.ts

@@ -89,6 +89,7 @@ export const STORAGE_KEYS = {
 	PENDING_ATTRIBUTE_EDITS: 'cms-pending-attribute-edits',
 	SETTINGS: 'cms-settings',
 	PENDING_ENTRY_NAVIGATION: 'cms-pending-entry-navigation',
+	IS_EDITING: 'cms-is-editing',
 } as const
 
 /**

package/src/editor/dom.ts

@@ -8,6 +8,49 @@ import {
 import { CSS } from './constants'
 import type { ChildCmsElement } from './types'
 
+/**
+ * Parse an rgb/rgba color string into r, g, b components.
+ */
+function parseRgb(color: string): { r: number; g: number; b: number } | null {
+	const match = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
+	if (!match) return null
+	return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]) }
+}
+
+/**
+ * Calculate relative luminance of an sRGB color (0 = black, 1 = white).
+ */
+function relativeLuminance(r: number, g: number, b: number): number {
+	const toLinear = (c: number) => {
+		const s = c / 255
+		return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4
+	}
+	return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+}
+
+/**
+ * Detect whether the page has a dark background by checking the computed
+ * background color of the body and html elements.
+ */
+export function isPageDark(): boolean {
+	if (typeof document === 'undefined') return false
+	for (const el of [document.body, document.documentElement]) {
+		if (!el) continue
+		const bg = getComputedStyle(el).backgroundColor
+		if (!bg || bg === 'transparent' || bg === 'rgba(0, 0, 0, 0)') continue
+		const parsed = parseRgb(bg)
+		if (parsed) return relativeLuminance(parsed.r, parsed.g, parsed.b) < 0.4
+	}
+	return false
+}
+
+/**
+ * Get an outline color that contrasts with the page background.
+ */
+export function getOutlineColor(): string {
+	return isPageDark() ? '#FFFFFF' : '#1A1A1A'
+}
+
 /** Style element for contenteditable focus styles injected into the host page */
 let focusStyleElement: HTMLStyleElement | null = null
 
@@ -253,11 +296,13 @@ export function cleanupHighlightSystem(): void {
  */
 function injectFocusStyles(): void {
 	if (focusStyleElement) return
+	const dark = isPageDark()
+	const focusColor = dark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(26, 26, 26, 0.15)'
 	focusStyleElement = document.createElement('style')
 	focusStyleElement.id = 'cms-focus-styles'
 	focusStyleElement.textContent = `
 		[contenteditable="true"][data-cms-id]:focus {
-			outline: 2px solid rgba(26, 26, 26, 0.15);
+			outline: 2px solid ${focusColor};
 			outline-offset: 6px;
 			border-radius: 4px;
 		}

package/src/editor/editor.ts

@@ -1,7 +1,5 @@
-import type { Attribute } from './types'
 import { fetchManifest, getDeploymentStatus, getMarkdownContent, saveBatchChanges } from './api'
 import { CSS, TIMING } from './constants'
-import { clearHistory, isApplyingUndoRedo, recordChange, recordTextChange } from './history'
 import {
 	cleanupHighlightSystem,
 	disableAllInteractiveElements,
@@ -16,6 +14,7 @@ import {
 	makeElementEditable,
 	makeElementNonEditable,
 } from './dom'
+import { clearHistory, isApplyingUndoRedo, recordChange, recordTextChange } from './history'
 import { getManifestEntryCount, hasManifestEntry } from './manifest'
 import * as signals from './signals'
 import {
@@ -27,9 +26,11 @@ import {
 	loadPendingEntryNavigation,
 	saveAttributeEditsToStorage,
 	saveColorEditsToStorage,
+	saveEditingState,
 	saveEditsToStorage,
 	saveImageEditsToStorage,
 } from './storage'
+import type { Attribute } from './types'
 import type { AttributeChangePayload, ChangePayload, CmsConfig, DeploymentStatusResponse, ManifestEntry, SavedAttributeEdit } from './types'
 
 // CSS attribute for markdown content elements
@@ -92,6 +93,7 @@ export async function startEditMode(
 	onStateChange?: () => void,
 ): Promise<void> {
 	signals.setEditing(true)
+	saveEditingState(true)
 	disableAllInteractiveElements()
 	initHighlightSystem()
 	onStateChange?.()
@@ -310,6 +312,7 @@ export async function startEditMode(
  */
 export function stopEditMode(onStateChange?: () => void): void {
 	signals.setEditing(false)
+	saveEditingState(false)
 	signals.setShowingOriginal(false)
 	enableAllInteractiveElements()
 	cleanupHighlightSystem()

package/src/editor/history.ts

@@ -1,11 +1,6 @@
 import { computed, signal } from '@preact/signals'
 import * as signals from './signals'
-import {
-	saveAttributeEditsToStorage,
-	saveColorEditsToStorage,
-	saveEditsToStorage,
-	saveImageEditsToStorage,
-} from './storage'
+import { saveAttributeEditsToStorage, saveColorEditsToStorage, saveEditsToStorage, saveImageEditsToStorage } from './storage'
 import type { Attribute, UndoAction, UndoTextAction } from './types'
 
 // ============================================================================

package/src/editor/hooks/useBlockEditorHandlers.ts

@@ -1,8 +1,29 @@
 import { useCallback, useState } from 'preact/hooks'
 import { logDebug } from '../dom'
 import { startDeploymentPolling } from '../editor'
+import { getComponentInstances } from '../manifest'
 import * as signals from '../signals'
-import type { CmsConfig, InsertPosition } from '../types'
+import type { CmsConfig, CmsManifest, ComponentInstance, InsertPosition } from '../types'
+
+/**
+ * Detect whether a component is rendered from a data array via `.map()`.
+ * Heuristic: if multiple component instances share the same name AND the same
+ * invocationSourcePath, they are likely array-rendered.
+ */
+function isArrayRendered(manifest: CmsManifest, component: ComponentInstance): boolean {
+	const instances = getComponentInstances(manifest)
+	let count = 0
+	for (const c of Object.values(instances)) {
+		if (
+			c.componentName === component.componentName
+			&& c.invocationSourcePath === component.invocationSourcePath
+		) {
+			count++
+			if (count > 1) return true
+		}
+	}
+	return false
+}
 
 /** Collapse a DOM element with a smooth height transition */
 function collapseElement(el: Element) {
@@ -65,7 +86,7 @@ export function useBlockEditorHandlers({
 	)
 
 	/**
-	 * Insert a new component
+	 * Insert a new component (or add array item if array-rendered)
 	 */
 	const handleInsertComponent = useCallback(
 		async (
@@ -84,6 +105,11 @@ export function useBlockEditorHandlers({
 				props,
 			)
 
+			// Check if this is an array-rendered component
+			const currentManifest = signals.manifest.value
+			const refComponent = currentManifest.components[referenceComponentId]
+			const arrayMode = refComponent && isArrayRendered(currentManifest, refComponent)
+
 			// Clone the existing mock preview before the block editor unmounts and removes it
 			const existingMock = document.querySelector('[data-cms-preview-mock]') as HTMLElement | null
 			let previewEl: HTMLElement | null = null
@@ -96,30 +122,55 @@ export function useBlockEditorHandlers({
 				existingMock.parentNode?.insertBefore(previewEl, existingMock.nextSibling)
 			}
 
-			// Call API to insert the component in source code
 			try {
-				const response = await fetch(`${config.apiBase}/insert-component`, {
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					credentials: 'include',
-					body: JSON.stringify({
-						position,
-						referenceComponentId,
-						componentName,
-						props,
-						meta: {
-							source: 'inline-editor',
-							url: window.location.href,
-						},
-					}),
-				})
+				if (arrayMode) {
+					// Route to array-item endpoint
+					const response = await fetch(`${config.apiBase}/add-array-item`, {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						credentials: 'include',
+						body: JSON.stringify({
+							referenceComponentId,
+							position,
+							props,
+							meta: {
+								source: 'inline-editor',
+								url: window.location.href,
+							},
+						}),
+					})
 
-				if (!response.ok) {
-					const error = await response.text()
-					throw new Error(error || 'Failed to insert component')
-				}
+					if (!response.ok) {
+						const error = await response.text()
+						throw new Error(error || 'Failed to add array item')
+					}
+
+					showToast(`Item added ${position} current item`, 'success')
+				} else {
+					// Standard component insertion
+					const response = await fetch(`${config.apiBase}/insert-component`, {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						credentials: 'include',
+						body: JSON.stringify({
+							position,
+							referenceComponentId,
+							componentName,
+							props,
+							meta: {
+								source: 'inline-editor',
+								url: window.location.href,
+							},
+						}),
+					})
 
-				showToast(`${componentName} inserted ${position} component`, 'success')
+					if (!response.ok) {
+						const error = await response.text()
+						throw new Error(error || 'Failed to insert component')
+					}
+
+					showToast(`${componentName} inserted ${position} component`, 'success')
+				}
 
 				// Trigger deployment polling after successful insert
 				startDeploymentPolling(config)
@@ -129,19 +180,24 @@ export function useBlockEditorHandlers({
 				// Remove the preview on failure
 				previewEl?.remove()
 
-				showToast('Failed to insert component', 'error')
+				showToast(arrayMode ? 'Failed to add array item' : 'Failed to insert component', 'error')
 			}
 		},
 		[config.apiBase, config.debug, config, showToast],
 	)
 
 	/**
-	 * Remove a block/component
+	 * Remove a block/component (or remove array item if array-rendered)
 	 */
 	const handleRemoveBlock = useCallback(
 		async (componentId: string) => {
 			logDebug(config.debug, 'Remove block:', componentId)
 
+			// Check if this is an array-rendered component
+			const currentManifest = signals.manifest.value
+			const component = currentManifest.components[componentId]
+			const arrayMode = component && isArrayRendered(currentManifest, component)
+
 			// Find the element in the DOM
 			const componentEl = document.querySelector(
 				`[data-cms-component-id="${componentId}"]`,
@@ -154,7 +210,8 @@ export function useBlockEditorHandlers({
 			}
 
 			try {
-				const response = await fetch(`${config.apiBase}/remove-component`, {
+				const endpoint = arrayMode ? 'remove-array-item' : 'remove-component'
+				const response = await fetch(`${config.apiBase}/${endpoint}`, {
 					method: 'POST',
 					headers: { 'Content-Type': 'application/json' },
 					credentials: 'include',
@@ -169,10 +226,10 @@ export function useBlockEditorHandlers({
 
 				if (!response.ok) {
 					const error = await response.text()
-					throw new Error(error || 'Failed to remove component')
+					throw new Error(error || `Failed to ${arrayMode ? 'remove item' : 'remove component'}`)
 				}
 
-				showToast('Component removed', 'success')
+				showToast(arrayMode ? 'Item removed' : 'Component removed', 'success')
 
 				// Trigger deployment polling after successful remove
 				startDeploymentPolling(config)
@@ -183,7 +240,7 @@ export function useBlockEditorHandlers({
 				}
 			} catch (error) {
 				console.error('[CMS] Failed to remove component:', error)
-				showToast('Failed to remove component', 'error')
+				showToast(arrayMode ? 'Failed to remove item' : 'Failed to remove component', 'error')
 
 				// Restore the component's appearance on failure
 				if (componentEl) {