@nuasite/cms 0.18.1 → 0.19.0

package/src/editor/components/modal-shell.tsx

@@ -0,0 +1,87 @@
+import type { ComponentChildren } from 'preact'
+import { Z_INDEX } from '../constants'
+
+export function ModalBackdrop({ onClose, maxWidth = 'max-w-lg', extraClass, children }: {
+	onClose: () => void
+	maxWidth?: string
+	extraClass?: string
+	children: ComponentChildren
+}) {
+	return (
+		<div
+			style={{ zIndex: Z_INDEX.MODAL }}
+			class="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+			onClick={onClose}
+			data-cms-ui
+		>
+			<div
+				class={`bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] ${maxWidth} w-full border border-white/10 ${extraClass ?? ''}`}
+				onClick={(e) => e.stopPropagation()}
+				data-cms-ui
+			>
+				{children}
+			</div>
+		</div>
+	)
+}
+
+export function ModalHeader({ title, onBack, onClose }: {
+	title: string
+	onBack?: () => void
+	onClose: () => void
+}) {
+	return (
+		<div class="flex items-center gap-3 p-5 border-b border-white/10">
+			{onBack && (
+				<button
+					type="button"
+					onClick={onBack}
+					class="text-white/50 hover:text-white p-1.5 hover:bg-white/10 rounded-full transition-colors cursor-pointer"
+					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="M15 19l-7-7 7-7" />
+					</svg>
+				</button>
+			)}
+			<h2 class="text-lg font-semibold text-white flex-1">{title}</h2>
+			<CloseButton onClick={onClose} />
+		</div>
+	)
+}
+
+export function ModalFooter({ children }: { children: ComponentChildren }) {
+	return (
+		<div class="flex items-center justify-end gap-2 p-5 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+			{children}
+		</div>
+	)
+}
+
+export 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 cursor-pointer"
+			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>
+	)
+}
+
+export function CancelButton({ onClick, label = 'Cancel' }: { onClick: () => void; label?: string }) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			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
+		>
+			{label}
+		</button>
+	)
+}

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

@@ -0,0 +1,52 @@
+import type { ComponentProp } from '../types'
+
+export interface PropEditorProps {
+	prop: ComponentProp
+	value: string
+	onChange: (value: string) => void
+}
+
+export function PropEditor({ prop, value, onChange }: PropEditorProps) {
+	const isBoolean = prop.type === 'boolean'
+	const isNumber = prop.type === 'number'
+
+	return (
+		<div class="mb-4">
+			<label class="block text-[13px] font-medium text-white mb-1.5">
+				{prop.name}
+				{prop.required && <span class="text-cms-error ml-1">*</span>}
+			</label>
+			{prop.description && (
+				<div class="text-[11px] text-white/50 mb-1.5">
+					{prop.description}
+				</div>
+			)}
+			{isBoolean
+				? (
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input
+							type="checkbox"
+							checked={value === 'true'}
+							onChange={(e) => onChange((e.target as HTMLInputElement).checked ? 'true' : 'false')}
+							class="accent-cms-primary w-5 h-5 rounded"
+						/>
+						<span class="text-[13px] text-white">
+							{value === 'true' ? 'Enabled' : 'Disabled'}
+						</span>
+					</label>
+				)
+				: (
+					<input
+						type={isNumber ? 'number' : 'text'}
+						value={value}
+						onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+						placeholder={prop.defaultValue || `Enter ${prop.name}...`}
+						class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+					/>
+				)}
+			<div class="text-[10px] text-white/40 mt-1.5 font-mono">
+				{prop.type}
+			</div>
+		</div>
+	)
+}

