@nuasite/cms 0.8.3 → 0.9.0

package/package.json

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

package/src/editor/index.tsx

@@ -1,5 +1,14 @@
 import { render } from 'preact'
-import { useCallback, useEffect } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import type { CmsElementDeselectedMessage, CmsElementSelectedMessage } from '../types'
+import {
+	buildEditorState,
+	buildPageNavigatedMessage,
+	buildReadyMessage,
+	buildSelectedElement,
+	buildStateChangedMessage,
+	postToParent,
+} from './post-message'
 import { fetchManifest } from './api'
 import { AIChat } from './components/ai-chat'
 import { AITooltip } from './components/ai-tooltip'
@@ -32,7 +41,7 @@ import {
 	stopEditMode,
 	toggleShowOriginal,
 } from './editor'
-import { performRedo, performUndo } from './history'
+import { canRedo, canUndo, performRedo, performUndo } from './history'
 import {
 	useAIHandlers,
 	useBgImageHoverDetection,
@@ -103,6 +112,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,6 +137,87 @@ const CmsUI = () => {
 		}
 	}, [])
 
+	// 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 {
 		handleAIChatToggle,
 		handleChatClose,
@@ -384,7 +485,6 @@ const CmsUI = () => {
 						onCompare: handleCompare,
 						onSave: handleSave,
 						onDiscard: handleDiscard,
-						onAIChat: handleAIChatToggle,
 						onMediaLibrary: handleMediaLibrary,
 						onDismissDeployment: handleDismissDeployment,
 						onNavigateChange: () => {
@@ -400,18 +500,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 +527,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/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