How to Clone Figma

Create a full-stack collaborative whiteboard app called CanvasCraft (a focused Figma/FigJam clone) using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres), with Liveblocks for realtime multiplayer.

## What to build
An infinite-canvas editor where multiple users draw shapes, add text and sticky notes together, see each other's live cursors and leave comments. Per-seat plans gate file and editor counts.

## Key screens
- Dashboard: project/file grid with thumbnails, create-file button, 'shared with me' filter
- Canvas editor: left toolbar (select, rectangle, ellipse, line, text, sticky, comment), pannable/zoomable <canvas>, right inspector (fill, stroke, corner radius, opacity, font size), top bar with file name, presence avatars and Share
- Share dialog: invite by email with role, link-sharing with permission level
- Comments panel: threads with resolve, click-to-locate on canvas
- Billing page: Free / Pro / Team tiers, seat management

## Schema (Prisma)
- User (id, name, email, image)
- Project (id, ownerId, name, createdAt)
- File (id, projectId, name, thumbnailUrl, updatedAt)
- CanvasObject (id, fileId, type, x, y, w, h, props Json, z)
- Collaborator (id, fileId, userId, role)
- Comment (id, fileId, authorId, x, y, body, resolved, createdAt)

## Logic that must work
- Render objects on a real <canvas> element with pan (space-drag) and zoom (scroll); hit-test on click to select
- Keep one camera util (pan offset + zoom) and apply it at draw time; store object coordinates in document space, never screen space
- Use Liveblocks Storage for the shared object list (LiveMap of objects) and Presence for cursors - edits sync without refresh
- Persist the object map to Postgres on a debounced save and regenerate the file thumbnail
- Permission checks: only editor/owner roles can mutate objects; commenter/viewer are blocked server-side too
- Free plan limit: max 3 files and 2 editor seats; enforce on create and invite

## Style
Tool UI: #7C3AED primary, light gray (#F5F5F7) canvas, white floating panels with soft shadows, Inter font, compact 32px icon buttons. Colored cursor labels per user. Responsive: editor is desktop-first; small screens get a view-and-comment mode.

## Seed & fallback
Seed 3 demo files with assorted shapes, text and stickies, plus 2 demo users so collaboration is demonstrable. If Liveblocks keys aren't available, fall back to a Supabase-realtime or in-memory mock so the app still runs single-player.

You are building a production-quality collaborative design canvas (a focused Figma clone). Work iteratively: scaffold, then build the renderer, then layer realtime on top, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui for chrome (not the canvas)
- Custom <canvas> 2D renderer for the document; no DOM-per-object
- Liveblocks (or Yjs + a WebSocket provider) for CRDT document state and presence
- PostgreSQL via Prisma for users, projects, files, permissions, comments; Supabase auth (email + Google)
- R2/S3 for image uploads and exported PNG/SVG; Zod for all input validation

## Architecture requirements
- Separate the document model (plain serializable objects) from the renderer; the renderer is a pure function of state + viewport (pan, zoom)
- Scene graph: ordered list of nodes (frame, rect, ellipse, line, text, sticky) with a transform and props; keep it flat for the MVP
- Realtime: object map and per-user presence live in Liveblocks Storage/Presence; local optimistic edits, server is source of truth on persist
- Input layer: tool state machine (select, draw, text, comment); hit-testing in canvas coordinates; snap viewport math into one camera util
- Never trust the client for permissions - re-check the caller's role on every mutation and on the persistence webhook

## Data model
users, projects, files (canvas_json snapshot + thumbnail), collaborators(role), comments(x, y, resolved), assets. Index files(project_id), collaborators(file_id, user_id).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with protected /file/[id] route; dashboard listing files
2. Canvas renderer: camera (pan/zoom), draw a static scene, then add the select tool with marquee and resize handles
3. Editing: create rect/ellipse/line/text/sticky tools; properties inspector bound to selection; delete/duplicate; z-order
4. Realtime: wire Liveblocks Storage for the object map and Presence for cursors; render remote cursors with name labels
5. Comments: pin-on-canvas threads, resolve, sidebar list with jump-to-pin
6. Persistence & thumbnails: debounce-save canvas_json to Postgres, render a thumbnail on save
7. Sharing & permissions: invite by email, roles, link sharing; enforce roles in server actions
8. Export: render selection to PNG/SVG client-side

## Quality bar
- 60fps pan/zoom with a few hundred objects; requestAnimationFrame render loop, dirty-rect or full redraw with culling
- Coordinates and sizes stored as numbers in document space; viewport transform applied at draw time only
- Loading/error boundaries on async routes; optimistic UI for local edits with reconciliation
- Seed script: 2 users, 1 project, 3 files with varied content and a couple of comment threads

