feat: add draggable bars for interactive value adjustment

Implement innovative drag-to-adjust interaction in visual comparison view:

Visual feedback:
- Cursor changes to grab/grabbing when draggable
- Active bar scales up and shows ring focus indicator
- Hover overlay displays "Drag to adjust" hint
- Smooth transitions when not dragging, instant updates while dragging

Drag mechanics:
- Mouse drag support for desktop
- Touch drag support for mobile devices
- Logarithmic scale conversion preserves intuitive feel
- Clamped percentage range (3-100%) prevents invalid values
- Dragging updates input value and selected unit in real-time

Technical implementation:
- Added onValueChange callback to VisualComparison component
- Reverse logarithmic calculation converts drag position to value
- Global event listeners for smooth drag-outside-element tracking
- Prevents scrolling during touch drag on mobile
- MainConverter integrates drag callback to update state

This creates a highly tactile, visual way to adjust conversion values
by directly manipulating the bar chart representation.

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

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

components/converter/MainConverter.tsx

@@ -123,6 +123,12 @@ export default function MainConverter() {
     setSelectedUnit(record.from.unit);
   }, []);
 
+  // Handle value change from draggable bars
+  const handleValueChange = useCallback((value: number, unit: string) => {
+    setInputValue(value.toString());
+    setSelectedUnit(unit);
+  }, []);
+
   return (
     <div className="w-full max-w-6xl mx-auto space-y-6">
       {/* Command Palette */}
@@ -261,6 +267,7 @@ export default function MainConverter() {
             <VisualComparison
               conversions={conversions}
               color={getCategoryColorHex(selectedMeasure)}
+              onValueChange={handleValueChange}
             />
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">