feat: Paste images from clipboard onto canvas

[camilocbarrera]

Summary

Allow users to paste images directly from clipboard onto the board canvas.

Problem

Users want to add visual references (screenshots, diagrams, mockups) alongside their idea cards. Currently only text cards are supported.

Proposed Solution

1. Listen for paste event on canvas
2. Detect image data in clipboard
3. Upload to Supabase Storage
4. Create image element on canvas at cursor position

Technical Approach

Clipboard Handler

document.addEventListener('paste', async (e) => {
  const items = e.clipboardData?.items;
  const imageItem = Array.from(items).find(i => i.type.startsWith('image/'));
  if (imageItem) {
    const blob = imageItem.getAsFile();
    // Upload and create image element
  }
});

Database

Add images table or extend cards with image support:

• id, sessionId, url, x, y, width, height, createdById

Storage

• Use Supabase Storage bucket for images
• Generate unique filenames per session
• Set reasonable size limits (e.g., 5MB max)

UI

• Drag to reposition images
• Resize handles on corners
• Delete option in context menu
• Loading state while uploading

Acceptance Criteria

• Paste image from clipboard creates image on canvas
• Images stored in Supabase Storage
• Drag to move, handles to resize
• Delete images
• Realtime sync across participants
• File size validation with error feedback