@nuasite/cms 0.1.0

package/src/editor/hooks/utils.ts

@@ -0,0 +1,101 @@
+import type { RefObject } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import { CSS } from '../constants'
+
+/**
+ * Check if a mouse event originates from CMS UI elements.
+ * This includes the toolbar, AI chat, color picker, and other CMS overlays.
+ */
+export function isEventOnCmsUI(ev: MouseEvent): boolean {
+	const path = ev.composedPath()
+	const cmsOverlay = document.querySelector(CSS.HIGHLIGHT_ELEMENT)
+
+	for (const el of path) {
+		if (el === cmsOverlay) return true
+		if (el instanceof HTMLElement) {
+			// Check for CMS custom elements
+			if (el.tagName?.startsWith('CMS-')) return true
+			// Check for toolbar and AI chat by data attribute
+			if (el.hasAttribute?.(CSS.UI_ATTRIBUTE)) return true
+		}
+	}
+	return false
+}
+
+/**
+ * Check if a target element is part of CMS UI.
+ * Non-event based variant for direct element checks.
+ */
+export function isElementInCmsUI(target: HTMLElement | null): boolean {
+	if (!target) return false
+	return target.hasAttribute?.(CSS.UI_ATTRIBUTE) || !!target.closest?.(`[${CSS.UI_ATTRIBUTE}]`)
+}
+
+/**
+ * Hook for tracking an element's position on scroll and resize.
+ * Returns a callback to get the latest rect, and automatically updates
+ * when the element scrolls or the window resizes.
+ *
+ * @param element - The element to track
+ * @param onPositionChange - Callback when position changes
+ * @param enabled - Whether tracking is enabled
+ */
+export function usePositionTracking(
+	element: HTMLElement | null,
+	onPositionChange: (rect: DOMRect | null) => void,
+	enabled: boolean = true,
+): void {
+	const elementRef = useRef(element)
+	elementRef.current = element
+
+	useEffect(() => {
+		if (!enabled || !element) return
+
+		const updatePosition = () => {
+			if (elementRef.current && document.contains(elementRef.current)) {
+				onPositionChange(elementRef.current.getBoundingClientRect())
+			} else {
+				onPositionChange(null)
+			}
+		}
+
+		window.addEventListener('scroll', updatePosition, true)
+		window.addEventListener('resize', updatePosition)
+
+		return () => {
+			window.removeEventListener('scroll', updatePosition, true)
+			window.removeEventListener('resize', updatePosition)
+		}
+	}, [element, enabled, onPositionChange])
+}
+
+/**
+ * Hook for throttling a callback function.
+ * Returns a throttled version that will only execute once per interval.
+ */
+export function useThrottle<T extends (...args: unknown[]) => void>(
+	callback: T,
+	intervalMs: number,
+): T {
+	const lastCallTime = useRef<number>(0)
+	const callbackRef = useRef(callback)
+	callbackRef.current = callback
+
+	return ((...args: Parameters<T>) => {
+		const now = Date.now()
+		if (now - lastCallTime.current >= intervalMs) {
+			lastCallTime.current = now
+			callbackRef.current(...args)
+		}
+	}) as T
+}
+
+/**
+ * Creates a ref that always contains the latest value.
+ * Useful for accessing current values in event handlers without stale closures.
+ */
+export function useLatestRef<T>(value: T): RefObject<T> {
+	const ref = useRef(value)
+	ref.current = value
+	return ref
+}

package/src/editor/index.tsx

