@nuasite/cms 0.9.3 → 0.11.0

package/package.json

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

package/src/editor/components/fields.tsx

@@ -110,6 +110,54 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 	)
 }
 
+// ============================================================================
+// Color Field (color picker + hex text input)
+// ============================================================================
+
+export interface ColorFieldProps {
+	label: string
+	value: string | undefined
+	placeholder?: string
+	onChange: (value: string) => void
+	isDirty?: boolean
+	onReset?: () => void
+}
+
+export function ColorField({ label, value, placeholder, onChange, isDirty, onReset }: ColorFieldProps) {
+	const colorValue = value || '#000000'
+	// Validate hex for the native picker (must be #rrggbb)
+	const isValidHex = /^#[0-9a-fA-F]{6}$/.test(colorValue)
+	const pickerValue = isValidHex ? colorValue : '#000000'
+
+	return (
+		<div class="space-y-1.5">
+			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
+			<div class="flex gap-2">
+				<input
+					type="color"
+					value={pickerValue}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					class="w-10 h-[38px] p-0.5 bg-white/10 border border-white/20 rounded-cms-sm cursor-pointer"
+					data-cms-ui
+				/>
+				<input
+					type="text"
+					value={value ?? ''}
+					placeholder={placeholder ?? '#000000'}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					class={cn(
+						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+						isDirty
+							? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
+							: 'border-white/20 focus:border-white/40 focus:ring-white/10',
+					)}
+					data-cms-ui
+				/>
+			</div>
+		</div>
+	)
+}
+
 // ============================================================================
 // Select Field (native select)
 // ============================================================================

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

