# Technology Stack & Build System

## Core Technologies

- **React 18**: UI framework for components (StaggeredMenu, panels)
- **GSAP 3.12+**: Animation library for smooth menu transitions
- **Vite 6.0+**: Build tool and development server
- **Jest 30+**: Testing framework with jsdom environment
- **Babel**: JavaScript transpilation for compatibility
- **Chrome Extension Manifest V3**: Extension platform

## Build System

### Development Commands
```bash
# Install dependencies
npm install

# Development build with watch mode
npm run dev

# Production build
npm run build

# Run tests
npm run test

# Run tests in watch mode
npm run test:watch
```

### Build Configuration
- **Entry Point**: `src/content.jsx`
- **Output**: `dist/content.js` and `dist/style.css`
- **No code splitting**: Single bundle for extension compatibility
- **CSS bundling**: All styles combined into single file
- **Minification**: Disabled for debugging

## Extension Development Workflow

1. Run `npm run dev` for watch mode
2. Load unpacked extension in Chrome (`chrome://extensions/`)
3. After code changes, reload extension in Chrome
4. Refresh Amazon page to see changes

## Testing Setup

- **Environment**: jsdom for DOM simulation
- **Mocks**: localStorage, Chrome APIs
- **Property-based testing**: fast-check for robust test cases
- **Setup file**: `jest.setup.js` for test environment configuration

## Key Dependencies

- **gsap**: Animation engine for menu transitions
- **react/react-dom**: UI framework and rendering
- **@vitejs/plugin-react**: Vite React integration
- **jest-environment-jsdom**: DOM testing environment
- **fast-check**: Property-based testing library

## Browser Compatibility

- Chrome/Chromium-based browsers
- Manifest V3 compliance
- ES6+ features (modules, async/await, classes)
- Modern DOM APIs (MutationObserver, localStorage)