Without a dedicated sticky-note component, collaborative whiteboard apps must wire up positioning, dragging, resizing, and edit mode from scratch—scattering DOM state across handlers, accumulating inline styles, and leaving agents no stable affordance to target. Each board reimplements the same gestures: drag-to-move, corner-to-resize, click-to-edit, escape-to-exit.

StickyNote (from fancy-whiteboard) is a controlled board item wrapper around the react-fancy StickyNote primitive. It owns absolute positioning (x, y, z), resize bounds (minWidth, minHeight), and dragging/resizing/edit-mode state. Props include item (a StickyNoteItem with id, x, y, z, width, height, text, and optional color), onChange to emit updates, onSelect for selection, selected and readOnly flags, and optional children to replace the default editable body. All mutations flow through onChange, and the stable id makes it agent-bridgeable.

Import from @particle-academy/fancy-whiteboard, pass an item object with id, x, y, z, width, height, text, and color, then bind onChange={(next) => updateItem(next)} to apply drag/resize/edit mutations. Set readOnly to disable editing and interaction. Agents query the stable id and modify x/y/width/height/text/color via the onChange handler to move, resize, or recolor the note programmatically.