@nuasite/cms 0.28.0 → 0.30.0

package/src/editor/components/fields.tsx

@@ -1,4 +1,8 @@
+import type { ComponentChildren } from 'preact'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { getDropdownPosition } from '../constants'
+import { useClickOutsideEscape } from '../hooks/useClickOutsideEscape'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { cn } from '../lib/cn'
 
 // ============================================================================
@@ -45,9 +49,12 @@ export interface TextFieldProps {
 	isDirty?: boolean
 	onReset?: () => void
 	inputType?: string
+	required?: boolean
 }
 
-export function TextField({ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text' }: TextFieldProps) {
+export function TextField(
+	{ label, value, placeholder, maxLength, minLength, onChange, isDirty, onReset, inputType = 'text', required }: TextFieldProps,
+) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -57,6 +64,7 @@ export function TextField({ label, value, placeholder, maxLength, minLength, onC
 				placeholder={placeholder}
 				maxLength={maxLength}
 				minLength={minLength}
+				required={required}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 				class={cn(
 					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -82,9 +90,10 @@ export interface ImageFieldProps {
 	onBrowse: () => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset }: ImageFieldProps) {
+export function ImageField({ label, value, placeholder, onChange, onBrowse, isDirty, onReset, required }: ImageFieldProps) {
 	const hasImage = !!value && value.length > 0
 
 	return (
@@ -114,6 +123,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 min-w-0 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -147,9 +157,10 @@ export interface ColorFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ColorField({ label, value, placeholder, onChange, isDirty, onReset }: ColorFieldProps) {
+export function ColorField({ label, value, placeholder, onChange, isDirty, onReset, required }: ColorFieldProps) {
 	const colorValue = value || '#000000'
 	// Validate hex for the native picker (must be #rrggbb)
 	const isValidHex = /^#[0-9a-fA-F]{6}$/.test(colorValue)
@@ -170,6 +181,7 @@ export function ColorField({ label, value, placeholder, onChange, isDirty, onRes
 					type="text"
 					value={value ?? ''}
 					placeholder={placeholder ?? '#000000'}
+					required={required}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
 						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
@@ -278,9 +290,10 @@ export interface NumberFieldProps {
 	onChange: (value: number | undefined) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset }: NumberFieldProps) {
+export function NumberField({ label, value, placeholder, min, max, step, onChange, isDirty, onReset, required }: NumberFieldProps) {
 	return (
 		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -291,6 +304,7 @@ export function NumberField({ label, value, placeholder, min, max, step, onChang
 				min={min}
 				max={max}
 				step={step}
+				required={required}
 				onInput={(e) => {
 					const val = (e.target as HTMLInputElement).value
 					onChange(val === '' ? undefined : Number(val))
@@ -324,6 +338,48 @@ export function HighlightMatch({ text, query }: { text: string; query: string })
 	)
 }
 
+// ============================================================================
+// Dropdown Panel (fixed-position container for select/combobox dropdowns)
+// ============================================================================
+
+export interface DropdownPanelProps {
+	/** Ref to the trigger element — used for positioning and outside-click detection */
+	triggerRef: { readonly current: HTMLElement | null }
+	isOpen: boolean
+	onClose: () => void
+	maxHeight?: number
+	children: ComponentChildren
+	className?: string
+	/** Forward a ref to the panel div (e.g. for keyboard-nav scroll) */
+	panelRef?: { current: HTMLDivElement | null }
+	/** Additional refs to exempt from outside-click detection (e.g. a wrapper containing related UI like selected tags) */
+	exemptRefs?: ReadonlyArray<{ readonly current: HTMLElement | null }>
+}
+
+/**
+ * Fixed-position dropdown container that escapes parent overflow clipping.
+ * Handles outside-click and Escape-key dismissal.
+ */
+export function DropdownPanel({ triggerRef, isOpen, onClose, maxHeight = 192, children, className, panelRef, exemptRefs }: DropdownPanelProps) {
+	const internalRef = useRef<HTMLDivElement>(null)
+	const ref = panelRef ?? internalRef
+
+	useClickOutsideEscape([ref, triggerRef, ...(exemptRefs ?? [])], isOpen, onClose)
+
+	if (!isOpen) return null
+
+	return (
+		<div
+			ref={ref}
+			class={cn('overflow-y-auto bg-cms-dark shadow-lg', className)}
+			style={getDropdownPosition(triggerRef.current, maxHeight)}
+			data-cms-ui
+		>
+			{children}
+		</div>
+	)
+}
+
 // ============================================================================
 // ComboBox Field (searchable dropdown with free-text input)
 // ============================================================================
@@ -336,23 +392,17 @@ export interface ComboBoxFieldProps {
 	onChange: (value: string) => void
 	isDirty?: boolean
 	onReset?: () => void
+	required?: boolean
 }
 
-export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset }: ComboBoxFieldProps) {
+export function ComboBoxField({ label, value, placeholder, options, onChange, isDirty, onReset, required }: ComboBoxFieldProps) {
 	const [query, setQuery] = useState('')
 	const [isOpen, setIsOpen] = useState(false)
 	const [highlightedIndex, setHighlightedIndex] = useState(-1)
 	const inputRef = useRef<HTMLInputElement>(null)
 	const listRef = useRef<HTMLDivElement>(null)
 
-	// Filter options based on query
-	const filtered = useMemo(() => {
-		if (!query) return options
-		const q = query.toLowerCase()
-		return options.filter(
-			o => o.value.toLowerCase().includes(q) || o.label.toLowerCase().includes(q),
-		)
-	}, [query, options])
+	const filtered = useSearchFilter(options, query, o => `${o.label} ${o.value}`)
 
 	const handleInput = useCallback((e: Event) => {
 		const v = (e.target as HTMLInputElement).value
@@ -362,22 +412,22 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 		setHighlightedIndex(-1)
 	}, [onChange])
 
-	const handleFocus = useCallback(() => {
-		setIsOpen(true)
-	}, [])
-
-	const handleBlur = useCallback(() => {
-		// Delay to allow click on option to register
-		setTimeout(() => setIsOpen(false), 150)
-	}, [])
-
 	const selectOption = useCallback((optValue: string) => {
 		onChange(optValue)
 		setQuery('')
 		setIsOpen(false)
 	}, [onChange])
 
+	const closeDropdown = useCallback(() => setIsOpen(false), [])
+
 	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			if (isOpen && highlightedIndex >= 0 && filtered[highlightedIndex]) {
+				selectOption(filtered[highlightedIndex]!.value)
+			}
+			return
+		}
 		if (!isOpen || filtered.length === 0) return
 		if (e.key === 'ArrowDown') {
 			e.preventDefault()
@@ -385,11 +435,6 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault()
 			setHighlightedIndex(i => Math.max(i - 1, 0))
-		} else if (e.key === 'Enter' && highlightedIndex >= 0) {
-			e.preventDefault()
-			selectOption(filtered[highlightedIndex]!.value)
-		} else if (e.key === 'Escape') {
-			setIsOpen(false)
 		}
 	}, [isOpen, filtered, highlightedIndex, selectOption])
 
@@ -404,16 +449,17 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 	const showDropdown = isOpen && filtered.length > 0
 
 	return (
-		<div class="space-y-1.5 relative">
+		<div class="space-y-1.5">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
 			<input
 				ref={inputRef}
 				type="text"
 				value={value ?? ''}
 				placeholder={placeholder}
+				required={required}
 				onInput={handleInput}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
+				onFocus={() => setIsOpen(true)}
+				onBlur={() => setTimeout(closeDropdown, 150)}
 				onKeyDown={handleKeyDown}
 				autocomplete="off"
 				class={cn(
@@ -424,40 +470,41 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 				)}
 				data-cms-ui
 			/>
-			{showDropdown && (
-				<div
-					ref={listRef}
-					class="absolute z-50 left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-sm shadow-lg"
-					data-cms-ui
-				>
-					{filtered.map((opt, i) => (
-						<button
-							key={opt.value}
-							type="button"
-							onMouseDown={(e) => {
-								e.preventDefault()
-								selectOption(opt.value)
-							}}
-							class={cn(
-								'w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer',
-								i === highlightedIndex
-									? 'bg-white/15 text-white'
-									: 'text-white/70 hover:bg-white/10 hover:text-white',
-							)}
-							data-cms-ui
-						>
-							<span class="block truncate font-medium">
-								<HighlightMatch text={opt.label} query={query} />
+			<DropdownPanel
+				triggerRef={inputRef}
+				isOpen={showDropdown}
+				onClose={closeDropdown}
+				maxHeight={160}
+				panelRef={listRef}
+				className="border border-white/15 rounded-cms-sm"
+			>
+				{filtered.map((opt, i) => (
+					<button
+						key={opt.value}
+						type="button"
+						onMouseDown={(e) => {
+							e.preventDefault()
+							selectOption(opt.value)
+						}}
+						class={cn(
+							'w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer',
+							i === highlightedIndex
+								? 'bg-white/15 text-white'
+								: 'text-white/70 hover:bg-white/10 hover:text-white',
+						)}
+						data-cms-ui
+					>
+						<span class="block truncate font-medium">
+							<HighlightMatch text={opt.label} query={query} />
+						</span>
+						{opt.description && (
+							<span class="block truncate text-white/40">
+								<HighlightMatch text={opt.description} query={query} />
 							</span>
-							{opt.description && (
-								<span class="block truncate text-white/40">
-									<HighlightMatch text={opt.description} query={query} />
-								</span>
-							)}
-						</button>
-					))}
-				</div>
-			)}
+						)}
+					</button>
+				))}
+			</DropdownPanel>
 		</div>
 	)
 }
@@ -494,11 +541,7 @@ export function MultiSelectField({ label, selected, options, onChange, isDirty,
 		return map
 	}, [normalizedOptions])
 
-	const filtered = useMemo(() => {
-		if (!query) return normalizedOptions
-		const q = query.toLowerCase()
-		return normalizedOptions.filter(o => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
-	}, [query, normalizedOptions])
+	const filtered = useSearchFilter(normalizedOptions, query, o => `${o.label} ${o.value}`)
 
 	const toggleOption = useCallback((value: string) => {
 		if (selected.includes(value)) {
@@ -508,20 +551,10 @@ export function MultiSelectField({ label, selected, options, onChange, isDirty,
 		}
 	}, [selected, onChange])
 
-	// Close on outside click
-	useEffect(() => {
-		if (!isOpen) return
-		const handler = (e: MouseEvent) => {
-			if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-				setIsOpen(false)
-			}
-		}
-		document.addEventListener('mousedown', handler)
-		return () => document.removeEventListener('mousedown', handler)
-	}, [isOpen])
+	const closeDropdown = useCallback(() => setIsOpen(false), [])
 
 	return (
-		<div class="space-y-1.5 relative" ref={containerRef} data-cms-ui>
+		<div class="space-y-1.5" ref={containerRef} data-cms-ui>
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
 
 			{/* Selected pills */}
@@ -564,54 +597,55 @@ export function MultiSelectField({ label, selected, options, onChange, isDirty,
 				data-cms-ui
 			/>
 
-			{/* Dropdown */}
-			{isOpen && (
-				<div
-					class="absolute z-50 left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-sm shadow-lg"
-					data-cms-ui
-				>
-					{filtered.length === 0
-						? <div class="px-3 py-2 text-xs text-white/40">No options found</div>
-						: filtered.map(opt => {
-							const isSelected = selected.includes(opt.value)
-							return (
-								<button
-									key={opt.value}
-									type="button"
-									onMouseDown={(e) => {
-										e.preventDefault()
-										toggleOption(opt.value)
-									}}
+			<DropdownPanel
+				triggerRef={inputRef}
+				isOpen={isOpen}
+				onClose={closeDropdown}
+				maxHeight={192}
+				className="border border-white/15 rounded-cms-sm"
+				exemptRefs={[containerRef]}
+			>
+				{filtered.length === 0
+					? <div class="px-3 py-2 text-xs text-white/40">No options found</div>
+					: filtered.map(opt => {
+						const isSelected = selected.includes(opt.value)
+						return (
+							<button
+								key={opt.value}
+								type="button"
+								onMouseDown={(e) => {
+									e.preventDefault()
+									toggleOption(opt.value)
+								}}
+								class={cn(
+									'w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer flex items-center gap-2',
+									isSelected
+										? 'bg-cms-primary/10 text-white'
+										: 'text-white/70 hover:bg-white/10 hover:text-white',
+								)}
+								data-cms-ui
+							>
+								<span
 									class={cn(
-										'w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer flex items-center gap-2',
+										'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
 										isSelected
-											? 'bg-cms-primary/10 text-white'
-											: 'text-white/70 hover:bg-white/10 hover:text-white',
+											? 'bg-cms-primary border-cms-primary'
+											: 'border-white/30 bg-white/5',
 									)}
-									data-cms-ui
 								>
-									<span
-										class={cn(
-											'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
-											isSelected
-												? 'bg-cms-primary border-cms-primary'
-												: 'border-white/30 bg-white/5',
-										)}
-									>
-										{isSelected && (
-											<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
-											</svg>
-										)}
-									</span>
-									<span class="truncate font-medium">
-										{query ? <HighlightMatch text={opt.label} query={query} /> : opt.label}
-									</span>
-								</button>
-							)
-						})}
-				</div>
-			)}
+									{isSelected && (
+										<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+										</svg>
+									)}
+								</span>
+								<span class="truncate font-medium">
+									{query ? <HighlightMatch text={opt.label} query={query} /> : opt.label}
+								</span>
+							</button>
+						)
+					})}
+			</DropdownPanel>
 		</div>
 	)
 }

package/src/editor/components/frontmatter-fields.tsx

@@ -394,7 +394,7 @@ export function SchemaFrontmatterField({
 	value,
 	onChange,
 }: SchemaFrontmatterFieldProps) {
-	const label = formatFieldLabel(field.name)
+	const label = field.required ? `${formatFieldLabel(field.name)} *` : formatFieldLabel(field.name)
 	const hints = field.hints
 
 	switch (field.type) {
@@ -410,6 +410,7 @@ export function SchemaFrontmatterField({
 					minLength={hints?.minLength as number | undefined}
 					onChange={(v) => onChange(v)}
 					inputType={field.type === 'text' ? undefined : field.type}
+					required={field.required}
 				/>
 			)
 
@@ -425,6 +426,7 @@ export function SchemaFrontmatterField({
 							onChange(url)
 						})
 					}}
+					required={field.required}
 				/>
 			)
 
@@ -435,6 +437,7 @@ export function SchemaFrontmatterField({
 					value={(value as string) ?? ''}
 					placeholder={getPlaceholder(field)}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -448,6 +451,7 @@ export function SchemaFrontmatterField({
 						placeholder={hints?.placeholder ?? getPlaceholder(field)}
 						rows={hints?.rows ?? 3}
 						maxLength={hints?.maxLength as number | undefined}
+						required={field.required}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40 resize-none"
 						data-cms-ui
 					/>
@@ -465,6 +469,7 @@ export function SchemaFrontmatterField({
 						value={(value as string) ?? ''}
 						min={hints?.min != null ? String(hints.min) : undefined}
 						max={hints?.max != null ? String(hints.max) : undefined}
+						required={field.required}
 						onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
 						data-cms-ui
@@ -482,6 +487,7 @@ export function SchemaFrontmatterField({
 					max={typeof hints?.max === 'number' ? hints.max : undefined}
 					step={hints?.step}
 					onChange={(v) => onChange(v ?? 0)}
+					required={field.required}
 				/>
 			)
 
@@ -505,6 +511,7 @@ export function SchemaFrontmatterField({
 						label: opt,
 					}))}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 
@@ -517,6 +524,7 @@ export function SchemaFrontmatterField({
 					placeholder={`Select ${label.toLowerCase()}...`}
 					options={refOptions}
 					onChange={(v) => onChange(v)}
+					required={field.required}
 				/>
 			)
 		}

package/src/editor/components/link-edit-popover.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { HighlightMatch } from './fields'
+import { PrimaryButton } from './modal-shell'
 
 export interface LinkSuggestion {
 	value: string
@@ -189,13 +190,9 @@ export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, on
 					)}
 				</div>
 
-				<button
-					type="submit"
-					class="px-3 py-1.5 bg-cms-primary text-cms-primary-text text-[12px] font-medium rounded-cms-sm hover:bg-cms-primary-hover transition-colors shrink-0"
-					data-cms-ui
-				>
+				<PrimaryButton type="submit" className="px-3 py-1.5 text-[12px] rounded-cms-sm shrink-0">
 					Apply
-				</button>
+				</PrimaryButton>
 
 				{onRemove && (
 					<button

package/src/editor/components/markdown-editor-overlay.tsx

@@ -20,6 +20,8 @@ import {
 import { CreateModeFrontmatter, EditModeFrontmatter } from './frontmatter-fields'
 import { FrontmatterSidebar, partitionFields } from './frontmatter-sidebar'
 import { MarkdownInlineEditor } from './markdown-inline-editor'
+import { CancelButton, PrimaryButton } from './modal-shell'
+import { Spinner } from './spinner'
 
 /**
  * Wrapper component that renders the editor in place of markdown content.
@@ -55,6 +57,17 @@ export function MarkdownEditorOverlay() {
 	const previewTargetRef = useRef<HTMLElement | null>(null)
 	const editorInstanceRef = useRef<Editor | null>(null)
 
+	// Lock page scroll while the modal overlay is visible (not during preview)
+	useEffect(() => {
+		if (!page || isPreview) return
+		const html = document.documentElement
+		const prevOverflow = html.style.overflow
+		html.style.overflow = 'hidden'
+		return () => {
+			html.style.overflow = prevOverflow
+		}
+	}, [!!page, isPreview])
+
 	useEffect(() => {
 		if (isCreateMode || isDataCollection) {
 			setShowFrontmatter(true)
@@ -76,6 +89,13 @@ export function MarkdownEditorOverlay() {
 
 	/** Find the [data-cms-markdown] wrapper element on the actual page (not CMS UI). */
 	const findMarkdownWrapper = useCallback((): HTMLElement | null => {
+		// Use the active element ID to target the correct wrapper directly
+		const activeId = markdownEditorState.value.activeElementId
+		if (activeId) {
+			const el = document.querySelector(`[data-cms-id="${activeId}"]`) as HTMLElement | null
+			if (el) return el
+		}
+		// Fallback: find any markdown wrapper
 		const SKIP_TAGS = new Set(['BODY', 'HTML', 'BUTTON', 'SPAN', 'A'])
 		const candidates = document.querySelectorAll('[data-cms-markdown]:not([data-cms-ui])')
 		for (const c of candidates) {
@@ -348,8 +368,7 @@ export function MarkdownEditorOverlay() {
 				>
 					Back to Editor
 				</button>
-				<button
-					type="button"
+				<PrimaryButton
 					onClick={() => {
 						const currentContent = currentMarkdownPage.value?.content
 						if (currentContent !== undefined) {
@@ -357,12 +376,11 @@ export function MarkdownEditorOverlay() {
 						}
 					}}
 					disabled={isSaving}
-					class="px-3 py-1.5 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
-					data-cms-ui
+					className="px-3 py-1.5 flex items-center gap-1.5"
 				>
-					{isSaving && <div class="animate-spin rounded-full h-3 w-3 border-2 border-cms-primary-text/30 border-t-cms-primary-text" />}
+					{isSaving && <Spinner size="xs" className="text-cms-primary-text" />}
 					{isSaving ? 'Saving...' : 'Save'}
-				</button>
+				</PrimaryButton>
 			</div>
 		)
 	}
@@ -375,11 +393,22 @@ export function MarkdownEditorOverlay() {
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}
 		>
-			<div
+			<form
 				class={`bg-cms-dark rounded-cms-xl shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 w-full max-h-[90vh] flex flex-col ${
 					hasSidebar ? 'max-w-6xl' : 'max-w-4xl'
 				}`}
 				data-cms-ui
+				onSubmit={(e) => {
+					e.preventDefault()
+					if (isCreateMode) {
+						handleCreate()
+					} else {
+						const currentContent = currentMarkdownPage.value?.content
+						if (currentContent !== undefined) {
+							handleSave(currentContent)
+						}
+					}
+				}}
 			>
 				{/* Header */}
 				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
@@ -484,44 +513,13 @@ export function MarkdownEditorOverlay() {
 								Preview
 							</button>
 						)}
-						<button
-							type="button"
-							onClick={handleCancel}
-							class="px-4 py-2 text-sm text-white/70 hover:text-white hover:bg-white/10 rounded-cms-pill transition-colors"
-							data-cms-ui
-						>
-							Cancel
-						</button>
-						{isCreateMode
-							? (
-								<button
-									type="button"
-									onClick={handleCreate}
-									disabled={isSaving || !(page.frontmatter.title as string)?.trim()}
-									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-									data-cms-ui
-								>
-									{isSaving && <div class="animate-spin rounded-full h-3.5 w-3.5 border-2 border-cms-primary-text/30 border-t-cms-primary-text" />}
-									{isSaving ? 'Creating...' : `Create ${collectionLabel}`}
-								</button>
-							)
-							: (
-								<button
-									type="button"
-									onClick={() => {
-										const currentContent = currentMarkdownPage.value?.content
-										if (currentContent !== undefined) {
-											handleSave(currentContent)
-										}
-									}}
-									disabled={isSaving}
-									class="px-4 py-2 text-sm bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-									data-cms-ui
-								>
-									{isSaving && <div class="animate-spin rounded-full h-3.5 w-3.5 border-2 border-cms-primary-text/30 border-t-cms-primary-text" />}
-									{isSaving ? 'Saving...' : 'Save'}
-								</button>
-							)}
+						<CancelButton onClick={handleCancel} />
+						<PrimaryButton type="submit" disabled={isSaving} className="px-4 py-2 flex items-center gap-2">
+							{isSaving && <Spinner size="sm" className="text-cms-primary-text" />}
+							{isSaving
+								? (isCreateMode ? 'Creating...' : 'Saving...')
+								: (isCreateMode ? `Create ${collectionLabel}` : 'Save')}
+						</PrimaryButton>
 					</div>
 				</div>
 
@@ -577,7 +575,7 @@ export function MarkdownEditorOverlay() {
 						/>
 					)}
 				</div>
-			</div>
+			</form>
 		</div>
 	)
 }