UI polish

CLAUDE.md

@@ -0,0 +1,168 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Product Overview
+
+**Mirror Studio** is an AI-powered virtual modeling application that revolutionizes how fashion brands create marketing content. The application enables clothing brands to generate professional-quality product images featuring their garments on diverse AI-generated models for use across marketing channels, social media, and e-commerce platforms.
+
+### Problem It Solves
+- **For Fashion Brands**: Eliminates the cost and time of traditional photoshoots while creating unlimited marketing content with diverse models
+- **For Marketing Teams**: Provides instant access to professional product photography for social media campaigns, website showcases, and promotional materials
+- **For E-commerce Operations**: Generates consistent, high-quality product imagery that can be produced on-demand without scheduling models or photographers
+
+### Key Features
+- Upload multiple clothing items to create complete outfits
+- Customize model appearance (gender, ethnicity, age, pose)
+- Generate photorealistic virtual try-on images using Google's Gemini AI
+- Secure image downloads with authentication
+- Professional studio-quality backgrounds
+
+## Development Commands
+
+```bash
+# Development server (with Turbopack)
+bun dev
+# or
+npm run dev
+
+# Production build
+bun run build
+# or
+npm run build
+
+# Start production server
+bun start
+# or
+npm start
+
+# Type checking (no built-in script, add if needed)
+bunx tsc --noEmit
+# or
+npx tsc --noEmit
+```
+
+## Architecture Overview
+
+### Tech Stack
+- **Framework**: Next.js 15 with App Router and Turbopack
+- **Authentication**: Clerk (managed auth with modal-based UI)
+- **AI/ML**: Google Gemini API (gemini-2.5-flash-image-preview model)
+- **Styling**: Tailwind CSS v4
+- **Type Safety**: TypeScript with strict mode
+- **State Management**: useReducer pattern with typed actions
+
+### Directory Structure
+```
+app/
+├── api/generate/route.ts    # Protected API endpoint for Gemini
+├── MirrorStudioApp.tsx      # Main app component (client-side)
+├── page.tsx                 # Dynamic import wrapper (SSR bypass)
+└── layout.tsx               # Root layout with Clerk provider
+
+components/               # Reusable UI components
+hooks/                   # Custom React hooks (useVirtualTryOn)
+lib/                     # Server utilities (Gemini integration)
+services/                # Client-side services
+types.ts                 # Centralized TypeScript definitions
+```
+
+### Key Architectural Patterns
+
+#### 1. Server-Side API Protection
+The Gemini API key is NEVER exposed to the client. All AI operations go through `/api/generate/route.ts`:
+```typescript
+// Client makes request with base64 images
+POST /api/generate → Server validates → Server calls Gemini → Returns generated image
+```
+
+#### 2. Authentication Flow
+- Clerk handles all auth via modal dialogs (no dedicated auth pages)
+- Download feature requires authentication (triggers sign-in modal if not authenticated)
+- User authentication state checked via `useAuth()` and `useClerk()` hooks
+
+#### 3. State Management Pattern
+Single reducer manages entire app state with typed actions:
+- `AppState`: Complete application state
+- `AppAction`: Union type of all possible actions
+- State transitions are predictable and type-safe
+
+#### 4. Image Handling Pipeline
+1. Client: File → Base64 encoding
+2. Server: Validation (type, size, content)
+3. Server: Base64 → Gemini API format
+4. Server: Generated image → Data URL
+5. Client: Secure download with authentication check
+
+## Testing Guidelines
+
+When implementing new features, always write unit tests for:
+- State reducer logic
+- Validation functions
+- API route handlers
+- Custom hooks
+- Utility functions
+
+Use Base UI components when building new UI features to maintain consistency.
+
+## Important Implementation Details
+
+### Environment Variables
+Required in `.env.local`:
+- `GEMINI_API_KEY`: Google Gemini API key (server-side only)
+- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`: Clerk public key
+- `CLERK_SECRET_KEY`: Clerk secret key
+
+### Security Considerations
+- All file uploads are validated for type, size, and content
+- API routes include rate limiting and error sanitization
+- Object URLs are properly revoked to prevent memory leaks
+- Download URLs are validated before execution
+
+### Component Patterns
+- Use controlled components with dispatch actions
+- Implement proper ARIA labels and keyboard navigation
+- Follow the established pattern of separate step components (UploadStep, ConfigureStep, ResultsStep)
+- Use dynamic imports for client-only components to avoid SSR issues
+
+### Type Safety Rules
+- Never use `any` type
+- All API responses must have defined types
+- Component props must be explicitly typed
+- Use discriminated unions for action types
+
+### Performance Optimizations
+- Dynamic import for main app to bypass SSR
+- Turbopack enabled for faster builds
+- Image optimization via Next.js Image component
+- Object URL cleanup on component unmount
+
+## Common Development Tasks
+
+### Adding a New Model Configuration Option
+1. Update `ModelConfig` interface in `types.ts`
+2. Add UI control in `ConfigPanel.tsx`
+3. Update the prompt builder in `lib/gemini.ts`
+4. Add validation if needed in `lib/validations.ts`
+
+### Creating a New API Endpoint
+1. Create route file in `app/api/[endpoint]/route.ts`
+2. Implement with proper error handling and validation
+3. Never expose sensitive data or API keys
+4. Add request/response types to `types.ts`
+
+### Implementing New UI Components
+1. Create component in `components/` directory
+2. Use Base UI components when possible
+3. Include proper TypeScript props interface
+4. Add ARIA labels and keyboard support
+5. Follow existing Tailwind styling patterns
+- use this as the color scheme throughout the app: #1A1A1A – Charcoal black (main text / background)
+
+#EAEAEA – Light grey (section backgrounds)
+
+#C1A57B – Warm beige (accent for buttons / highlights)
+
+#FFFFFF – White (primary contrast)
+- use phosphor icons as the default package for all icons throughout the app
+- add any generated .md files to @docs/