/* global React */ // Plugin icons registry. Custom SVG vector graphics for audio effect processors // styled with deep navy glass backing and bright sky-blue accents. window.brushRegistry = [ { name: 'Compressor', type: 'dynamics' }, { name: 'Equalizer', type: 'eq' }, { name: 'Stereo Delay', type: 'delay' }, { name: 'Reverb Room', type: 'reverb' }, { name: 'Chorus modulation', type: 'mod' }, { name: 'Noise Gate', type: 'dynamics' }, { name: 'Brickwall Limiter', type: 'dynamics' }, { name: 'Tube Saturation', type: 'distortion' }, { name: 'Tape Flanger', type: 'mod' }, { name: 'De-Esser', type: 'dynamics' }, { name: 'Multi Phaser', type: 'mod' }, { name: 'Wavetable Synth', type: 'synth' }, { name: 'Audio Sampler', type: 'synth' }, { name: 'Overdrive Clip', type: 'distortion' }, { name: 'Pitch Shifter', type: 'pitch' }, { name: 'Resonant Filter', type: 'eq' }, { name: 'Harmonic Exciter', type: 'distortion' }, { name: 'Tremolo modulator', type: 'mod' }, { name: 'Stereo Imager', type: 'utility' }, { name: 'Transient Shaper', type: 'dynamics' } ]; window.brushAssets = window.brushRegistry.map(() => null); // Force UMD SVG fallback const BrushIcon = React.memo(({ variant = 0, size = 84 }) => { const id = `plugin_${variant}`; const v = variant % 20; // Render different SVG vectors based on the variant index const renderPluginVector = () => { switch (v) { case 0: // Compressor: Needle Meter + Dial return ( ); case 1: // Equalizer: Frequency Grid + Curves return ( ); case 2: // Delay: Echo Waves return ( ); case 3: // Reverb: Chamber Reflections Space return ( ); case 4: // Chorus: Modulated Sinewaves return ( ); case 5: // Noise Gate: Level bar and gate line return ( ); case 6: // Limiter: Brickwall threshold return ( ); case 7: // Saturator: Harmonic distortion curve return ( ); case 8: // Flanger: Phase offset sweeps return ( ); case 9: // De-Esser: Sibilance filter return ( S ); case 10: // Phaser: Frequency sweep peaks return ( ); case 11: // Wavetable Synth: Oscillator Wave + Keys return ( ); case 12: // Audio Sampler: ADSR envelope + node return ( ); case 13: // Overdrive Clip: Clipped wave return ( ); case 14: // Pitch Shifter: Tuning fork symbol return ( ); case 15: // Filter: Bandpass slope return ( ); case 16: // Harmonic Exciter: Glowing star/spoke rays return ( ); case 17: // Tremolo modulator: LFO modulation return ( ); case 18: // Stereo Imager: Phase oscilloscope vector return ( ); case 19: // Transient Shaper: Sharp transient punch return ( ); default: return ; } }; return ( {/* Contact shadow */} {/* Main glass sphere backing */} {/* Dynamic vector overlay */} {renderPluginVector()} {/* Specular highlights & rims */} ); }); // A circular SVG menu visualizer with radiating lines const RadialMenuSVG = ({ size = 360, spokeCount = 8, brushSize = 56, scale = 1, glow = 1, variants = null }) => { const radius = size * 0.42; const spokeLen = radius - brushSize / 2 - 6; const items = Array.from({ length: spokeCount }); const variantAt = (i) => (variants && variants[i] !== undefined) ? variants[i] : i; return (
{/* Outer dashed guide circle */}
{/* Radiating spokes */} {items.map((_, i) => { const angle = (i / spokeCount) * 360; return (
); })} {/* Center core glowing dot */}
{/* Dials layout */} {items.map((_, i) => { const angle = (i / spokeCount) * 360 - 90; const rad = (angle * Math.PI) / 180; const x = size/2 + Math.cos(rad) * radius; const y = size/2 + Math.sin(rad) * radius; return (
); })}
); }; const PluginCard = ({ variant = 0, name = '', format = 'VST3', desc = '', style = {}, className = '', iconType = '' }) => { const [hover, setHover] = React.useState(false); const pName = name || (window.brushRegistry && window.brushRegistry[variant]?.name) || 'Plugin Processor'; const pType = (window.brushRegistry && window.brushRegistry[variant]?.type) || 'audio'; const pDesc = desc || `High fidelity professional ${pType} processor.`; const renderCardIcon = () => { switch (iconType) { case 'search': return ( ); case 'heart': case 'star': return ( ); case 'note': return ( ); case 'scan': return ( ); case 'drag': return ( ); case 'firewall': case 'lock': return ( ); case 'tag': return ( ); default: return ; } }; return (
setHover(true)} onMouseLeave={() => setHover(false)} >
{renderCardIcon()}
{format}
{pName}
{pDesc}
); }; window.BrushIcon = BrushIcon; window.RadialMenuSVG = RadialMenuSVG; window.PluginCard = PluginCard;