Set of marksPro
Numbered boxes over every interactive element, the way the model sees the page.
On this page
ProThe product page as the model sees it. Point at a box or arrow through the list.
Installation
Usage
import { SetOfMarks } from "@/components/ui/chatcn/pro/set-of-marks"
<SetOfMarks screen={<img src={shot} alt="" />} marks={marks} chosen="add-to-cart" />Marks come from your agent's element extraction: a box in screen fractions, the role and the accessible name, and the selector it would use. Point at a box or move through the list and everything else washes toward the background so the element stands alone. The chosen mark is drawn in the accent with corners that close in on it.
Examples
States
ProMarks off, no list with a chosen mark, labeling and an unreadable page.
Props
| Prop | Type | Notes |
|---|---|---|
marks | { id, x, y, w, h, role, name, selector? }[] | In reading order; numbers follow it |
screen | ReactNode | Screenshot, canvas or mock page |
chosen | string | The mark the model picked |
visible, defaultVisible, onVisibleChange | boolean | Show the boxes |
onChoose | (id) => void | From the list or the screen |
status | "ready" | "loading" | "error" | Labeling and unreadable page states |
list | "side" | "none" | Mark list beside the screen, below on phones |
task | ReactNode | What the model was asked to do |
Keyboard
| Key | Action |
|---|---|
Arrow Up, Arrow Down | Move the spotlight through the marks |
Home, End | First and last mark |
Enter, Space | Choose the mark |
M | Show or hide the marks |
Escape | Clear the spotlight |
Accessibility
- The mark list is a listbox with an active descendant; the boxes on the screen mirror it for pointers.
- The switch exposes its
Mshortcut.
Motion
- Turning marks on with the pointer draws them in reading order, 18 ms apart; the keyboard shortcut shows them at once.
- The chosen mark's corners close in over 240 ms. Reduced motion keeps only fades.