Click to add on a new track, or drag onto the timeline.

{#each groups as { group, items } (group)}

{group}

{#each items as item (item.id)} onDragStart(e, item)} class="flex cursor-grab flex-col items-center gap-1.5 rounded-lg border border-border bg-surface-elevated px-1.5 py-2 text-center transition-colors hover:border-brand-500/50 hover:bg-surface-overlay active:cursor-grabbing" onclick={() => onadd?.(item)} > {item.glyph ?? item.label.slice(0, 2)} {item.label} {/each}

{/each}