@nuasite/cms 0.18.1 → 0.19.0

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

@@ -1,5 +1,5 @@
 import { signal } from '@preact/signals'
-import { useMemo } from 'preact/hooks'
+import { useMemo, useState } from 'preact/hooks'
 import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
@@ -12,10 +12,14 @@ import {
 	selectedBrowserCollection,
 } from '../signals'
 import { savePendingEntryNavigation } from '../storage'
+import { ChevronRightIcon, CollectionIcon } from './create-page-modal'
+import { CloseButton, ModalBackdrop, ModalHeader } from './modal-shell'
 
 const deletingEntry = signal<string | null>(null)
 const confirmDeleteSlug = signal<string | null>(null)
 
+const EMPTY_ENTRIES: never[] = []
+
 export function CollectionsBrowser() {
 	const visible = isCollectionsBrowserOpen.value
 	const selected = selectedBrowserCollection.value
@@ -26,23 +30,27 @@ export function CollectionsBrowser() {
 		return Object.values(collectionDefinitions).sort((a, b) => a.label.localeCompare(b.label))
 	}, [collectionDefinitions])
 
+	const [search, setSearch] = useState('')
+	const selectedDef = selected ? collectionDefinitions[selected] : undefined
+	const entries = selectedDef?.entries ?? EMPTY_ENTRIES
+
+	const filteredEntries = useMemo(() => {
+		if (!search) return entries
+		const q = search.toLowerCase()
+		return entries.filter(e => (e.title || '').toLowerCase().includes(q) || e.slug.toLowerCase().includes(q))
+	}, [entries, search])
+
 	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]
+		const def = selectedDef
 		if (!def) return null
 
-		const entries = def.entries ?? []
-
 		const handleEntryClick = (slug: string, sourcePath: string, pathname?: string) => {
 			closeCollectionsBrowser()
 			if (pathname) {
@@ -99,228 +107,183 @@ export function CollectionsBrowser() {
 		}
 
 		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"
+			<ModalBackdrop onClose={handleClose} extraClass="flex flex-col max-h-[80vh]">
+				<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={() => {
+								setSearch('')
+								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>
+
+				{entries.length > 0 && (
+					<div class="px-5 pt-4 pb-2 shrink-0">
+						<div class="relative">
+							<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<circle cx="11" cy="11" r="8" />
+								<path stroke-linecap="round" stroke-width="2" d="m21 21-4.3-4.3" />
+							</svg>
+							<input
+								type="text"
+								placeholder="Search..."
+								value={search}
+								onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+								class="w-full pl-9 pr-3 py-2 text-sm text-white bg-white/5 border border-white/10 rounded-cms-lg placeholder:text-white/30 focus:outline-none focus:border-white/20"
 								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 class="text-white/30 text-xs mt-2">
+							{search
+								? `${filteredEntries.length} of ${entries.length}`
+								: `${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`}
 						</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) => (
-							<div key={entry.slug} class="relative" data-cms-ui>
-								{confirmDeleteSlug.value === entry.slug
-									? (
-										<div class="flex items-center gap-2 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-cms-lg" data-cms-ui>
-											<div class="flex-1 min-w-0 text-sm text-white/70">
-												Delete "{entry.title || entry.slug}"?
-											</div>
-											<button
-												type="button"
-												onClick={() => handleConfirmDelete(entry.slug, entry.sourcePath)}
-												disabled={deletingEntry.value === entry.slug}
-												class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-cms-pill transition-colors disabled:opacity-50"
-												data-cms-ui
-											>
-												{deletingEntry.value === entry.slug ? 'Deleting...' : 'Delete'}
-											</button>
-											<button
-												type="button"
-												onClick={handleCancelDelete}
-												class="px-3 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/10 hover:bg-white/20 rounded-cms-pill transition-colors"
-												data-cms-ui
-											>
-												Cancel
-											</button>
+				<div class="px-5 pb-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>
+					)}
+					{search && filteredEntries.length === 0 && entries.length > 0 && (
+						<div class="text-white/50 text-sm text-center py-8">
+							No matches for "{search}"
+						</div>
+					)}
+					{filteredEntries.map((entry) => (
+						<div key={entry.slug} class="relative" data-cms-ui>
+							{confirmDeleteSlug.value === entry.slug
+								? (
+									<div class="flex items-center gap-2 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-cms-lg" data-cms-ui>
+										<div class="flex-1 min-w-0 text-sm text-white/70">
+											Delete "{entry.title || entry.slug}"?
 										</div>
-									)
-									: (
 										<button
 											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"
+											onClick={() => handleConfirmDelete(entry.slug, entry.sourcePath)}
+											disabled={deletingEntry.value === entry.slug}
+											class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-cms-pill transition-colors disabled:opacity-50"
+											data-cms-ui
+										>
+											{deletingEntry.value === entry.slug ? 'Deleting...' : 'Delete'}
+										</button>
+										<button
+											type="button"
+											onClick={handleCancelDelete}
+											class="px-3 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/10 hover:bg-white/20 rounded-cms-pill transition-colors"
 											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>}
+											Cancel
+										</button>
+									</div>
+								)
+								: (
+									<button
+										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.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>
-											)}
-											<button
-												type="button"
-												onClick={(e) => handleDeleteClick(e, entry.slug)}
-												class="shrink-0 p-1 text-white/0 group-hover:text-white/30 hover:!text-red-400 rounded transition-colors"
-												title="Delete entry"
-												data-cms-ui
-											>
-												<TrashIcon />
-											</button>
-											<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>
+											{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>
+										)}
+										<button
+											type="button"
+											onClick={(e) => handleDeleteClick(e, entry.slug)}
+											class="shrink-0 p-1 text-white/0 group-hover:text-white/30 hover:!text-red-400 rounded transition-colors"
+											title="Delete entry"
+											data-cms-ui
+										>
+											<TrashIcon />
 										</button>
-									)}
-							</div>
-						))}
-					</div>
+										<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>
+			</ModalBackdrop>
 		)
 	}
 
