@nuasite/cms 0.5.1 → 0.7.0

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

@@ -175,7 +175,8 @@ export function SeoEditor() {
 			})
 
 			if (result.errors && result.errors.length > 0) {
-				showToast(`Saved ${result.updated} SEO changes, ${result.errors.length} failed`, 'error')
+				const details = result.errors.map(e => e.error).join('; ')
+				showToast(`SEO save failed: ${details}`, 'error')
 			} else {
 				showToast(`Saved ${result.updated} SEO change(s) successfully!`, 'success')
 				clearPendingSeoChanges()

package/src/editor/components/text-style-toolbar.tsx

@@ -196,7 +196,7 @@ export function TextStyleToolbar({ visible, rect, element, onStyleChange }: Text
 	return (
 		<div
 			data-cms-ui
-			onMouseDown={(e) => e.stopPropagation()}
+			onMouseDown={(e) => { e.preventDefault(); e.stopPropagation() }}
 			onClick={(e) => e.stopPropagation()}
 			style={{
 				position: 'fixed',

package/src/editor/components/toast/toast.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { TIMING } from '../../constants'
 import type { ToastMessage } from './types'
 
@@ -8,8 +8,16 @@ interface ToastProps extends ToastMessage {
 
 export const Toast = ({ id, message, type, onRemove }: ToastProps) => {
 	const [isVisible, setIsVisible] = useState(true)
+	const persistent = type === 'error'
+
+	const dismiss = useCallback(() => {
+		setIsVisible(false)
+		setTimeout(() => onRemove(id), TIMING.TOAST_FADE_DURATION_MS)
+	}, [id, onRemove])
 
 	useEffect(() => {
+		if (persistent) return
+
 		const hideTimer = setTimeout(() => {
 			setIsVisible(false)
 		}, TIMING.TOAST_VISIBLE_DURATION_MS)
@@ -22,7 +30,7 @@ export const Toast = ({ id, message, type, onRemove }: ToastProps) => {
 			clearTimeout(hideTimer)
 			clearTimeout(removeTimer)
 		}
-	}, [id, onRemove])
+	}, [id, onRemove, persistent])
 
 	const typeClasses = {
 		error: 'bg-cms-dark border-l-4 border-l-cms-error text-white',
@@ -44,6 +52,15 @@ export const Toast = ({ id, message, type, onRemove }: ToastProps) => {
 			{type === 'error' && <span class="text-cms-error text-lg">✕</span>}
 			{type === 'info' && <span class="w-2.5 h-2.5 rounded-full bg-white/50 shrink-0" />}
 			{message}
+			{persistent && (
+				<button
+					onClick={dismiss}
+					class="ml-1 text-white/60 hover:text-white transition-colors text-lg leading-none cursor-pointer"
+					aria-label="Dismiss"
+				>
+					✕
+				</button>
+			)}
 		</div>
 	)
 }

package/src/editor/editor.ts

@@ -154,27 +154,13 @@ export async function startEditMode(
 		makeElementEditable(el)
 
 		// Suppress browser native contentEditable undo/redo (we handle it ourselves)
-		// Also convert Enter (insertParagraph) to <br> instead of the browser's
-		// default behavior which creates <div> elements with &nbsp; characters
+		// Also prevent Enter/Shift+Enter from inserting line breaks
 		el.addEventListener('beforeinput', (e) => {
 			if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
 				e.preventDefault()
 			}
-			if (e.inputType === 'insertParagraph') {
+			if (e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak') {
 				e.preventDefault()
-				const selection = window.getSelection()
-				if (selection && selection.rangeCount > 0) {
-					const range = selection.getRangeAt(0)
-					range.deleteContents()
-					const br = document.createElement('br')
-					range.insertNode(br)
-					range.setStartAfter(br)
-					range.collapse(true)
-					selection.removeAllRanges()
-					selection.addRange(range)
-					// Trigger input event for change tracking
-					el.dispatchEvent(new Event('input', { bubbles: true }))
-				}
 			}
 		})
 
@@ -633,14 +619,14 @@ export async function saveAllChanges(
 			// For each color type that changed, add a separate change entry
 			const { originalClasses, newClasses } = change
 			const entry = manifest.entries[cmsId]
-			const colorTypes = ['bg', 'text', 'border', 'hoverBg', 'hoverText'] as const
+			const classTypes = ['bg', 'text', 'border', 'hoverBg', 'hoverText', 'fontWeight', 'fontStyle', 'textDecoration', 'fontSize'] as const
 
 			// Find the best source info from any color type that has it
 			// (all color types share the same class attribute on the same element)
 			let sharedSourcePath: string | undefined
 			let sharedSourceLine: number | undefined
 			let sharedSourceSnippet: string | undefined
-			for (const ct of colorTypes) {
+			for (const ct of classTypes) {
 				const orig = originalClasses[ct]
 				const curr = newClasses[ct]
 				const sp = curr?.sourcePath ?? orig?.sourcePath
@@ -653,10 +639,10 @@ export async function saveAllChanges(
 				}
 			}
 
-			for (const colorType of colorTypes) {
-				const origAttr = originalClasses[colorType]
-				const newAttr = newClasses[colorType]
-				if (newAttr?.value && newAttr.value !== origAttr?.value) {
+			for (const classType of classTypes) {
+				const origAttr = originalClasses[classType]
+				const newAttr = newClasses[classType]
+				if (newAttr && newAttr.value !== (origAttr?.value ?? '')) {
 					const bestSourcePath = newAttr.sourcePath ?? origAttr?.sourcePath ?? sharedSourcePath
 					const bestSourceLine = newAttr.sourceLine ?? origAttr?.sourceLine ?? sharedSourceLine
 					const bestSourceSnippet = newAttr.sourceSnippet ?? origAttr?.sourceSnippet ?? sharedSourceSnippet
@@ -670,7 +656,7 @@ export async function saveAllChanges(
 						colorChange: {
 							oldClass: origAttr?.value || '',
 							newClass: newAttr.value,
-							type: colorType,
+							type: classType,
 							sourcePath: bestSourcePath,
 							sourceLine: bestSourceLine,
 							sourceSnippet: bestSourceSnippet,
@@ -1047,7 +1033,7 @@ function setupColorTracking(
 export function handleColorChange(
 	config: CmsConfig,
 	cmsId: string,
-	colorType: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText',
+	colorType: string,
 	oldClass: string,
 	newClass: string,
 	onStateChange?: () => void,
@@ -1140,11 +1126,24 @@ export interface DeploymentPollingOptions {
  * Start polling for deployment status after a save operation.
  * Polls the API every 3 seconds until deployment completes or fails.
  * Waits for deployment to appear for up to 30 seconds before giving up.
+ * Skips polling entirely when deployment is not available (e.g. local dev).
  */
-export function startDeploymentPolling(config: CmsConfig, options?: DeploymentPollingOptions): void {
+export async function startDeploymentPolling(config: CmsConfig, options?: DeploymentPollingOptions): Promise<void> {
 	// Clear any existing timers
 	stopDeploymentPolling()
 
+	// Do a preflight check to see if deployment is available
+	try {
+		const preflight = await getDeploymentStatus(config.apiBase)
+		if (preflight.deploymentEnabled === false) {
+			// Deployment not available (e.g. local dev) — skip polling entirely
+			return
+		}
+	} catch {
+		// If we can't even reach the endpoint, skip polling
+		return
+	}
+
 	// Reset wait attempts counter and store the timestamp when we started
 	deploymentWaitAttempts = 0
 	deploymentStartTimestamp = new Date().toISOString()

package/src/editor/index.tsx

@@ -55,6 +55,26 @@ import { hasPendingEntryNavigation, loadEditingState, loadSettingsFromStorage, s
 import CMS_STYLES from './styles.css?inline'
 import { generateCSSVariables, resolveTheme } from './themes'
 
+/** Inline CSS values for Tailwind text style classes (for preview before save) */
+const TEXT_STYLE_INLINE_CSS: Record<string, Record<string, string>> = {
+	'font-normal': { fontWeight: '400' },
+	'font-medium': { fontWeight: '500' },
+	'font-semibold': { fontWeight: '600' },
+	'font-bold': { fontWeight: '700' },
+	'italic': { fontStyle: 'italic' },
+	'not-italic': { fontStyle: 'normal' },
+	'underline': { textDecoration: 'underline' },
+	'line-through': { textDecoration: 'line-through' },
+	'no-underline': { textDecoration: 'none' },
+	'text-xs': { fontSize: '0.75rem', lineHeight: '1rem' },
+	'text-sm': { fontSize: '0.875rem', lineHeight: '1.25rem' },
+	'text-base': { fontSize: '1rem', lineHeight: '1.5rem' },
+	'text-lg': { fontSize: '1.125rem', lineHeight: '1.75rem' },
+	'text-xl': { fontSize: '1.25rem', lineHeight: '1.75rem' },
+	'text-2xl': { fontSize: '1.5rem', lineHeight: '2rem' },
+	'text-3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
+}
+
 const CmsUI = () => {
 	const config = signals.config.value
 	const outlineState = useElementDetection()
@@ -142,10 +162,12 @@ const CmsUI = () => {
 			if (result.success) {
 				signals.showToast(`Saved ${result.updated} change(s) successfully!`, 'success')
 			} else if (result.errors) {
-				signals.showToast(`Saved ${result.updated}, ${result.errors.length} failed`, 'error')
+				const details = result.errors.map(e => e.error).join('; ')
+				signals.showToast(`Save failed: ${details}`, 'error')
 			}
 		} catch (err) {
-			signals.showToast('Save failed – see console', 'error')
+			const message = err instanceof Error ? err.message : 'Unknown error'
+			signals.showToast(`Save failed: ${message}`, 'error')
 		}
 	}, [config, updateUI])
 
@@ -216,6 +238,65 @@ const CmsUI = () => {
 		signals.openAttributeEditor(cmsId, rect)
 	}, [])
 
+	// Handle text style change from outline (element-level styling via class toggle)
+	const handleOutlineTextStyleChange = useCallback((cmsId: string, styleType: string, oldClass: string, newClass: string) => {
+		let change = signals.pendingColorChanges.value.get(cmsId)
+
+		// Create pending color change entry if it doesn't exist yet
+		// (elements with allowStyling=false may lack colorClasses but still need text style tracking)
+		if (!change) {
+			const el = document.querySelector(`[data-cms-id="${cmsId}"]`) as HTMLElement
+			if (!el) return
+
+			const entry = signals.manifest.value.entries[cmsId]
+			const originalClasses: Record<string, import('../types').Attribute> = {}
+			const newClasses: Record<string, import('../types').Attribute> = {}
+			if (entry?.colorClasses) {
+				for (const [key, attr] of Object.entries(entry.colorClasses)) {
+					originalClasses[key] = { ...attr }
+					newClasses[key] = { ...attr }
+				}
+			}
+
+			signals.setPendingColorChange(cmsId, {
+				element: el,
+				cmsId,
+				originalClasses,
+				newClasses,
+				isDirty: false,
+			})
+			change = signals.pendingColorChanges.value.get(cmsId)!
+		}
+
+		// Apply the class change on the DOM element
+		const el = change.element
+		const previousClassName = el.className
+		const previousStyleCssText = el.style.cssText
+
+		if (oldClass) {
+			el.classList.remove(oldClass)
+			const oldCss = TEXT_STYLE_INLINE_CSS[oldClass]
+			if (oldCss) {
+				for (const prop of Object.keys(oldCss)) {
+					;(el.style as any)[prop] = ''
+				}
+			}
+		}
+		el.classList.add(newClass)
+
+		// Apply inline styles for immediate visual preview
+		// (Tailwind classes not present in source won't be in the compiled CSS)
+		const newCss = TEXT_STYLE_INLINE_CSS[newClass]
+		if (newCss) {
+			for (const [prop, value] of Object.entries(newCss)) {
+				;(el.style as any)[prop] = value
+			}
+		}
+
+		// Delegate to handleColorChange (same class-replacement mechanism)
+		handleColorChange(config, cmsId, styleType, oldClass, newClass, updateUI, previousClassName, previousStyleCssText)
+	}, [config, updateUI])
+
 	// Handle attribute editor close
 	const handleAttributeEditorClose = useCallback(() => {
 		signals.closeAttributeEditor()
@@ -233,12 +314,24 @@ const CmsUI = () => {
 	const showEditableHighlights = signals.showEditableHighlights.value
 	const hasSeoData = !!(manifest as any).seo
 
+	// Check if selected text element allows inline styling
+	const selectedElementCmsId = textSelectionState.element?.getAttribute('data-cms-id')
+	const selectedEntry = selectedElementCmsId ? manifest.entries[selectedElementCmsId] : undefined
+	const isTextStylingAllowed = selectedEntry?.allowStyling !== false
+
 	// Get color toolbar data
+	const pendingColorChanges = signals.pendingColorChanges.value
 	const colorEditorElement = colorEditorState.targetElementId
-		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.element ?? null
+		? pendingColorChanges.get(colorEditorState.targetElementId)?.element ?? null
 		: null
 	const colorEditorCurrentClasses = colorEditorState.targetElementId
-		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.newClasses
+		? pendingColorChanges.get(colorEditorState.targetElementId)?.newClasses
+		: undefined
+
+	// Get current text style classes for the outlined element (reactive - triggers re-render on change)
+	const outlineCmsId = outlineState.cmsId
+	const outlineTextStyleClasses = outlineCmsId
+		? pendingColorChanges.get(outlineCmsId)?.newClasses
 		: undefined
 
 	return (
@@ -256,8 +349,10 @@ const CmsUI = () => {
 					tagName={outlineState.tagName}
 					element={outlineState.element}
 					cmsId={outlineState.cmsId}
+					textStyleClasses={outlineTextStyleClasses}
 					onColorClick={handleOutlineColorClick}
 					onAttributeClick={handleOutlineAttributeClick}
+					onTextStyleChange={handleOutlineTextStyleChange}
 				/>
 			</ErrorBoundary>
 
@@ -307,7 +402,7 @@ const CmsUI = () => {
 
 			<ErrorBoundary componentName="Text Style Toolbar">
 				<TextStyleToolbar
-					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing}
+					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing && isTextStylingAllowed}
 					rect={textSelectionState.rect}
 					element={textSelectionState.element}
 					onStyleChange={updateUI}

package/src/editor/types.ts

@@ -138,8 +138,8 @@ export interface ColorChangePayload {
 	oldClass: string
 	/** The new color class (e.g., 'bg-red-500') */
 	newClass: string
-	/** Type of color change: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' */
-	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText'
+	/** Type of color/style change */
+	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' | 'fontWeight' | 'fontStyle' | 'textDecoration' | 'fontSize'
 	/** Path to the source file where the color class is defined */
 	sourcePath?: string
 	/** Line number where the color class is defined */
@@ -418,6 +418,8 @@ export interface DeploymentStatusResponse {
 		publishedUrl: string
 	} | null
 	pendingCount: number
+	/** When false, deployment is not available (e.g. local dev) and polling should be skipped */
+	deploymentEnabled?: boolean
 }
 
 export interface DeploymentState {

package/src/handlers/array-ops.ts

@@ -142,6 +142,108 @@ function extractElementBounds(
 	return bounds
 }
 
+/**
+ * Extract property values from a specific array element in the frontmatter.
+ *
+ * Parses the frontmatter code with Babel, finds the array variable declaration,
+ * and returns the property values from the element at the given index.
+ * Used to resolve spread props for array-rendered components (e.g. `{...item}`).
+ */
+export function extractArrayElementProps(
+	frontmatterContent: string,
+	arrayVarName: string,
+	elementIndex: number,
+): Record<string, any> | null {
+	let ast: ReturnType<typeof parseBabel>
+	try {
+		ast = parseBabel(frontmatterContent, {
+			sourceType: 'module',
+			plugins: ['typescript'],
+			errorRecovery: true,
+		})
+	} catch {
+		return null
+	}
+
+	for (const node of ast.program.body) {
+		const arrayExpr = findArrayExpression(node, arrayVarName)
+		if (arrayExpr && elementIndex < arrayExpr.elements.length) {
+			const element = arrayExpr.elements[elementIndex]
+			if (element?.type === 'ObjectExpression') {
+				return extractObjectValues(element, frontmatterContent)
+			}
+		}
+	}
+
+	return null
+}
+
+function findArrayExpression(node: any, varName: string): any | null {
+	if (node.type === 'VariableDeclaration') {
+		for (const decl of node.declarations) {
+			if (
+				decl.id.type === 'Identifier'
+				&& decl.id.name === varName
+				&& decl.init?.type === 'ArrayExpression'
+			) {
+				return decl.init
+			}
+		}
+	}
+	if (node.type === 'ExportNamedDeclaration' && node.declaration?.type === 'VariableDeclaration') {
+		for (const decl of node.declaration.declarations) {
+			if (
+				decl.id.type === 'Identifier'
+				&& decl.id.name === varName
+				&& decl.init?.type === 'ArrayExpression'
+			) {
+				return decl.init
+			}
+		}
+	}
+	return null
+}
+
+function extractObjectValues(node: any, source: string): Record<string, any> {
+	const props: Record<string, any> = {}
+	for (const prop of node.properties) {
+		if (prop.type !== 'ObjectProperty') continue
+		const key = prop.key.type === 'Identifier' ? prop.key.name : prop.key.value
+		if (!key) continue
+		props[key] = extractAstValue(prop.value, source)
+	}
+	return props
+}
+
+function extractAstValue(node: any, source: string): any {
+	switch (node.type) {
+		case 'StringLiteral':
+			return node.value
+		case 'NumericLiteral':
+			return node.value
+		case 'BooleanLiteral':
+			return node.value
+		case 'NullLiteral':
+			return null
+		case 'TemplateLiteral':
+			if (node.expressions.length === 0 && node.quasis.length === 1) {
+				return node.quasis[0].value.cooked
+			}
+			return source.slice(node.start, node.end)
+		case 'ArrayExpression':
+			return node.elements.map((el: any) => el ? extractAstValue(el, source) : null)
+		case 'ObjectExpression':
+			return extractObjectValues(node, source)
+		case 'UnaryExpression':
+			if (node.operator === '-' && node.argument.type === 'NumericLiteral') {
+				return -node.argument.value
+			}
+			return source.slice(node.start, node.end)
+		default:
+			return source.slice(node.start, node.end)
+	}
+}
+
 /**
  * Resolve the file, lines, invocation index, and array info for a component.
  */

package/src/handlers/source-writer.ts

@@ -8,7 +8,7 @@ import { acquireFileLock, escapeReplacement, normalizePagePath, resolveAndValida
 export interface ColorChangePayload {
 	oldClass: string
 	newClass: string
-	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText'
+	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' | 'fontWeight' | 'fontStyle' | 'textDecoration' | 'fontSize'
 	sourcePath?: string
 	sourceLine?: number
 	sourceSnippet?: string
@@ -360,7 +360,11 @@ function replaceClassInAttribute(
 		const idx = classes.indexOf(oldClass)
 		if (idx === -1) return null
 
-		classes[idx] = newClass
+		if (newClass) {
+			classes[idx] = newClass
+		} else {
+			classes.splice(idx, 1)
+		}
 		return line.replace(classAttrPattern, `${prefix}${quote}${classes.join(' ')}${quote}`)
 	}
 

package/src/html-processor.ts

@@ -1,7 +1,7 @@
 import { type HTMLElement as ParsedHTMLElement, parse } from 'node-html-parser'
 import { processSeoFromHtml } from './seo-processor'
 import { enhanceManifestWithSourceSnippets } from './source-finder'
-import { extractColorClasses } from './tailwind-colors'
+import { extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
 import type { Attribute, ComponentInstance, ImageMetadata, ManifestEntry, PageSeoData, SeoOptions } from './types'
 import { generateStableId } from './utils'
 
@@ -830,9 +830,13 @@ export async function processHtml(
 			// Generate stable ID based on content and context
 			const stableId = generateStableId(tag, entryText, entrySourcePath)
 
-			// Extract color classes for buttons and other elements
+			// Extract color classes and text style classes for buttons and other elements
 			const classAttr = node.getAttribute('class')
 			const colorClasses = extractColorClasses(classAttr)
+			const textStyleClasses = extractTextStyleClasses(classAttr)
+			const allTrackedClasses = colorClasses || textStyleClasses
+				? { ...colorClasses, ...textStyleClasses }
+				: undefined
 
 			// Extract all relevant attributes for git diff tracking
 			const attributes = extractAllAttributes(node)
@@ -856,8 +860,8 @@ export async function processHtml(
 				stableId,
 				// Image metadata for image entries
 				imageMetadata: imageInfo?.metadata,
-				// Color classes for buttons/styled elements
-				colorClasses,
+				// Color and text style classes for buttons/styled elements
+				colorClasses: allTrackedClasses,
 				// All attributes with resolved values (isStatic will be updated later from source)
 				attributes,
 			}

package/src/index.ts

@@ -93,7 +93,7 @@ export default function nuaCms(options: NuaCmsOptions = {}): AstroIntegration {
 	}
 
 	return {
-		name: '@nuasite/astro-cms',
+		name: '@nuasite/cms',
 		hooks: {
 			'astro:config:setup': async ({ updateConfig, command, injectScript, logger }) => {
 				// --- CMS Marker setup ---

package/src/source-finder/cross-file-tracker.ts

@@ -158,6 +158,28 @@ async function searchDirForExpressionProp(
 					// we look for cardProps.title in the definitions
 					const spreadPropPath = `${spreadVarName}.${propName}`
 
+					// When spread is inside a .map() call, search for array element definitions
+					// e.g., packages.map(pkg => <Card {...pkg} />) -> look for packages[N].propName
+					if (spreadMatch.mapSourceArray) {
+						const mapSourceArray = spreadMatch.mapSourceArray
+						for (const def of cached.variableDefinitions) {
+							if (
+								def.name === propName
+								&& def.parentName?.startsWith(mapSourceArray + '[')
+								&& normalizeText(def.value) === normalizedSearch
+							) {
+								return {
+									file: path.relative(getProjectRoot(), fullPath),
+									line: def.line,
+									snippet: cached.lines[def.line - 1] || '',
+									type: 'variable',
+									variableName: buildDefinitionPath(def),
+									definitionLine: def.line,
+								}
+							}
+						}
+					}
+
 					for (const def of cached.variableDefinitions) {
 						const defPath = buildDefinitionPath(def)
 						if (defPath === spreadPropPath) {
@@ -671,6 +693,26 @@ async function searchDirForAttributeProp(
 				// Try spread prop usage
 				const spreadMatch = findSpreadProp(cached.ast, componentName)
 				if (spreadMatch) {
+					// When spread is inside a .map() call, search for array element definitions
+					if (spreadMatch.mapSourceArray) {
+						const mapSourceArray = spreadMatch.mapSourceArray
+						for (const def of cached.variableDefinitions) {
+							if (
+								def.name === propName
+								&& def.parentName?.startsWith(mapSourceArray + '[')
+							) {
+								return {
+									file: path.relative(getProjectRoot(), fullPath),
+									line: def.line,
+									snippet: cached.lines[def.line - 1] || '',
+									type: 'variable',
+									variableName: buildDefinitionPath(def),
+									definitionLine: def.line,
+								}
+							}
+						}
+					}
+
 					const spreadPropPath = `${spreadMatch.spreadVarName}.${propName}`
 					for (const def of cached.variableDefinitions) {
 						const defPath = buildDefinitionPath(def)

package/src/source-finder/element-finder.ts

@@ -353,7 +353,7 @@ export function findSpreadProp(
 	ast: AstroNode,
 	componentName: string,
 ): SpreadPropMatch | null {
-	function visit(node: AstroNode): SpreadPropMatch | null {
+	function visit(node: AstroNode, parentExpression: AstroNode | null): SpreadPropMatch | null {
 		// Check component nodes matching the name
 		if (node.type === 'component') {
 			const compNode = node as ComponentNode
@@ -362,20 +362,34 @@ export function findSpreadProp(
 					// Check for spread attributes: {...cardProps}
 					// In Astro AST: type='attribute', kind='spread', name=variable name
 					if (attr.type === 'attribute' && attr.kind === 'spread' && attr.name) {
-						return {
+						const match: SpreadPropMatch = {
 							componentName,
 							spreadVarName: attr.name,
 							line: attr.position?.start.line ?? compNode.position?.start.line ?? 0,
 						}
+
+						// Check if this spread is inside a .map() call by examining parent expression
+						if (parentExpression) {
+							const exprText = getTextContent(parentExpression)
+							const mapMatch = exprText.match(/(\w+(?:\.\w+)*)\.map\s*\(\s*\(?(\w+)\)?\s*=>/)
+							if (mapMatch && mapMatch[2] === attr.name) {
+								match.mapSourceArray = mapMatch[1]
+							}
+						}
+
+						return match
 					}
 				}
 			}
 		}
 
+		// Track the nearest ancestor expression node
+		const nextParentExpression = node.type === 'expression' ? node : parentExpression
+
 		// Recursively visit children
 		if ('children' in node && Array.isArray(node.children)) {
 			for (const child of node.children) {
-				const result = visit(child)
+				const result = visit(child, nextParentExpression)
 				if (result) return result
 			}
 		}
@@ -383,5 +397,5 @@ export function findSpreadProp(
 		return null
 	}
 
-	return visit(ast)
+	return visit(ast, null)
 }

package/src/source-finder/snippet-utils.ts

@@ -618,6 +618,7 @@ export async function enhanceManifestWithSourceSnippets(
 								sourceLine: matchingDef.line,
 								sourceSnippet: defSnippet,
 								variableName: buildDefinitionPath(matchingDef),
+								allowStyling: false,
 								attributes,
 								colorClasses,
 								sourceHash,
@@ -666,6 +667,7 @@ export async function enhanceManifestWithSourceSnippets(
 										sourceLine: result.line,
 										sourceSnippet: propSnippet,
 										variableName: result.variableName,
+										allowStyling: false,
 										attributes,
 										colorClasses,
 										sourceHash: propSourceHash,
@@ -691,6 +693,7 @@ export async function enhanceManifestWithSourceSnippets(
 										sourceLine: result.line,
 										sourceSnippet: parentSnippet,
 										variableName: result.variableName,
+										allowStyling: false,
 										attributes,
 										colorClasses,
 										sourceHash: propSourceHash,

package/src/source-finder/types.ts

@@ -184,6 +184,9 @@ export interface SpreadPropMatch {
 	/** The variable name being spread (e.g., 'cardProps' from {...cardProps}) */
 	spreadVarName: string
 	line: number
+	/** Source array name when spread is inside a .map() call
+	 *  e.g., 'packages' from packages.map((pkg) => <Card {...pkg} />) */
+	mapSourceArray?: string
 }
 
 export interface ImageMatch {