@nuasite/cms 0.27.0 → 0.29.0

package/package.json

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

package/src/collection-scanner.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { isMap, isPair, isScalar, parse as parseYaml, parseDocument } from 'yaml'
 import { getProjectRoot } from './config'
 import { slugifyHref } from './shared'
-import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldType } from './types'
+import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldHints, FieldType } from './types'
 
 /** Regex patterns for type inference */
 const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}/
@@ -31,7 +31,6 @@ const SIDEBAR_FIELD_NAMES = new Set([
 	'author',
 ])
 
-/** Directive pattern: # @position <value> or # @group <value> */
 /** Matches `@position <value>` or `@group <value>` in YAML comment text (# already stripped by parser) */
 const DIRECTIVE_PATTERN = /^\s*@(position|group)\s+(.+)$/
 
@@ -400,10 +399,6 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 			const fullPath = path.join(projectRoot, configPath)
 			const content = await fs.readFile(fullPath, 'utf-8')
 
-			const collectionBlocks = content.matchAll(
-				/(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*z\.object\s*\(\s*\{([\s\S]*?)\}\s*\)/g,
-			)
-
 			// Map variable names to collection names from exports
 			const varToName = new Map<string, string>()
 			const exportMatch = content.match(/export\s+const\s+collections\s*=\s*\{([\s\S]*?)\}/)
@@ -414,13 +409,32 @@ async function parseContentConfigSchemaBlocks(): Promise<Array<{ collectionName:
 				}
 			}
 
