Molecules (`components/molecules/`)

Composed components that combine multiple atoms into functional units. Each molecule handles one piece of DAW functionality.

Components

Component	Used In	Description
`LevelMeter.tsx`	MixerChannel	Per-track stereo audio level bar. Uses `subscribeRtBuffer()` + direct DOM (`transform: scaleY`) for GPU-composited 60Hz updates.
`VolumeFader.tsx`	MixerChannel	Vertical volume slider with dB-scaled labels. Real-time: drags use `setMixerParamRT` (no persist), release persists via Zustand.
`PanControl.tsx`	MixerChannel	Rotary pan knob. Double-click to reset to center.
`MuteSoloButtons.tsx`	MixerChannel	Mute (M) and Solo (S) toggle buttons with exclusive solo logic.
`SendControl.tsx`	MixerChannel	Send level knobs for routing to return tracks.
`PluginSlots.tsx`	MixerChannel	Instrument, FX, and channel strip slot management. Click to open, dropdown to change, right-click to remove.
`RecordStrip.tsx`	MixerChannel	MIDI/audio recording arm, input selector, and recording controls.
`StereoMeters.tsx`	MasterChannel	Spectrum analyzer, stereo width, phase correlation, and balance meters. Uses `subscribeRtBuffer()` for real-time display.
`CpuMeter.tsx`	Transport	CPU usage bar with buffer size and sample rate display.
`MidiClip.tsx`	TrackLane	Miniature MIDI clip visualization in arrangement track lanes.
`ChatMessage.tsx`	ChatPanel	Single chat message bubble (user or assistant) with markdown rendering.
`ChatSuggestion.tsx`	ChatPanel	Quick-action suggestion chip for the AI copilot.
`MarkdownRenderer.tsx`	ChatPanel	Renders Gemini responses as styled markdown with code blocks.
`TrackColorDot.tsx`	TrackHeader	Colored dot indicator for track identification.
`PluginShell.tsx`	Plugin panels	Shared container shell for all stock plugin UIs — provides consistent window frame, resize, and close behavior.
`PluginHeader.tsx`	Plugin panels	Header bar for stock plugin UIs with plugin name, preset selector, and bypass toggle.
`PluginBody.tsx`	Plugin panels	Content area for stock plugin UIs with consistent padding and layout.
`PluginSection.tsx`	Plugin panels	Labeled section divider within stock plugin UIs (e.g., “Oscillator”, “Filter”, “Envelope”).
`EditorPanelShell.tsx`	CustomEditorPanel	Container shell for the custom editor panel framework.
`AgentChat.tsx`	ChatPanel	Specialized chat interface for AI agent conversations with agent identity indicators.
`TypingIndicator.tsx`	ChatPanel	Animated typing dots while AI is responding.

Design Conventions

Real-time components — Meters (LevelMeter, StereoMeters) must use subscribeRtBuffer() for direct DOM updates. Never re-render React for meter data.
GPU-composited transforms — Use transform: scaleY() / scaleX() / translateX() instead of height / width / left to avoid layout recalculation overhead.
Real-time vs persistent paths — Slider drags should use the real-time param path (setMixerParamRT) and only persist on release.

Architecture

State & Data

Components

Molecules (`components/molecules/`)

Molecules (`components/molecules/`)

Components

Design Conventions

​Molecules (components/molecules/)

​Components

​Design Conventions

Molecules (`components/molecules/`)

Components

Design Conventions