feat: implement palette generation features

Add complete palette generation system with multiple methods:

**New Components:**
- ColorSwatch component - Individual color display
  - Click to copy to clipboard
  - Hover effects with copy icon
  - Configurable sizes (sm, md, lg)
  - Optional color label display
  - Check icon on successful copy

- PaletteGrid component - Grid display for color palettes
  - Responsive grid layout (3-6 columns)
  - Click handler for color selection
  - Empty state message
  - Flexible and reusable

- Select component - Dropdown selector
  - Consistent styling with other inputs
  - Optional label support
  - Keyboard accessible
  - Focus ring styling

**Palette Pages:**

1. Gradient Creator (/palettes/gradient)
   - Multiple color stop editor (add/remove)
   - Configurable step count (2-1000)
   - Color space selection (RGB, HSL, Lab, LCH, OkLab, OkLCH)
   - Live gradient preview bar
   - Full palette grid display
   - Interactive color pickers for each stop
   - Real-time generation

2. Distinct Colors (/palettes/distinct)
   - Count selector (2-100 colors)
   - Distance metric selection (CIE76, CIEDE2000)
   - Simulated annealing algorithm
   - Statistics display:
     - Minimum distance
     - Average distance
     - Generation time
   - Loading state with progress message
   - Quality metrics for generated palette

3. Palettes Dashboard (/palettes)
   - Overview of all palette generators
   - Feature cards with icons
   - "Coming Soon" badge for harmony palettes
   - Quick navigation to each generator
   - Feature highlights for each method

**Features:**
- All palette generators integrated with Pastel API
- Toast notifications for success/error
- Loading states during generation
- Copy colors to clipboard
- Responsive layouts
- Empty states
- Error handling

**API Integration:**
- useGenerateGradient mutation
- useGenerateDistinct mutation
- Proper error handling and loading states
- Result caching with React Query

Build successful! 3 new palette pages rendering.

Next: Harmony palettes, accessibility tools, and named colors.

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

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

app/palettes/distinct/page.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { PaletteGrid } from '@/components/color/PaletteGrid';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select } from '@/components/ui/select';
+import { useGenerateDistinct } from '@/lib/api/queries';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+export default function DistinctPage() {
+  const [count, setCount] = useState(8);
+  const [metric, setMetric] = useState<'cie76' | 'ciede2000'>('ciede2000');
+  const [colors, setColors] = useState<string[]>([]);
+  const [stats, setStats] = useState<{
+    min_distance: number;
+    avg_distance: number;
+    generation_time_ms: number;
+  } | null>(null);
+
+  const generateMutation = useGenerateDistinct();
+
+  const handleGenerate = async () => {
+    try {
+      const result = await generateMutation.mutateAsync({
+        count,
+        metric,
+      });
+      setColors(result.colors);
+      setStats(result.stats);
+      toast.success(`Generated ${result.colors.length} distinct colors`);
+    } catch (error) {
+      toast.error('Failed to generate distinct colors');
+    }
+  };
+
+  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">Distinct Colors Generator</h1>
+          <p className="text-muted-foreground">
+            Generate visually distinct colors using simulated annealing
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Controls */}
+          <div className="lg:col-span-1">
+            <div className="p-6 border rounded-lg bg-card space-y-6">
+              <div>
+                <h2 className="text-xl font-semibold mb-4">Settings</h2>
+              </div>
+
+              <div>
+                <label htmlFor="count" className="text-sm font-medium mb-2 block">
+                  Number of Colors
+                </label>
+                <Input
+                  id="count"
+                  type="number"
+                  min={2}
+                  max={100}
+                  value={count}
+                  onChange={(e) => setCount(parseInt(e.target.value))}
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Higher counts take longer to generate
+                </p>
+              </div>
+
+              <Select
+                label="Distance Metric"
+                value={metric}
+                onChange={(e) => setMetric(e.target.value as 'cie76' | 'ciede2000')}
+              >
+                <option value="cie76">CIE76 (Faster)</option>
+                <option value="ciede2000">CIEDE2000 (More Accurate)</option>
+              </Select>
+
+              <Button
+                onClick={handleGenerate}
+                disabled={generateMutation.isPending}
+                className="w-full"
+              >
+                {generateMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Generating...
+                  </>
+                ) : (
+                  'Generate Colors'
+                )}
+              </Button>
+
+              {generateMutation.isPending && (
+                <div className="text-sm text-muted-foreground text-center">
+                  This may take a few moments...
+                </div>
+              )}
+
+              {stats && (
+                <div className="pt-4 border-t space-y-2">
+                  <h3 className="font-semibold text-sm">Statistics</h3>
+                  <div className="space-y-1 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Min Distance:</span>
+                      <span className="font-mono">{stats.min_distance.toFixed(2)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Avg Distance:</span>
+                      <span className="font-mono">{stats.avg_distance.toFixed(2)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Generation Time:</span>
+                      <span className="font-mono">
+                        {(stats.generation_time_ms / 1000).toFixed(2)}s
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Results */}
+          <div className="lg:col-span-2">
+            <div className="p-6 border rounded-lg bg-card">
+              <h2 className="text-xl font-semibold mb-4">
+                Generated Colors {colors.length > 0 && `(${colors.length})`}
+              </h2>
+              <PaletteGrid colors={colors} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}