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>

builder/ui.js

@@ -9,12 +9,16 @@
       what: 'Two-line phase meter instead of the four boxes; UTILITY › PHASE METER (was SLIP FLASHING) switches it.' },
     { id: 'rgb_waveform', name: 'RGB waveform', by: 'arnoldasr', state: 'stable',
       what: 'The big waveform in RGB colours, the overview as a red-to-white gradient.' },
+    { id: 'beatjump', name: 'Beat jump', by: 'ours', state: 'experimental', needs: 'hotcuekeys',
+      what: 'TRACK SEARCH ◀◀ ▶▶ jumps 1/2/4/8 beats along the beat grid, at once and in phase. UTILITY › BEAT JUMP (was SCREEN SAVER).' },
     { id: 'cuecolours', name: 'Cue colours', by: 'ours', state: 'stable',
       what: 'Memory cues in their rekordbox colours; rekordbox hot cues shown as lettered boxes.' },
     { id: 'hotcuekeys', name: 'Hot cue keys', by: 'ours', state: 'experimental', needs: 'cuecolours',
       what: 'Hot cues A–C on the BEAT DIVIDE keys: play, gate, set and delete, saved on the USB, loaded in the background.' },
     { id: 'ledsaver', name: 'LED animation', by: 'ours', state: 'stable',
       what: 'While the screen saver dims the display, the button LEDs and the jog rings play an animation. UTILITY › LED ANIMATION.' },
+    { id: 'keynotation', name: 'Key notation', by: 'ours', state: 'experimental',
+      what: 'Every key in one notation and in its Camelot wheel colour, whatever rekordbox exported: Camelot, Open Key or classic, also in BROWSE › KEY. UTILITY › KEY NOTATION.' },
     { id: 'credit', name: 'Boot text', by: 'ours', state: 'stable',
       what: 'The boot screen says “Pionaarr Mods 1.0” instead of “Ver 1.31”.' }
   ];
@@ -25,14 +29,25 @@
   function byId(id) { return document.getElementById(id); }
   function needsOf(id) { var m = MODS.filter(function (x) { return x.id === id; })[0]; return m && m.needs; }
 
+  // A mod ticked ticks what it needs (and what that needs); one unticked
+  // unticks every mod that needs it, directly or not.
   function toggle(id, on) {
     chosen[id] = on;
-    var note = '';
-    if (on && needsOf(id) && !chosen[needsOf(id)]) { chosen[needsOf(id)] = true; note = 'Ticked ' + needsOf(id) + ' too: ' + id + ' needs it.'; }
-    if (!on) MODS.forEach(function (m) {
-      if (m.needs === id && chosen[m.id]) { chosen[m.id] = false; note = 'Unticked ' + m.id + ' too: it needs ' + id + '.'; }
-    });
-    byId('pick-note').textContent = note;
+    var notes = [];
+    if (on) {
+      for (var n = id; needsOf(n); n = needsOf(n)) {
+        if (!chosen[needsOf(n)]) { chosen[needsOf(n)] = true; notes.push('Ticked ' + needsOf(n) + ' too: ' + n + ' needs it.'); }
+      }
+    } else {
+      var changed = true;
+      while (changed) {
+        changed = false;
+        MODS.forEach(function (m) {
+          if (m.needs && !chosen[m.needs] && chosen[m.id]) { chosen[m.id] = false; changed = true; notes.push('Unticked ' + m.id + ' too: it needs ' + m.needs + '.'); }
+        });
+      }
+    }
+    byId('pick-note').textContent = notes.join(' ');
     render();
   }
 
@@ -44,7 +59,8 @@
       row.className = 'pick' + (chosen[m.id] ? ' on' : '');
       row.innerHTML =
         '<input type="checkbox"' + (chosen[m.id] ? ' checked' : '') + '>' +
-        '<span class="pick-main"><span class="pick-name">' + m.name + ' <code>' + m.id + '</code></span>' +
+        '<span class="pick-main"><span class="pick-name">' + m.name + ' <code>' + m.id + '</code>' +
+        (window.CDJ_VERSIONS && window.CDJ_VERSIONS.mods[m.id] ? ' <span class="ver">v' + window.CDJ_VERSIONS.mods[m.id] + '</span>' : '') + '</span>' +
         '<span class="pick-what">' + m.what + '</span>' +
         '<span class="pick-by">' + (m.by === 'ours' ? 'ours · made with Claude Code' : 'by arnoldasr') +
         (m.needs ? ' · needs <code>' + m.needs + '</code>' : '') + '</span></span>' +