Automattic · youknowriad · Mar 27, 2026
diff --git a/apps/ai-canvas/index.html b/apps/ai-canvas/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Studio AI Canvas</title>
+		<style>
+			*,
+			*::before,
+			*::after {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			html,
+			body,
+			#root {
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				font-family: system-ui, -apple-system, sans-serif;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="src/main.tsx"></script>
+	</body>
+</html>
diff --git a/apps/ai-canvas/package.json b/apps/ai-canvas/package.json
@@ -0,0 +1,19 @@
+{
+	"name": "@studio/ai-canvas",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite"
+	},
+	"devDependencies": {
+		"@types/react": "^19.1.8",
+		"@types/react-dom": "^19.1.6",
+		"@vitejs/plugin-react": "^4.5.2",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vite-plugin-singlefile": "^2.0.3"
+	}
+}
diff --git a/apps/ai-canvas/src/components/App.tsx b/apps/ai-canvas/src/components/App.tsx
@@ -0,0 +1,55 @@
+import { useCallback, useRef, useState } from 'react';
+import { useIframePicker } from '../hooks/use-iframe-picker';
+import { Banner } from './Banner';
+import { ConfirmationModal } from './ConfirmationModal';
+import { HighlightOverlay } from './HighlightOverlay';
+import { SiteIframe } from './SiteIframe';
+import { Tooltip } from './Tooltip';
+import type { PickedElement } from '../lib/types';
+
+export function App() {
+	const iframeRef = useRef< HTMLIFrameElement | null >( null );
+	const [ iframeReady, setIframeReady ] = useState( false );
+	const [ lastSelected, setLastSelected ] = useState< PickedElement | null >( null );
+
+	const handleSelected = useCallback( ( element: PickedElement ) => {
+		setLastSelected( element );
+	}, [] );
+
+	const {
+		highlightRect,
+		tooltipInfo,
+		selected,
+		grabAnother,
+	} = useIframePicker( iframeRef, iframeReady, handleSelected );
+
+	const handleIframeReady = useCallback( () => {
+		setIframeReady( true );
+	}, [] );
+
+	const handleGrabAnother = useCallback( () => {
+		grabAnother();
+		setLastSelected( null );
+	}, [ grabAnother ] );
+
+	return (
+		<>
+			<Banner selected={ selected } />
+			<SiteIframe iframeRef={ iframeRef } onReady={ handleIframeReady } />
+			{ ! selected && <HighlightOverlay rect={ highlightRect } /> }
+			{ ! selected && tooltipInfo && (
+				<Tooltip
+					label={ tooltipInfo.label }
+					top={ tooltipInfo.rect.top }
+					left={ tooltipInfo.rect.left }
+				/>
+			) }
+			{ selected && lastSelected && (
+				<ConfirmationModal
+					element={ lastSelected }
+					onGrabAnother={ handleGrabAnother }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/apps/ai-canvas/src/components/Banner.tsx b/apps/ai-canvas/src/components/Banner.tsx
@@ -0,0 +1,28 @@
+interface BannerProps {
+	selected: boolean;
+}
+
+export function Banner( { selected }: BannerProps ) {
+	return (
+		<div
+			style={ {
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				right: 0,
+				backgroundColor: selected ? '#1a7e3c' : '#3858e9',
+				color: '#fff',
+				fontSize: '14px',
+				fontFamily: 'system-ui, -apple-system, sans-serif',
+				padding: '10px 16px',
+				zIndex: 2147483647,
+				textAlign: 'center',
+				boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+			} }
+		>
+			{ selected
+				? 'Element selected \u2014 return to the CLI to use it in your prompt'
+				: 'Click an element to select it \u2014 press Escape to cancel' }
+		</div>
+	);
+}
diff --git a/apps/ai-canvas/src/components/ConfirmationModal.tsx b/apps/ai-canvas/src/components/ConfirmationModal.tsx
@@ -0,0 +1,81 @@
+import { getFriendlyDescription } from '../lib/friendly-names';
+import type { PickedElement } from '../lib/types';
+
+interface ConfirmationModalProps {
+	element: PickedElement;
+	onGrabAnother: () => void;
+}
+
+const btnStyle: React.CSSProperties = {
+	padding: '8px 18px',
+	borderRadius: 6,
+	border: 'none',
+	fontSize: 13,
+	fontWeight: 500,
+	cursor: 'pointer',
+	fontFamily: 'system-ui, -apple-system, sans-serif',
+};
+
+export function ConfirmationModal( { element, onGrabAnother }: ConfirmationModalProps ) {
+	const summary = getFriendlyDescription( element.tagName, element.wpBlockType, element.innerText );
+
+	return (
+		<div
+			style={ {
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				backgroundColor: 'rgba(0, 0, 0, 0.4)',
+				zIndex: 2147483647,
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			} }
+		>
+			<div
+				style={ {
+					backgroundColor: '#fff',
+					borderRadius: 12,
+					boxShadow: '0 8px 32px rgba(0,0,0,0.25)',
+					padding: '20px 24px',
+					fontFamily: 'system-ui, -apple-system, sans-serif',
+					fontSize: 14,
+					color: '#1e1e1e',
+					minWidth: 340,
+					maxWidth: 500,
+				} }
+			>
+				<div style={ { marginBottom: 8, fontWeight: 600, fontSize: 15, lineHeight: 1.4 } }>
+					Element selected
+				</div>
+				<div
+					style={ {
+						marginBottom: 12,
+						padding: '10px 12px',
+						backgroundColor: '#f5f5f5',
+						borderRadius: 6,
+						fontSize: 13,
+						color: '#444',
+						lineHeight: 1.4,
+					} }
+				>
+					{ summary }
+				</div>
+				<div style={ { marginBottom: 16, fontSize: 12, color: '#888', lineHeight: 1.4 } }>
+					Return to the CLI to use this selection in your next prompt.
+				</div>
+				<div style={ { display: 'flex', gap: 10, justifyContent: 'flex-end' } }>
+					<button
+						type="button"
+						style={ { ...btnStyle, backgroundColor: '#e0e0e0', color: '#333' } }
+						onClick={ onGrabAnother }
+					>
+						Grab another element
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/ai-canvas/src/components/HighlightOverlay.tsx b/apps/ai-canvas/src/components/HighlightOverlay.tsx
@@ -0,0 +1,29 @@
+import type { HighlightRect } from '../lib/types';
+
+interface HighlightOverlayProps {
+	rect: HighlightRect | null;
+}
+
+export function HighlightOverlay( { rect }: HighlightOverlayProps ) {
+	if ( ! rect ) {
+		return null;
+	}
+
+	return (
+		<div
+			style={ {
+				position: 'fixed',
+				pointerEvents: 'none',
+				top: rect.top,
+				left: rect.left,
+				width: rect.width,
+				height: rect.height,
+				border: '2px solid #3858e9',
+				backgroundColor: 'rgba(56, 88, 233, 0.08)',
+				borderRadius: 3,
+				zIndex: 2147483646,
+				transition: 'top 0.05s, left 0.05s, width 0.05s, height 0.05s',
+			} }
+		/>
+	);
+}
diff --git a/apps/ai-canvas/src/components/SiteIframe.tsx b/apps/ai-canvas/src/components/SiteIframe.tsx
@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+
+const BANNER_HEIGHT = 40;
+
+interface SiteIframeProps {
+	iframeRef: React.RefObject< HTMLIFrameElement | null >;
+	onReady: () => void;
+}
+
+export function SiteIframe( { iframeRef, onReady }: SiteIframeProps ) {
+	const handleLoad = useCallback( () => {
+		onReady();
+	}, [ onReady ] );
+
+	return (
+		<iframe
+			ref={ iframeRef }
+			src="/"
+			title="Site preview"
+			onLoad={ handleLoad }
+			style={ {
+				position: 'fixed',
+				top: BANNER_HEIGHT,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				width: '100%',
+				height: `calc(100% - ${ BANNER_HEIGHT }px)`,
+				border: 'none',
+			} }
+		/>
+	);
+}
diff --git a/apps/ai-canvas/src/components/Tooltip.tsx b/apps/ai-canvas/src/components/Tooltip.tsx
@@ -0,0 +1,28 @@
+interface TooltipProps {
+	label: string;
+	top: number;
+	left: number;
+}
+
+export function Tooltip( { label, top, left }: TooltipProps ) {
+	return (
+		<div
+			style={ {
+				position: 'fixed',
+				pointerEvents: 'none',
+				top,
+				left,
+				backgroundColor: '#1e1e1e',
+				color: '#fff',
+				fontSize: 12,
+				fontFamily: 'system-ui, -apple-system, sans-serif',
+				padding: '3px 8px',
+				borderRadius: 4,
+				zIndex: 2147483647,
+				whiteSpace: 'nowrap',
+			} }
+		>
+			{ label }
+		</div>
+	);
+}