Annotation pinsPro

Numbered notes pinned on a live preview. Drop them, drag them into place, resolve them, and send every open note to the agent as one message that says where each one is.

Markdown

On this page

ProThree open notes and one resolved on the booking page. Drop more with C, drag them, and send them all as one message.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/annotation-pins

Usage

tsx

import { AnnotationPins, formatAnnotationMessage } from "@/components/ui/chatcn/pro/annotation-pins"

<AnnotationPins pins={pins} onPinsChange={setPins} onSend={(open) => send(formatAnnotationMessage(open))}>
  <GeneratedApp />
</AnnotationPins>

Pins store their position as a fraction of the preview content, so they scroll with it and survive a resize, plus the element under them (h1 Headline). formatAnnotationMessage turns the open notes into one numbered message for the agent.

Examples

States

ProA new note, a long note, no notes, sending and disabled.

Props

Prop	Type	Notes
`pins`, `defaultPins`, `onPinsChange`	`AnnotationPin[]`	`x`, `y`, `comment`, `resolved`, `target`
`placing`, `defaultPlacing`, `onPlacingChange`	`boolean`	Clicking the preview drops a pin
`openId`, `defaultOpenId`, `onOpenIdChange`	`string \| null`	The pin whose note is open
`onSend`, `sending`	`(pins) => void`, `boolean`	Send the open notes as one message
`defaultShowResolved`	`boolean`	Show resolved pins as checks
`getTarget`	`(element) => string`	Describe the element under a pin
`disabled`, `disabledReason`	`boolean`, `ReactNode`

Keyboard

Key	Action
`C`	Start or stop placing notes
Arrow keys on a pin	Move it 1 %, `Shift` 5 %
`Enter` or `Space` on a pin	Open its note
`Delete` `Backspace` on a pin	Delete it
`Enter` in a note	Save; `Shift Enter` for a new line, never while composing
`Cmd Enter` `Ctrl Enter`	Send the open notes
`Escape`	Close the note, or stop placing

Accessibility

Each pin is a button named with its number, target and note, marked resolved in words as well as with a check.
The note is a dialog labelled with its number. Saves, moves, resolves and sends are announced politely.

Motion

Pins grow in from their point over 180 ms and notes open from the pin over 150 ms. Dragging follows the pointer directly and arrow moves jump. Reduced motion keeps the fades.