@nuasite/cms 0.28.0 → 0.30.0

package/package.json

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

package/src/collection-scanner.ts

@@ -469,7 +469,7 @@ function parseContentConfigReferences(
 }
 
 /** Valid field type names exported by `n` helper from @nuasite/cms */
-const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'color', 'date', 'datetime', 'time', 'textarea'])
+const FIELD_HELPER_TYPES = new Set(['text', 'number', 'image', 'url', 'email', 'tel', 'color', 'date', 'datetime', 'time', 'textarea'])
 
 /**
  * Parse the content config file to extract explicit field type hints:
@@ -562,17 +562,8 @@ function applyCollectionOrderBy(
 	}
 }
 
-/**
- * Extract all top-level field names from a schema body string.
- * Matches `fieldName:` patterns at the start of lines within z.object({...}).
- */
-function extractSchemaFieldNames(schemaBody: string): Set<string> {
-	const names = new Set<string>()
-	for (const m of schemaBody.matchAll(/^\s*(\w+)\s*:/gm)) {
-		names.add(m[1]!)
-	}
-	return names
-}
+/** Match `fieldName:` patterns at the start of lines within a schema body. */
+const SCHEMA_FIELD_PATTERN = /^\s*(\w+)\s*:/gm
 
 /**
  * When a content config schema exists, filter scanned fields to only include
@@ -586,34 +577,45 @@ function filterFieldsBySchema(
 	for (const { collectionName, schemaBody } of schemaBlocks) {
 		const def = collections[collectionName]
 		if (!def) continue
-		const schemaNames = extractSchemaFieldNames(schemaBody)
+		const schemaNames = new Set<string>()
+		for (const m of schemaBody.matchAll(SCHEMA_FIELD_PATTERN)) {
+			schemaNames.add(m[1]!)
+		}
 		if (schemaNames.size === 0) continue
 		def.fields = def.fields.filter(f => schemaNames.has(f.name))
 	}
 }
 
 /**
- * Apply field type overrides from config parsing to scanned collections.
+ * Apply a parsed per-field config map to scanned collection definitions.
  */
