@nuasite/cms 0.39.1 → 0.40.0

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

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { slugify } from '../../shared'
 import { updateMarkdownPage } from '../api'
 import { STORAGE_KEYS, Z_INDEX } from '../constants'
+import { cn } from '../lib/cn'
 import { createMarkdownPage } from '../markdown-api'
 import { MDX_EXPR_PREFIX } from '../milkdown-mdx-plugin'
 import {
@@ -13,11 +14,14 @@ import {
 	markdownEditorState,
 	pendingCollectionEntries,
 	resetMarkdownEditorState,
+	showConfirmDialog,
 	showToast,
 	startRedirectCountdown,
 	updateMarkdownFrontmatter,
 } from '../signals'
 import { clearMarkdownDraft } from '../storage'
+import { STRINGS } from '../strings'
+import type { FieldDefinition } from '../types'
 import { CreateModeFrontmatter, EditModeFrontmatter } from './frontmatter-fields'
 import { FrontmatterSidebar, partitionFields } from './frontmatter-sidebar'
 import { MarkdownInlineEditor } from './markdown-inline-editor'
@@ -36,9 +40,16 @@ export function MarkdownEditorOverlay() {
 	const collectionDef = editorState.collectionDefinition
 
 	const activeCollectionDef = isCreateMode ? createOptions?.collectionDefinition : collectionDef
-	const { sidebar: sidebarFields, header: headerFields } = activeCollectionDef
-		? partitionFields(activeCollectionDef.fields)
-		: { sidebar: [], header: [] }
+	// Always surface a Draft toggle in the sidebar — even when the schema scanner
+	// didn't pick it up (e.g. inferred schemas where draft only appears on some entries).
+	// Push a proper FieldDefinition into the input list so partitionFields() handles
+	// placement (above the Date field) via its existing logic.
+	const fields: FieldDefinition[] = activeCollectionDef ? [...activeCollectionDef.fields] : []
+	const draftInPage = page && Object.hasOwn(page.frontmatter, 'draft')
+	if (draftInPage && !fields.some((f) => f.name === 'draft')) {
+		fields.push({ name: 'draft', type: 'boolean', required: false, position: 'sidebar', role: 'publish-toggle' })
+	}
+	const { sidebar: sidebarFields, header: headerFields } = partitionFields(fields)
 	const hasSidebar = sidebarFields.length > 0
 	const isDataCollection = activeCollectionDef?.type === 'data'
 	// Derive MDX mode from the actual file extension when available
@@ -58,14 +69,19 @@ 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)
+	// Lock page scroll while the modal overlay is visible (not during preview).
+	// scrollbar-gutter: stable reserves space for the scrollbar so the page
+	// doesn't shift horizontally when overflow flips to hidden — no manual padding math.
 	useEffect(() => {
 		if (!page || isPreview) return
 		const html = document.documentElement
 		const prevOverflow = html.style.overflow
+		const prevGutter = html.style.scrollbarGutter
 		html.style.overflow = 'hidden'
+		html.style.scrollbarGutter = 'stable'
 		return () => {
 			html.style.overflow = prevOverflow
+			html.style.scrollbarGutter = prevGutter
 		}
 	}, [!!page, isPreview])
 
@@ -165,17 +181,17 @@ export function MarkdownEditorOverlay() {
 					setIsSaving(false)
 
 					clearMarkdownDraft(currentPage.filePath)
-					showToast('Content saved', 'success')
+					showToast(STRINGS.markdown.saveSuccess, 'success')
 					// Clear pending entry navigation so editor doesn't auto-open after save
 					sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
 					resetMarkdownEditorState()
 				} else {
-					showToast(result.error || 'Failed to save markdown', 'error')
+					showToast(result.error || STRINGS.markdown.saveFailed, 'error')
 					setIsSaving(false)
 				}
 			} catch (error) {
 				const message = error instanceof Error ? error.message : 'Unknown error'
-				showToast(`Save failed: ${message}`, 'error')
+				showToast(STRINGS.markdown.saveFailedDetails(message), 'error')
 				setIsSaving(false)
 			}
 		},
