build: complete Phase 2.1 implementation and verify build

- Verified all exports in highlight-manager.ts are correct
- Installed @clerk/nextjs dependency for API routes
- Fixed TypeScript errors in API routes (NextRequest type)
- Fixed MUI Grid component usage in highlights-tab.tsx (replaced with Box flexbox)
- Fixed HighlightColor type assertion in reading-view.tsx
- Build completed successfully with no TypeScript errors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/bible/highlights-tab.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, Typography, Divider } from '@mui/material'
+import { Box, Button, Typography, Divider } from '@mui/material'
 import { BibleVerse, HighlightColor } from '@/types'
 
 const HIGHLIGHT_COLORS: HighlightColor[] = ['yellow', 'orange', 'pink', 'blue']
@@ -55,9 +55,9 @@ export function HighlightsTab({
             Highlight Color
           </Typography>
 
-          <Grid container spacing={1} sx={{ mb: 2 }}>
+          <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
             {HIGHLIGHT_COLORS.map((color) => (
-              <Grid item xs={3} key={color}>
+              <Box key={color} sx={{ flex: 1 }}>
                 <Button
                   data-testid={`color-${color}`}
                   fullWidth
@@ -74,9 +74,9 @@ export function HighlightsTab({
                 >
                   {color}
                 </Button>
-              </Grid>
+              </Box>
             ))}
-          </Grid>
+          </Box>
 
           <Divider sx={{ my: 2 }} />