@nuasite/cms 0.10.0 → 0.11.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/editor/components/selection-highlight.tsx

@@ -5,7 +5,8 @@ import { getComponentInstance } from '../manifest'
 import * as signals from '../signals'
 
 /**
- * Renders a persistent highlight around the currently selected component.
+ * Renders a persistent highlight around the currently selected element.
+ * Supports both component selection (edit mode) and any CMS element selection (select mode).
  * Uses Shadow DOM to avoid style conflicts with page content.
  */
 export function SelectionHighlight() {
@@ -15,19 +16,28 @@ export function SelectionHighlight() {
 	const labelRef = useRef<HTMLDivElement | null>(null)
 
 	const componentId = signals.currentComponentId.value
+	const selectModeEl = signals.selectModeElement.value
 	const isEditing = signals.isEditing.value
 	const isSelectMode = signals.isSelectMode.value
-	const visible = !!componentId && (isEditing || isSelectMode)
 
-	// Find the DOM element for the selected component
-	const element = componentId
-		? (document.querySelector(`[data-cms-component-id="${componentId}"]`) as HTMLElement | null)
-		: null
-
-	// Get component name from manifest
-	const manifest = signals.manifest.value
-	const instance = componentId ? getComponentInstance(manifest, componentId) : null
-	const componentName = instance?.componentName
+	// Determine which element to highlight
+	const hasComponentSelection = !!componentId && (isEditing || isSelectMode)
+	const hasSelectModeSelection = isSelectMode && !!selectModeEl
+	const visible = hasComponentSelection || hasSelectModeSelection
+
+	// Resolve the DOM element and label
+	let element: HTMLElement | null = null
+	let label: string = 'Component'
+
+	if (hasSelectModeSelection && selectModeEl) {
+		element = selectModeEl.element
+		label = selectModeEl.label
+	} else if (hasComponentSelection && componentId) {
+		element = document.querySelector(`[data-cms-component-id="${componentId}"]`) as HTMLElement | null
+		const manifest = signals.manifest.value
+		const instance = getComponentInstance(manifest, componentId)
+		label = instance?.componentName ?? 'Component'
+	}
 
 	// Initialize Shadow DOM once
 	useEffect(() => {
@@ -41,7 +51,7 @@ export function SelectionHighlight() {
 					top: 0;
 					left: 0;
 					pointer-events: none;
-					z-index: ${Z_INDEX.OVERLAY};
+					z-index: ${Z_INDEX.SELECTION};
 				}
 
 				.selection-overlay {
@@ -113,8 +123,12 @@ export function SelectionHighlight() {
 
 	// Handle deselection
 	const handleDeselect = useCallback(() => {
-		signals.setCurrentComponentId(null)
-		signals.setBlockEditorOpen(false)
+		if (signals.selectModeElement.value) {
+			signals.setSelectModeElement(null)
+		} else {
+			signals.setCurrentComponentId(null)
+			signals.setBlockEditorOpen(false)
+		}
 	}, [])
 
 	// Track position on scroll/resize
@@ -160,11 +174,10 @@ export function SelectionHighlight() {
 		}
 
 		// Build label content
-		const name = componentName ?? 'Component'
 		labelRef.current.innerHTML = ''
 
 		const nameSpan = document.createElement('span')
-		nameSpan.textContent = name
+		nameSpan.textContent = label
 		labelRef.current.appendChild(nameSpan)
 
 		const deselectBtn = document.createElement('button')
@@ -180,7 +193,7 @@ export function SelectionHighlight() {
 		// Set initial position
 		const rect = element.getBoundingClientRect()
 		handlePositionChange(rect)
-	}, [visible, element, componentName, handleDeselect, handlePositionChange])
+	}, [visible, element, label, handleDeselect, handlePositionChange])
 
 	return (
 		<div
@@ -193,7 +206,7 @@ export function SelectionHighlight() {
 				width: 0,
 				height: 0,
 				pointerEvents: 'none',
-				zIndex: Z_INDEX.OVERLAY,
+				zIndex: Z_INDEX.SELECTION,
 			}}
 		/>
 	)

package/src/editor/components/toolbar.tsx

@@ -1,5 +1,6 @@
 import type { ComponentChildren, FunctionComponent } from 'preact'
-import { useState } from 'preact/hooks'
+import { useRef, useState } from 'preact/hooks'
+import { CMS_VERSION } from '../constants'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { showConfirmDialog } from '../signals'
@@ -104,6 +105,8 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isPreviewingMarkdown = signals.isMarkdownPreview.value
 	const currentPageCollection = signals.currentPageCollection.value
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
+	const [showVersion, setShowVersion] = useState(false)
+	const versionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	if (isPreviewingMarkdown) return null
 
@@ -312,12 +315,25 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 										e.stopPropagation()
 										setIsMenuOpen(!isMenuOpen)
 									}}
