Paint App - Selection

Create a real-time collaborative drawing app.

See language/*.md for language-specific setup, architecture, and constraints.

UI Requirements

Use SpacetimeDB brand styling (dark theme).

Features

Basic Drawing

• Users can set a display name and pick an avatar color
• Users can create canvases and join/leave them
• Basic drawing tools: freehand brush, eraser (visually removes strokes), color picker
• Adjustable brush size
• Clear canvas option (with confirmation)
• Real-time sync - see other users' strokes appear as they draw
• Strokes should remain visible during drawing (no flicker from polling)

Live Cursors

• Show all collaborators' cursor positions in real-time
• Each cursor displays the user's name and avatar color
• Cursor icon reflects their current tool (brush, eraser, select, etc.)
• Show a small preview of their selected color next to the cursor
• Cursors smoothly animate and fade out when users go inactive

Shapes

• Shape tools: rectangle, ellipse, line, arrow
• Shapes have stroke color, fill color, and stroke width options
• Drag to draw shapes with live preview while dragging
• Hold shift for perfect squares/circles
• Shapes are elements that can be selected and modified after creation

Selection & Manipulation

• Selection tool (V) to click and select elements
• Drag to move selected elements
• Drag corner/edge handles to resize - 8 handles (4 corners + 4 edges)
• Delete/Backspace to delete selected elements
• Escape to deselect
• See what others have selected - other users' selections shown with their avatar color outline
• When someone is actively dragging an element, others see it move in real-time
• Multi-select with shift-click