app/editor.html

<div class="roll-shell">
  <audio data-role="player" preload="metadata" hidden></audio>
  <div class="roll-toolbar">
    <div class="track-control"><span>Track</span><div class="track-picker">
      <button data-role="track" type="button" aria-label="MIDI track" aria-describedby="midi-track-name" aria-haspopup="listbox" aria-expanded="false" aria-controls="midi-track-options">
        <span class="track-swatch" aria-hidden="true"></span><span id="midi-track-name" data-role="track-name">Choose a track</span><span class="track-arrow" aria-hidden="true">▾</span>
      </button>
      <div id="midi-track-options" data-role="track-options" role="listbox" aria-label="MIDI tracks" hidden></div>
    </div></div>
    <label>Instrument <select data-role="instrument" aria-label="Track instrument"></select></label>
    <button data-action="add-track">+ Instrument</button>
  </div>
  <div class="roll-toolbar roll-add" data-role="add-panel" hidden>
    <label>New instrument <select data-role="new-instrument" aria-label="New instrument"></select></label>
    <button data-action="confirm-track">Add instrument</button><button data-action="cancel-track">Cancel</button>
    <span>Confirm the instrument before drawing notes.</span>
  </div>
  <div class="roll-toolbar roll-tools">
    <button data-tool="select" title="Select and move notes (V)">↖ Select</button>
    <button data-tool="pencil" title="Draw notes (D)">✎ Pencil</button>
    <button data-tool="erase" title="Erase notes (E)">▱ Eraser</button>
    <label>Snap <select data-role="snap" aria-label="Time snap"><option value="0">Off</option><option value="0.04" selected>40 ms</option><option value="0.1">100 ms</option><option value="0.25">250 ms</option></select></label>
    <button data-action="undo" title="Undo (Ctrl/Cmd+Z)">Undo</button>
    <button data-action="redo" title="Redo (Ctrl/Cmd+Shift+Z)">Redo</button>
    <button data-action="delete">Delete selected</button>
  </div>
  <div class="roll-toolbar roll-secondary">
    <button data-action="restart" title="Go to start"><span class="transport-icon" aria-hidden="true">⏮</span> Start</button>
    <label>Audio <select data-role="audio-source" aria-label="Audio to play"><option value="original">Original</option><option value="generated">Generated</option></select></label>
    <button data-action="play"><span class="transport-icon" aria-hidden="true">▶</span> Play audio</button>
    <button data-action="preview"><span class="transport-icon" aria-hidden="true">▶</span> Preview notes</button>
    <button data-action="stop"><span class="transport-icon" aria-hidden="true">■</span> Stop</button>
    <label>Listen <select data-role="listen" aria-label="Preview instruments"><option value="all">All instruments</option><option value="selected">Selected instrument</option></select></label>
    <span data-role="listen-range" aria-live="polite"></span>
  </div>
  <div class="roll-toolbar roll-secondary">
    <label>Zoom <input data-role="zoom" aria-label="Timeline zoom" type="range" min="1" max="4" step="0.25" value="1"></label>
    <label>Velocity <input data-role="velocity" aria-label="Selected note velocity" type="number" min="1" max="127" value="90"></label>
    <span data-role="sound-status" aria-live="polite">GM preview</span>
    <span data-role="count"></span>
  </div>
  <section class="roll-midi" aria-label="MIDI keyboard recording">
    <div class="roll-midi-heading"><strong>MIDI keyboard</strong><span>Play and record notes into the selected track · Chrome / Edge</span></div>
    <p>Connect a keyboard to your computer, click <b>Connect MIDI</b>, allow access, and choose your device below.</p>
    <div class="roll-toolbar">
      <button data-action="connect-midi">Connect MIDI</button>
      <label>Keyboard <select data-role="midi-input" aria-label="MIDI input" disabled><option value="">Connect MIDI to choose</option></select></label>
      <button data-action="record" aria-pressed="false" disabled><span class="record-icon" aria-hidden="true">●</span> Start recording</button>
      <button data-action="stop-recording" disabled><span class="transport-icon" aria-hidden="true">■</span> Stop recording</button>
      <label><input data-role="record-snap" type="checkbox"> Snap recording</label>
    </div>
    <p data-role="midi-status" role="status">Load a clip and connect MIDI to start recording.</p>
    <p>Choose a track and click the waveform for a start, or drag a range. Start recording → play your keyboard → Stop recording → Apply edits. New notes replace same-pitch overlaps. Undo restores the score before the take.</p>
    <a data-role="midi-standalone" target="_blank" rel="noopener" hidden>Open the demo directly to connect MIDI ↗</a>
  </section>
  <p data-role="edit-lock" class="roll-lock" role="status" hidden>Editing paused — choose <b>Add instrument</b> or <b>Cancel</b> above.</p>
  <div class="roll-scroll" tabindex="0" aria-label="Piano roll. Only the selected track can be edited. Select notes, draw with the pencil, or erase. Drag the waveform to select a playback range.">
    <canvas data-role="roll" aria-label="Editable piano roll"></canvas>
  </div>
  <div class="roll-help">
    <p>Only the selected track is editable. Drag empty space to select its notes · Drag selected notes to move · Drag a note’s right edge to resize</p>
    <p>Click the waveform to seek · Drag across it or select notes to choose a playback range · Start clears the range</p>
    <p>Listen chooses the instruments for Preview notes. Play audio always plays the full mix.</p>
    <p><kbd>Shift</kbd> + click to add to selection · <kbd>↑</kbd> <kbd>↓</kbd> transpose · <kbd>Shift</kbd> + arrows for an octave · <kbd>Del</kbd> remove</p>
    <p><kbd>Ctrl</kbd> / <kbd>⌘ Cmd</kbd> + <kbd>Z</kbd> undo · <kbd>V</kbd> select · <kbd>D</kbd> pencil · <kbd>E</kbd> eraser · <kbd>Esc</kbd> clear selection</p>
    <p>Click piano keys, draw notes, or move them with arrows or dragging to hear the selected GM instrument. Drums use a sampled kit. These preview sounds differ from the generated audio.</p>
  </div>
  <p data-role="detail" class="roll-detail">Load a clip to begin.</p>
</div>