frontend/studio.html

<section class="ms-root" data-state="idle" aria-label="MuScriptor transcription studio">
  <header class="ms-topbar">
    <div class="ms-heading">
      <p class="ms-eyebrow"><span class="ms-state-dot" aria-hidden="true"></span><span data-field="state">Ready for audio</span></p>
      <h2 data-field="audio-name">Your transcription</h2>
      <p class="ms-subtitle"><span data-field="status">Upload a recording to reveal its notes and instruments.</span><b data-field="summary">—</b></p>
    </div>
    <div class="ms-quick-downloads" aria-label="Quick exports">
      <a data-download="midi" aria-label="Download full MIDI" aria-disabled="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3.5v8m0 0 3-3m-3 3-3-3M4.5 15.5h11"/></svg><span>MIDI</span></a>
      <a data-download="musicxml" aria-label="Download MusicXML" aria-disabled="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M6 2.8h5l3 3v11.4H6zM11 2.8v3h3M8 10h4m-4 3h4"/></svg><span>MusicXML</span></a>
      <a data-download="pdf" aria-label="Download score PDF" aria-disabled="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M6 2.8h5l3 3v11.4H6zM11 2.8v3h3M8 10h4m-4 3h4"/></svg><span>Score PDF</span></a>
      <a data-download="bundle" aria-label="Download all score exports" aria-disabled="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 5.5h12v10H4zM6.5 3.5h7M10 8v5m0 0 2-2m-2 2-2-2"/></svg><span>All exports</span></a>
    </div>
  </header>

  <div class="ms-progress" role="status" aria-live="polite" hidden>
    <div><span data-field="progress-label">Preparing inference…</span><b data-field="progress-value">0%</b></div>
    <i role="progressbar" aria-label="Transcription progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <span class="ms-progress-segments" data-field="progress-bar" aria-hidden="true"></span>
    </i>
  </div>

  <section class="ms-empty">
    <div class="ms-empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 16h3v3H4zm5-6h4v3H9zm6-4h5v3h-5zm0 8h3v3h-3z"/></svg></div>
    <h3>Your transcription will appear here</h3>
    <p>MuScriptor converts decoded notes into color-coded instrument tracks. Review the result before exporting MIDI or engraving a score.</p>
  </section>

  <section class="ms-workspace" hidden>
    <div class="ms-stats" aria-label="Transcription statistics">
      <div><span>Duration</span><strong data-field="info-duration">—</strong></div>
      <div><span>Notes</span><strong data-field="note-count">—</strong></div>
      <div><span>Tracks</span><strong data-field="info-tracks">—</strong></div>
      <div><span>Elapsed</span><strong data-field="elapsed">—</strong></div>
    </div>

    <div class="ms-transport" aria-label="Playback controls">
      <div class="ms-transport-main">
        <button type="button" data-action="play" class="ms-play" aria-label="Play" disabled>▶</button>
        <button type="button" data-action="stop" class="ms-stop" aria-label="Return to start" disabled>■</button>
        <span data-field="clock">0:00.0</span>
        <input data-action="seek" class="ms-seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="Playback position">
        <span data-field="duration">0:00.0</span>
      </div>
      <div class="ms-transport-options">
        <span class="ms-option-label" title="Compare original audio and MIDI">Source balance</span>
        <div class="ms-source-mix" title="Blend the original recording and MIDI transcription">
          <button type="button" data-source="original">Original</button>
          <input data-action="source-mix" type="range" min="0" max="1" step="0.01" value="0.5" aria-label="Original to MIDI mix">
          <button type="button" data-source="midi">MIDI</button>
        </div>
        <label class="ms-stereo-toggle" title="Original on the left, MIDI on the right"><span aria-hidden="true">⇆</span><input data-action="stereo" type="checkbox"> Split L/R</label>
        <label class="ms-volume"><span aria-hidden="true">◖</span> Volume <input data-action="volume" type="range" min="0" max="1" step="0.01" value="0.72"></label>
        <span data-field="synth-state" class="ms-synth-state" data-kind="loading">Loading MuseScore instruments…</span>
      </div>
      <div class="ms-loop-strip" aria-label="Loop playback controls">
        <div class="ms-loop-actions" role="group" aria-label="Loop and region controls">
          <button type="button" data-action="loop" aria-pressed="false" aria-label="Enable loop" disabled><span class="ms-loop-glyph" aria-hidden="true">↻</span><span data-field="loop-button-label">Loop off</span></button>
          <button type="button" data-action="select-region" aria-pressed="false" disabled>Select region</button>
          <button type="button" data-action="loop-in" title="Set loop start at the playhead" disabled>In</button>
          <button type="button" data-action="loop-out" title="Set loop end at the playhead" disabled>Out</button>
          <button type="button" data-action="clear-region" title="Use the complete available range" disabled>Clear</button>
        </div>
        <div class="ms-loop-readout" aria-live="polite">
          <span data-field="loop-mode">Loop off</span>
          <output data-field="loop-range">Full range</output>
        </div>
      </div>
    </div>

    <div class="ms-studio-grid">
      <section class="ms-view-shell">
        <nav class="ms-tabs" aria-label="Visualization">
          <button type="button" data-tab="roll" aria-selected="true">Piano roll</button>
          <button type="button" data-tab="score" aria-selected="false">Score</button>
          <span data-field="pitch-range">Waiting for notes</span>
          <div class="ms-roll-zoom" aria-label="Piano roll zoom">
            <button type="button" data-action="zoom-out" aria-label="Zoom out">−</button>
            <input data-action="zoom" type="range" min="0.5" max="12" step="0.25" value="1" aria-label="Piano roll zoom level">
            <button type="button" data-action="zoom-in" aria-label="Zoom in">+</button>
            <output data-field="zoom-value">1×</output>
          </div>
        </nav>

        <div data-view="roll" class="ms-roll-view">
          <div class="ms-roll-surface">
            <canvas data-canvas="keys" class="ms-piano-keys" height="460" aria-label="Piano keyboard"></canvas>
            <div data-region="roll-scroll" class="ms-roll-scroll" tabindex="0" aria-label="Scrollable piano roll">
              <div data-region="roll-stage" class="ms-roll-stage">
                <canvas data-canvas="roll" class="ms-roll-canvas" height="460" aria-label="Color-coded multitrack piano roll"></canvas>
                <canvas data-canvas="cursor" class="ms-cursor-canvas" height="460" aria-hidden="true"></canvas>
              </div>
            </div>
          </div>
          <p><span data-field="roll-help">Click to seek · Shift-click sets In · Alt/Option-click sets Out.</span></p>
        </div>

        <div data-view="score" class="ms-score-view" hidden>
          <header data-region="score-toolbar" class="ms-score-toolbar" hidden>
            <label>
              <span>Score document</span>
              <select data-action="score-document" aria-label="Choose full score or instrument part"></select>
            </label>
            <span data-field="score-document-meta">Full score</span>
            <div>
              <a data-action="open-score" target="_blank" rel="noreferrer" aria-disabled="true">Open PDF</a>
              <a data-action="download-score" aria-disabled="true">Download</a>
            </div>
          </header>
          <div class="ms-score-stage">
            <div data-region="score-empty" class="ms-score-empty">
              <span aria-hidden="true">♩</span>
              <strong data-field="score-empty-title">No score generated yet</strong>
              <p data-field="score-empty-copy">Use the Score controls above the studio to generate the full PDF and instrument parts.</p>
            </div>
            <div data-region="score" class="ms-score-document" hidden></div>
          </div>
        </div>
      </section>

      <aside class="ms-mixer" aria-label="Track mixer">
        <div class="ms-tracks-heading">
          <div><span class="ms-kicker">Track mixer</span><strong data-field="track-count">No tracks yet</strong></div>
          <button type="button" data-action="reset-mix">Reset</button>
        </div>
        <div data-region="tracks" class="ms-track-list" aria-label="Instrument tracks"></div>
      </aside>
    </div>

    <div class="ms-notation-info" aria-label="Generated score summary" hidden>
      <div class="ms-notation-heading"><span>Score summary</span><small>Engraving output</small></div>
      <dl>
        <div><dt>Tempo</dt><dd data-field="tempo">—</dd></div>
        <div><dt>Meter</dt><dd data-field="meter">—</dd></div>
        <div><dt>Concert key</dt><dd data-field="key">—</dd></div>
        <div><dt>Pickup</dt><dd data-field="pickup">—</dd></div>
        <div><dt>Grid</dt><dd data-field="quantization">—</dd></div>
        <div><dt>Parts</dt><dd data-field="parts">—</dd></div>
        <div><dt>Review</dt><dd data-field="review">—</dd></div>
      </dl>
    </div>

  </section>

  <div class="ms-announcer" aria-live="polite"></div>
</section>