feat(ui): pattern modes, bundles, and zone content kind

Add profile/preset/sequence JSON import and export; map preset mode to
wire n6 with a mode dropdown for multi-mode patterns; zone edit shows
presets or sequences only with content_kind on save; update catalogue
and tests for merged pattern names.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/templates/index.html

@@ -83,11 +83,10 @@
                 <input type="text" id="new-zone-name" placeholder="Zone name">
                 <button class="btn btn-primary" id="create-zone-btn">Create</button>
             </div>
-            <fieldset class="muted-text" style="margin:0.35rem 0 0.75rem;border:none;padding:0;">
-                <legend style="font-size:0.85em;margin-bottom:0.35rem;">This zone is for</legend>
-                <label style="margin-right:1rem;"><input type="radio" name="new-zone-content-kind" value="presets" checked> Presets</label>
+            <div class="zone-content-kind-row muted-text">
+                <label><input type="radio" name="new-zone-content-kind" value="presets" checked> Presets</label>
                 <label><input type="radio" name="new-zone-content-kind" value="sequences"> Sequences</label>
-            </fieldset>
+            </div>
             <div id="zones-list-modal" class="profiles-list"></div>
             <div class="modal-actions">
                 <button class="btn btn-secondary" id="zones-close-btn">Close</button>
@@ -101,12 +100,12 @@
             <h2>Edit Zone</h2>
             <form id="edit-zone-form">
                 <input type="hidden" id="edit-zone-id">
-                <div class="modal-actions" style="margin-bottom: 1rem;">
-                    <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-zone-modal').classList.remove('active')">Close</button>
-                </div>
                 <label>Zone Name:</label>
                 <input type="text" id="edit-zone-name" placeholder="Enter zone name" required>
+                <div class="zone-content-kind-row muted-text">
+                    <label><input type="radio" name="edit-zone-content-kind" value="presets" checked> Presets</label>
+                    <label><input type="radio" name="edit-zone-content-kind" value="sequences"> Sequences</label>
+                </div>
                 <div id="edit-zone-block-groups">
                 <label class="zone-devices-label">Device groups on this zone</label>
                 <div id="edit-zone-groups-editor" class="zone-devices-editor"></div>
@@ -123,6 +122,10 @@
                 <label class="zone-presets-section-label">Add a sequence to this zone</label>
                 <div id="edit-zone-sequences-list" class="profiles-list edit-zone-presets-scroll"></div>
                 </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-zone-modal').classList.remove('active')">Close</button>
+                </div>
             </form>
         </div>
     </div>
@@ -134,6 +137,7 @@
             <div class="profiles-actions">
                 <input type="text" id="new-profile-name" placeholder="Profile name">
                 <button class="btn btn-primary" id="create-profile-btn">Create</button>
+                <button type="button" class="btn btn-secondary" id="import-profile-btn">Import</button>
             </div>
             <div class="form-group" style="margin-top: 0.5rem; margin-bottom: 0;">
                 <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0;">
@@ -183,10 +187,6 @@
             <h2>Edit device group</h2>
             <form id="edit-group-form">
                 <input type="hidden" id="edit-group-id">
-                <div class="modal-actions" style="margin-bottom: 1rem;">
-                    <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" id="edit-group-close-btn">Cancel</button>
-                </div>
                 <label for="edit-group-name">Group name</label>
                 <input type="text" id="edit-group-name" required autocomplete="off">
                 <label class="muted-text" style="display:flex;align-items:flex-start;gap:0.5rem;margin-top:0.5rem;">
@@ -227,6 +227,10 @@
                 <label for="edit-group-debug" style="margin-top:1rem;display:block;">Debug</label>
                 <small class="muted-text" style="display:block;margin-bottom:0.35rem;">Stored row and the JSON preview for <strong>Save</strong> (updates as you edit).</small>
                 <textarea id="edit-group-debug" rows="8" readonly spellcheck="false" style="width:100%;font-family:monospace;resize:vertical;"></textarea>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                    <button type="button" class="btn btn-secondary" id="edit-group-close-btn">Cancel</button>
+                </div>
             </form>
         </div>
     </div>
@@ -301,6 +305,7 @@
             <h2>Presets</h2>
             <div class="modal-actions">
                 <button class="btn btn-primary" id="preset-add-btn">Add</button>
+                <button type="button" class="btn btn-secondary" id="import-preset-btn">Import</button>
                 <button class="btn btn-danger" id="preset-clear-device-btn">Clear Device Presets</button>
             </div>
             <div id="presets-list" class="profiles-list"></div>
@@ -316,6 +321,7 @@
             <h2>Sequences</h2>
             <div class="modal-actions">
                 <button type="button" class="btn btn-primary" id="sequence-add-btn">Add</button>
+                <button type="button" class="btn btn-secondary" id="import-sequence-btn">Import</button>
                 <button type="button" class="btn btn-secondary" id="sequences-open-presets-btn">Presets</button>
             </div>
             <div id="sequences-list" class="profiles-list"></div>
@@ -344,10 +350,8 @@
                 <p id="sequence-editor-bpm-live" class="muted-text" style="font-size:0.85em;margin:0.5rem 0 0 0;">—</p>
             </div>
             <div id="sequence-editor-lanes"></div>
-            <div class="modal-actions" style="margin-top:0.75rem;">
-                <button type="button" class="btn btn-secondary btn-small" id="sequence-editor-add-lane-btn">Add lane</button>
-            </div>
             <div class="modal-actions preset-editor-modal-actions">
+                <button type="button" class="btn btn-secondary btn-small" id="sequence-editor-add-lane-btn">Add lane</button>
                 <button type="button" class="btn btn-danger" id="sequence-editor-delete-btn">Delete</button>
                 <button type="button" class="btn btn-primary" id="sequence-editor-save-btn">Save</button>
                 <button type="button" class="btn btn-secondary" id="sequence-editor-close-btn">Close</button>
@@ -401,6 +405,10 @@
                     <span class="muted-text" style="font-size: 0.85em;">beats (this app only)</span>
                 </div>
             </div>
+            <div class="preset-editor-field preset-mode-field" id="preset-mode-group" hidden>
+                <label for="preset-mode-input" id="preset-mode-label">Mode</label>
+                <select id="preset-mode-input" class="preset-mode-input"></select>
+            </div>
             <div class="n-params-grid">
                 <div class="n-param-group">
                     <label for="preset-n1-input" id="preset-n1-label">n1:</label>
@@ -789,6 +797,7 @@
     <script src="/static/help.js"></script>
     <script src="/static/led_tool.js"></script>
     <script src="/static/color_palette.js"></script>
+    <script src="/static/bundle_io.js"></script>
     <script src="/static/profiles.js"></script>
     <script src="/static/zone_palette.js"></script>
     <script src="/static/patterns.js"></script>