Without a purpose-built pen layer, freeform drawing requires custom pointer event plumbing, coordinate translation from viewport to SVG, stroke array management, and ResizeObserver setup — the foundation of any collaborative whiteboard inevitably duplicates this code. Live multi-user pen flows break when each stroke isn't streamed to peers as it forms, not batched at release. Drawing also demands automatic viewport-to-canvas coordinate mapping so user clicks land where the pointer appears, regardless of CSS scaling.

Drawing is a controlled SVG canvas that accepts a strokes array of Stroke objects (each with id, points: Point[], color, and size). It emits three callbacks: onStrokeStart(stroke) when the user puts pen down, onStrokePoint(id, point) on every move, and onStrokeEnd(stroke) when they lift. The component auto-measures its rendered size via ResizeObserver so screen coordinates map 1:1 to SVG coordinates; callers can also pass explicit width and height props to opt out. An enabled toggle gates pen input, and color and size defaults set the brush appearance.

Import Drawing from @particle-academy/fancy-whiteboard, pass a strokes array and three on* callbacks to collect and broadcast stroke events. Agents can observe the parent's stroke array via a bridge and emit synthetic onStrokeStart, onStrokePoint, and onStrokeEnd calls to paint programmatically; each stroke is rendered immediately by the controlled render loop.