Fix issue where converting BPM to BPM (or any tempo unit to itself)
was incorrectly applying the conversion formula instead of returning
the same value.
Example bug: 120 BPM → BPM was returning 0.008333 instead of 120
Added check: if fromUnit === toUnit, return value unchanged.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive tempo conversion system supporting:
- BPM (beats per minute) as base unit
- Musical note durations: whole, half, quarter, eighth, sixteenth, thirty-second
- Dotted notes (1.5x duration): dotted-half, dotted-quarter, dotted-eighth, dotted-sixteenth
- Triplet notes (2/3 duration): quarter-triplet, eighth-triplet, sixteenth-triplet
- Time units: milliseconds, seconds, Hertz
Technical implementation:
- Created lib/tempo.ts with custom measure definition
- Extended lib/units.ts with tempo integration and reciprocal conversion logic
- Added tempo category color (orange #F97316) to globals.css
- Conversion formula: milliseconds per beat = 60000 / BPM
- Special handling for BPM ↔ time unit conversions using reciprocal relationship
The tempo converter integrates seamlessly with existing UX:
- Appears as "Tempo / BPM" category in category selector
- Supports all features: search, favorites, history, visual comparison, draggable bars
- Enables musicians to convert between BPM and note durations for tempo calculations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed the colored bar segments not showing:
🎨 Direct Color Implementation:
- Added getCategoryColorHex() function to return actual hex values
- Changed from CSS variables to direct backgroundColor
- No more var(--color-*) that wasn't resolving
- Direct hex colors like #3B82F6 for length, #10B981 for mass, etc.
✨ Visual Improvements:
- Taller bars (h-8, 32px) for better visibility
- Drop shadow on percentage labels for readability
- White text on bars >30% filled
- Foreground color text on smaller bars
- pointer-events-none on overlay to prevent interaction issues
🔧 Updated Components:
- MainConverter: Import and use getCategoryColorHex()
- VisualComparison: Accept hex color string directly
- lib/units: Added getCategoryColorHex() with all 23 colors
The bars will now definitely show with vibrant colors!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete Phase 2 implementation with working unit converter:
Core Conversion Engine (lib/units.ts):
- Type-safe wrapper for convert-units library
- Support for all 23 measures with TypeScript types
- getAllMeasures() - Get all available categories
- getUnitsForMeasure() - Get units for specific measure
- getUnitInfo() - Get detailed unit information
- convertUnit() - Convert between two units
- convertToAll() - Convert to all compatible units
- getCategoryColor() - Get Tailwind color class for measure
- formatMeasureName() - Format measure names for display
- searchUnits() - Fuzzy search across all units
Utility Functions (lib/utils.ts):
- cn() - Merge Tailwind classes with clsx and tailwind-merge
- formatNumber() - Smart number formatting with scientific notation
- debounce() - Debounce helper for inputs
- parseNumberInput() - Parse user input to number
- getRelativeTime() - Format timestamps
UI Components:
- Input - Styled input with focus states
- Button - 6 variants (default, destructive, outline, secondary, ghost, link)
- Card - Card container with header, title, description, content, footer
Main Converter Component (components/converter/MainConverter.tsx):
- Real-time conversion as user types
- Category selection with 23 color-coded buttons
- Input field with unit selector
- Grid display of all conversions in selected measure
- Color-coded result cards with category colors
- Responsive layout (1/2/3 column grid)
Homepage Updates:
- Integrated MainConverter component
- Clean header with gradient text
- Uses design system colors
Dependencies Added:
- clsx - Class name utilities
- tailwind-merge - Merge Tailwind classes intelligently
Features Working:
✓ Select from 23 measurement categories
✓ Real-time conversion to all compatible units
✓ Color-coded categories
✓ Formatted number display
✓ Responsive design
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
