@onjmin/dtm 0.1.57 → 0.1.59

package/dist/index.js

@@ -5142,8 +5142,6 @@ var DAW_CSS = `
   max-height: 180px;
   overflow-y: auto;
   padding: 8px 10px 10px;
-  overflow-x: auto;
-  white-space: nowrap;
   scrollbar-width: none;
   display: flex;
   flex-direction: column;
@@ -5172,6 +5170,7 @@ var DAW_CSS = `
 .dtm-cp-bar {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 2px;
   margin-top: 2px;
 }
@@ -5540,6 +5539,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   const drumPatternDict = options.drumPatterns ?? DRUM_PATTERNS;
   const drumPattern = meta.drum ? drumPatternDict[meta.drum] ?? null : null;
   const trackVolume = meta.volume ?? options.volume ?? 100;
+  let masterVolume = options.masterVolume ?? 100;
   const drumVolume = meta.drumVolume ?? 80;
   const colors = options.trackColors ?? DEFAULT_TRACK_COLORS;
   const useSynth = options.synth ?? !options.onPlayNote;
@@ -6319,11 +6319,12 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       const em = emojiByTrack.get(trackIdx);
       if (em) jumpEmojiAt(em, e.when);
       if (lyricTracks.has(trackIdx) && !skipSinging) return;
-      options.onPlayNote?.(e);
-      if (useSynth) ensureSynth().playNote(e);
+      const volume = e.volume * (masterVolume / 100);
+      options.onPlayNote?.({ ...e, volume });
+      if (useSynth) ensureSynth().playNote({ ...e, volume });
     },
     onPlayDrum: (e) => {
-      const velocity = e.velocity * (drumVolume / 100) * (trackVolume / 100);
+      const velocity = e.velocity * (drumVolume / 100) * (trackVolume / 100) * (masterVolume / 100);
       options.onPlayDrum?.({ ...e, velocity });
       if (useSynth) ensureSynth().playDrum({ ...e, velocity });
     },
@@ -6347,6 +6348,9 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     if (activePlayer === instance) activePlayer = null;
     options.onStop?.();
   };
