@nuasite/cms 0.9.3 → 0.10.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/editor/components/fields.tsx

@@ -110,6 +110,54 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 	)
 }
 
+// ============================================================================
+// Color Field (color picker + hex text input)
+// ============================================================================
+
+export interface ColorFieldProps {
+	label: string
+	value: string | undefined
+	placeholder?: string
+	onChange: (value: string) => void
+	isDirty?: boolean
+	onReset?: () => void
+}
+
+export function ColorField({ label, value, placeholder, onChange, isDirty, onReset }: ColorFieldProps) {
+	const colorValue = value || '#000000'
+	// Validate hex for the native picker (must be #rrggbb)
+	const isValidHex = /^#[0-9a-fA-F]{6}$/.test(colorValue)
+	const pickerValue = isValidHex ? colorValue : '#000000'
+
+	return (
+		<div class="space-y-1.5">
+			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
+			<div class="flex gap-2">
+				<input
+					type="color"
+					value={pickerValue}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					class="w-10 h-[38px] p-0.5 bg-white/10 border border-white/20 rounded-cms-sm cursor-pointer"
+					data-cms-ui
+				/>
+				<input
+					type="text"
+					value={value ?? ''}
+					placeholder={placeholder ?? '#000000'}
+					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
+					class={cn(
+						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm 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',
+					)}
+					data-cms-ui
+				/>
+			</div>
+		</div>
+	)
+}
+
 // ============================================================================
 // Select Field (native select)
 // ============================================================================

