> ## Documentation Index
> Fetch the complete documentation index at: https://songbird.studiocollective.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Molecules (`components/molecules/`)

# 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.