@nuasite/cms 0.39.2 → 0.41.0

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

@@ -97,7 +97,7 @@ export function CollectionsBrowser() {
 
 		return (
 			<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 justify-between px-5 py-4 border-b border-white/10 shrink-0">
 					<div class="flex items-center gap-3">
 						<button
 							type="button"
@@ -122,8 +122,8 @@ export function CollectionsBrowser() {
 
 				{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">
+						<label class="flex items-center gap-2 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-lg focus-within:border-white/40">
+							<svg class="w-4 h-4 text-white/30 shrink-0" 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>
@@ -132,11 +132,11 @@ export function CollectionsBrowser() {
 								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"
+								class="flex-1 bg-transparent text-sm text-white placeholder:text-white/30 focus:outline-none"
 								data-cms-ui
 							/>
-						</div>
-						<div class="text-white/30 text-xs mt-2">
+						</label>
+						<div class="text-white/30 text-xs mt-2 ml-4">
 							{search
 								? `${filteredEntries.length} of ${entries.length}`
 								: `${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`}
@@ -186,7 +186,7 @@ export function CollectionsBrowser() {
 									<button
 										type="button"
 										onClick={() => handleEntryClick(entry.slug, entry.sourcePath)}
-										class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-lg transition-colors text-left group"
+										class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-md transition-colors text-left group"
 										data-cms-ui
 									>
 										<div class="flex-1 min-w-0">
@@ -210,7 +210,7 @@ export function CollectionsBrowser() {
 											<TrashIcon />
 										</button>
 										<svg
-											class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
+											class="w-4 h-4 text-white/20 group-hover:text-cms-primary shrink-0 transition-colors"
 											fill="none"
 											stroke="currentColor"
 											viewBox="0 0 24 24"
@@ -251,10 +251,10 @@ export function CollectionsBrowser() {
 						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"
+						class="group 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 cursor-pointer"
 						data-cms-ui
 					>
-						<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-md flex items-center justify-center">
+						<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-sm flex items-center justify-center">
 							<CollectionIcon />
 						</div>
 						<div class="flex-1 min-w-0">

package/src/editor/components/create-page-modal.tsx

@@ -75,10 +75,10 @@ function ModeCard({ icon, title, description, onClick }: {
 		<button
 			type="button"
 			onClick={onClick}
-			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 cursor-pointer"
+			class="group 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 cursor-pointer"
 			data-cms-ui
 		>
-			<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-md flex items-center justify-center">
+			<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-sm flex items-center justify-center">
 				{icon}
 			</div>
 			<div class="flex-1 min-w-0">
@@ -222,25 +222,25 @@ function NewPageForm() {
 						onInput={(e) => form.handleTitleChange((e.target as HTMLInputElement).value)}
 						placeholder="My New Page"
 						required
-						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-white/40"
 						autoFocus
 						data-cms-ui
 					/>
 				</Field>
 
 				<Field label="URL Path" error={form.slugError} checking={form.slugChecking}>
-					<div class="flex items-center gap-1">
-						<span class="text-white/40 text-sm">/</span>
+					<label class="flex items-center gap-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md focus-within:border-white/40">
+						<span class="text-white/40 text-sm shrink-0">/</span>
 						<input
 							type="text"
 							value={form.slug}
 							onInput={(e) => form.handleSlugChange((e.target as HTMLInputElement).value)}
 							placeholder="my-new-page"
 							required
-							class="flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+							class="flex-1 bg-transparent text-white placeholder:text-white/30 focus:outline-none"
 							data-cms-ui
 						/>
-					</div>
+					</label>
 				</Field>
 
 				{layouts.length > 0 && (
@@ -248,7 +248,7 @@ function NewPageForm() {
 						<select
 							value={selectedLayout}
 							onChange={(e) => setSelectedLayout((e.target as HTMLSelectElement).value || undefined)}
-							class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white focus:outline-none focus:border-cms-primary/50"
+							class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white focus:outline-none focus:border-white/40"
 							data-cms-ui
 						>
 							{layouts.map((l) => <option key={l.path} value={l.path}>{l.name}</option>)}
@@ -325,7 +325,7 @@ function DuplicatePageForm() {
 							form.resetSlugManual()
 						}}
 						required
-						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white focus:outline-none focus:border-cms-primary/50"
+						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white focus:outline-none focus:border-white/40"
 						data-cms-ui
 					>
 						{pages.map((p) => (
@@ -342,24 +342,24 @@ function DuplicatePageForm() {
 						value={form.title}
 						onInput={(e) => form.handleTitleChange((e.target as HTMLInputElement).value)}
 						placeholder="Page title"
-						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+						class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-white/40"
 						data-cms-ui
 					/>
 				</Field>
 
 				<Field label="New URL Path" error={form.slugError} checking={form.slugChecking}>
-					<div class="flex items-center gap-1">
-						<span class="text-white/40 text-sm">/</span>
+					<label class="flex items-center gap-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md focus-within:border-white/40">
+						<span class="text-white/40 text-sm shrink-0">/</span>
 						<input
 							type="text"
 							value={form.slug}
 							onInput={(e) => form.handleSlugChange((e.target as HTMLInputElement).value)}
 							placeholder="new-page-slug"
 							required
-							class="flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+							class="flex-1 bg-transparent text-white placeholder:text-white/30 focus:outline-none"
 							data-cms-ui
 						/>
-					</div>
+					</label>
 				</Field>
 
 				<label class="flex items-center gap-2.5 cursor-pointer" data-cms-ui>
@@ -441,16 +441,16 @@ function CollectionPicker() {
 						key={col.name}
 						type="button"
 						onClick={() => handleSelectCollection(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 cursor-pointer"
+						class="group 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 cursor-pointer"
 						data-cms-ui
 					>
-						<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-md flex items-center justify-center">
+						<div class="shrink-0 w-10 h-10 bg-cms-primary/20 rounded-cms-sm 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'} &middot; {col.fields.length} fields
+								{col.entryCount} {col.entryCount === 1 ? 'entry' : 'entries'}
 							</div>
 						</div>
 						<ChevronRightIcon />
@@ -588,7 +588,7 @@ export function CollectionIcon() {
 
 export function ChevronRightIcon() {
 	return (
-		<svg class="w-5 h-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		<svg class="w-5 h-5 text-white/40 group-hover:text-cms-primary 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>
 	)

package/src/editor/components/delete-page-dialog.tsx

@@ -10,6 +10,7 @@ import {
 	setDeletingPage,
 	showToast,
 } from '../signals'
+import { STRINGS } from '../strings'
 import { CancelButton, ModalBackdrop, ModalFooter, ModalHeader } from './modal-shell'
 
 export function DeletePageDialog() {
@@ -35,10 +36,10 @@ export function DeletePageDialog() {
 
 		if (result.success) {
 			resetDeletePageState()
-			showToast('Page deleted', 'success')
+			showToast(STRINGS.page.deleted, 'success')
 			window.location.href = currentState.createRedirect && currentState.redirectTo ? currentState.redirectTo : '/'
 		} else {
-			showToast(result.error || 'Failed to delete page', 'error')
+			showToast(result.error || STRINGS.page.deleteFailed, 'error')
 		}
 	}, [])
 
@@ -75,7 +76,7 @@ export function DeletePageDialog() {
 								value={state.redirectTo}
 								onInput={(e) => setDeletePageRedirectTo((e.target as HTMLInputElement).value)}
 								placeholder="/"
-								class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+								class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-cms-md text-white placeholder:text-white/30 focus:outline-none focus:border-white/40"
 								data-cms-ui
 							/>
 						</div>

package/src/editor/components/field-utils.ts

@@ -0,0 +1,54 @@
+import type { FieldDefinition } from '../types'
+
+export function partitionFields(fields: FieldDefinition[]): { sidebar: FieldDefinition[]; header: FieldDefinition[] } {
+	const sidebar: FieldDefinition[] = []
+	const header: FieldDefinition[] = []
+	let toggleField: FieldDefinition | null = null
+	for (const field of fields) {
+		if (field.hidden) continue
+		if (field.role === 'publish-toggle' && field.position !== 'header') {
+			toggleField = field
+			continue
+		}
+		if (field.position === 'sidebar') {
+			sidebar.push(field)
+		} else {
+			header.push(field)
+		}
+	}
+	if (toggleField) {
+		const dateIdx = sidebar.findIndex((f) => f.role === 'publish-date')
+		if (dateIdx >= 0) {
+			sidebar.splice(dateIdx, 0, toggleField)
+		} else {
+			sidebar.unshift(toggleField)
+		}
+	}
+	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
+}