@nuasite/cms 0.7.2 → 0.8.0

package/src/editor/editor.ts

@@ -20,11 +20,13 @@ import * as signals from './signals'
 import {
 	clearAllEditsFromStorage,
 	loadAttributeEditsFromStorage,
+	loadBgImageEditsFromStorage,
 	loadColorEditsFromStorage,
 	loadEditsFromStorage,
 	loadImageEditsFromStorage,
 	loadPendingEntryNavigation,
 	saveAttributeEditsToStorage,
+	saveBgImageEditsToStorage,
 	saveColorEditsToStorage,
 	saveEditingState,
 	saveEditsToStorage,
@@ -37,6 +39,8 @@ import type { AttributeChangePayload, ChangePayload, CmsConfig, DeploymentStatus
 const MARKDOWN_ATTRIBUTE = 'data-cms-markdown'
 // CSS attribute for image elements
 const IMAGE_ATTRIBUTE = 'data-cms-img'
+// CSS attribute for background image elements
+const BG_IMAGE_ATTRIBUTE = 'data-cms-bg-img'
 
 /**
  * Inline HTML elements that indicate styled/formatted content.
@@ -112,6 +116,7 @@ export async function startEditMode(
 	const savedImageEdits = loadImageEditsFromStorage()
 	const savedColorEdits = loadColorEditsFromStorage()
 	const savedAttributeEdits = loadAttributeEditsFromStorage()
+	const savedBgImageEdits = loadBgImageEditsFromStorage()
 	const currentManifest = signals.manifest.value
 
 	getAllCmsElements().forEach(el => {
@@ -151,6 +156,15 @@ export async function startEditMode(
 			return
 		}
 
+		// Check if this is a background image element
+		// Background image elements are edited via the bg image overlay panel
+		if (el.hasAttribute(BG_IMAGE_ATTRIBUTE)) {
+			logDebug(config.debug, 'Background image element detected:', cmsId)
+			makeElementNonEditable(el)
+			setupBgImageTracking(config, el, cmsId, savedBgImageEdits[cmsId])
+			return
+		}
+
 		makeElementEditable(el)
 
 		// Suppress browser native contentEditable undo/redo (we handle it ourselves)
@@ -502,10 +516,43 @@ export function discardAllChanges(onStateChange?: () => void): void {
 		applyAttributesToElement(element, originalAttributes)
 	})
 
+	// Restore original background image classes
+	signals.pendingBgImageChanges.value.forEach((change) => {
+		const {
+			element,
+			originalBgImageClass,
+			newBgImageClass,
+			originalBgSize,
+			newBgSize,
+			originalBgPosition,
+			newBgPosition,
+			originalBgRepeat,
+			newBgRepeat,
+		} = change
+		const classes = element.className.split(/\s+/).filter(Boolean)
+		const newClassValues = new Set([newBgImageClass, newBgSize, newBgPosition, newBgRepeat].filter(Boolean))
+		const originalClassValues = [originalBgImageClass, originalBgSize, originalBgPosition, originalBgRepeat].filter(Boolean)
+
+		const filtered = classes.filter(c => !newClassValues.has(c))
+		for (const c of originalClassValues) {
+			if (!filtered.includes(c)) {
+				filtered.push(c)
+			}
+		}
+		element.className = filtered.join(' ')
+
+		// Clear inline bg style overrides
+		element.style.backgroundImage = ''
+		element.style.backgroundSize = ''
+		element.style.backgroundPosition = ''
+		element.style.backgroundRepeat = ''
+	})
+
 	cleanupHighlightSystem()
 	signals.clearPendingChanges()
 	signals.clearPendingImageChanges()
 	signals.clearPendingColorChanges()
+	signals.clearPendingBgImageChanges()
 	signals.clearPendingAttributeChanges()
 	clearAllEditsFromStorage()
 	clearHistory()
@@ -550,12 +597,13 @@ export async function saveAllChanges(
 	const dirtyChanges = signals.dirtyChanges.value
 	const dirtyImageChanges = signals.dirtyImageChanges.value
 	const dirtyColorChanges = signals.dirtyColorChanges.value
+	const dirtyBgImageChanges = signals.dirtyBgImageChanges.value
 	const dirtyAttributeChanges = signals.dirtyAttributeChanges.value
 	const dirtySeoChanges = signals.dirtySeoChanges.value
 
 	if (
-		dirtyChanges.length === 0 && dirtyImageChanges.length === 0 && dirtyColorChanges.length === 0 && dirtyAttributeChanges.length === 0
-		&& dirtySeoChanges.length === 0
+		dirtyChanges.length === 0 && dirtyImageChanges.length === 0 && dirtyColorChanges.length === 0 && dirtyBgImageChanges.length === 0
+		&& dirtyAttributeChanges.length === 0 && dirtySeoChanges.length === 0
 	) {
 		return { success: true, updated: 0 }
 	}
@@ -666,6 +714,44 @@ export async function saveAllChanges(
 			}
 		})
 
+		// Add background image changes to the payload
+		dirtyBgImageChanges.forEach(([cmsId, change]) => {
+			const entry = manifest.entries[cmsId]
+			const bgChanges: Array<{ oldClass: string; newClass: string; type: 'bgImage' | 'bgSize' | 'bgPosition' | 'bgRepeat' }> = []
+
+			if (change.newBgImageClass !== change.originalBgImageClass) {
+				bgChanges.push({ oldClass: change.originalBgImageClass, newClass: change.newBgImageClass, type: 'bgImage' })
+			}
+			if (change.newBgSize !== change.originalBgSize) {
+				bgChanges.push({ oldClass: change.originalBgSize, newClass: change.newBgSize, type: 'bgSize' })
+			}
+			if (change.newBgPosition !== change.originalBgPosition) {
+				bgChanges.push({ oldClass: change.originalBgPosition, newClass: change.newBgPosition, type: 'bgPosition' })
+			}
+			if (change.newBgRepeat !== change.originalBgRepeat) {
+				bgChanges.push({ oldClass: change.originalBgRepeat, newClass: change.newBgRepeat, type: 'bgRepeat' })
+			}
+
+			for (const bgChange of bgChanges) {
+				changes.push({
+					cmsId,
+					newValue: '',
+					originalValue: '',
+					sourcePath: entry?.sourcePath ?? '',
+					sourceLine: entry?.sourceLine ?? 0,
+					sourceSnippet: entry?.sourceSnippet ?? '',
+					colorChange: {
+						oldClass: bgChange.oldClass,
+						newClass: bgChange.newClass,
+						type: bgChange.type,
+						sourcePath: entry?.sourcePath,
+						sourceLine: entry?.sourceLine,
+						sourceSnippet: entry?.sourceSnippet,
+					},
+				})
+			}
+		})
+
 		// Add attribute changes to the payload
 		dirtyAttributeChanges.forEach(([cmsId, change]) => {
 			const { originalAttributes, newAttributes } = change
@@ -740,6 +826,18 @@ export async function saveAllChanges(
 				}))
 			})
 
+			// Update all dirty bg image changes to mark as saved
+			dirtyBgImageChanges.forEach(([cmsId, change]) => {
+				signals.updatePendingBgImageChange(cmsId, (c) => ({
+					...c,
+					originalBgImageClass: c.newBgImageClass,
+					originalBgSize: c.newBgSize,
+					originalBgPosition: c.newBgPosition,
+					originalBgRepeat: c.newBgRepeat,
+					isDirty: false,
+				}))
+			})
+
 			// Update all dirty attribute changes to mark as saved
 			dirtyAttributeChanges.forEach(([cmsId, change]) => {
 				signals.updatePendingAttributeChange(cmsId, (c) => ({
@@ -786,6 +884,7 @@ export async function saveAllChanges(
 		saveEditsToStorage(signals.pendingChanges.value)
 		saveImageEditsToStorage(signals.pendingImageChanges.value)
 		saveColorEditsToStorage(signals.pendingColorChanges.value)
+		saveBgImageEditsToStorage(signals.pendingBgImageChanges.value)
 		saveAttributeEditsToStorage(signals.pendingAttributeChanges.value)
 		throw err
 	} finally {
@@ -1026,6 +1125,75 @@ function setupColorTracking(
 	}
 }
 
+/**
+ * Initialize background image change tracking for elements with bg-[url()] classes.
+ * Background image editing is triggered via the bg image overlay panel.
+ */
+function setupBgImageTracking(
+	config: CmsConfig,
+	el: HTMLElement,
+	cmsId: string,
+	savedEdit: import('./types').SavedBackgroundImageEdit | undefined,
+): void {
+	const manifest = signals.manifest.value
+	const entry = manifest.entries[cmsId]
+
+	if (!entry?.backgroundImage) {
+		return
+	}
+
+	logDebug(config.debug, 'Setting up bg image tracking for:', cmsId, entry.backgroundImage)
+
+	if (!signals.pendingBgImageChanges.value.has(cmsId)) {
+		if (savedEdit) {
+			// Restore saved bg image classes on the element
+			const classes = el.className.split(/\s+/).filter(Boolean)
+			const originals = [savedEdit.originalBgImageClass, savedEdit.originalBgSize, savedEdit.originalBgPosition, savedEdit.originalBgRepeat].filter(
+				Boolean,
+			)
+			const news = [savedEdit.newBgImageClass, savedEdit.newBgSize, savedEdit.newBgPosition, savedEdit.newBgRepeat].filter(Boolean)
+
+			const filtered = classes.filter(c => !originals.includes(c))
+			for (const c of news) {
+				if (!filtered.includes(c)) {
+					filtered.push(c)
+				}
+			}
+			el.className = filtered.join(' ')
+
+			signals.setPendingBgImageChange(cmsId, {
+				element: el,
+				cmsId,
+				originalBgImageClass: savedEdit.originalBgImageClass,
+				newBgImageClass: savedEdit.newBgImageClass,
+				originalBgSize: savedEdit.originalBgSize,
+				newBgSize: savedEdit.newBgSize,
+				originalBgPosition: savedEdit.originalBgPosition,
+				newBgPosition: savedEdit.newBgPosition,
+				originalBgRepeat: savedEdit.originalBgRepeat,
+				newBgRepeat: savedEdit.newBgRepeat,
+				isDirty: true,
+			})
+			logDebug(config.debug, 'Restored saved bg image edit:', cmsId, savedEdit)
+		} else {
+			const bg = entry.backgroundImage
+			signals.setPendingBgImageChange(cmsId, {
+				element: el,
+				cmsId,
+				originalBgImageClass: bg.bgImageClass,
+				newBgImageClass: bg.bgImageClass,
+				originalBgSize: bg.bgSize ?? '',
+				newBgSize: bg.bgSize ?? '',
+				originalBgPosition: bg.bgPosition ?? '',
+				newBgPosition: bg.bgPosition ?? '',
+				originalBgRepeat: bg.bgRepeat ?? '',
+				newBgRepeat: bg.bgRepeat ?? '',
+				isDirty: false,
+			})
+		}
+	}
+}
+
 /**
  * Handle color change from the color toolbar.
  * Called when user selects a new color.

package/src/editor/hooks/index.ts

@@ -17,3 +17,6 @@ export type { TextSelectionState } from './useTextSelection'
 
 export { useImageHoverDetection } from './useImageHoverDetection'
 export type { ImageHoverState } from './useImageHoverDetection'
+
+export { useBgImageHoverDetection } from './useBgImageHoverDetection'
+export type { BgImageHoverState } from './useBgImageHoverDetection'

package/src/editor/hooks/useBgImageHoverDetection.ts

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { CSS, TIMING } from '../constants'
+import * as signals from '../signals'
+import { isEventOnCmsUI, usePositionTracking } from './utils'
+
+export interface BgImageHoverState {
+	visible: boolean
+	rect: DOMRect | null
+	element: HTMLElement | null
+	cmsId: string | null
+}
+
+const INITIAL_STATE: BgImageHoverState = {
+	visible: false,
+	rect: null,
+	element: null,
+	cmsId: null,
+}
+
+/**
+ * Hook for detecting and tracking hovered CMS background image elements.
+ * Shows a visual overlay when hovering over elements marked with data-cms-bg-img.
+ */
+export function useBgImageHoverDetection(): BgImageHoverState {
+	const [bgImageHoverState, setBgImageHoverState] = useState<BgImageHoverState>(INITIAL_STATE)
+
+	// Throttle ref for element detection
+	const lastDetectionTime = useRef<number>(0)
+
+	// Handle position updates on scroll/resize
+	const handlePositionChange = useCallback((rect: DOMRect | null) => {
+		if (rect) {
+			setBgImageHoverState(prev => ({ ...prev, rect }))
+		} else {
+			setBgImageHoverState(INITIAL_STATE)
+		}
+	}, [])
+
+	// Track element position on scroll/resize
+	usePositionTracking(
+		bgImageHoverState.element,
+		handlePositionChange,
+		bgImageHoverState.visible,
+	)
+
+	// Setup hover detection for background image elements
+	useEffect(() => {
+		const handleMouseMove = (ev: MouseEvent) => {
+			const isEditing = signals.isEditing.value
+
+			if (!isEditing) {
+				setBgImageHoverState(prev => prev.visible ? INITIAL_STATE : prev)
+				return
+			}
+
+			// Check if hovering over CMS UI - keep current state
+			if (isEventOnCmsUI(ev)) {
+				return
+			}
+
+			// Throttle detection for performance
+			const now = Date.now()
+			if (now - lastDetectionTime.current < TIMING.ELEMENT_DETECTION_THROTTLE_MS) {
+				return
+			}
+			lastDetectionTime.current = now
+
+			// Check if hovering over an element with data-cms-bg-img attribute
+			const elements = document.elementsFromPoint(ev.clientX, ev.clientY)
+
+			for (const el of elements) {
+				// If there's a contentEditable element above, don't show overlay
+				if (el instanceof HTMLElement && el.contentEditable === 'true') {
+					setBgImageHoverState(INITIAL_STATE)
+					return
+				}
+
+				if (el instanceof HTMLElement && el.hasAttribute(CSS.BG_IMAGE_ATTRIBUTE)) {
+					const cmsId = el.getAttribute(CSS.ID_ATTRIBUTE)
+					const rect = el.getBoundingClientRect()
+
+					setBgImageHoverState({
+						visible: true,
+						rect,
+						element: el,
+						cmsId,
+					})
+					return
+				}
+			}
+
+			// No bg image element found, hide overlay
+			setBgImageHoverState(INITIAL_STATE)
+		}
+
+		document.addEventListener('mousemove', handleMouseMove, true)
+		return () => document.removeEventListener('mousemove', handleMouseMove, true)
+	}, [])
+
+	return bgImageHoverState
+}

package/src/editor/index.tsx

@@ -4,6 +4,7 @@ import { fetchManifest } from './api'
 import { AIChat } from './components/ai-chat'
 import { AITooltip } from './components/ai-tooltip'
 import { AttributeEditor } from './components/attribute-editor'
+import { BgImageOverlay } from './components/bg-image-overlay'
 import { BlockEditor } from './components/block-editor'
 import { CollectionsBrowser } from './components/collections-browser'
 import { ColorToolbar } from './components/color-toolbar'
@@ -34,6 +35,7 @@ import {
 import { performRedo, performUndo } from './history'
 import {
 	useAIHandlers,
+	useBgImageHoverDetection,
 	useBlockEditorHandlers,
 	useComponentClickHandler,
 	useElementDetection,
@@ -79,6 +81,7 @@ const CmsUI = () => {
 	const config = signals.config.value
 	const outlineState = useElementDetection()
 	const imageHoverState = useImageHoverDetection()
+	const bgImageHoverState = useBgImageHoverDetection()
 	const textSelectionState = useTextSelection()
 	const { tooltipState, showTooltipForElement, hideTooltip } = useTooltipState()
 	const updateUI = useCallback(() => {
@@ -365,6 +368,15 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
+			<ErrorBoundary componentName="BgImageOverlay">
+				<BgImageOverlay
+					visible={bgImageHoverState.visible && isEditing}
+					rect={bgImageHoverState.rect}
+					element={bgImageHoverState.element}
+					cmsId={bgImageHoverState.cmsId}
+				/>
+			</ErrorBoundary>
+
 			<ErrorBoundary componentName="Toolbar">
 				<Toolbar
 					callbacks={{

package/src/editor/signals.ts

@@ -27,6 +27,7 @@ import type {
 	MediaItem,
 	MediaLibraryState,
 	PendingAttributeChange,
+	PendingBackgroundImageChange,
 	PendingChange,
 	PendingColorChange,
 	PendingComponentInsert,
@@ -231,6 +232,9 @@ export const pendingImageChanges = signal<Map<string, PendingImageChange>>(
 export const pendingColorChanges = signal<Map<string, PendingColorChange>>(
 	new Map(),
 )
+export const pendingBgImageChanges = signal<Map<string, PendingBackgroundImageChange>>(
+	new Map(),
+)
 export const manifest = signal<CmsManifest>({
 	entries: {},
 	components: {},
@@ -252,6 +256,7 @@ const _pendingComponentChangesHelpers = createMapHelpers(pendingComponentChanges
 const _pendingInsertsHelpers = createMapHelpers(pendingInserts)
 const _pendingImageChangesHelpers = createMapHelpers(pendingImageChanges)
 const _pendingColorChangesHelpers = createMapHelpers(pendingColorChanges)
+const _pendingBgImageChangesHelpers = createMapHelpers(pendingBgImageChanges)
 
 // ============================================================================
 // AI State Signals
@@ -495,6 +500,7 @@ let toastIdCounter = 0
 const _pendingChangesDirty = createDirtyTracking(pendingChanges)
 const _pendingImageChangesDirty = createDirtyTracking(pendingImageChanges)
 const _pendingColorChangesDirty = createDirtyTracking(pendingColorChanges)
+const _pendingBgImageChangesDirty = createDirtyTracking(pendingBgImageChanges)
 const _pendingSeoChangesDirty = createDirtyTracking(pendingSeoChanges)
 const _pendingAttributeChangesDirty = createDirtyTracking(pendingAttributeChanges)
 
@@ -510,6 +516,10 @@ export const dirtyColorChangesCount = _pendingColorChangesDirty.dirtyCount
 export const dirtyColorChanges = _pendingColorChangesDirty.dirtyItems
 export const hasDirtyColorChanges = _pendingColorChangesDirty.hasDirty
 
+export const dirtyBgImageChangesCount = _pendingBgImageChangesDirty.dirtyCount
+export const dirtyBgImageChanges = _pendingBgImageChangesDirty.dirtyItems
+export const hasDirtyBgImageChanges = _pendingBgImageChangesDirty.hasDirty
+
 export const dirtySeoChangesCount = _pendingSeoChangesDirty.dirtyCount
 export const dirtySeoChanges = _pendingSeoChangesDirty.dirtyItems
 export const hasDirtySeoChanges = _pendingSeoChangesDirty.hasDirty
@@ -520,13 +530,14 @@ export const hasDirtyAttributeChanges = _pendingAttributeChangesDirty.hasDirty
 
 export const totalDirtyCount = computed(
 	() =>
-		dirtyChangesCount.value + dirtyImageChangesCount.value + dirtyColorChangesCount.value + dirtySeoChangesCount.value
+		dirtyChangesCount.value + dirtyImageChangesCount.value + dirtyColorChangesCount.value + dirtyBgImageChangesCount.value + dirtySeoChangesCount.value
 		+ dirtyAttributeChangesCount.value,
 )
 
 export const hasAnyDirtyChanges = computed(
 	() =>
-		hasDirtyChanges.value || hasDirtyImageChanges.value || hasDirtyColorChanges.value || hasDirtySeoChanges.value || hasDirtyAttributeChanges.value,
+		hasDirtyChanges.value || hasDirtyImageChanges.value || hasDirtyColorChanges.value || hasDirtyBgImageChanges.value || hasDirtySeoChanges.value
+		|| hasDirtyAttributeChanges.value,
 )
 
 // Navigation index for cycling through dirty elements
@@ -615,6 +626,13 @@ export const deletePendingColorChange = _pendingColorChangesHelpers.delete
 export const clearPendingColorChanges = _pendingColorChangesHelpers.clear
 export const getPendingColorChange = _pendingColorChangesHelpers.get
 
+// Background image changes mutations - using helpers
+export const setPendingBgImageChange = _pendingBgImageChangesHelpers.set
+export const updatePendingBgImageChange = _pendingBgImageChangesHelpers.update
+export const deletePendingBgImageChange = _pendingBgImageChangesHelpers.delete
+export const clearPendingBgImageChanges = _pendingBgImageChangesHelpers.clear
+export const getPendingBgImageChange = _pendingBgImageChangesHelpers.get
+
 // SEO changes mutations - using helpers
 export const setPendingSeoChange = _pendingSeoChangesHelpers.set
 export const updatePendingSeoChange = _pendingSeoChangesHelpers.update
@@ -1332,6 +1350,7 @@ export function resetAllState(): void {
 		pendingInserts.value = new Map()
 		pendingImageChanges.value = new Map()
 		pendingColorChanges.value = new Map()
+		pendingBgImageChanges.value = new Map()
 		pendingSeoChanges.value = new Map()
 		pendingAttributeChanges.value = new Map()
 		manifest.value = { entries: {}, components: {}, componentDefinitions: {} }

package/src/editor/storage.ts

@@ -2,10 +2,12 @@ import { STORAGE_KEYS } from './constants'
 import type {
 	CmsSettings,
 	PendingAttributeChange,
+	PendingBackgroundImageChange,
 	PendingChange,
 	PendingColorChange,
 	PendingImageChange,
 	SavedAttributeEdits,
+	SavedBackgroundImageEdits,
 	SavedColorEdits,
 	SavedEdits,
 	SavedImageEdits,
@@ -180,6 +182,53 @@ export function clearAttributeEditsFromStorage(): void {
 	}
 }
 
+// ============================================================================
+// Background Image Edits
+// ============================================================================
+
+export function saveBgImageEditsToStorage(pendingBgImageChanges: Map<string, PendingBackgroundImageChange>): void {
+	const edits: SavedBackgroundImageEdits = {}
+
+	pendingBgImageChanges.forEach((change, cmsId) => {
+		if (change.isDirty) {
+			edits[cmsId] = {
+				originalBgImageClass: change.originalBgImageClass,
+				newBgImageClass: change.newBgImageClass,
+				originalBgSize: change.originalBgSize,
+				newBgSize: change.newBgSize,
+				originalBgPosition: change.originalBgPosition,
+				newBgPosition: change.newBgPosition,
+				originalBgRepeat: change.originalBgRepeat,
+				newBgRepeat: change.newBgRepeat,
+			}
+		}
+	})
+
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS, JSON.stringify(edits))
+	} catch (e) {
+		console.warn('[CMS] Failed to save bg image edits to storage:', e)
+	}
+}
+
+export function loadBgImageEditsFromStorage(): SavedBackgroundImageEdits {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS)
+		return stored ? JSON.parse(stored) : {}
+	} catch (e) {
+		console.warn('[CMS] Failed to load bg image edits from storage:', e)
+		return {}
+	}
+}
+
+export function clearBgImageEditsFromStorage(): void {
+	try {
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear bg image edits from storage:', e)
+	}
+}
+
 // ============================================================================
 // Settings
 // ============================================================================
@@ -287,4 +336,5 @@ export function clearAllEditsFromStorage(): void {
 	clearImageEditsFromStorage()
 	clearColorEditsFromStorage()
 	clearAttributeEditsFromStorage()
+	clearBgImageEditsFromStorage()
 }

package/src/editor/types.ts

@@ -5,6 +5,7 @@ export type {
 	Attribute,
 	AvailableColors,
 	AvailableTextStyles,
+	BackgroundImageMetadata,
 	CanonicalUrl,
 	CmsManifest,
 	CollectionDefinition,
@@ -94,6 +95,28 @@ export interface PendingColorChange {
 	isDirty: boolean
 }
 
+export interface PendingBackgroundImageChange {
+	element: HTMLElement
+	cmsId: string
+	/** Original bg-[url()] class */
+	originalBgImageClass: string
+	/** Current bg-[url()] class */
+	newBgImageClass: string
+	/** Original bg-size class (or empty) */
+	originalBgSize: string
+	/** Current bg-size class */
+	newBgSize: string
+	/** Original bg-position class (or empty) */
+	originalBgPosition: string
+	/** Current bg-position class */
+	newBgPosition: string
+	/** Original bg-repeat class (or empty) */
+	originalBgRepeat: string
+	/** Current bg-repeat class */
+	newBgRepeat: string
+	isDirty: boolean
+}
+
 export interface ColorEditorState {
 	isOpen: boolean
 	targetElementId: string | null
@@ -132,6 +155,21 @@ export interface SavedColorEdits {
 	[cmsId: string]: SavedColorEdit
 }
 
+export interface SavedBackgroundImageEdit {
+	originalBgImageClass: string
+	newBgImageClass: string
+	originalBgSize: string
+	newBgSize: string
+	originalBgPosition: string
+	newBgPosition: string
+	originalBgRepeat: string
+	newBgRepeat: string
+}
+
+export interface SavedBackgroundImageEdits {
+	[cmsId: string]: SavedBackgroundImageEdit
+}
+
 /** Color change details for updating element color classes */
 export interface ColorChangePayload {
 	/** The color class to replace (e.g., 'bg-blue-500') */
@@ -139,7 +177,20 @@ export interface ColorChangePayload {
 	/** The new color class (e.g., 'bg-red-500') */
 	newClass: string
 	/** Type of color/style change */
-	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' | 'fontWeight' | 'fontStyle' | 'textDecoration' | 'fontSize'
+	type:
+		| 'bg'
+		| 'text'
+		| 'border'
+		| 'hoverBg'
+		| 'hoverText'
+		| 'fontWeight'
+		| 'fontStyle'
+		| 'textDecoration'
+		| 'fontSize'
+		| 'bgImage'
+		| 'bgSize'
+		| 'bgPosition'
+		| 'bgRepeat'
 	/** Path to the source file where the color class is defined */
 	sourcePath?: string
 	/** Line number where the color class is defined */