@@ -190,13 +206,13 @@ export function MarkdownEditorOverlay() {
 
 		const title = (currentPage.frontmatter.title as string) || ''
 		if (!title.trim()) {
-			showToast('Please enter a title', 'error')
+			showToast(STRINGS.markdown.titleRequired, 'error')
 			return
 		}
 
 		const slug = currentPage.slug || slugify(title)
 		if (!slug) {
-			showToast('Please enter a slug', 'error')
+			showToast(STRINGS.markdown.slugRequired, 'error')
 			return
 		}
 
@@ -236,17 +252,17 @@ export function MarkdownEditorOverlay() {
 					}
 				}
 
-				showToast('Page created', 'success')
+				showToast(STRINGS.markdown.pageCreated, 'success')
 				resetMarkdownEditorState()
 				if (redirectUrl) {
 					startRedirectCountdown(redirectUrl, title.trim())
 				}
 			} else {
-				showToast(result.error || 'Failed to create page', 'error')
+				showToast(result.error || STRINGS.markdown.createFailed, 'error')
 			}
 		} catch (error) {
 			const message = error instanceof Error ? error.message : 'Unknown error'
-			showToast(`Create failed: ${message}`, 'error')
+			showToast(STRINGS.markdown.createFailedDetails(message), 'error')
 		} finally {
 			setIsSaving(false)
 		}
@@ -260,7 +276,7 @@ export function MarkdownEditorOverlay() {
 			// Enter preview — inject editor HTML into the markdown wrapper element.
 			const el = findMarkdownWrapper()
 			if (!el) {
-				showToast('Could not find page element to preview', 'error')
+				showToast(STRINGS.markdown.previewElementMissing, 'error')
 				return
 			}
 			originalHTMLRef.current = el.innerHTML
@@ -307,7 +323,7 @@ export function MarkdownEditorOverlay() {
 				console.error('Failed to get editor HTML for preview:', error)
 				originalHTMLRef.current = null
 				previewTargetRef.current = null
-				showToast('Failed to generate preview', 'error')
+				showToast(STRINGS.markdown.previewGenerationFailed, 'error')
 				return
 			}
 			setIsPreview(true)
@@ -320,7 +336,18 @@ export function MarkdownEditorOverlay() {
 		}
 	}, [isPreview, restoreOriginalHTML, findMarkdownWrapper])
 