package/src/editor/components/redirect-countdown.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from '../constants'
 import { redirectCountdown, stopRedirectCountdown } from '../signals'
 
 export function RedirectCountdown() {
@@ -8,7 +9,8 @@ export function RedirectCountdown() {
 
 	return (
 		<div
-			class="fixed bottom-6 left-1/2 -translate-x-1/2 z-2147483647 flex items-center gap-3 px-5 py-3 bg-cms-dark/95 border border-white/15 rounded-cms-pill shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-md"
+			style={{ zIndex: Z_INDEX.MODAL }}
+			class="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 px-5 py-3 bg-cms-dark/95 border border-white/15 rounded-cms-pill shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-md"
 			data-cms-ui
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}

package/src/editor/components/redirects-manager.tsx

@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { addRedirect, deleteRedirect, getRedirects, updateRedirect } from '../markdown-api'
+import {
+	closeRedirectsManager,
+	config,
+	isRedirectsManagerOpen,
+	redirectsManagerState,
+	setRedirectsManagerEditing,
+	setRedirectsManagerRules,
+	showToast,
+} from '../signals'
+import type { RedirectRule } from '../types'
+import { ModalBackdrop, ModalHeader } from './modal-shell'
+
+export function RedirectsManager() {
+	const visible = isRedirectsManagerOpen.value
+	const state = redirectsManagerState.value
+
+	useLoadRedirects()
+
+	if (!visible) return null
+
+	return (
+		<ModalBackdrop onClose={() => closeRedirectsManager()} maxWidth="max-w-2xl" extraClass="max-h-[80vh] flex flex-col">
+			<ModalHeader title="Redirects" onClose={() => closeRedirectsManager()} />
+
+			<div class="flex-1 overflow-y-auto p-5 space-y-3">
+				{state.isLoading && <div class="text-center py-8 text-white/50">Loading redirects...</div>}
+
+				{!state.isLoading && state.rules.length === 0 && (
+					<div class="text-center py-8">
+						<p class="text-white/50 mb-2">No redirects configured</p>
+						<p class="text-white/30 text-sm">Redirects are stored in src/_redirects</p>
+					</div>
+				)}
+
+				{!state.isLoading && state.rules.map((rule) => (
+					<RedirectRow
+						key={rule.lineIndex}
+						rule={rule}
+						isEditing={state.editingIndex === rule.lineIndex}
+					/>
+				))}
+			</div>
+
+			<div class="shrink-0 p-5 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+				<AddRedirectForm />
+			</div>
+		</ModalBackdrop>
+	)
+}
+
+function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boolean }) {
+	const [source, setSource] = useState(rule.source)
+	const [destination, setDestination] = useState(rule.destination)
+	const [statusCode, setStatusCode] = useState(String(rule.statusCode))
+	const [isSaving, setIsSaving] = useState(false)
+
+	const handleSave = useCallback(async () => {
+		const cfg = config.value
+		if (!cfg) return
+
+		setIsSaving(true)
+		const result = await updateRedirect(cfg, {
+			lineIndex: rule.lineIndex,
+			source,
+			destination,
+			statusCode: parseInt(statusCode, 10) || 307,
+		})
+		setIsSaving(false)
+
+		if (result.success) {
+			setRedirectsManagerEditing(null)
+			await refreshRedirects()
+			showToast('Redirect updated', 'success')
+		} else {
+			showToast(result.error || 'Failed to update', 'error')
+		}
+	}, [rule.lineIndex, source, destination, statusCode])
+
+	const handleDelete = useCallback(async () => {
+		const cfg = config.value
+		if (!cfg) return
+
+		const result = await deleteRedirect(cfg, { lineIndex: rule.lineIndex })
+		if (result.success) {
+			await refreshRedirects()
+			showToast('Redirect deleted', 'success')
+		} else {
+			showToast(result.error || 'Failed to delete', 'error')
+		}
+	}, [rule.lineIndex])
+
+	if (isEditing) {
+		return (
+			<div class="flex flex-col gap-2 p-3 bg-white/5 rounded-cms-lg border border-white/10">
+				<div class="flex gap-2">
+					<input
+						type="text"
+						value={source}
+						onInput={(e) => setSource((e.target as HTMLInputElement).value)}
+						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm focus:outline-none focus:border-cms-primary/50"
+						placeholder="/old-path"
+						data-cms-ui
+					/>
+					<span class="text-white/30 self-center">→</span>
+					<input
+						type="text"
+						value={destination}
+						onInput={(e) => setDestination((e.target as HTMLInputElement).value)}
+						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm focus:outline-none focus:border-cms-primary/50"
+						placeholder="/new-path"
+						data-cms-ui
+					/>
+					<input
+						type="text"
+						value={statusCode}
+						onInput={(e) => setStatusCode((e.target as HTMLInputElement).value)}
+						class="w-16 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm text-center focus:outline-none focus:border-cms-primary/50"
+						placeholder="307"
+						data-cms-ui
+					/>
+				</div>
+				<div class="flex justify-end gap-2">
+					<button
+						type="button"
+						onClick={() => setRedirectsManagerEditing(null)}
+						class="px-3 py-1.5 text-xs text-white/60 hover:text-white hover:bg-white/10 rounded-cms-md transition-colors cursor-pointer"
+						data-cms-ui
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={handleSave}
+						disabled={isSaving}
+						class="px-3 py-1.5 text-xs font-medium bg-cms-primary text-cms-primary-text rounded-cms-md hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40"
+						data-cms-ui
+					>
+						{isSaving ? 'Saving...' : 'Save'}
+					</button>
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div class="flex items-center gap-3 p-3 bg-white/5 rounded-cms-lg border border-white/10 group">
+			<div class="flex-1 min-w-0 flex items-center gap-2 text-sm">
+				<span class="text-white/80 truncate">{rule.source}</span>
+				<span class="text-white/30 shrink-0">→</span>
+				<span class="text-white/60 truncate">{rule.destination}</span>
+			</div>
+			<span class="text-xs text-white/30 tabular-nums shrink-0">{rule.statusCode}</span>
+			<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+				<button
+					type="button"
+					onClick={() => setRedirectsManagerEditing(rule.lineIndex)}
+					class="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded transition-colors cursor-pointer"
+					title="Edit"
+					data-cms-ui
+				>
+					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+						/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					onClick={handleDelete}
+					class="p-1.5 text-white/40 hover:text-red-400 hover:bg-white/10 rounded transition-colors cursor-pointer"
+					title="Delete"
+					data-cms-ui
+				>
+					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	)
+}
+
+function AddRedirectForm() {
+	const [source, setSource] = useState('')
+	const [destination, setDestination] = useState('')
+	const [isAdding, setIsAdding] = useState(false)
+
+	const handleAdd = useCallback(async () => {
+		const cfg = config.value
+		if (!cfg || !source.trim() || !destination.trim()) return
+
+		setIsAdding(true)
+		const result = await addRedirect(cfg, {
+			source: source.trim(),
+			destination: destination.trim(),
+			statusCode: 307,
+		})
+		setIsAdding(false)
+
+		if (result.success) {
+			setSource('')
+			setDestination('')
+			await refreshRedirects()
+			showToast('Redirect added', 'success')
+		} else {
+			showToast(result.error || 'Failed to add redirect', 'error')
+		}
+	}, [source, destination])
+
+	return (
+		<div class="flex gap-2 items-end">
+			<div class="flex-1 space-y-1">
+				<label class="text-xs text-white/40" data-cms-ui>From</label>
+				<input
+					type="text"
+					value={source}
+					onInput={(e) => setSource((e.target as HTMLInputElement).value)}
+					placeholder="/old-path"
+					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+					data-cms-ui
+				/>
+			</div>
+			<div class="flex-1 space-y-1">
+				<label class="text-xs text-white/40" data-cms-ui>To</label>
+				<input
+					type="text"
+					value={destination}
+					onInput={(e) => setDestination((e.target as HTMLInputElement).value)}
+					placeholder="/new-path"
+					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+					data-cms-ui
+				/>
+			</div>
+			<button
+				type="button"
+				onClick={handleAdd}
+				disabled={isAdding || !source.trim() || !destination.trim()}
+				class="px-4 py-1.5 text-sm font-medium bg-cms-primary text-cms-primary-text rounded-cms-md hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+				data-cms-ui
+			>
+				{isAdding ? 'Adding...' : 'Add'}
+			</button>
+		</div>
+	)
+}
+
+async function refreshRedirects(): Promise<void> {
+	const cfg = config.value
+	if (!cfg) return
+	const result = await getRedirects(cfg)
+	setRedirectsManagerRules(result.rules)
+}
+
+export function useLoadRedirects() {
+	const isOpen = isRedirectsManagerOpen.value
+	useEffect(() => {
+		if (isOpen) refreshRedirects()
+	}, [isOpen])
+}

package/src/editor/components/reference-picker.tsx

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { clampPanelPosition, Z_INDEX } from '../constants'
+import { updateMarkdownPage } from '../markdown-api'
+import { closeReferencePicker, config, manifest, referencePickerState, showToast } from '../signals'
+
+const PANEL_WIDTH = 320
+
+function getCollectionEntryOptions(collectionName?: string): Array<{ value: string; label: string }> {
+	if (!collectionName) return []
+	const def = manifest.value.collectionDefinitions?.[collectionName]
+	if (!def?.entries) return []
+	return def.entries.map(e => ({
+		value: e.slug,
+		label: e.title ?? e.slug,
+	}))
+}
+
+export function ReferencePicker() {
+	const state = referencePickerState.value
+	const panelRef = useRef<HTMLDivElement>(null)
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [query, setQuery] = useState('')
+	const [saving, setSaving] = useState(false)
+
+	const options = useMemo(
+		() => getCollectionEntryOptions(state.collection ?? undefined),
+		[state.collection],
+	)
+
+	// Reset search when picker opens
+	useEffect(() => {
+		if (state.isOpen) {
+			setQuery('')
+			setSaving(false)
+			setTimeout(() => inputRef.current?.focus(), 50)
+		}
+	}, [state.isOpen])
+
+	const filtered = useMemo(() => {
+		if (!query) return options
+		const q = query.toLowerCase()
+		return options.filter(o => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
+	}, [query, options])
+
+	const currentLabel = useMemo(() => {
+		if (state.isArray) return null
+		return options.find(o => o.value === state.currentValue)?.label ?? state.currentValue
+	}, [options, state.currentValue, state.isArray])
+
+	const updateReference = useCallback(async (value: string | string[]) => {
+		if (!state.fieldName || !state.ownerPath) return
+		setSaving(true)
+		try {
+			const result = await updateMarkdownPage(config.value, {
+				filePath: state.ownerPath,
+				frontmatter: { [state.fieldName]: value },
+			})
+			if (result.success) {
+				showToast('Reference updated', 'success')
+			} else {
+				showToast(result.error || 'Failed to update reference', 'error')
+			}
+		} catch {
+			showToast('Failed to update reference', 'error')
+		}
+		closeReferencePicker()
+	}, [state.fieldName, state.ownerPath])
+
+	const handleSelect = useCallback((newValue: string) => updateReference(newValue), [updateReference])
+
+	const handleArrayToggle = useCallback((toggledValue: string) => {
+		const current = new Set(state.currentValues)
+		if (current.has(toggledValue)) {
+			current.delete(toggledValue)
+		} else {
+			current.add(toggledValue)
+		}
+		updateReference([...current])
+	}, [state.currentValues, updateReference])
+
+	// Close on outside click or Escape
+	useEffect(() => {
+		if (!state.isOpen) return
+		const onMouseDown = (e: MouseEvent) => {
+			if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+				closeReferencePicker()
+			}
+		}
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') closeReferencePicker()
+		}
+		document.addEventListener('mousedown', onMouseDown)
+		document.addEventListener('keydown', onKeyDown)
+		return () => {
+			document.removeEventListener('mousedown', onMouseDown)
+			document.removeEventListener('keydown', onKeyDown)
+		}
+	}, [state.isOpen])
+
+	if (!state.isOpen || !state.cursorPos) return null
+
+	const position = clampPanelPosition(state.cursorPos, PANEL_WIDTH)
+	const fieldLabel = (state.fieldName ?? 'reference')
+		.replace(/([A-Z])/g, ' $1')
+		.replace(/^./, s => s.toUpperCase())
+		.trim()
+
+	const selectedSet = useMemo(
+		() => new Set(state.isArray ? state.currentValues : (state.currentValue ? [state.currentValue] : [])),
+		[state.isArray, state.currentValues, state.currentValue],
+	)
+
+	return (
+		<div
+			ref={panelRef}
+			data-cms-ui
+			style={{ zIndex: Z_INDEX.MODAL, top: position.top, left: position.left, maxHeight: position.maxHeight }}
+			class="fixed w-80 bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 font-sans overflow-hidden flex flex-col"
+			onMouseDown={(e: MouseEvent) => e.stopPropagation()}
+			onClick={(e: MouseEvent) => e.stopPropagation()}
+		>
+			{saving
+				? (
+					<div class="flex items-center justify-center gap-2 px-4 py-6">
+						<span class="inline-block w-4 h-4 border-2 border-white/80 border-t-transparent rounded-full animate-spin" />
+						<span class="text-sm text-white/80">Updating...</span>
+					</div>
+				)
+				: (
+					<>
+						{/* Header */}
+						<div class="px-4 pt-3 pb-2">
+							<div class="text-xs text-white/50 font-medium mb-1">{fieldLabel}</div>
+							{currentLabel && !state.isArray && (
+								<div class="text-sm text-white/70 mb-2">
+									Current: <span class="text-white">{currentLabel}</span>
+								</div>
+							)}
+							<input
+								ref={inputRef}
+								type="text"
+								value={query}
+								placeholder="Search..."
+								onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
+								autocomplete="off"
+								class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-colors"
+								data-cms-ui
+							/>
+						</div>
+
+						{/* Options list */}
+						<div class="overflow-y-auto max-h-64 px-2 pb-2">
+							{filtered.length === 0
+								? <div class="px-2 py-3 text-xs text-white/40 text-center">No options found</div>
+								: filtered.map(opt => {
+									const isSelected = selectedSet.has(opt.value)
+									return (
+										<button
+											key={opt.value}
+											type="button"
+											onMouseDown={(e) => {
+												e.preventDefault()
+												if (state.isArray) {
+													handleArrayToggle(opt.value)
+												} else {
+													handleSelect(opt.value)
+												}
+											}}
+											class={`w-full text-left px-3 py-2 text-sm rounded-cms-sm transition-colors cursor-pointer flex items-center gap-2 ${
+												isSelected
+													? 'bg-cms-primary/15 text-white'
+													: 'text-white/70 hover:bg-white/10 hover:text-white'
+											}`}
+											data-cms-ui
+										>
+											{state.isArray && (
+												<span
+													class={`w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors ${
+														isSelected ? 'bg-cms-primary border-cms-primary' : 'border-white/30 bg-white/5'
+													}`}
+												>
+													{isSelected && (
+														<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+															<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+														</svg>
+													)}
+												</span>
+											)}
+											<span class="truncate">{opt.label}</span>
+											{isSelected && !state.isArray && (
+												<svg class="w-4 h-4 ml-auto text-cms-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+												</svg>
+											)}
+										</button>
+									)
+								})}
+						</div>
+					</>
+				)}
+		</div>
+	)
+}