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" />
+                            <ColorDisplay color={sim.input} size="md" />
-                            <code className="text-sm font-mono">{sim.original}</code>
+                            <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" />
+                            <ColorDisplay color={sim.output} size="md" />
-                            <code className="text-sm font-mono">{sim.simulated}</code>
+                            <code className="text-sm font-mono">{sim.output}</code>
                           </div>
                         </div>
                       </div>

app/accessibility/page.tsx

@@ -16,7 +16,6 @@ export default function AccessibilityPage() {
       href: '/accessibility/colorblind',
       icon: Eye,
       features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
-      comingSoon: true,
     },
     {
       title: 'Text Color Optimizer',
@@ -24,7 +23,6 @@ export default function AccessibilityPage() {
       href: '/accessibility/textcolor',
       icon: Palette,
       features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
-      comingSoon: true,
     },
   ];
 

app/accessibility/textcolor/page.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState } from 'react';
+import { ColorPicker } from '@/components/color/ColorPicker';
+import { ColorDisplay } from '@/components/color/ColorDisplay';
+import { Button } from '@/components/ui/button';
+import { useTextColor } from '@/lib/api/queries';
+import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+
+export default function TextColorPage() {
+  const [backgrounds, setBackgrounds] = useState<string[]>(['#ff0099']);
+  const [results, setResults] = useState<
+    Array<{
+      background: string;
+      textcolor: string;
+      contrast_ratio: number;
+      wcag_aa: boolean;
+      wcag_aaa: boolean;
+    }>
+  >([]);
+
+  const textColorMutation = useTextColor();
+
+  const handleOptimize = async () => {
+    try {
+      const result = await textColorMutation.mutateAsync({
+        backgrounds,
+      });
+      setResults(result.colors);
+      toast.success(`Optimized text colors for ${result.colors.length} background(s)`);
+    } catch (error) {
+      toast.error('Failed to optimize text colors');
+      console.error(error);
+    }
+  };
+
+  const addBackground = () => {
+    if (backgrounds.length < 10) {
+      setBackgrounds([...backgrounds, '#000000']);
+    }
+  };
+
+  const removeBackground = (index: number) => {
+    if (backgrounds.length > 1) {
+      setBackgrounds(backgrounds.filter((_, i) => i !== index));
+    }
+  };
+
+  const updateBackground = (index: number, color: string) => {
+    const newBackgrounds = [...backgrounds];
+    newBackgrounds[index] = color;
+    setBackgrounds(newBackgrounds);
+  };
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="max-w-7xl mx-auto space-y-8">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">Text Color Optimizer</h1>
+          <p className="text-muted-foreground">
+            Automatically find the best text color (black or white) for any background color
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Input */}
+          <div className="space-y-6">
+            <div className="p-6 border rounded-lg bg-card">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-semibold">Background Colors</h2>
+                <Button
+                  onClick={addBackground}
+                  disabled={backgrounds.length >= 10}
+                  variant="outline"
+                  size="sm"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add
+                </Button>
+              </div>
+
+              <div className="space-y-4">
+                {backgrounds.map((color, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <div className="flex-1">
+                      <ColorPicker
+                        color={color}
+                        onChange={(newColor) => updateBackground(index, newColor)}
+                      />
+                    </div>
+                    {backgrounds.length > 1 && (
+                      <Button
+                        onClick={() => removeBackground(index)}
+                        variant="ghost"
+                        size="icon"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              <Button
+                onClick={handleOptimize}
+                disabled={textColorMutation.isPending || backgrounds.length === 0}
+                className="w-full mt-4"
+              >
+                {textColorMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Optimizing...
+                  </>
+                ) : (
+                  <>
+                    <Palette className="mr-2 h-4 w-4" />
+                    Optimize Text Colors
+                  </>
+                )}
+              </Button>
+            </div>
+
+            <div className="p-6 border rounded-lg bg-card bg-blue-50 dark:bg-blue-950/20">
+              <h3 className="font-semibold mb-2">How it works</h3>
+              <p className="text-sm text-muted-foreground">
+                This tool analyzes each background color and automatically selects either black
+                or white text to ensure maximum readability. The algorithm guarantees WCAG AA
+                compliance (4.5:1 contrast ratio) for normal text.
+              </p>
+            </div>
+          </div>
+
+          {/* Results */}
+          <div className="space-y-6">
+            {results.length > 0 ? (
+              <>
+                <div className="p-6 border rounded-lg bg-card">
+                  <h2 className="text-xl font-semibold mb-4">Optimized Results</h2>
+                  <div className="space-y-4">
+                    {results.map((result, index) => (
+                      <div
+                        key={index}
+                        className="p-4 border rounded-lg"
+                        style={{ backgroundColor: result.background }}
+                      >
+                        <div className="flex items-center justify-between mb-3">
+                          <div className="flex items-center gap-3">
+                            <ColorDisplay color={result.background} size="sm" />
+                            <code className="text-sm font-mono text-inherit">
+                              {result.background}
+                            </code>
+                          </div>
+                        </div>
+
+                        <div
+                          className="p-4 rounded border-2"
+                          style={{
+                            backgroundColor: result.background,
+                            color: result.textcolor,
+                            borderColor: result.textcolor,
+                          }}
+                        >
+                          <p className="font-semibold mb-2" style={{ color: result.textcolor }}>
+                            Sample Text Preview
+                          </p>
+                          <p className="text-sm" style={{ color: result.textcolor }}>
+                            The quick brown fox jumps over the lazy dog. This is how your text
+                            will look on this background color.
+                          </p>
+                        </div>
+
+                        <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
+                          <div>
+                            <span className="text-muted-foreground">Text Color: </span>
+                            <code className="font-mono">{result.textcolor}</code>
+                          </div>
+                          <div>
+                            <span className="text-muted-foreground">Contrast: </span>
+                            <span className="font-medium">
+                              {result.contrast_ratio.toFixed(2)}:1
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            {result.wcag_aa ? (
+                              <CheckCircle2 className="h-4 w-4 text-green-500" />
+                            ) : (
+                              <XCircle className="h-4 w-4 text-red-500" />
+                            )}
+                            <span className={result.wcag_aa ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>
+                              WCAG AA
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            {result.wcag_aaa ? (
+                              <CheckCircle2 className="h-4 w-4 text-green-500" />
+                            ) : (
+                              <XCircle className="h-4 w-4 text-yellow-500" />
+                            )}
+                            <span className={result.wcag_aaa ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}>
+                              WCAG AAA
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
+                <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>Add background colors and click Optimize to see results</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/batch/page.tsx

@@ -66,8 +66,10 @@ export default function BatchPage() {
           break;
       }
 
-      setOutputColors(result.colors);
+      // Extract output colors from the result
-      toast.success(`Processed ${result.colors.length} colors`);
+      const processed = result.colors.map((c) => c.output);
+      setOutputColors(processed);
+      toast.success(`Processed ${processed.length} colors`);
     } catch (error) {
       toast.error('Failed to process colors');
       console.error(error);

app/palettes/gradient/page.tsx

@@ -28,8 +28,8 @@ export default function GradientPage() {
         count,
         colorspace,
       });
-      setGradient(result.colors);
+      setGradient(result.gradient);
-      toast.success(`Generated ${result.colors.length} colors`);
+      toast.success(`Generated ${result.gradient.length} colors`);
     } catch (error) {
       toast.error('Failed to generate gradient');
     }
@@ -156,7 +156,7 @@ export default function GradientPage() {
 
           {/* Preview */}
           <div className="space-y-6">
-            {gradient.length > 0 && (
+            {gradient && gradient.length > 0 && (
               <>
                 <div className="p-6 border rounded-lg bg-card">
                   <h2 className="text-xl font-semibold mb-4">Gradient Preview</h2>

app/palettes/harmony/page.tsx

@@ -6,7 +6,7 @@ import { PaletteGrid } from '@/components/color/PaletteGrid';
 import { ExportMenu } from '@/components/tools/ExportMenu';
 import { Button } from '@/components/ui/button';
 import { Select } from '@/components/ui/select';
-import { useComplement, useRotate } from '@/lib/api/queries';
+import { useGeneratePalette } from '@/lib/api/queries';
 import { Loader2, Palette } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -23,83 +23,17 @@ export default function HarmonyPage() {
   const [harmonyType, setHarmonyType] = useState<HarmonyType>('complementary');
   const [palette, setPalette] = useState<string[]>([]);
 
-  const complementMutation = useComplement();
+  const paletteMutation = useGeneratePalette();
-  const rotateMutation = useRotate();
 
   const generateHarmony = async () => {
     try {
-      let colors: string[] = [baseColor];
+      const result = await paletteMutation.mutateAsync({
-
+        base: baseColor,
-      switch (harmonyType) {
+        scheme: harmonyType,
-        case 'monochromatic':
+      });
-          // Base color with lightness variations
-          colors = [baseColor];
-          toast.info('Monochromatic harmony uses variations of the base color');
-          break;
-
-        case 'analogous':
-          // Base + 30° and -30°
-          const analog1 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 30,
-          });
-          const analog2 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: -30,
-          });
-          colors = [analog2.colors[0], baseColor, analog1.colors[0]];
-          break;
-
-        case 'complementary':
-          // Base + opposite (180°)
-          const complement = await complementMutation.mutateAsync([baseColor]);
-          colors = [baseColor, complement.colors[0]];
-          break;
-
-        case 'split-complementary':
-          // Base + 150° and 210° (flanking the complement)
-          const split1 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 150,
-          });
-          const split2 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 210,
-          });
-          colors = [baseColor, split1.colors[0], split2.colors[0]];
-          break;
-
-        case 'triadic':
-          // Base + 120° and 240° (evenly spaced)
-          const tri1 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 120,
-          });
-          const tri2 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 240,
-          });
-          colors = [baseColor, tri1.colors[0], tri2.colors[0]];
-          break;
-
-        case 'tetradic':
-          // Base + 90°, 180°, 270° (square)
-          const tet1 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 90,
-          });
-          const tet2 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 180,
-          });
-          const tet3 = await rotateMutation.mutateAsync({
-            colors: [baseColor],
-            amount: 270,
-          });
-          colors = [baseColor, tet1.colors[0], tet2.colors[0], tet3.colors[0]];
-          break;
-      }
 
