@nuasite/cms 0.18.1 → 0.19.0

package/src/editor/components/toolbar.tsx

@@ -1,6 +1,6 @@
 import type { ComponentChildren, FunctionComponent } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { CMS_VERSION } from '../constants'
+import { CMS_VERSION, Z_INDEX } from '../constants'
 import { cn } from '../lib/cn'
 import * as signals from '../signals'
 import { showConfirmDialog } from '../signals'
@@ -27,6 +27,18 @@ export interface ToolbarProps {
 	collectionDefinitions?: Record<string, CollectionDefinition>
 }
 
+type MenuItem = { label: string; icon: ComponentChildren; onClick: () => void; isActive?: boolean }
+type MenuSection = { label: string; icon: ComponentChildren; items: MenuItem[] }
+
+const GridIcon = () => (
+	<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<rect x="3" y="3" width="7" height="7" rx="1" />
+		<rect x="14" y="3" width="7" height="7" rx="1" />
+		<rect x="3" y="14" width="7" height="7" rx="1" />
+		<rect x="14" y="14" width="7" height="7" rx="1" />
+	</svg>
+)
+
 const DeploymentStatusIndicator = ({ onDismiss }: { onDismiss?: () => void }) => {
 	const deploymentStatus = signals.deploymentStatus.value
 	const lastDeployedAt = signals.lastDeployedAt.value
@@ -105,6 +117,7 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isPreviewingMarkdown = signals.isMarkdownPreview.value
 	const currentPageCollection = signals.currentPageCollection.value
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
+	const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
 	const [showVersion, setShowVersion] = useState(false)
 	const versionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -130,11 +143,10 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isSelectMode = signals.isSelectMode.value
 	const isToolbarOpen = isEditing || isSelectMode
 
-	// Build menu items dynamically
-	const menuItems: Array<{ label: string; icon: ComponentChildren; onClick: () => void; isActive?: boolean }> = []
-
-	if (callbacks.onSelectElement) {
-		menuItems.push({
+	const menuSections: MenuSection[] = []
+	const topLevelItems: MenuItem[] = []
+	if (callbacks.onSelectElement && signals.config.value.features?.selectElement) {
+		topLevelItems.push({
 			label: 'Select Element',
 			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">
@@ -147,28 +159,80 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 		})
 	}
 
-	// Single consolidated collections item
 	if (collectionDefinitions) {
-		const labels = Object.values(collectionDefinitions).map((d) => d.label)
-		const collectionsLabel = labels.length <= 2 ? labels.join(', ') : `${labels.slice(0, 2).join(', ')}, ...`
-		if (labels.length > 0) {
-			menuItems.push({
-				label: collectionsLabel,
-				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">
-						<rect x="3" y="3" width="7" height="7" rx="1" />
-						<rect x="14" y="3" width="7" height="7" rx="1" />
-						<rect x="3" y="14" width="7" height="7" rx="1" />
-						<rect x="14" y="14" width="7" height="7" rx="1" />
-					</svg>
-				),
-				onClick: () => callbacks.onOpenCollections?.(),
+		const entries = Object.entries(collectionDefinitions)
+		if (entries.length > 0) {
+			const contentItems: MenuItem[] = entries.map(([name, def]) => ({
+				label: def.label,
+				icon: <GridIcon />,
+				onClick: () => callbacks.onOpenCollection?.(name),
+			}))
+
+			if (currentPageCollection && callbacks.onEditContent) {
+				contentItems.unshift({
+					label: 'Edit Content',
+					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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
+							<path d="M14 2v4a2 2 0 0 0 2 2h4" />
+							<path d="M10 13H8" />
+							<path d="M16 17H8" />
+							<path d="M16 13h-2" />
+						</svg>
+					),
+					onClick: () => callbacks.onEditContent?.(),
+				})
+			}
+
+			menuSections.push({
+				label: 'Content',
+				icon: <GridIcon />,
+				items: contentItems,
 			})
 		}
 	}
 
+	topLevelItems.push(
+		{
+			label: 'Edit Page',
+			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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+				</svg>
+			),
+			onClick: () => callbacks.onEdit(),
+			isActive: isEditing,
+		},
+		{
+			label: 'New Page',
+			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="M12 5v14m-7-7h14" />
+				</svg>
+			),
+			onClick: () => signals.setCreatePageOpen(true),
+		},
+	)
+
+	const destructiveItems: MenuItem[] = [
+		{
+			label: 'Delete Page',
+			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 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+				</svg>
+			),
+			onClick: () => {
+				const pathname = window.location.pathname
+				signals.openDeletePageDialog({ pathname })
+			},
+		},
+	]
+
+	const settingsItems: MenuItem[] = []
+
 	if (callbacks.onSeoEditor) {
-		menuItems.push({
+		settingsItems.push({
 			label: 'SEO',
 			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">
@@ -180,37 +244,33 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 		})
 	}
 
-	menuItems.push({
-		label: 'Edit Page',
+	settingsItems.push({
+		label: 'Redirects',
 		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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+				<path d="M9 18l6-6-6-6" />
+				<path d="M15 18l6-6-6-6" />
 			</svg>
 		),
-		onClick: () => callbacks.onEdit(),
-		isActive: isEditing,
+		onClick: () => signals.openRedirectsManager(),
 	})
 
-	if (currentPageCollection && callbacks.onEditContent) {
-		menuItems.push({
-			label: 'Content',
-			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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
-					<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-					<path d="M10 13H8" />
-					<path d="M16 17H8" />
-					<path d="M16 13h-2" />
-				</svg>
-			),
-			onClick: () => callbacks.onEditContent?.(),
-		})
-	}
+	menuSections.push({
+		label: 'Settings',
+		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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+				<circle cx="12" cy="12" r="3" />
+			</svg>
+		),
+		items: settingsItems,
+	})
 
 	return (
 		<div
+			style={{ zIndex: Z_INDEX.MODAL }}
 			class={cn(
-				'fixed bottom-4 sm:bottom-8 z-2147483647 font-sans transition-all duration-300',
+				'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'
 					: 'right-4 sm:right-8',
@@ -345,10 +405,10 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 											}}
 										/>
 										{/* Menu popover */}
-										<div class="absolute bottom-full right-0 mb-4 min-w-[180px] bg-cms-dark rounded-cms-lg shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/10 overflow-hidden py-1">
-											{menuItems.map((item, index) => (
+										<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">
+											{topLevelItems.map((item, index) => (
 												<button
-													key={index}
+													key={`top-${index}`}
 													onClick={(e) => {
 														e.stopPropagation()
 														item.onClick()
@@ -365,6 +425,77 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 													{item.label}
 												</button>
 											))}
+											{topLevelItems.length > 0 && menuSections.length > 0 && <div class="border-t border-white/10 my-1" />}
+											{menuSections.map((section) => {
+												const isExpanded = expandedSections.has(section.label)
+												return (
+													<div key={section.label}>
+														<button
+															onClick={(e) => {
+																e.stopPropagation()
+																setExpandedSections((prev) => {
+																	const next = new Set(prev)
+																	if (next.has(section.label)) {
+																		next.delete(section.label)
+																	} else {
+																		next.add(section.label)
+																	}
+																	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"
+														>
+															<span class="shrink-0 opacity-70">{section.icon}</span>
+															{section.label}
+															<svg
+																class={cn('w-3.5 h-3.5 ml-auto opacity-50 transition-transform duration-150', isExpanded && 'rotate-180')}
+																viewBox="0 0 24 24"
+																fill="none"
+																stroke="currentColor"
+																stroke-width="2"
+																stroke-linecap="round"
+																stroke-linejoin="round"
+															>
+																<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>
+												)
+											})}
+											{destructiveItems.length > 0 && <div class="border-t border-white/10 my-1" />}
+											{destructiveItems.map((item, index) => (
+												<button
+													key={`destructive-${index}`}
+													onClick={(e) => {
+														e.stopPropagation()
+														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"
+												>
+													<span class="shrink-0 opacity-70">{item.icon}</span>
+													{item.label}
+												</button>
+											))}
 										</div>
 									</>
 								)}

package/src/editor/constants.ts

@@ -114,3 +114,29 @@ export const CSS = {
 	/** Data attribute for background image elements */
 	BG_IMAGE_ATTRIBUTE: 'data-cms-bg-img',
 } as const
+
+/**
+ * Clamp a floating panel horizontally within the viewport and compute its max height.
+ */
+export function clampPanelPosition(
+	cursor: { x: number; y: number },
+	panelWidth: number,
+	padding = LAYOUT.VIEWPORT_PADDING,
+): { top: string; left: string; maxHeight: string } {
+	const viewportWidth = window.innerWidth
+	const viewportHeight = window.innerHeight
+
+	let left = cursor.x
+	if (left + panelWidth > viewportWidth - padding) {
+		left = viewportWidth - panelWidth - padding
+	}
+	if (left < padding) left = padding
+
+	const maxHeight = Math.max(viewportHeight - cursor.y - padding, 200)
+
+	return {
+		top: `${cursor.y}px`,
+		left: `${left}px`,
+		maxHeight: `${maxHeight}px`,
+	}
+}

package/src/editor/editor.ts

@@ -137,6 +137,16 @@ export async function startEditMode(
 			return
 		}
 
+		// Check if this is a reference field element (e.g., author name from a referenced collection)
+		// Reference elements open a picker to change the reference, not inline text editing
+		const manifestEntry = currentManifest.entries[cmsId]
+		if (manifestEntry?.referenceCollection && manifestEntry.referencedBy?.length) {
+			logDebug(config.debug, 'Reference element detected:', cmsId, manifestEntry.referenceCollection)
+			makeElementNonEditable(el)
+			setupReferenceClickHandler(config, el, cmsId, manifestEntry, currentManifest)
+			return
+		}
+
 		// Check if this is a markdown content element
 		// Markdown elements use WYSIWYG editing instead of contentEditable
 		if (el.hasAttribute(MARKDOWN_ATTRIBUTE)) {
@@ -893,6 +903,108 @@ export async function saveAllChanges(
 	}
 }
 
+/**
+ * Setup click handler for reference field elements.
+ * When clicked, resolves the owning entry via DOM traversal and opens a reference picker.
+ */
+function setupReferenceClickHandler(
+	config: CmsConfig,
+	el: HTMLElement,
+	cmsId: string,
+	entry: ManifestEntry,
+	manifest: { entries: Record<string, ManifestEntry> },
+): void {
+	el.style.cursor = 'pointer'
+	// Remove the disabled guard so our click handler can fire
+	// (disableAllInteractiveElements adds a capturing handler that blocks clicks on <a> elements)
+	el.removeAttribute('data-cms-disabled')
+
+	el.addEventListener('click', (e) => {
+		e.preventDefault()
+		e.stopPropagation()
+
+		logDebug(config.debug, 'Reference element clicked:', cmsId, entry.referenceCollection)
+
+		// Find the owning entry by walking up the DOM to find a sibling
+		// that belongs to one of the referencing collections
+		const owner = findOwnerEntry(el, manifest, entry.referencedBy ?? [])
+		if (!owner) {
+			logDebug(config.debug, 'Could not resolve owning entry for reference:', cmsId)
+			return
+		}
+
+		// Look up the owning entry in collection definitions to get the real content file path
+		// (manifest sourcePath may point to a page file if resolved via prop tracking)
+		const collectionDefs = signals.manifest.value.collectionDefinitions
+		const ownerDef = collectionDefs?.[owner.collection]
+		const ownerEntryInfo = ownerDef?.entries?.find(e => e.slug === owner.slug)
+		const contentFilePath = ownerEntryInfo?.sourcePath
+		if (!contentFilePath) {
+			logDebug(config.debug, 'Could not resolve content file path for owner:', owner.collection, owner.slug)
+			return
+		}
+
+		// Use the clicked element's collectionSlug as the current value — it reflects
+		// what's actually rendered on the page, unlike cached collection data which can be stale
+		const rect = el.getBoundingClientRect()
+		signals.openReferencePicker({
+			cmsId,
+			fieldName: owner.fieldName,
+			collection: entry.referenceCollection!,
+			currentValue: owner.isArray ? null : (entry.collectionSlug ?? null),
+			ownerPath: contentFilePath,
+			isArray: owner.isArray ?? false,
+			currentValues: [],
+			cursorPos: { x: rect.left, y: rect.bottom + 4 },
+		})
+	})
+}
+
+/**
+ * Walk up the DOM from a reference element to find the owning collection entry.
+ * At each parent level, only checks direct children (not nested descendants)
+ * to avoid matching elements from adjacent cards on listing pages.
+ */
+function findOwnerEntry(
+	element: HTMLElement,
+	manifest: { entries: Record<string, ManifestEntry> },
+	referencedBy: Array<{ collection: string; fieldName: string; isArray?: boolean }>,
+): { collection: string; slug: string; fieldName: string; isArray?: boolean } | undefined {
+	const refMap = new Map(referencedBy.map(r => [r.collection, r]))
+	let current: HTMLElement | null = element
+
+	while (current && current !== document.body) {
+		const parent: HTMLElement | null = current.parentElement
+		if (!parent) break
+
+		for (const sibling of parent.children) {
+			if (sibling === current || !(sibling instanceof HTMLElement)) continue
+
+			const candidates: Element[] = sibling.hasAttribute('data-cms-id') ? [sibling] : []
+			candidates.push(...sibling.querySelectorAll('[data-cms-id]'))
+
+			for (const el of candidates) {
+				const id = el.getAttribute('data-cms-id')
+				if (!id) continue
+				const entry = manifest.entries[id]
+				if (!entry?.collectionSlug || !entry.collectionName) continue
+
+				const ref = refMap.get(entry.collectionName)
+				if (!ref) continue
+
+				return {
+					collection: entry.collectionName,
+					slug: entry.collectionSlug,
+					fieldName: ref.fieldName,
+					isArray: ref.isArray,
+				}
+			}
+		}
+		current = parent
+	}
+	return undefined
+}
+
 /**
  * Setup click handler for markdown elements.
  * When a markdown element is clicked, it opens the WYSIWYG editor instead of using contentEditable.

package/src/editor/fetch.ts

@@ -0,0 +1,62 @@
+import { API } from './constants'
+
+export async function fetchWithTimeout(
+	url: string,
+	options: RequestInit = {},
+	timeoutMs: number = API.REQUEST_TIMEOUT_MS,
+): Promise<Response> {
+	const controller = new AbortController()
+	const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+
+	// If the caller already provided a signal, forward its abort to our controller
+	if (options.signal) {
+		options.signal.addEventListener('abort', () => controller.abort(), { once: true })
+	}
+
+	try {
+		return await fetch(url, {
+			...options,
+			signal: controller.signal,
+		})
+	} finally {
+		clearTimeout(timeoutId)
+	}
+}
+
+/** POST JSON and return parsed response, or an error object on failure. */
+export async function postJson<TRes extends { success: boolean; error?: string }>(
+	url: string,
+	body: unknown,
+	errorContext?: string,
+): Promise<TRes> {
+	const res = await fetchWithTimeout(url, {
+		method: 'POST',
+		credentials: 'include',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(body),
+	})
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '')
+		const prefix = errorContext || 'Request failed'
+		return { success: false, error: `${prefix} (${res.status}): ${text || res.statusText}` } as TRes
+	}
+
+	return res.json()
+}
+
+/** GET JSON and return parsed response. Returns fallback on failure. */
+export async function getJson<TRes>(
+	url: string,
+	fallback: TRes,
+	signal?: AbortSignal,
+): Promise<TRes> {
+	const res = await fetchWithTimeout(url, {
+		method: 'GET',
+		credentials: 'include',
+		signal,
+	})
+
+	if (!res.ok) return fallback
+	return res.json()
+}

package/src/editor/index.tsx

@@ -9,6 +9,7 @@ import { CollectionsBrowser } from './components/collections-browser'
 import { ColorToolbar } from './components/color-toolbar'
 import { ConfirmDialog } from './components/confirm-dialog'
 import { CreatePageModal } from './components/create-page-modal'
+import { DeletePageDialog } from './components/delete-page-dialog'
 import { EditableHighlights } from './components/editable-highlights'
 import { ErrorBoundary } from './components/error-boundary'
 import { ImageOverlay } from './components/image-overlay'
@@ -16,12 +17,15 @@ import { MarkdownEditorOverlay } from './components/markdown-editor-overlay'
 import { MediaLibrary } from './components/media-library'
 import { Outline } from './components/outline'
 import { RedirectCountdown } from './components/redirect-countdown'
+import { RedirectsManager } from './components/redirects-manager'
+import { ReferencePicker } from './components/reference-picker'
 import { SelectionHighlight } from './components/selection-highlight'
 import { SeoEditor } from './components/seo-editor'
 import { TextStyleToolbar } from './components/text-style-toolbar'
 import { ToastContainer } from './components/toast/toast-container'
 import { Toolbar } from './components/toolbar'
 import { getConfig } from './config'
+import { Z_INDEX } from './constants'
 import { disableAllInteractiveElements, enableAllInteractiveElements, logDebug } from './dom'
 import {
 	discardAllChanges,
@@ -278,6 +282,8 @@ const CmsUI = () => {
 
 			if (msg.type === 'cms-deselect-element') {
 				handleBlockEditorClose()
+			} else if (msg.type === 'cms-set-features') {
+				signals.setFeatures(msg.features)
 			}
 		}
 
@@ -290,6 +296,8 @@ const CmsUI = () => {
 		if (signals.isEditing.value) {
 			hideTooltip()
 			stopEditMode(updateUI)
+		} else if (signals.currentPageCollection.value) {
+			await openMarkdownEditorForCurrentPage()
 		} else {
 			signals.isSelectMode.value = false
 			await startEditMode(config, updateUI)
@@ -613,6 +621,14 @@ const CmsUI = () => {
 				<CreatePageModal />
 			</ErrorBoundary>
 
+			<ErrorBoundary componentName="Delete Page Dialog">
+				<DeletePageDialog />
+			</ErrorBoundary>
+
+			<ErrorBoundary componentName="Redirects Manager">
+				<RedirectsManager />
+			</ErrorBoundary>
+
 			<ErrorBoundary componentName="Markdown Editor">
 				<MarkdownEditorOverlay />
 			</ErrorBoundary>
@@ -621,6 +637,8 @@ const CmsUI = () => {
 				<MediaLibrary />
 			</ErrorBoundary>
 
+			<ReferencePicker />
+
 			<ErrorBoundary componentName="Confirm Dialog">
 				<ConfirmDialog />
 			</ErrorBoundary>
@@ -648,7 +666,7 @@ class CmsEditor {
 	private setupUI(): void {
 		const hostElement = document.createElement('div')
 		hostElement.id = 'cms-app-host'
-		hostElement.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647;'
+		hostElement.style.cssText = `position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: ${Z_INDEX.MODAL};`
 		document.body.appendChild(hostElement)
 
 		// Create shadow DOM with closed mode for better isolation