Start with step 1. After each step, tell me exactly what to verify in the browser before moving on.

Design the complete UI for a collaborative design-canvas app called CanvasCraft (Figma-style). React + Tailwind, shadcn/ui components, lucide-react icons. Tool-like aesthetic: light gray canvas (#F5F5F7), white floating panels, #7C3AED primary, soft shadows, Inter font, compact controls.

## Screens to generate

### 1. Files dashboard
- Top bar: logo left, search center, avatar menu right
- Tabs: Recent / Shared with me / Drafts
- Responsive thumbnail grid (4 cols desktop / 2 tablet / 1 mobile): file preview image, name, last-edited time, small collaborator avatar stack, a '+' New file card

### 2. Canvas editor (the hero screen)
- Left vertical toolbar: select (arrow), frame, rectangle, ellipse, line, text, sticky note, comment, and a hand/pan tool - icon buttons with active state
- Center: large light-gray infinite canvas area with a few placeholder frames and sticky notes, plus two colored remote cursors with name pills
- Right inspector panel: section headers (Position X/Y/W/H, Fill with a color swatch, Stroke, Corner radius slider, Opacity slider, Text: font + size)
- Top bar: file name (editable look), zoom percentage dropdown, live collaborator avatar stack, a 'Share' primary button

### 3. Share modal
- Invite-by-email input with a role dropdown (Can edit / Can comment / Can view)
- List of current people with their roles and remove buttons
- 'Copy link' row with a permission selector

### 4. Comments sidebar
- Slide-over panel listing comment threads: author avatar, snippet, time, a resolve checkmark; an open vs resolved filter

### 5. Billing page
- Three pricing cards (Free, Pro, Team) with feature lists and seat counts; the middle card highlighted as 'Most popular'
- A current-usage row above the cards (files used, editor seats used) so the upgrade path is obvious

## Components to include
- A floating zoom control (− 100% +) pinned to the bottom-right of the canvas
- A color-swatch popover used by both Fill and Stroke in the inspector
- A small 'X is editing' presence toast when a remote collaborator joins

## Responsive behavior
Make every screen responsive. On mobile, the editor becomes a view-and-comment mode: the canvas is read-only, the toolbar collapses, and a floating comment button stays. The inspector becomes a bottom sheet that slides up when an object is selected.

Use realistic placeholder data - file names like 'Mobile app v2', 'Onboarding flow', timestamps, and 4–6 colored avatar initials.

Build a collaborative whiteboard/design-canvas app (Figma model, scoped) called CanvasCraft.

## Entities
- Project: name, owner (user reference), createdAt
- File: project reference, name, thumbnailUrl, canvasData (json snapshot of objects), updatedAt
- CanvasObject: file reference, type (frame/rectangle/ellipse/line/text/sticky), x, y, width, height, fill (color), stroke (color), cornerRadius (number), opacity (number), text (string), zIndex (number)
- Collaborator: file reference, user reference, role (owner/editor/commenter/viewer)
- Comment: file reference, author (user), x, y, body, resolved (boolean), createdAt

## Roles & permissions
- Owner: full control of the file, manages collaborators and permissions
- Editor: can create, move and edit objects
- Commenter: can view and add comments only
- Viewer: read-only via share link
- A user only sees files they own or are a collaborator on

## Pages
1. Dashboard: grid of files the user can access (thumbnail, name, last edited), New file button, shared-with-me filter
2. Canvas editor: infinite pan/zoom canvas, left toolbar (select, rectangle, ellipse, line, text, sticky, comment), right properties panel (fill, stroke, corner radius, opacity, text), top bar with collaborators and Share
3. Share page/modal: invite by email with role, manage existing collaborators, copy share link with permission
4. Comments view: list of threads with resolve toggle, click to focus the pin on canvas
5. Billing: Free / Pro / Team plan tiers and seat counts

## Rules
- Permission gate every edit: only owner/editor roles may create or modify CanvasObjects
- Live collaboration: when supported, broadcast cursor position and object changes to others in the file in real time
- Free plan: limit to 3 files and 2 editor seats; prompt to upgrade beyond that
- Comments can be resolved (not deleted); resolved threads are hidden by default
- Deleting a file is restricted to the owner

## Look & feel
Tool-style UI: light gray canvas, white floating panels, violet (#7C3AED) primary buttons, compact icon toolbar, clean sans-serif type. Cursor labels as small colored pills. Responsive, with a read-only mobile view.

Seed with 1 project, 3 files containing assorted shapes, text and sticky notes, 2 sample users as collaborators, and a couple of comment threads so every page has content.