@@ -0,0 +1,481 @@
+import { render } from 'preact'
+import { useCallback, useEffect } from 'preact/hooks'
+import { fetchManifest } from './api'
+import { AIChat } from './components/ai-chat'
+import { AITooltip } from './components/ai-tooltip'
+import { AttributeEditor } from './components/attribute-editor'
+import { BlockEditor } from './components/block-editor'
+import { CollectionsBrowser } from './components/collections-browser'
+import { ColorToolbar } from './components/color-toolbar'
+import { ConfirmDialog } from './components/confirm-dialog'
+import { CreatePageModal } from './components/create-page-modal'
+import { EditableHighlights } from './components/editable-highlights'
+import { ErrorBoundary } from './components/error-boundary'
+import { ImageOverlay } from './components/image-overlay'
+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 { 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 {
+	discardAllChanges,
+	dismissDeploymentStatus,
+	handleColorChange,
+	saveAllChanges,
+	startEditMode,
+	stopEditMode,
+	toggleShowOriginal,
+} from './editor'
+import { performRedo, performUndo } from './history'
+import CMS_STYLES from './styles.css?inline'
+import {
+	useAIHandlers,
+	useBlockEditorHandlers,
+	useComponentClickHandler,
+	useElementDetection,
+	useImageHoverDetection,
+	useTextSelection,
+	useTooltipState,
+} from './hooks'
+import {
+	openCollectionsBrowser,
+	openMarkdownEditorForCurrentPage,
+	openSeoEditor,
+	selectBrowserCollection,
+	setMediaLibraryOpen,
+	toggleShowEditableHighlights,
+	updateSettings,
+} from './signals'
+import * as signals from './signals'
+import { hasPendingEntryNavigation, loadSettingsFromStorage, saveSettingsToStorage } from './storage'
+import { generateCSSVariables, resolveTheme } from './themes'
+
+const CmsUI = () => {
+	const config = signals.config.value
+	const outlineState = useElementDetection()
+	const imageHoverState = useImageHoverDetection()
+	const textSelectionState = useTextSelection()
+	const { tooltipState, showTooltipForElement, hideTooltip } = useTooltipState()
+	const updateUI = useCallback(() => {
+		showTooltipForElement()
+	}, [showTooltipForElement])
+
+	// Load settings from localStorage on mount
+	useEffect(() => {
+		const savedSettings = loadSettingsFromStorage()
+		if (savedSettings) {
+			updateSettings(savedSettings)
+		}
+	}, [])
+
+	// Fetch manifest on mount so toolbar has collection/SEO data before edit mode
+	useEffect(() => {
+		fetchManifest().then((manifest) => {
+			signals.setManifest(manifest)
+		}).catch(() => {})
+	}, [])
+
+	// Auto-open markdown editor when there's a pending entry navigation from collections browser
+	useEffect(() => {
+		if (hasPendingEntryNavigation()) {
+			openMarkdownEditorForCurrentPage()
+		}
+	}, [])
+
+	const {
+		handleAIChatToggle,
+		handleChatClose,
+		handleChatCancel,
+		handleTooltipPromptSubmit,
+		handleChatSend,
+		handleApplyToElement,
+	} = useAIHandlers({
+		config,
+		showToast: signals.showToast,
+		onTooltipHide: hideTooltip,
+		onUIUpdate: updateUI,
+	})
+
+	const {
+		blockEditorRect,
+		handleComponentSelect,
+		handleBlockEditorClose,
+		handleUpdateProps,
+		handleInsertComponent,
+		handleRemoveBlock,
+	} = useBlockEditorHandlers({
+		config,
+		showToast: signals.showToast,
+	})
+
+	useComponentClickHandler({ onComponentSelect: handleComponentSelect })
+
+	// Editor control handlers
+	const handleEditToggle = useCallback(async () => {
+		if (signals.isEditing.value) {
+			hideTooltip()
+			stopEditMode(updateUI)
+		} else {
+			await startEditMode(config, updateUI)
+		}
+	}, [config, updateUI, hideTooltip])
+
+	const handleCompare = useCallback(() => {
+		toggleShowOriginal(config, updateUI)
+	}, [config, updateUI])
+
+	const handleSave = useCallback(async () => {
+		try {
+			const result = await saveAllChanges(config, updateUI)
+			if (result.success) {
+				signals.showToast(`Saved ${result.updated} change(s) successfully!`, 'success')
+			} else if (result.errors) {
+				signals.showToast(`Saved ${result.updated}, ${result.errors.length} failed`, 'error')
+			}
+		} catch (err) {
+			signals.showToast('Save failed – see console', 'error')
+		}
+	}, [config, updateUI])
+
+	const handleDiscard = useCallback(() => {
+		discardAllChanges(updateUI)
+		signals.showToast('All changes discarded', 'info')
+	}, [updateUI])
+
+	const handleOpenCollection = useCallback((name: string) => {
+		openCollectionsBrowser()
+		selectBrowserCollection(name)
+	}, [])
+
+	const handleMediaLibrary = useCallback(() => {
+		setMediaLibraryOpen(true)
+	}, [])
+
+	const handleDismissDeployment = useCallback(() => {
+		dismissDeploymentStatus()
+	}, [])
+
+	const handleEditContent = useCallback(async () => {
+		if (!await openMarkdownEditorForCurrentPage()) {
+			signals.showToast('No collection content found on this page', 'error')
+		}
+	}, [])
+
+	const handleToggleHighlights = useCallback(() => {
+		toggleShowEditableHighlights()
+		// Save settings to localStorage
+		const newSettings = signals.settings.value
+		saveSettingsToStorage(newSettings)
+	}, [])
+
+	const handleSeoEditor = useCallback(() => {
+		openSeoEditor()
+	}, [])
+
+	// Color toolbar handlers
+	const handleColorToolbarChange = useCallback((colorType: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText', oldClass: string, newClass: string, previousClassName: string, previousStyleCssText: string) => {
+		const targetId = signals.colorEditorState.value.targetElementId
+		if (!targetId) return
+
+		handleColorChange(config, targetId, colorType, oldClass, newClass, updateUI, previousClassName, previousStyleCssText)
+	}, [config, updateUI])
+
+	const handleColorToolbarClose = useCallback(() => {
+		signals.closeColorEditor()
+	}, [])
+
+	// Handle color swatch click from outline
+	const handleOutlineColorClick = useCallback((cmsId: string, rect: DOMRect) => {
+		signals.setHoveringSwatches(false)
+		signals.openColorEditor(cmsId, rect)
+	}, [])
+
+	// Handle attribute button click from outline
+	const handleOutlineAttributeClick = useCallback((cmsId: string, rect: DOMRect) => {
+		signals.openAttributeEditor(cmsId, rect)
+	}, [])
+
+	// Handle attribute editor close
+	const handleAttributeEditorClose = useCallback(() => {
+		signals.closeAttributeEditor()
+	}, [])
+
+	// Get reactive values from signals
+	const isEditing = signals.isEditing.value
+	const isAIProcessing = signals.isAIProcessing.value
+	const isChatOpen = signals.isChatOpen.value
+	const blockEditorState = signals.blockEditorState.value
+	const colorEditorState = signals.colorEditorState.value
+	const manifest = signals.manifest.value
+	const toasts = signals.toasts.value
+	const collectionDefinitions = manifest.collectionDefinitions ?? {}
+	const showEditableHighlights = signals.showEditableHighlights.value
+	const hasSeoData = !!(manifest as any).seo
+
+	// Get color toolbar data
+	const colorEditorElement = colorEditorState.targetElementId
+		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.element ?? null
+		: null
+	const colorEditorCurrentClasses = colorEditorState.targetElementId
+		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.newClasses
+		: undefined
+
+	return (
+		<>
+			<ErrorBoundary componentName="Editable Highlights">
+				<EditableHighlights visible={showEditableHighlights && isEditing} />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Outline">
+				<Outline
+					visible={outlineState.visible}
+					rect={outlineState.rect}
+					isComponent={outlineState.isComponent}
+					componentName={outlineState.componentName}
+					tagName={outlineState.tagName}
+					element={outlineState.element}
+					cmsId={outlineState.cmsId}
+					onColorClick={handleOutlineColorClick}
+					onAttributeClick={handleOutlineAttributeClick}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="ImageOverlay">
+				<ImageOverlay
+					visible={imageHoverState.visible && isEditing}
+					rect={imageHoverState.rect}
+					element={imageHoverState.element}
+					cmsId={imageHoverState.cmsId}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Toolbar">
+				<Toolbar
+					callbacks={{
+						onEdit: handleEditToggle,
+						onCompare: handleCompare,
+						onSave: handleSave,
+						onDiscard: handleDiscard,
+						onAIChat: handleAIChatToggle,
+						onMediaLibrary: handleMediaLibrary,
+						onDismissDeployment: handleDismissDeployment,
+						onNavigateChange: () => {
+							signals.navigateToNextChange()
+						},
+						onEditContent: handleEditContent,
+						onToggleHighlights: handleToggleHighlights,
+						onSeoEditor: hasSeoData ? handleSeoEditor : undefined,
+						onOpenCollection: handleOpenCollection,
+					}}
+					collectionDefinitions={Object.keys(collectionDefinitions).length > 0 ? collectionDefinitions : undefined}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="AI Tooltip">
+				<AITooltip
+					callbacks={{
+						onPromptSubmit: handleTooltipPromptSubmit,
+					}}
+					visible={!!tooltipState.elementId && isEditing && !isAIProcessing && !textSelectionState.hasSelection}
+					elementId={tooltipState.elementId}
+					rect={tooltipState.rect}
+					processing={isAIProcessing}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Text Style Toolbar">
+				<TextStyleToolbar
+					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing}
+					rect={textSelectionState.rect}
+					element={textSelectionState.element}
+					onStyleChange={updateUI}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Color Toolbar">
+				<ColorToolbar
+					visible={colorEditorState.isOpen && isEditing}
+					rect={colorEditorState.targetRect}
+					element={colorEditorElement}
+					availableColors={manifest.availableColors}
+					currentClasses={colorEditorCurrentClasses}
+					onColorChange={handleColorToolbarChange}
+					onClose={handleColorToolbarClose}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Attribute Editor">
+				<AttributeEditor
+					onClose={handleAttributeEditorClose}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="AI Chat">
+				<AIChat
+					callbacks={{
+						onSend: handleChatSend,
+						onClose: handleChatClose,
+						onCancel: handleChatCancel,
+						onApplyToElement: handleApplyToElement,
+					}}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Block Editor">
+				<BlockEditor
+					visible={blockEditorState.isOpen && isEditing}
+					componentId={blockEditorState.currentComponentId}
+					rect={blockEditorRect}
+					onClose={handleBlockEditorClose}
+					onUpdateProps={handleUpdateProps}
+					onInsertComponent={handleInsertComponent}
+					onRemoveBlock={handleRemoveBlock}
+				/>
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="SEO Editor">
+				<SeoEditor />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Collections Browser">
+				<CollectionsBrowser />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Create Page Modal">
+				<CreatePageModal />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Markdown Editor">
+				<MarkdownEditorOverlay />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Media Library">
+				<MediaLibrary />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Confirm Dialog">
+				<ConfirmDialog />
+			</ErrorBoundary>
+
+			<RedirectCountdown />
+			<ToastContainer toasts={toasts} onRemove={signals.removeToast} />
+		</>
+	)
+}
+
+class CmsEditor {
+	private appRoot: HTMLElement | null = null
+	private shadowRoot: ShadowRoot | null = null
+	private config = getConfig()
+
+	async init(): Promise<void> {
+		signals.setConfig(this.config)
+
+		logDebug(this.config.debug, 'Initializing CMS editor with config:', this.config)
+
+		this.setupUI()
+		this.setupKeyboardShortcuts()
+	}
+
+	private setupUI(): void {
+		const hostElement = document.createElement('div')
+		hostElement.id = 'cms-app-host'
+		hostElement.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647;'
+		document.body.appendChild(hostElement)
+
+		// Create shadow DOM with closed mode for better isolation
+		this.shadowRoot = hostElement.attachShadow({ mode: 'open' })
+
+		// Inject theme CSS variables BEFORE main styles
+		this.injectThemeStyles()
+
+		// Inject Tailwind CSS styles into shadow DOM
+		const styleElement = document.createElement('style')
+		styleElement.textContent = CMS_STYLES
+		this.shadowRoot.appendChild(styleElement)
+
+		// Create the app root container
+		this.appRoot = document.createElement('div')
+		this.appRoot.id = 'cms-app-root'
+		this.appRoot.className = 'cms-root'
+		this.shadowRoot.appendChild(this.appRoot)
+
+		// Render Preact app into the shadow DOM
+		render(<CmsUI />, this.appRoot)
+	}
+
+	private injectThemeStyles(): void {
+		if (!this.shadowRoot) return
+
+		const theme = resolveTheme(this.config)
+		const cssVars = generateCSSVariables(theme)
+
+		const styleEl = document.createElement('style')
+		styleEl.id = 'cms-theme-vars'
+		styleEl.textContent = `:host { ${cssVars} }`
+		this.shadowRoot.insertBefore(styleEl, this.shadowRoot.firstChild)
+	}
+
+	private setupKeyboardShortcuts(): void {
+		document.addEventListener('keydown', (ev) => {
+			// Cmd+Shift+E: Toggle CMS visibility
+			const combo = (ev.metaKey || ev.ctrlKey) && ev.shiftKey && ev.key.toLowerCase() === 'e'
+			if (combo) {
+				ev.preventDefault()
+				this.toggleVisibility()
+				return
+			}
+
+			// Undo/Redo only when editing
+			if (!signals.isEditing.value) return
+			if (!(ev.metaKey || ev.ctrlKey)) return
+
+			const key = ev.key.toLowerCase()
+
+			// Cmd+Shift+Z: Redo
+			if (key === 'z' && ev.shiftKey) {
+				ev.preventDefault()
+				performRedo()
+				return
+			}
+
+			// Cmd+Z: Undo
+			if (key === 'z' && !ev.shiftKey) {
+				ev.preventDefault()
+				performUndo()
+				return
+			}
+		})
+	}
+
+	private toggleVisibility(): void {
+		if (!this.appRoot) return
+
+		const isHidden = this.appRoot.style.display === 'none'
+		this.appRoot.style.display = isHidden ? 'block' : 'none'
+
+		// Use signals.showToast for consistency
+		signals.showToast(isHidden ? 'CMS editing enabled' : 'CMS editing disabled', 'info')
+	}
+}
+
+// Auto-initialize when DOM is ready
+if (typeof window !== 'undefined') {
+	const initEditor = () => {
+		const editor = new CmsEditor()
+		editor.init()
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', initEditor)
+	} else {
+		initEditor()
+	}
+}
+
+export { CmsEditor }

