feat: add shape tools and brush size control

[ajianaz]

What's New

Shape Tools (4)

Scribbble/DrawPen-style shapes inspired by PR 7 research.

Tool	Behavior
Line	Straight line from drag start → end
Arrow	Line + auto-sized arrowhead (scales with brush width)
Rectangle	Stroke rect from bounding box
Ellipse	Stroke ellipse from bounding box

Shapes store only start+end points → crisp at any zoom.

Brush Size Control

• / buttons with live pixel readout
• Range: 2–20px, step 2
• Affects pen, highlighter, and shapes

Toolbar Polish

• Center vertically using measured offsetHeight (was off-center with static estimate)
• Re-measure via requestAnimationFrame after first paint

Layout

[Pen] [Highlighter] [Eraser]
─────────────────
[Line] [Arrow] [Rect] [Ellipse]
─────────────────
[ − ]  4  [ + ]
─────────────────
[Red] [Yellow] [Green] [White]
─────────────────
[Undo] [Clear] [Exit]

Testing

• Frontend check: 0 errors, 0 warnings
• All 4 shapes render + preview live during drag
• Brush size −/+ works, readout updates
• Existing pen/highlighter/eraser unchanged
• Toolbar vertically centered (measured)

Reference

Pattern from Scribbble (closed-source) and DrawPen (MIT): 2-point shape storage, auto arrowhead, live preview.

Base: feat/toolbar-left (PR #8) — shapes need left-positioned toolbar.