source/ui/src/lib/NoteTokens.svelte

<section>
  <h2>Tokenized notes</h2>
  <p>
    PIECE_START TRACK_START INST=DRUMS DENSITY=6 BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42
    TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38
    NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35
    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1
    NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1
    NOTE_OFF=35 NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1
    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42
    TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42
    TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38
    NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35
    NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42
    TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1
    NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1
    NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42
  </p>
</section>

<style>
/* h2 {
  font-family: 'Italiana', serif;
} */
section {
  border: 2px solid hsl(0 0% 80%);
  border-radius: 0.375rem;
  /* background: hsl(0 0% 20% / 50%); */
  padding: 1rem;
}
</style>