fix: correct API integration and complete missing features

Fix API response format mismatches and implement all remaining features:

**API Integration Fixes:**
- Fix ManipulationPanel to use `colors` instead of `results` from API responses
- Fix gradient endpoint to use `gradient` array from API response
- Fix color blindness simulator to use correct field names (`input`/`output` vs `original`/`simulated`)
- Fix text color optimizer request field (`backgrounds` vs `background_colors`)
- Fix method name casing: `simulateColorBlindness` (capital B)
- Add palette generation endpoint integration

**Type Definition Updates:**
- Update GradientData to match API structure with `gradient` array
- Update ColorBlindnessData to use `colors` with `input`/`output`/`difference_percentage`
- Update TextColorData to use `colors` with `textcolor`/`wcag_aa`/`wcag_aaa` fields
- Add PaletteGenerateRequest and PaletteGenerateData types

**Completed Features:**
- Harmony Palettes: Now uses dedicated `/palettes/generate` API endpoint
  - Simplified from 80 lines of manual color theory to single API call
  - Supports 6 harmony types: monochromatic, analogous, complementary, split-complementary, triadic, tetradic
- Text Color Optimizer: Full implementation with WCAG compliance checking
  - Automatic black/white text color selection
  - Live preview with contrast ratios
  - AA/AAA compliance indicators
- Color Blindness Simulator: Fixed and working
  - Shows difference percentage for each simulation
  - Side-by-side comparison view
- Gradient Creator: Fixed to use correct API response structure
- Batch Operations: Fixed to extract output colors correctly

**UI Improvements:**
- Enable all accessibility tool cards (remove "Coming Soon" badges)
- Enable harmony palettes card
- Add safety check for gradient state to prevent undefined errors

All features now fully functional and properly integrated with Pastel API.

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

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

app/accessibility/colorblind/page.tsx

@@ -15,7 +15,7 @@ export default function ColorBlindPage() {
   const [colors, setColors] = useState<string[]>(['#ff0099']);
   const [blindnessType, setBlindnessType] = useState<ColorBlindnessType>('protanopia');
   const [simulations, setSimulations] = useState<
-    Array<{ original: string; simulated: string }>
+    Array<{ input: string; output: string; difference_percentage: number }>
   >([]);
 
   const simulateMutation = useSimulateColorBlindness();
@@ -26,7 +26,7 @@ export default function ColorBlindPage() {
         colors,
         type: blindnessType,
       });
-      setSimulations(result.simulations);
+      setSimulations(result.colors);
       toast.success(`Simulated ${blindnessType}`);
     } catch (error) {
       toast.error('Failed to simulate color blindness');
@@ -169,18 +169,18 @@ export default function ColorBlindPage() {
                             Original
                           </p>
                           <div className="flex items-center gap-3">
-                            <ColorDisplay color={sim.original} size="md" />
-                            <code className="text-sm font-mono">{sim.original}</code>
+                            <ColorDisplay color={sim.input} size="md" />
+                            <code className="text-sm font-mono">{sim.input}</code>
                           </div>
                         </div>
 
                         <div className="space-y-2">
                           <p className="text-xs font-medium text-muted-foreground">
-                            As Seen
+                            As Seen ({sim.difference_percentage.toFixed(1)}% difference)
                           </p>
                           <div className="flex items-center gap-3">
-                            <ColorDisplay color={sim.simulated} size="md" />
-                            <code className="text-sm font-mono">{sim.simulated}</code>
+                            <ColorDisplay color={sim.output} size="md" />
+                            <code className="text-sm font-mono">{sim.output}</code>
                           </div>
                         </div>
                       </div>