​

Components (components/)

​

Structure

components/
├── atoms/       — Primitive UI elements (Button, Input, Knob, Select, Slider, etc.)
├── molecules/   — Composed units combining atoms (LevelMeter, PluginSlots, MuteSoloButtons)
├── organisms/   — Self-contained blocks (MixerChannel, TrackLane, TimelineRuler)
├── panels/      — Full panel/page-level components (ArrangementView, MidiEditor, MixerPanel)
└── debug.css    — Global overlay styles for debug mode (body-level, can't be Tailwind)

​

Conventions

• Styling: All components use Tailwind CSS utility classes via string constants at the bottom of each file. No component-scoped CSS files — use Tailwind’s cn() helper from @/lib/utils for conditional classes.
• State: Components access state via Zustand stores from @/data/store — never prop-drill store data.
• Bridge calls: Use send() from @/sync/api for Rust communication via the sync engine.
• Barrel exports: Each folder has an index.ts for clean imports (e.g., import { Button } from '@/components/atoms').