@nuasite/cms 0.1.0

package/src/editor/components/create-page-modal.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useMemo } from 'preact/hooks'
+import { isCreatePageOpen, manifest, openMarkdownEditorForNewPage, resetCreatePageState } from '../signals'
+
+export function CreatePageModal() {
+	const visible = isCreatePageOpen.value
+
+	// Get collection definitions from manifest (read signal directly for reactivity)
+	const collectionDefinitions = manifest.value.collectionDefinitions ?? {}
+
+	const collections = useMemo(() => {
+		return Object.values(collectionDefinitions)
+	}, [collectionDefinitions])
+
+	// Single collection — skip picker and go straight to editor
+	useEffect(() => {
+		if (visible && collections.length === 1) {
+			const col = collections[0]
+			resetCreatePageState()
+			if (col) {
+				openMarkdownEditorForNewPage(col?.name, col)
+			}
+		}
+	}, [visible, collections])
+
+	const handleClose = () => {
+		resetCreatePageState()
+	}
+
+	const handleSelectCollection = (name: string) => {
+		const def = collectionDefinitions[name]
+		if (def) {
+			resetCreatePageState()
+			openMarkdownEditorForNewPage(name, def)
+		}
+	}
+
+	if (!visible) return null
+
+	// No collections available
+	if (collections.length === 0) {
+		return (
+			<div
+				class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+				onClick={handleClose}
+				data-cms-ui
+			>
+				<div
+					class="bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] max-w-md w-full border border-white/10"
+					onClick={(e) => e.stopPropagation()}
+					data-cms-ui
+				>
+					<div class="flex items-center justify-between p-5 border-b border-white/10">
+						<h2 class="text-lg font-semibold text-white">Create New Page</h2>
+						<CloseButton onClick={handleClose} />
+					</div>
+					<div class="p-8 text-center">
+						<div class="text-white/60 mb-4">
+							No content collections found.
+						</div>
+						<p class="text-white/40 text-sm">
+							Add markdown files to <code class="bg-white/10 px-1.5 py-0.5 rounded">src/content/</code> subdirectories to enable page creation.
+						</p>
+					</div>
+					<div class="flex items-center justify-end p-5 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+						<button
+							type="button"
+							onClick={handleClose}
+							class="px-4 py-2.5 text-sm text-white/80 font-medium rounded-cms-pill hover:bg-white/10 hover:text-white transition-colors"
+							data-cms-ui
+						>
+							Close
+						</button>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	// Single collection auto-selected via useEffect above
+	if (collections.length === 1) return null
+
+	// Collection picker
+	return (
+		<div
+			class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+			onClick={handleClose}
+			data-cms-ui
+		>
+			<div
+				class="bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] max-w-md w-full border border-white/10"
+				onClick={(e) => e.stopPropagation()}
+				data-cms-ui
+			>
+				<div class="flex items-center justify-between p-5 border-b border-white/10">
+					<h2 class="text-lg font-semibold text-white">Choose Collection</h2>
+					<CloseButton onClick={handleClose} />
+				</div>
+				<div class="p-5 space-y-2">
+					{collections.map((col) => (
+						<button
+							key={col.name}
+							type="button"
+							onClick={() => handleSelectCollection(col.name)}
+							class="w-full flex items-center gap-4 p-4 bg-white/5 hover:bg-white/10 rounded-cms-lg border border-white/10 hover:border-white/20 transition-colors text-left"
+							data-cms-ui
+						>
+							<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-md flex items-center justify-center">
+								<CollectionIcon />
+							</div>
+							<div class="flex-1 min-w-0">
+								<div class="text-white font-medium">{col.label}</div>
+								<div class="text-white/50 text-sm">
+									{col.entryCount} {col.entryCount === 1 ? 'entry' : 'entries'} &middot; {col.fields.length} fields
+								</div>
+							</div>
+							<ChevronRightIcon />
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+function CloseButton({ onClick }: { onClick: () => void }) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			class="text-white/50 hover:text-white p-1.5 hover:bg-white/10 rounded-full transition-colors"
+			data-cms-ui
+		>
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
+	)
+}
+
+function CollectionIcon() {
+	return (
+		<svg class="w-5 h-5 text-cms-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+			/>
+		</svg>
+	)
+}
+
+function ChevronRightIcon() {
+	return (
+		<svg class="w-5 h-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+		</svg>
+	)
+}

package/src/editor/components/editable-highlights.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { Z_INDEX } from '../constants'
+import * as signals from '../signals'
+
+export interface EditableHighlightsProps {
+	visible: boolean
+}
+
+interface HighlightRect {
+	cmsId: string
+	type: 'text' | 'component' | 'image'
+	rect: DOMRect
+}
+
+/**
+ * Renders lightweight dashed outlines around all editable elements.
+ * Uses a single canvas-like approach with Shadow DOM for performance.
+ */
+export function EditableHighlights({ visible }: EditableHighlightsProps) {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const shadowRootRef = useRef<ShadowRoot | null>(null)
+	const overlaysContainerRef = useRef<HTMLDivElement | null>(null)
+	const rafRef = useRef<number | null>(null)
+
+	// Initialize Shadow DOM once
+	useEffect(() => {
+		if (containerRef.current && !shadowRootRef.current) {
+			shadowRootRef.current = containerRef.current.attachShadow({ mode: 'open' })
+
+			const style = document.createElement('style')
+			style.textContent = `
+				:host {
+					position: fixed;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					pointer-events: none;
+					z-index: ${Z_INDEX.HIGHLIGHT};
+				}
+
+				.highlights-container {
+					position: fixed;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					pointer-events: none;
+				}
+
+				.highlight-overlay {
+					position: fixed;
+					box-sizing: border-box;
+					border: 2px dashed #1A1A1A;
+					border-radius: 4px;
+					pointer-events: none;
+					opacity: 0.5;
+					transition: opacity 100ms ease;
+				}
+
+				.highlight-overlay.component {
+					border-style: solid;
+				}
+
+				.highlight-overlay.image {
+					border-style: dotted;
+				}
+
+				.highlights-container.hidden {
+					display: none;
+				}
+			`
+
+			overlaysContainerRef.current = document.createElement('div')
+			overlaysContainerRef.current.className = 'highlights-container hidden'
+
+			shadowRootRef.current.appendChild(style)
+			shadowRootRef.current.appendChild(overlaysContainerRef.current)
+		}
+	}, [])
+
+	// Update highlights when visible changes or on scroll/resize
+	useEffect(() => {
+		if (!overlaysContainerRef.current) return
+
+		if (!visible) {
+			overlaysContainerRef.current.className = 'highlights-container hidden'
+			if (rafRef.current) {
+				cancelAnimationFrame(rafRef.current)
+				rafRef.current = null
+			}
+			return
+		}
+
+		overlaysContainerRef.current.className = 'highlights-container'
+
+		const updateHighlights = () => {
+			if (!overlaysContainerRef.current || !visible) return
+
+			const highlights = collectEditableElements()
+			renderHighlights(overlaysContainerRef.current, highlights)
+		}
+
+		// Initial render
+		updateHighlights()
+
+		// Use RAF loop for smooth updates during scroll
+		let lastScrollY = window.scrollY
+		let lastScrollX = window.scrollX
+
+		const rafLoop = () => {
+			if (!visible) return
+
+			// Only update if scroll position changed
+			if (window.scrollY !== lastScrollY || window.scrollX !== lastScrollX) {
+				lastScrollY = window.scrollY
+				lastScrollX = window.scrollX
+				updateHighlights()
+			}
+
+			rafRef.current = requestAnimationFrame(rafLoop)
+		}
+
+		rafRef.current = requestAnimationFrame(rafLoop)
+
+		// Listen for resize
+		const handleResize = () => {
+			updateHighlights()
+		}
+
+		window.addEventListener('resize', handleResize)
+
+		return () => {
+			window.removeEventListener('resize', handleResize)
+			if (rafRef.current) {
+				cancelAnimationFrame(rafRef.current)
+				rafRef.current = null
+			}
+		}
+	}, [visible])
+
+	return (
+		<div
+			ref={containerRef}
+			data-cms-ui
+			style={{
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				width: 0,
+				height: 0,
+				pointerEvents: 'none',
+				zIndex: Z_INDEX.HIGHLIGHT,
+			}}
+		/>
+	)
+}
+
+/**
+ * Collect all editable elements from the DOM
+ */
+function collectEditableElements(): HighlightRect[] {
+	const highlights: HighlightRect[] = []
+	const manifest = signals.manifest.value
+
+	// Query all elements with CMS data attributes
+	const textElements = document.querySelectorAll('[data-cms-id]')
+	const componentElements = document.querySelectorAll('[data-cms-component-id]')
+	const imageElements = document.querySelectorAll('img[data-cms-img]')
+
+	// Process text elements
+	textElements.forEach((el) => {
+		const cmsId = el.getAttribute('data-cms-id')
+		if (!cmsId) return
+
+		// Skip if this is also a component or image
+		if (el.hasAttribute('data-cms-component-id') || el.tagName === 'IMG') return
+
+		// Skip if not in manifest (invalid element)
+		if (!manifest.entries[cmsId]) return
+
+		const rect = el.getBoundingClientRect()
+		// Skip elements not in viewport or too small
+		if (rect.width < 10 || rect.height < 10) return
+		if (rect.bottom < 0 || rect.top > window.innerHeight) return
+		if (rect.right < 0 || rect.left > window.innerWidth) return
+
+		highlights.push({ cmsId, type: 'text', rect })
+	})
+
+	// Process component elements
+	componentElements.forEach((el) => {
+		const componentId = el.getAttribute('data-cms-component-id')
+		if (!componentId) return
+
+		// Skip if not in manifest
+		if (!manifest.components[componentId]) return
+
+		const rect = el.getBoundingClientRect()
+		if (rect.width < 10 || rect.height < 10) return
+		if (rect.bottom < 0 || rect.top > window.innerHeight) return
+		if (rect.right < 0 || rect.left > window.innerWidth) return
+
+		highlights.push({ cmsId: componentId, type: 'component', rect })
+	})
+
+	// Process image elements
+	imageElements.forEach((el) => {
+		const cmsId = el.getAttribute('data-cms-img')
+		if (!cmsId) return
+
+		const rect = el.getBoundingClientRect()
+		if (rect.width < 10 || rect.height < 10) return
+		if (rect.bottom < 0 || rect.top > window.innerHeight) return
+		if (rect.right < 0 || rect.left > window.innerWidth) return
+
+		highlights.push({ cmsId, type: 'image', rect })
+	})
+
+	return highlights
+}
+
+/**
+ * Render highlight overlays efficiently by reusing DOM elements
+ */
+function renderHighlights(container: HTMLDivElement, highlights: HighlightRect[]): void {
+	// Get existing overlay elements
+	const existingOverlays = container.querySelectorAll('.highlight-overlay')
+	const existingCount = existingOverlays.length
+	const neededCount = highlights.length
+
+	// Update or create overlays
+	highlights.forEach((highlight, index) => {
+		let overlay: HTMLDivElement
+
+		if (index < existingCount) {
+			// Reuse existing overlay
+			overlay = existingOverlays[index] as HTMLDivElement
+		} else {
+			// Create new overlay
+			overlay = document.createElement('div')
+			overlay.className = 'highlight-overlay'
+			container.appendChild(overlay)
+		}
+
+		// Update class based on type
+		overlay.className = `highlight-overlay ${highlight.type}`
+
+		// Update position
+		overlay.style.left = `${highlight.rect.left - 6}px`
+		overlay.style.top = `${highlight.rect.top - 6}px`
+		overlay.style.width = `${highlight.rect.width + 12}px`
+		overlay.style.height = `${highlight.rect.height + 12}px`
+	})
+
+	// Remove extra overlays
+	for (let i = neededCount; i < existingCount; i++) {
+		existingOverlays[i]!.remove()
+	}
+}

package/src/editor/components/error-boundary.tsx

@@ -0,0 +1,87 @@
+import { Component, type ComponentChildren } from 'preact'
+
+interface ErrorBoundaryProps {
+	children: ComponentChildren
+	fallback?: ComponentChildren
+	onError?: (error: Error, errorInfo: { componentStack: string }) => void
+	componentName?: string
+}
+
+interface ErrorBoundaryState {
+	hasError: boolean
+	error: Error | null
+}
+
+/**
+ * Error boundary component to catch and handle errors in CMS UI components.
+ * Prevents the entire CMS overlay from crashing when a component fails.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+	constructor(props: ErrorBoundaryProps) {
+		super(props)
+		this.state = { hasError: false, error: null }
+	}
+
+	static override getDerivedStateFromError(error: Error): ErrorBoundaryState {
+		return { hasError: true, error }
+	}
+
+	override componentDidCatch(error: Error, errorInfo: { componentStack: string }): void {
+		console.error('[CMS] Component error:', error)
+		console.error('[CMS] Component stack:', errorInfo.componentStack)
+		this.props.onError?.(error, errorInfo)
+	}
+
+	private handleRetry = (): void => {
+		this.setState({ hasError: false, error: null })
+	}
+
+	render() {
+		if (this.state.hasError) {
+			if (this.props.fallback) {
+				return this.props.fallback
+			}
+
+			const componentName = this.props.componentName || 'Component'
+
+			return (
+				<div
+					data-cms-ui
+					class="p-4 bg-red-50 border-2 border-red-500 text-red-800 font-sans text-sm"
+					style={{
+						fontFamily: 'system-ui, -apple-system, sans-serif',
+					}}
+				>
+					<div class="font-bold mb-2 flex items-center gap-2">
+						<span class="text-red-600">⚠</span>
+						{componentName} Error
+					</div>
+					<div class="text-xs text-red-600 mb-3 font-mono">
+						{this.state.error?.message || 'An unexpected error occurred'}
+					</div>
+					<button
+						onClick={this.handleRetry}
+						class="px-3 py-1.5 bg-red-600 text-white border-2 border-red-800 text-xs font-bold cursor-pointer hover:bg-red-700 transition-colors"
+					>
+						Retry
+					</button>
+				</div>
+			)
+		}
+
+		return this.props.children
+	}
+}
+
+export const SilentErrorFallback = () => null
+
+export const CompactErrorFallback = ({ message }: { message?: string }) => {
+	return (
+		<div
+			data-cms-ui
+			class="px-2 py-1 bg-red-100 text-red-700 text-xs font-sans border border-red-300 inline-block"
+		>
+			⚠ {message || 'Error'}
+		</div>
+	)
+}