feat: Canvas Workspace — infinite canvas design tool

package.json

@@ -20,6 +20,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-masonry-css": "^1.0.16",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "roughjs": "^4.6.6",
     "serve": "^14.2.6"
   },
   "devDependencies": {

src/app/api/canvas/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getDb } from '@/lib/db'
+
+export async function GET(req: NextRequest) {
+  const projectId = req.nextUrl.searchParams.get('projectId')
+  const db = getDb()
+
+  if (!projectId) {
+    // Auto-create or fetch default project
+    let project = db.prepare('SELECT id FROM projects ORDER BY id LIMIT 1').get() as { id: number } | undefined
+    if (!project) {
+      const result = db.prepare(
+        'INSERT INTO projects (name, site_dir, provider, framework) VALUES (?, ?, ?, ?)'
+      ).run('Default Project', `project-${Date.now()}`, 'gemini', 'html')
+      project = { id: result.lastInsertRowid as number }
+    }
+    const row = db.prepare('SELECT state FROM canvas_state WHERE project_id = ?').get(project.id) as { state: string } | undefined
+    if (!row) {
+      const defaultState = JSON.stringify({ nodes: [], viewport: { x: 0, y: 0, zoom: 1 } })
+      db.prepare('INSERT INTO canvas_state (project_id, state) VALUES (?, ?)').run(project.id, defaultState)
+      return NextResponse.json({ projectId: project.id, state: JSON.parse(defaultState) })
+    }
+    return NextResponse.json({ projectId: project.id, state: JSON.parse(row.state) })
+  }
+
+  const row = db.prepare('SELECT state FROM canvas_state WHERE project_id = ?').get(Number(projectId)) as { state: string } | undefined
+  if (!row) {
+    return NextResponse.json({ error: 'Canvas not found' }, { status: 404 })
+  }
+  return NextResponse.json({ projectId: Number(projectId), state: JSON.parse(row.state) })
+}
+
+export async function PUT(req: NextRequest) {
+  const { projectId, state } = await req.json()
+  const db = getDb()
+
+  const existing = db.prepare('SELECT id FROM canvas_state WHERE project_id = ?').get(projectId)
+  if (existing) {
+    db.prepare('UPDATE canvas_state SET state = ?, updated_at = datetime(?) WHERE project_id = ?')
+      .run(JSON.stringify(state), new Date().toISOString(), projectId)
+  } else {
+    db.prepare('INSERT INTO canvas_state (project_id, state) VALUES (?, ?)')
+      .run(projectId, JSON.stringify(state))
+  }
+
+  return NextResponse.json({ ok: true })
+}
+
+// POST handler for navigator.sendBeacon (which always sends POST)
+export async function POST(req: NextRequest) {
+  return PUT(req)
+}

src/app/api/uploads/[filename]/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { readFile } from 'fs/promises'
+import path from 'path'
+
+const UPLOADS_DIR = path.join(process.cwd(), 'data', 'uploads')
+
+export async function GET(
+  req: NextRequest,
+  context: { params: Promise<{ filename: string }> }
+) {
+  const params = await context.params
+  const filename = params.filename
+
+  // Directory traversal protection: ensure resolved path stays within UPLOADS_DIR
+  const filepath = path.resolve(path.join(UPLOADS_DIR, filename))
+  if (!filepath.startsWith(UPLOADS_DIR)) {
+    return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+  }
+
+  try {
+    const buffer = await readFile(filepath)
+
+    // Determine Content-Type based on file extension
+    const ext = path.extname(filename).toLowerCase()
+    const contentTypeMap: Record<string, string> = {
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+      '.svg': 'image/svg+xml',
+    }
+    const contentType = contentTypeMap[ext] || 'application/octet-stream'
+
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=31536000', // Cache for 1 year since filenames include timestamps
+      },
+    })
+  } catch (error) {
+    return NextResponse.json({ error: 'File not found' }, { status: 404 })
+  }
+}

src/app/api/uploads/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { writeFile, mkdir } from 'fs/promises'
+import path from 'path'
+
+const UPLOADS_DIR = path.join(process.cwd(), 'data', 'uploads')
+
+export async function POST(req: NextRequest) {
+  const formData = await req.formData()
+  const file = formData.get('file') as File | null
+
+  if (!file) {
+    return NextResponse.json({ error: 'No file provided' }, { status: 400 })
+  }
+
+  await mkdir(UPLOADS_DIR, { recursive: true })
+
+  const timestamp = Date.now()
+  const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_')
+  const filename = `${timestamp}-${safeName}`
+  const filepath = path.join(UPLOADS_DIR, filename)
+
+  const buffer = Buffer.from(await file.arrayBuffer())
+  await writeFile(filepath, buffer)
+
+  return NextResponse.json({ path: `uploads/${filename}` })
+}