feat: design surfaces page with two-phase theme picker

Phase 1: user picks which surfaces their product needs (Web App,
Marketing Site, Admin, Mobile, Email, Docs). Phase 2: per-surface
horizontal card gallery with mini visual previews of each UI library.
Lock in confirms the choice; locked themes are saved to DB and shown
to the AI coder. Surfaces and themes stored in fs_projects.data.

Made-with: Cursor

app/api/projects/[projectId]/design-surfaces/route.ts

@@ -0,0 +1,84 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
+import { query } from '@/lib/db-postgres';
+
+async function getProject(projectId: string, email: string) {
+  const rows = await query<{ data: Record<string, unknown> }>(
+    `SELECT p.data FROM fs_projects p
+     JOIN fs_users u ON u.id = p.user_id
+     WHERE p.id = $1 AND u.data->>'email' = $2 LIMIT 1`,
+    [projectId, email]
+  );
+  return rows[0] ?? null;
+}
+
+/**
+ * GET — returns surfaces[] and surfaceThemes{} for the project.
+ * surfaces: string[] — which design surfaces are active (set by Atlas or manually)
+ * surfaceThemes: Record<surfaceId, themeId> — locked-in theme per surface
+ */
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ projectId: string }> }
+) {
+  const { projectId } = await params;
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const row = await getProject(projectId, session.user.email);
+  if (!row) return NextResponse.json({ error: 'Project not found' }, { status: 404 });
+
+  const data = row.data ?? {};
+  return NextResponse.json({
+    surfaces: (data.surfaces ?? []) as string[],
+    surfaceThemes: (data.surfaceThemes ?? {}) as Record<string, string>,
+  });
+}
+
+/**
+ * PATCH — two operations:
+ *   { surfaces: string[] }              — save the active surface list
+ *   { surface: string, theme: string }  — lock in a theme for one surface
+ */
+export async function PATCH(
+  req: Request,
+  { params }: { params: Promise<{ projectId: string }> }
+) {
+  const { projectId } = await params;
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const body = await req.json() as
+    | { surfaces: string[] }
+    | { surface: string; theme: string };
+
+  if ('surfaces' in body) {
+    // Save the surface list
+    await query(
+      `UPDATE fs_projects p
+       SET data = data || jsonb_build_object('surfaces', $3::jsonb),
+           updated_at = NOW()
+       FROM fs_users u
+       WHERE p.id = $1 AND p.user_id = u.id AND u.data->>'email' = $2`,
+      [projectId, session.user.email, JSON.stringify(body.surfaces)]
+    );
+  } else if ('surface' in body && 'theme' in body) {
+    // Lock in a theme for one surface
+    await query(
+      `UPDATE fs_projects p
+       SET data = data || jsonb_build_object(
+         'surfaceThemes',
+         COALESCE(data->'surfaceThemes', '{}'::jsonb) || jsonb_build_object($3, $4)
+       ),
+       updated_at = NOW()
+       FROM fs_users u
+       WHERE p.id = $1 AND p.user_id = u.id AND u.data->>'email' = $2`,
+      [projectId, session.user.email, body.surface, body.theme]
+    );
+  } else {
+    return NextResponse.json({ error: 'Invalid body' }, { status: 400 });
+  }
+
+  return NextResponse.json({ success: true });
+}