Skip to main content

​
Molecules (components/molecules/)

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

​
Components

ComponentUsed InDescription
LevelMeter.tsxMixerChannelPer-track stereo audio level bar. Uses subscribeRtBuffer() + direct DOM (transform: scaleY) for GPU-composited 60Hz updates.
VolumeFader.tsxMixerChannelVertical volume slider with dB-scaled labels. Real-time: drags use setMixerParamRT (no persist), release persists via Zustand.
PanControl.tsxMixerChannelRotary pan knob. Double-click to reset to center.
MuteSoloButtons.tsxMixerChannelMute (M) and Solo (S) toggle buttons with exclusive solo logic.
SendControl.tsxMixerChannelSend level knobs for routing to return tracks.
PluginSlots.tsxMixerChannelInstrument, FX, and channel strip slot management. Click to open, dropdown to change, right-click to remove.
RecordStrip.tsxMixerChannelMIDI/audio recording arm, input selector, and recording controls.
StereoMeters.tsxMasterChannelSpectrum analyzer, stereo width, phase correlation, and balance meters. Uses subscribeRtBuffer() for real-time display.
CpuMeter.tsxTransportCPU usage bar with buffer size and sample rate display.
MidiClip.tsxTrackLaneMiniature MIDI clip visualization in arrangement track lanes.
ChatMessage.tsxChatPanelSingle chat message bubble (user or assistant) with markdown rendering.
ChatSuggestion.tsxChatPanelQuick-action suggestion chip for the AI copilot.
MarkdownRenderer.tsxChatPanelRenders Gemini responses as styled markdown with code blocks.
TrackColorDot.tsxTrackHeaderColored dot indicator for track identification.
PluginShell.tsxPlugin panelsShared container shell for all stock plugin UIs — provides consistent window frame, resize, and close behavior.
PluginHeader.tsxPlugin panelsHeader bar for stock plugin UIs with plugin name, preset selector, and bypass toggle.
PluginBody.tsxPlugin panelsContent area for stock plugin UIs with consistent padding and layout.
PluginSection.tsxPlugin panelsLabeled section divider within stock plugin UIs (e.g., “Oscillator”, “Filter”, “Envelope”).
EditorPanelShell.tsxCustomEditorPanelContainer shell for the custom editor panel framework.
AgentChat.tsxChatPanelSpecialized chat interface for AI agent conversations with agent identity indicators.
TypingIndicator.tsxChatPanelAnimated 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.