refactor: update UI component usage to match latest shadcn APIs

app/(app)/pastel/batch/page.tsx

@@ -1,9 +1,15 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/Button';
-import { Select } from '@/components/ui/Select';
-import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
 import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
 import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
@@ -118,15 +124,19 @@ export default function BatchPage() {
               <h2 className="text-sm font-medium mb-4">Operation</h2>
               <div className="space-y-4">
                 <Select
-                  label="Operation"
                   value={operation}
-                  onChange={(e) => setOperation(e.target.value as Operation)}
+                  onValueChange={(value) => setOperation(value as Operation)}
                 >
-                  <option value="lighten">Lighten</option>
-                  <option value="darken">Darken</option>
-                  <option value="saturate">Saturate</option>
-                  <option value="desaturate">Desaturate</option>
-                  <option value="rotate">Rotate Hue</option>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select operation" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="lighten">Lighten</SelectItem>
+                    <SelectItem value="darken">Darken</SelectItem>
+                    <SelectItem value="saturate">Saturate</SelectItem>
+                    <SelectItem value="desaturate">Desaturate</SelectItem>
+                    <SelectItem value="rotate">Rotate Hue</SelectItem>
+                  </SelectContent>
                 </Select>
 
                 <div>

app/(app)/pastel/colorblind/page.tsx

@@ -3,8 +3,14 @@
 import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
-import { Button } from '@/components/ui/Button';
-import { Select } from '@/components/ui/Select';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useSimulateColorBlindness } from '@/lib/pastel/api/queries';
 import { Loader2, Eye, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -113,13 +119,17 @@ export default function ColorBlindPage() {
               <h2 className="text-sm font-medium mb-4">Blindness Type</h2>
               <div className="space-y-4">
                 <Select
-                  label="Type"
                   value={blindnessType}
-                  onChange={(e) => setBlindnessType(e.target.value as ColorBlindnessType)}
+                  onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
                 >
-                  <option value="protanopia">Protanopia (Red-blind)</option>
-                  <option value="deuteranopia">Deuteranopia (Green-blind)</option>
-                  <option value="tritanopia">Tritanopia (Blue-blind)</option>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="protanopia">Protanopia (Red-blind)</SelectItem>
+                    <SelectItem value="deuteranopia">Deuteranopia (Green-blind)</SelectItem>
+                    <SelectItem value="tritanopia">Tritanopia (Blue-blind)</SelectItem>
+                  </SelectContent>
                 </Select>
 
                 <p className="text-sm text-muted-foreground">

app/(app)/pastel/contrast/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
-import { Button } from '@/components/ui/Button';
-import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';
 import { ArrowLeftRight, Check, X } from 'lucide-react';
 
@@ -39,7 +39,7 @@ export default function ContrastPage() {
   }) => (
     <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
       <span className="text-sm">{label}</span>
-      <Badge variant={passed ? 'success' : 'destructive'}>
+      <Badge variant={passed ? 'secondary' : 'destructive'}>
         {passed ? (
           <>
             <Check className="h-3 w-3 mr-1" />

app/(app)/pastel/distinct/page.tsx

@@ -3,9 +3,15 @@
 import { useState } from 'react';
 import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Select } from '@/components/ui/Select';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useGenerateDistinct } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -65,14 +71,23 @@ export default function DistinctPage() {
                 </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>
+              <div className="space-y-2">
+                <label className="text-sm font-medium block">
+                  Distance Metric
+                </label>
+                <Select
+                  value={metric}
+                  onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select metric" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="cie76">CIE76 (Faster)</SelectItem>
+                    <SelectItem value="ciede2000">CIEDE2000 (More Accurate)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
 
               <Button
                 onClick={handleGenerate}

app/(app)/pastel/gradient/page.tsx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { useGenerateGradient } from '@/lib/pastel/api/queries';
 import { Loader2, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';

app/(app)/pastel/harmony/page.tsx

@@ -4,8 +4,14 @@ import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
-import { Button } from '@/components/ui/Button';
-import { Select } from '@/components/ui/Select';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useGeneratePalette } from '@/lib/pastel/api/queries';
 import { Loader2, Palette } from 'lucide-react';
 import { toast } from 'sonner';
@@ -73,16 +79,20 @@ export default function HarmonyPage() {
               <h2 className="text-sm font-medium mb-4">Harmony Type</h2>
               <div className="space-y-4">
                 <Select
-                  label="Harmony"
                   value={harmonyType}
-                  onChange={(e) => setHarmonyType(e.target.value as HarmonyType)}
+                  onValueChange={(value) => setHarmonyType(value as HarmonyType)}
                 >
-                  <option value="monochromatic">Monochromatic</option>
-                  <option value="analogous">Analogous</option>
-                  <option value="complementary">Complementary</option>
-                  <option value="split-complementary">Split-Complementary</option>
-                  <option value="triadic">Triadic</option>
-                  <option value="tetradic">Tetradic (Square)</option>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select harmony" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="monochromatic">Monochromatic</SelectItem>
+                    <SelectItem value="analogous">Analogous</SelectItem>
+                    <SelectItem value="complementary">Complementary</SelectItem>
+                    <SelectItem value="split-complementary">Split-Complementary</SelectItem>
+                    <SelectItem value="triadic">Triadic</SelectItem>
+                    <SelectItem value="tetradic">Tetradic (Square)</SelectItem>
+                  </SelectContent>
                 </Select>
 
                 <p className="text-sm text-muted-foreground">

app/(app)/pastel/names/page.tsx

@@ -2,8 +2,14 @@
 
 import { useState, useMemo } from 'react';
 import { ColorSwatch } from '@/components/pastel/color/ColorSwatch';
-import { Input } from '@/components/ui/Input';
-import { Select } from '@/components/ui/Select';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { parse_color } from '@valknarthing/pastel-wasm';
@@ -57,9 +63,14 @@ export default function NamedColorsPage() {
             />
           </div>
           <div className="w-full sm:w-48">
-            <Select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'name' | 'hue')}>
-              <option value="name">Sort by Name</option>
-              <option value="hue">Sort by Hue</option>
+            <Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sort by..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="name">Sort by Name</SelectItem>
+                <SelectItem value="hue">Sort by Hue</SelectItem>
+              </SelectContent>
             </Select>
           </div>
         </div>

app/(app)/pastel/page.tsx

@@ -9,7 +9,7 @@ import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
 import { useColorInfo } from '@/lib/pastel/api/queries';
 import { useColorHistory } from '@/lib/pastel/stores/historyStore';
 import { Loader2, Share2, History, X } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 
 function PlaygroundContent() {

app/(app)/pastel/textcolor/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/button';
 import { useTextColor } from '@/lib/pastel/api/queries';
 import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';
 import { toast } from 'sonner';