+			// Find schema block starts via regex, then extract bodies with brace counting
+			// to correctly handle nested objects like n.number({ min: 1, max: 100 })
+			const schemaStart = /(?:const\s+(\w+)\s*=\s*)?defineCollection\s*\(\s*\{[\s\S]*?schema\s*:\s*(?:z|n)\.object\s*\(\s*\{/g
 			const blocks: Array<{ collectionName: string; schemaBody: string }> = []
-			for (const block of collectionBlocks) {
-				const varName = block[1]
-				const schemaBody = block[2]!
+
+			let match
+			while ((match = schemaStart.exec(content)) !== null) {
+				const varName = match[1]
 				const collectionName = varName ? varToName.get(varName) : undefined
 				if (!collectionName) continue
-				blocks.push({ collectionName, schemaBody })
+
+				// Brace-balanced extraction: the regex consumed the opening {,
+				// so start at depth 1 and scan forward for the matching }
+				const bodyStart = match.index + match[0].length
+				let depth = 1
+				let i = bodyStart
+				while (i < content.length && depth > 0) {
+					if (content[i] === '{') depth++
+					else if (content[i] === '}') depth--
+					i++
+				}
+
+				if (depth === 0) {
+					// i is one past the matching }, so body is [bodyStart, i-1)
+					blocks.push({ collectionName, schemaBody: content.slice(bodyStart, i - 1) })
+				}
 			}
 
 			if (blocks.length > 0) return blocks
@@ -455,7 +469,7 @@ function parseContentConfigReferences(
 }
 
 /** Valid field type names exported by `n` helper from @nuasite/cms */
-const FIELD_HELPER_TYPES = new Set(['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:
@@ -501,17 +515,56 @@ function parseContentConfigFieldTypes(
 }
 
 /**
- * Extract all top-level field names from a schema body string.
- * Matches `fieldName:` patterns at the start of lines within z.object({...}).
+ * Parse the content config to find `.orderBy('asc'|'desc')` markers on fields.
+ * Matches patterns like `fieldName: n.number().orderBy('asc')`.
+ * Returns a map: collectionName → { field, direction }.
+ */
+function parseContentConfigOrderBy(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, { field: string; direction: 'asc' | 'desc' }> {
+	const result = new Map<string, { field: string; direction: 'asc' | 'desc' }>()
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const match = schemaBody.match(/(\w+)\s*:.*\.orderBy\s*\(\s*(?:['"](\w+)['"])?\s*\)/)
+		if (match) {
+			const direction = match[2] === 'desc' ? 'desc' as const : 'asc' as const
+			result.set(collectionName, { field: match[1]!, direction })
+		}
+	}
+	return result
+}
+
+/**
+ * Apply orderBy configuration: set the field name and direction on the definition, then re-sort entries.
  */
-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]!)
+function applyCollectionOrderBy(
+	collections: Record<string, CollectionDefinition>,
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): void {
+	const orderByFields = parseContentConfigOrderBy(schemaBlocks)
+	for (const [collectionName, { field: fieldName, direction }] of orderByFields) {
+		const def = collections[collectionName]
+		if (!def) continue
+		def.orderBy = fieldName
+		def.orderDirection = direction
+		if (def.entries && def.entries.length > 1) {
+			const dir = direction === 'desc' ? -1 : 1
+			def.entries.sort((a, b) => {
+				const aVal = a.data?.[fieldName]
+				const bVal = b.data?.[fieldName]
+				if (aVal == null && bVal == null) return 0
+				if (aVal == null) return 1
+				if (bVal == null) return -1
+				if (typeof aVal === 'number' && typeof bVal === 'number') return (aVal - bVal) * dir
+				if (aVal instanceof Date && bVal instanceof Date) return (aVal.getTime() - bVal.getTime()) * dir
+				return String(aVal).localeCompare(String(bVal)) * dir
+			})
+		}
 	}
-	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
  * those defined in the schema. This prevents stale or extra frontmatter fields
@@ -524,32 +577,150 @@ 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 */
+const NUMERIC_HINT_KEYS = new Set(['min', 'max', 'step', 'maxLength', 'minLength', 'rows'])
+
+/**
+ * Parse `n.type({ key: value, ... })` options objects from schema blocks.
+ * Returns a map: collectionName → fieldName → FieldHints.
+ */
+function parseContentConfigFieldHints(
+	schemaBlocks: Array<{ collectionName: string; schemaBody: string }>,
+): Map<string, Map<string, FieldHints>> {
+	const result = new Map<string, Map<string, FieldHints>>()
+
+	for (const { collectionName, schemaBody } of schemaBlocks) {
+		const fields = new Map<string, FieldHints>()
+
+		// Match: fieldName: n.helperName({ ...options })
+		const fieldMatches = schemaBody.matchAll(/(\w+)\s*:\s*n\.\w+\s*\(\s*\{([\s\S]*?)}\s*\)/g)
+		for (const m of fieldMatches) {
+			const fieldName = m[1]!
+			const optionsBody = m[2]!
+			const raw: Record<string, string | number> = {}
+
+			// Extract key-value pairs from the options body
+			const kvMatches = optionsBody.matchAll(/(\w+)\s*:\s*(?:"([^"]*)"|'([^']*)'|(-?[\d.]+))/g)
+			for (const kv of kvMatches) {
+				const key = kv[1]!
+				if (!VALID_HINT_KEYS.has(key)) continue
+				const strValue = kv[2] ?? kv[3]
+				const numValue = kv[4]
+
+				if (numValue != null && NUMERIC_HINT_KEYS.has(key)) {
+					raw[key] = Number(numValue)
+				} else if (strValue != null) {
+					if (NUMERIC_HINT_KEYS.has(key)) {
+						const parsed = Number(strValue)
+						raw[key] = Number.isNaN(parsed) ? strValue : parsed
+					} else {
+						raw[key] = strValue
+					}
+				}
+			}
+			const hints = raw as FieldHints
+
+			if (Object.keys(hints).length > 0) {
+				fields.set(fieldName, hints)
 			}
 		}
+
+		if (fields.size > 0) {
+			result.set(collectionName, fields)
+		}
 	}
+	return result
+}
+
+/**
+ * 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 {
+	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
+	})
 }
 
 /**
@@ -787,12 +958,15 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 		// Content directory doesn't exist or isn't readable
 	}
 
-	// Post-scan: apply explicit type hints, detect references, and derived fields
+	// 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)
 
 	return collections
 }

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/collections-browser.tsx

@@ -11,7 +11,6 @@ import {
 	selectBrowserCollection,
 	selectedBrowserCollection,
 } from '../signals'
-import { savePendingEntryNavigation } from '../storage'
 import { ChevronRightIcon, CollectionIcon } from './create-page-modal'
 import { CloseButton, ModalBackdrop, ModalHeader } from './modal-shell'
 
@@ -51,16 +50,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 = () => {
@@ -201,7 +193,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/create-page-modal.tsx

@@ -206,7 +206,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 +220,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 +235,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 +260,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 +308,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 +323,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 +354,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 +376,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>
 	)
 }