@nuasite/cms 0.8.3 → 0.9.1

package/package.json

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

package/src/editor/components/toolbar.tsx

@@ -10,7 +10,7 @@ export interface ToolbarCallbacks {
 	onCompare: () => void
 	onSave: () => void
 	onDiscard: () => void
-	onAIChat?: () => void
+	onSelectElement?: () => void
 	onMediaLibrary?: () => void
 	onDismissDeployment?: () => void
 	onNavigateChange?: () => void
@@ -97,7 +97,6 @@ const DeploymentStatusIndicator = ({ onDismiss }: { onDismiss?: () => void }) =>
 export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const isEditing = signals.isEditing.value
 	const showingOriginal = signals.showingOriginal.value
-	const isChatOpen = signals.isChatOpen.value
 	const dirtyCount = signals.totalDirtyCount.value
 	const isSaving = signals.isSaving.value
 	const deploymentStatus = signals.deploymentStatus.value
@@ -107,7 +106,6 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
 
 	if (isPreviewingMarkdown) return null
-	if (isChatOpen && !isEditing) return null
 
 	const showDeploymentStatus = deploymentStatus !== null
 
@@ -126,21 +124,23 @@ export const Toolbar = ({ callbacks, collectionDefinitions }: ToolbarProps) => {
 		}
 	}
 
-	const isToolbarOpen = isEditing
+	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.onAIChat) {
+	if (callbacks.onSelectElement) {
 		menuItems.push({
-			label: 'AI Chat',
+			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">
-					<path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" />
+					<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+					<path d="M13 13l6 6" />
 				</svg>
 			),
-			onClick: () => callbacks.onAIChat?.(),
-			isActive: isChatOpen,
+			onClick: () => callbacks.onSelectElement?.(),
+			isActive: isSelectMode,
 		})
 	}
 

package/src/editor/hooks/useElementDetection.ts