@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { Z_INDEX } from '../constants'
+import { usePositionTracking } from '../hooks/utils'
+import { getComponentInstance } from '../manifest'
+import * as signals from '../signals'
+
+/**
+ * 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() {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const shadowRootRef = useRef<ShadowRoot | null>(null)
+	const overlayRef = useRef<HTMLDivElement | null>(null)
+	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
+
+	// 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(() => {
+		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;
+					pointer-events: none;
+					z-index: ${Z_INDEX.SELECTION};
+				}
+
+				.selection-overlay {
+					position: fixed;
+					border: 2px solid #DFFF40;
+					border-radius: 16px;
+					box-sizing: border-box;
+					background: rgba(223, 255, 64, 0.03);
+					box-shadow: 0 0 0 1px rgba(223, 255, 64, 0.15);
+					transition: opacity 150ms ease;
+					pointer-events: none;
+				}
+
+				.selection-overlay.hidden {
+					opacity: 0;
+				}
+
+				.selection-label {
+					position: fixed;
+					padding: 5px 8px 5px 12px;
+					border-radius: 9999px;
+					font-size: 11px;
+					font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+					font-weight: 600;
+					white-space: nowrap;
+					background: #DFFF40;
+					color: #1A1A1A;
+					display: none;
+					align-items: center;
+					gap: 6px;
+					pointer-events: auto;
+					z-index: ${Z_INDEX.MODAL};
+					box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+				}
+
+				.deselect-btn {
+					width: 18px;
+					height: 18px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: rgba(0,0,0,0.1);
+					border: none;
+					border-radius: 50%;
+					cursor: pointer;
+					padding: 0;
+					color: #1A1A1A;
+					font-size: 10px;
+					line-height: 1;
+					transition: background 150ms ease;
+				}
+
+				.deselect-btn:hover {
+					background: rgba(0,0,0,0.25);
+				}
+			`
+
+			overlayRef.current = document.createElement('div')
+			overlayRef.current.className = 'selection-overlay hidden'
+
+			labelRef.current = document.createElement('div')
+			labelRef.current.className = 'selection-label'
+
+			shadowRootRef.current.appendChild(style)
+			shadowRootRef.current.appendChild(overlayRef.current)
+			shadowRootRef.current.appendChild(labelRef.current)
+		}
+	}, [])
+
+	// Handle deselection
+	const handleDeselect = useCallback(() => {
+		if (signals.selectModeElement.value) {
+			signals.setSelectModeElement(null)
+		} else {
+			signals.setCurrentComponentId(null)
+			signals.setBlockEditorOpen(false)
+		}
+	}, [])
+
+	// Track position on scroll/resize
+	const handlePositionChange = useCallback((rect: DOMRect | null) => {
+		if (!overlayRef.current || !labelRef.current) return
+
+		if (!rect) {
+			overlayRef.current.className = 'selection-overlay hidden'
+			labelRef.current.style.display = 'none'
+			return
+		}
+
+		overlayRef.current.className = 'selection-overlay'
+		overlayRef.current.style.left = `${rect.left - 6}px`
+		overlayRef.current.style.top = `${rect.top - 6}px`
+		overlayRef.current.style.width = `${rect.width + 12}px`
+		overlayRef.current.style.height = `${rect.height + 12}px`
+
+		// Position label above the element
+		const labelTop = Math.max(8, rect.top - 32)
+		const labelLeft = Math.max(8, rect.left)
+
+		// Hide label if element is out of viewport
+		if (rect.bottom < 0 || rect.top > window.innerHeight) {
+			labelRef.current.style.display = 'none'
+		} else {
+			labelRef.current.style.display = 'flex'
+			labelRef.current.style.top = `${labelTop}px`
+			labelRef.current.style.left = `${labelLeft}px`
+		}
+	}, [])
+
+	usePositionTracking(element, handlePositionChange, visible)
+
+	// Update content and initial position when selection changes
+	useEffect(() => {
+		if (!overlayRef.current || !labelRef.current) return
+
+		if (!visible || !element) {
+			overlayRef.current.className = 'selection-overlay hidden'
+			labelRef.current.style.display = 'none'
+			return
+		}
+
+		// Build label content
+		labelRef.current.innerHTML = ''
+
+		const nameSpan = document.createElement('span')
+		nameSpan.textContent = label
+		labelRef.current.appendChild(nameSpan)
+
+		const deselectBtn = document.createElement('button')
+		deselectBtn.className = 'deselect-btn'
+		deselectBtn.innerHTML = '✕'
+		deselectBtn.title = 'Deselect'
+		deselectBtn.onclick = (e) => {
+			e.stopPropagation()
+			handleDeselect()
+		}
+		labelRef.current.appendChild(deselectBtn)
+
+		// Set initial position
+		const rect = element.getBoundingClientRect()
+		handlePositionChange(rect)
+	}, [visible, element, label, handleDeselect, handlePositionChange])
+
+	return (
+		<div
+			ref={containerRef}
+			data-cms-ui
+			style={{
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				width: 0,
+				height: 0,
+				pointerEvents: 'none',
+				zIndex: Z_INDEX.SELECTION,
+			}}
+		/>
+	)
+}

package/src/editor/components/seo-editor.tsx

@@ -15,7 +15,37 @@ import {
 	showToast,
 } from '../signals'
 import type { ChangePayload, PageSeoData, PendingSeoChange } from '../types'
-import { ImageField } from './fields'
+import { ColorField, ComboBoxField, ImageField } from './fields'
+
+const OG_TYPE_OPTIONS = [
+	{ value: 'website', label: 'Website', description: 'Default type for most pages' },
+	{ value: 'article', label: 'Article', description: 'Blog posts, news articles' },
+	{ value: 'profile', label: 'Profile', description: 'User or author profile page' },
+	{ value: 'video.movie', label: 'Video (Movie)', description: 'Movie or film' },
+	{ value: 'video.episode', label: 'Video (Episode)', description: 'TV show episode' },
+	{ value: 'video.other', label: 'Video (Other)', description: 'Other video content' },
+	{ value: 'music.song', label: 'Music (Song)', description: 'Individual song' },
+	{ value: 'music.album', label: 'Music (Album)', description: 'Music album' },
+	{ value: 'book', label: 'Book', description: 'Book or publication' },
+	{ value: 'product', label: 'Product', description: 'Product page' },
+]
+
+const TWITTER_CARD_OPTIONS = [
+	{ value: 'summary', label: 'Summary', description: 'Small square image with title and description' },
+	{ value: 'summary_large_image', label: 'Summary Large Image', description: 'Large banner image above title' },
+	{ value: 'app', label: 'App', description: 'Mobile app download card' },
+	{ value: 'player', label: 'Player', description: 'Embedded media player card' },
+]
+
+const ROBOTS_OPTIONS = [
+	{ value: 'index, follow', label: 'Index, Follow', description: 'Allow indexing and link following (default)' },
+	{ value: 'noindex, follow', label: 'No Index, Follow', description: 'Block indexing but follow links' },
+	{ value: 'index, nofollow', label: 'Index, No Follow', description: "Allow indexing but don't follow links" },
+	{ value: 'noindex, nofollow', label: 'No Index, No Follow', description: 'Block indexing and link following' },
+	{ value: 'noarchive', label: 'No Archive', description: 'Prevent cached copies in search results' },
+	{ value: 'nosnippet', label: 'No Snippet', description: "Don't show text snippets in results" },
+	{ value: 'max-image-preview:large', label: 'Max Image Preview: Large', description: 'Allow large image previews' },
+]
 
 interface SeoFieldProps {
 	label: string
@@ -63,6 +93,18 @@ function SeoField({ label, id, value, placeholder, multiline, onChange }: SeoFie
 	)
 }
 
+/** Helper to resolve pending value/dirty state for a SEO meta tag */
+function useSeoMeta(tag: { id?: string; content: string } | undefined) {
+	if (!tag) return { id: undefined, original: '', current: '', dirty: false }
+	const pending = tag.id ? getPendingSeoChange(tag.id) : undefined
+	return {
+		id: tag.id,
+		original: tag.content,
+		current: pending?.newValue ?? tag.content ?? '',
+		dirty: pending?.isDirty ?? false,
+	}
+}
+
 interface SeoSectionProps {
 	title: string
 	children: preact.ComponentChildren
@@ -130,6 +172,8 @@ export function SeoEditor() {
 			seoData.description,
 			seoData.keywords,
 			seoData.canonical,
+			seoData.themeColor,
+			seoData.robots,
 			...(seoData.openGraph ? Object.values(seoData.openGraph) : []),
 			...(seoData.twitterCard ? Object.values(seoData.twitterCard) : []),
 			...(seoData.favicons || []),
@@ -189,6 +233,14 @@ export function SeoEditor() {
 		}
 	}, [findSeoElementById])
 
