@nuasite/cms 0.9.3 → 0.11.0

package/src/editor/hooks/useElementDetection.ts

@@ -3,6 +3,7 @@ import { CSS, LAYOUT, TIMING } from '../constants'
 import { getCmsElementAtPosition, getComponentAtPosition, isNearElementEdge } from '../dom'
 import { getComponentInstance } from '../manifest'
 import * as signals from '../signals'
+import type { SelectedElement } from '../signals'
 import { isEventOnCmsUI, usePositionTracking } from './utils'
 
 export interface OutlineState {
@@ -26,6 +27,114 @@ const INITIAL_STATE: OutlineState = {
 	cmsId: null,
 }
 
+/**
+ * Build a component-style outline state for a given component element.
+ */
+function buildComponentOutline(componentEl: HTMLElement, manifest: any): OutlineState {
+	const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+	const instance = componentId ? getComponentInstance(manifest, componentId) : null
+	return {
+		visible: true,
+		rect: componentEl.getBoundingClientRect(),
+		isComponent: true,
+		componentName: instance?.componentName,
+		tagName: componentEl.tagName.toLowerCase(),
+		element: componentEl,
+		cmsId: null,
+	}
+}
+
+/**
+ * Check if an element is currently selected (either as component or select-mode element).
+ */
+function isElementSelected(el: HTMLElement): boolean {
+	// Check component selection
+	const componentId = el.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+	if (componentId && componentId === signals.currentComponentId.value) return true
+
+	// Check select-mode selection
+	const selectEl = signals.selectModeElement.value
+	if (selectEl && selectEl.element === el) return true
+
+	return false
+}
+
+/**
+ * Resolve a CMS element to a SelectedElement descriptor for select mode.
+ */
+function resolveSelectedElement(el: HTMLElement, manifest: any): SelectedElement | null {
+	// Component element
+	const componentId = el.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+	if (componentId) {
+		const instance = getComponentInstance(manifest, componentId)
+		return {
+			element: el,
+			id: componentId,
+			label: instance?.componentName ?? el.tagName.toLowerCase(),
+			type: 'component',
+		}
+	}
+
+	// Image element
+	if (el.hasAttribute('data-cms-img')) {
+		const cmsId = el.getAttribute(CSS.ID_ATTRIBUTE) ?? el.getAttribute('data-cms-img') ?? ''
+		return {
+			element: el,
+			id: cmsId,
+			label: el.getAttribute('alt') || 'Image',
+			type: 'image',
+		}
+	}
+
+	// Background image element
+	if (el.hasAttribute('data-cms-bg-img')) {
+		const cmsId = el.getAttribute(CSS.ID_ATTRIBUTE) ?? el.getAttribute('data-cms-bg-img') ?? ''
+		return {
+			element: el,
+			id: cmsId,
+			label: 'Background Image',
+			type: 'image',
+		}
+	}
+
+	// Text/CMS element
+	const cmsId = el.getAttribute(CSS.ID_ATTRIBUTE)
+	if (cmsId) {
+		const tagName = el.tagName.toLowerCase()
+		return {
+			element: el,
+			id: cmsId,
+			label: tagName,
+			type: 'text',
+		}
+	}
+
+	return null
+}
+
+/**
+ * Find any CMS element at position (text, image, bg-image, or component).
+ * Returns the deepest/most specific CMS element at the given point.
+ */
+function getAnyCmsElementAtPosition(x: number, y: number): HTMLElement | null {
+	const elementsAtPoint = document.elementsFromPoint(x, y)
+	for (const el of elementsAtPoint) {
+		if (!(el instanceof HTMLElement)) continue
+		// Skip CMS UI elements
+		if (el.hasAttribute(CSS.UI_ATTRIBUTE) || el.closest(`[${CSS.UI_ATTRIBUTE}]`)) continue
+		// Any element with a CMS attribute
+		if (
+			el.hasAttribute(CSS.ID_ATTRIBUTE)
+			|| el.hasAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+			|| el.hasAttribute('data-cms-img')
+			|| el.hasAttribute('data-cms-bg-img')
+		) {
+			return el
+		}
+	}
+	return null
+}
+
 /**
  * Hook for detecting and tracking hovered CMS elements.
  * Uses signals directly for state management.
@@ -54,6 +163,22 @@ export function useElementDetection(): OutlineState {
 		outlineState.visible,
 	)
 
+	// Hide hover outline immediately when a component is selected
+	const currentComponentId = signals.currentComponentId.value
+	useEffect(() => {
+		if (currentComponentId) {
+			setOutlineState(INITIAL_STATE)
+		}
+	}, [currentComponentId])
+
+	// Hide hover outline immediately when a select-mode element is selected
+	const selectModeElement = signals.selectModeElement.value
+	useEffect(() => {
+		if (selectModeElement) {
+			setOutlineState(INITIAL_STATE)
+		}
+	}, [selectModeElement])
+
 	// Setup hover highlight for both elements and components
 	useEffect(() => {
 		const handleMouseMove = (ev: MouseEvent) => {
@@ -89,10 +214,48 @@ export function useElementDetection(): OutlineState {
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
+			// ── Select mode: show component-style outline for any CMS element ──
+			if (selectMode) {
+				const cmsEl = getAnyCmsElementAtPosition(ev.clientX, ev.clientY)
+				if (cmsEl) {
+					if (isElementSelected(cmsEl)) {
+						setOutlineState(INITIAL_STATE)
+						return
+					}
+					if (hideTimeoutRef.current) {
+						clearTimeout(hideTimeoutRef.current)
+						hideTimeoutRef.current = null
+					}
+					const resolved = resolveSelectedElement(cmsEl, manifest)
+					const rect = cmsEl.getBoundingClientRect()
+					setOutlineState({
+						visible: true,
+						rect,
+						isComponent: true,
+						componentName: resolved?.label,
+						tagName: cmsEl.tagName.toLowerCase(),
+						element: cmsEl,
+						cmsId: null,
+					})
+					return
+				}
+				setOutlineState(INITIAL_STATE)
+				return
+			}
+
+			// ── Edit mode: standard detection ──
+
 			// Use the improved elementsFromPoint-based detection
 			const cmsEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
 
 			if (cmsEl && !cmsEl.hasAttribute(CSS.COMPONENT_ID_ATTRIBUTE)) {
+				// Hide hover outline if this element is inside the selected component
+				const selectedId = signals.currentComponentId.value
+				if (selectedId && cmsEl.closest(`[${CSS.COMPONENT_ID_ATTRIBUTE}="${selectedId}"]`)) {
+					setOutlineState(INITIAL_STATE)
+					return
+				}
+
 				// Found a text-editable element - cancel any pending hide
 				if (hideTimeoutRef.current) {
 					clearTimeout(hideTimeoutRef.current)
@@ -115,21 +278,21 @@ export function useElementDetection(): OutlineState {
 			// Check for component at position
 			const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
 			if (componentEl) {
+				// Hide hover outline if this component is already selected
+				const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
+				if (componentId && componentId === signals.currentComponentId.value) {
+					setOutlineState(INITIAL_STATE)
+					return
+				}
+
 				const rect = componentEl.getBoundingClientRect()
-				const nearEdge = isNearElementEdge(
-					ev.clientX,
-					ev.clientY,
-					rect,
-					LAYOUT.COMPONENT_EDGE_THRESHOLD,
-				)
 
-				if (ev.altKey || nearEdge) {
+				if (ev.altKey || isNearElementEdge(ev.clientX, ev.clientY, rect, LAYOUT.COMPONENT_EDGE_THRESHOLD)) {
 					// 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({
@@ -182,6 +345,7 @@ export function useElementDetection(): OutlineState {
 
 export interface ComponentClickHandlerOptions {
 	onComponentSelect: (componentId: string, cursor: { x: number; y: number }) => void
+	onComponentDeselect?: () => void
 }
 
 /**
@@ -190,6 +354,7 @@ export interface ComponentClickHandlerOptions {
  */
 export function useComponentClickHandler({
 	onComponentSelect,
+	onComponentDeselect,
 }: ComponentClickHandlerOptions): void {
 	useEffect(() => {
 		const handleClick = (ev: MouseEvent) => {
@@ -203,17 +368,39 @@ export function useComponentClickHandler({
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
-			// Normal editing mode behavior
+			// ── Select mode: select any CMS element ──
+			if (selectMode) {
+				const cmsEl = getAnyCmsElementAtPosition(ev.clientX, ev.clientY)
+				if (cmsEl) {
+					const resolved = resolveSelectedElement(cmsEl, manifest)
+					if (resolved) {
+						ev.preventDefault()
+						ev.stopPropagation()
+						signals.setSelectModeElement(resolved)
+						return
+					}
+				}
+				// Clicking empty space deselects
+				signals.setSelectModeElement(null)
+				return
+			}
+
+			// ── Edit mode: standard 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
+				// In edit mode, clicking a text element deselects any selected component
+				if (signals.currentComponentId.value && onComponentDeselect) {
+					onComponentDeselect()
+				}
 				return
 			}
 
 			// Check for component click
 			const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
 			if (componentEl) {
+				// In edit mode, require edge proximity or Alt key
 				const rect = componentEl.getBoundingClientRect()
 				const nearEdge = isNearElementEdge(
 					ev.clientX,
@@ -229,13 +416,36 @@ export function useComponentClickHandler({
 						ev.stopPropagation()
 						onComponentSelect(componentId, { x: ev.clientX, y: ev.clientY })
 					}
+					return
+				}
+			}
+
+			// Clicking on empty space deselects any selected component
+			if (signals.currentComponentId.value && onComponentDeselect) {
+				onComponentDeselect()
+			}
+		}
+
+		// Escape key deselects
+		const handleKeyDown = (ev: KeyboardEvent) => {
+			if (ev.key === 'Escape') {
+				if (signals.selectModeElement.value) {
+					ev.preventDefault()
+					signals.setSelectModeElement(null)
+				} else if (signals.currentComponentId.value && onComponentDeselect) {
+					ev.preventDefault()
+					onComponentDeselect()
 				}
 			}
 		}
 
 		document.addEventListener('click', handleClick, true)
-		return () => document.removeEventListener('click', handleClick, true)
-	}, [onComponentSelect])
+		document.addEventListener('keydown', handleKeyDown)
+		return () => {
+			document.removeEventListener('click', handleClick, true)
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [onComponentSelect, onComponentDeselect])
 }
 
 // Re-export utilities for backwards compatibility

package/src/editor/index.tsx

@@ -1,6 +1,6 @@
 import { render } from 'preact'
 import { useCallback, useEffect, useRef } from 'preact/hooks'
-import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
+import type { CmsElementDeselectedMessage, CmsElementSelectedMessage, CmsInboundMessage } from '../types'
 import { fetchManifest } from './api'
 import { AttributeEditor } from './components/attribute-editor'
 import { BgImageOverlay } from './components/bg-image-overlay'
@@ -16,12 +16,13 @@ import { MarkdownEditorOverlay } from './components/markdown-editor-overlay'
 import { MediaLibrary } from './components/media-library'
 import { Outline } from './components/outline'
 import { RedirectCountdown } from './components/redirect-countdown'
+import { SelectionHighlight } from './components/selection-highlight'
 import { SeoEditor } from './components/seo-editor'
 import { TextStyleToolbar } from './components/text-style-toolbar'
 import { ToastContainer } from './components/toast/toast-container'
 import { Toolbar } from './components/toolbar'
 import { getConfig } from './config'
-import { logDebug } from './dom'
+import { disableAllInteractiveElements, enableAllInteractiveElements, logDebug } from './dom'
 import {
 	discardAllChanges,
 	dismissDeploymentStatus,
@@ -227,7 +228,25 @@ const CmsUI = () => {
 		showToast: signals.showToast,
 	})
 
-	useComponentClickHandler({ onComponentSelect: handleComponentSelect })
+	useComponentClickHandler({
+		onComponentSelect: handleComponentSelect,
+		onComponentDeselect: handleBlockEditorClose,
+	})
+
+	// Listen for inbound messages from parent window (when inside an iframe)
+	useEffect(() => {
+		const handleMessage = (ev: MessageEvent) => {
+			const msg = ev.data as CmsInboundMessage
+			if (!msg || typeof msg.type !== 'string') return
+
+			if (msg.type === 'cms-deselect-element') {
+				handleBlockEditorClose()
+			}
+		}
+
+		window.addEventListener('message', handleMessage)
+		return () => window.removeEventListener('message', handleMessage)
+	}, [handleBlockEditorClose])
 
 	// Editor control handlers
 	const handleEditToggle = useCallback(async () => {
@@ -295,7 +314,21 @@ const CmsUI = () => {
 	}, [])
 
 	const handleSelectElementToggle = useCallback(() => {
-		signals.isSelectMode.value = !signals.isSelectMode.value
+		const entering = !signals.isSelectMode.value
+		signals.isSelectMode.value = entering
+		// Clear select-mode selection when leaving
+		if (!entering) {
+			signals.setSelectModeElement(null)
+		}
+		// Disable/enable links and interactive elements in select mode
+		// (skip if already in edit mode, which handles its own disabling)
+		if (!signals.isEditing.value) {
+			if (entering) {
+				disableAllInteractiveElements()
+			} else {
+				enableAllInteractiveElements()
+			}
+		}
 	}, [])
 
 	// Color toolbar handlers
@@ -447,6 +480,10 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
+			<ErrorBoundary componentName="Selection Highlight">
+				<SelectionHighlight />
+			</ErrorBoundary>
+
 			<ErrorBoundary componentName="ImageOverlay">
 				<ImageOverlay
 					visible={imageHoverState.visible && isEditing}

package/src/editor/signals.ts

@@ -219,6 +219,20 @@ export const showingOriginal = signal(false)
 export const currentEditingId = signal<string | null>(null)
 export const currentComponentId = signal<string | null>(null)
 
+/** Selected element in select mode (any CMS element — text, image, or component) */
+export interface SelectedElement {
+	element: HTMLElement
+	/** data-cms-id, data-cms-component-id, or data-cms-img value */
+	id: string
+	label: string
+	type: 'text' | 'image' | 'component'
+}
+export const selectModeElement = signal<SelectedElement | null>(null)
+
+export function setSelectModeElement(el: SelectedElement | null): void {
+	selectModeElement.value = el
+}
+
 // Complex state - use signals wrapping the full object for atomicity
 export const pendingChanges = signal<Map<string, PendingChange>>(new Map())
 export const pendingComponentChanges = signal<Map<string, ComponentInstance>>(

package/src/index.ts

@@ -287,9 +287,11 @@ export type {
 	AvailableColors,
 	AvailableTextStyles,
 	CanonicalUrl,
+	CmsDeselectElementMessage,
 	CmsEditorState,
 	CmsElementDeselectedMessage,
 	CmsElementSelectedMessage,
+	CmsInboundMessage,
 	CmsManifest,
 	CmsMarkerOptions,
 	CmsPageNavigatedMessage,

package/src/seo-processor.ts

@@ -215,6 +215,18 @@ function categorizeMetaTags(metaTags: SeoMetaTag[], seo: PageSeoData): void {
 			continue
 		}
 
+		// Theme color
+		if (name === 'theme-color') {
+			seo.themeColor = meta
+			continue
+		}
+
+		// Robots
+		if (name === 'robots') {
+			seo.robots = meta
+			continue
+		}
+
 		// Open Graph tags
 		if (property?.startsWith('og:')) {
 			const ogKey = property.replace('og:', '')

package/src/types.ts

@@ -420,6 +420,10 @@ export interface PageSeoData {
 	openGraph?: OpenGraphData
 	/** Twitter Card metadata */
 	twitterCard?: TwitterCardData
+	/** Browser theme color (meta name="theme-color") */
+	themeColor?: SeoMetaTag
+	/** Robots directives (meta name="robots") */
+	robots?: SeoMetaTag
 	/** JSON-LD structured data blocks */
 	jsonLd?: JsonLdEntry[]
 }
@@ -568,3 +572,15 @@ export type CmsPostMessage =
 	| CmsReadyMessage
 	| CmsStateChangedMessage
 	| CmsPageNavigatedMessage
+
+// ============================================================================
+// Inbound messages (parent → editor iframe)
+// ============================================================================
+
+/** Message sent from parent to deselect the currently selected element/component */
+export interface CmsDeselectElementMessage {
+	type: 'cms-deselect-element'
+}
+
+/** All possible CMS postMessage types sent from the parent to the editor iframe */
+export type CmsInboundMessage = CmsDeselectElementMessage