A professional pixel art editor built with React and TailwindCSS featuring:

• Brush: Draw with customizable brush size (1-10px)
• Eraser: Erase pixels with customizable size
• Fill Bucket: Flood fill areas with color
• Eyedropper: Pick colors from existing pixels
• Line Tool: Draw straight lines
• Rectangle Tool: Draw rectangles (hold Shift for filled)
• Circle Tool: Draw circles (hold Shift for filled)
• Spray Paint: Spray paint effect with adjustable radius

• Flexible Canvas Size: Choose from presets (8x8 to 128x128) or custom dimensions (4x4 to 256x256)
• Custom Dimensions: Set width and height independently
• Grid System: Toggle grid visibility for precise pixel placement
• Undo/Redo: Full history support for all drawing operations
• Clear Canvas: Reset the entire canvas

• Color Palette: 32 preset colors for quick access
• Custom Color Picker: HTML5 color picker with hex input
• Eyedropper Tool: Sample colors directly from the canvas
• Transparent/Eraser: Special transparent color for erasing

• Dark Mode: Automatic switching based on system preference
• Enhanced Dark Theme: Deeper blacks and better contrast
• Smooth Transitions: Animated theme switching

• PNG Export: High-quality raster images with customizable pixel scale (1-20px)
• SVG Export: Vector format for scalable graphics
• Grid Export: Option to include grid lines in exported images
• Custom Scale: Adjust output resolution

• Responsive Design: Works on desktop and mobile devices
• Professional UI: Clean, modern interface with intuitive controls
• Real-time Preview: See changes instantly as you draw
• Tool Tips: Helpful descriptions for all tools and features

├── frontend/
│   ├── index.html          # Main HTML template with dark theme support
│   ├── index.tsx           # React entry point
│   ├── components/
│   │   ├── App.tsx         # Main application component
│   │   ├── Canvas.tsx      # Drawing canvas with all tool support
│   │   ├── Toolbar.tsx     # Tools, canvas size, and controls
│   │   ├── ColorPalette.tsx # Color selection and picker
│   │   └── ExportPanel.tsx # Export functionality
│   └── utils/
│       ├── canvas.ts       # Canvas utilities and drawing algorithms
│       └── export.ts       # PNG/SVG export utilities
├── backend/
│   └── index.ts            # Static file server with API endpoints
└── shared/
    └── types.ts            # Shared TypeScript types

1. Select Brush tool and choose a color
2. Adjust brush size if needed (1-10px)
3. Click and drag on canvas to draw

• Line: Click and drag to draw straight lines
• Rectangle: Click and drag to draw rectangles (hold Shift for filled)
• Circle: Click and drag from center to edge (hold Shift for filled)

• Fill Bucket: Click to fill connected areas with the same color
• Spray Paint: Click and drag for spray paint effect
• Eyedropper: Click any pixel to sample its color

• Preset Sizes: Quick selection from 8x8 to 128x128
• Custom Size: Toggle custom mode for independent width/height (4-256px)
• Grid Toggle: Show/hide pixel grid for precision work
• Undo/Redo: Navigate through drawing history
• Clear: Reset entire canvas (with confirmation)

1. Choose format (PNG or SVG)
2. Set pixel scale (1-20px per pixel)
3. Optionally include grid lines
4. Click export to download

• React 18.2.0 with TypeScript for type safety
• TailwindCSS with custom dark theme colors
• HTML5 Canvas for high-performance drawing
• Bresenham's Algorithm for smooth line drawing
• Flood Fill Algorithm for bucket tool
• System Media Queries for automatic theme detection
• Responsive Grid Layout for all screen sizes

• Shift + Rectangle/Circle: Draw filled shapes
• System Dark Mode: Automatic theme switching

• Modern browsers with HTML5 Canvas support
• Automatic fallbacks for older browsers
• Mobile touch support for drawing