feat: implement color manipulation tools with interactive sliders

Add complete color manipulation interface to playground:

**New Components:**
- Slider component - Customizable range input with label and value display
  - Smooth animations on thumb hover
  - Keyboard accessible
  - Shows current value with optional suffix
  - Tailwind-styled for consistency

- ManipulationPanel component - Full color manipulation controls
  - Lighten/Darken sliders (0-100% range)
  - Saturate/Desaturate sliders (0-100% range)
  - Hue rotation slider (-180° to +180°)
  - Complementary color quick action
  - All operations integrated with Pastel API
  - Toast notifications for success/error
  - Loading states during API calls

**Playground Enhancements:**
- Replaced placeholder quick action buttons with ManipulationPanel
- Full integration with color manipulation mutations
- Real-time color updates after each operation
- User-friendly feedback with toast messages
- Amount controls for precise adjustments

**Features:**
- Live preview of manipulation results
- Configurable amounts before applying
- Success/error handling with helpful messages
- Disabled state during API operations
- Smooth user experience with immediate feedback

**API Integration:**
- useLighten, useDarken mutations
- useSaturate, useDesaturate mutations
- useRotate for hue rotation
- useComplement for complementary colors
- All mutations with proper error handling

Build successful! Color manipulation tools fully functional.

Next: Navigation, theme system, and additional UI components.

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

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

app/playground/page.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { ColorPicker } from '@/components/color/ColorPicker';
 import { ColorDisplay } from '@/components/color/ColorDisplay';
 import { ColorInfo } from '@/components/color/ColorInfo';
-import { Button } from '@/components/ui/button';
+import { ManipulationPanel } from '@/components/tools/ManipulationPanel';
 import { useColorInfo } from '@/lib/api/queries';
 import { Loader2 } from 'lucide-react';
 
@@ -65,27 +65,8 @@ export default function PlaygroundPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
-              <div className="grid grid-cols-2 gap-3">
-                <Button variant="outline" className="w-full">
-                  Lighten
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Darken
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Saturate
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Desaturate
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Complement
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Grayscale
-                </Button>
-              </div>
+              <h2 className="text-xl font-semibold mb-4">Color Manipulation</h2>
+              <ManipulationPanel color={color} onColorChange={setColor} />
             </div>
           </div>
         </div>