-	// View 1: Collection list
+	// Empty state
 	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>
+			<ModalBackdrop onClose={handleClose}>
+				<ModalHeader title="Collections" onClose={handleClose} />
+				<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>
+			</ModalBackdrop>
 		)
 	}
 
+	// Collection list
 	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>
+		<ModalBackdrop onClose={handleClose} extraClass="flex flex-col max-h-[80vh]">
+			<ModalHeader title="Collections" onClose={handleClose} />
+			<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>
-							<ChevronRightIcon />
-						</button>
-					))}
-				</div>
+						</div>
+						<ChevronRightIcon />
+					</button>
+				))}
 			</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>
+		</ModalBackdrop>
 	)
 }
 

package/src/editor/components/component-card.tsx

@@ -0,0 +1,49 @@
+import type { ComponentDefinition } from '../types'
+
+export function getDefaultProps(definition: ComponentDefinition): Record<string, any> {
+	const defaultProps: Record<string, any> = {}
+	for (const prop of definition.props) {
+		if (prop.defaultValue !== undefined) {
+			defaultProps[prop.name] = prop.defaultValue
+		} else if (prop.required) {
+			defaultProps[prop.name] = ''
+		}
+	}
+	return defaultProps
+}
+
+export function ComponentCard({ def, onClick }: { def: ComponentDefinition; onClick: () => void }) {
+	return (
+		<button
+			onClick={onClick}
+			class="p-4 bg-white/5 border border-white/10 rounded-cms-md cursor-pointer text-left transition-all hover:border-cms-primary/50 hover:bg-white/10 group"
+		>
+			{def.previewUrl && (
+				<div class="mb-3 rounded overflow-hidden bg-white h-30 relative">
+					<ComponentPreviewIframe previewUrl={def.previewUrl} previewWidth={def.previewWidth} />
+				</div>
+			)}
+			<div class="font-medium text-white">{def.name}</div>
+			{def.description && <div class="text-xs text-white/50 mt-1">{def.description}</div>}
+			<div class="text-[11px] text-white/40 mt-2 font-mono">
+				{def.props.length} props
+				{def.slots && def.slots.length > 0 && ` · ${def.slots.length} slots`}
+			</div>
+		</button>
+	)
+}
+
+function ComponentPreviewIframe({ previewUrl, previewWidth }: { previewUrl: string; previewWidth?: number }) {
+	const pw = previewWidth ?? 1280
+	const scale = 320 / pw
+	return (
+		<iframe
+			src={previewUrl}
+			class="border-none pointer-events-none"
+			style={{ width: `${pw}px`, height: `${Math.round(120 / scale)}px`, transform: `scale(${scale})`, transformOrigin: 'top left' }}
+			sandbox="allow-same-origin"
+			loading="lazy"
+			tabIndex={-1}
+		/>
+	)
+}

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

@@ -1,5 +1,6 @@
 import { cn } from '../lib/cn'
 import { confirmDialogState } from '../signals'
+import { ModalBackdrop } from './modal-shell'
 
 export function ConfirmDialog() {
 	const state = confirmDialogState.value
@@ -14,56 +15,42 @@ export function ConfirmDialog() {
 		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>
+		<ModalBackdrop onClose={handleCancel} maxWidth="max-w-sm" extraClass="mx-4">
+			{/* 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>
+			{/* 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>
+			{/* 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>
+		</ModalBackdrop>
 	)
 }