fix: resolve TypeScript errors blocking Docker build

- Move WebkitBoxOrient to inline style prop to satisfy Panda CSS types
- Add colorPalette property to FlashcardFormState and FlashcardConfig types
- Fix Buffer type error by converting to Uint8Array in NextResponse
- Remove invalid initialStyle prop from ComplementRaceProvider usage
- Add type assertion for columns property (number | 'auto')

These fixes allow the Docker build to complete successfully. TypeScript
errors are ignored during build (ignoreBuildErrors: true in next.config.js)
but these were causing webpack compilation failures.

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

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

apps/web/src/app/api/create/flashcards/preview/route.ts

@@ -74,7 +74,7 @@ export async function POST(request: NextRequest) {
       colorPalette,
       hideInactiveBeads,
       showEmptyColumns,
-      columns: columns === 'auto' ? 'auto' : Number(columns),
+      columns: (columns === 'auto' ? 'auto' : Number(columns)) as number | 'auto',
       scaleFactor,
       coloredNumerals,
     }

apps/web/src/app/api/generate/route.ts

@@ -113,7 +113,7 @@ export async function POST(request: NextRequest) {
       colorPalette,
       hideInactiveBeads,
       showEmptyColumns,
-      columns: columns === 'auto' ? 'auto' : Number(columns),
+      columns: (columns === 'auto' ? 'auto' : Number(columns)) as number | 'auto',
       scaleFactor,
       coloredNumerals,
     }
@@ -231,7 +231,7 @@ ${pages.join('\n\n#pagebreak()\n\n')}
     const filename = `soroban-flashcards-${range}.pdf`
 
     // Return PDF directly as download
-    return new NextResponse(pdfBuffer, {
+    return new NextResponse(new Uint8Array(pdfBuffer), {
       headers: {
         'Content-Type': 'application/pdf',
         'Content-Disposition': `attachment; filename="${filename}"`,

apps/web/src/app/arcade/complement-race/practice/page.tsx

@@ -7,7 +7,7 @@ import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 export default function PracticeModePage() {
   return (
     <PageWithNav navTitle="Practice Mode" navEmoji="🏁">
-      <ComplementRaceProvider initialStyle="practice">
+      <ComplementRaceProvider>
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>

apps/web/src/app/arcade/complement-race/sprint/page.tsx

@@ -7,7 +7,7 @@ import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 export default function SprintModePage() {
   return (
     <PageWithNav navTitle="Steam Sprint" navEmoji="🚂">
-      <ComplementRaceProvider initialStyle="sprint">
+      <ComplementRaceProvider>
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>

apps/web/src/app/arcade/complement-race/survival/page.tsx

@@ -7,7 +7,7 @@ import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 export default function SurvivalModePage() {
   return (
     <PageWithNav navTitle="Survival Mode" navEmoji="🔄">
-      <ComplementRaceProvider initialStyle="survival">
+      <ComplementRaceProvider>
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>

apps/web/src/app/create/flashcards/page.tsx

@@ -37,6 +37,7 @@ export interface FlashcardConfig {
   hideInactiveBeads?: boolean
   beadShape?: 'diamond' | 'circle' | 'square'
   colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
   coloredNumerals?: boolean
   scaleFactor?: number
   format?: 'pdf' | 'html' | 'png' | 'svg'
@@ -67,6 +68,7 @@ export interface FlashcardFormState {
   hideInactiveBeads?: boolean
   beadShape?: 'diamond' | 'circle' | 'square'
   colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
   coloredNumerals?: boolean
   scaleFactor?: number
   format?: 'pdf' | 'html' | 'png' | 'svg'