Back to Spacetimedb

Paint App - Full Features

tools/llm-oneshot/apps/paint-app/prompts/composed/12_full.md

2.1.06.3 KB
Original Source

Paint App - Full Features

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

Layers with Locking

  • Canvas supports multiple named layers
  • Reorder layers by dragging
  • Toggle layer visibility (eye icon)
  • Adjust layer opacity
  • Layer locking - click to lock a layer for editing; shows "Locked by [username]"
  • Only the person who locked can edit that layer; others see a lock icon
  • Auto-unlock when user leaves or after 5 minutes of inactivity

Presence & Activity Status

  • Show list of users currently on the canvas with their avatar colors
  • Display each user's status: active (drawing), idle (not interacting), away (tab hidden)
  • Show what tool each user has selected
  • "X users viewing" count in the header
  • Status updates automatically based on user activity
  • Auto-set to "away" after 2 minutes of no interaction

Comments & Feedback

  • Drop comment pins anywhere on the canvas
  • Comments anchor to canvas coordinates (move with pan/zoom)
  • Threaded replies on each comment
  • Mark comments as resolved (grays out but keeps visible)
  • Show unresolved comment count in header
  • Click comment in list to pan canvas to that location
  • Comments sync in real-time to all collaborators

Version History

  • Auto-save a snapshot every 5 minutes while canvas is being edited
  • Manual "Save Version" button with optional name/description
  • Version history panel showing all snapshots with timestamps
  • Preview any version (read-only view)
  • Restore any version (creates a new "Restored from..." version)
  • Show who triggered each save (auto-save vs manual + username)

Permissions

  • Canvas creator is the owner
  • Owner can set collaborator roles: viewer (can only watch) or editor (can draw)
  • Role changes take effect instantly - if you're demoted to viewer mid-stroke, it cancels
  • Owner can remove users from the canvas (they're kicked immediately)
  • Viewers see a "View Only" badge and all tools are disabled
  • Editors can't change permissions or remove others

Follow Mode

  • Click on a user in the presence list to "follow" them
  • Your viewport automatically pans and zooms to match theirs in real-time
  • Small indicator shows "Following [username]" with unfollow button
  • Automatically unfollow if you manually pan/zoom
  • Useful for presentations or guided walkthroughs
  • Multiple users can follow the same person

Activity Feed

  • Collapsible side panel showing real-time activity log
  • Shows actions like: "Alice added a rectangle", "Bob erased some strokes", "Carol joined"
  • Each entry has timestamp and user's avatar color
  • Click an entry to pan to that location (if applicable)
  • Activity feed updates in real-time as actions happen
  • Keeps last 100 entries (older entries auto-removed)

Sharing & Private Canvases

  • Canvases are private by default (only creator can access)
  • Generate a share link that allows others to join
  • Set link permissions: "Anyone with link can view" or "Anyone with link can edit"
  • Invite specific users by username (they see it in their canvas list)
  • Revoke share link (generates new one, old link stops working)
  • Canvas list shows "Private", "Shared", or collaborator avatars

Canvas Chat

  • Slide-out chat panel for canvas collaborators
  • Send messages visible only to people on this canvas
  • Messages show username, avatar color, and timestamp
  • "User is typing..." indicator when someone is composing
  • Chat history persists with the canvas
  • Notification badge when new messages arrive while chat is closed

Auto-Cleanup & Notifications

  • Canvases inactive for 30 days are automatically deleted
  • 7 days before deletion, all collaborators receive a warning (shown when they open the app)
  • Any activity resets the 30-day timer
  • Owner can mark canvas as "Keep Forever" to disable auto-cleanup
  • Show "Last active X days ago" on canvas list
  • Notification center shows recent activity across all your canvases

Text & Sticky Notes

  • Text tool (T) - drag to define text area size, then type directly inline (no browser dialogs)
  • Font family selector (sans-serif, serif, monospace)
  • Font size selector (small, medium, large, x-large)
  • Text color uses the stroke color picker
  • Sticky note tool (S) - drag to create colored note, type inline
  • Double-click existing text/sticky to edit inline
  • "User is editing..." indicator shown to others while you type
  • Text elements can be selected, moved, and resized like shapes

Keyboard Shortcuts

  • V - Select tool
  • B - Brush tool
  • E - Eraser tool
  • R - Rectangle tool
  • O - Ellipse/Oval tool
  • L - Line tool
  • A - Arrow tool
  • T - Text tool
  • S - Sticky note tool
  • Delete/Backspace - Delete selected
  • Escape - Deselect / Cancel operation
  • Shift (hold) - Constrain proportions