+  const setVolume = (volume) => {
+    masterVolume = volume;
+  };
   const buildStreamTracks = () => [...lyricTracks.entries()].map(([index, lt]) => {
     const seqTrack = seqTracks.find((t) => Number(t.id) === index);
     const sorted = [...seqTrack?.notes ?? []].sort(
@@ -6368,7 +6372,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     return {
       id: String(index),
       model: lt.model,
-      volume: vocalVolumeToGain(lt.volume ?? DEFAULT_VOCAL_VOLUME) * (trackVolume / 100),
+      volume: vocalVolumeToGain(lt.volume ?? DEFAULT_VOCAL_VOLUME) * (trackVolume / 100) * (masterVolume / 100),
       pan: panToStereo(lt.pan ?? DEFAULT_PAN),
       notes
     };
@@ -6482,6 +6486,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     play,
     stop,
     isPlaying: () => playing,
+    setVolume,
     destroy
   };
   return instance;
@@ -6874,11 +6879,13 @@ var loadDrumFont = (ctx, pitch) => {
   _drumLoading.set(pitch, p);
   return p;
 };
+var BAR_SEP = /[|lｌ→]/;
+var NON_EVENT_RE = /^[=_]$|^N\.C\.$|^N$/i;
 var buildDisplayLines = (chords, eventsCount) => {
   const rawLines = chords.split("\n").map((l) => l.trim()).filter((l) => l);
   const displayLines = [];
   let eventCounter = 0;
-  let colorIdx = -1;
+  let colorIdx = 0;
   for (const line of rawLines) {
     if (/^#/.test(line)) {
       const label = line.replace(/^#\s*/, "").trim();
@@ -6886,19 +6893,21 @@ var buildDisplayLines = (chords, eventsCount) => {
       if (/^tone\s*=/i.test(label)) continue;
       if (/^instrument\s*=/i.test(label)) continue;
       if (/^metronome/i.test(label)) continue;
-      colorIdx++;
+      if (displayLines.length > 0 || eventCounter > 0) colorIdx++;
       displayLines.push({
         type: "section",
         section: label,
-        colorIdx: Math.max(0, colorIdx)
+        colorIdx
       });
       continue;
     }
-    const segments = line.split("|");
-    if (segments.length <= 1) continue;
+    const segments = line.split(BAR_SEP);
+    if (segments.length === 0) continue;
+    const hasMultiSeg = segments.length > 1;
     const parts = [];
     for (let i = 0; i < segments.length; i++) {
-      if (i > 0) parts.push({ text: "|", isChord: false, eventIdx: -1 });
+      if (hasMultiSeg && i > 0)
+        parts.push({ text: "|", isChord: false, eventIdx: -1 });
       const bar = segments[i].trim();
       if (!bar) continue;
       const splitAt = [];
@@ -6921,7 +6930,7 @@ var buildDisplayLines = (chords, eventsCount) => {
           splitAt.push(j + 1);
           continue;
         }
-        if (/^[A-G]$/i.test(char)) {
+        if (/^[A-G]$/.test(char)) {
           const prev = bar[j - 1];
           const prev2 = bar.slice(Math.max(0, j - 2), j);
           if (prev === "/" || prev2.toLowerCase() === "on") continue;
@@ -6930,12 +6939,13 @@ var buildDisplayLines = (chords, eventsCount) => {
       }
       const uniqueSplitAt = Array.from(new Set(splitAt)).filter((idx) => idx >= 0 && idx < bar.length).sort((a, b) => a - b);
       if (uniqueSplitAt.length === 0) {
+        const isEvent = !NON_EVENT_RE.test(bar);
         parts.push({
           text: bar,
           isChord: true,
-          eventIdx: eventCounter < eventsCount ? eventCounter : -1
+          eventIdx: isEvent && eventCounter < eventsCount ? eventCounter : -1
         });
-        eventCounter++;
+        if (isEvent) eventCounter++;
         continue;
       }
       for (let ci = 0; ci < uniqueSplitAt.length; ci++) {
@@ -6944,19 +6954,20 @@ var buildDisplayLines = (chords, eventsCount) => {
         const end = ci < uniqueSplitAt.length - 1 ? uniqueSplitAt[ci + 1] : bar.length;
         const symbol = bar.slice(start, end).trim();
         if (symbol) {
+          const isEvent = !NON_EVENT_RE.test(symbol);
           parts.push({
             text: symbol,
             isChord: true,
-            eventIdx: eventCounter < eventsCount ? eventCounter : -1
+            eventIdx: isEvent && eventCounter < eventsCount ? eventCounter : -1
           });
-          eventCounter++;
+          if (isEvent) eventCounter++;
         }
       }
     }
     if (parts.length > 0) {
       displayLines.push({
         type: "bar",
-        colorIdx: Math.max(0, colorIdx),
+        colorIdx,
         parts
       });
     }
@@ -6970,6 +6981,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
   let activeIndex = -1;
   let activePlayback = null;
   let isPlaying = false;
+  let masterVolume = options.volume ?? 80;
   let isLoading = false;
   let loadAbortId = 0;
   let loopEnabled = false;
@@ -7329,7 +7341,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
         container2.innerHTML = "";
         modalSamplePlayer = mountChordPlayer(container2, sampleChords, {
           audioContext: options.audioContext ?? ownCtx ?? void 0,
-          volume: options.volume ?? 100,
+          volume: masterVolume,
           bpm: options.bpm ?? 120,
           studio: options.studio,
           // 再帰的なモーダル生成を防ぐ。
@@ -7670,7 +7682,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
   };
   const playInternal = (startIdx, ctx, cutGain) => {
     const C32 = 48;
-    const volume = options.volume ?? 80;
+    const volume = masterVolume;
     const placements = [];
     for (const event of chordEvents) {
       if (event.when < playOffsetSec) continue;
@@ -7827,6 +7839,10 @@ var mountChordPlayer = (target, chords, options = {}) => {
       }
     }
   };
+  const setVolume = (volume) => {
+    masterVolume = Math.max(0, Math.min(100, volume));
+    activePlayback?.setVolume(masterVolume);
+  };
   const destroy = () => {
     stop();
     closeInfoModal();
@@ -7956,6 +7972,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
     element: container,
     play,
     stop,
+    setVolume,
     destroy,
     toggleMetronome,
     isPlaying: () => isPlaying
@@ -8890,6 +8907,18 @@ var MidiSearchClient = class {
     if (!res.ok) throw new Error(`picotune fetch failed: ${res.status}`);
     return res.arrayBuffer();
   }
+  async searchRechord(word) {
+    if (!this.enabled) return [];
+    const qs = new URLSearchParams();
+    qs.set("word", word);
+    qs.set("guest", "true");
+    const url2 = `${this.baseUrl}/rechord/scores?${qs.toString()}`;
+    const res = await fetch(url2, { headers: this.headers() });
+    if (!res.ok) throw new Error(`rechord search failed: ${res.status}`);
+    const body = await res.json();
+    const list = body.result ?? body.data ?? body;
+    return Array.isArray(list) ? list : [];
+  }
 };
 
 // src/linked-list.ts
@@ -9977,6 +10006,10 @@ var mountDAW = (target, options = {}) => {
     showChord,
     showMidiSearch
   });
+  refs.masterVolume.value = String(options.masterVolume ?? 50);
+  refs.masterVolumeLabel.textContent = `${options.masterVolume ?? 50}%`;
+  refs.drumVolume.value = String(options.drumVolume ?? 80);
+  refs.drumVolumeLabel.textContent = `${options.drumVolume ?? 80}%`;
   const renderConfig = {
     stepsPerBar: 192,
     keyCount: 128,
@@ -9988,8 +10021,8 @@ var mountDAW = (target, options = {}) => {
   let zoomX = 100;
   let zoomY = 100;
   let bpm = options.defaultBpm ?? DEFAULT_BPM;
-  let masterVolume = 50;
-  let drumVolume = 80;
+  let masterVolume = options.masterVolume ?? 50;
+  let drumVolume = options.drumVolume ?? 80;
   let currentDrumPattern = refs.drumSelect.value;
   let currentInstrument = "";
   let activeTrackId = options.initialActiveTrack ?? trackConfigs[0].id;
@@ -11314,6 +11347,7 @@ var mountDAW = (target, options = {}) => {
           <div style="display: inline-flex; align-items: center; gap: 6px;">
             <span class="dtm-label">\u548C\u97F3</span>
             <button class="dtm-infobtn" data-dtm="chord-info" title="\u30B3\u30FC\u30C9\u9032\u884C\u306E\u66F8\u304D\u65B9\u89E3\u8AAC">${icon("info", 12)}</button>
+            ${showMidiSearch ? `<button class="dtm-btn dtm-btn--ghost" data-dtm="chord-search" title="\u30B3\u30FC\u30C9\u9032\u884C\u691C\u7D22" style="min-height: 24px; min-width: auto; height: 24px; padding: 0 6px; font-size: 11px; display: inline-flex; align-items: center;">\u30B3\u30FC\u30C9\u691C\u7D22</button>` : ""}
           </div>
           <select class="dtm-select" data-dtm="chord-pattern">
             <option value="block">\u30D6\u30ED\u30C3\u30AF</option>
@@ -11349,6 +11383,14 @@ var mountDAW = (target, options = {}) => {
         save();
         applyChord();
       });
+      const searchChordBtn = div.querySelector(
+        '[data-dtm="chord-search"]'
+      );
+      if (searchChordBtn) {
+        searchChordBtn.addEventListener("click", () => {
+          openChordSearchModal(input);
+        });
+      }
     }
   };
   const switchTrack = (id) => {
@@ -12212,6 +12254,8 @@ var mountDAW = (target, options = {}) => {
       searchPreviewBtn = null;
     }
   };
+  let mmlSearchCache = null;
+  let chordSearchCache = null;
   const wireMidiSearch = () => {
     if (!midiSearchClient) return;
     refs.midiSearchOpenBtn.addEventListener("click", () => {
@@ -12222,6 +12266,7 @@ var mountDAW = (target, options = {}) => {
 					<input type="text" class="dtm-input dtm-grow" data-dtm="modal-midi-search-input" placeholder="\u66F2\u540D\u3067MML\u691C\u7D22" style="min-width:0">
 					<button class="dtm-btn dtm-btn--primary" data-dtm="modal-midi-search-btn" style="flex-shrink:0">\u691C\u7D22</button>
 				</div>
+				<div data-dtm="modal-midi-search-status" style="font-size:11px;color:rgba(255,255,255,0.5);min-height:1.4em"></div>
 				<div class="dtm-row" data-dtm="modal-midi-search-results" style="flex-direction:column;align-items:stretch;gap:4px"></div>
 				`
       );
@@ -12231,9 +12276,17 @@ var mountDAW = (target, options = {}) => {
       const searchBtn = refs.modalBody.querySelector(
         '[data-dtm="modal-midi-search-btn"]'
       );
+      const statusEl = refs.modalBody.querySelector(
+        '[data-dtm="modal-midi-search-status"]'
+      );
       const results = refs.modalBody.querySelector(
         '[data-dtm="modal-midi-search-results"]'
       );
+      if (mmlSearchCache) {
+        input.value = mmlSearchCache.query;
+        statusEl.textContent = `\u300C${mmlSearchCache.query}\u300D\u306E\u691C\u7D22\u7D50\u679C\u3000${mmlSearchCache.count}\u4EF6\u306E\u30D2\u30C3\u30C8`;
+        mmlSearchCache.renderResults(results);
+      }
       const runSearch = async () => {
         const q2 = input.value.trim();
         if (!q2) return;
@@ -12241,37 +12294,85 @@ var mountDAW = (target, options = {}) => {
         searchBtn.disabled = true;
         searchBtn.textContent = "\u691C\u7D22\u4E2D...";
         results.innerHTML = "";
+        statusEl.textContent = "";
         try {
           const songs = await midiSearchClient.searchSongs({ title: q2 });
           if (songs.length === 0) {
+            statusEl.textContent = `\u300C${q2}\u300D\u306E\u691C\u7D22\u7D50\u679C\u30000\u4EF6\u306E\u30D2\u30C3\u30C8`;
             results.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F</span>';
+            mmlSearchCache = {
+              query: q2,
+              count: 0,
+              renderResults: (c) => {
+                c.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F</span>';
+              }
+            };
             return;
           }
-          for (const song of songs) {
-            const box = document.createElement("div");
-            box.className = "dtm-modal-sample-box";
-            const row = document.createElement("div");
-            row.className = "dtm-row";
-            row.style.cssText = "flex-wrap:nowrap;gap:4px;padding:2px 0";
-            const label = document.createElement("span");
-            label.className = "dtm-label";
-            label.style.cssText = "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
-            label.textContent = `${song.title} - ${song.user}`;
-            const previewBtn = document.createElement("button");
-            previewBtn.className = "dtm-btn dtm-btn--ghost";
-            previewBtn.style.cssText = "flex-shrink:0";
-            previewBtn.textContent = "\u25B6 \u8A66\u8074";
-            const loadBtn = document.createElement("button");
-            loadBtn.className = "dtm-btn dtm-btn--primary";
-            loadBtn.style.cssText = "flex-shrink:0";
-            loadBtn.textContent = "\u8AAD\u307F\u8FBC\u307F";
-            const playerContainer = document.createElement("div");
-            playerContainer.className = "dtm-modal-sample-player-container";
-            previewBtn.addEventListener("click", async () => {
-              if (searchPreviewBtn === previewBtn) {
-                if (searchPreviewPlayer?.isPlaying()) {
-                  searchPreviewPlayer.stop();
+          statusEl.textContent = `\u300C${q2}\u300D\u306E\u691C\u7D22\u7D50\u679C\u3000${songs.length}\u4EF6\u306E\u30D2\u30C3\u30C8`;
+          const renderMmlResults = (container) => {
+            container.innerHTML = "";
+            for (const song of songs) {
+              const box = document.createElement("div");
+              box.className = "dtm-modal-sample-box";
+              const row = document.createElement("div");
+              row.className = "dtm-row";
+              row.style.cssText = "flex-wrap:nowrap;gap:4px;padding:2px 0";
+              const label = document.createElement("span");
+              label.className = "dtm-label";
+              label.style.cssText = "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+              label.textContent = `${song.title} - ${song.user}`;
+              const previewBtn = document.createElement("button");
+              previewBtn.className = "dtm-btn dtm-btn--ghost";
+              previewBtn.style.cssText = "flex-shrink:0";
+              previewBtn.textContent = "\u25B6 \u8A66\u8074";
+              const loadBtn = document.createElement("button");
+              loadBtn.className = "dtm-btn dtm-btn--primary";
+              loadBtn.style.cssText = "flex-shrink:0";
+              loadBtn.textContent = "\u8AAD\u307F\u8FBC\u307F";
+              const playerContainer = document.createElement("div");
+              playerContainer.className = "dtm-modal-sample-player-container";
+              previewBtn.addEventListener("click", async () => {
+                if (searchPreviewBtn === previewBtn) {
+                  if (searchPreviewPlayer?.isPlaying()) {
+                    searchPreviewPlayer.stop();
+                  } else {
+                    stop();
+                    previewBtn.textContent = "\u8AAD\u8FBC\u4E2D...";
+                    try {
+                      const midi = await fetchVerifiedMidi(song.file);
+                      const mml = buildPreviewMml(midi);
+                      playerContainer.innerHTML = "";
+                      const player = mountMmlPlayer(playerContainer, mml, {
+                        onPlayNote: options.onPlayNote,
+                        onPlayDrum: options.onPlayDrum,
+                        onResumeAudio: options.onResumeAudio,
+                        getAudioTime: options.getAudioTime,
+                        singingVoices: options.singingVoices,
+                        drumPatterns: options.drumPatterns,
+                        volume: masterVolume,
+                        _skipInfoModals: true,
+                        onStop: () => {
+                          if (searchPreviewBtn === previewBtn) {
+                            previewBtn.textContent = "\u25B6 \u8A66\u8074";
+                            previewBtn.classList.remove("dtm-btn--danger");
+                            previewBtn.classList.add("dtm-btn--ghost");
+                          }
+                        }
+                      });
+                      searchPreviewPlayer = player;
+                      searchPreviewBtn = previewBtn;
+                      player.play();
+                      previewBtn.textContent = "\u25A0 \u505C\u6B62";
+                      previewBtn.classList.remove("dtm-btn--ghost");
+                      previewBtn.classList.add("dtm-btn--danger");
+                    } catch (e) {
+                      console.error("[dtm] MIDI preview failed", e);
+                      previewBtn.textContent = "\u5931\u6557";
+                    }
+                  }
                 } else {
+                  collapseSearchPreview();
                   stop();
                   previewBtn.textContent = "\u8AAD\u8FBC\u4E2D...";
                   try {
@@ -12306,31 +12407,169 @@ var mountDAW = (target, options = {}) => {
                     previewBtn.textContent = "\u5931\u6557";
                   }
                 }
+              });
+              loadBtn.addEventListener("click", async () => {
+                loadBtn.disabled = true;
+                loadBtn.textContent = "\u8AAD\u8FBC\u4E2D...";
+                try {
+                  const pending = await fetchVerifiedMidi(song.file);
+                  const analysis = analyzeMidiTracks(pending);
+                  const sel = analysis.filter((a) => a.selected).map((a) => a.index);
+                  collapseSearchPreview();
+                  overlayDuring(() => applyMidiSelection(pending, sel));
+                  refs.modalOverlay.setAttribute("hidden", "");
+                } catch (e) {
+                  console.error("[dtm] MIDI fetch failed", e);
+                  loadBtn.textContent = "\u5931\u6557";
+                } finally {
+                  loadBtn.disabled = false;
+                }
+              });
+              row.appendChild(label);
+              row.appendChild(previewBtn);
+              row.appendChild(loadBtn);
+              box.appendChild(row);
+              box.appendChild(playerContainer);
+              container.appendChild(box);
+            }
+          };
+          renderMmlResults(results);
+          mmlSearchCache = {
+            query: q2,
+            count: songs.length,
+            renderResults: renderMmlResults
+          };
+        } catch (e) {
+          console.error("[dtm] MIDI search failed", e);
+          results.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u691C\u7D22\u306B\u5931\u6557\u3057\u307E\u3057\u305F</span>';
+        } finally {
+          searchBtn.disabled = false;
+          searchBtn.textContent = "\u691C\u7D22";
+        }
+      };
+      searchBtn.addEventListener("click", () => void runSearch());
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") void runSearch();
+      });
+      input.focus();
+    });
+  };
+  const openChordSearchModal = (chordTextArea) => {
+    if (!midiSearchClient) return;
+    const active = trackStates.find((t) => t.config.id === activeTrackId);
+    if (!active) return;
+    showModal(
+      "\u30B3\u30FC\u30C9\u9032\u884C\u691C\u7D22",
+      `
+			<div class="dtm-row" style="flex-wrap:nowrap">
+				<input type="text" class="dtm-input dtm-grow" data-dtm="modal-chord-search-input" placeholder="\u66F2\u540D\u3084\u30B3\u30FC\u30C9\u9032\u884C\u3067\u691C\u7D22" style="min-width:0">
+				<button class="dtm-btn dtm-btn--primary" data-dtm="modal-chord-search-btn" style="flex-shrink:0">\u691C\u7D22</button>
+			</div>
+			<div data-dtm="modal-chord-search-status" style="font-size:11px;color:rgba(255,255,255,0.5);min-height:1.4em"></div>
+			<div class="dtm-row" data-dtm="modal-chord-search-results" style="flex-direction:column;align-items:stretch;gap:4px"></div>
+			`
+    );
+    const input = refs.modalBody.querySelector(
+      '[data-dtm="modal-chord-search-input"]'
+    );
+    const searchBtn = refs.modalBody.querySelector(
+      '[data-dtm="modal-chord-search-btn"]'
+    );
+    const statusEl = refs.modalBody.querySelector(
+      '[data-dtm="modal-chord-search-status"]'
+    );
+    const results = refs.modalBody.querySelector(
+      '[data-dtm="modal-chord-search-results"]'
+    );
+    if (chordSearchCache) {
+      input.value = chordSearchCache.query;
+      statusEl.textContent = `\u300C${chordSearchCache.query}\u300D\u306E\u691C\u7D22\u7D50\u679C\u3000${chordSearchCache.count}\u4EF6\u306E\u30D2\u30C3\u30C8`;
+      chordSearchCache.renderResults(results);
+    }
+    const runSearch = async () => {
+      const q2 = input.value.trim();
+      if (!q2) return;
+      collapseSearchPreview();
+      searchBtn.disabled = true;
+      searchBtn.textContent = "\u691C\u7D22\u4E2D...";
+      results.innerHTML = "";
+      statusEl.textContent = "";
+      try {
+        const scores = await midiSearchClient.searchRechord(q2);
+        if (scores.length === 0) {
+          statusEl.textContent = `\u300C${q2}\u300D\u306E\u691C\u7D22\u7D50\u679C\u30000\u4EF6\u306E\u30D2\u30C3\u30C8`;
+          results.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F</span>';
+          chordSearchCache = {
+            query: q2,
+            count: 0,
+            renderResults: (c) => {
+              c.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F</span>';
+            }
+          };
+          return;
+        }
+        statusEl.textContent = `\u300C${q2}\u300D\u306E\u691C\u7D22\u7D50\u679C\u3000${scores.length}\u4EF6\u306E\u30D2\u30C3\u30C8`;
+        const renderChordResults = (container) => {
+          container.innerHTML = "";
+          for (const score of scores) {
+            const box = document.createElement("div");
+            box.className = "dtm-modal-sample-box";
+            const row = document.createElement("div");
+            row.className = "dtm-row";
+            row.style.cssText = "flex-wrap:nowrap;gap:4px;padding:2px 0";
+            const label = document.createElement("span");
+            label.className = "dtm-label";
+            label.style.cssText = "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+            label.textContent = `${score.title}${score.user?.screen_name ? ` - ${score.user.screen_name}` : ""}`;
+            const previewBtn = document.createElement("button");
+            previewBtn.className = "dtm-btn dtm-btn--ghost";
+            previewBtn.style.cssText = "flex-shrink:0";
+            previewBtn.textContent = "\u25B6 \u8A66\u8074";
+            const loadBtn = document.createElement("button");
+            loadBtn.className = "dtm-btn dtm-btn--primary";
+            loadBtn.style.cssText = "flex-shrink:0";
+            loadBtn.textContent = "\u8AAD\u307F\u8FBC\u307F";
+            const playerContainer = document.createElement("div");
+            playerContainer.className = "dtm-modal-sample-player-container";
+            previewBtn.addEventListener("click", async () => {
+              if (searchPreviewBtn === previewBtn) {
+                if (searchPreviewPlayer?.isPlaying()) {
+                  searchPreviewPlayer.stop();
+                } else {
+                  stop();
+                  previewBtn.textContent = "\u518D\u751F\u4E2D...";
+                  try {
+                    searchPreviewPlayer?.play();
+                    previewBtn.textContent = "\u25A0 \u505C\u6B62";
+                    previewBtn.classList.remove("dtm-btn--ghost");
+                    previewBtn.classList.add("dtm-btn--danger");
+                  } catch (e) {
+                    console.error("[dtm] Chord preview play failed", e);
+                    previewBtn.textContent = "\u5931\u6557";
+                  }
+                }
               } else {
                 collapseSearchPreview();
                 stop();
                 previewBtn.textContent = "\u8AAD\u8FBC\u4E2D...";
                 try {
-                  const midi = await fetchVerifiedMidi(song.file);
-                  const mml = buildPreviewMml(midi);
                   playerContainer.innerHTML = "";
-                  const player = mountMmlPlayer(playerContainer, mml, {
-                    onPlayNote: options.onPlayNote,
-                    onPlayDrum: options.onPlayDrum,
-                    onResumeAudio: options.onResumeAudio,
-                    getAudioTime: options.getAudioTime,
-                    singingVoices: options.singingVoices,
-                    drumPatterns: options.drumPatterns,
-                    volume: masterVolume,
-                    _skipInfoModals: true,
-                    onStop: () => {
-                      if (searchPreviewBtn === previewBtn) {
-                        previewBtn.textContent = "\u25B6 \u8A66\u8074";
-                        previewBtn.classList.remove("dtm-btn--danger");
-                        previewBtn.classList.add("dtm-btn--ghost");
+                  const player = mountChordPlayer(
+                    playerContainer,
+                    score.content,
+                    {
+                      volume: masterVolume,
+                      bpm: score.bpm ?? bpm ?? 120,
+                      _skipInfoModals: true,
+                      onStop: () => {
+                        if (searchPreviewBtn === previewBtn) {
+                          previewBtn.textContent = "\u25B6 \u8A66\u8074";
+                          previewBtn.classList.remove("dtm-btn--danger");
+                          previewBtn.classList.add("dtm-btn--ghost");
+                        }
                       }
                     }
-                  });
+                  );
                   searchPreviewPlayer = player;
                   searchPreviewBtn = previewBtn;
                   player.play();
@@ -12338,49 +12577,48 @@ var mountDAW = (target, options = {}) => {
                   previewBtn.classList.remove("dtm-btn--ghost");
                   previewBtn.classList.add("dtm-btn--danger");
                 } catch (e) {
-                  console.error("[dtm] MIDI preview failed", e);
+                  console.error("[dtm] Chord preview mount failed", e);
                   previewBtn.textContent = "\u5931\u6557";
                 }
               }
             });
-            loadBtn.addEventListener("click", async () => {
-              loadBtn.disabled = true;
-              loadBtn.textContent = "\u8AAD\u8FBC\u4E2D...";
-              try {
-                const pending = await fetchVerifiedMidi(song.file);
-                const analysis = analyzeMidiTracks(pending);
-                const sel = analysis.filter((a) => a.selected).map((a) => a.index);
-                collapseSearchPreview();
-                overlayDuring(() => applyMidiSelection(pending, sel));
-                refs.modalOverlay.setAttribute("hidden", "");
-              } catch (e) {
-                console.error("[dtm] MIDI fetch failed", e);
-                loadBtn.textContent = "\u5931\u6557";
-              } finally {
-                loadBtn.disabled = false;
+            loadBtn.addEventListener("click", () => {
+              collapseSearchPreview();
+              chordTextArea.value = score.content;
+              active.savedChordInput = score.content;
+              if (score.bpm) {
+                setBpm(score.bpm);
               }
+              applyChord();
+              refs.modalOverlay.setAttribute("hidden", "");
             });
             row.appendChild(label);
             row.appendChild(previewBtn);
             row.appendChild(loadBtn);
             box.appendChild(row);
             box.appendChild(playerContainer);
-            results.appendChild(box);
+            container.appendChild(box);
           }
-        } catch (e) {
-          console.error("[dtm] MIDI search failed", e);
-          results.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u691C\u7D22\u306B\u5931\u6557\u3057\u307E\u3057\u305F</span>';
-        } finally {
-          searchBtn.disabled = false;
-          searchBtn.textContent = "\u691C\u7D22";
-        }
-      };
-      searchBtn.addEventListener("click", () => void runSearch());
-      input.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") void runSearch();
-      });
-      input.focus();
+        };
+        renderChordResults(results);
+        chordSearchCache = {
+          query: q2,
+          count: scores.length,
+          renderResults: renderChordResults
+        };
+      } catch (e) {
+        console.error("[dtm] Chord search failed", e);
+        results.innerHTML = '<span class="dtm-label" style="color:var(--dtm-warn)">\u691C\u7D22\u306B\u5931\u6557\u3057\u307E\u3057\u305F</span>';
+      } finally {
+        searchBtn.disabled = false;
+        searchBtn.textContent = "\u691C\u7D22";
+      }
+    };
+    searchBtn.addEventListener("click", () => void runSearch());
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") void runSearch();
     });
+    input.focus();
   };
   const onKeyDown = (e) => {
     if (!(e.ctrlKey || e.metaKey)) return;
@@ -12542,6 +12780,21 @@ var mountDAW = (target, options = {}) => {
     getCurrentPlayStep,
     forcePauseAt,
     setLoading,
+    setMasterVolume: (volume) => {
+      masterVolume = clamp3(volume, 0, 100);
+      refs.masterVolume.value = String(masterVolume);
+      refs.masterVolumeLabel.textContent = `${masterVolume}%`;
+    },
+    setVolume: (volume) => {
+      masterVolume = clamp3(volume, 0, 100);
+      refs.masterVolume.value = String(masterVolume);
+      refs.masterVolumeLabel.textContent = `${masterVolume}%`;
+    },
+    setDrumVolume: (volume) => {
+      drumVolume = clamp3(volume, 0, 100);
+      refs.drumVolume.value = String(drumVolume);
+      refs.drumVolumeLabel.textContent = `${drumVolume}%`;
+    },
     applyPatch: (trackId, added, removed) => {
       const track = trackStates.find((t) => t.config.id === trackId);
       if (!track) return;