@nuasite/cms 0.1.0

package/src/editor/hooks/useElementDetection.ts

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { CSS, LAYOUT, TIMING } from '../constants'
+import { getCmsElementAtPosition, getComponentAtPosition, isNearElementEdge } from '../dom'
+import { getComponentInstance } from '../manifest'
+import * as signals from '../signals'
+import { isEventOnCmsUI, usePositionTracking } from './utils'
+
+export interface OutlineState {
+	visible: boolean
+	rect: DOMRect | null
+	isComponent: boolean
+	componentName: string | undefined
+	tagName: string | undefined
+	element: HTMLElement | null
+	/** CMS ID of the detected element */
+	cmsId: string | null
+}
+
+const INITIAL_STATE: OutlineState = {
+	visible: false,
+	rect: null,
+	isComponent: false,
+	componentName: undefined,
+	tagName: undefined,
+	element: null,
+	cmsId: null,
+}
+
+/**
+ * Hook for detecting and tracking hovered CMS elements.
+ * Uses signals directly for state management.
+ */
+export function useElementDetection(): OutlineState {
+	const [outlineState, setOutlineState] = useState<OutlineState>(INITIAL_STATE)
+
+	// Throttle ref for element detection
+	const lastDetectionTime = useRef<number>(0)
+	// Timeout for delayed hide (allows reaching color swatches)
+	const hideTimeoutRef = useRef<number | null>(null)
+
+	// Handle position updates on scroll/resize
+	const handlePositionChange = useCallback((rect: DOMRect | null) => {
+		if (rect) {
+			setOutlineState(prev => ({ ...prev, rect }))
+		} else {
+			setOutlineState(INITIAL_STATE)
+		}
+	}, [])
+
+	// Track element position on scroll/resize
+	usePositionTracking(
+		outlineState.element,
+		handlePositionChange,
+		outlineState.visible,
+	)
+
+	// Setup hover highlight for both elements and components
+	useEffect(() => {
+		const handleMouseMove = (ev: MouseEvent) => {
+			const isEditing = signals.isEditing.value
+			const chatOpen = signals.isChatOpen.value
+
+			if (!isEditing && !chatOpen) {
+				if (hideTimeoutRef.current) {
+					clearTimeout(hideTimeoutRef.current)
+					hideTimeoutRef.current = null
+				}
+				setOutlineState(prev => prev.visible ? INITIAL_STATE : prev)
+				return
+			}
+
+			// Check if hovering over CMS UI, swatches, or attribute button - keep current state
+			if (isEventOnCmsUI(ev) || signals.isHoveringOutlineUI.value) {
+				// Cancel any pending hide since we're on UI elements
+				if (hideTimeoutRef.current) {
+					clearTimeout(hideTimeoutRef.current)
+					hideTimeoutRef.current = null
+				}
+				return
+			}
+
+			// Throttle detection for performance
+			const now = Date.now()
+			if (now - lastDetectionTime.current < TIMING.ELEMENT_DETECTION_THROTTLE_MS) {
+				return
+			}
+			lastDetectionTime.current = now
+
+			const manifest = signals.manifest.value
+			const entries = manifest.entries
+
+			// When chat is open, only detect components (not text/image elements)
+			if (chatOpen) {
+				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
+				if (componentEl) {
+					if (hideTimeoutRef.current) {
+						clearTimeout(hideTimeoutRef.current)
+						hideTimeoutRef.current = null
+					}
+					const rect = componentEl.getBoundingClientRect()
+					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+					const instance = componentId ? getComponentInstance(manifest, componentId) : null
+
+					setOutlineState({
+						visible: true,
+						rect,
+						isComponent: true,
+						componentName: instance?.componentName,
+						tagName: componentEl.tagName.toLowerCase(),
+						element: componentEl,
+						cmsId: null,
+					})
+					return
+				}
+
+				setOutlineState(INITIAL_STATE)
+				return
+			}
+
+			// Use the improved elementsFromPoint-based detection
+			const cmsEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
+
+			if (cmsEl && !cmsEl.hasAttribute(CSS.COMPONENT_ID_ATTRIBUTE)) {
+				// Found a text-editable element - cancel any pending hide
+				if (hideTimeoutRef.current) {
+					clearTimeout(hideTimeoutRef.current)
+					hideTimeoutRef.current = null
+				}
+				const rect = cmsEl.getBoundingClientRect()
+				const cmsId = cmsEl.getAttribute(CSS.ID_ATTRIBUTE)
+				setOutlineState({
+					visible: true,
+					rect,
+					isComponent: false,
+					componentName: undefined,
+					tagName: undefined,
+					element: cmsEl,
+					cmsId,
+				})
+				return
+			}
+
+			// Check for component at position
+			const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
+			if (componentEl) {
+				const rect = componentEl.getBoundingClientRect()
+				const nearEdge = isNearElementEdge(
+					ev.clientX,
+					ev.clientY,
+					rect,
+					LAYOUT.COMPONENT_EDGE_THRESHOLD,
+				)
+
+				if (ev.altKey || nearEdge) {
+					// Cancel any pending hide
+					if (hideTimeoutRef.current) {
+						clearTimeout(hideTimeoutRef.current)
+						hideTimeoutRef.current = null
+					}
+					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+					const instance = componentId ? getComponentInstance(manifest, componentId) : null
+
+					setOutlineState({
+						visible: true,
+						rect,
+						isComponent: true,
+						componentName: instance?.componentName,
+						tagName: componentEl.tagName.toLowerCase(),
+						element: componentEl,
+						cmsId: null,
+					})
+					return
+				}
+			}
+
+			// Check if current outline has color swatches or attribute button - if so, delay hide
+			setOutlineState(prev => {
+				if (prev.visible && prev.cmsId) {
+					const entry = manifest.entries[prev.cmsId]
+					const hasColorClasses = entry?.colorClasses?.bg?.value || entry?.colorClasses?.text?.value
+					const hasEditableAttributes = entry?.attributes && Object.keys(entry.attributes).length > 0
+
+					if ((hasColorClasses || hasEditableAttributes) && !hideTimeoutRef.current) {
+						// Schedule delayed hide to allow reaching swatches/attribute button
+						hideTimeoutRef.current = window.setTimeout(() => {
+							hideTimeoutRef.current = null
+							// Only hide if still not hovering over any outline UI
+							if (!signals.isHoveringOutlineUI.value) {
+								setOutlineState(INITIAL_STATE)
+							}
+						}, 400) // Delay to allow reaching buttons below element
+						return prev // Keep visible for now
+					}
+				}
+				return INITIAL_STATE
+			})
+		}
+
+		document.addEventListener('mousemove', handleMouseMove, true)
+		return () => {
+			document.removeEventListener('mousemove', handleMouseMove, true)
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current)
+			}
+		}
+	}, [])
+
+	return outlineState
+}
+
+export interface ComponentClickHandlerOptions {
+	onComponentSelect: (componentId: string, rect: DOMRect) => void
+}
+
+/**
+ * Hook for handling component click selection.
+ * Uses signals directly for state management.
+ */
+export function useComponentClickHandler({
+	onComponentSelect,
+}: ComponentClickHandlerOptions): void {
+	useEffect(() => {
+		const handleClick = (ev: MouseEvent) => {
+			const isEditing = signals.isEditing.value
+			const chatOpen = signals.isChatOpen.value
+			if (!isEditing && !chatOpen) return
+
+			// Ignore clicks on CMS UI elements
+			if (isEventOnCmsUI(ev)) return
+
+			const manifest = signals.manifest.value
+			const entries = manifest.entries
+
+			if (chatOpen) {
+				// When chat is open, only select components
+				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
+				if (componentEl) {
+					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+					if (componentId) {
+						ev.preventDefault()
+						ev.stopPropagation()
+						signals.setChatContextElement(componentId)
+					}
+				}
+				return
+			}
+
+			// Normal editing mode behavior
+			// Check for text element first
+			const textEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
+			if (textEl && !textEl.hasAttribute(CSS.COMPONENT_ID_ATTRIBUTE)) {
+				// Let the text element handle this click
+				return
+			}
+
+			// Check for component click
+			const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
+			if (componentEl) {
+				const rect = componentEl.getBoundingClientRect()
+				const nearEdge = isNearElementEdge(
+					ev.clientX,
+					ev.clientY,
+					rect,
+					LAYOUT.COMPONENT_EDGE_THRESHOLD,
+				)
+
+				if (ev.altKey || nearEdge) {
+					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+					if (componentId) {
+						ev.preventDefault()
+						ev.stopPropagation()
+						onComponentSelect(componentId, rect)
+					}
+				}
+			}
+		}
+
+		document.addEventListener('click', handleClick, true)
+		return () => document.removeEventListener('click', handleClick, true)
+	}, [onComponentSelect])
+}
+
+// Re-export utilities for backwards compatibility
+export { isEventOnCmsUI }

