Skip to main content

​
Panels (components/panels/)

Full panel/page-level components — each represents a major section of the DAW UI.

​
Components

PanelSizeDescription
ArrangementView.tsx~37KBMain timeline view — track lanes, playhead, section markers, scroll/zoom, section focus, click-to-seek. Handles horizontal scroll sync between ruler and lanes.
MidiEditor.tsx~45KBPiano roll editor — note editing (draw, move, resize, delete), velocity lane, section-scoped display, playhead, grid snapping.
SampleEditor.tsx~8KBAudio waveform display — shows waveform for audio/Lyria tracks, time-aligned with the arrangement.
MixerPanel.tsx~8KBMixer view — renders all MixerChannel organisms + MasterChannel. Toggleable visibility.
ChatPanel.tsx~27KBAI assistant sidebar — Gemini-powered copilot with streaming responses, tool call execution, and .bird file editing. Right panel layout.
Transport.tsx~12KBTop transport bar — play/pause/stop, BPM input, key/scale selectors, position display, CPU meter.
SettingsPanel.tsx~15KBSettings modal — audio device config (input/output/buffer/sample rate), MIDI device list, UI theme toggle, latency display.
HistoryPanel.tsx~5KBGit commit history panel — displays undo/redo history from ProjectState. Expandable toggle at bottom.
BirdFilePanel.tsx~6KB.bird file text editor — live editing of the bird notation source. Changes are debounced and sent to C++ for re-parsing.
SheetMusicView.tsx~14KBSheet music rendering — displays standard notation exported from the bird parser. Supports key/time signatures and multi-voice layouts.
GuitarTabView.tsx—Guitar tablature view — renders tab notation with string/fret display, chord diagrams, and fingering indicators.
ScriptFXEditorPanel.tsx—ScriptFX DSP code editor — CodeMirror-based editor for writing JavaScript or Faust (WASM) audio effect scripts with hot-reload.
CustomEditorPanel.tsx—Host panel for stock plugin UIs — renders the appropriate plugin editor component based on customEditors slice state.
DesignView.tsx—Visual design canvas for UI prototyping and layout experimentation.
IdeateView.tsx—AI-powered ideation workspace for brainstorming musical ideas.
PerformView.tsx—Live performance mode with clip launching and real-time controls.
RecordView.tsx—Dedicated recording interface with input monitoring and take management.
MicrotonalEditorView.tsx—Editor for non-12TET tuning systems and microtonal scale definitions.
AutomationOverlay.tsx~3KBAutomation curve overlay for the arrangement view.
DebugPanel.tsx~11KBDeveloper tools overlay — bridge call log, real-time data inspector, state dump.

​
Design Conventions

  • Panels own layout — Each panel manages its own scrolling, sizing, and responsiveness. App.tsx only controls panel visibility and positioning.
  • Canvas rendering — ArrangementView and MidiEditor use <canvas> for performance-critical rendering (playhead, note grid). The canvas uses requestAnimationFrame with data-driven updates from subscribeRtBuffer().
  • Keyboard shortcuts — Panels register their own keyboard event handlers. Transport handles space (play/pause), MidiEditor handles note editing shortcuts.
  • Panel state — Panel visibility (mixer open, chat open, etc.) is stored in useMixerStore and persisted via Zustand → C++ → git.