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

# Components (`components/`)

# Components (`components/`)

This directory follows **atomic design** principles to organize UI components by complexity:

## 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'`).