package/src/editor/components/selection-highlight.tsx

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { Z_INDEX } from '../constants'
+import { usePositionTracking } from '../hooks/utils'
+import { getComponentInstance } from '../manifest'
+import * as signals from '../signals'
+
+/**
+ * Renders a persistent highlight around the currently selected component.
+ * Uses Shadow DOM to avoid style conflicts with page content.
+ */
+export function SelectionHighlight() {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const shadowRootRef = useRef<ShadowRoot | null>(null)
+	const overlayRef = useRef<HTMLDivElement | null>(null)
+	const labelRef = useRef<HTMLDivElement | null>(null)
+
+	const componentId = signals.currentComponentId.value
+	const isEditing = signals.isEditing.value
+	const isSelectMode = signals.isSelectMode.value
+	const visible = !!componentId && (isEditing || isSelectMode)
+
+	// Find the DOM element for the selected component
+	const element = componentId
+		? (document.querySelector(`[data-cms-component-id="${componentId}"]`) as HTMLElement | null)
+		: null
+
+	// Get component name from manifest
+	const manifest = signals.manifest.value
+	const instance = componentId ? getComponentInstance(manifest, componentId) : null
+	const componentName = instance?.componentName
+
+	// Initialize Shadow DOM once
+	useEffect(() => {
+		if (containerRef.current && !shadowRootRef.current) {
+			shadowRootRef.current = containerRef.current.attachShadow({ mode: 'open' })
+
+			const style = document.createElement('style')
+			style.textContent = `
+				:host {
+					position: fixed;
+					top: 0;
+					left: 0;
+					pointer-events: none;
+					z-index: ${Z_INDEX.OVERLAY};
+				}
+
+				.selection-overlay {
+					position: fixed;
+					border: 2px solid #DFFF40;
+					border-radius: 16px;
+					box-sizing: border-box;
+					background: rgba(223, 255, 64, 0.03);
+					box-shadow: 0 0 0 1px rgba(223, 255, 64, 0.15);
+					transition: opacity 150ms ease;
+					pointer-events: none;
+				}
+
+				.selection-overlay.hidden {
+					opacity: 0;
+				}
+
+				.selection-label {
+					position: fixed;
+					padding: 5px 8px 5px 12px;
+					border-radius: 9999px;
+					font-size: 11px;
+					font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+					font-weight: 600;
+					white-space: nowrap;
+					background: #DFFF40;
+					color: #1A1A1A;
+					display: none;
+					align-items: center;
+					gap: 6px;
+					pointer-events: auto;
+					z-index: ${Z_INDEX.MODAL};
+					box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+				}
+
+				.deselect-btn {
+					width: 18px;
+					height: 18px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: rgba(0,0,0,0.1);
+					border: none;
+					border-radius: 50%;
+					cursor: pointer;
+					padding: 0;
+					color: #1A1A1A;
+					font-size: 10px;
+					line-height: 1;
+					transition: background 150ms ease;
+				}
+
+				.deselect-btn:hover {
+					background: rgba(0,0,0,0.25);
+				}
+			`
+
+			overlayRef.current = document.createElement('div')
+			overlayRef.current.className = 'selection-overlay hidden'
+
+			labelRef.current = document.createElement('div')
+			labelRef.current.className = 'selection-label'
+
+			shadowRootRef.current.appendChild(style)
+			shadowRootRef.current.appendChild(overlayRef.current)
+			shadowRootRef.current.appendChild(labelRef.current)
+		}
+	}, [])
+
+	// Handle deselection
+	const handleDeselect = useCallback(() => {
+		signals.setCurrentComponentId(null)
+		signals.setBlockEditorOpen(false)
+	}, [])
+
+	// Track position on scroll/resize
+	const handlePositionChange = useCallback((rect: DOMRect | null) => {
+		if (!overlayRef.current || !labelRef.current) return
+
+		if (!rect) {
+			overlayRef.current.className = 'selection-overlay hidden'
+			labelRef.current.style.display = 'none'
+			return
+		}
+
+		overlayRef.current.className = 'selection-overlay'
+		overlayRef.current.style.left = `${rect.left - 6}px`
+		overlayRef.current.style.top = `${rect.top - 6}px`
+		overlayRef.current.style.width = `${rect.width + 12}px`
+		overlayRef.current.style.height = `${rect.height + 12}px`
+
+		// Position label above the element
+		const labelTop = Math.max(8, rect.top - 32)
+		const labelLeft = Math.max(8, rect.left)
+
+		// Hide label if element is out of viewport
+		if (rect.bottom < 0 || rect.top > window.innerHeight) {
+			labelRef.current.style.display = 'none'
+		} else {
+			labelRef.current.style.display = 'flex'
+			labelRef.current.style.top = `${labelTop}px`
+			labelRef.current.style.left = `${labelLeft}px`
+		}
+	}, [])
+
+	usePositionTracking(element, handlePositionChange, visible)
+
+	// Update content and initial position when selection changes
+	useEffect(() => {
+		if (!overlayRef.current || !labelRef.current) return
+
+		if (!visible || !element) {
+			overlayRef.current.className = 'selection-overlay hidden'
+			labelRef.current.style.display = 'none'
+			return
+		}
+
+		// Build label content
+		const name = componentName ?? 'Component'
+		labelRef.current.innerHTML = ''
+
+		const nameSpan = document.createElement('span')
+		nameSpan.textContent = name
+		labelRef.current.appendChild(nameSpan)
+
+		const deselectBtn = document.createElement('button')
+		deselectBtn.className = 'deselect-btn'
+		deselectBtn.innerHTML = '✕'
+		deselectBtn.title = 'Deselect'
+		deselectBtn.onclick = (e) => {
+			e.stopPropagation()
+			handleDeselect()
+		}
+		labelRef.current.appendChild(deselectBtn)
+
+		// Set initial position
+		const rect = element.getBoundingClientRect()
+		handlePositionChange(rect)
+	}, [visible, element, componentName, handleDeselect, handlePositionChange])
+
+	return (
+		<div
+			ref={containerRef}
+			data-cms-ui
+			style={{
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				width: 0,
+				height: 0,
+				pointerEvents: 'none',
+				zIndex: Z_INDEX.OVERLAY,
+			}}
+		/>
+	)
+}

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

