@nuasite/cms 0.18.1 → 0.19.1

package/src/editor/components/frontmatter-fields.tsx

@@ -1,7 +1,36 @@
-import { useState } from 'preact/hooks'
-import { markdownEditorState, openMediaLibraryWithCallback, updateMarkdownFrontmatter } from '../signals'
+import type { ComponentChildren } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { renameMarkdownPage } from '../markdown-api'
+import {
+	config,
+	manifest,
+	markdownEditorState,
+	openMediaLibraryWithCallback,
+	showToast,
+	updateMarkdownFrontmatter,
+	updateMarkdownPageMeta,
+} from '../signals'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
-import { ComboBoxField, ImageField, NumberField, TextField, ToggleField } from './fields'
+import { ComboBoxField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
+import { groupFields } from './frontmatter-sidebar'
+
+function isArrayOfObjects(value: unknown[]): value is Record<string, unknown>[] {
+	return value.length > 0 && typeof value[0] === 'object' && value[0] !== null
+}
+
+function FieldGroupHeader({ group, children }: { group: string | null; children: ComponentChildren }) {
+	return (
+		<>
+			{group && (
+				<div class="col-span-2 pt-2" data-cms-ui>
+					<h4 class="text-xs uppercase tracking-wider text-white/40 font-medium">{group}</h4>
+					<div class="border-t border-white/10 mt-1.5" />
+				</div>
+			)}
+			{children}
+		</>
+	)
+}
 
 // ============================================================================
 // Generic Frontmatter Field (auto-detect by value type)
@@ -18,11 +47,7 @@ export function FrontmatterField({
 	value,
 	onChange,
 }: FrontmatterFieldProps) {
-	// Format field key as label (e.g., "featuredImage" -> "Featured Image")
-	const label = fieldKey
-		.replace(/([A-Z])/g, ' $1')
-		.replace(/^./, (str) => str.toUpperCase())
-		.trim()
+	const label = formatFieldLabel(fieldKey)
 
 	// Detect field type based on value
 	const isBoolean = typeof value === 'boolean'
@@ -64,14 +89,26 @@ export function FrontmatterField({
 		)
 	}
 
-	// Array field (e.g., categories) - comma-separated input
+	// Array field (e.g., categories)
 	if (isArray) {
+		const items = value as unknown[]
+		if (isArrayOfObjects(items)) {
+			return (
+				<ArrayOfObjectsField
+					label={label}
+					items={items as Record<string, unknown>[]}
+					onChange={onChange}
+				/>
+			)
+		}
+		// Array of primitives — comma-separated input
+		const stringItems = items.map(v => typeof v === 'string' ? v : String(v))
 		return (
 			<div class="flex flex-col gap-1 col-span-2" data-cms-ui>
 				<label class="text-xs text-white/60 font-medium">{label}</label>
 				<input
 					type="text"
-					value={(value as unknown[]).join(', ')}
+					value={stringItems.join(', ')}
 					onChange={(e) => {
 						const inputValue = (e.target as HTMLInputElement).value
 						const arrayValue = inputValue
@@ -141,14 +178,19 @@ export function FrontmatterField({
 interface CreateModeFrontmatterProps {
 	page: MarkdownPageEntry
 	collectionDefinition: CollectionDefinition
+	fields?: FieldDefinition[]
 	onSlugManualEdit: () => void
 }
 
 export function CreateModeFrontmatter({
 	page,
 	collectionDefinition,
+	fields,
 	onSlugManualEdit,
 }: CreateModeFrontmatterProps) {
+	const displayFields = fields ?? collectionDefinition.fields
+	const groups = groupFields(displayFields)
+
 	return (
 		<div class="space-y-4">
 			{/* Slug field */}
@@ -181,13 +223,17 @@ export function CreateModeFrontmatter({
 
 			{/* Schema fields */}
 			<div class="grid grid-cols-2 gap-4">
-				{collectionDefinition.fields.map((field) => (
-					<SchemaFrontmatterField
-						key={field.name}
-						field={field}
-						value={page.frontmatter[field.name]}
-						onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
-					/>
+				{groups.map((group, gi) => (
+					<FieldGroupHeader key={gi} group={group.group}>
+						{group.fields.map((field) => (
+							<SchemaFrontmatterField
+								key={field.name}
+								field={field}
+								value={page.frontmatter[field.name]}
+								onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
+							/>
+						))}
+					</FieldGroupHeader>
 				))}
 			</div>
 		</div>
@@ -198,15 +244,81 @@ export function CreateModeFrontmatter({
 // Edit Mode Frontmatter — uses schema fields when available, falls back to generic
 // ============================================================================
 
+function SlugField({ page }: { page: MarkdownPageEntry }) {
+	const [localSlug, setLocalSlug] = useState(page.slug)
+	const [isRenaming, setIsRenaming] = useState(false)
+	const isDirty = localSlug !== page.slug
+
+	useEffect(() => {
+		setLocalSlug(page.slug)
+	}, [page.slug])
+
+	const handleRename = async () => {
+		if (!isDirty || isRenaming) return
+		const trimmed = localSlug.trim()
+		if (!trimmed) {
+			setLocalSlug(page.slug)
+			return
+		}
+		setIsRenaming(true)
+		try {
+			const result = await renameMarkdownPage(config.value, page.filePath, trimmed)
+			if (result.success && result.newSlug && result.newFilePath) {
+				updateMarkdownPageMeta({ slug: result.newSlug, filePath: result.newFilePath })
+				setLocalSlug(result.newSlug)
+				showToast('Slug updated', 'success')
+			} else {
+				showToast(result.error || 'Failed to rename', 'error')
+				setLocalSlug(page.slug)
+			}
+		} catch {
+			showToast('Failed to rename', 'error')
+			setLocalSlug(page.slug)
+		} finally {
+			setIsRenaming(false)
+		}
+	}
+
+	return (
+		<div>
+			<label class="block text-xs font-medium text-white/70 mb-1.5">
+				URL Slug
+			</label>
+			<div class="flex gap-2">
+				<input
+					type="text"
+					value={localSlug}
+					onInput={(e) => setLocalSlug((e.target as HTMLInputElement).value)}
+					onBlur={handleRename}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter') {
+							e.preventDefault()
+							;(e.target as HTMLInputElement).blur()
+						}
+					}}
+					class={`flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white focus:outline-none focus:border-white/40 ${
+						isDirty ? 'border-cms-primary' : 'border-white/20'
+					}`}
+					disabled={isRenaming}
+					data-cms-ui
+				/>
+			</div>
+		</div>
+	)
+}
+
 interface EditModeFrontmatterProps {
 	page: MarkdownPageEntry
 	collectionDefinition?: CollectionDefinition
+	fields?: FieldDefinition[]
 }
 
 export function EditModeFrontmatter({
 	page,
 	collectionDefinition,
+	fields,
 }: EditModeFrontmatterProps) {
+	const displayFields = fields ?? collectionDefinition?.fields ?? []
 	// Collect schema field names for filtering extra keys
 	const schemaFieldNames = new Set(
 		collectionDefinition?.fields.map((f) => f.name) ?? [],
@@ -215,34 +327,27 @@ export function EditModeFrontmatter({
 	const extraKeys = Object.keys(page.frontmatter).filter(
 		(key) => !schemaFieldNames.has(key),
 	)
+	const groups = groupFields(displayFields)
 
 	return (
 		<div class="space-y-4">
-			{/* Slug field (always disabled in edit mode) */}
-			<div>
-				<label class="block text-xs font-medium text-white/70 mb-1.5">
-					URL Slug
-				</label>
-				<input
-					type="text"
-					value={page.slug}
-					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white/50 focus:outline-none cursor-not-allowed"
-					disabled
-					data-cms-ui
-				/>
-			</div>
+			{/* Slug field */}
+			<SlugField page={page} />
 			<div class="grid grid-cols-2 gap-4">
 				{collectionDefinition
 					? (
 						<>
-							{/* Schema-aware fields */}
-							{collectionDefinition.fields.map((field) => (
-								<SchemaFrontmatterField
-									key={field.name}
-									field={field}
-									value={page.frontmatter[field.name]}
-									onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
-								/>
+							{groups.map((group, gi) => (
+								<FieldGroupHeader key={gi} group={group.group}>
+									{group.fields.map((field) => (
+										<SchemaFrontmatterField
+											key={field.name}
+											field={field}
+											value={page.frontmatter[field.name]}
+											onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
+										/>
+									))}
+								</FieldGroupHeader>
 							))}
 							{/* Extra fields not in schema */}
 							{extraKeys.map((key) => (
@@ -271,6 +376,20 @@ export function EditModeFrontmatter({
 	)
 }
 
+// ============================================================================
+// Collection Reference Helpers
+// ============================================================================
+
+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,
+	}))
+}
+
 // ============================================================================
 // Schema-aware Frontmatter Field
 // ============================================================================
@@ -376,41 +495,63 @@ export function SchemaFrontmatterField({
 				/>
 			)
 
+		case 'reference': {
+			const refOptions = getCollectionEntryOptions(field.collection)
+			return (
+				<ComboBoxField
+					label={label}
+					value={(value as string) ?? ''}
+					placeholder={`Select ${label.toLowerCase()}...`}
+					options={refOptions}
+					onChange={(v) => onChange(v)}
+				/>
+			)
+		}
+
 		case 'array': {
 			const items = Array.isArray(value) ? value : []
+			// Array of references — show multiselect with collection entries
+			if (field.itemType === 'reference' && field.collection) {
+				const refEntries = getCollectionEntryOptions(field.collection)
+				return (
+					<div class="col-span-2" data-cms-ui>
+						<MultiSelectField
+							label={label}
+							selected={items.map(String)}
+							options={refEntries}
+							onChange={(v) => onChange(v)}
+						/>
+					</div>
+				)
+			}
 			if (field.options && field.options.length > 0) {
 				return (
-					<div class="col-span-2 space-y-1.5" data-cms-ui>
-						<label class="text-xs text-white/60 font-medium">{label}</label>
-						<div class="space-y-2">
-							{field.options.map((opt) => (
-								<label key={opt} class="flex items-center gap-2 cursor-pointer">
-									<input
-										type="checkbox"
-										checked={items.includes(opt)}
-										onChange={(e) => {
-											if ((e.target as HTMLInputElement).checked) {
-												onChange([...items, opt])
-											} else {
-												onChange(items.filter((i: unknown) => i !== opt))
-											}
-										}}
-										class="rounded border-white/20 bg-white/10 text-cms-primary focus:ring-cms-primary"
-										data-cms-ui
-									/>
-									<span class="text-sm text-white/80">{opt}</span>
-								</label>
-							))}
-						</div>
+					<div class="col-span-2" data-cms-ui>
+						<MultiSelectField
+							label={label}
+							selected={items.map(String)}
+							options={field.options}
+							onChange={(v) => onChange(v)}
+						/>
 					</div>
 				)
 			}
+			if (isArrayOfObjects(items)) {
+				return (
+					<ArrayOfObjectsField
+						label={label}
+						items={items as Record<string, unknown>[]}
+						onChange={onChange}
+						itemFields={field.fields}
+					/>
+				)
+			}
 			return (
 				<div class="col-span-2 flex flex-col gap-1" data-cms-ui>
 					<label class="text-xs text-white/60 font-medium">{label}</label>
 					<input
 						type="text"
-						value={(items as unknown[]).join(', ')}
+						value={items.map(v => typeof v === 'string' ? v : String(v)).join(', ')}
 						onInput={(e) => {
 							const inputValue = (e.target as HTMLInputElement).value
 							const arrayValue = inputValue
@@ -469,6 +610,85 @@ export function SchemaFrontmatterField({
 	}
 }
 
+// ============================================================================
+// Array of Objects Field — renders each item as nested key/value fields
+// ============================================================================
+
+interface ArrayOfObjectsFieldProps {
+	label: string
+	items: Record<string, unknown>[]
+	onChange: (value: unknown) => void
+	itemFields?: FieldDefinition[]
+}
+
+function ArrayOfObjectsField({ label, items, onChange, itemFields }: ArrayOfObjectsFieldProps) {
+	const handleItemChange = (index: number, newItem: Record<string, unknown>) => {
+		const updated = [...items]
+		updated[index] = newItem
+		onChange(updated)
+	}
+
+	const handleRemoveItem = (index: number) => {
+		onChange(items.filter((_, i) => i !== index))
+	}
+
+	const handleAddItem = () => {
+		// Use the first item's keys as template
+		const template = items.length > 0
+			? Object.fromEntries(Object.keys(items[0]!).map(k => [k, '']))
+			: { name: '' }
+		onChange([...items, template])
+	}
+
+	return (
+		<div class="flex flex-col gap-2 col-span-2" data-cms-ui>
+			<label class="text-xs text-white/60 font-medium">{label}</label>
+			<div class="space-y-2">
+				{items.map((item, index) => (
+					<div key={index} class="flex items-start gap-2 pl-3 border-l-2 border-white/10">
+						<div class="flex-1 min-w-0 space-y-1.5">
+							{itemFields
+								? itemFields.map((subField) => (
+									<SchemaFrontmatterField
+										key={subField.name}
+										field={subField}
+										value={item[subField.name]}
+										onChange={(newValue) => handleItemChange(index, { ...item, [subField.name]: newValue })}
+									/>
+								))
+								: Object.entries(item).map(([key, val]) => (
+									<FrontmatterField
+										key={key}
+										fieldKey={key}
+										value={val}
+										onChange={(newValue) => handleItemChange(index, { ...item, [key]: newValue })}
+									/>
+								))}
+						</div>
+						<button
+							type="button"
+							onClick={() => handleRemoveItem(index)}
+							class="p-1 mt-1 text-white/30 hover:text-red-400 transition-colors shrink-0"
+							title="Remove item"
+							data-cms-ui
+						>
+							<RemoveIcon />
+						</button>
+					</div>
+				))}
+			</div>
+			<button
+				type="button"
+				onClick={handleAddItem}
+				class="self-start px-3 py-1 text-xs text-white/50 hover:text-white border border-white/10 hover:border-white/20 rounded-cms-sm transition-colors"
+				data-cms-ui
+			>
+				+ Add {label.toLowerCase()}
+			</button>
+		</div>
+	)
+}
+
 // ============================================================================
 // Object Fields — renders nested fields with add/remove key support
 // ============================================================================
@@ -623,12 +843,3 @@ export function getPlaceholder(field: FieldDefinition): string {
 			return `Enter ${formatFieldLabel(field.name).toLowerCase()}...`
 	}
 }
-
-export function slugify(text: string): string {
-	return text
-		.toLowerCase()
-		.trim()
-		.replace(/[^\w\s-]/g, '')
-		.replace(/[\s_-]+/g, '-')
-		.replace(/^-+|-+$/g, '')
-}

package/src/editor/components/frontmatter-sidebar.tsx

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { cn } from '../lib/cn'
+import { updateMarkdownFrontmatter } from '../signals'
+import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
+import { formatFieldLabel, FrontmatterField, SchemaFrontmatterField } from './frontmatter-fields'
+
+// ============================================================================
+// Field Utilities
+// ============================================================================
+
+export function partitionFields(fields: FieldDefinition[]): { sidebar: FieldDefinition[]; header: FieldDefinition[] } {
+	const sidebar: FieldDefinition[] = []
+	const header: FieldDefinition[] = []
+	for (const field of fields) {
+		if (field.hidden) continue
+		if (field.position === 'sidebar') {
+			sidebar.push(field)
+		} else {
+			header.push(field)
+		}
+	}
+	return { sidebar, header }
+}
+
+export interface FieldGroup {
+	group: string | null
+	fields: FieldDefinition[]
+}
+
+export function groupFields(fields: FieldDefinition[]): FieldGroup[] {
+	const groups: FieldGroup[] = []
+	const groupMap = new Map<string | null, FieldDefinition[]>()
+	const order: (string | null)[] = []
+
+	for (const field of fields) {
+		const key = field.group ?? null
+		if (!groupMap.has(key)) {
+			groupMap.set(key, [])
+			order.push(key)
+		}
+		groupMap.get(key)!.push(field)
+	}
+
+	for (const key of order) {
+		groups.push({ group: key, fields: groupMap.get(key)! })
+	}
+
+	return groups
+}
+
+// ============================================================================
+// Group Header
+// ============================================================================
+
+function GroupHeader({ label }: { label: string }) {
+	return (
+		<div class="pt-3 pb-1" data-cms-ui>
+			<h4 class="text-xs uppercase tracking-wider text-white/40 font-medium">{label}</h4>
+			<div class="border-t border-white/10 mt-1.5" />
+		</div>
+	)
+}
+
+// ============================================================================
+// Sidebar Component
+// ============================================================================
+
+const SIDEBAR_STORAGE_KEY = 'nuacms-sidebar'
+const MIN_WIDTH = 200
+const MAX_WIDTH = 400
+const DEFAULT_WIDTH = 280
+
+function loadSidebarState(): { width: number; collapsed: boolean } {
+	try {
+		const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+		if (stored) return JSON.parse(stored)
+	} catch {}
+	return { width: DEFAULT_WIDTH, collapsed: false }
+}
+
+function saveSidebarState(state: { width: number; collapsed: boolean }) {
+	try {
+		localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(state))
+	} catch (e) {
+		console.warn('[CMS] Failed to save sidebar state:', e)
+	}
+}
+
+interface FrontmatterSidebarProps {
+	fields: FieldDefinition[]
+	page: MarkdownPageEntry
+	collectionDefinition?: CollectionDefinition
+}
+
+export function FrontmatterSidebar({ fields, page, collectionDefinition }: FrontmatterSidebarProps) {
+	const [state, setState] = useState(loadSidebarState)
+	const isResizing = useRef(false)
+	const startX = useRef(0)
+	const startWidth = useRef(0)
+
+	const { width, collapsed } = state
+
+	const updateState = useCallback((update: Partial<typeof state>, persist = true) => {
+		setState((prev) => {
+			const next = { ...prev, ...update }
+			if (persist) saveSidebarState(next)
+			return next
+		})
+	}, [])
+
+	const handleMouseDown = useCallback((e: MouseEvent) => {
+		e.preventDefault()
+		isResizing.current = true
+		startX.current = e.clientX
+		startWidth.current = width
+		document.body.style.cursor = 'col-resize'
+		document.body.style.userSelect = 'none'
+	}, [width])
+
+	useEffect(() => {
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isResizing.current) return
+			const delta = startX.current - e.clientX
+			const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth.current + delta))
+			updateState({ width: newWidth }, false)
+		}
+
+		const handleMouseUp = () => {
+			if (!isResizing.current) return
+			isResizing.current = false
+			document.body.style.cursor = ''
+			document.body.style.userSelect = ''
+			setState((current) => {
+				saveSidebarState(current)
+				return current
+			})
+		}
+
+		document.addEventListener('mousemove', handleMouseMove)
+		document.addEventListener('mouseup', handleMouseUp)
+		return () => {
+			document.removeEventListener('mousemove', handleMouseMove)
+			document.removeEventListener('mouseup', handleMouseUp)
+		}
+	}, [updateState])
+
+	if (fields.length === 0) return null
+
+	const groups = groupFields(fields)
+	const schemaFieldNames = new Set(collectionDefinition?.fields.map((f) => f.name) ?? [])
+
+	return (
+		<div
+			class={cn('relative shrink-0 border-l border-white/10 bg-white/5 flex', collapsed && 'w-8')}
+			style={collapsed ? undefined : { width: `${width}px` }}
+			data-cms-ui
+		>
+			{/* Drag handle */}
+			{!collapsed && (
+				<div
+					class="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-cms-primary/30 transition-colors z-10"
+					onMouseDown={handleMouseDown}
+				/>
+			)}
+
+			{/* Collapse toggle */}
+			<button
+				type="button"
+				onClick={() => updateState({ collapsed: !collapsed })}
+				class="absolute top-2 left-0 -translate-x-1/2 z-20 w-5 h-5 rounded-full bg-cms-dark border border-white/20 flex items-center justify-center text-white/50 hover:text-white hover:border-white/40 transition-colors"
+				title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+				data-cms-ui
+			>
+				<svg
+					class={cn('w-3 h-3 transition-transform', collapsed && 'rotate-180')}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m15 18-6-6 6-6" />
+				</svg>
+			</button>
+
+			{/* Sidebar content */}
+			{!collapsed && (
+				<div class="flex-1 overflow-y-auto p-4 space-y-3 min-w-0">
+					{groups.map((group, gi) => (
+						<div key={gi} data-cms-ui>
+							{group.group && <GroupHeader label={group.group} />}
+							<div class="space-y-3">
+								{group.fields.map((field) => {
+									const isSchema = schemaFieldNames.has(field.name)
+									return (
+										<div key={field.name} data-cms-ui>
+											{isSchema
+												? (
+													<SchemaFrontmatterField
+														field={field}
+														value={page.frontmatter[field.name]}
+														onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
+													/>
+												)
+												: (
+													<FrontmatterField
+														fieldKey={field.name}
+														value={page.frontmatter[field.name]}
+														onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
+													/>
+												)}
+										</div>
+									)
+								})}
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}