@nuasite/cms 0.39.2 → 0.41.0

package/src/editor/components/modal-shell.tsx

@@ -32,7 +32,7 @@ export function ModalHeader({ title, onBack, onClose }: {
 	onClose: () => void
 }) {
 	return (
-		<div class="flex items-center gap-3 p-5 border-b border-white/10">
+		<div class="flex items-center gap-3 px-5 py-4 border-b border-white/10">
 			{onBack && (
 				<button
 					type="button"
@@ -53,7 +53,20 @@ export function ModalHeader({ title, onBack, onClose }: {
 
 export function ModalFooter({ children }: { children: ComponentChildren }) {
 	return (
-		<div class="flex items-center justify-end gap-2 p-5 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+		<div class="flex items-center justify-end gap-2 py-3.5 px-4 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+			{children}
+		</div>
+	)
+}
+
+export function Section({ title, children, className }: {
+	title: string
+	children: ComponentChildren
+	className?: string
+}) {
+	return (
+		<div class={cn('space-y-4', className)}>
+			<h3 class="text-base font-semibold text-white/90">{title}</h3>
 			{children}
 		</div>
 	)
@@ -80,7 +93,7 @@ export function CancelButton({ onClick, label = 'Cancel', className }: { onClick
 			type="button"
 			onClick={onClick}
 			class={cn(
-				'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',
+				'py-2.5 px-3.5 text-sm text-white/80 font-medium rounded-cms-pill hover:bg-white/10 hover:text-white transition-colors cursor-pointer',
 				className,
 			)}
 			data-cms-ui

package/src/editor/components/prop-editor.tsx

@@ -68,7 +68,7 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 			<select
 				value={value}
 				onChange={(e) => onChange((e.target as HTMLSelectElement).value)}
-				class="w-full px-4 py-2.5 bg-white/10 border border-white/20 text-[13px] text-white 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 outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-sm"
 			>
 				{!prop.required && <option value="">— None —</option>}
 				{unionOptions.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
@@ -84,7 +84,7 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 					value={value}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					placeholder={prop.defaultValue || 'Select an image...'}
-					class="flex-1 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="flex-1 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-sm"
 				/>
 				<button
 					type="button"
@@ -93,7 +93,7 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 							onChange(url)
 						})
 					}}
-					class="px-3 py-2.5 bg-white/10 border border-white/20 text-white/70 hover:text-white hover:bg-white/15 rounded-cms-md transition-colors shrink-0"
+					class="px-3 py-2.5 bg-white/10 border border-white/20 text-white/70 hover:text-white hover:bg-white/15 rounded-cms-sm transition-colors shrink-0"
 					title="Browse media"
 				>
 					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@@ -115,14 +115,14 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 					type="color"
 					value={value || '#000000'}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
-					class="w-10 h-10 rounded-cms-md border border-white/20 bg-transparent cursor-pointer"
+					class="w-10 h-10 rounded-cms-sm border border-white/20 bg-transparent cursor-pointer"
 				/>
 				<input
 					type="text"
 					value={value}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					placeholder={prop.defaultValue || '#000000'}
-					class="flex-1 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 font-mono"
+					class="flex-1 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-sm font-mono"
 				/>
 			</div>
 		)
@@ -135,7 +135,7 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 				onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}
 				placeholder={prop.defaultValue || `Enter ${prop.name}...`}
 				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-sm resize-y"
 			/>
 		)
 	}
@@ -146,14 +146,14 @@ function renderPropInput(prop: ComponentProp, value: string, onChange: (value: s
 			value={value}
 			onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 			placeholder={prop.defaultValue || `Enter ${prop.name}...`}
-			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-sm"
 		/>
 	)
 }
 
 export function PropEditor({ prop, value, onChange }: PropEditorProps) {
 	return (
-		<div class="mb-4">
+		<div class="mb-2">
 			<label class="block text-[13px] font-medium text-white mb-1.5">
 				{prop.name}
 				{prop.required && <span class="text-cms-error ml-1">*</span>}
@@ -164,9 +164,6 @@ export function PropEditor({ prop, value, onChange }: PropEditorProps) {
 				</div>
 			)}
 			{renderPropInput(prop, value, onChange)}
-			<div class="text-[10px] text-white/40 mt-1.5 font-mono">
-				{prop.type}
-			</div>
 		</div>
 	)
 }
@@ -232,7 +229,7 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 		const slug = slugify(newName.trim())
 		return (
 			<form
-				class="p-3 bg-white/5 border border-white/15 rounded-cms-md space-y-3"
+				class="p-3 bg-white/5 border border-white/15 rounded-cms-sm space-y-3"
 				onSubmit={(e) => {
 					e.preventDefault()
 					handleCreate()
@@ -256,7 +253,7 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 					onInput={(e) => setNewName((e.target as HTMLInputElement).value)}
 					placeholder="Enter name..."
 					required
-					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-sm"
 					autoFocus
 				/>
 				<div class="text-[11px] text-white/40 font-mono">
@@ -279,13 +276,13 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 					<button
 						type="button"
 						onClick={resetCreateForm}
-						class="px-3 py-1.5 text-[12px] text-white/60 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-cms-md transition-colors"
+						class="px-3 py-1.5 text-[12px] text-white/60 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-cms-sm transition-colors"
 					>
 						Cancel
 					</button>
 					<button
 						type="submit"
-						class="px-3 py-1.5 text-[12px] bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-md transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+						class="px-3 py-1.5 text-[12px] bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-sm transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
 					>
 						Create
 					</button>
@@ -301,7 +298,7 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 				value={value}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 				placeholder={`Enter ${collection} entry ID...`}
-				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-sm"
 			/>
 		)
 	}
@@ -319,14 +316,14 @@ function ReferenceSelect({ collection, value, required, onChange }: {
 				onFocus={() => setIsOpen(true)}
 				onBlur={() => setTimeout(closeDropdown, 150)}
 				placeholder={`Select ${collection} entry...`}
-				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-sm"
 			/>
 			<DropdownPanel
 				triggerRef={inputRef}
 				isOpen={isOpen}
 				onClose={closeDropdown}
 				maxHeight={192}
-				className="border border-white/20 rounded-cms-md"
+				className="border border-white/20 rounded-cms-sm"
 			>
 				{!required && (
 					<button

package/src/editor/components/redirects-manager.tsx

@@ -9,8 +9,9 @@ import {
 	setRedirectsManagerRules,
 	showToast,
 } from '../signals'
+import { STRINGS } from '../strings'
 import type { RedirectRule } from '../types'
-import { ModalBackdrop, ModalHeader } from './modal-shell'
+import { ModalBackdrop, ModalHeader, Section } from './modal-shell'
 
 export function RedirectsManager() {
 	const visible = isRedirectsManagerOpen.value
@@ -24,27 +25,33 @@ export function RedirectsManager() {
 		<ModalBackdrop onClose={() => closeRedirectsManager()} maxWidth="max-w-2xl" extraClass="max-h-[80vh] flex flex-col">
 			<ModalHeader title="Redirects" onClose={() => closeRedirectsManager()} />
 
-			<div class="flex-1 overflow-y-auto p-5 space-y-3">
-				{state.isLoading && <div class="text-center py-8 text-white/50">Loading redirects...</div>}
+			<div class="flex-1 overflow-y-auto p-5">
+				<Section title="Redirects">
+					<div class="space-y-3">
+						{state.isLoading && <div class="text-center py-8 text-white/50">Loading redirects...</div>}
 
-				{!state.isLoading && state.rules.length === 0 && (
-					<div class="text-center py-8">
-						<p class="text-white/50 mb-2">No redirects configured</p>
-						<p class="text-white/30 text-sm">Redirects are stored in src/_redirects</p>
-					</div>
-				)}
+						{!state.isLoading && state.rules.length === 0 && (
+							<div class="text-center py-8">
+								<p class="text-white/50 mb-2">No redirects configured</p>
+								<p class="text-white/30 text-sm">Redirects are stored in src/_redirects</p>
+							</div>
+						)}
 
-				{!state.isLoading && state.rules.map((rule) => (
-					<RedirectRow
-						key={rule.lineIndex}
-						rule={rule}
-						isEditing={state.editingIndex === rule.lineIndex}
-					/>
-				))}
+						{!state.isLoading && state.rules.map((rule) => (
+							<RedirectRow
+								key={rule.lineIndex}
+								rule={rule}
+								isEditing={state.editingIndex === rule.lineIndex}
+							/>
+						))}
+					</div>
+				</Section>
 			</div>
 
-			<div class="shrink-0 p-5 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
-				<AddRedirectForm />
+			<div class="shrink-0 p-5 pb-6 border-t border-white/10 bg-white/5 rounded-b-cms-xl">
+				<Section title="Add redirect">
+					<AddRedirectForm />
+				</Section>
 			</div>
 		</ModalBackdrop>
 	)
@@ -72,9 +79,9 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 		if (result.success) {
 			setRedirectsManagerEditing(null)
 			await refreshRedirects()
-			showToast('Redirect updated', 'success')
+			showToast(STRINGS.redirects.updated, 'success')
 		} else {
-			showToast(result.error || 'Failed to update', 'error')
+			showToast(result.error || STRINGS.redirects.updateFailed, 'error')
 		}
 	}, [rule.lineIndex, source, destination, statusCode])
 
@@ -85,21 +92,21 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 		const result = await deleteRedirect(cfg, { lineIndex: rule.lineIndex })
 		if (result.success) {
 			await refreshRedirects()
-			showToast('Redirect deleted', 'success')
+			showToast(STRINGS.redirects.deleted, 'success')
 		} else {
-			showToast(result.error || 'Failed to delete', 'error')
+			showToast(result.error || STRINGS.redirects.deleteFailed, 'error')
 		}
 	}, [rule.lineIndex])
 
 	if (isEditing) {
 		return (
-			<div class="flex flex-col gap-2 p-3 bg-white/5 rounded-cms-lg border border-white/10">
+			<div class="flex flex-col gap-2 p-3 bg-white/5 rounded-cms-sm border border-white/10">
 				<div class="flex gap-2">
 					<input
 						type="text"
 						value={source}
 						onInput={(e) => setSource((e.target as HTMLInputElement).value)}
-						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm focus:outline-none focus:border-cms-primary/50"
+						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-sm text-white text-sm focus:outline-none focus:border-white/40"
 						placeholder="/old-path"
 						data-cms-ui
 					/>
@@ -108,7 +115,7 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 						type="text"
 						value={destination}
 						onInput={(e) => setDestination((e.target as HTMLInputElement).value)}
-						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm focus:outline-none focus:border-cms-primary/50"
+						class="flex-1 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-sm text-white text-sm focus:outline-none focus:border-white/40"
 						placeholder="/new-path"
 						data-cms-ui
 					/>
@@ -116,7 +123,7 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 						type="text"
 						value={statusCode}
 						onInput={(e) => setStatusCode((e.target as HTMLInputElement).value)}
-						class="w-16 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm text-center focus:outline-none focus:border-cms-primary/50"
+						class="w-16 px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-sm text-white text-sm text-center focus:outline-none focus:border-white/40"
 						placeholder="307"
 						data-cms-ui
 					/>
@@ -125,7 +132,7 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 					<button
 						type="button"
 						onClick={() => setRedirectsManagerEditing(null)}
-						class="px-3 py-1.5 text-xs text-white/60 hover:text-white hover:bg-white/10 rounded-cms-md transition-colors cursor-pointer"
+						class="px-3 py-1.5 text-xs text-white/60 hover:text-white hover:bg-white/10 rounded-cms-sm transition-colors cursor-pointer"
 						data-cms-ui
 					>
 						Cancel
@@ -134,7 +141,7 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 						type="button"
 						onClick={handleSave}
 						disabled={isSaving}
-						class="px-3 py-1.5 text-xs font-medium bg-cms-primary text-cms-primary-text rounded-cms-md hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40"
+						class="px-3 py-1.5 text-xs font-medium bg-cms-primary text-cms-primary-text rounded-cms-sm hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40"
 						data-cms-ui
 					>
 						{isSaving ? 'Saving...' : 'Save'}
@@ -145,14 +152,14 @@ function RedirectRow({ rule, isEditing }: { rule: RedirectRule; isEditing: boole
 	}
 
 	return (
-		<div class="flex items-center gap-3 p-3 bg-white/5 rounded-cms-lg border border-white/10 group">
+		<div class="flex items-center gap-3 p-3 bg-white/5 rounded-cms-sm border border-white/10 group h-[34px]">
 			<div class="flex-1 min-w-0 flex items-center gap-2 text-sm">
 				<span class="text-white/80 truncate">{rule.source}</span>
 				<span class="text-white/30 shrink-0">→</span>
 				<span class="text-white/60 truncate">{rule.destination}</span>
 			</div>
 			<span class="text-xs text-white/30 tabular-nums shrink-0">{rule.statusCode}</span>
-			<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+			<div class="flex gap-1 shrink-0 -ml-3 max-w-0 overflow-hidden opacity-0 group-hover:ml-0 group-hover:max-w-[80px] group-hover:opacity-100 transition-all duration-200 ease-out">
 				<button
 					type="button"
 					onClick={() => setRedirectsManagerEditing(rule.lineIndex)}
@@ -211,9 +218,9 @@ function AddRedirectForm() {
 			setSource('')
 			setDestination('')
 			await refreshRedirects()
-			showToast('Redirect added', 'success')
+			showToast(STRINGS.redirects.added, 'success')
 		} else {
-			showToast(result.error || 'Failed to add redirect', 'error')
+			showToast(result.error || STRINGS.redirects.addFailed, 'error')
 		}
 	}, [source, destination])
 
@@ -226,7 +233,7 @@ function AddRedirectForm() {
 					value={source}
 					onInput={(e) => setSource((e.target as HTMLInputElement).value)}
 					placeholder="/old-path"
-					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-sm text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-white/40"
 					data-cms-ui
 				/>
 			</div>
@@ -237,7 +244,7 @@ function AddRedirectForm() {
 					value={destination}
 					onInput={(e) => setDestination((e.target as HTMLInputElement).value)}
 					placeholder="/new-path"
-					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-md text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-cms-primary/50"
+					class="w-full px-2.5 py-1.5 bg-white/5 border border-white/10 rounded-cms-sm text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-white/40"
 					data-cms-ui
 				/>
 			</div>
@@ -245,7 +252,7 @@ function AddRedirectForm() {
 				type="button"
 				onClick={handleAdd}
 				disabled={isAdding || !source.trim() || !destination.trim()}
-				class="px-4 py-1.5 text-sm font-medium bg-cms-primary text-cms-primary-text rounded-cms-md hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+				class="px-4 py-1.5 text-sm font-medium bg-cms-primary text-cms-primary-text rounded-cms-sm hover:bg-cms-primary-hover transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
 				data-cms-ui
 			>
 				{isAdding ? 'Adding...' : 'Add'}

package/src/editor/components/reference-picker.tsx

@@ -5,6 +5,7 @@ import { useSearchFilter } from '../hooks/useSearchFilter'
 import { getCollectionEntryOptions } from '../manifest'
 import { updateMarkdownPage } from '../markdown-api'
 import { closeReferencePicker, config, manifest, referencePickerState, showToast } from '../signals'
+import { STRINGS } from '../strings'
 import { Spinner } from './spinner'
 
 const PANEL_WIDTH = 320
@@ -46,12 +47,12 @@ export function ReferencePicker() {
 				frontmatter: { [state.fieldName]: value },
 			})
 			if (result.success) {
-				showToast('Reference updated', 'success')
+				showToast(STRINGS.reference.updated, 'success')
 			} else {
-				showToast(result.error || 'Failed to update reference', 'error')
+				showToast(result.error || STRINGS.reference.updateFailed, 'error')
 			}
 		} catch {
-			showToast('Failed to update reference', 'error')
+			showToast(STRINGS.reference.updateFailed, 'error')
 		}
 		closeReferencePicker()
 	}, [state.fieldName, state.ownerPath])
@@ -153,7 +154,7 @@ export function ReferencePicker() {
 													}`}
 												>
 													{isSelected && (
-														<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+														<svg class="w-3 h-3 text-cms-dark" 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>
 													)}

package/src/editor/components/seo-editor.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'preact/hooks'
 import { saveBatchChanges } from '../api'
 import { isApplyingUndoRedo, recordChange } from '../history'
+import { cn } from '../lib/cn'
 import {
 	clearPendingSeoChanges,
 	closeSeoEditor,
@@ -14,9 +15,10 @@ import {
 	setPendingSeoChange,
 	showToast,
 } from '../signals'
+import { STRINGS } from '../strings'
 import type { ChangePayload, PageSeoData, PendingSeoChange } from '../types'
 import { ColorField, ComboBoxField, ImageField } from './fields'
-import { CancelButton, CloseButton, ModalBackdrop } from './modal-shell'
+import { CancelButton, CloseButton, ModalBackdrop, Section } from './modal-shell'
 import { Spinner } from './spinner'
 
 const OG_TYPE_OPTIONS = [
@@ -55,10 +57,11 @@ interface SeoFieldProps {
 	value: string | undefined
 	placeholder?: string
 	multiline?: boolean
+	tooltip?: string
 	onChange: (id: string, value: string, originalValue: string) => void
 }
 
-function SeoField({ label, id, value, placeholder, multiline, onChange }: SeoFieldProps) {
+function SeoField({ label, id, value, placeholder, multiline, tooltip, onChange }: SeoFieldProps) {
 	const pendingChange = id ? getPendingSeoChange(id) : undefined
 	const currentValue = pendingChange?.newValue ?? value ?? ''
 	const isDirty = pendingChange?.isDirty ?? false
@@ -75,7 +78,19 @@ function SeoField({ label, id, value, placeholder, multiline, onChange }: SeoFie
 	return (
 		<div class="space-y-1.5">
 			<div class="flex items-center justify-between">
-				<label class="text-sm font-medium text-white/80">{label}</label>
+				<div class="flex items-center gap-1.5">
+					<label class="text-sm font-medium text-white/80">{label}</label>
+					{tooltip && (
+						<span class="relative group/tooltip inline-flex" data-cms-ui>
+							<svg class="w-3.5 h-3.5 text-white/40 hover:text-white/70 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+							</svg>
+							<span class="absolute left-0 top-full mt-1 w-64 p-2 bg-black/90 text-white text-xs rounded-cms-sm opacity-0 invisible group-hover/tooltip:opacity-100 group-hover/tooltip:visible transition-all z-10 pointer-events-none">
+								{tooltip}
+							</span>
+						</span>
+					)}
+				</div>
 				{isDirty && <span class="text-xs text-cms-primary font-medium">Modified</span>}
 			</div>
 			<InputComponent
@@ -84,11 +99,12 @@ function SeoField({ label, id, value, placeholder, multiline, onChange }: SeoFie
 				placeholder={placeholder ?? `Enter ${label.toLowerCase()}...`}
 				onInput={handleChange}
 				disabled={!id}
-				class={`w-full px-4 py-2.5 bg-white/10 border rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors ${
-					isDirty
-						? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
-						: 'border-white/20 focus:border-white/40 focus:ring-white/10'
-				} ${!id ? 'opacity-50 cursor-not-allowed' : ''} ${multiline ? 'min-h-20 resize-y' : ''}`}
+				class={cn(
+					'w-full p-2.5 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors focus:border-white/40 focus:ring-white/10',
+					isDirty ? 'border-white/30' : 'border-white/20',
+					!id && 'opacity-50 cursor-not-allowed',
+					multiline && 'min-h-20 resize-y',
+				)}
 				data-cms-ui
 			/>
 		</div>
@@ -107,19 +123,13 @@ function useSeoMeta(tag: { id?: string; content: string } | undefined) {
 	}
 }
 
-interface SeoSectionProps {
-	title: string
-	children: preact.ComponentChildren
-}
-
-function SeoSection({ title, children }: SeoSectionProps) {
+function SeoSection({ title, children }: { title: string; children: preact.ComponentChildren }) {
 	return (
-		<div class="space-y-4">
-			<h3 class="text-sm font-semibold text-white/60 uppercase tracking-wider">{title}</h3>
+		<Section title={title}>
 			<div class="space-y-4">
 				{children}
 			</div>
-		</div>
+		</Section>
 	)
 }
 
@@ -222,14 +232,14 @@ export function SeoEditor() {
 
 			if (result.errors && result.errors.length > 0) {
 				const details = result.errors.map(e => e.error).join('; ')
-				showToast(`SEO save failed: ${details}`, 'error')
+				showToast(STRINGS.seo.saveFailed(details), 'error')
 			} else {
-				showToast(`Saved ${result.updated} SEO change(s) successfully!`, 'success')
+				showToast(STRINGS.seo.saveSuccess(result.updated), 'success')
 				clearPendingSeoChanges()
 				closeSeoEditor()
 			}
 		} catch (error) {
-			showToast(error instanceof Error ? error.message : 'Failed to save SEO changes', 'error')
+			showToast(error instanceof Error ? error.message : STRINGS.seo.saveFailedFallback, 'error')
 		} finally {
 			setIsSaving(false)
 		}
@@ -260,7 +270,7 @@ export function SeoEditor() {
 	return (
 		<ModalBackdrop onClose={handleClose} maxWidth="max-w-2xl" extraClass="max-h-[85vh] flex flex-col">
 			{/* 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">
 				<div class="flex items-center gap-3">
 					<h2 class="text-lg font-semibold text-white">SEO Settings</h2>
 					{dirtyCount > 0 && (
@@ -327,6 +337,7 @@ export function SeoEditor() {
 										id={seoData.canonical.id}
 										value={seoData.canonical.href}
 										placeholder="https://example.com/page"
+										tooltip="The preferred URL for this page. Tells search engines which version to index when the same content is reachable from multiple URLs (e.g. with/without query parameters)."
 										onChange={handleFieldChange}
 									/>
 								)}
@@ -376,7 +387,6 @@ export function SeoEditor() {
 												<ImageField
 													label={label}
 													value={currentValue}
-													placeholder="/favicon.svg"
 													onChange={(v) => {
 														if (faviconId) handleFieldChange(faviconId, v, originalValue)
 													}}
@@ -419,7 +429,6 @@ export function SeoEditor() {
 										<ImageField
 											label="OG Image"
 											value={ogImage.current}
-											placeholder="/images/og-image.jpg"
 											onChange={(v) => {
 												if (ogImage.id) handleFieldChange(ogImage.id, v, ogImage.original)
 											}}
@@ -502,7 +511,6 @@ export function SeoEditor() {
 										<ImageField
 											label="Twitter Image"
 											value={twitterImage.current}
-											placeholder="/images/twitter-image.jpg"
 											onChange={(v) => {
 												if (twitterImage.id) handleFieldChange(twitterImage.id, v, twitterImage.original)
 											}}
@@ -555,11 +563,12 @@ export function SeoEditor() {
 						type="button"
 						onClick={handleSaveAll}
 						disabled={dirtyCount === 0 || isSaving}
-						class={`px-5 py-2 text-sm font-medium rounded-cms-pill transition-colors flex items-center gap-2 ${
+						class={cn(
+							'px-5 py-2 text-sm font-medium rounded-cms-pill transition-colors flex items-center gap-2',
 							dirtyCount > 0 && !isSaving
 								? 'bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover'
-								: 'bg-white/10 text-white/40 cursor-not-allowed'
-						}`}
+								: 'bg-white/10 text-white/40 cursor-not-allowed',
+						)}
 						data-cms-ui
 					>
 						{isSaving && <Spinner />}