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>

components/ui/slider.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  showValue?: boolean;
+  suffix?: string;
+}
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, label, showValue = true, suffix = '', ...props }, ref) => {
+    const [value, setValue] = React.useState(props.value || props.defaultValue || 0);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+      props.onChange?.(e);
+    };
+
+    return (
+      <div className="space-y-2">
+        {(label || showValue) && (
+          <div className="flex items-center justify-between">
+            {label && (
+              <label htmlFor={props.id} className="text-sm font-medium">
+                {label}
+              </label>
+            )}
+            {showValue && (
+              <span className="text-sm text-muted-foreground">
+                {value}
+                {suffix}
+              </span>
+            )}
+          </div>
+        )}
+        <input
+          type="range"
+          className={cn(
+            'w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer',
+            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4',
+            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary',
+            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all',
+            '[&::-webkit-slider-thumb]:hover:scale-110',
+            '[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full',
+            '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0',
+            '[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all',
+            '[&::-moz-range-thumb]:hover:scale-110',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            className
+          )}
+          ref={ref}
+          {...props}
+          value={value}
+          onChange={handleChange}
+        />
+      </div>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+export { Slider };