-function applyConfigFieldTypes(
+function applyPerFieldConfig<T>(
 	collections: Record<string, CollectionDefinition>,
-	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+	configMap: Map<string, Map<string, T>>,
+	apply: (field: FieldDefinition, value: T) => void,
 ): void {
-	const configTypes = parseContentConfigFieldTypes(schemaBlocks)
-	for (const [collectionName, fieldTypes] of configTypes) {
+	for (const [collectionName, fieldMap] of configMap) {
 		const def = collections[collectionName]
 		if (!def) continue
-		for (const [fieldName, override] of fieldTypes) {
+		for (const [fieldName, value] of fieldMap) {
 			const field = def.fields.find(f => f.name === fieldName)
 			if (!field) continue
-			field.type = override.type
-			if (override.options) {
-				field.options = override.options
-			}
+			apply(field, value)
 		}
 	}
 }
 
+/** Apply field type overrides from config parsing to scanned collections. */
+function applyConfigFieldTypes(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	applyPerFieldConfig(collections, parseContentConfigFieldTypes(schemaBlocks), (field, override) => {
+		field.type = override.type
+		if (override.options) field.options = override.options
+	})
+}
+
 /** All recognized hint keys */
 const VALID_HINT_KEYS = new Set(['min', 'max', 'step', 'placeholder', 'maxLength', 'minLength', 'rows', 'accept'])
 /** Subset of hint keys that take numeric values */
@@ -672,22 +674,53 @@ function parseContentConfigFieldHints(
 }
 
 /**
- * Apply field hints from content config parsing to scanned collections.
+ * Parse required/optional status from schema blocks.
+ * In Zod, fields are required by default. `.optional()`, `.nullable()`, and `.default(...)` make them not required.
  */
+function parseContentConfigRequiredFields(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, boolean>> {
+	const result = new Map<string, Map<string, boolean>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, boolean>()
+
+		const fieldMatches = [...schemaBody.matchAll(SCHEMA_FIELD_PATTERN)]
+		for (let i = 0; i < fieldMatches.length; i++) {
+			const fieldName = fieldMatches[i]![1]!
+			const start = fieldMatches[i]!.index!
+			const end = i + 1 < fieldMatches.length ? fieldMatches[i + 1]!.index! : schemaBody.length
+			const fieldSource = schemaBody.slice(start, end)
+
+			const isOptional = /\.(optional|nullable|default)\s*\(/.test(fieldSource)
+			fields.set(fieldName, !isOptional)
+		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
+	}
+	return result
+}
+
+/** Apply field hints from content config parsing to scanned collections. */
 function applyConfigFieldHints(
 	collections: Record<string, CollectionDefinition>,
 	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
 ): void {
-	const configHints = parseContentConfigFieldHints(schemaBlocks)
-	for (const [collectionName, fieldHints] of configHints) {
-		const def = collections[collectionName]
-		if (!def) continue
-		for (const [fieldName, hints] of fieldHints) {
-			const field = def.fields.find(f => f.name === fieldName)
-			if (!field) continue
-			field.hints = hints
-		}
-	}
+	applyPerFieldConfig(collections, parseContentConfigFieldHints(schemaBlocks), (field, hints) => {
+		field.hints = hints
+	})
+}
+
+/** Apply required/optional status from content config to scanned collections. */
+function applyConfigRequiredFields(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	applyPerFieldConfig(collections, parseContentConfigRequiredFields(schemaBlocks), (field, required) => {
+		field.required = required
+	})
 }
 
 /**
@@ -925,11 +958,12 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: apply explicit type hints, field hints, detect references, derived fields, and ordering
+	// Post-scan: apply explicit type hints, field hints, required status, detect references, derived fields, and ordering
 	const schemaBlocks = await parseContentConfigSchemaBlocks()
 	filterFieldsBySchema(collections, schemaBlocks)
 	applyConfigFieldTypes(collections, schemaBlocks)
 	applyConfigFieldHints(collections, schemaBlocks)
+	applyConfigRequiredFields(collections, schemaBlocks)
 	await detectReferenceFields(collections, schemaBlocks)
 	detectDerivedHrefFields(collections)
 	applyCollectionOrderBy(collections, schemaBlocks)

package/src/dev-middleware.ts

@@ -2,7 +2,6 @@ import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
 import { getProjectRoot } from './config'
-import { awaitNextContentStoreUpdate } from './content-invalidator'
 import { handleCmsApiRoute } from './handlers/api-routes'
 import { buildMapPattern, detectArrayPattern, extractArrayElementProps, parseInlineArrayName } from './handlers/array-ops'
 import {
@@ -104,43 +103,6 @@ export function createDevMiddleware(
 	if (options.enableCmsApi) {
 		const projectRoot = getProjectRoot()
 
-		/**
-		 * Hold the HTTP response for a `markdown/update` (or equivalent) call
-		 * until Astro's content layer has actually re-synced the edited file.
-		 *
-		 * The race we're fixing: handleUpdateMarkdown writes the file and
-		 * returns immediately, the editor then triggers a full-reload, and
-		 * the next page render reads a still-cached `astro:data-layer-content`
-		 * virtual module — so the user sees their edit disappear until Astro's
-		 * async chain (glob loader → syncData → 500 ms save debounce → atomic
-		 * write → fs.watch → invalidateModule) finally catches up.
-		 *
-		 * The fix, end to end:
-		 *
-		 *   1. `server.watcher.emit('change', fullPath)` kicks Astro's glob
-		 *      loader directly. It is registered on this exact watcher (see
-		 *      astro/dist/core/dev/dev.js — `viteServer.watcher` is handed to
-		 *      `globalContentLayer.init`), so synthetic change events fire its
-		 *      `onChange` handler and trigger `syncData`. This also works
-		 *      around Vite's bundled chokidar missing some edits.
-		 *   2. `awaitNextContentStoreUpdate` parks until the shared data-store
-		 *      watcher (in `vite-plugin.ts`) observes the resulting atomic
-		 *      write and finishes invalidating the SSR module graph.
-		 *   3. Only then do we return — so the subsequent full-reload lands
-		 *      on a page that will re-execute with fresh content.
-		 *
-		 * The timeout fallback covers edits that legitimately do not rewrite
-		 * the data store (Astro's MutableDataStore skips identical writes).
-		 * In that case no fs.watch event will ever fire, and 3 s is plenty of
-		 * budget before we give up and let the response through anyway.
-		 */
-		const notifyContentChanged = async (filePath: string): Promise<void> => {
-			const fullPath = path.resolve(projectRoot, filePath)
-			const waiter = awaitNextContentStoreUpdate(3000)
-			server.watcher?.emit('change', fullPath)
-			await waiter
-		}
-
 		server.middlewares.use((req, res, next) => {
 			const url = req.url || ''
 			if (!url.startsWith('/_nua/cms/')) {
@@ -152,7 +114,7 @@ export function createDevMiddleware(
 
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
-			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter, notifyContentChanged)
+			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter)
 				.catch((error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -177,11 +139,31 @@ export function createDevMiddleware(
 				pageMap.set(pagePath, { pathname: pagePath })
 			}
 
-			// 2. Add collection entry pages from collection definitions
+			// 2. Add collection entry pages from collection definitions,
+			//    pre-populating pathnames from filesystem routes so the collections
+			//    browser can redirect to detail pages without visiting them first.
+			//    We build patched copies rather than mutating the originals so that
+			//    heuristic pathnames don't persist if the route file is later removed.
 			const collectionDefs = manifestWriter.getCollectionDefinitions()
-			for (const def of Object.values(collectionDefs)) {
-				if (def.entries) {
-					for (const entry of def.entries) {
+			const collectionRoutes = await discoverCollectionRoutes()
+			const responseCollectionDefs: Record<string, CollectionDefinition> = {}
+
+			for (const [name, def] of Object.entries(collectionDefs)) {
+				const routePrefix = collectionRoutes.get(def.name)
+				const needsPatching = routePrefix && def.entries?.some(e => !e.pathname)
+
+				if (!needsPatching) {
+					responseCollectionDefs[name] = def
+				} else {
+					responseCollectionDefs[name] = {
+						...def,
+						entries: def.entries!.map(e => e.pathname ? e : { ...e, pathname: `${routePrefix}${e.slug}` }),
+					}
+				}
+
+				const entries = responseCollectionDefs[name].entries
+				if (entries) {
+					for (const entry of entries) {
 						if (entry.pathname) {
 							pageMap.set(entry.pathname, { pathname: entry.pathname, title: entry.title })
 						}
@@ -205,8 +187,8 @@ export function createDevMiddleware(
 				availableTextStyles: manifestWriter.getAvailableTextStyles(),
 				pages,
 			}
-			if (Object.keys(collectionDefs).length > 0) {
-				manifest.collectionDefinitions = collectionDefs
+			if (Object.keys(responseCollectionDefs).length > 0) {
+				manifest.collectionDefinitions = responseCollectionDefs
 			}
 			const mdxComponents = manifestWriter.getMdxComponents()
 			if (mdxComponents) {
@@ -626,6 +608,65 @@ async function discoverPagesFromFilesystem(): Promise<string[]> {
 	return pages
 }
 
+/** Cached result of collection route discovery; invalidated by file watcher */
+let collectionRoutesCache: Map<string, string> | null = null
+
+/** Invalidate the cached collection routes (called from vite-plugin when route files change) */
+export function invalidateCollectionRoutesCache() {
+	collectionRoutesCache = null
+}
+
+/**
+ * Discover collection route patterns by scanning src/pages for dynamic route files
+ * (e.g. [slug].astro) that call getCollection(). Returns a map from collection name
+ * to the URL prefix (e.g. 'blog' → '/blog/'). Result is cached after first call.
+ */
+async function discoverCollectionRoutes(): Promise<Map<string, string>> {
+	if (collectionRoutesCache) return collectionRoutesCache
+
+	const projectRoot = getProjectRoot()
+	const pagesDir = path.join(projectRoot, 'src', 'pages')
+	const routes = new Map<string, string>()
+
+	try {
+		await fs.access(pagesDir)
+	} catch {
+		collectionRoutesCache = routes
+		return routes
+	}
+
+	async function walk(dir: string, urlPrefix: string) {
+		const entries = await fs.readdir(dir, { withFileTypes: true })
+		for (const entry of entries) {
+			if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+			const fullPath = path.join(dir, entry.name)
+			if (entry.isDirectory()) {
+				// Skip directories with dynamic segments
+				if (entry.name.includes('[')) continue
+				await walk(fullPath, `${urlPrefix}${entry.name}/`)
+			} else {
+				const ext = path.extname(entry.name)
+				if (!PAGE_EXTENSIONS.has(ext)) continue
+				// Only interested in dynamic route files
+				if (!entry.name.includes('[')) continue
+
+				try {
+					const content = await fs.readFile(fullPath, 'utf-8')
+					const match = content.match(/getCollection\(\s*['"](\w+)['"]\s*\)/)
+					if (match?.[1]) {
+						routes.set(match[1], urlPrefix)
+					}
+				} catch { /* skip unreadable files */ }
+			}
+		}
+	}
+
+	await walk(pagesDir, '/')
+	collectionRoutesCache = routes
+	return routes
+}
+
 function mediaMimeFromExt(ext: string): string {
 	const map: Record<string, string> = {
 		'.jpg': 'image/jpeg',

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

@@ -4,6 +4,7 @@ import * as signals from '../signals'
 import { saveAttributeEditsToStorage } from '../storage'
 import type { Attribute } from '../types'
 import { ComboBoxField, FieldLabel, ImageField, NumberField, SelectField, TextField, ToggleField } from './fields'
+import { CloseButton } from './modal-shell'
 
 // ============================================================================
 // Attribute Field Configuration
@@ -542,16 +543,7 @@ export function AttributeEditor({ onClose }: AttributeEditorProps) {
 							</span>
 						)}
 					</div>
-					<button
-						type="button"
-						onClick={handleClose}
-						class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-						data-cms-ui
-					>
-						<svg class="w-4 h-4" 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>
+					<CloseButton onClick={handleClose} size="sm" />
 				</div>
 
 				{/* Content */}

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

@@ -5,6 +5,7 @@ import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { saveBgImageEditsToStorage } from '../storage'
 import { FieldLabel, ImageField, SelectField } from './fields'
+import { CloseButton } from './modal-shell'
 
 export interface BgImageOverlayProps {
 	visible: boolean
@@ -232,16 +233,7 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 									</span>
 								)}
 							</div>
-							<button
-								type="button"
-								onClick={handleClose}
-								class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-								data-cms-ui
-							>
-								<svg class="w-4 h-4" 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>
+							<CloseButton onClick={handleClose} size="sm" />
 						</div>
 
 						{/* Content */}

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

@@ -1,5 +1,6 @@
 import { signal } from '@preact/signals'
 import { useMemo, useState } from 'preact/hooks'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
@@ -11,9 +12,8 @@ import {
 	selectBrowserCollection,
 	selectedBrowserCollection,
 } from '../signals'
-import { savePendingEntryNavigation } from '../storage'
 import { ChevronRightIcon, CollectionIcon } from './create-page-modal'
-import { CloseButton, ModalBackdrop, ModalHeader } from './modal-shell'
+import { CloseButton, ModalBackdrop, ModalHeader, PrimaryButton } from './modal-shell'
 
 const deletingEntry = signal<string | null>(null)
 const confirmDeleteSlug = signal<string | null>(null)
@@ -34,11 +34,7 @@ export function CollectionsBrowser() {
 	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])
+	const filteredEntries = useSearchFilter(entries, search, e => `${e.title ?? ''} ${e.slug}`)
 
 	if (!visible) return null
 
@@ -51,16 +47,9 @@ export function CollectionsBrowser() {
 		const def = selectedDef
 		if (!def) return null
 
-		const handleEntryClick = (slug: string, sourcePath: string, pathname?: string) => {
+		const handleEntryClick = (slug: string, sourcePath: string) => {
 			closeCollectionsBrowser()
-			if (pathname) {
-				// Navigate to the collection detail page to edit inline.
-				savePendingEntryNavigation({ collectionName: selected, slug, sourcePath, pathname })
-				window.location.href = pathname
-			} else {
-				// No detail page exists for this entry — open the markdown editor inline.
-				openMarkdownEditorForEntry(selected, slug, sourcePath, def)
-			}
+			openMarkdownEditorForEntry(selected, slug, sourcePath, def)
 		}
 
 		const handleAddNew = () => {
@@ -124,14 +113,9 @@ export function CollectionsBrowser() {
 						<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
-						>
+						<PrimaryButton onClick={handleAddNew} className="px-3 py-1.5">
 							+ Add New
-						</button>
+						</PrimaryButton>
 						<CloseButton onClick={handleClose} />
 					</div>
 				</div>
@@ -201,7 +185,7 @@ export function CollectionsBrowser() {
 								: (
 									<button
 										type="button"
-										onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
+										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"
 										data-cms-ui
 									>

package/src/editor/components/color-toolbar.tsx

@@ -12,6 +12,7 @@ import { CSS, Z_INDEX } from '../constants'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import type { Attribute, AvailableColors } from '../types'
+import { CloseButton } from './modal-shell'
 
 export interface ColorToolbarProps {
 	visible: boolean
@@ -247,15 +248,7 @@ export function ColorToolbar({
 				{/* Header */}
 				<div class="flex items-center justify-between">
 					<span class="font-medium text-white">Element Colors</span>
-					<button
-						type="button"
-						onClick={onClose}
-						class="text-white/50 hover:text-white cursor-pointer p-1.5 hover:bg-white/10 rounded-full transition-colors"
-					>
-						<svg class="w-4 h-4" 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>
+					{onClose && <CloseButton onClick={onClose} size="sm" />}
 				</div>
 
 				{/* Background color section */}

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

@@ -1,6 +1,6 @@
 import { cn } from '../lib/cn'
 import { confirmDialogState } from '../signals'
-import { ModalBackdrop } from './modal-shell'
+import { CancelButton, ModalBackdrop, ModalFooter } from './modal-shell'
 
 export function ConfirmDialog() {
 	const state = confirmDialogState.value
@@ -27,16 +27,8 @@ export function ConfirmDialog() {
 				<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>
+			<ModalFooter>
+				<CancelButton onClick={handleCancel} label={state.cancelLabel} />
 				<button
 					type="button"
 					onClick={handleConfirm}
@@ -50,7 +42,7 @@ export function ConfirmDialog() {
 				>
 					{state.confirmLabel}
 				</button>
-			</div>
+			</ModalFooter>
 		</ModalBackdrop>
 	)
 }

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

@@ -14,6 +14,7 @@ import {
 } from '../signals'
 import type { LayoutInfo } from '../types'
 import { CancelButton, ModalBackdrop, ModalFooter, ModalHeader } from './modal-shell'
+import { Spinner } from './spinner'
 
 export function CreatePageModal() {
 	const visible = isCreatePageOpen.value
@@ -206,7 +207,12 @@ function NewPageForm() {
 	}
 
 	return (
-		<>
+		<form
+			onSubmit={(e) => {
+				e.preventDefault()
+				handleSubmit()
+			}}
+		>
 			<ModalHeader title="New Blank Page" onBack={() => setCreatePageMode('pick')} onClose={() => resetCreatePageState()} />
 			<div class="p-5 space-y-4">
 				<Field label="Title">
@@ -215,6 +221,7 @@ function NewPageForm() {
 						value={form.title}
 						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"
 						autoFocus
 						data-cms-ui
@@ -229,6 +236,7 @@ function NewPageForm() {
 							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"
 							data-cms-ui
 						/>
@@ -253,16 +261,15 @@ function NewPageForm() {
 			<ModalFooter>
 				<CancelButton onClick={() => resetCreatePageState()} />
 				<button
-					type="button"
-					onClick={handleSubmit}
-					disabled={!canSubmit}
+					type="submit"
+					disabled={!!form.slugError || form.slugChecking || form.isSubmitting}
 					class="px-5 py-2.5 text-sm font-medium rounded-cms-pill transition-colors cursor-pointer bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover disabled:opacity-40 disabled:cursor-not-allowed"
 					data-cms-ui
 				>
 					Create Page
 				</button>
 			</ModalFooter>
-		</>
+		</form>
 	)
 }
 
@@ -302,7 +309,12 @@ function DuplicatePageForm() {
 	}
 
 	return (
-		<>
+		<form
+			onSubmit={(e) => {
+				e.preventDefault()
+				handleSubmit()
+			}}
+		>
 			<ModalHeader title="Duplicate Page" onBack={() => setCreatePageMode('pick')} onClose={() => resetCreatePageState()} />
 			<div class="p-5 space-y-4">
 				<Field label="Source Page">
@@ -312,6 +324,7 @@ function DuplicatePageForm() {
 							setSourcePath((e.target as HTMLSelectElement).value)
 							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"
 						data-cms-ui
 					>
@@ -342,6 +355,7 @@ function DuplicatePageForm() {
 							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"
 							data-cms-ui
 						/>
@@ -363,16 +377,15 @@ function DuplicatePageForm() {
 			<ModalFooter>
 				<CancelButton onClick={() => resetCreatePageState()} />
 				<button
-					type="button"
-					onClick={handleSubmit}
-					disabled={!canSubmit}
+					type="submit"
+					disabled={!!form.slugError || form.slugChecking || form.isSubmitting}
 					class="px-5 py-2.5 text-sm font-medium rounded-cms-pill transition-colors cursor-pointer bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover disabled:opacity-40 disabled:cursor-not-allowed"
 					data-cms-ui
 				>
 					Duplicate Page
 				</button>
 			</ModalFooter>
-		</>
+		</form>
 	)
 }
 
@@ -482,15 +495,6 @@ function PageCreatingOverlay({ phase, slug }: { phase: 'creating' | 'preparing';
 	)
 }
 
-function Spinner() {
-	return (
-		<svg class="w-8 h-8 animate-spin text-cms-primary" viewBox="0 0 24 24" fill="none" data-cms-ui>
-			<circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" />
-			<path class="opacity-80" d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-		</svg>
-	)
-}
-
 /**
  * Poll a URL until the dev server returns a non-404 response,
  * so navigation doesn't land on a 404 while Astro processes the new file.