Arrangement

A block is a composition of components, to copy and adapt: the library has no Arrangement component, because what an arrangement holds and how it behaves is your application's. The code tab has all of it.

How it is composedCopy Anchor Link

• Headers beside the timeline. A timeline shows time from its left edge, so the track headers are a column of their own next to it, not inside it. Both columns render the same list of tracks with rows of the same height (h-16), and a spacer as tall as the ruler (h-6) tops the headers.
• Rows are yours. In the timeline, each track is a div with position: relative, named with role="group" and aria-label. A region takes its place in time from the timeline and its height from that row, so clips are rendered in the row of their track: first the tracks, then their clips.
• Content by kind. A clip of audio holds a waveform, a clip of MIDI holds notes; both show what the region shows, from its offset for its duration.
• An automation lane under the bass. A Curve outside any region lies on the timeline itself. It is editable: drag its points, bend its segments, double-click to add a point; moves snap to the grid, and the block keeps the points each gesture leaves.

Clips here only show. Moving and trimming them is your application changing their at, duration and offset: the Region page shows how, in a few lines.