@nuasite/cms 0.29.0 → 0.31.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'
 
 // ============================================================================
@@ -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/image-overlay.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
+import { getCaretRangeFromPoint } from '../dom'
 import * as signals from '../signals'
 
 export interface ImageOverlayProps {
@@ -122,24 +123,12 @@ export function ImageOverlay({ visible, rect, element, cmsId }: ImageOverlayProp
 				if (el instanceof HTMLElement && el.contentEditable === 'true') {
 					e.preventDefault()
 					e.stopPropagation()
-					// Focus the element and place cursor at click position
 					el.focus()
-					// Try to place cursor at the click position using caretPositionFromPoint
-					const caretPos = document.caretPositionFromPoint?.(e.clientX, e.clientY)
-						?? (document as { caretRangeFromPoint?: (x: number, y: number) => Range | null }).caretRangeFromPoint?.(e.clientX, e.clientY)
-					if (caretPos) {
+					const range = getCaretRangeFromPoint(e.clientX, e.clientY)
+					if (range) {
 						const selection = window.getSelection()
 						if (selection) {
 							selection.removeAllRanges()
-							const range = document.createRange()
-							if ('offsetNode' in caretPos) {
-								// caretPositionFromPoint result
-								range.setStart(caretPos.offsetNode, caretPos.offset)
-							} else {
-								// caretRangeFromPoint result (Range)
-								range.setStart(caretPos.startContainer, caretPos.startOffset)
-							}
-							range.collapse(true)
 							selection.addRange(range)
 						}
 					}

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>
 

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

@@ -20,6 +20,7 @@ import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMark
 import { LinkEditPopover } from './link-edit-popover'
 import { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
+import { Spinner } from './spinner'
 
 export interface MarkdownInlineEditorProps {
 	elementId: string
@@ -649,7 +650,7 @@ export function MarkdownInlineEditor({
 				{/* Loading state */}
 				{!isReady && (
 					<div class="absolute inset-0 flex items-center justify-center bg-cms-dark/80">
-						<div class="animate-spin rounded-full h-6 w-6 border-2 border-white/30 border-t-cms-primary" />
+						<Spinner size="lg" className="text-cms-primary" />
 					</div>
 				)}
 			</div>

package/src/editor/components/mdx-component-picker.tsx

@@ -2,7 +2,7 @@ import { useState } from 'preact/hooks'
 import { getComponentDefinitions } from '../manifest'
 import { manifest, mdxComponentPickerOpen } from '../signals'
 import { ComponentCard, getDefaultProps } from './component-card'
-import { CancelButton, ModalBackdrop, ModalHeader } from './modal-shell'
+import { CancelButton, ModalBackdrop, ModalHeader, PrimaryButton } from './modal-shell'
 import { PropEditor } from './prop-editor'
 
 export interface MdxComponentPickerProps {
@@ -106,12 +106,9 @@ export function MdxComponentPicker({ onInsert }: MdxComponentPickerProps) {
 						</div>
 						<div class="px-5 py-4 border-t border-white/10 flex gap-2 justify-end">
 							<CancelButton onClick={resetSelection} label="Back" />
-							<button
-								onClick={handleConfirmInsert}
-								class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
-							>
+							<PrimaryButton onClick={handleConfirmInsert} className="px-4">
 								Insert
-							</button>
+							</PrimaryButton>
 						</div>
 					</>
 				)

package/src/editor/components/media-library.tsx

@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
+import { useSearchFilter } from '../hooks/useSearchFilter'
 import { createMediaFolder, fetchMediaLibrary, fetchProjectImages, uploadMedia } from '../markdown-api'
 import { config, isMediaLibraryOpen, mediaLibraryState, resetMediaLibraryState, showToast } from '../signals'
 import type { MediaFolderItem, MediaItem, MediaTypeFilter } from '../types'
+import { CloseButton, PrimaryButton } from './modal-shell'
+import { Spinner } from './spinner'
 
 const VECTOR_TYPES = new Set(['image/svg+xml', 'image/x-icon'])
 
@@ -187,18 +190,12 @@ export function MediaLibrary() {
 		setShowNewFolderInput(false)
 	}
 
-	// Client-side filtering: both search query AND type filter
-	const filteredItems = useMemo(() => {
-		let items = allItems
-		if (typeFilter !== 'all') {
-			items = items.filter((item) => matchesTypeFilter(item.contentType, typeFilter))
-		}
-		if (searchQuery) {
-			const q = searchQuery.toLowerCase()
-			items = items.filter((item) => item.filename.toLowerCase().includes(q))
-		}
-		return items
-	}, [searchQuery, typeFilter, allItems])
+	// Client-side filtering: type filter, then search query
+	const typeFiltered = useMemo(
+		() => typeFilter === 'all' ? allItems : allItems.filter(item => matchesTypeFilter(item.contentType, typeFilter)),
+		[typeFilter, allItems],
+	)
+	const filteredItems = useSearchFilter(typeFiltered, searchQuery, item => item.filename)
 
 	// Build breadcrumb segments
 	const breadcrumbs = useMemo(() => {
@@ -230,16 +227,7 @@ export function MediaLibrary() {
 				{/* Header */}
 				<div class="flex items-center justify-between p-5 border-b border-white/10">
 					<h2 class="text-lg font-semibold text-white">Media Library</h2>
-					<button
-						type="button"
-						onClick={handleClose}
-						class="text-white/50 hover:text-white p-1.5 hover:bg-white/10 rounded-full transition-colors"
-						data-cms-ui
-					>
-						<svg class="w-5 h-5" 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} />
 				</div>
 
 				{/* Breadcrumbs */}
@@ -307,14 +295,9 @@ export function MediaLibrary() {
 								/>
 							</svg>
 						</button>
-						<button
-							type="button"
-							onClick={handleUploadClick}
-							class="px-5 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill text-sm font-medium hover:bg-cms-primary-hover transition-colors"
-							data-cms-ui
-						>
+						<PrimaryButton onClick={handleUploadClick}>
 							Upload
-						</button>
+						</PrimaryButton>
 						<input
 							ref={fileInputRef}
 							type="file"
@@ -372,14 +355,9 @@ export function MediaLibrary() {
 							class="flex-1 px-3 py-1.5 bg-white/10 border border-white/20 rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40"
 							data-cms-ui
 						/>
-						<button
-							type="button"
-							onClick={handleCreateFolder}
-							class="px-3 py-1.5 bg-cms-primary text-cms-primary-text rounded-cms-md text-xs font-medium hover:bg-cms-primary-hover transition-colors"
-							data-cms-ui
-						>
+						<PrimaryButton onClick={handleCreateFolder} className="px-3 py-1.5 rounded-cms-md text-xs">
 							Create
-						</button>
+						</PrimaryButton>
 						<button
 							type="button"
 							onClick={() => {
@@ -414,7 +392,7 @@ export function MediaLibrary() {
 					{isLoading
 						? (
 							<div class="flex items-center justify-center h-48">
-								<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-cms-primary" />
+								<Spinner size="xl" className="text-cms-primary" />
 							</div>
 						)
 						: folders.length === 0 && filteredItems.length === 0