@nuasite/cms 0.39.1 → 0.40.0

package/src/editor/components/toolbar.tsx

@@ -4,6 +4,7 @@ import { CMS_VERSION, Z_INDEX } from '../constants'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { showConfirmDialog } from '../signals'
+import { STRINGS } from '../strings'
 import type { CollectionDefinition } from '../types'
 import { Spinner } from './spinner'
 
@@ -46,6 +47,9 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isSaving = signals.isSaving.value
 	const showEditableHighlights = signals.showEditableHighlights.value
 	const isPreviewingMarkdown = signals.isMarkdownPreview.value
+	const isSideModalOpen = signals.isColorEditorOpen.value
+		|| signals.isAttributeEditorOpen.value
+		|| signals.isBgImageOverlayOpen.value
 	const currentPageCollection = signals.currentPageCollection.value
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
 	const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
@@ -53,15 +57,18 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const versionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	if (isPreviewingMarkdown) return null
+	// Right-anchored side panels (color editor, attribute editor, background-image overlay)
+	// would visually overlap the right-anchored toolbar pill — hide while any of them is open.
+	if (isSideModalOpen) return null
 
 	const stopPropagation = (e: Event) => e.stopPropagation()
 
 	const handleDiscard = async () => {
 		const confirmed = await showConfirmDialog({
-			title: 'Discard Changes',
-			message: 'Discard all changes? This cannot be undone.',
-			confirmLabel: 'Discard',
-			cancelLabel: 'Cancel',
+			title: STRINGS.dialog.discardAll.title,
+			message: STRINGS.dialog.discardAll.message,
+			confirmLabel: STRINGS.dialog.discardAll.confirm,
+			cancelLabel: STRINGS.dialog.discardAll.cancel,
 			variant: 'danger',
 		})
 		if (confirmed) {
@@ -76,7 +83,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const topLevelItems: MenuItem[] = []
 	if (callbacks.onSelectElement && signals.config.value.features?.selectElement) {
 		topLevelItems.push({
-			label: 'Select Element',
+			label: STRINGS.toolbar.selectElement,
 			icon: (
 				<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
@@ -201,7 +208,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 			class={cn(
 				'fixed bottom-4 sm:bottom-8 font-sans transition-all duration-300',
 				isToolbarOpen
-					? 'left-4 right-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2'
+					? 'left-4 right-4 sm:right-8 sm:left-auto sm:-translate-x-1/2'
 					: 'right-4 sm:right-8',
 			)}
 			data-cms-ui
@@ -213,9 +220,9 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 				{isToolbarOpen && !showingOriginal && callbacks.onToggleHighlights && (
 					<ToolbarButton
 						onClick={() => callbacks.onToggleHighlights?.()}
-						class={'flex gap-2.5 bg-white/10 text-white/80 hover:bg-white/20 hover:text-white py-2! pr-1.5!'}
+						class={'flex min-w-[157px] gap-2.5 bg-white/10 text-white/80 hover:bg-white/20 hover:text-white py-2! pr-1.5!'}
 					>
-						Outlines
+						{showEditableHighlights ? 'Hide Outlines' : 'Show Outlines'}
 						<span
 							class={cn(
 								'inline-block w-6 h-6 rounded-full shrink-0 transition-colors',
@@ -331,7 +338,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 											}}
 										/>
 										{/* Menu popover */}
-										<div class="absolute bottom-full right-0 mb-4 min-w-[200px] bg-cms-dark rounded-cms-lg shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 overflow-hidden py-1">
+										<div class="absolute bottom-full right-0 mb-4 min-w-[200px] bg-cms-dark rounded-cms-lg shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 overflow-hidden">
 											{topLevelItems.map((item, index) => (
 												<button
 													key={`top-${index}`}
@@ -341,7 +348,8 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 														setIsMenuOpen(false)
 													}}
 													class={cn(
-														'w-full px-4 py-2.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3',
+														'w-full p-2.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3',
+														index === 0 && 'pt-3.5',
 														item.isActive
 															? 'bg-white/20 text-white'
 															: 'text-white/80 hover:bg-white/10 hover:text-white',
@@ -351,7 +359,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 													{item.label}
 												</button>
 											))}
-											{topLevelItems.length > 0 && menuSections.length > 0 && <div class="border-t border-white/10 my-1" />}
+											{topLevelItems.length > 0 && menuSections.length > 0 && <div class="border-t border-white/10" />}
 											{menuSections.map((section) => {
 												const isExpanded = expandedSections.has(section.label)
 												return (
@@ -369,7 +377,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 																	return next
 																})
 															}}
-															class="w-full px-4 py-2.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3 text-white/80 hover:bg-white/10 hover:text-white"
+															class="w-full p-2.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3 text-white/80 hover:bg-white/10 hover:text-white"
 														>
 															<span class="shrink-0 opacity-70">{section.icon}</span>
 															{section.label}
@@ -385,29 +393,38 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 																<path d="m6 9 6 6 6-6" />
 															</svg>
 														</button>
-														{isExpanded && section.items.map((item, index) => (
-															<button
-																key={index}
-																onClick={(e) => {
-																	e.stopPropagation()
-																	item.onClick()
-																	setIsMenuOpen(false)
-																}}
-																class={cn(
-																	'w-full pl-11 pr-4 py-2 text-sm text-left transition-colors cursor-pointer flex items-center gap-3',
-																	item.isActive
-																		? 'bg-white/20 text-white'
-																		: 'text-white/60 hover:bg-white/10 hover:text-white',
-																)}
-															>
-																<span class="shrink-0 opacity-70">{item.icon}</span>
-																{item.label}
-															</button>
-														))}
+														<div
+															class={cn(
+																'grid transition-[grid-template-rows] duration-200 ease-out',
+																isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+															)}
+														>
+															<div class="overflow-hidden">
+																{section.items.map((item, index) => (
+																	<button
+																		key={index}
+																		onClick={(e) => {
+																			e.stopPropagation()
+																			item.onClick()
+																			setIsMenuOpen(false)
+																		}}
+																		class={cn(
+																			'w-full pl-9 pr-4 py-2 text-sm text-left transition-colors cursor-pointer flex items-center gap-3',
+																			item.isActive
+																				? 'bg-white/20 text-white'
+																				: 'text-white/60 hover:bg-white/10 hover:text-white',
+																		)}
+																	>
+																		<span class="shrink-0 opacity-70">{item.icon}</span>
+																		{item.label}
+																	</button>
+																))}
+															</div>
+														</div>
 													</div>
 												)
 											})}
-											{destructiveItems.length > 0 && <div class="border-t border-white/10 my-1" />}
+											{destructiveItems.length > 0 && <div class="border-t border-white/10" />}
 											{destructiveItems.map((item, index) => (
 												<button
 													key={`destructive-${index}`}
@@ -416,7 +433,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 														item.onClick()
 														setIsMenuOpen(false)
 													}}
-													class="w-full px-4 py-2.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3 text-red-400/80 hover:bg-red-500/10 hover:text-red-400"
+													class="w-full p-2.5 pb-3.5 text-sm font-medium text-left transition-colors cursor-pointer flex items-center gap-3 text-red-400/80 hover:bg-red-500/10 hover:text-red-400"
 												>
 													<span class="shrink-0 opacity-70">{item.icon}</span>
 													{item.label}

package/src/editor/dom.ts

@@ -45,10 +45,21 @@ export function isPageDark(): boolean {
 }
 
 /**
- * Get an outline color that contrasts with the page background.
+ * Get an outline color that contrasts with the user's `siteTheme` config:
+ *  - 'light' — host is light → dark outline
+ *  - 'dark'  — host is dark → light outline
+ *  - 'auto'  (default) — detect via `prefers-color-scheme` then fall back to the page background
  */
 export function getOutlineColor(): string {
-	return isPageDark() ? '#FFFFFF' : '#1A1A1A'
+	const cfg = typeof window !== 'undefined' ? window.NuaCmsConfig : undefined
+	const theme = cfg?.siteTheme ?? 'auto'
+	if (theme === 'light') return 'rgba(26, 26, 26, 0.7)'
+	if (theme === 'dark') return 'rgba(255, 255, 255, 0.85)'
+	// auto: trust the OS hint when present, otherwise sample the page
+	const prefersDark = typeof window !== 'undefined'
+		&& window.matchMedia?.('(prefers-color-scheme: dark)').matches
+	const hostIsDark = prefersDark || isPageDark()
+	return hostIsDark ? '#FFFFFF' : '#1A1A1A'
 }
 
 /**

package/src/editor/editor.ts

@@ -33,6 +33,7 @@ import {
 	saveEditsToStorage,
 	saveImageEditsToStorage,
 } from './storage'
+import { STRINGS } from './strings'
 import type { Attribute } from './types'
 import type { AttributeChangePayload, ChangePayload, CmsConfig, ManifestEntry, SavedAttributeEdit } from './types'
 
@@ -88,7 +89,7 @@ function notifyFormattingBlocked(): void {
 		return
 	}
 	lastFormattingBlockedToastAt = now
-	signals.showToast("Formatting isn't available — this text is used as a plain value", 'info')
+	signals.showToast(STRINGS.editor.formattingBlocked, 'info')
 }
 
 export function notifyLockedElement(): void {
@@ -97,7 +98,7 @@ export function notifyLockedElement(): void {
 		return
 	}
 	lastLockedToastAt = now
-	signals.showToast("This text can't be edited here — no source file is linked to it", 'info')
+	signals.showToast(STRINGS.editor.lockedElement, 'info')
 }
 
 /**
@@ -1197,14 +1198,14 @@ function setupMarkdownClickHandler(
 		const entry = manifest.entries[cmsId] as ManifestEntry | undefined
 
 		if (!entry) {
-			signals.showToast('Markdown element not found in manifest', 'error')
+			signals.showToast(STRINGS.editor.markdownNotInManifest, 'error')
 			return
 		}
 
 		// Check if it has a content path for markdown
 		const contentPath = entry.contentPath
 		if (!contentPath) {
-			signals.showToast('No markdown file path configured for this element', 'error')
+			signals.showToast(STRINGS.editor.noMarkdownPath, 'error')
 			return
 		}
 
@@ -1213,7 +1214,7 @@ function setupMarkdownClickHandler(
 			const result = await getMarkdownContent(config.apiBase, contentPath)
 
 			if (!result) {
-				signals.showToast('Markdown content not found', 'error')
+				signals.showToast(STRINGS.editor.markdownContentMissing, 'error')
 				return
 			}
 
@@ -1231,7 +1232,7 @@ function setupMarkdownClickHandler(
 			signals.setMarkdownEditorOpen(true)
 		} catch (error) {
 			const message = error instanceof Error ? error.message : 'Unknown error'
-			signals.showToast(`Failed to load markdown: ${message}`, 'error')
+			signals.showToast(STRINGS.editor.markdownLoadFailed(message), 'error')
 			logDebug(config.debug, 'Failed to fetch markdown content:', error)
 		}
 	})

package/src/editor/hooks/useBlockEditorHandlers.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'preact/hooks'
 import { logDebug } from '../dom'
 import { getComponentInstances } from '../manifest'
 import * as signals from '../signals'
+import { STRINGS } from '../strings'
 import type { CmsConfig, CmsManifest, ComponentInstance, InsertPosition } from '../types'
 
 /**
@@ -86,7 +87,7 @@ export function useBlockEditorHandlers({
 		(componentId: string, props: Record<string, any>) => {
 			logDebug(config.debug, 'Update props for component:', componentId, props)
 			// TODO: Implement prop update logic - this will require server-side file modification
-			showToast('Props updated (preview only)', 'info')
+			showToast(STRINGS.block.propsPreviewOnly, 'info')
 		},
 		[config.debug, showToast],
 	)
@@ -151,7 +152,7 @@ export function useBlockEditorHandlers({
 						throw new Error(error || 'Failed to add array item')
 					}
 
-					showToast(`Item added ${position} current item`, 'success')
+					showToast(STRINGS.block.insertItem(position), 'success')
 				} else {
 					// Standard component insertion
 					const response = await fetch(`${config.apiBase}/insert-component`, {
@@ -175,7 +176,7 @@ export function useBlockEditorHandlers({
 						throw new Error(error || 'Failed to insert component')
 					}
 
-					showToast(`${componentName} inserted ${position} component`, 'success')
+					showToast(STRINGS.block.insertComponent(componentName, position), 'success')
 				}
 			} catch (error) {
 				console.error('[CMS] Failed to insert component:', error)
@@ -183,7 +184,7 @@ export function useBlockEditorHandlers({
 				// Remove the preview on failure
 				previewEl?.remove()
 
-				showToast(arrayMode ? 'Failed to add array item' : 'Failed to insert component', 'error')
+				showToast(arrayMode ? STRINGS.block.insertItemFailed : STRINGS.block.insertComponentFailed, 'error')
 			}
 		},
 		[config.apiBase, config.debug, config, showToast],
@@ -232,7 +233,7 @@ export function useBlockEditorHandlers({
 					throw new Error(error || `Failed to ${arrayMode ? 'remove item' : 'remove component'}`)
 				}
 
-				showToast(arrayMode ? 'Item removed' : 'Component removed', 'success')
+				showToast(arrayMode ? STRINGS.block.removeItem : STRINGS.block.removeComponent, 'success')
 
 				// Visually collapse and hide the component until HMR refreshes the page
 				if (componentEl) {
@@ -240,7 +241,7 @@ export function useBlockEditorHandlers({
 				}
 			} catch (error) {
 				console.error('[CMS] Failed to remove component:', error)
-				showToast(arrayMode ? 'Failed to remove item' : 'Failed to remove component', 'error')
+				showToast(arrayMode ? STRINGS.block.removeItemFailed : STRINGS.block.removeComponentFailed, 'error')
 
 				// Restore the component's appearance on failure
 				if (componentEl) {

package/src/editor/index.tsx

@@ -58,6 +58,7 @@ import {
 } from './signals'
 import * as signals from './signals'
 import { hasAnyMarkdownDraft, hasPendingEntryNavigation, loadEditingState, loadSettingsFromStorage, saveSettingsToStorage } from './storage'
+import { STRINGS } from './strings'
 import CMS_STYLES from './styles.css?inline'
 import { generateCSSVariables, resolveTheme } from './themes'
 
@@ -307,20 +308,20 @@ const CmsUI = () => {
 		try {
 			const result = await saveAllChanges(config, updateUI)
 			if (result.success) {
-				signals.showToast(`Saved ${result.updated} change(s) successfully!`, 'success')
+				signals.showToast(STRINGS.save.success(result.updated), 'success')
 			} else if (result.errors) {
 				const details = result.errors.map(e => e.error).join('; ')
-				signals.showToast(`Save failed: ${details}`, 'error')
+				signals.showToast(STRINGS.save.failed(details), 'error')
 			}
 		} catch (err) {
 			const message = err instanceof Error ? err.message : 'Unknown error'
-			signals.showToast(`Save failed: ${message}`, 'error')
+			signals.showToast(STRINGS.save.failed(message), 'error')
 		}
 	}, [config, updateUI])
 
 	const handleDiscard = useCallback(() => {
 		discardAllChanges(updateUI)
-		signals.showToast('All changes discarded', 'info')
+		signals.showToast(STRINGS.save.discarded, 'info')
 	}, [updateUI])
 
 	const handleOpenCollection = useCallback((name: string) => {
@@ -334,7 +335,7 @@ const CmsUI = () => {
 
 	const handleEditContent = useCallback(async () => {
 		if (!await openMarkdownEditorForCurrentPage()) {
-			signals.showToast('No collection content found on this page', 'error')
+			signals.showToast(STRINGS.save.noCollectionContent, 'error')
 		}
 	}, [])
 
@@ -738,7 +739,7 @@ class CmsEditor {
 		this.appRoot.style.display = isHidden ? 'block' : 'none'
 
 		// Use signals.showToast for consistency
-		signals.showToast(isHidden ? 'CMS editing enabled' : 'CMS editing disabled', 'info')
+		signals.showToast(isHidden ? STRINGS.editingMode.enabled : STRINGS.editingMode.disabled, 'info')
 	}
 }
 

package/src/editor/signals.ts

@@ -4,6 +4,7 @@ import { fetchManifest, getMarkdownContent } from './api'
 import type { ToastMessage, ToastType } from './components/toast/types'
 import { getConfig } from './config'
 import { clearMarkdownDraft, loadMarkdownDraft, saveMarkdownDraft } from './storage'
+import { STRINGS } from './strings'
 import type {
 	AttributeEditorState,
 	BlockEditorState,
@@ -416,6 +417,10 @@ export const mediaLibraryState = signal<MediaLibraryState>(
 // Convenience computed signals for media library
 export const isMediaLibraryOpen = computed(() => mediaLibraryState.value.isOpen)
 
+// Background-image overlay panel open state (lifted from local useState so the
+// toolbar can hide itself when this right-side panel is showing).
+export const isBgImageOverlayOpen = signal(false)
+
 // ============================================================================
 // Create Page State Signals
 // ============================================================================
@@ -1205,33 +1210,59 @@ export async function openMarkdownEditorForEntry(
 	sourcePath: string,
 	collectionDefinition: CollectionDefinition,
 ): Promise<void> {
-	let frontmatter: Record<string, unknown> = {}
-	let content = ''
+	// Open the editor immediately with placeholder content so the modal
+	// transition feels seamless — content streams in once fetched.
+	markdownEditorState.value = {
+		isOpen: true,
+		currentPage: {
+			filePath: sourcePath,
+			slug,
+			frontmatter: {},
+			content: '',
+			isDirty: false,
+		},
+		activeElementId: null,
+		mode: 'edit',
+		collectionDefinition,
+	}
+
+	// Guard against late responses: if the user closed the modal or navigated
+	// to a different entry while the fetch was in-flight, drop the result.
+	const isStillTargeted = () => markdownEditorState.value.currentPage?.filePath === sourcePath
+
+	let frontmatter: Record<string, unknown>
+	let content: string
 
 	try {
 		const result = await getMarkdownContent(config.value.apiBase, sourcePath)
-		if (result) {
-			frontmatter = result.frontmatter as Record<string, unknown>
-			content = result.content
+		if (!isStillTargeted()) return
+		if (!result) {
+			resetMarkdownEditorState()
+			showToast(`Could not load entry: ${slug}`, 'error')
+			return
 		}
+		frontmatter = result.frontmatter
+		content = result.content
 	} catch (err) {
 		console.error('[CMS] Failed to fetch markdown content for entry:', err)
+		if (!isStillTargeted()) return
+		resetMarkdownEditorState()
+		showToast(`Could not load entry: ${slug}`, 'error')
+		return
 	}
 
 	const recovered = await maybeRecoverDraft(sourcePath, frontmatter, content)
+	if (!isStillTargeted()) return
 
 	markdownEditorState.value = {
-		isOpen: true,
+		...markdownEditorState.value,
 		currentPage: {
 			filePath: sourcePath,
 			slug,
-			frontmatter: recovered.frontmatter as import('./types').BlogFrontmatter,
+			frontmatter: recovered.frontmatter,
 			content: recovered.content,
 			isDirty: recovered.isDirty,
 		},
-		activeElementId: null,
-		mode: 'edit',
-		collectionDefinition,
 	}
 }
 
@@ -1288,10 +1319,10 @@ export function showConfirmDialog(
 	return new Promise((resolve) => {
 		confirmDialogState.value = {
 			isOpen: true,
-			title: options.title ?? 'Confirm',
+			title: options.title ?? STRINGS.dialog.defaults.title,
 			message: options.message,
-			confirmLabel: options.confirmLabel ?? 'Confirm',
-			cancelLabel: options.cancelLabel ?? 'Cancel',
+			confirmLabel: options.confirmLabel ?? STRINGS.dialog.defaults.confirm,
+			cancelLabel: options.cancelLabel ?? STRINGS.dialog.defaults.cancel,
 			variant: options.variant ?? 'info',
 			onConfirm: () => {
 				closeConfirmDialog()

package/src/editor/strings.ts

@@ -0,0 +1,123 @@
+/**
+ * Central catalog of editor UI strings. Step 1 of i18n groundwork — no locale
+ * switching yet. Parametrized messages are functions so a future `t(key, vars)`
+ * helper can swap them in without touching call sites.
+ */
+import type { InsertPosition } from './types'
+
+export const STRINGS = {
+	dialog: {
+		defaults: {
+			title: 'Confirm',
+			confirm: 'Confirm',
+			cancel: 'Cancel',
+		},
+		discardAll: {
+			title: 'Discard Changes',
+			message: 'Discard all changes? This cannot be undone.',
+			confirm: 'Discard',
+			cancel: 'Cancel',
+		},
+		discardMarkdown: {
+			title: 'Discard changes?',
+			message: 'You have unsaved changes. Discard them and close?',
+			confirm: 'Discard',
+			cancel: 'Keep editing',
+		},
+	},
+
+	toolbar: {
+		selectElement: 'Select Element',
+	},
+
+	editingMode: {
+		enabled: 'CMS editing enabled',
+		disabled: 'CMS editing disabled',
+	},
+
+	editor: {
+		formattingBlocked: "Formatting isn't available — this text is used as a plain value",
+		lockedElement: "This text can't be edited here — no source file is linked to it",
+		markdownNotInManifest: 'Markdown element not found in manifest',
+		noMarkdownPath: 'No markdown file path configured for this element',
+		markdownContentMissing: 'Markdown content not found',
+		markdownLoadFailed: (message: string) => `Failed to load markdown: ${message}`,
+	},
+
+	save: {
+		success: (updated: number) => `Saved ${updated} change(s) successfully!`,
+		failed: (details: string) => `Save failed: ${details}`,
+		discarded: 'All changes discarded',
+		noCollectionContent: 'No collection content found on this page',
+	},
+
+	block: {
+		propsPreviewOnly: 'Props updated (preview only)',
+		insertItem: (position: InsertPosition) => `Item added ${position} current item`,
+		insertComponent: (componentName: string, position: InsertPosition) => `${componentName} inserted ${position} component`,
+		insertItemFailed: 'Failed to add array item',
+		insertComponentFailed: 'Failed to insert component',
+		removeItem: 'Item removed',
+		removeComponent: 'Component removed',
+		removeItemFailed: 'Failed to remove item',
+		removeComponentFailed: 'Failed to remove component',
+	},
+
+	reference: {
+		updated: 'Reference updated',
+		updateFailed: 'Failed to update reference',
+	},
+
+	markdown: {
+		saveSuccess: 'Content saved',
+		saveFailed: 'Failed to save markdown',
+		saveFailedDetails: (message: string) => `Save failed: ${message}`,
+		initFailed: 'Failed to initialize markdown editor',
+		titleRequired: 'Please enter a title',
+		slugRequired: 'Please enter a slug',
+		pageCreated: 'Page created',
+		createFailed: 'Failed to create page',
+		createFailedDetails: (message: string) => `Create failed: ${message}`,
+		previewElementMissing: 'Could not find page element to preview',
+		previewGenerationFailed: 'Failed to generate preview',
+	},
+
+	media: {
+		notConfigured: 'CMS not configured',
+		loadFailed: 'Failed to load media library',
+		imageRequired: 'Please drop an image file',
+		uploadSucceeded: 'File uploaded successfully',
+		uploadedNextToEntry: 'Uploaded next to entry',
+		fileUploaded: 'File uploaded',
+		imageInserted: 'Image uploaded and inserted',
+		uploadFailed: 'Upload failed',
+		invalidFolderName: 'Invalid folder name',
+		folderCreated: 'Folder created',
+		folderCreateFailed: 'Failed to create folder',
+	},
+
+	redirects: {
+		updated: 'Redirect updated',
+		updateFailed: 'Failed to update',
+		deleted: 'Redirect deleted',
+		deleteFailed: 'Failed to delete',
+		added: 'Redirect added',
+		addFailed: 'Failed to add redirect',
+	},
+
+	slug: {
+		updated: 'Slug updated',
+		renameFailed: 'Failed to rename',
+	},
+
+	page: {
+		deleted: 'Page deleted',
+		deleteFailed: 'Failed to delete page',
+	},
+
+	seo: {
+		saveSuccess: (updated: number) => `Saved ${updated} SEO change(s) successfully!`,
+		saveFailed: (details: string) => `SEO save failed: ${details}`,
+		saveFailedFallback: 'Failed to save SEO changes',
+	},
+} as const