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>

lib/api/client.ts

@@ -27,6 +27,8 @@ import type {
   NamedColorSearchData,
   HealthData,
   CapabilitiesData,
+  PaletteGenerateRequest,
+  PaletteGenerateData,
 } from './types';
 
 export class PastelAPIClient {
@@ -186,7 +188,7 @@ export class PastelAPIClient {
   }
 
   // Accessibility
-  async simulateColorblindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
+  async simulateColorBlindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
     return this.request<ColorBlindnessData>('/colors/colorblind', {
       method: 'POST',
       body: JSON.stringify(request),
@@ -226,6 +228,14 @@ export class PastelAPIClient {
       method: 'GET',
     });
   }
+
+  // Palette Generation
+  async generatePalette(request: PaletteGenerateRequest): Promise<ApiResponse<PaletteGenerateData>> {
+    return this.request<PaletteGenerateData>('/palettes/generate', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
 }
 
 // Export singleton instance

lib/api/queries.ts

@@ -18,6 +18,8 @@ import type {
   GradientRequest,
   GradientData,
   ColorBlindnessRequest,
+  PaletteGenerateRequest,
+  PaletteGenerateData,
   ColorBlindnessData,
   TextColorRequest,
   TextColorData,
@@ -234,3 +236,16 @@ export const useHealth = () => {
     refetchInterval: 60000, // Check every minute
   });
 };
+
+// Palette Generation
+export const useGeneratePalette = () => {
+  return useMutation({
+    mutationFn: async (request: PaletteGenerateRequest) => {
+      const response = await pastelAPI.generatePalette(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};

lib/api/types.ts

@@ -114,7 +114,9 @@ export interface ColorManipulationRequest {
 }
 
 export interface ColorManipulationData {
-  results: Array<{
+  operation?: string;
+  amount?: number;
+  colors: Array<{
     input: string;
     output: string;
   }>;
@@ -165,7 +167,10 @@ export interface GradientRequest {
 }
 
 export interface GradientData {
-  colors: string[];
+  stops: string[];
+  count: number;
+  colorspace: string;
+  gradient: string[];
 }
 
 export interface ColorDistanceRequest {
@@ -196,21 +201,25 @@ export interface ColorBlindnessRequest {
 }
 
 export interface ColorBlindnessData {
-  simulations: Array<{
-    original: string;
-    simulated: string;
+  type: string;
+  colors: Array<{
+    input: string;
+    output: string;
+    difference_percentage: number;
   }>;
 }
 
 export interface TextColorRequest {
-  background_colors: string[];
+  backgrounds: string[];
 }
 
 export interface TextColorData {
-  results: Array<{
+  colors: Array<{
     background: string;
-    text_color: string;
+    textcolor: string;
     contrast_ratio: number;
+    wcag_aa: boolean;
+    wcag_aaa: boolean;
   }>;
 }
 
@@ -243,3 +252,17 @@ export interface CapabilitiesData {
   distance_metrics: string[];
   colorblindness_types: string[];
 }
+
+export interface PaletteGenerateRequest {
+  base: string;
+  scheme: 'monochromatic' | 'analogous' | 'complementary' | 'split-complementary' | 'triadic' | 'tetradic';
+}
+
+export interface PaletteGenerateData {
+  base: string;
+  scheme: string;
+  palette: {
+    primary: string;
+    secondary: string[];
+  };
+}