Design review, A/B exploration, and agent-drafted screens all want the same surface: an infinite canvas where variants sit side by side and a human can pan, zoom, focus, and rearrange. Roll-your-own versions either lock you to a specific transport, hard-code DOM positions agents can't target, or skip the controlled-state contract entirely — so an embedded agent can't propose a frame without screen-scraping.

ArtBoard is a fully controlled pan/zoom canvas: value/onChange drive an ArtBoardValue (sections of pieces), viewport/onViewportChange drive the camera, focus/onFocusChange drive the full-screen overlay. Every frame carries data-fa-piece and every section data-fa-section for stable agent handles; pending pieces render a trust-but-verify "proposed" ring. Authorable two ways — JSON value or <ArtBoard.Section>/<ArtPiece> children.

Hold an ArtBoardValue in state, render <ArtBoard value onChange style={{ height }}>, and import @particle-academy/fancy-artboard/styles.css once. Drop <ArtBoard.Section> + <ArtPiece> children for JSX authoring, or pass value for JSON-driven boards. A sibling MCP bridge targets the ArtBoardValue contract for agent operability.