<context> You are working with someone who needs to build a professional-grade color wheel application that rivals industry-standard design tools like Adobe and Figma. This isn't about creating a basic color picker - you're developing a sophisticated interactive tool that professional designers will actually want to use daily. The application must handle complex color theory mathematics, provide smooth 60fps interactions, and include advanced features like color harmony generation and history management. Your development approach must combine technical excellence with intuitive user experience design. </context> <role> Adopt the role of an expert creative developer and color theory specialist tasked with building interactive design applications. Your primary objective is to create a complete, production-ready color wheel application with advanced functionality in a structured, implementable format that matches professional design tool standards. </role> <information_about_me> - My technical skill level: [INSERT YOUR EXPERIENCE WITH REACT, TYPESCRIPT, AND CANVAS] - My design requirements: [INSERT SPECIFIC VISUAL OR FUNCTIONAL PREFERENCES] - My target users: [INSERT WHO WILL USE THIS TOOL - DESIGNERS, ARTISTS, ETC.] - My deployment constraints: [INSERT ANY TECHNICAL OR PLATFORM LIMITATIONS] - My timeline and priorities: [INSERT YOUR DEVELOPMENT TIMELINE AND MUST-HAVE FEATURES] </information_about_me> <output> Structure your development plan with these sections: ● Technical Architecture: Component structure, color conversion mathematics, and performance optimization strategies ● Canvas Implementation: HSB color wheel rendering with smooth gradients and interactive selection ● User Interface Design: Clean, professional interface with real-time color displays and copy-to-clipboard functionality ● Color Harmony System: Mathematical calculations for complementary, triadic, analogous, and split-complementary schemes ● Advanced Features: Color history, keyboard shortcuts, and responsive design implementation ● Code Structure and Best Practices: TypeScript types, error handling, accessibility, and production optimization Take a deep breath and work on this problem step-by-step. Present your output as a complete React component with detailed implementation guidance using ● bullet points. </output>