@@ -15,7 +15,37 @@ import {
 	showToast,
 } from '../signals'
 import type { ChangePayload, PageSeoData, PendingSeoChange } from '../types'
-import { ImageField } from './fields'
+import { ColorField, ComboBoxField, ImageField } from './fields'
+
+const OG_TYPE_OPTIONS = [
+	{ value: 'website', label: 'Website', description: 'Default type for most pages' },
+	{ value: 'article', label: 'Article', description: 'Blog posts, news articles' },
+	{ value: 'profile', label: 'Profile', description: 'User or author profile page' },
+	{ value: 'video.movie', label: 'Video (Movie)', description: 'Movie or film' },
+	{ value: 'video.episode', label: 'Video (Episode)', description: 'TV show episode' },
+	{ value: 'video.other', label: 'Video (Other)', description: 'Other video content' },
+	{ value: 'music.song', label: 'Music (Song)', description: 'Individual song' },
+	{ value: 'music.album', label: 'Music (Album)', description: 'Music album' },
+	{ value: 'book', label: 'Book', description: 'Book or publication' },
+	{ value: 'product', label: 'Product', description: 'Product page' },
+]
+
+const TWITTER_CARD_OPTIONS = [
+	{ value: 'summary', label: 'Summary', description: 'Small square image with title and description' },
+	{ value: 'summary_large_image', label: 'Summary Large Image', description: 'Large banner image above title' },
+	{ value: 'app', label: 'App', description: 'Mobile app download card' },
+	{ value: 'player', label: 'Player', description: 'Embedded media player card' },
+]
+
+const ROBOTS_OPTIONS = [
+	{ value: 'index, follow', label: 'Index, Follow', description: 'Allow indexing and link following (default)' },
+	{ value: 'noindex, follow', label: 'No Index, Follow', description: 'Block indexing but follow links' },
+	{ value: 'index, nofollow', label: 'Index, No Follow', description: "Allow indexing but don't follow links" },
+	{ value: 'noindex, nofollow', label: 'No Index, No Follow', description: 'Block indexing and link following' },
+	{ value: 'noarchive', label: 'No Archive', description: 'Prevent cached copies in search results' },
+	{ value: 'nosnippet', label: 'No Snippet', description: "Don't show text snippets in results" },
+	{ value: 'max-image-preview:large', label: 'Max Image Preview: Large', description: 'Allow large image previews' },
+]
 
 interface SeoFieldProps {
 	label: string
@@ -63,6 +93,18 @@ function SeoField({ label, id, value, placeholder, multiline, onChange }: SeoFie
 	)
 }
 
+/** Helper to resolve pending value/dirty state for a SEO meta tag */
+function useSeoMeta(tag: { id?: string; content: string } | undefined) {
+	if (!tag) return { id: undefined, original: '', current: '', dirty: false }
+	const pending = tag.id ? getPendingSeoChange(tag.id) : undefined
+	return {
+		id: tag.id,
+		original: tag.content,
+		current: pending?.newValue ?? tag.content ?? '',
+		dirty: pending?.isDirty ?? false,
+	}
+}
+
 interface SeoSectionProps {
 	title: string
 	children: preact.ComponentChildren
@@ -130,6 +172,8 @@ export function SeoEditor() {
 			seoData.description,
 			seoData.keywords,
 			seoData.canonical,
+			seoData.themeColor,
+			seoData.robots,
 			...(seoData.openGraph ? Object.values(seoData.openGraph) : []),
 			...(seoData.twitterCard ? Object.values(seoData.twitterCard) : []),
 			...(seoData.favicons || []),
@@ -189,6 +233,14 @@ export function SeoEditor() {
 		}
 	}, [findSeoElementById])
 
