@nuasite/cms 0.1.0

package/src/editor/components/collections-browser.tsx

@@ -0,0 +1,248 @@
+import { useMemo } from 'preact/hooks'
+import {
+	closeCollectionsBrowser,
+	isCollectionsBrowserOpen,
+	manifest,
+	openMarkdownEditorForNewPage,
+	selectBrowserCollection,
+	selectedBrowserCollection,
+} from '../signals'
+import { savePendingEntryNavigation } from '../storage'
+
+export function CollectionsBrowser() {
+	const visible = isCollectionsBrowserOpen.value
+	const selected = selectedBrowserCollection.value
+
+	const collectionDefinitions = manifest.value.collectionDefinitions ?? {}
+
+	const collections = useMemo(() => {
+		return Object.values(collectionDefinitions)
+	}, [collectionDefinitions])
+
+	if (!visible) return null
+
+	const handleClose = () => {
+		closeCollectionsBrowser()
+	}
+
+	const handleBackdropClick = (e: Event) => {
+		handleClose()
+	}
+
+	// View 2: Entry list for selected collection
+	if (selected) {
+		const def = collectionDefinitions[selected]
+		if (!def) return null
+
+		const entries = def.entries ?? []
+
+		const handleEntryClick = (slug: string, sourcePath: string, pathname?: string) => {
+			closeCollectionsBrowser()
+			// Navigate to the collection detail page to edit inline.
+			// Use known pathname or construct one from collection/slug.
+			const targetPath = pathname || `/${selected}/${slug}`
+			savePendingEntryNavigation({ collectionName: selected, slug, sourcePath, pathname: targetPath })
+			window.location.href = targetPath
+		}
+
+		const handleAddNew = () => {
+			closeCollectionsBrowser()
+			openMarkdownEditorForNewPage(selected, def)
+		}
+
+		return (
+			<div
+				class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+				onClick={handleBackdropClick}
+				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 flex flex-col max-h-[80vh]"
+					onClick={(e) => e.stopPropagation()}
+					data-cms-ui
+				>
+					{/* Header */}
+					<div class="flex items-center justify-between p-5 border-b border-white/10 shrink-0">
+						<div class="flex items-center gap-3">
+							<button
+								type="button"
+								onClick={() => selectBrowserCollection(null)}
+								class="text-white/50 hover:text-white p-1 hover:bg-white/10 rounded-full transition-colors"
+								data-cms-ui
+							>
+								<BackArrowIcon />
+							</button>
+							<h2 class="text-lg font-semibold text-white">{def.label}</h2>
+						</div>
+						<div class="flex items-center gap-2">
+							<button
+								type="button"
+								onClick={handleAddNew}
+								class="px-3 py-1.5 text-sm font-medium text-black bg-cms-primary hover:bg-cms-primary/80 rounded-cms-pill transition-colors"
+								data-cms-ui
+							>
+								+ Add New
+							</button>
+							<CloseButton onClick={handleClose} />
+						</div>
+					</div>
+
+					{/* Entry list */}
+					<div class="p-5 space-y-1 overflow-y-auto flex-1 min-h-0">
+						{entries.length === 0 && (
+							<div class="text-white/50 text-sm text-center py-8">
+								No entries yet. Click "Add New" to create one.
+							</div>
+						)}
+						{entries.map((entry) => (
+							<button
+								key={entry.slug}
+								type="button"
+								onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
+								class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-lg transition-colors text-left group"
+								data-cms-ui
+							>
+								<div class="flex-1 min-w-0">
+									<div class={`font-medium truncate ${entry.draft ? 'text-white/40' : 'text-white'}`}>
+										{entry.title || entry.slug}
+									</div>
+									{entry.title && <div class="text-white/30 text-xs truncate">{entry.slug}</div>}
+								</div>
+								{entry.draft && (
+									<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-amber-400/80 bg-amber-400/10 rounded-full border border-amber-400/20">
+										Draft
+									</span>
+								)}
+								<svg
+									class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
+									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>
+							</button>
+						))}
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	// View 1: Collection list
+	if (collections.length === 0) {
+		return (
+			<div
+				class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+				onClick={handleBackdropClick}
+				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">Collections</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 collections.
+						</p>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div
+			class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+			onClick={handleBackdropClick}
+			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 flex flex-col max-h-[80vh]"
+				onClick={(e) => e.stopPropagation()}
+				data-cms-ui
+			>
+				<div class="flex items-center justify-between p-5 border-b border-white/10 shrink-0">
+					<h2 class="text-lg font-semibold text-white">Collections</h2>
+					<CloseButton onClick={handleClose} />
+				</div>
+				<div class="p-5 space-y-2 overflow-y-auto flex-1 min-h-0">
+					{collections.map((col) => (
+						<button
+							key={col.name}
+							type="button"
+							onClick={() => selectBrowserCollection(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'}
+								</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>
+	)
+}
+
+function BackArrowIcon() {
+	return (
+		<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="M15 19l-7-7 7-7" />
+		</svg>
+	)
+}

package/src/editor/components/color-toolbar.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import {
+	applyColorChange,
+	COLOR_PREVIEW_MAP,
+	DEFAULT_TAILWIND_COLORS,
+	getColorPreview,
+	parseColorClass,
+	SPECIAL_COLORS,
+	STANDARD_SHADES,
+} from '../color-utils'
+import { CSS, Z_INDEX } from '../constants'
+import { cn } from '../lib/cn'
+import * as signals from '../signals'
+import type { Attribute, AvailableColors } from '../types'
+
+export interface ColorToolbarProps {
+	visible: boolean
+	rect: DOMRect | null
+	element: HTMLElement | null
+	availableColors: AvailableColors | undefined
+	currentClasses: Record<string, Attribute> | undefined
+	onColorChange?: (type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText', oldClass: string, newClass: string, previousClassName: string, previousStyleCssText: string) => void
+	onClose?: () => void
+}
+
+interface ColorSwatchProps {
+	colorName: string
+	shade?: string
+	isSelected: boolean
+	onClick: () => void
+}
+
+function ColorSwatch({ colorName, shade, isSelected, onClick }: ColorSwatchProps) {
+	const preview = getColorPreview(colorName, shade)
+	const isWhite = colorName === 'white' || (preview === '#ffffff')
+	const isTransparent = colorName === 'transparent'
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			title={shade ? `${colorName}-${shade}` : colorName}
+			class={cn(
+				'w-7 h-7 rounded-full border-2 transition-all cursor-pointer hover:scale-110',
+				isSelected ? 'border-cms-primary ring-2 ring-cms-primary/30 scale-110' : 'border-transparent',
+				isWhite && !isSelected && 'border-white/30',
+			)}
+			style={{
+				backgroundColor: isTransparent ? 'transparent' : preview,
+				backgroundImage: isTransparent
+					? 'linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%, #555), linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%, #555)'
+					: undefined,
+				backgroundSize: isTransparent ? '8px 8px' : undefined,
+				backgroundPosition: isTransparent ? '0 0, 4px 4px' : undefined,
+			}}
+		/>
+	)
+}
+
+interface ColorSectionProps {
+	title: string
+	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText'
+	currentClass: string | undefined
+	availableColors: AvailableColors | undefined
+	onSelect: (colorName: string, shade?: string) => void
+}
+
+function ColorSection({ title, type, currentClass, availableColors, onSelect }: ColorSectionProps) {
+	const [showAllShades, setShowAllShades] = useState(false)
+	const [selectedColor, setSelectedColor] = useState<string | undefined>()
+
+	// Parse current class to get selected color
+	const parsedCurrent = currentClass ? parseColorClass(currentClass) : undefined
+
+	// Get popular colors for quick selection
+	const popularColors = [
+		{ name: 'transparent', shade: undefined },
+		{ name: 'white', shade: undefined },
+		{ name: 'black', shade: undefined },
+		{ name: 'slate', shade: '500' },
+		{ name: 'gray', shade: '500' },
+		{ name: 'red', shade: '500' },
+		{ name: 'orange', shade: '500' },
+		{ name: 'amber', shade: '500' },
+		{ name: 'yellow', shade: '500' },
+		{ name: 'green', shade: '500' },
+		{ name: 'blue', shade: '500' },
+		{ name: 'indigo', shade: '500' },
+		{ name: 'purple', shade: '500' },
+	]
+
+	// Check if a color is selected
+	const isColorSelected = (colorName: string, shade?: string) => {
+		if (!parsedCurrent) return false
+		if (parsedCurrent.colorName !== colorName) return false
+		if (shade && parsedCurrent.shade !== shade) return false
+		if (!shade && parsedCurrent.shade) return false
+		return true
+	}
+
+	// Handle color selection
+	const handleSelect = (colorName: string, shade?: string) => {
+		onSelect(colorName, shade)
+	}
+
+	// Get all colors with shades
+	const allColors = availableColors?.colors
+		? availableColors.colors.map(color => ({
+			name: color.name,
+			shades: Object.keys(color.values).filter(s => s !== '').sort((a, b) => Number(a) - Number(b)), // Extract and sort shade keys
+			isCustom: color.isCustom ?? false,
+		}))
+		: [
+			...SPECIAL_COLORS.filter(c => c === 'white' || c === 'black').map(name => ({
+				name,
+				shades: [] as string[],
+				isCustom: false,
+			})),
+			...DEFAULT_TAILWIND_COLORS.map(name => ({
+				name,
+				shades: [...STANDARD_SHADES],
+				isCustom: false,
+			})),
+		]
+
+	return (
+		<div class="flex flex-col gap-3">
+			<div class="text-xs font-medium text-white/50 uppercase tracking-wide">{title}</div>
+
+			{/* Popular colors grid */}
+			<div class="flex flex-wrap gap-2">
+				{popularColors.map(({ name, shade }) => (
+					<ColorSwatch
+						key={`${name}-${shade || 'base'}`}
+						colorName={name}
+						shade={shade}
+						isSelected={isColorSelected(name, shade)}
+						onClick={() => handleSelect(name, shade)}
+					/>
+				))}
+			</div>
+
+			{/* Show more button */}
+			<button
+				type="button"
+				onClick={() => setShowAllShades(!showAllShades)}
+				class="text-xs text-white/50 hover:text-white cursor-pointer text-left font-medium"
+			>
+				{showAllShades ? 'Show less' : 'More colors...'}
+			</button>
+
+			{/* All colors with shades */}
+			{showAllShades && (
+				<div class="flex flex-col gap-3 max-h-48 overflow-y-auto pr-1">
+					{allColors.filter(c => c.shades.length > 0).map(color => (
+						<div key={color.name} class="flex flex-col gap-1.5">
+							<div class="text-xs text-white/40 capitalize">{color.name}</div>
+							<div class="flex flex-wrap gap-1.5">
+								{color.shades.map(shade => (
+									<ColorSwatch
+										key={`${color.name}-${shade}`}
+										colorName={color.name}
+										shade={shade}
+										isSelected={isColorSelected(color.name, shade)}
+										onClick={() => handleSelect(color.name, shade)}
+									/>
+								))}
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+export function ColorToolbar({
+	visible,
+	rect,
+	element,
+	availableColors,
+	currentClasses,
+	onColorChange,
+	onClose,
+}: ColorToolbarProps) {
+	// Handle color selection
+	const handleColorSelect = useCallback(
+		(type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText', colorName: string, shade?: string) => {
+			if (!element) return
+
+			// Capture className and inline styles before DOM mutation for undo support
+			const previousClassName = element.className
+			const previousStyleCssText = element.style.cssText
+
+			const result = applyColorChange(element, type, colorName, shade, availableColors)
+			if (result && onColorChange) {
+				onColorChange(type, result.oldClass, result.newClass, previousClassName, previousStyleCssText)
+			}
+		},
+		[element, onColorChange, availableColors],
+	)
+
+	// Close on click outside
+	useEffect(() => {
+		if (!visible) return
+
+		const handleClickOutside = (e: MouseEvent) => {
+			const target = e.target as HTMLElement
+			// Don't close if clicking on CMS UI elements
+			if (target.closest('[data-cms-ui]')) return
+			onClose?.()
+		}
+
+		// Delay adding listener to avoid immediate close
+		const timeout = setTimeout(() => {
+			document.addEventListener('click', handleClickOutside)
+		}, 100)
+
+		return () => {
+			clearTimeout(timeout)
+			document.removeEventListener('click', handleClickOutside)
+		}
+	}, [visible, onClose])
+
+	if (!visible || !rect) {
+		return null
+	}
+
+	return (
+		<div
+			data-cms-ui
+			onMouseDown={(e) => e.stopPropagation()}
+			onClick={(e) => e.stopPropagation()}
+			class="right-8 top-8 bottom-8 fixed text-xs w-2xs"
+			style={{
+				zIndex: Z_INDEX.MODAL,
+				fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+			}}
+		>
+			<div class="bg-cms-dark border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.4)] rounded-cms-lg p-4 flex flex-col gap-4 h-full overflow-y-auto">
+				{/* Header */}
+				<div class="flex items-center justify-between">
+					<span class="font-medium text-white">Element Colors</span>
+					<button
+						type="button"
+						onClick={onClose}
+						class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
+					>
+						<svg class="w-4 h-4" 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>
+
+				{/* Background color section */}
+				<ColorSection
+					title="Background"
+					type="bg"
+					currentClass={currentClasses?.bg?.value}
+					availableColors={availableColors}
+					onSelect={(colorName, shade) => handleColorSelect('bg', colorName, shade)}
+				/>
+
+				{/* Divider */}
+				<div class="h-px bg-white/10" />
+
+				{/* Text color section */}
+				<ColorSection
+					title="Text"
+					type="text"
+					currentClass={currentClasses?.text?.value}
+					availableColors={availableColors}
+					onSelect={(colorName, shade) => handleColorSelect('text', colorName, shade)}
+				/>
+
+				{/* Divider */}
+				<div class="h-px bg-white/10" />
+
+				{/* Border color section */}
+				<ColorSection
+					title="Border"
+					type="border"
+					currentClass={currentClasses?.border?.value}
+					availableColors={availableColors}
+					onSelect={(colorName, shade) => handleColorSelect('border', colorName, shade)}
+				/>
+
+				{/* Divider */}
+				<div class="h-px bg-white/10" />
+
+				{/* Hover Background color section */}
+				<ColorSection
+					title="Hover Background"
+					type="hoverBg"
+					currentClass={currentClasses?.hoverBg?.value}
+					availableColors={availableColors}
+					onSelect={(colorName, shade) => handleColorSelect('hoverBg', colorName, shade)}
+				/>
+
+				{/* Divider */}
+				<div class="h-px bg-white/10" />
+
+				{/* Hover Text color section */}
+				<ColorSection
+					title="Hover Text"
+					type="hoverText"
+					currentClass={currentClasses?.hoverText?.value}
+					availableColors={availableColors}
+					onSelect={(colorName, shade) => handleColorSelect('hoverText', colorName, shade)}
+				/>
+			</div>
+		</div>
+	)
+}

package/src/editor/components/confirm-dialog.tsx

@@ -0,0 +1,69 @@
+import { cn } from '../lib/cn'
+import { confirmDialogState } from '../signals'
+
+export function ConfirmDialog() {
+	const state = confirmDialogState.value
+
+	if (!state.isOpen) return null
+
+	const handleConfirm = () => {
+		state.onConfirm?.()
+	}
+
+	const handleCancel = () => {
+		state.onCancel?.()
+	}
+
+	const handleBackdropClick = () => {
+		handleCancel()
+	}
+
+	return (
+		<div
+			class="fixed inset-0 z-[2147483647] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+			onClick={handleBackdropClick}
+			data-cms-ui
+		>
+			<div
+				class="bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] max-w-sm w-full border border-white/10 mx-4"
+				onClick={(e) => e.stopPropagation()}
+				data-cms-ui
+			>
+				{/* Header */}
+				<div class="p-5 pb-3">
+					<h2 class="text-lg font-semibold text-white">{state.title}</h2>
+				</div>
+
+				{/* Body */}
+				<div class="px-5 pb-5">
+					<p class="text-sm text-white/70 leading-relaxed">{state.message}</p>
+				</div>
+
+				{/* Footer */}
+				<div class="flex items-center justify-end gap-3 p-5 pt-4 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+					<button
+						type="button"
+						onClick={handleCancel}
+						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 cursor-pointer"
+						data-cms-ui
+					>
+						{state.cancelLabel}
+					</button>
+					<button
+						type="button"
+						onClick={handleConfirm}
+						class={cn(
+							'px-5 py-2.5 rounded-cms-pill text-sm font-medium transition-colors cursor-pointer',
+							state.variant === 'danger' && 'bg-cms-error text-white hover:bg-red-600',
+							state.variant === 'warning' && 'bg-amber-500 text-white hover:bg-amber-600',
+							state.variant === 'info' && 'bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover',
+						)}
+						data-cms-ui
+					>
+						{state.confirmLabel}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}