package/src/editor/lib/cn.ts

@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(...inputs))

package/src/editor/manifest.ts

@@ -0,0 +1,25 @@
+import type { CmsManifest, ComponentDefinition, ComponentInstance, ManifestEntry } from './types'
+
+type GetManifestEntry = (manifest: CmsManifest, id: string) => ManifestEntry | undefined
+export const getManifestEntry: GetManifestEntry = (manifest, id) => manifest.entries[id]
+
+type HasManifestEntry = (manifest: CmsManifest, id: string) => boolean
+export const hasManifestEntry: HasManifestEntry = (manifest, id) => id in manifest.entries
+
+type GetComponentInstances = (manifest: CmsManifest) => Record<string, ComponentInstance>
+export const getComponentInstances: GetComponentInstances = manifest => manifest.components ?? {}
+
+type GetComponentInstance = (manifest: CmsManifest, id: string) => ComponentInstance | undefined
+export const getComponentInstance: GetComponentInstance = (manifest, id) => manifest.components?.[id]
+
+type GetComponentDefinitions = (manifest: CmsManifest) => Record<string, ComponentDefinition>
+export const getComponentDefinitions: GetComponentDefinitions = manifest => manifest.componentDefinitions ?? {}
+
+type GetComponentDefinition = (manifest: CmsManifest, name: string) => ComponentDefinition | undefined
+export const getComponentDefinition: GetComponentDefinition = (manifest, name) => getComponentDefinitions(manifest)[name]
+
+type GetManifestEntryCount = (manifest: CmsManifest) => number
+export const getManifestEntryCount: GetManifestEntryCount = (manifest: CmsManifest) => Object.keys(manifest.entries).length
+
+type GetAvailableComponentNames = (manifest: CmsManifest) => string[]
+export const getAvailableComponentNames: GetAvailableComponentNames = manifest => Object.keys(getComponentDefinitions(manifest))