@@ -58,9 +58,9 @@ export function useElementDetection(): OutlineState {
 	useEffect(() => {
 		const handleMouseMove = (ev: MouseEvent) => {
 			const isEditing = signals.isEditing.value
-			const chatOpen = signals.isChatOpen.value
+			const selectMode = signals.isSelectMode.value
 
-			if (!isEditing && !chatOpen) {
+			if (!isEditing && !selectMode) {
 				if (hideTimeoutRef.current) {
 					clearTimeout(hideTimeoutRef.current)
 					hideTimeoutRef.current = null
@@ -89,34 +89,6 @@ export function useElementDetection(): OutlineState {
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
-			// When chat is open, only detect components (not text/image elements)
-			if (chatOpen) {
-				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
-				if (componentEl) {
-					if (hideTimeoutRef.current) {
-						clearTimeout(hideTimeoutRef.current)
-						hideTimeoutRef.current = null
-					}
-					const rect = componentEl.getBoundingClientRect()
-					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
-					const instance = componentId ? getComponentInstance(manifest, componentId) : null
-
-					setOutlineState({
-						visible: true,
-						rect,
-						isComponent: true,
-						componentName: instance?.componentName,
-						tagName: componentEl.tagName.toLowerCase(),
-						element: componentEl,
-						cmsId: null,
-					})
-					return
-				}
-
-				setOutlineState(INITIAL_STATE)
-				return
-			}
-
 			// Use the improved elementsFromPoint-based detection
 			const cmsEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)
 
@@ -222,8 +194,8 @@ export function useComponentClickHandler({
 	useEffect(() => {
 		const handleClick = (ev: MouseEvent) => {
 			const isEditing = signals.isEditing.value
-			const chatOpen = signals.isChatOpen.value
-			if (!isEditing && !chatOpen) return
+			const selectMode = signals.isSelectMode.value
+			if (!isEditing && !selectMode) return
 
 			// Ignore clicks on CMS UI elements
 			if (isEventOnCmsUI(ev)) return
@@ -231,20 +203,6 @@ export function useComponentClickHandler({
 			const manifest = signals.manifest.value
 			const entries = manifest.entries
 
-			if (chatOpen) {
-				// When chat is open, only select components
-				const componentEl = getComponentAtPosition(ev.clientX, ev.clientY)
-				if (componentEl) {
-					const componentId = componentEl.getAttribute(CSS.COMPONENT_ID_ATTRIBUTE)
-					if (componentId) {
-						ev.preventDefault()
-						ev.stopPropagation()
-						signals.setChatContextElement(componentId)
-					}
-				}
-				return
-			}
-
 			// Normal editing mode behavior
 			// Check for text element first
 			const textEl = getCmsElementAtPosition(ev.clientX, ev.clientY, entries)

package/src/editor/index.tsx

@@ -1,8 +1,7 @@
 import { render } from 'preact'
-import { useCallback, useEffect } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
 import { fetchManifest } from './api'
-import { AIChat } from './components/ai-chat'
-import { AITooltip } from './components/ai-tooltip'
 import { AttributeEditor } from './components/attribute-editor'
 import { BgImageOverlay } from './components/bg-image-overlay'
 import { BlockEditor } from './components/block-editor'
@@ -32,9 +31,8 @@ import {
 	stopEditMode,
 	toggleShowOriginal,
 } from './editor'
-import { performRedo, performUndo } from './history'
+import { canRedo, canUndo, performRedo, performUndo } from './history'
 import {
-	useAIHandlers,
 	useBgImageHoverDetection,
 	useBlockEditorHandlers,
 	useComponentClickHandler,
@@ -43,6 +41,14 @@ import {
 	useTextSelection,
 	useTooltipState,
 } from './hooks'
+import {
+	buildEditorState,
+	buildPageNavigatedMessage,
+	buildReadyMessage,
+	buildSelectedElement,
+	buildStateChangedMessage,
+	postToParent,
+} from './post-message'
 import {
 	openCollectionsBrowser,
 	openMarkdownEditorForCurrentPage,
@@ -103,6 +109,17 @@ const CmsUI = () => {
 		}).catch(() => {})
 	}, [])
 
+	// Re-fetch manifest on View Transitions navigation (astro:after-swap)
+	useEffect(() => {
+		const onNavigation = () => {
+			fetchManifest().then((manifest) => {
+				signals.setManifest(manifest)
+			}).catch(() => {})
+		}
+		document.addEventListener('astro:after-swap', onNavigation)
+		return () => document.removeEventListener('astro:after-swap', onNavigation)
+	}, [])
+
 	// Auto-restore edit mode if it was active before a page refresh (e.g. after save triggers HMR)
 	useEffect(() => {
 		if (loadEditingState() && !signals.isEditing.value) {
@@ -117,18 +134,85 @@ const CmsUI = () => {
 		}
 	}, [])
 
-	const {
-		handleAIChatToggle,
-		handleChatClose,
-		handleChatCancel,
-		handleTooltipPromptSubmit,
-		handleChatSend,
-		handleApplyToElement,
-	} = useAIHandlers({
-		config,
-		showToast: signals.showToast,
-		onTooltipHide: hideTooltip,
-		onUIUpdate: updateUI,
+	// Send selected element info to parent window via postMessage (when inside an iframe)
+	const prevOutlineRef = useRef<{ cmsId: string | null; isComponent: boolean }>({ cmsId: null, isComponent: false })
+	useEffect(() => {
+		const prev = prevOutlineRef.current
+		const changed = outlineState.cmsId !== prev.cmsId
+			|| outlineState.isComponent !== prev.isComponent
+			|| (!outlineState.visible && (prev.cmsId !== null || prev.isComponent))
+
+		if (!changed) return
+		prevOutlineRef.current = { cmsId: outlineState.cmsId, isComponent: outlineState.isComponent }
+
+		if (outlineState.visible && (outlineState.cmsId || outlineState.isComponent)) {
+			const manifestData = signals.manifest.value
+			const entry = outlineState.cmsId ? manifestData.entries[outlineState.cmsId] : undefined
+			const componentEl = outlineState.element
+			const componentId = componentEl?.getAttribute('data-cms-component-id') ?? undefined
+			const instance = componentId ? manifestData.components?.[componentId] : undefined
+			const rect = outlineState.rect
+
+			const msg: CmsElementSelectedMessage = {
+				type: 'cms-element-selected',
+				element: buildSelectedElement({
+					cmsId: outlineState.cmsId,
+					isComponent: outlineState.isComponent,
+					componentName: outlineState.componentName,
+					componentId,
+					tagName: outlineState.tagName,
+					rect: rect ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : null,
+					entry,
+					instance,
+				}),
+			}
+			postToParent(msg)
+		} else {
+			const msg: CmsElementDeselectedMessage = { type: 'cms-element-deselected' }
+			postToParent(msg)
+		}
+	}, [outlineState])
+
+	// Send cms-ready + cms-page-navigated when manifest loads
+	const prevManifestRef = useRef<boolean>(false)
+	useEffect(() => {
+		const m = signals.manifest.value
+		// Only fire when manifest has entries (i.e. actually loaded)
+		if (Object.keys(m.entries).length === 0) return
+
+		if (!prevManifestRef.current) {
+			prevManifestRef.current = true
+			postToParent(buildReadyMessage(m, window.location.pathname))
+		} else {
+			postToParent(buildPageNavigatedMessage(m, window.location.pathname))
+		}
+	})
+
+	// Send cms-state-changed when editor state changes
+	const prevStateRef = useRef<string>('')
+	useEffect(() => {
+		const state = buildEditorState({
+			isEditing: signals.isEditing.value,
+			dirtyCount: {
+				text: signals.dirtyChangesCount.value,
+				image: signals.dirtyImageChangesCount.value,
+				color: signals.dirtyColorChangesCount.value,
+				bgImage: signals.dirtyBgImageChangesCount.value,
+				attribute: signals.dirtyAttributeChangesCount.value,
+				seo: signals.dirtySeoChangesCount.value,
+				total: signals.totalDirtyCount.value,
+			},
+			deploymentStatus: signals.deploymentStatus.value,
+			lastDeployedAt: signals.lastDeployedAt.value,
+			canUndo: canUndo.value,
+			canRedo: canRedo.value,
+		})
+
+		const key = JSON.stringify(state)
+		if (key === prevStateRef.current) return
+		prevStateRef.current = key
+
+		postToParent(buildStateChangedMessage(state))
 	})
 
 	const {
@@ -151,6 +235,7 @@ const CmsUI = () => {
 			hideTooltip()
 			stopEditMode(updateUI)
 		} else {
+			signals.isSelectMode.value = false
 			await startEditMode(config, updateUI)
 		}
 	}, [config, updateUI, hideTooltip])
@@ -209,6 +294,10 @@ const CmsUI = () => {
 		openSeoEditor()
 	}, [])
 
+	const handleSelectElementToggle = useCallback(() => {
+		signals.isSelectMode.value = !signals.isSelectMode.value
+	}, [])
+
 	// Color toolbar handlers
 	const handleColorToolbarChange = useCallback(
 		(
@@ -308,7 +397,6 @@ const CmsUI = () => {
 	// Get reactive values from signals
 	const isEditing = signals.isEditing.value
 	const isAIProcessing = signals.isAIProcessing.value
-	const isChatOpen = signals.isChatOpen.value
 	const blockEditorState = signals.blockEditorState.value
 	const colorEditorState = signals.colorEditorState.value
 	const manifest = signals.manifest.value
@@ -384,7 +472,7 @@ const CmsUI = () => {
 						onCompare: handleCompare,
 						onSave: handleSave,
 						onDiscard: handleDiscard,
-						onAIChat: handleAIChatToggle,
+						onSelectElement: handleSelectElementToggle,
 						onMediaLibrary: handleMediaLibrary,
 						onDismissDeployment: handleDismissDeployment,
 						onNavigateChange: () => {
@@ -400,18 +488,6 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
-			<ErrorBoundary componentName="AI Tooltip">
-				<AITooltip
-					callbacks={{
-						onPromptSubmit: handleTooltipPromptSubmit,
-					}}
-					visible={!!tooltipState.elementId && isEditing && !isAIProcessing && !textSelectionState.hasSelection}
-					elementId={tooltipState.elementId}
-					rect={tooltipState.rect}
-					processing={isAIProcessing}
-				/>
-			</ErrorBoundary>
-
 			<ErrorBoundary componentName="Text Style Toolbar">
 				<TextStyleToolbar
 					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing && isTextStylingAllowed}
@@ -439,17 +515,6 @@ const CmsUI = () => {
 				/>
 			</ErrorBoundary>
 
-			<ErrorBoundary componentName="AI Chat">
-				<AIChat
-					callbacks={{
-						onSend: handleChatSend,
-						onClose: handleChatClose,
-						onCancel: handleChatCancel,
-						onApplyToElement: handleApplyToElement,
-					}}
-				/>
-			</ErrorBoundary>
-
 			<ErrorBoundary componentName="Block Editor">
 				<BlockEditor
 					visible={blockEditorState.isOpen && isEditing}

package/src/editor/post-message.ts

@@ -0,0 +1,136 @@
+import type {
+	CmsEditorState,
+	CmsManifest,
+	CmsPageNavigatedMessage,
+	CmsPostMessage,
+	CmsReadyMessage,
+	CmsSelectedElement,
+	CmsStateChangedMessage,
+	ManifestEntry,
+	PageSeoData,
+} from '../types'
+import type { ComponentInstance } from '../types'
+
+/** Send a postMessage to the parent window (no-op when not in an iframe) */
+export function postToParent(msg: CmsPostMessage): void {
+	if (window.parent !== window) {
+		window.parent.postMessage(msg, '*')
+	}
+}
+
+/** Build a CmsSelectedElement from manifest data and outline state */
+export function buildSelectedElement(opts: {
+	cmsId: string | null
+	isComponent: boolean
+	componentName?: string
+	componentId?: string
+	tagName?: string
+	rect: { x: number; y: number; width: number; height: number } | null
+	entry?: ManifestEntry
+	instance?: ComponentInstance
+}): CmsSelectedElement {
+	const { cmsId, isComponent, componentName, componentId, tagName, rect, entry, instance } = opts
+	return {
+		cmsId,
+		isComponent,
+		componentName: componentName ?? instance?.componentName,
+		componentId,
+		tagName: tagName ?? entry?.tag,
+		rect,
+		...(entry && {
+			text: entry.text,
+			html: entry.html,
+			sourcePath: entry.sourcePath,
+			sourceLine: entry.sourceLine,
+			sourceSnippet: entry.sourceSnippet,
+			sourceHash: entry.sourceHash,
+			stableId: entry.stableId,
+			contentPath: entry.contentPath,
+			parentComponentId: entry.parentComponentId,
+			childCmsIds: entry.childCmsIds,
+			imageMetadata: entry.imageMetadata,
+			backgroundImage: entry.backgroundImage,
+			colorClasses: entry.colorClasses,
+			attributes: entry.attributes,
+			constraints: entry.constraints,
+			allowStyling: entry.allowStyling,
+			collectionName: entry.collectionName,
+			collectionSlug: entry.collectionSlug,
+		}),
+		...(instance && {
+			component: {
+				name: instance.componentName,
+				file: instance.file,
+				sourcePath: instance.sourcePath,
+				sourceLine: instance.sourceLine,
+				props: instance.props,
+				slots: instance.slots,
+			},
+		}),
+	}
+}
+
+/** Build a CmsReadyMessage from the loaded manifest */
+export function buildReadyMessage(manifest: CmsManifest, pathname: string): CmsReadyMessage {
+	const seo = (manifest as any).seo as PageSeoData | undefined
+	const pageTitle = seo?.title?.content ?? manifest.pages?.find(p => p.pathname === pathname)?.title
+
+	return {
+		type: 'cms-ready',
+		data: {
+			pathname,
+			pageTitle,
+			seo,
+			pages: manifest.pages,
+			collectionDefinitions: manifest.collectionDefinitions,
+			componentDefinitions: manifest.componentDefinitions,
+			availableColors: manifest.availableColors,
+			availableTextStyles: manifest.availableTextStyles,
+			metadata: manifest.metadata,
+		},
+	}
+}
+
+/** Build a CmsPageNavigatedMessage */
+export function buildPageNavigatedMessage(manifest: CmsManifest, pathname: string): CmsPageNavigatedMessage {
+	const seo = (manifest as any).seo as PageSeoData | undefined
+	const pageTitle = seo?.title?.content ?? manifest.pages?.find(p => p.pathname === pathname)?.title
+
+	return {
+		type: 'cms-page-navigated',
+		page: {
+			pathname,
+			title: pageTitle,
+		},
+	}
+}
+
+/** Build a CmsEditorState snapshot from current signal values */
+export function buildEditorState(opts: {
+	isEditing: boolean
+	dirtyCount: CmsEditorState['dirtyCount']
+	deploymentStatus: CmsEditorState['deployment']['status']
+	lastDeployedAt: string | null
+	canUndo: boolean
+	canRedo: boolean
+}): CmsEditorState {
+	return {
+		isEditing: opts.isEditing,
+		hasChanges: opts.dirtyCount.total > 0,
+		dirtyCount: opts.dirtyCount,
+		deployment: {
+			status: opts.deploymentStatus,
+			lastDeployedAt: opts.lastDeployedAt,
+		},
+		canUndo: opts.canUndo,
+		canRedo: opts.canRedo,
+	}
+}
+
+/** Build a CmsStateChangedMessage */
+export function buildStateChangedMessage(state: CmsEditorState): CmsStateChangedMessage {
+	return {
+		type: 'cms-state-changed',
+		state,
+	}
+}

package/src/editor/signals.ts

@@ -213,6 +213,7 @@ function createInitialAttributeEditorState(): AttributeEditorState {
 
 export const isEnabled = signal(false)
 export const isEditing = signal(false)
+export const isSelectMode = signal(false)
 export const isSaving = signal(false)
 export const showingOriginal = signal(false)
 export const currentEditingId = signal<string | null>(null)

package/src/index.ts

@@ -287,8 +287,17 @@ export type {
 	AvailableColors,
 	AvailableTextStyles,
 	CanonicalUrl,
+	CmsEditorState,
+	CmsElementDeselectedMessage,
+	CmsElementSelectedMessage,
 	CmsManifest,
 	CmsMarkerOptions,
+	CmsPageNavigatedMessage,
+	CmsPostMessage,
+	CmsReadyData,
+	CmsReadyMessage,
+	CmsSelectedElement,
+	CmsStateChangedMessage,
 	CollectionDefinition,
 	CollectionEntry,
 	ComponentDefinition,

package/src/types.ts

@@ -423,3 +423,148 @@ export interface PageSeoData {
 	/** JSON-LD structured data blocks */
 	jsonLd?: JsonLdEntry[]
 }
+
+// ============================================================================
+// PostMessage Types (iframe communication)
+// ============================================================================
+
+/** Element data sent to parent when a CMS element is hovered/selected */
+export interface CmsSelectedElement {
+	/** CMS element ID (null for component-only selections) */
+	cmsId: string | null
+	/** Whether the selected element is a component root */
+	isComponent: boolean
+	/** Component name if applicable */
+	componentName?: string
+	/** Component instance ID */
+	componentId?: string
+	/** HTML tag name */
+	tagName?: string
+	/** Bounding rect relative to the iframe viewport */
+	rect: { x: number; y: number; width: number; height: number } | null
+
+	// --- Manifest entry data (text/image elements) ---
+
+	/** Plain text content */
+	text?: string
+	/** HTML content with inline styling */
+	html?: string
+	/** Source file path */
+	sourcePath?: string
+	/** Line number in source file */
+	sourceLine?: number
+	/** Parent component ID */
+	parentComponentId?: string
+	/** Nested CMS element IDs */
+	childCmsIds?: string[]
+	/** Image metadata for img elements */
+	imageMetadata?: ImageMetadata
+	/** Background image metadata */
+	backgroundImage?: BackgroundImageMetadata
+	/** Color classes (bg, text, border, etc.) */
+	colorClasses?: Record<string, Attribute>
+	/** HTML attributes with source info */
+	attributes?: Record<string, Attribute>
+	/** Content validation constraints */
+	constraints?: ContentConstraints
+	/** Whether inline text styling is allowed */
+	allowStyling?: boolean
+	/** Collection name if from a content collection */
+	collectionName?: string
+	/** Collection entry slug */
+	collectionSlug?: string
+	/** Full element snippet from source */
+	sourceSnippet?: string
+	/** SHA256 hash of sourceSnippet for conflict detection */
+	sourceHash?: string
+	/** Stable ID derived from content + context hash */
+	stableId?: string
+	/** Path to the markdown content file */
+	contentPath?: string
+
+	// --- Component instance data ---
+
+	/** Full component instance info (when isComponent is true) */
+	component?: {
+		name: string
+		file: string
+		sourcePath: string
+		sourceLine: number
+		props: Record<string, unknown>
+		slots?: Record<string, string>
+	}
+}
+
+/** Message sent when a CMS element is hovered/selected */
+export interface CmsElementSelectedMessage {
+	type: 'cms-element-selected'
+	element: CmsSelectedElement
+}
+
+/** Message sent when no element is hovered */
+export interface CmsElementDeselectedMessage {
+	type: 'cms-element-deselected'
+}
+
+/** Data sent with the cms-ready message when the manifest first loads */
+export interface CmsReadyData {
+	pathname: string
+	pageTitle?: string
+	seo?: PageSeoData
+	pages?: PageEntry[]
+	collectionDefinitions?: Record<string, CollectionDefinition>
+	componentDefinitions?: Record<string, ComponentDefinition>
+	availableColors?: AvailableColors
+	availableTextStyles?: AvailableTextStyles
+	metadata?: ManifestMetadata
+}
+
+/** Message sent when the CMS manifest has loaded and the editor is ready */
+export interface CmsReadyMessage {
+	type: 'cms-ready'
+	data: CmsReadyData
+}
+
+/** Snapshot of editor state sent on every meaningful change */
+export interface CmsEditorState {
+	isEditing: boolean
+	hasChanges: boolean
+	dirtyCount: {
+		text: number
+		image: number
+		color: number
+		bgImage: number
+		attribute: number
+		seo: number
+		total: number
+	}
+	deployment: {
+		status: 'pending' | 'queued' | 'running' | 'completed' | 'failed' | 'cancelled' | null
+		lastDeployedAt: string | null
+	}
+	canUndo: boolean
+	canRedo: boolean
+}
+
+/** Message sent when editor state changes (dirty counts, deployment, editing mode, undo/redo) */
+export interface CmsStateChangedMessage {
+	type: 'cms-state-changed'
+	state: CmsEditorState
+}
+
+/** Message sent when the user navigates to a different page (manifest reload) */
+export interface CmsPageNavigatedMessage {
+	type: 'cms-page-navigated'
+	page: {
+		pathname: string
+		title?: string
+	}
+}
+
+/** All possible CMS postMessage types sent from the editor iframe to the parent */
+export type CmsPostMessage =
+	| CmsElementSelectedMessage
+	| CmsElementDeselectedMessage
+	| CmsReadyMessage
+	| CmsStateChangedMessage
+	| CmsPageNavigatedMessage