feat(blocks): Add input validation and user-friendly error messages for block parameters

[Ruthwik000]

Description

Currently, Music Blocks v4 lacks comprehensive input validation and error handling for block parameters. When users enter invalid data (such as negative tempo values, out-of-range pitch values, invalid note names, or malformed duration values), the system either fails silently or crashes without providing helpful feedback.

This issue proposes implementing a robust parameter validation system with user-friendly error messages to improve user experience and make debugging easier for music programming learners.

Problem Statement

• Users don't receive feedback when entering invalid block parameters
• Silent failures make it hard to identify where mistakes occur
• No suggestions are provided for valid input ranges or formats
• Errors are not standardized across different block types

Proposed Solution

Implement a comprehensive validation system with the following components:

1. Validation Layer (TypeScript utility functions)

• Create /app/lib/validation.ts with validation functions for common parameters
• Define validation schemas for each block type
• Support different validation rules:
  • Range validation: tempo (10-500 BPM), pitch (0-127), volume (0-100)
  • Format validation: note names (C, D, E, F, G, A, B with octaves), durations
  • Type validation: ensure numeric vs. string inputs

2. Error Message Component (React)

• Create reusable error message component in /app/components/
• Display clear, actionable error messages
• Show valid input ranges and examples
• Allow inline error display in block parameter fields

3. Validation Integration

• Add validation hooks to block parameter input components
• Validate on blur and onChange events
• Prevent invalid values from being submitted to the engine
• Show validation status with visual feedback (red border, error icon)

Example Implementation for Tempo Block

// Example error messages:
// ❌ "Tempo must be between 10 and 500 BPM. You entered: -50"
// ✓ "Valid tempo value: 120 BPM"

Key Files to Modify/Create

• /app/lib/validation.ts (new)
• /app/components/ValidationError.tsx (new)
• /app/components/blocks/ (existing block components - to integrate validation)
• /app/lib/__tests__/validation.test.ts (new unit tests)
• /app/types/validation.types.ts (new - for validation schema types)