'use client'; import { animate, motion, useInView, useMotionValue, useReducedMotion, useTransform, } from 'motion/react'; import { type ReactNode, useEffect, useRef } from 'react'; export function Inspector() { return (

Talk to the agent.
Or just tap the canvas.

Click any block, leave a note. The inspector pins it as a{' '} @slide-comment {' '} marker in your source. Run{' '} /apply-comments {' '} — the agent edits exactly what you flagged and clears the marker. } visual={} /> } />
); } function FeatureCell({ num, kicker, title, body, visual, }: { num: string; kicker: string; title: string; body: ReactNode; visual: ReactNode; }) { return (
{num} · {kicker}

{title}

{body}

{visual}
); } const AGENT_LOOP_DURATION = 10; const COMMENT_TEXT = 'use the accent color on this title'; function AgentApplyVisual() { const ref = useRef(null); const inView = useInView(ref, { amount: 0.3 }); const reduced = useReducedMotion(); const active = inView && !reduced; const typingProgress = useMotionValue(1); const commentText = useTransform(typingProgress, (p) => COMMENT_TEXT.slice(0, Math.max(0, Math.round(p * COMMENT_TEXT.length))), ); useEffect(() => { if (!active) { typingProgress.set(1); return; } typingProgress.set(0); const controls = animate(typingProgress, [0, 0, 1, 1, 0, 0], { duration: AGENT_LOOP_DURATION, times: [0, 0.3, 0.52, 0.78, 0.82, 1], ease: 'linear', repeat: Infinity, }); return () => controls.stop(); }, [active, typingProgress]); const loopTransition = (times: number[]) => active ? { duration: AGENT_LOOP_DURATION, times, ease: 'easeInOut' as const, repeat: Infinity, } : undefined; return (
{/* canvas */}
cover
Q2 Launch
What we're shipping, why it matters.
{/* crosshair cursor — flies in, clicks Q2 Launch, fades */} cursor {/* "Agent applying..." status pill — appears after submit, fades before style change settles */} Agent applying
{/* InspectorPanel — slides in from the right after click */} {/* header */}
Inspect <h1>
✕
Add a note... {commentText}
Cmd + Enter to submit Add comment
); } function SpinnerGlyph({ active }: { active: boolean }) { return ( spinner ); } function ApplyingDots({ active }: { active: boolean }) { return ( {[0, 1, 2].map((i) => ( ))} ); } function VisualEditorVisual() { const ref = useRef(null); const inView = useInView(ref, { amount: 0.3 }); const reduced = useReducedMotion(); const active = inView && !reduced; const progress = useMotionValue(0.38); const fontSize = useTransform(progress, [0.38, 0.65], ['6.4cqw', '7.6cqw']); const barWidth = useTransform(progress, (p) => `${p * 100}%`); const thumbLeft = useTransform(progress, (p) => `calc(${p * 100}% - 0.55cqw)`); const sizeNum = useTransform(progress, [0.38, 0.65], [88, 104]); const sizeLabel = useTransform(sizeNum, (v) => `${Math.round(v)}px`); useEffect(() => { if (!active) { progress.set(0.38); return; } const controls = animate(progress, [0.38, 0.65, 0.65, 0.38, 0.38], { duration: 6, times: [0, 0.2, 0.5, 0.7, 1], ease: 'easeInOut', repeat: Infinity, }); return () => controls.stop(); }, [active, progress]); return (
{/* canvas */}
cover
Q2 Launch
What we're shipping, why it matters.
{/* SaveBar — matches core/SaveCard layout */}
} /> } dim /> 1 unsaved change Discard Save
{/* InspectorPanel */}
{/* header */}
Inspect <h1>
✕
{sizeLabel}
} pressed /> } />
); } function PanelSection({ label, children }: { label: string; children: ReactNode }) { return (
{label} {children}
); } function PanelDivider() { return
; } function PanelRow({ label, children }: { label: string; children: ReactNode }) { return (
{label}
{children}
); } function PanelInput({ value, mono = true, uppercase = false, }: { value: string; mono?: boolean; uppercase?: boolean; }) { return ( {value} ); } function PanelSelect({ value }: { value: string }) { return ( {value} ▾ ); } function PanelToggle({ glyph, pressed = false }: { glyph: ReactNode; pressed?: boolean }) { return ( {glyph} ); } function PanelSwatch({ color }: { color: string }) { return ( ); } function PanelTextarea({ value }: { value: string }) { return ( {value} ); } function SaveBarIconBtn({ glyph, dim = false }: { glyph: ReactNode; dim?: boolean }) { return ( {glyph} ); } function UndoGlyph() { return ( ); } function RedoGlyph() { return ( ); } function SaveGlyph() { return ( ); } function BoldGlyph() { return ( ); } function ItalicGlyph() { return ( ); }