+									onDblClick={(e) => {
+										e.stopPropagation()
+										setIsMenuOpen(false)
+										setShowVersion(true)
+										if (versionTimeoutRef.current) clearTimeout(versionTimeoutRef.current)
+										versionTimeoutRef.current = setTimeout(() => setShowVersion(false), 3000)
+									}}
 									class="w-10 h-10 rounded-full bg-cms-primary flex items-center justify-center cursor-pointer transition-all duration-150 hover:bg-cms-primary-hover"
 									aria-label="Menu"
 								>
 									<span class="w-3 h-3 rounded-full bg-black" />
 								</button>
 
+								{showVersion && (
+									<div class="absolute bottom-full right-0 mb-2 px-3.5 py-2 text-sm text-white/70 bg-cms-dark rounded-cms-lg shadow-lg border border-white/10 whitespace-nowrap animate-[fadeIn_150ms_ease-out]">
+										v{CMS_VERSION}
+									</div>
+								)}
+
 								{isMenuOpen && (
 									<>
 										{/* Backdrop to close menu */}

package/src/editor/constants.ts

@@ -1,8 +1,12 @@
+import { version } from '../../package.json'
+
 /**
  * Constants for the CMS editor
  * Centralizes magic numbers and configuration values
  */
 
+export const CMS_VERSION = version
+
 /**
  * Z-index layers for CMS UI elements.
  * Uses high values to ensure CMS UI appears above all page content.
@@ -10,9 +14,11 @@
  */
 export const Z_INDEX = {
 	/** Highlight overlay for hovered elements */
-	HIGHLIGHT: 2147483645,
-	/** Overlay backdrop for modals */
-	OVERLAY: 2147483646,
+	HIGHLIGHT: 2147483644,
+	/** Hover outline for elements/components */
+	OVERLAY: 2147483645,
+	/** Persistent selection highlight for selected component */
+	SELECTION: 2147483646,
 	/** Modal panels (block editor, AI chat) */
 	MODAL: 2147483647,
 	/** Toast notifications - always on top */

package/src/editor/editor.ts

@@ -332,7 +332,10 @@ export function stopEditMode(onStateChange?: () => void): void {
 	signals.setEditing(false)
 	saveEditingState(false)
 	signals.setShowingOriginal(false)
-	enableAllInteractiveElements()
+	// Only re-enable interactive elements if select mode is not active
+	if (!signals.isSelectMode.value) {
+		enableAllInteractiveElements()
+	}
 	cleanupHighlightSystem()
 	onStateChange?.()
 

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({
@@ -205,11 +368,29 @@ 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)) {
-				// Clicking a text element deselects any selected component
+				// In edit mode, clicking a text element deselects any selected component
 				if (signals.currentComponentId.value && onComponentDeselect) {
 					onComponentDeselect()
 				}
@@ -219,6 +400,7 @@ export function useComponentClickHandler({
 			// 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,
@@ -244,11 +426,16 @@ export function useComponentClickHandler({
 			}
 		}
 
-		// Escape key deselects the selected component
+		// Escape key deselects
 		const handleKeyDown = (ev: KeyboardEvent) => {
-			if (ev.key === 'Escape' && signals.currentComponentId.value && onComponentDeselect) {
-				ev.preventDefault()
-				onComponentDeselect()
+			if (ev.key === 'Escape') {
+				if (signals.selectModeElement.value) {
+					ev.preventDefault()
+					signals.setSelectModeElement(null)
+				} else if (signals.currentComponentId.value && onComponentDeselect) {
+					ev.preventDefault()
+					onComponentDeselect()
+				}
 			}
 		}
 

package/src/editor/index.tsx

@@ -22,7 +22,7 @@ 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,
@@ -314,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
@@ -450,10 +464,6 @@ const CmsUI = () => {
 				<EditableHighlights visible={showEditableHighlights && isEditing} />
 			</ErrorBoundary>
 
-			<ErrorBoundary componentName="Selection Highlight">
-				<SelectionHighlight />
-			</ErrorBoundary>
-
 			<ErrorBoundary componentName="Outline">
 				<Outline
 					visible={outlineState.visible}
@@ -470,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>>(