+	// Resolve pending state for specialized fields
+	const ogImage = useSeoMeta(seoData?.openGraph?.image)
+	const ogType = useSeoMeta(seoData?.openGraph?.type)
+	const twitterCard = useSeoMeta(seoData?.twitterCard?.card)
+	const twitterImage = useSeoMeta(seoData?.twitterCard?.image)
+	const themeColor = useSeoMeta(seoData?.themeColor)
+	const robots = useSeoMeta(seoData?.robots)
+
 	if (!visible) return null
 
 	const hasSeoData = seoData && (
@@ -196,6 +248,8 @@ export function SeoEditor() {
 		|| seoData.description
 		|| seoData.keywords
 		|| seoData.canonical
+		|| seoData.themeColor
+		|| seoData.robots
 		|| seoData.openGraph
 		|| seoData.twitterCard
 		|| (seoData.favicons && seoData.favicons.length > 0)
@@ -292,6 +346,29 @@ export function SeoEditor() {
 											onChange={handleFieldChange}
 										/>
 									)}
+									{seoData.robots && (
+										<ComboBoxField
+											label="Robots"
+											value={robots.current}
+											placeholder="index, follow"
+											options={ROBOTS_OPTIONS}
+											onChange={(v) => {
+												if (robots.id) handleFieldChange(robots.id, v, robots.original)
+											}}
+											isDirty={robots.dirty}
+										/>
+									)}
+									{seoData.themeColor && (
+										<ColorField
+											label="Theme Color"
+											value={themeColor.current}
+											placeholder="#000000"
+											onChange={(v) => {
+												if (themeColor.id) handleFieldChange(themeColor.id, v, themeColor.original)
+											}}
+											isDirty={themeColor.dirty}
+										/>
+									)}
 								</SeoSection>
 
 								{/* Favicons */}
@@ -355,12 +432,19 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.openGraph.image && (
-											<SeoField
+											<ImageField
 												label="OG Image"
-												id={seoData.openGraph.image.id}
-												value={seoData.openGraph.image.content}
+												value={ogImage.current}
 												placeholder="/images/og-image.jpg"
-												onChange={handleFieldChange}
+												onChange={(v) => {
+													if (ogImage.id) handleFieldChange(ogImage.id, v, ogImage.original)
+												}}
+												onBrowse={() => {
+													openMediaLibraryWithCallback((url: string) => {
+														if (ogImage.id) handleFieldChange(ogImage.id, url, ogImage.original)
+													})
+												}}
+												isDirty={ogImage.dirty}
 											/>
 										)}
 										{seoData.openGraph.url && (
@@ -373,12 +457,15 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.openGraph.type && (
-											<SeoField
+											<ComboBoxField
 												label="OG Type"
-												id={seoData.openGraph.type.id}
-												value={seoData.openGraph.type.content}
+												value={ogType.current}
 												placeholder="website"
-												onChange={handleFieldChange}
+												options={OG_TYPE_OPTIONS}
+												onChange={(v) => {
+													if (ogType.id) handleFieldChange(ogType.id, v, ogType.original)
+												}}
+												isDirty={ogType.dirty}
 											/>
 										)}
 										{seoData.openGraph.siteName && (
@@ -397,12 +484,15 @@ export function SeoEditor() {
 								{seoData.twitterCard && Object.keys(seoData.twitterCard).length > 0 && (
 									<SeoSection title="Twitter Card">
 										{seoData.twitterCard.card && (
-											<SeoField
+											<ComboBoxField
 												label="Card Type"
-												id={seoData.twitterCard.card.id}
-												value={seoData.twitterCard.card.content}
+												value={twitterCard.current}
 												placeholder="summary_large_image"
-												onChange={handleFieldChange}
+												options={TWITTER_CARD_OPTIONS}
+												onChange={(v) => {
+													if (twitterCard.id) handleFieldChange(twitterCard.id, v, twitterCard.original)
+												}}
+												isDirty={twitterCard.dirty}
 											/>
 										)}
 										{seoData.twitterCard.title && (
@@ -425,12 +515,19 @@ export function SeoEditor() {
 											/>
 										)}
 										{seoData.twitterCard.image && (
-											<SeoField
+											<ImageField
 												label="Twitter Image"
-												id={seoData.twitterCard.image.id}
-												value={seoData.twitterCard.image.content}
+												value={twitterImage.current}
 												placeholder="/images/twitter-image.jpg"
-												onChange={handleFieldChange}
+												onChange={(v) => {
+													if (twitterImage.id) handleFieldChange(twitterImage.id, v, twitterImage.original)
+												}}
+												onBrowse={() => {
+													openMediaLibraryWithCallback((url: string) => {
+														if (twitterImage.id) handleFieldChange(twitterImage.id, url, twitterImage.original)
+													})
+												}}
+												isDirty={twitterImage.dirty}
 											/>
 										)}
 										{seoData.twitterCard.site && (

package/src/editor/components/toolbar.tsx

@@ -291,21 +291,21 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 							</button>
 						)
 						: isSelectMode
-							? (
-								<button
-									onClick={(e) => {
-										e.stopPropagation()
-										callbacks.onSelectElement?.()
-									}}
-									class="w-10 h-10 flex items-center justify-center rounded-full text-white/60 hover:text-white hover:bg-white/10 transition-all duration-150 cursor-pointer"
-									title="Done selecting"
-								>
-									<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-									</svg>
-								</button>
-							)
-							: (
+						? (
+							<button
+								onClick={(e) => {
+									e.stopPropagation()
+									callbacks.onSelectElement?.()
+								}}
+								class="w-10 h-10 flex items-center justify-center rounded-full text-white/60 hover:text-white hover:bg-white/10 transition-all duration-150 cursor-pointer"
+								title="Done selecting"
+							>
+								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						)
+						: (
 							<div class="relative">
 								<button
 									onClick={(e) => {

package/src/editor/hooks/useBlockEditorHandlers.ts

@@ -53,10 +53,17 @@ export function useBlockEditorHandlers({
 	const [blockEditorCursor, setBlockEditorCursor] = useState<{ x: number; y: number } | null>(null)
 
 	/**
-	 * Open block editor for a component
+	 * Open block editor for a component, or deselect if already selected
 	 */
 	const handleComponentSelect = useCallback(
 		(componentId: string, cursor: { x: number; y: number }) => {
+			// Toggle: clicking the same component deselects it
+			if (signals.currentComponentId.value === componentId) {
+				signals.setCurrentComponentId(null)
+				signals.setBlockEditorOpen(false)
+				setBlockEditorCursor(null)
+				return
+			}
 			signals.setCurrentComponentId(componentId)
 			signals.setBlockEditorOpen(true)
 			setBlockEditorCursor(cursor)

package/src/editor/hooks/useElementDetection.ts

@@ -182,6 +182,7 @@ export function useElementDetection(): OutlineState {
 
 export interface ComponentClickHandlerOptions {
 	onComponentSelect: (componentId: string, cursor: { x: number; y: number }) => void
+	onComponentDeselect?: () => void
 }
 
 /**
@@ -190,6 +191,7 @@ export interface ComponentClickHandlerOptions {
  */
 export function useComponentClickHandler({
 	onComponentSelect,
+	onComponentDeselect,
 }: ComponentClickHandlerOptions): void {
 	useEffect(() => {
 		const handleClick = (ev: MouseEvent) => {
@@ -207,7 +209,10 @@ export function useComponentClickHandler({
 			// Check for text element first
 			const textEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
 			if (textEl && !textEl.hasAttribute(CSS.COMPONENT_ID_ATTRIBUTE)) {
-				// Let the text element handle this click
+				// Clicking a text element deselects any selected component
+				if (signals.currentComponentId.value && onComponentDeselect) {
+					onComponentDeselect()
+				}
 				return
 			}
 
@@ -229,13 +234,31 @@ export function useComponentClickHandler({
 						ev.stopPropagation()
 						onComponentSelect(componentId, { x: ev.clientX, y: ev.clientY })
 					}
+					return
 				}
 			}
+
+			// Clicking on empty space deselects any selected component
+			if (signals.currentComponentId.value && onComponentDeselect) {
+				onComponentDeselect()
+			}
+		}
+
+		// Escape key deselects the selected component
+		const handleKeyDown = (ev: KeyboardEvent) => {
+			if (ev.key === 'Escape' && signals.currentComponentId.value && onComponentDeselect) {
+				ev.preventDefault()
+				onComponentDeselect()
+			}
 		}
 
 		document.addEventListener('click', handleClick, true)
-		return () => document.removeEventListener('click', handleClick, true)
-	}, [onComponentSelect])
+		document.addEventListener('keydown', handleKeyDown)
+		return () => {
+			document.removeEventListener('click', handleClick, true)
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [onComponentSelect, onComponentDeselect])
 }
 
 // Re-export utilities for backwards compatibility

package/src/editor/index.tsx

@@ -1,6 +1,6 @@
 import { render } from 'preact'
 import { useCallback, useEffect, useRef } from 'preact/hooks'
-import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
+import type { CmsElementDeselectedMessage, CmsElementSelectedMessage, CmsInboundMessage } from '../types'
 import { fetchManifest } from './api'
 import { AttributeEditor } from './components/attribute-editor'
 import { BgImageOverlay } from './components/bg-image-overlay'
@@ -16,6 +16,7 @@ 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 { 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'
@@ -227,7 +228,25 @@ const CmsUI = () => {
 		showToast: signals.showToast,
 	})
 
-	useComponentClickHandler({ onComponentSelect: handleComponentSelect })
+	useComponentClickHandler({
+		onComponentSelect: handleComponentSelect,
+		onComponentDeselect: handleBlockEditorClose,
+	})
+
+	// Listen for inbound messages from parent window (when inside an iframe)
+	useEffect(() => {
+		const handleMessage = (ev: MessageEvent) => {
+			const msg = ev.data as CmsInboundMessage
+			if (!msg || typeof msg.type !== 'string') return
+
+			if (msg.type === 'cms-deselect-element') {
+				handleBlockEditorClose()
+			}
+		}
+
+		window.addEventListener('message', handleMessage)
+		return () => window.removeEventListener('message', handleMessage)
+	}, [handleBlockEditorClose])
 
 	// Editor control handlers
 	const handleEditToggle = useCallback(async () => {
@@ -431,6 +450,10 @@ const CmsUI = () => {
 				<EditableHighlights visible={showEditableHighlights && isEditing} />
 			</ErrorBoundary>
 
+			<ErrorBoundary componentName="Selection Highlight">
+				<SelectionHighlight />
+			</ErrorBoundary>
+
 			<ErrorBoundary componentName="Outline">
 				<Outline
 					visible={outlineState.visible}

package/src/index.ts

@@ -287,9 +287,11 @@ export type {
 	AvailableColors,
 	AvailableTextStyles,
 	CanonicalUrl,
+	CmsDeselectElementMessage,
 	CmsEditorState,
 	CmsElementDeselectedMessage,
 	CmsElementSelectedMessage,
+	CmsInboundMessage,
 	CmsManifest,
 	CmsMarkerOptions,
 	CmsPageNavigatedMessage,

package/src/seo-processor.ts

@@ -215,6 +215,18 @@ function categorizeMetaTags(metaTags: SeoMetaTag[], seo: PageSeoData): void {
 			continue
 		}
 
+		// Theme color
+		if (name === 'theme-color') {
+			seo.themeColor = meta
+			continue
+		}
+
+		// Robots
+		if (name === 'robots') {
+			seo.robots = meta
+			continue
+		}
+
 		// Open Graph tags
 		if (property?.startsWith('og:')) {
 			const ogKey = property.replace('og:', '')