@nuasite/cms 0.39.1 → 0.40.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/build-processor.ts

@@ -382,7 +382,7 @@ async function processFile(
 		// The sourcePath from HTML attributes may point to a shared Image component
 		// rather than the file that actually uses the component with the src value
 		if (entry.imageMetadata?.src) {
-			const preferredLocation = entry.sourcePath
+			const preferredLocation = entry.sourcePath || entry.imageMetadata.srcOccurrence !== undefined
 				? {
 					file: entry.sourcePath,
 					line: entry.sourceLine,

package/src/collection-scanner.ts

@@ -50,6 +50,25 @@ const FREE_TEXT_FIELD_NAMES = new Set([
 	'caption',
 ])
 
+/** Normalized names (lowercased, underscores/hyphens stripped) that mark a field as the publish toggle. */
+const PUBLISH_TOGGLE_NAMES = new Set(['draft', 'isdraft', 'published', 'ispublished', 'unpublished'])
+
+/** Normalized names that mark a field as the publish/release date anchor. */
+const PUBLISH_DATE_NAMES = new Set([
+	'date',
+	'pubdate',
+	'publishdate',
+	'publisheddate',
+	'publishedate',
+	'publishedat',
+	'datepublished',
+])
+
+/** Normalize a field name for case- and separator-insensitive matching against the *_NAMES sets above. */
+function normalizeFieldName(name: string): string {
+	return name.toLowerCase().replace(/[_-]/g, '')
+}
+
 /**
  * Observed values for a single field across multiple files
  */
@@ -121,7 +140,7 @@ function assignFieldMetadata(
 ): void {
 	for (const field of fields) {
 		// Scanner defaults: well-known fields go to sidebar
-		if (SIDEBAR_FIELD_NAMES.has(field.name.toLowerCase()) || field.type === 'image' || field.type === 'boolean') {
+		if (SIDEBAR_FIELD_NAMES.has(normalizeFieldName(field.name)) || field.type === 'image' || field.type === 'boolean') {
 			field.position = 'sidebar'
 		} else {
 			field.position = 'header'
@@ -228,7 +247,7 @@ function mergeFieldObservations(observations: FieldObservation[]): FieldDefiniti
 		}
 
 		// For text fields, check if we should treat as select (limited unique values)
-		if (fieldType === 'text' && !FREE_TEXT_FIELD_NAMES.has(obs.name.toLowerCase())) {
+		if (fieldType === 'text' && !FREE_TEXT_FIELD_NAMES.has(normalizeFieldName(obs.name))) {
 			const uniqueValues = [...new Set(nonNullValues.map(v => String(v)))]
 			const uniqueRatio = uniqueValues.length / nonNullValues.length
 			// Only treat as select if unique values are limited AND not nearly all unique
@@ -583,6 +602,33 @@ function detectReferenceFieldsBySlugMatch(collections: Record<string, Collection
 	}
 }
 
+/**
+ * Tag fields with semantic roles so the editor UI can position them without
+ * matching on Astro-specific field names. Detection lives here — the layer
+ * that already knows it's parsing Astro content collections.
+ */
+function assignSemanticRoles(collections: Record<string, CollectionDefinition>): void {
+	for (const def of Object.values(collections)) {
+		let toggle: FieldDefinition | undefined
+		let dateByName: FieldDefinition | undefined
+		let dateByType: FieldDefinition | undefined
+		for (const field of def.fields) {
+			if (field.hidden || field.role) continue
+			const normalized = normalizeFieldName(field.name)
+			if (!toggle && field.type === 'boolean' && PUBLISH_TOGGLE_NAMES.has(normalized)) {
+				toggle = field
+			} else if (!dateByName && PUBLISH_DATE_NAMES.has(normalized)) {
+				dateByName = field
+			} else if (!dateByType && (field.type === 'date' || field.type === 'datetime')) {
+				dateByType = field
+			}
+		}
+		if (toggle) toggle.role = 'publish-toggle'
+		const date = dateByName ?? dateByType
+		if (date) date.role = 'publish-date'
+	}
+}
+
 /** Suffixes that indicate a field is a derived href/url/slug companion */
 const HREF_SUFFIXES = ['href', 'url', 'link', 'slug', 'path'] as const
 
@@ -749,6 +795,7 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 	applyParsedConfig(collections, parsed)
 	detectReferenceFields(collections, parsed)
 	detectDerivedHrefFields(collections)
+	assignSemanticRoles(collections)
 	applyCollectionOrderBy(collections, parsed)
 
 	return collections

package/src/dev-middleware.ts

@@ -598,7 +598,7 @@ export async function enhanceManifestInBackground(
 		for (const entry of Object.values(enhanced)) {
 			if (entry.sourceSnippet || entry.sourcePath) continue
 			if (entry.imageMetadata?.src) {
-				const preferredLocation = entry.sourcePath
+				const preferredLocation = entry.sourcePath || entry.imageMetadata.srcOccurrence !== undefined
 					? {
 						file: entry.sourcePath,
 						line: entry.sourceLine,

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

@@ -329,7 +329,6 @@ function AttributeField({ attrName, currentAttr, originalAttr, pages, onUpdate,
 				<ImageField
 					label={config.label}
 					value={currentValue || undefined}
-					placeholder={config.placeholder}
 					onChange={(v) => onUpdate(v)}
 					onBrowse={onOpenMediaLibrary}
 					isDirty={isDirty}

package/src/editor/components/bg-image-overlay.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
 import { isApplyingUndoRedo, recordChange } from '../history'
 import { cn } from '../lib/cn'
@@ -80,14 +80,14 @@ const REPEAT_OPTIONS = [
  * Shows a floating badge on hover and opens a right-side settings panel on click.
  */
 export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlayProps) {
-	const [panelOpen, setPanelOpen] = useState(false)
+	const panelOpen = signals.isBgImageOverlayOpen.value
 	// Capture target when panel opens so it stays stable when hover moves away
 	const panelTargetRef = useRef<{ cmsId: string; element: HTMLElement } | null>(null)
 
 	// Close panel when hovering a different bg-image element
 	useEffect(() => {
 		if (cmsId && panelTargetRef.current && cmsId !== panelTargetRef.current.cmsId) {
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		}
 	}, [cmsId])
@@ -99,7 +99,7 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 		const handleClickOutside = (e: MouseEvent) => {
 			const target = e.target as HTMLElement
 			if (target.closest('[data-cms-ui]')) return
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		}
 
@@ -117,16 +117,16 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 		e.preventDefault()
 		e.stopPropagation()
 		if (panelOpen) {
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		} else if (cmsId && element) {
-			setPanelOpen(true)
+			signals.isBgImageOverlayOpen.value = true
 			panelTargetRef.current = { cmsId, element }
 		}
 	}, [panelOpen, cmsId, element])
 
 	const handleClose = useCallback(() => {
-		setPanelOpen(false)
+		signals.isBgImageOverlayOpen.value = false
 		panelTargetRef.current = null
 	}, [])
 
@@ -243,7 +243,6 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 								<ImageField
 									label="Image URL"
 									value={currentUrl || undefined}
-									placeholder="/assets/image.png"
 									onChange={handleImageUrlChange}
 									onBrowse={handleBrowse}
 									isDirty={isImageDirty}

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

@@ -374,13 +374,13 @@ export function BlockEditor({
 									<div class="flex gap-2">
 										<button
 											onClick={() => handleStartInsert('before')}
-											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-sm cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
 										>
 											<span class="text-base">↑</span> {isArrayItem ? 'Add item before' : 'Insert before'}
 										</button>
 										<button
 											onClick={() => handleStartInsert('after')}
-											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-sm cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
 										>
 											<span class="text-base">↓</span> {isArrayItem ? 'Add item after' : 'Insert after'}
 										</button>
@@ -388,20 +388,20 @@ export function BlockEditor({
 									<div class="flex gap-2 justify-between">
 										<button
 											onClick={() => setMode('confirm-remove')}
-											class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
+											class="px-5 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 										>
 											{isArrayItem ? 'Remove item' : 'Remove'}
 										</button>
 										<div class="flex gap-2">
 											<button
 												onClick={onClose}
-												class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+												class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 											>
 												Cancel
 											</button>
 											<button
 												onClick={handleSave}
-												class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+												class="px-5 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
 											>
 												Save
 											</button>
@@ -413,7 +413,7 @@ export function BlockEditor({
 						: mode === 'confirm-remove'
 						? (
 							<div class="text-center p-5">
-								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-md mb-5 text-[13px] text-white">
+								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-sm mb-5 text-[13px] text-white">
 									{isArrayItem
 										? (
 											<>
@@ -429,7 +429,7 @@ export function BlockEditor({
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
 										onClick={handleBackToEdit}
-										class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Cancel
 									</button>
@@ -440,7 +440,7 @@ export function BlockEditor({
 												onClose()
 											}
 										}}
-										class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
+										class="px-5 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 									>
 										{isArrayItem ? 'Confirm remove item' : 'Confirm remove'}
 									</button>
@@ -452,7 +452,7 @@ export function BlockEditor({
 							<div class="p-5">
 								{/* New component props */}
 								<div class="mb-5">
-									<div class="px-4 py-3 bg-white/10 rounded-cms-md mb-4 text-[13px] text-white">
+									<div class="px-4 py-3 bg-white/10 rounded-cms-sm mb-4 text-[13px] text-white">
 										{isArrayItem
 											? (
 												<>
@@ -478,13 +478,13 @@ export function BlockEditor({
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
 										onClick={() => isArrayItem ? handleBackToEdit() : setMode('insert-picker')}
-										class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Back
 									</button>
 									<button
 										onClick={handleConfirmInsert}
-										class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+										class="px-5 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
 									>
 										{isArrayItem ? 'Add item' : 'Insert component'}
 									</button>
@@ -510,7 +510,7 @@ export function BlockEditor({
 								<div class="mt-5 pt-4 border-t border-white/10">
 									<button
 										onClick={handleBackToEdit}
-										class="w-full px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="w-full px-4 py-2 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Back to edit
 									</button>

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
+}