+	// Resolve pending state for specialized fields
+	const ogImage = useSeoMeta(seoData?.openGraph?.image)
+	const ogType = useSeoMeta(seoData?.openGraph?.type)
+	const twitterCard = useSeoMeta(seoData?.twitterCard?.card)
+	const twitterImage = useSeoMeta(seoData?.twitterCard?.image)
+	const themeColor = useSeoMeta(seoData?.themeColor)
+	const robots = useSeoMeta(seoData?.robots)
+
 	if (!visible) return null
 
 	const hasSeoData = seoData && (
@@ -196,6 +248,8 @@ export function SeoEditor() {
 		|| seoData.description
 		|| seoData.keywords
 		|| seoData.canonical
+		|| seoData.themeColor
+		|| seoData.robots
 		|| seoData.openGraph
 		|| seoData.twitterCard
 		|| (seoData.favicons && seoData.favicons.length > 0)
@@ -292,6 +346,29 @@ export function SeoEditor() {
 											onChange={handleFieldChange}
 										/>
 									)}
+									{seoData.robots && (
+										<ComboBoxField
+											label="Robots"
+											value={robots.current}
+											placeholder="index, follow"
+											options={ROBOTS_OPTIONS}
+											onChange={(v) => {
+												if (robots.id) handleFieldChange(robots.id, v, robots.original)
+											}}
+											isDirty={robots.dirty}
+										/>
+									)}
+									{seoData.themeColor && (
+										<ColorField
+											label="Theme Color"
+											value={themeColor.current}
+											placeholder="#000000"
+											onChange={(v) => {
+												if (themeColor.id) handleFieldChange(themeColor.id, v, themeColor.original)
+											}}
+											isDirty={themeColor.dirty}
+										/>
+									)}
 								</SeoSection>
 
 								{/* Favicons */}
@@ -355,12 +432,19 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.openGraph.image && (
-											<SeoField
+											<ImageField
 												label="OG Image"
-												id={seoData.openGraph.image.id}
-												value={seoData.openGraph.image.content}
+												value={ogImage.current}
 												placeholder="/images/og-image.jpg"
-												onChange={handleFieldChange}
+												onChange={(v) => {
+													if (ogImage.id) handleFieldChange(ogImage.id, v, ogImage.original)
+												}}
+												onBrowse={() => {
+													openMediaLibraryWithCallback((url: string) => {
+														if (ogImage.id) handleFieldChange(ogImage.id, url, ogImage.original)
+													})
+												}}
+												isDirty={ogImage.dirty}
 											/>
 										)}
 										{seoData.openGraph.url && (
@@ -373,12 +457,15 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.openGraph.type && (
-											<SeoField
+											<ComboBoxField
 												label="OG Type"
-												id={seoData.openGraph.type.id}
-												value={seoData.openGraph.type.content}
+												value={ogType.current}
 												placeholder="website"
-												onChange={handleFieldChange}
+												options={OG_TYPE_OPTIONS}
+												onChange={(v) => {
+													if (ogType.id) handleFieldChange(ogType.id, v, ogType.original)
+												}}
+												isDirty={ogType.dirty}
 											/>
 										)}
 										{seoData.openGraph.siteName && (
@@ -397,12 +484,15 @@ export function SeoEditor() {
 								{seoData.twitterCard && Object.keys(seoData.twitterCard).length > 0 && (
 									<SeoSection title="Twitter Card">
 										{seoData.twitterCard.card && (
-											<SeoField
+											<ComboBoxField
 												label="Card Type"
-												id={seoData.twitterCard.card.id}
-												value={seoData.twitterCard.card.content}
+												value={twitterCard.current}
 												placeholder="summary_large_image"
-												onChange={handleFieldChange}
+												options={TWITTER_CARD_OPTIONS}
+												onChange={(v) => {
+													if (twitterCard.id) handleFieldChange(twitterCard.id, v, twitterCard.original)
+												}}
+												isDirty={twitterCard.dirty}
 											/>
 										)}
 										{seoData.twitterCard.title && (
@@ -425,12 +515,19 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.twitterCard.image && (
-											<SeoField
+											<ImageField
 												label="Twitter Image"
-												id={seoData.twitterCard.image.id}
-												value={seoData.twitterCard.image.content}
+												value={twitterImage.current}
 												placeholder="/images/twitter-image.jpg"
-												onChange={handleFieldChange}
+												onChange={(v) => {
+													if (twitterImage.id) handleFieldChange(twitterImage.id, v, twitterImage.original)
+												}}
+												onBrowse={() => {
+													openMediaLibraryWithCallback((url: string) => {
+														if (twitterImage.id) handleFieldChange(twitterImage.id, url, twitterImage.original)
+													})
+												}}
+												isDirty={twitterImage.dirty}
 											/>
 										)}
 										{seoData.twitterCard.site && (

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
 
@@ -291,33 +294,46 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 							</button>
 						)
 						: isSelectMode
-							? (
-								<button
-									onClick={(e) => {
-										e.stopPropagation()
-										callbacks.onSelectElement?.()
-									}}
-									class="w-10 h-10 flex items-center justify-center rounded-full text-white/60 hover:text-white hover:bg-white/10 transition-all duration-150 cursor-pointer"
-									title="Done selecting"
-								>
-									<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>
-							)
-							: (
+						? (
+							<button
+								onClick={(e) => {
+									e.stopPropagation()
+									callbacks.onSelectElement?.()
+								}}
+								class="w-10 h-10 flex items-center justify-center rounded-full text-white/60 hover:text-white hover:bg-white/10 transition-all duration-150 cursor-pointer"
+								title="Done selecting"
+							>
+								<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>
+						)
+						: (
 							<div class="relative">
 								<button
 									onClick={(e) => {
 										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/useBlockEditorHandlers.ts

@@ -53,10 +53,17 @@ export function useBlockEditorHandlers({
 	const [blockEditorCursor, setBlockEditorCursor] = useState<{ x: number; y: number } | null>(null)
 
 	/**
-	 * Open block editor for a component
+	 * Open block editor for a component, or deselect if already selected
 	 */
 	const handleComponentSelect = useCallback(
 		(componentId: string, cursor: { x: number; y: number }) => {
+			// Toggle: clicking the same component deselects it
+			if (signals.currentComponentId.value === componentId) {
+				signals.setCurrentComponentId(null)
+				signals.setBlockEditorOpen(false)
+				setBlockEditorCursor(null)
+				return
+			}
 			signals.setCurrentComponentId(componentId)
 			signals.setBlockEditorOpen(true)
 			setBlockEditorCursor(cursor)