@nuasite/cms 0.29.0 → 0.30.0

package/package.json

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

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,
@@ -12,7 +13,7 @@ import {
 	selectedBrowserCollection,
 } from '../signals'
 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)
@@ -33,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
 
@@ -116,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>

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
@@ -494,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.

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'
 
 // ============================================================================
@@ -334,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)
 // ============================================================================
@@ -356,14 +402,7 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 	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
@@ -373,21 +412,14 @@ 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()
@@ -403,8 +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 === 'Escape') {
-			setIsOpen(false)
 		}
 	}, [isOpen, filtered, highlightedIndex, selectOption])
 
@@ -419,7 +449,7 @@ 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}
@@ -428,8 +458,8 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 				placeholder={placeholder}
 				required={required}
 				onInput={handleInput}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
+				onFocus={() => setIsOpen(true)}
+				onBlur={() => setTimeout(closeDropdown, 150)}
 				onKeyDown={handleKeyDown}
 				autocomplete="off"
 				class={cn(
@@ -440,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>
 	)
 }
@@ -510,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)) {
@@ -524,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 */}
@@ -580,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/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>
 		)
 	}
@@ -495,37 +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="submit"
-									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 ? 'Creating...' : `Create ${collectionLabel}`}
-								</button>
-							)
-							: (
-								<button
-									type="submit"
-									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>