-	const handleCancel = useCallback(() => {
+	const handleCancel = useCallback(async () => {
+		const hasUnsavedChanges = currentMarkdownPage.value?.isDirty === true
+		if (hasUnsavedChanges) {
+			const confirmed = await showConfirmDialog({
+				title: STRINGS.dialog.discardMarkdown.title,
+				message: STRINGS.dialog.discardMarkdown.message,
+				confirmLabel: STRINGS.dialog.discardMarkdown.confirm,
+				cancelLabel: STRINGS.dialog.discardMarkdown.cancel,
+				variant: 'danger',
+			})
+			if (!confirmed) return
+		}
 		restoreOriginalHTML()
 		isMarkdownPreview.value = false
 		resetMarkdownEditorState()
@@ -390,15 +417,16 @@ export function MarkdownEditorOverlay() {
 	return (
 		<div
 			style={{ zIndex: Z_INDEX.MODAL }}
-			class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 backdrop-blur-md"
+			class="fixed inset-0 bg-black/40 flex items-start justify-center p-4 pt-[5vh] backdrop-blur-md"
 			data-cms-ui
 			onMouseDown={stopPropagation}
 			onClick={stopPropagation}
 		>
 			<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'
-				}`}
+				class={cn(
+					'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 overflow-hidden',
+					hasSidebar ? 'max-w-6xl' : 'max-w-4xl',
+				)}
 				data-cms-ui
 				onSubmit={(e) => {
 					e.preventDefault()
@@ -436,6 +464,11 @@ export function MarkdownEditorOverlay() {
 						<span class="text-base font-semibold text-white truncate">
 							{(page.frontmatter.title as string) || (page.frontmatter.name as string) || (isDataCollection ? 'Entry name' : 'Page title')}
 						</span>
+						{activeCollectionDef && (
+							<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-white/70 bg-white/10 rounded-full border border-white/15">
+								{activeCollectionDef.label}
+							</span>
+						)}
 					</div>
 					<div class="flex items-center gap-2 shrink-0">
 						{!isDataCollection && (
@@ -467,7 +500,7 @@ export function MarkdownEditorOverlay() {
 										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
 									/>
 								</svg>
-								Metadata
+								{showFrontmatter ? 'Hide' : 'Show'} Metadata
 								<svg
 									class={`w-3.5 h-3.5 transition-transform ${showFrontmatter ? 'rotate-180' : ''}`}
 									fill="none"
@@ -530,26 +563,54 @@ export function MarkdownEditorOverlay() {
 					{/* Main: frontmatter header + editor */}
 					<div class="flex-1 min-w-0 flex flex-col">
 						{/* Frontmatter Editor (header-positioned fields only) */}
-						{(showFrontmatter || isDataCollection) && (
-							<div class={`px-5 py-4 border-b border-white/10 bg-white/5 overflow-y-auto ${isDataCollection ? 'flex-1' : 'max-h-[40vh]'}`}>
-								{isCreateMode && createOptions
-									? (
-										<CreateModeFrontmatter
-											page={page}
-											collectionDefinition={createOptions.collectionDefinition}
-											fields={headerFields}
-											onSlugManualEdit={() => setSlugManuallyEdited(true)}
-										/>
-									)
-									: (
-										<EditModeFrontmatter
-											page={page}
-											collectionDefinition={collectionDef}
-											fields={headerFields}
-										/>
+						{isDataCollection
+							? (
+								<div class="px-5 py-4 border-b border-white/10 bg-white/5 overflow-y-auto flex-1">
+									{isCreateMode && createOptions
+										? (
+											<CreateModeFrontmatter
+												page={page}
+												collectionDefinition={createOptions.collectionDefinition}
+												fields={headerFields}
+												onSlugManualEdit={() => setSlugManuallyEdited(true)}
+											/>
+										)
+										: (
+											<EditModeFrontmatter
+												page={page}
+												collectionDefinition={collectionDef}
+												fields={headerFields}
+											/>
+										)}
+								</div>
+							)
+							: (
+								<div
+									class={cn(
+										'overflow-hidden transition-[max-height,opacity,border-bottom-width] duration-300 ease-out border-white/10',
+										showFrontmatter ? 'max-h-[40vh] opacity-100 border-b' : 'max-h-0 opacity-0 border-b-0',
 									)}
-							</div>
-						)}
+								>
+									<div class="px-5 py-4 bg-white/5 overflow-y-auto max-h-[40vh]" style={{ scrollbarGutter: 'stable' }}>
+										{isCreateMode && createOptions
+											? (
+												<CreateModeFrontmatter
+													page={page}
+													collectionDefinition={createOptions.collectionDefinition}
+													fields={headerFields}
+													onSlugManualEdit={() => setSlugManuallyEdited(true)}
+												/>
+											)
+											: (
+												<EditModeFrontmatter
+													page={page}
+													collectionDefinition={collectionDef}
+													fields={headerFields}
+												/>
+											)}
+									</div>
+								</div>
+							)}
 
 						{/* Editor — hidden for data collections (JSON/YAML have no body) */}
 						{!isDataCollection && (

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

@@ -12,11 +12,14 @@ import {
 import { gfm, toggleStrikethroughCommand } from '@milkdown/preset-gfm'
 import { callCommand, insert, replaceAll } from '@milkdown/utils'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { lift } from 'prosemirror-commands'
 import { useLinkPopover } from '../hooks/useLinkPopover'
+import { cn } from '../lib/cn'
 import { uploadMedia } from '../markdown-api'
 import { insertMdxComponentCommand, mdxComponentPlugin } from '../milkdown-mdx-plugin'
 import { type ActiveFormats, defaultActiveFormats, isInListType, setupFormatTracking, toggleHeading } from '../milkdown-utils'
 import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
+import { STRINGS } from '../strings'
 import { LinkEditPopover } from './link-edit-popover'
 import { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
@@ -108,7 +111,7 @@ export function MarkdownInlineEditor({
 				cleanupTracking = setupFormatTracking(editor, setActiveFormats)
 			} catch (error) {
 				console.error('Milkdown editor initialization failed:', error)
-				showToast('Failed to initialize markdown editor', 'error')
+				showToast(STRINGS.markdown.initFailed, 'error')
 			}
 		}
 
@@ -176,10 +179,29 @@ export function MarkdownInlineEditor({
 		() => runCommand(toggleStrikethroughCommand.key),
 		[runCommand],
 	)
-	const handleQuote = useCallback(
-		() => runCommand(wrapInBlockquoteCommand.key),
-		[runCommand],
-	)
+	const handleQuote = useCallback(() => {
+		if (!editorInstanceRef.current) return
+		try {
+			const view = editorInstanceRef.current.ctx.get(editorViewCtx)
+			const { $from } = view.state.selection
+			let inBlockquote = false
+			for (let depth = $from.depth; depth > 0; depth--) {
+				if ($from.node(depth).type.name === 'blockquote') {
+					inBlockquote = true
+					break
+				}
+			}
+			if (inBlockquote) {
+				// Lift selection out of the blockquote (may need multiple lifts for nested wrappers)
+				lift(view.state, view.dispatch)
+				view.focus()
+			} else {
+				runCommand(wrapInBlockquoteCommand.key)
+			}
+		} catch {
+			runCommand(wrapInBlockquoteCommand.key)
+		}
+	}, [runCommand])
 
 	// Check if selection is inside a list of given type
 	const checkInList = useCallback(
@@ -269,7 +291,7 @@ export function MarkdownInlineEditor({
 
 		const file = files[0]
 		if (!file || !file.type.startsWith('image/')) {
-			showToast('Please drop an image file', 'error')
+			showToast(STRINGS.media.imageRequired, 'error')
 			return
 		}
 
@@ -288,16 +310,16 @@ export function MarkdownInlineEditor({
 				if (editorInstanceRef.current) {
 					try {
 						editorInstanceRef.current.action(insert(imageMarkdown))
-						showToast('Image uploaded and inserted', 'success')
+						showToast(STRINGS.media.imageInserted, 'success')
 					} catch (error) {
 						console.error('Failed to insert image:', error)
 					}
 				}
 			} else {
-				showToast(result.error || 'Upload failed', 'error')
+				showToast(result.error || STRINGS.media.uploadFailed, 'error')
 			}
 		} catch (error) {
-			showToast('Upload failed', 'error')
+			showToast(STRINGS.media.uploadFailed, 'error')
 		} finally {
 			setUploadProgress(null)
 		}
@@ -326,13 +348,13 @@ export function MarkdownInlineEditor({
 
 						if (editorInstanceRef.current) {
 							editorInstanceRef.current.action(insert(imageMarkdown))
-							showToast('Image uploaded and inserted', 'success')
+							showToast(STRINGS.media.imageInserted, 'success')
 						}
 					} else {
-						showToast(result.error || 'Upload failed', 'error')
+						showToast(result.error || STRINGS.media.uploadFailed, 'error')
 					}
 				} catch (error) {
-					showToast('Upload failed', 'error')
+					showToast(STRINGS.media.uploadFailed, 'error')
 				} finally {
 					setUploadProgress(null)
 				}
@@ -422,6 +444,7 @@ export function MarkdownInlineEditor({
 						onClick={() => handleInsertHeading(1)}
 						title="Heading 1"
 						active={activeFormats.heading === 1}
+						compact
 					>
 						<span class="text-xs font-bold">H1</span>
 					</ToolbarButton>
@@ -429,6 +452,7 @@ export function MarkdownInlineEditor({
 						onClick={() => handleInsertHeading(2)}
 						title="Heading 2"
 						active={activeFormats.heading === 2}
+						compact
 					>
 						<span class="text-xs font-bold">H2</span>
 					</ToolbarButton>
@@ -436,6 +460,7 @@ export function MarkdownInlineEditor({
 						onClick={() => handleInsertHeading(3)}
 						title="Heading 3"
 						active={activeFormats.heading === 3}
+						compact
 					>
 						<span class="text-xs font-bold">H3</span>
 					</ToolbarButton>
@@ -443,6 +468,7 @@ export function MarkdownInlineEditor({
 						onClick={() => handleInsertHeading(4)}
 						title="Heading 4"
 						active={activeFormats.heading === 4}
+						compact
 					>
 						<span class="text-xs font-bold">H4</span>
 					</ToolbarButton>
@@ -583,17 +609,6 @@ export function MarkdownInlineEditor({
 				</div>
 			</div>
 
-			{/* Link edit popover — rendered outside the toolbar stacking context so it layers above the sidebar */}
-			{linkPopoverState && (
-				<LinkEditPopover
-					initialUrl={linkPopoverState.href}
-					suggestions={pageSuggestions}
-					onApply={applyLink}
-					onRemove={linkPopoverState.isEdit ? removeLink : undefined}
-					onClose={closeLinkPopover}
-				/>
-			)}
-
 			{/* Editor */}
 			<div
 				class={`flex-1 min-h-0 overflow-auto relative transition-colors ${isDragging ? 'bg-cms-primary/10' : ''}`}
@@ -602,6 +617,18 @@ export function MarkdownInlineEditor({
 				onDrop={handleDrop}
 				onPaste={handlePaste}
 			>
+				{/* Link edit popover — overlays the top of the editor so it doesn't push content */}
+				{linkPopoverState && (
+					<div class="absolute top-0 left-0 right-0 z-40">
+						<LinkEditPopover
+							initialUrl={linkPopoverState.href}
+							suggestions={pageSuggestions}
+							onApply={applyLink}
+							onRemove={linkPopoverState.isEdit ? removeLink : undefined}
+							onClose={closeLinkPopover}
+						/>
+					</div>
+				)}
 				<div
 					ref={editorRef}
 					class="milkdown-editor milkdown-dark prose prose-invert prose-sm max-w-none p-6 min-h-75 focus:outline-none"
@@ -666,6 +693,8 @@ interface ToolbarButtonProps {
 	title: string
 	children: preact.ComponentChildren
 	active?: boolean
+	/** Use tighter padding suitable for text-only labels like H1/H2 */
+	compact?: boolean
 }
 
 function ToolbarButton({
@@ -673,16 +702,19 @@ function ToolbarButton({
 	title,
 	children,
 	active,
+	compact,
 }: ToolbarButtonProps) {
 	return (
 		<button
 			type="button"
 			onClick={onClick}
-			class={`p-2 rounded-cms-sm transition-colors ${
+			class={cn(
+				'rounded-cms-sm transition-colors',
+				compact ? 'px-2 pt-0.5 pb-1' : 'p-2',
 				active
 					? 'bg-cms-primary text-cms-primary-text'
-					: 'hover:bg-white/10 text-white/70 hover:text-white'
-			}`}
+					: 'hover:bg-white/10 text-white/70 hover:text-white',
+			)}
 			title={title}
 			data-cms-ui
 		>

package/src/editor/components/mdx-block-view.tsx

@@ -302,7 +302,7 @@ function InlineInput({ value, onChange, placeholder }: { value: string; onChange
 				if (el.value !== value) onChange(el.value)
 			}}
 			placeholder={placeholder}
-			class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white/80 placeholder:text-white/30 outline-none focus:border-white/25 transition-colors"
+			class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white/80 placeholder:text-white/30 outline-none focus:border-white/40 transition-colors"
 		/>
 	)
 }
@@ -317,7 +317,7 @@ const INLINE_INPUT_TYPES: Record<string, string> = {
 	tel: 'tel',
 }
 const inputClass =
-	'w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white/80 placeholder:text-white/30 outline-none focus:border-white/25 transition-colors'
+	'w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white/80 placeholder:text-white/30 outline-none focus:border-white/40 transition-colors'
 
 function InlinePropField(
 	{ name, value, propDef, onChange }: { name: string; value: string; propDef?: ComponentProp; onChange: (v: string) => void },
@@ -434,7 +434,7 @@ export function MdxBlockCard({ componentName, props, hasExpressions, slotContent
 			data-cms-ui
 		>
 			{/* Header */}
-			<div class="flex items-center justify-between px-4 py-2.5 bg-white/5 border-b border-white/10 rounded-t-cms-md">
+			<div class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/10 rounded-t-cms-md">
 				<div class="flex items-center gap-2">
 					<MdxComponentIcon />
 					<span class="text-[13px] font-semibold text-white">{componentName}</span>
@@ -461,7 +461,7 @@ export function MdxBlockCard({ componentName, props, hasExpressions, slotContent
 
 			{/* Slot content editor */}
 			{hasSlotContent && (
-				<div class="px-4 py-2.5 border-b border-white/10" data-mdx-action="children">
+				<div class="px-4 py-2 border-b border-white/10" data-mdx-action="children">
 					<MiniMilkdownEditor
 						value={slotContent || ''}
 						onChange={onSlotContentChange}

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

@@ -88,7 +88,7 @@ export function MdxComponentPicker({ onInsert }: MdxComponentPickerProps) {
 													onInput={(e) => setChildrenValue((e.target as HTMLTextAreaElement).value)}
 													placeholder="Enter content..."
 													rows={3}
-													class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md resize-y"
+													class="w-full px-4 py-2 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md resize-y"
 												/>
 											</div>
 										)}
@@ -121,7 +121,7 @@ export function MdxComponentPicker({ onInsert }: MdxComponentPickerProps) {
 								value={searchQuery}
 								onInput={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
 								placeholder="Search components..."
-								class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
+								class="w-full px-4 py-2 bg-white/10 border border-white/20 text-[13px] text-white placeholder:text-white/40 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-md"
 							/>
 						</div>
 						<div class="p-5 overflow-y-auto flex-1">

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

@@ -3,6 +3,7 @@ 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 { STRINGS } from '../strings'
 import type { MediaFolderItem, MediaItem, MediaTypeFilter } from '../types'
 import { CloseButton, PrimaryButton } from './modal-shell'
 import { Spinner } from './spinner'
@@ -77,7 +78,7 @@ export function MediaLibrary() {
 			}
 			setAllItems(combined)
 		} catch (error) {
-			showToast('Failed to load media library', 'error')
+			showToast(STRINGS.media.loadFailed, 'error')
 		} finally {
 			setIsLoading(false)
 		}
@@ -129,7 +130,7 @@ export function MediaLibrary() {
 				if (uploadContext && result.url.startsWith('./')) {
 					insertCallback?.(result.url, '')
 					handleClose()
-					showToast('Uploaded next to entry', 'success')
+					showToast(STRINGS.media.uploadedNextToEntry, 'success')
 					return
 				}
 
@@ -142,12 +143,12 @@ export function MediaLibrary() {
 					folder: currentFolder || undefined,
 				}
 				setAllItems((prev) => [newItem, ...prev])
-				showToast('File uploaded successfully', 'success')
+				showToast(STRINGS.media.uploadSucceeded, 'success')
 			} else {
-				showToast(result.error || 'Upload failed', 'error')
+				showToast(result.error || STRINGS.media.uploadFailed, 'error')
 			}
 		} catch (error) {
-			showToast('Upload failed', 'error')
+			showToast(STRINGS.media.uploadFailed, 'error')
 		} finally {
 			setUploadProgress(null)
 		}
@@ -167,7 +168,7 @@ export function MediaLibrary() {
 
 		const file = e.dataTransfer?.files[0]
 		if (!file || !file.type.startsWith('image/')) {
-			showToast('Please drop an image file', 'error')
+			showToast(STRINGS.media.imageRequired, 'error')
 			return
 		}
 		await handleUploadFile(file)
@@ -182,7 +183,7 @@ export function MediaLibrary() {
 		const name = newFolderName.trim()
 		if (!name) return
 		if (/[/\\:*?"<>|]/.test(name)) {
-			showToast('Invalid folder name', 'error')
+			showToast(STRINGS.media.invalidFolderName, 'error')
 			return
 		}
 		const folderPath = currentFolder ? `${currentFolder}/${name}` : name
@@ -190,12 +191,12 @@ export function MediaLibrary() {
 			const result = await createMediaFolder(config.value, folderPath)
 			if (result.success) {
 				setFolders((prev) => [...prev, { name, path: folderPath }].sort((a, b) => a.name.localeCompare(b.name)))
-				showToast('Folder created', 'success')
+				showToast(STRINGS.media.folderCreated, 'success')
 			} else {
-				showToast(result.error || 'Failed to create folder', 'error')
+				showToast(result.error || STRINGS.media.folderCreateFailed, 'error')
 			}
 		} catch {
-			showToast('Failed to create folder', 'error')
+			showToast(STRINGS.media.folderCreateFailed, 'error')
 		}
 		setNewFolderName('')
 		setShowNewFolderInput(false)
@@ -236,7 +237,7 @@ export function MediaLibrary() {
 				data-cms-ui
 			>
 				{/* Header */}
-				<div class="flex items-center justify-between p-5 border-b border-white/10">
+				<div class="flex items-center justify-between px-5 py-4 border-b border-white/10">
 					<h2 class="text-lg font-semibold text-white">Media Library</h2>
 					<CloseButton onClick={handleClose} />
 				</div>
@@ -287,17 +288,17 @@ export function MediaLibrary() {
 							placeholder="Search files..."
 							value={searchQuery}
 							onInput={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
-							class="flex-1 px-4 py-2.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 focus:ring-1 focus:ring-white/10"
+							class="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10"
 							data-cms-ui
 						/>
 						<button
 							type="button"
 							onClick={() => setShowNewFolderInput((v) => !v)}
-							class="px-3 py-2.5 bg-white/10 text-white/70 rounded-cms-md text-sm hover:bg-white/15 hover:text-white transition-colors border border-white/20"
+							class="px-3 py-2.5 bg-white/10 text-white/70 rounded-cms-sm text-sm hover:bg-white/15 hover:text-white transition-colors border border-white/20"
 							title="New folder"
 							data-cms-ui
 						>
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
 									stroke-linecap="round"
 									stroke-linejoin="round"
@@ -363,10 +364,10 @@ export function MediaLibrary() {
 									setNewFolderName('')
 								}
 							}}
-							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"
+							class="flex-1 px-3 py-1.5 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40"
 							data-cms-ui
 						/>
-						<PrimaryButton onClick={handleCreateFolder} className="px-3 py-1.5 rounded-cms-md text-xs">
+						<PrimaryButton onClick={handleCreateFolder} className="px-3 py-1.5 rounded-cms-sm text-xs">
 							Create
 						</PrimaryButton>
 						<button
@@ -430,7 +431,7 @@ export function MediaLibrary() {
 										<button
 											type="button"
 											onClick={() => navigateToFolder(folder.path)}
-											class="w-full h-full rounded-cms-md overflow-hidden border-2 border-white/10 hover:border-white/30 focus:outline-none focus:border-white/30 transition-all bg-white/5 hover:bg-white/10 flex flex-col items-center justify-center gap-2"
+											class="w-full h-full rounded-cms-sm overflow-hidden border-2 border-white/10 hover:border-white/30 focus:outline-none focus:border-white/40 transition-all bg-white/5 hover:bg-white/10 flex flex-col items-center justify-center gap-2"
 											data-cms-ui
 										>
 											<svg
@@ -459,7 +460,7 @@ export function MediaLibrary() {
 										<button
 											type="button"
 											onClick={() => handleSelectImage(item)}
-											class="w-full h-full rounded-cms-md overflow-hidden border-2 border-white/10 hover:border-cms-primary focus:outline-none focus:border-cms-primary transition-all"
+											class="w-full h-full rounded-cms-sm overflow-hidden border-2 border-white/10 hover:border-cms-primary focus:outline-none focus:border-white/40 transition-all"
 											data-cms-ui
 										>
 											{item.contentType.startsWith('image/')