+      // Combine primary and secondary colors into flat array
+      const colors = [result.palette.primary, ...result.palette.secondary];
       setPalette(colors);
       toast.success(`Generated ${harmonyType} harmony palette`);
     } catch (error) {
@@ -157,10 +91,10 @@ export default function HarmonyPage() {
 
                 <Button
                   onClick={generateHarmony}
-                  disabled={complementMutation.isPending || rotateMutation.isPending}
+                  disabled={paletteMutation.isPending}
                   className="w-full"
                 >
-                  {complementMutation.isPending || rotateMutation.isPending ? (
+                  {paletteMutation.isPending ? (
                     <>
                       <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                       Generating...

app/palettes/page.tsx

@@ -23,7 +23,6 @@ export default function PalettesPage() {
       href: '/palettes/harmony',
       icon: Palette,
       features: ['Color theory', 'Multiple schemes', 'Instant generation'],
-      comingSoon: true,
     },
   ];
 

components/tools/ManipulationPanel.tsx

@@ -38,8 +38,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
         colors: [color],
         amount: lightenAmount,
       });
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success(`Lightened by ${(lightenAmount * 100).toFixed(0)}%`);
       }
     } catch (error) {
@@ -53,8 +53,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
         colors: [color],
         amount: darkenAmount,
       });
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success(`Darkened by ${(darkenAmount * 100).toFixed(0)}%`);
       }
     } catch (error) {
@@ -68,8 +68,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
         colors: [color],
         amount: saturateAmount,
       });
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success(`Saturated by ${(saturateAmount * 100).toFixed(0)}%`);
       }
     } catch (error) {
@@ -83,8 +83,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
         colors: [color],
         amount: desaturateAmount,
       });
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success(`Desaturated by ${(desaturateAmount * 100).toFixed(0)}%`);
       }
     } catch (error) {
@@ -98,8 +98,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
         colors: [color],
         amount: rotateAmount,
       });
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success(`Rotated hue by ${rotateAmount}°`);
       }
     } catch (error) {
@@ -110,8 +110,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
   const handleComplement = async () => {
     try {
       const result = await complementMutation.mutateAsync([color]);
-      if (result.results[0]) {
+      if (result.colors[0]) {
-        onColorChange(result.results[0].output);
+        onColorChange(result.colors[0].output);
         toast.success('Generated complementary color');
       }
     } catch (error) {

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<{
+  type: string;
-    original: string;
+  colors: Array<{
-    simulated: string;
+    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[];
+  };
+}