package/src/editor/hooks/useImageHoverDetection.ts

@@ -0,0 +1,102 @@
+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 ImageHoverState {
+	visible: boolean
+	rect: DOMRect | null
+	element: HTMLImageElement | null
+	cmsId: string | null
+}
+
+const INITIAL_STATE: ImageHoverState = {
+	visible: false,
+	rect: null,
+	element: null,
+	cmsId: null,
+}
+
+/**
+ * Hook for detecting and tracking hovered CMS image elements.
+ * Shows a visual overlay when hovering over images marked with data-cms-img.
+ */
+export function useImageHoverDetection(): ImageHoverState {
+	const [imageHoverState, setImageHoverState] = useState<ImageHoverState>(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) {
+			setImageHoverState(prev => ({ ...prev, rect }))
+		} else {
+			setImageHoverState(INITIAL_STATE)
+		}
+	}, [])
+
+	// Track element position on scroll/resize
+	usePositionTracking(
+		imageHoverState.element,
+		handlePositionChange,
+		imageHoverState.visible,
+	)
+
+	// Setup hover detection for image elements
+	useEffect(() => {
+		const handleMouseMove = (ev: MouseEvent) => {
+			const isEditing = signals.isEditing.value
+
+			if (!isEditing) {
+				setImageHoverState(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 image element with data-cms-img attribute
+			const elements = document.elementsFromPoint(ev.clientX, ev.clientY)
+
+			for (const el of elements) {
+				// If there's a contentEditable element above the image, don't show overlay
+				// This allows text editing on elements positioned over images
+				if (el instanceof HTMLElement && el.contentEditable === 'true') {
+					setImageHoverState(INITIAL_STATE)
+					return
+				}
+
+				if (el instanceof HTMLImageElement && el.hasAttribute('data-cms-img')) {
+					const cmsId = el.getAttribute(CSS.ID_ATTRIBUTE)
+					const rect = el.getBoundingClientRect()
+
+					setImageHoverState({
+						visible: true,
+						rect,
+						element: el,
+						cmsId,
+					})
+					return
+				}
+			}
+
+			// No image found, hide overlay
+			setImageHoverState(INITIAL_STATE)
+		}
+
+		document.addEventListener('mousemove', handleMouseMove, true)
+		return () => document.removeEventListener('mousemove', handleMouseMove, true)
+	}, [])
+
+	return imageHoverState
+}

package/src/editor/hooks/useTextSelection.ts

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { CSS, TIMING } from '../constants'
+import * as signals from '../signals'
+import { getTextSelection, type TextSelection } from '../text-styling'
+import { isElementInCmsUI, usePositionTracking } from './utils'
+
+export interface TextSelectionState {
+	hasSelection: boolean
+	selection: TextSelection | null
+	rect: DOMRect | null
+	element: HTMLElement | null
+}
+
+const INITIAL_STATE: TextSelectionState = {
+	hasSelection: false,
+	selection: null,
+	rect: null,
+	element: null,
+}
+
+/**
+ * Hook for managing text selection state within CMS elements.
+ * Tracks when the user has selected text and provides the selection details
+ * for the text styling toolbar.
+ */
+export function useTextSelection(): TextSelectionState {
+	const [state, setState] = useState<TextSelectionState>(INITIAL_STATE)
+
+	// Track the last active element to detect if user clicked on CMS UI
+	const lastActiveElementRef = useRef<Element | null>(null)
+
+	// Update rect on scroll - using a simpler approach since selection rect
+	// needs to be recalculated from the Selection API, not tracked element
+	useEffect(() => {
+		if (!state.hasSelection) return
+
+		const updateRect = () => {
+			const selection = window.getSelection()
+			if (selection && selection.rangeCount > 0) {
+				const range = selection.getRangeAt(0)
+				const rect = range.getBoundingClientRect()
+				setState(prev => ({ ...prev, rect }))
+			}
+		}
+
+		window.addEventListener('scroll', updateRect, true)
+		window.addEventListener('resize', updateRect)
+
+		return () => {
+			window.removeEventListener('scroll', updateRect, true)
+			window.removeEventListener('resize', updateRect)
+		}
+	}, [state.hasSelection])
+
+	useEffect(() => {
+		const processSelection = () => {
+			const isEditing = signals.isEditing.value
+			if (!isEditing) {
+				setState(INITIAL_STATE)
+				return
+			}
+
+			const selection = window.getSelection()
+			if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+				// Check if focus is on CMS UI element - if so, preserve the selection state
+				// This allows clicking toolbar buttons without losing selection
+				const activeElement = document.activeElement
+				if (activeElement && isElementInCmsUI(activeElement as HTMLElement)) {
+					return
+				}
+				setState(INITIAL_STATE)
+				return
+			}
+
+			const range = selection.getRangeAt(0)
+			const container = range.commonAncestorContainer
+
+			// Find the CMS element that contains the selection
+			let element: HTMLElement | null = container.nodeType === Node.TEXT_NODE
+				? container.parentElement
+				: container as HTMLElement
+
+			let cmsElement: HTMLElement | null = null
+			while (element && element !== document.body) {
+				if (element.hasAttribute(CSS.ID_ATTRIBUTE) && element.contentEditable === 'true') {
+					cmsElement = element
+					break
+				}
+				element = element.parentElement
+			}
+
+			if (!cmsElement) {
+				setState(INITIAL_STATE)
+				return
+			}
+
+			const textSelection = getTextSelection(cmsElement)
+			if (!textSelection) {
+				setState(INITIAL_STATE)
+				return
+			}
+
+			// Get the bounding rect of the selection
+			const rect = range.getBoundingClientRect()
+
+			setState({
+				hasSelection: true,
+				selection: textSelection,
+				rect,
+				element: cmsElement,
+			})
+		}
+
+		// Debounce selection change handling
+		let timeoutId: number | null = null
+		const debouncedHandler = () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId)
+			}
+			timeoutId = window.setTimeout(processSelection, TIMING.BLUR_DELAY_MS)
+		}
+
+		// Handle mousedown to track where user clicked
+		const handleMouseDown = (e: MouseEvent) => {
+			lastActiveElementRef.current = e.target as Element
+		}
+
+		// Handle mouseup for immediate feedback after selection
+		const handleMouseUp = (e: MouseEvent) => {
+			const target = e.target as HTMLElement
+
+			// Don't process if clicking on CMS UI - let the selection persist
+			if (isElementInCmsUI(target)) {
+				return
+			}
+
+			// Process selection after a brief delay for the browser to update selection
+			window.setTimeout(processSelection, TIMING.BLUR_DELAY_MS)
+		}
+
+		document.addEventListener('selectionchange', debouncedHandler)
+		document.addEventListener('mousedown', handleMouseDown, true)
+		document.addEventListener('mouseup', handleMouseUp)
+
+		return () => {
+			document.removeEventListener('selectionchange', debouncedHandler)
+			document.removeEventListener('mousedown', handleMouseDown, true)
+			document.removeEventListener('mouseup', handleMouseUp)
+			if (timeoutId) {
+				clearTimeout(timeoutId)
+			}
+		}
+	}, [])
+
+	return state
+}
+
+/**
+ * Clear the current text selection
+ */
+export function clearTextSelection(): void {
+	const selection = window.getSelection()
+	if (selection) {
+		selection.removeAllRanges()
+	}
+}
+
+/**
+ * Save and restore selection - useful when applying styles
+ */
+export function saveSelection(): Range | null {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		return selection.getRangeAt(0).cloneRange()
+	}
+	return null
+}
+
+export function restoreSelection(range: Range | null): void {
+	if (!range) return
+
+	const selection = window.getSelection()
+	if (selection) {
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+}

package/src/editor/hooks/useTooltipState.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { CSS } from '../constants'
+import * as signals from '../signals'
+
+export interface TooltipState {
+	elementId: string | null
+	rect: DOMRect | null
+	element: HTMLElement | null
+}
+
+export interface UseTooltipStateOptions {
+	/** @deprecated No longer needed - signals are used directly */
+	isEditing?: boolean
+}
+
+/**
+ * Hook for managing tooltip visibility and positioning.
+ * Uses signals directly for state management.
+ */
+export function useTooltipState(_options?: UseTooltipStateOptions) {
+	const [tooltipState, setTooltipState] = useState<TooltipState>({
+		elementId: null,
+		rect: null,
+		element: null,
+	})
+
+	/**
+	 * Show tooltip for the current editing element
+	 */
+	const showTooltipForElement = useCallback(() => {
+		const currentEditingId = signals.currentEditingId.value
+		const isProcessing = signals.isAIProcessing.value
+
+		if (!currentEditingId || isProcessing) {
+			setTooltipState({ elementId: null, rect: null, element: null })
+			return
+		}
+
+		const change = signals.getPendingChange(currentEditingId)
+		if (!change) {
+			setTooltipState({ elementId: null, rect: null, element: null })
+			return
+		}
+
+		setTooltipState({
+			elementId: currentEditingId,
+			rect: change.element.getBoundingClientRect(),
+			element: change.element,
+		})
+	}, [])
+
+	/**
+	 * Hide the tooltip
+	 */
+	const hideTooltip = useCallback(() => {
+		setTooltipState({ elementId: null, rect: null, element: null })
+	}, [])
+
+	// Update tooltip position on scroll
+	useEffect(() => {
+		if (!tooltipState.elementId || !tooltipState.element) return
+
+		const updateTooltipPosition = () => {
+			if (tooltipState.element && document.contains(tooltipState.element)) {
+				setTooltipState(prev => ({
+					...prev,
+					rect: tooltipState.element!.getBoundingClientRect(),
+				}))
+			} else {
+				// Element no longer in DOM
+				setTooltipState({ elementId: null, rect: null, element: null })
+			}
+		}
+
+		// Hide tooltip when clicking outside the element and CMS UI
+		const handleClickOutside = (e: MouseEvent) => {
+			const path = e.composedPath()
+			const target = path[0] as HTMLElement
+
+			// Check if click is on the tooltip element itself
+			if (tooltipState.element?.contains(target) || tooltipState.element === target) {
+				return
+			}
+
+			// Check if any element in the path is inside CMS UI
+			const cmsOverlay = document.querySelector(CSS.HIGHLIGHT_ELEMENT)
+			for (const el of path) {
+				if (el === cmsOverlay) {
+					return // Click was inside Shadow DOM
+				}
+				if (el instanceof HTMLElement) {
+					if (el.tagName?.startsWith('CMS-')) {
+						return
+					}
+					if (el.hasAttribute?.(CSS.UI_ATTRIBUTE)) {
+						return
+					}
+				}
+			}
+
+			// Check if click is on another CMS-editable element
+			if (target.hasAttribute?.(CSS.ID_ATTRIBUTE)) {
+				return // Will be handled by element focus
+			}
+
+			// Click was outside, hide tooltip
+			setTooltipState({ elementId: null, rect: null, element: null })
+		}
+
+		window.addEventListener('scroll', updateTooltipPosition, true)
+		window.addEventListener('resize', updateTooltipPosition)
+		document.addEventListener('mousedown', handleClickOutside, true)
+
+		return () => {
+			window.removeEventListener('scroll', updateTooltipPosition, true)
+			window.removeEventListener('resize', updateTooltipPosition)
+			document.removeEventListener('mousedown', handleClickOutside, true)
+		}
+	}, [tooltipState.elementId, tooltipState.element])
+
+	return {
+		tooltipState,
+		showTooltipForElement,
+		hideTooltip,
+	}
+}