refactor: update UI component usage to match latest shadcn APIs

components/pastel/tools/ManipulationPanel.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { Slider } from '@/components/ui/Slider';
-import { Button } from '@/components/ui/Button';
+import { Slider } from '@/components/ui/slider';
+import { Button } from '@/components/ui/button';
 import {
   useLighten,
   useDarken,
@@ -131,15 +131,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
     <div className="space-y-6">
       {/* Lighten */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Lighten</label>
+          <span className="text-xs text-muted-foreground">{(lightenAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Lighten"
           min={0}
           max={1}
           step={0.05}
-          value={lightenAmount}
-          onChange={(e) => setLightenAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[lightenAmount]}
+          onValueChange={(vals) => setLightenAmount(vals[0])}
         />
         <Button onClick={handleLighten} disabled={isLoading} className="w-full">
           Apply Lighten
@@ -148,15 +149,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Darken */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Darken</label>
+          <span className="text-xs text-muted-foreground">{(darkenAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Darken"
           min={0}
           max={1}
           step={0.05}
-          value={darkenAmount}
-          onChange={(e) => setDarkenAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[darkenAmount]}
+          onValueChange={(vals) => setDarkenAmount(vals[0])}
         />
         <Button onClick={handleDarken} disabled={isLoading} className="w-full">
           Apply Darken
@@ -165,15 +167,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Saturate */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Saturate</label>
+          <span className="text-xs text-muted-foreground">{(saturateAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Saturate"
           min={0}
           max={1}
           step={0.05}
-          value={saturateAmount}
-          onChange={(e) => setSaturateAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[saturateAmount]}
+          onValueChange={(vals) => setSaturateAmount(vals[0])}
         />
         <Button onClick={handleSaturate} disabled={isLoading} className="w-full">
           Apply Saturate
@@ -182,15 +185,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Desaturate */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Desaturate</label>
+          <span className="text-xs text-muted-foreground">{(desaturateAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Desaturate"
           min={0}
           max={1}
           step={0.05}
-          value={desaturateAmount}
-          onChange={(e) => setDesaturateAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[desaturateAmount]}
+          onValueChange={(vals) => setDesaturateAmount(vals[0])}
         />
         <Button onClick={handleDesaturate} disabled={isLoading} className="w-full">
           Apply Desaturate
@@ -199,15 +203,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Rotate Hue */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Rotate Hue</label>
+          <span className="text-xs text-muted-foreground">{rotateAmount}°</span>
+        </div>
         <Slider
-          label="Rotate Hue"
           min={-180}
           max={180}
           step={5}
-          value={rotateAmount}
-          onChange={(e) => setRotateAmount(parseInt(e.target.value))}
-          suffix="°"
-          showValue
+          value={[rotateAmount]}
+          onValueChange={(vals) => setRotateAmount(vals[0])}
         />
         <Button onClick={handleRotate} disabled={isLoading} className="w-full">
           Apply Rotation