Site 1.1.0: beat jump in the builder, version and changelog, key colours

- Beat jump (experimental) on the mods page, in the docs and in the builder
  (needs hot cue keys; dependencies are ticked and unticked as a chain).
- Key notation 1.2.0: keys in their Camelot wheel colour, also in BROWSE.
- Version badge at the top with a changelog; every mod's version on its
  card and in the builder. make_builder_data.py writes assets/versions.js
  from tools/changelog.json and the mods' versions and stamps the pages'
  CSS and script links with ?v=<site version>.
- The generator keeps a changed copy of the UTILITY table as the user's
  own table plus our bytes (beat jump renames an item).
- Upcoming: quick search, USB auto load and phase meter reverse (in testing).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

script.js

@@ -21,6 +21,41 @@
       label();
     });
 
+    // version badge and changelog (assets/versions.js, made by tools/make_builder_data.py)
+    var V = window.CDJ_VERSIONS;
+    var head = document.querySelector('.top .wrap');
+    if (V && head) {
+      var esc = function (t) { return String(t).replace(/[&<>]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]; }); };
+      var vb = document.createElement('button');
+      vb.type = 'button'; vb.className = 'ver-btn'; vb.textContent = 'v' + V.site;
+      vb.setAttribute('aria-haspopup', 'dialog'); vb.title = 'Changelog';
+      var brand = head.querySelector('.brand');
+      if (brand && brand.nextSibling) head.insertBefore(vb, brand.nextSibling); else head.appendChild(vb);
+      var pop = document.createElement('div');
+      pop.className = 'ver-pop'; pop.setAttribute('role', 'dialog'); pop.setAttribute('aria-label', 'Changelog');
+      var html = '<div class="ver-box"><button class="close" type="button" aria-label="Close">✕</button>' +
+        '<h2>Changelog</h2><p class="sub">Site ' + esc(V.site) + ' · ' + esc(V.date) + ' · Semantic Versioning, dates ISO 8601</p>';
+      V.log.forEach(function (e) {
+        html += '<h3>' + esc(e.version) + '<span class="d">' + esc(e.date) + '</span></h3><ul>' +
+          e.changes.map(function (c) { return '<li>' + esc(c) + '</li>'; }).join('') + '</ul>';
+      });
+      html += '<h3>Mods</h3><div class="ver-mods">' + Object.keys(V.mods).map(function (m) {
+        return '<code>' + esc(m) + '</code><span>' + esc(V.mods[m]) + '</span>';
+      }).join('') + '</div></div>';
+      pop.innerHTML = html;
+      document.body.appendChild(pop);
+      var close = function () { pop.classList.remove('open'); vb.focus(); };
+      vb.addEventListener('click', function () { pop.classList.add('open'); pop.querySelector('.close').focus(); });
+      pop.querySelector('.close').addEventListener('click', close);
+      pop.addEventListener('click', function (e) { if (e.target === pop) close(); });
+      document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && pop.classList.contains('open')) close(); });
+      // every mod card's version beside its name
+      document.querySelectorAll('.card h3 code').forEach(function (c) {
+        var v = V.mods[c.textContent.trim()];
+        if (v) { var s = document.createElement('span'); s.className = 'ver'; s.textContent = 'v' + v; c.parentNode.appendChild(s); }
+      });
+    }
+
     // before / after
     document.querySelectorAll('.compare').forEach(function (box) {
       var range = box.querySelector('input[type="range"]');