Whiteboard apps require a fast, minimal primitive to render draggable geometric shapes—rectangles, circles, arrows, lines, text—without duplicating SVG render logic or building a custom bounding-box model for every interaction. Without it, you rebuild drag-to-move, shape geometry calculations, and fill/stroke defaults on every shape type.

Shape is a controlled component that renders a single ShapeItem (a discriminated union of eight kinds: rect, rounded-rect, ellipse, diamond, triangle, line, arrow, text). It accepts item (the shape data), onChange (fired on pointer-move during drag), onSelect (fired on pointer-down), and selected / readOnly flags for UI affordances. Drag-to-move is built in; all geometry, fill, stroke, and text rendering flow from the item's bounding box and kind discriminator.

Import Shape and ShapeItem from @particle-academy/fancy-whiteboard, build a ShapeItem with kind: "shape", shape, x, y, width, height, and optional text / fill / stroke, then render <Shape item={item} onChange={setItem} onSelect={onSelect} />. Pointer-down triggers drag via onChange with updated x / y; no callback chaining needed.