@onjmin/dtm 0.1.51 → 0.1.55

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   MAX_VOCAL_VOLUME: () => MAX_VOCAL_VOLUME,
   MMLCore: () => MMLCore,
   MML_END_MARKER: () => MML_END_MARKER,
+  MidiSearchClient: () => MidiSearchClient,
   PITCH_MAP: () => PITCH_MAP,
   PREWARM_NOTES: () => PREWARM_NOTES,
   TRACKS_ADVANCED: () => TRACKS_ADVANCED,
@@ -90,6 +91,7 @@ __export(index_exports, {
   init: () => init,
   injectStyles: () => injectStyles,
   isChordHeavyTrack: () => isChordHeavyTrack,
+  isPlausibleMidiTranscription: () => isPlausibleMidiTranscription,
   isValidHttpUrl: () => isValidHttpUrl,
   koeUrl: () => koeUrl,
   mountDAW: () => mountDAW,
@@ -103,6 +105,7 @@ __export(index_exports, {
   parseMmlMeta: () => parseMmlMeta,
   playMML: () => playMML,
   playSingingMML: () => playSingingMML,
+  setBackgroundActive: () => setBackgroundActive,
   setDrawOffset: () => setDrawOffset,
   shiftNotes: () => shiftNotes,
   showLoadingOverlay: () => showLoadingOverlay,
@@ -1330,7 +1333,13 @@ var icon = (name, size = 20) => {
 // src/daw-ui.ts
 var q = (root, sel) => root.querySelector(sel);
 var buildUI = (target, options) => {
-  const { drumPatternNames, defaultDrumPattern, defaultBpm, showMidi } = options;
+  const {
+    drumPatternNames,
+    defaultDrumPattern,
+    defaultBpm,
+    showMidi,
+    showMidiSearch
+  } = options;
   const drumOptions = [`<option value="none">\u306A\u3057</option>`].concat(
     drumPatternNames.map(
       (name) => `<option value="${name}" ${name === defaultDrumPattern ? "selected" : ""}>${name}</option>`
@@ -1408,6 +1417,16 @@ var buildUI = (target, options) => {
         <span class="dtm-label" data-dtm="zoomy-label">100%</span>
         <button class="dtm-iconbtn" data-dtm="zoomy-in" title="\u62E1\u5927">\uFF0B</button>
       </div>
+      <div class="dtm-row">
+        <span class="dtm-label">\u80CC\u666F\u753B\u50CF</span>
+        <input type="file" accept="image/*" data-dtm="bg-file-input" class="dtm-hidden">
+        <button class="dtm-btn dtm-btn--primary" data-dtm="bg-upload">\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9</button>
+        <button class="dtm-btn dtm-btn--danger dtm-hidden" data-dtm="bg-remove">\u524A\u9664</button>
+      </div>
+      <div class="dtm-row dtm-hidden" data-dtm="bg-opacity-row">
+        <span class="dtm-label">\u80CC\u666F\u4E0D\u900F\u660E\u5EA6</span>
+        <input type="range" min="0" max="100" value="40" data-dtm="bg-opacity" class="dtm-slider">
+      </div>
     </div>
   </details>
 
@@ -1446,6 +1465,9 @@ var buildUI = (target, options) => {
         <textarea class="dtm-textarea dtm-grow" data-dtm="mml-input" placeholder="MML\u3092\u5165\u529B"></textarea>
         <button class="dtm-btn dtm-btn--primary" data-dtm="mml-load" style="flex-shrink:0">\u8AAD\u8FBC</button>
       </div>
+      <div class="dtm-row" data-dtm="midi-search-row" style="justify-content:flex-end;${showMidiSearch ? "" : "display:none"}">
+        <button class="dtm-btn dtm-btn--primary" data-dtm="midi-search-open">MML\u691C\u7D22</button>
+      </div>
       <p class="dtm-load-note dtm-hidden" data-dtm="mml-load-note"></p>
     </div>
   </details>
@@ -1556,6 +1578,11 @@ var buildUI = (target, options) => {
     zoomXOut: sel("zoomx-out"),
     zoomYIn: sel("zoomy-in"),
     zoomYOut: sel("zoomy-out"),
+    bgFileInput: sel("bg-file-input"),
+    bgUploadBtn: sel("bg-upload"),
+    bgRemoveBtn: sel("bg-remove"),
+    bgOpacityInput: sel("bg-opacity"),
+    bgOpacityRow: sel("bg-opacity-row"),
     rollContainer: sel("roll"),
     wrapper: sel("wrapper"),
     vScroll: sel("vscroll"),
@@ -1574,6 +1601,7 @@ var buildUI = (target, options) => {
     midiInfoBtn: sel("midi-info"),
     midiTrackSelection: sel("midi-track-selection"),
     midiPanel: sel("midi-panel"),
+    midiSearchOpenBtn: sel("midi-search-open"),
     mmlInput: sel("mml-input"),
     mmlLoadBtn: sel("mml-load"),
     mmlLoadNote: sel("mml-load-note"),
@@ -2619,7 +2647,8 @@ var KOE_VOICEBANKS = {
   shiyo: "\u9769\u547D\u30B7\u30E8.koe",
   rei: "\u8DB3\u7ACB\u30EC\u30A4ver3.5.0.koe",
   mgroid: "MGRoid_\u539F\u97F3\u8A2D\u5B9A\u6E08\u307F.koe",
-  motroid: "MOTRoid\u5B8C\u5168\u7248V2.koe"
+  motroid: "MOTRoid\u5B8C\u5168\u7248V2.koe",
+  nynroid: "NYNRoidver1.4.koe"
 };
 var KOE_VOICEBANK_LABELS = {
   tsukuyomi: "\u3064\u304F\u3088\u307F\u3061\u3083\u3093",
@@ -2631,7 +2660,8 @@ var KOE_VOICEBANK_LABELS = {
   shiyo: "\u9769\u547D\u30B7\u30E8",
   rei: "\u8DB3\u7ACB\u30EC\u30A4",
   mgroid: "MGRoid",
-  motroid: "MOTRoid"
+  motroid: "MOTRoid",
+  nynroid: "NYNRoid"
 };
 var VOICE_IMAGE_KEY = {
   klatt: "puyuyu",
@@ -2644,7 +2674,8 @@ var VOICE_IMAGE_KEY = {
   shiyo: "shiyo",
   rei: "rei",
   mgroid: "MGRoid",
-  motroid: "MOTRoid"
+  motroid: "MOTRoid",
+  nynroid: "NYNRoid"
 };
 var KOE_VOICEBANK_TERMS = {
   tsukuyomi: "https://tyc.rei-yumesaki.net/material/utau/terms/",
@@ -2656,7 +2687,8 @@ var KOE_VOICEBANK_TERMS = {
   shiyo: "https://kakumeisiyo.my.canva.site/dagkuyjwycs",
   rei: "https://mechanicalgirl.jp/guidelines/",
   mgroid: "https://x.com/nisusansu/status/1048825378188353536",
-  motroid: "https://www.nicovideo.jp/watch/sm40031282"
+  motroid: "https://www.nicovideo.jp/watch/sm40031282",
+  nynroid: "https://www.bilibili.com/video/BV1V24y1a7qs"
 };
 var koeUrl = (name, base = KOE_BASE_URL) => `${base}/${encodeURIComponent(name)}`;
 var DEFAULT_WORLDLINE_SCRIPT = "https://onjmin.github.io/koe/demo/world/worldline.js";
@@ -3480,6 +3512,19 @@ var extractMidiPlacements = (midi, selectedTrackIndices) => {
   }
   return { placements, bpm };
 };
+var isPlausibleMidiTranscription = (midi, selectedIndices) => {
+  const { placements } = extractMidiPlacements(midi, selectedIndices);
+  if (placements.length < 4) return false;
+  const shortCount = placements.filter((p) => p.durationSteps <= 1).length;
+  const shortRatio = shortCount / placements.length;
+  const countByStep = /* @__PURE__ */ new Map();
+  for (const p of placements) {
+    countByStep.set(p.startStep, (countByStep.get(p.startStep) ?? 0) + 1);
+  }
+  const denseSteps = [...countByStep.values()].filter((n) => n >= 6).length;
+  const denseRatio = denseSteps / countByStep.size;
+  return shortRatio < 0.6 && denseRatio < 0.35;
+};
 var extractMidiPlacementsByTrack = (midi, selectedIndices, trackIds) => {
   const { tracks, division } = midi;
   const ticksPerBeat = division;
@@ -3632,6 +3677,45 @@ var exportMIDI = (options) => {
   return new Blob([new Uint8Array(arr).buffer], { type: "audio/midi" });
 };
 
+// src/midi-search.ts
+var MidiSearchClient = class {
+  config;
+  constructor(config = {}) {
+    this.config = config;
+  }
+  get enabled() {
+    return !!this.config.apiKey;
+  }
+  get baseUrl() {
+    return this.config.baseUrl ?? "https://rpgen-search.pages.dev/api";
+  }
+  headers() {
+    const h = {};
+    if (this.config.apiKey) {
+      h.Authorization = `Bearer ${this.config.apiKey}`;
+    }
+    return h;
+  }
+  async searchSongs(params) {
+    if (!this.enabled) return [];
+    const qs = new URLSearchParams();
+    if (params.title) qs.set("title", params.title);
+    if (params.user) qs.set("user", params.user);
+    if (params.twitter_id) qs.set("twitter_id", params.twitter_id);
+    const url2 = `${this.baseUrl}/picotune/songs${qs.toString() ? `?${qs.toString()}` : ""}`;
+    const res = await fetch(url2, { headers: this.headers() });
+    if (!res.ok) throw new Error(`picotune search failed: ${res.status}`);
+    const body = await res.json();
+    return body.data ?? body.songs ?? body;
+  }
+  async fetchMidi(fileName) {
+    const url2 = `${this.baseUrl}/picotune/songs/${encodeURIComponent(fileName)}`;
+    const res = await fetch(url2, { headers: this.headers() });
+    if (!res.ok) throw new Error(`picotune fetch failed: ${res.status}`);
+    return res.arrayBuffer();
+  }
+};
+
 // src/linked-list.ts
 var LinkedList = class {
   #cursor;
@@ -3697,6 +3781,10 @@ var HEADER_HEIGHT = 20;
 var getRenderConfig = () => g_config;
 var g_draw_offset_x = 0;
 var g_draw_offset_y = 0;
+var g_bg_active = false;
+var setBackgroundActive = (active) => {
+  g_bg_active = active;
+};
 var getDrawOffset = () => ({
   x: g_draw_offset_x,
   y: g_draw_offset_y
@@ -3846,7 +3934,7 @@ var drawHeader = () => {
   const { stepWidth, stepsPerBar } = g_config;
   g_header_ctx.save();
   g_header_ctx.translate(-g_draw_offset_x, 0);
-  g_header_ctx.fillStyle = "#0a0f1f";
+  g_header_ctx.fillStyle = g_bg_active ? "rgba(10,15,31,0.55)" : "#0a0f1f";
   g_header_ctx.fillRect(
     g_draw_offset_x,
     0,
@@ -3892,7 +3980,7 @@ var drawGrid = (noteLengthSteps = 1) => {
     const octave = Math.floor(totalPitch / 12) - 1;
     const isC4Range = octave === 4;
     const screenY = y - g_draw_offset_y;
-    g_grid_ctx.fillStyle = isBlackKey ? "#080b16" : "#111628";
+    g_grid_ctx.fillStyle = g_bg_active ? isBlackKey ? "rgba(8,11,22,0.55)" : "rgba(17,22,40,0.45)" : isBlackKey ? "#080b16" : "#111628";
     g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
     if (isC4Range) {
       g_grid_ctx.fillStyle = "rgba(41,173,255,0.05)";
@@ -4597,6 +4685,7 @@ var parseMML = (mml, options = {}) => {
       tokenTracks: collectTokens ? tokenTracks : void 0,
       lyrics: collectLyrics ? /* @__PURE__ */ new Map() : void 0,
       mergedTrackCount: 0,
+      trackVelocity: /* @__PURE__ */ new Map(),
       meta: {}
     };
   }
@@ -4616,6 +4705,7 @@ var parseMML = (mml, options = {}) => {
   let baseLength = 16;
   let velocity = 100;
   const contributors = /* @__PURE__ */ new Map();
+  const trackVelocity = /* @__PURE__ */ new Map();
   const recordContributor = () => {
     let set = contributors.get(trackIndex);
     if (!set) {
@@ -4716,6 +4806,7 @@ var parseMML = (mml, options = {}) => {
           }
         } else if (ch === "v" && numStr) {
           velocity = clamp2(Number.parseInt(numStr, 10), 0, 127);
+          trackVelocity.set(trackIndex, velocity);
         }
         pushTok("ctrl", currentStep, 0, tokStart);
       } else if (ch === "[") {
@@ -4805,6 +4896,7 @@ var parseMML = (mml, options = {}) => {
     tokenTracks: collectTokens ? tokenTracks : void 0,
     lyrics,
     mergedTrackCount,
+    trackVelocity,
     meta
   };
 };
@@ -5464,6 +5556,18 @@ var DAW_CSS = `
     4px 4px 0 var(--c-black);
   overflow: hidden;
 }
+/* \u30AB\u30B9\u30BF\u30E0\u80CC\u666F\u753B\u50CF\u30EC\u30A4\u30E4\u30FC\uFF08\u753B\u50CF\u81EA\u4F53\u3092\u534A\u900F\u660E\u5316\u3057\u3001\u30AD\u30E3\u30F3\u30D0\u30B9\u5074\u306E\u5857\u308A\u306F\u7DAD\u6301\uFF09 */
+.dtm-roll::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: var(--dtm-roll-bg-image, none);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: var(--dtm-roll-bg-opacity, 0.4);
+  pointer-events: none;
+}
 .dtm-vscroll {
   position: relative;
   width: 20px;
@@ -5836,9 +5940,14 @@ var DAW_CSS = `
 .dtm-modal-body {
   padding: 12px;
   overflow-y: auto;
+  overflow-x: hidden;
   font-size: 13px;
   line-height: 1.6;
 }
+.dtm-modal-body * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
 .dtm-modal-body a {
   color: var(--dtm-primary);
   text-decoration: underline;
@@ -6375,7 +6484,10 @@ var createSynth = (ctx, destination = ctx.destination) => {
     osc.frequency.value = freqFromPitch(e.pitch);
     const t0 = ctx.currentTime + e.when;
     const peak = Math.max(1e-4, 0.06 * e.volume * 1.5);
+    const releaseTime = Math.min(0.02, e.duration * 0.1);
+    const sustainDuration = e.duration - releaseTime;
     gain.gain.setValueAtTime(peak, t0);
+    gain.gain.setValueAtTime(peak, t0 + sustainDuration);
     gain.gain.exponentialRampToValueAtTime(1e-3, t0 + e.duration);
     osc.connect(gain);
     if (typeof ctx.createStereoPanner === "function" && e.pan) {
@@ -6441,6 +6553,9 @@ var MGRoid_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYA
 // assets/MOTRoid.png
 var MOTRoid_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAByElEQVR42s2WTyiEURTFfyMbS1ZSlIUxScpCNrNAkpLdhClFlJRJdpQ/5V+xE7PQFJHFyJKUJKLZaBZqkhjKQslCLG3UWIw7ec/7xidq3lnNve++23fOO2/u86ChPbyd+hp3tDbzH9g5OFLivVCXByCPHMPjlrkw+KsiuhI5VyBfT/z3mev9JJZ1ezywdfeccnNmbhVyuy/3Coj7nVwv2KwpAaAn8ZiVkezT652UsO8WCK5jJ0pcH9OYOrha9un1GVivwMzEOADJ6CoApQtx48bdQNnnr3cAugMNAMRWpoz1/usbALzBQQB8/kZLFZAv0/EwVpdVESfGMV+lsb94xz4FMu4f6lTybpkLdObf+lurwNTcvOLWh6XpXzX0n54Z89JP+ts/CwRtj1cAFHq9Sj4+uWisr5sdVeLXZBKA/ZIqy6fhT3O7YmNJPdOWFmNd8vBQiW97R7JOTXtfxYKjyAwAzQPp//jxp8v0tAuFjA3Pw2EA5ourjfvt84DTQkFNVQrgrb9Dyb/UNhlvhe76ootjtd9a+gXxlrjy2P0eEOZOyDDTGLpFRtlPJezzgNPZC6LBPgDKlyPG9fvhAQCC0XWzAms7dt2CDzsGp242tsuqAAAAAElFTkSuQmCC";
 
+// assets/NYNRoid.png
+var NYNRoid_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABo0lEQVR42tWXoU8DMRTGf7csCAQBOcz4A6aOIOZAETKLBsQGCCwhiIWQCUKCRDAyAWgcWQgoPOHU/gBmOAkJggRTRPeSa7m7lSHWPdNc23u97+v3vvYCrCiVSir5HMdxwAjhmqfAmCPI+uIURKnPcRxjIc1d0GZi7AwU7Y63qyMA5reODaR268qEnc9fDdhaaDabAERRZLRhGDollnmtVsvvKihmqb3b7QJQq9WcGOh0OgDU63Xj/SyN+KeBMAxV2h4K8peTbQAWDy9HGpeIoiiYDA3Y6l9Z29NI788NpII8WN0FYLmgU0ZDfMJ/BiSU0tI4m57RHZWqRn5XzZ33ZDmn/wwk1KmSKg4C3a0eLvIzPbYB2P/61H7wW0ue3wdSvFxZ9Wvu+YARUb/tH1l1PzkMiBYkxOMldpZuAWg/r6eeCa5r+s+A3AuknjcrNwDMvZ4C8L5wAMB1b8Ood7kHpGjFfwZU0tkajYaxt6Ly3tSsNsbvj/QqGbwvPpLFtscMWHtnnxGuMezPyv8q+AdylzX8ZsDJIfv9vjFYLpf/lHvsDPwA5Wy6PgZtokAAAAAASUVORK5CYII=";
+
 // assets/puyuyu.png
 var puyuyu_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB60lEQVR42tWXPUxTURiGn9vWMCgtEQoDcWhAFgdtB0dMGjfcIAwMjcYoKIObq3F1EwKixNR0cCC46YQ4ODqIi4kRjUPj0Jaa1roYi9fh9Kuck3tvb7v08C73J+/5Tt7nnPvlHoeQend3yKULXXxQc8L4IvRZsU6JM9NJAKLZOQCazox6jiU0/2Gzrgq6r5RvetsFeP+2EkjEPgJ+yd3olDL81RObEp+My7Ct6oLrRcIeAmbyyKULngOikf2uJpA6GT54kug7gfZ6HO6cdwF+pYYBGBxT12vzrwF49mKpq8JXZzcAyG9dBqBRqgJw8lNRob+ybwkBc+2vrx1oBknQq4Sg6OnyCEf7g319YGU1rSM6taWujtou9S/ZwILxid1gf2sP2NsJZZdGZz57DkhMvlG9/uVZvT906bePwO9GDYCBwSFtDUWLN1UfePxkw/tzCumXeawh0O4D59InNAL54gIAN27d1wZsPrqnvu8zz/V+EdIvBD7u/bGUgEhI/BjLae9PlwqBBf385trbQ0Buvj2ccAFGR396kuhVZvJyOQ5A6s5Xx64+UPlebd2p/wAhYSYQ3S40tef1XCxwIkn+fx4s2wPmv2FyXCdhJjcT+703k1v3V+x0OhkJiV7ll9x+Ap1Px25giWNzOv4HHKK9IIEhxAYAAAAASUVORK5CYII=";
 
@@ -6476,7 +6591,8 @@ var VOICE_IMAGES = {
   tsukuyomi: tsukuyomi_default,
   rei: rei_default,
   MGRoid: MGRoid_default,
-  MOTRoid: MOTRoid_default
+  MOTRoid: MOTRoid_default,
+  NYNRoid: NYNRoid_default
 };
 var FALLBACK_VOCAL_ICON = Chip_default;
 
@@ -7709,12 +7825,12 @@ var KOE_INFO_HTML = `
 
   <h4>3. DTM\u3067\u4F7F\u3046</h4>
   <ul>
-    <li>\u6B4C\u5531\u30E2\u30C7\u30EB\u306E\u30D7\u30EB\u30C0\u30A6\u30F3\u304B\u3089\u300C\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\u3092\u8FFD\u52A0\u2026\u300D\u3092\u9078\u3073\u307E\u3059\u3002</li>
-    <li>\u300C\u97F3\u6E90URL\u300D\u306B\u624B\u98062\u306E\u76F4\u63A5\u30EA\u30F3\u30AF\u3092\u8CBC\u308A\u4ED8\u3051\u307E\u3059\u3002</li>
-    <li>\u30A2\u30A4\u30B3\u30F3\u753B\u50CFUR\u30EB\u30FB\u8868\u793A\u540D\u30FB\u8B58\u5225\u5B50\u306F\u4EFB\u610F\u3067\u3059\uFF08\u7701\u7565\u53EF\uFF09\u3002</li>
+    <li>\u6B4C\u5531\u30E2\u30C7\u30EB\u306E\u30D7\u30EB\u30C0\u30A6\u30F3\u304B\u3089\u300C\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u3092\u8FFD\u52A0\u2026\u300D\u3092\u9078\u3073\u307E\u3059\u3002</li>
+    <li>\u300C\u97F3\u58F0URL\u300D\u306B\u624B\u98062\u306E\u76F4\u63A5\u30EA\u30F3\u30AF\u3092\u8CBC\u308A\u4ED8\u3051\u307E\u3059\u3002</li>
+    <li>\u30A2\u30A4\u30B3\u30F3\u753B\u50CFURL\u306F\u4EFB\u610F\u3067\u3059\uFF08\u7701\u7565\u53EF\uFF09\u3002\u8B58\u5225\u5B50\u306F\u30D5\u30A1\u30A4\u30EB\u540D\u304B\u3089\u81EA\u52D5\u751F\u6210\u3055\u308C\u307E\u3059\u3002</li>
     <li>\u300C\u8FFD\u52A0\u300D\u3092\u62BC\u3059\u3068\u30D7\u30EB\u30C0\u30A6\u30F3\u306B\u767B\u9332\u3055\u308C\u3001\u4EE5\u964D\u305D\u306E\u30C8\u30E9\u30C3\u30AF\u3067\u4F7F\u3048\u307E\u3059\u3002</li>
   </ul>
-  <p style="margin-top:4px;"><small>\u203B\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3057\u305F\u97F3\u6E90\u306F\u81EA\u5DF1\u8CAC\u4EFB\u3067\u7BA1\u7406\u3057\u3066\u304F\u3060\u3055\u3044\u3002\u6A29\u5229\u95A2\u4FC2\uFF08\u914D\u5E03\u5143\u306E\u5229\u7528\u898F\u7D04\uFF09\u306B\u3082\u5F93\u3063\u3066\u304F\u3060\u3055\u3044\u3002</small></p>
+  <p style="margin-top:4px;color:var(--dtm-warn);"><small>\u203BUTAU\u97F3\u6E90\u3092 <code>.koe</code> \u306B\u5909\u63DB\u3057\u3066\u30CD\u30C3\u30C8\u4E0A\u306B\u7F6E\u304F\u884C\u70BA\u306F\u3001\u97F3\u6E90\u30C7\u30FC\u30BF\u306E\u518D\u52A0\u5DE5\u30FB\u518D\u914D\u5E03\u306B\u3042\u305F\u308A\u307E\u3059\u3002\u3053\u308C\u304C\u914D\u5E03\u5143\u306E\u5229\u7528\u898F\u7D04\u306B\u53CD\u3057\u3066\u3044\u306A\u3044\u304B\u306F\u5FC5\u305A\u3054\u81EA\u8EAB\u3067\u78BA\u8A8D\u3057\u3001\u305D\u306E\u8CAC\u4EFB\u3092\u8CA0\u3063\u3066\u304F\u3060\u3055\u3044\u3002</small></p>
 </div>
 `;
 var BASE_STEP_WIDTH = 0.5;
@@ -7858,6 +7974,24 @@ var TRACKS_ADVANCED = [
 ];
 var DEFAULT_TRACKS = TRACKS_SIMPLE;
 var BASE_LYRIC_MODELS = ["klatt", ...Object.keys(KOE_VOICEBANKS)];
+var LYRIC_MODEL_CATEGORIES = [
+  {
+    label: "kusa\u30D7\u30EA\u30BB\u30C3\u30C8",
+    models: ["klatt", "tsukuyomi"]
+  },
+  {
+    label: "\u304A\u3093J",
+    models: ["roze", "shiyo", "rino"]
+  },
+  {
+    label: "\u4E00\u822C",
+    models: ["teto", "rei", "ruko_male", "ruko_female"]
+  },
+  {
+    label: "\u30AF\u30C3\u30AD\u30FC\u2606",
+    models: ["mgroid", "motroid", "nynroid"]
+  }
+];
 var BASE_LYRIC_MODEL_LABELS = {
   klatt: "\u8EFD\u91CF\u30ED\u30DC\u58F0",
   ...KOE_VOICEBANK_LABELS
@@ -7865,6 +7999,18 @@ var BASE_LYRIC_MODEL_LABELS = {
 var lyricModelLabel = (model, customMap) => BASE_LYRIC_MODEL_LABELS[model] ?? customMap.get(model)?.label ?? model;
 var CUSTOM_VOCAL_ADD_VALUE = "+custom";
 var CUSTOM_VOCAL_KEY_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+var deriveCustomVocalKeyFromUrl = (url2) => {
+  let name;
+  try {
+    const path = new URL(url2).pathname;
+    name = decodeURIComponent(path.slice(path.lastIndexOf("/") + 1));
+  } catch {
+    return "";
+  }
+  name = name.replace(/\.[^.]*$/, "").normalize("NFKC").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+  if (name && /^[0-9]/.test(name)) name = `_${name}`;
+  return CUSTOM_VOCAL_KEY_RE.test(name) ? name : "";
+};
 var clamp3 = (v, min, max) => Math.min(Math.max(v, min), max);
 var normalizeInstrumentName = (name) => {
   if (!name) return "";
@@ -7882,13 +8028,16 @@ var mountDAW = (target, options = {}) => {
   const drumPatterns = options.drumPatterns ?? DRUM_PATTERNS;
   const showMidi = !!options.parseMidi;
   const showChord = !isAdvanced;
+  const midiSearchClient = options.midiSearch ? new MidiSearchClient(options.midiSearch) : void 0;
+  const showMidiSearch = !!midiSearchClient?.enabled;
   const refs = buildUI(target, {
     tracks: trackConfigs,
     drumPatternNames: Object.keys(drumPatterns),
     defaultDrumPattern: drumPatterns.dance ? "dance" : Object.keys(drumPatterns)[0] ?? "none",
     defaultBpm: options.defaultBpm ?? DEFAULT_BPM,
     showMidi,
-    showChord
+    showChord,
+    showMidiSearch
   });
   const renderConfig = {
     stepsPerBar: 192,
@@ -8501,6 +8650,106 @@ var mountDAW = (target, options = {}) => {
       redrawAll();
     }
   };
+  const BG_DB_NAME = "dtm-daw-db";
+  const BG_DB_STORE = "settings";
+  const BG_DB_KEY = "piano-roll-bg";
+  const BG_OPACITY_KEY = "dtm-piano-roll-bg-opacity";
+  const COMPRESSIBLE_IMAGE_TYPES = /* @__PURE__ */ new Set([
+    "image/jpeg",
+    "image/png",
+    "image/webp",
+    "image/bmp"
+  ]);
+  const openBgDb = () => new Promise((resolve, reject) => {
+    const req = indexedDB.open(BG_DB_NAME, 1);
+    req.onupgradeneeded = () => req.result.createObjectStore(BG_DB_STORE);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+  const saveBgBlob = async (blob2) => {
+    const db = await openBgDb();
+    try {
+      await new Promise((resolve, reject) => {
+        const tx = db.transaction(BG_DB_STORE, "readwrite");
+        tx.objectStore(BG_DB_STORE).put(blob2, BG_DB_KEY);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      });
+    } finally {
+      db.close();
+    }
+  };
+  const loadBgBlob = async () => {
+    const db = await openBgDb();
+    try {
+      return await new Promise((resolve, reject) => {
+        const tx = db.transaction(BG_DB_STORE, "readonly");
+        const req = tx.objectStore(BG_DB_STORE).get(BG_DB_KEY);
+        req.onsuccess = () => resolve(req.result ?? null);
+        req.onerror = () => reject(req.error);
+      });
+    } finally {
+      db.close();
+    }
+  };
+  const deleteBgBlob = async () => {
+    const db = await openBgDb();
+    try {
+      await new Promise((resolve, reject) => {
+        const tx = db.transaction(BG_DB_STORE, "readwrite");
+        tx.objectStore(BG_DB_STORE).delete(BG_DB_KEY);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      });
+    } finally {
+      db.close();
+    }
+  };
+  const resizeImageToBlob = (img, maxW, maxH) => {
+    const scale = Math.min(1, maxW / img.width, maxH / img.height);
+    const width = Math.max(1, Math.round(img.width * scale));
+    const height = Math.max(1, Math.round(img.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (ctx) ctx.drawImage(img, 0, 0, width, height);
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob2) => blob2 ? resolve(blob2) : reject(new Error("toBlob failed")),
+        "image/jpeg",
+        0.7
+      );
+    });
+  };
+  let currentBgObjectUrl = null;
+  const applyBgOpacity = (opacityVal) => {
+    refs.rollContainer.style.setProperty(
+      "--dtm-roll-bg-opacity",
+      String(opacityVal / 100)
+    );
+    refs.bgOpacityInput.value = String(opacityVal);
+  };
+  const applyRollBackground = (blob2) => {
+    if (currentBgObjectUrl) {
+      URL.revokeObjectURL(currentBgObjectUrl);
+      currentBgObjectUrl = null;
+    }
+    if (blob2) {
+      currentBgObjectUrl = URL.createObjectURL(blob2);
+      refs.rollContainer.style.setProperty(
+        "--dtm-roll-bg-image",
+        `url(${currentBgObjectUrl})`
+      );
+      refs.bgOpacityRow.classList.remove("dtm-hidden");
+    } else {
+      refs.rollContainer.style.setProperty("--dtm-roll-bg-image", "none");
+      refs.bgOpacityRow.classList.add("dtm-hidden");
+    }
+    refs.bgRemoveBtn.classList.toggle("dtm-hidden", !blob2);
+    setBackgroundActive(!!blob2);
+    redrawAll();
+  };
   const setupCanvas = () => {
     const w = refs.rollContainer.clientWidth || 800;
     const h = refs.rollContainer.clientHeight || 450;
@@ -8866,10 +9115,8 @@ var mountDAW = (target, options = {}) => {
           <a data-dtm="lyric-custom-conv-link" href="https://onjmin.github.io/koe/demo/" target="_blank" rel="noopener" style="font-size:11px;color:var(--dtm-primary);text-decoration:underline">UTAU\u97F3\u6E90(zip)\u3092.koe\u306B\u5909\u63DB</a>
           <button class="dtm-btn dtm-btn--ghost dtm-btn--xs" data-dtm="lyric-custom-guide">\u4F7F\u3044\u65B9\u30AC\u30A4\u30C9</button>
         </div>
-        <input type="url" class="dtm-input" data-dtm="lyric-custom-src" placeholder="\u97F3\u6E90URL\uFF08https://\u301C.koe\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\uFF08.koe\uFF09\u306EURL">
-        <input type="url" class="dtm-input" data-dtm="lyric-custom-icon" placeholder="\u30A2\u30A4\u30B3\u30F3\u753B\u50CFURL\uFF08\u4EFB\u610F\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\u306E\u30A2\u30A4\u30B3\u30F3\u753B\u50CFURL">
-        <input type="text" class="dtm-input" data-dtm="lyric-custom-alias" placeholder="\u8868\u793A\u540D\uFF08\u4EFB\u610F\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\u306E\u8868\u793A\u540D\uFF08\u30D7\u30EB\u30C0\u30A6\u30F3\u306E\u5225\u540D\uFF09" maxlength="64">
-        <input type="text" class="dtm-input" data-dtm="lyric-custom-key" placeholder="\u8B58\u5225\u5B50\uFF08\u4EFB\u610F\u30FB\u7701\u7565\u3067\u81EA\u52D5\u63A1\u756A\u3001\u82F1\u5B57\u59CB\u307E\u308A\u82F1\u6570\u5B57\u3068_\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\u306EMML\u8B58\u5225\u5B50\uFF08\u30AD\u30FC\uFF09" maxlength="32">
+        <input type="url" class="dtm-input" data-dtm="lyric-custom-src" placeholder="\u97F3\u58F0URL\uFF08https://\u301C.koe\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\uFF08.koe\uFF09\u306EURL">
+        <input type="url" class="dtm-input" data-dtm="lyric-custom-icon" placeholder="\u30A2\u30A4\u30B3\u30F3\u753B\u50CFURL\uFF08\u4EFB\u610F\uFF09" aria-label="\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u306E\u30A2\u30A4\u30B3\u30F3\u753B\u50CFURL">
         <div class="dtm-row">
           <span class="dtm-label dtm-grow" data-dtm="lyric-custom-note" style="color:var(--dtm-warn)"></span>
           <button class="dtm-btn dtm-btn--primary" data-dtm="lyric-custom-apply">\u8FFD\u52A0</button>
@@ -8934,12 +9181,6 @@ var mountDAW = (target, options = {}) => {
       const lyricCustomIcon = lyricDiv.querySelector(
         '[data-dtm="lyric-custom-icon"]'
       );
-      const lyricCustomAlias = lyricDiv.querySelector(
-        '[data-dtm="lyric-custom-alias"]'
-      );
-      const lyricCustomKey = lyricDiv.querySelector(
-        '[data-dtm="lyric-custom-key"]'
-      );
       const lyricCustomGuide = lyricDiv.querySelector(
         '[data-dtm="lyric-custom-guide"]'
       );
@@ -8950,23 +9191,35 @@ var mountDAW = (target, options = {}) => {
         '[data-dtm="lyric-custom-apply"]'
       );
       const fmtPan = (pan) => pan === 64 ? "C" : pan < 64 ? `L${64 - pan}` : `R${pan - 64}`;
-      const addOpt = (value, label) => {
+      const addOpt = (parent, value, label) => {
         const o = document.createElement("option");
         o.value = value;
         o.textContent = label;
-        lyricModelSel.appendChild(o);
+        parent.appendChild(o);
       };
-      addOpt("", "\u30DC\u30FC\u30AB\u30EB\u306A\u3057");
-      for (const m of BASE_LYRIC_MODELS)
-        addOpt(m, lyricModelLabel(m, customVocalsMap));
-      for (const [k, def] of customVocalsMap) addOpt(k, def.label ?? k);
-      addOpt(CUSTOM_VOCAL_ADD_VALUE, "\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90\u3092\u8FFD\u52A0\u2026");
+      addOpt(lyricModelSel, "", "\u30DC\u30FC\u30AB\u30EB\u306A\u3057");
+      for (const cat of LYRIC_MODEL_CATEGORIES) {
+        const group = document.createElement("optgroup");
+        group.label = cat.label;
+        for (const m of cat.models) {
+          addOpt(group, m, lyricModelLabel(m, customVocalsMap));
+        }
+        lyricModelSel.appendChild(group);
+      }
+      const customGroup = document.createElement("optgroup");
+      customGroup.label = "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0";
+      for (const [k, def] of customVocalsMap) {
+        addOpt(customGroup, k, def.label ?? k);
+      }
+      addOpt(customGroup, CUSTOM_VOCAL_ADD_VALUE, "\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0\u3092\u8FFD\u52A0\u2026");
       if (active.lyricModel && !BASE_LYRIC_MODELS.includes(active.lyricModel) && !customVocalsMap.has(active.lyricModel)) {
         addOpt(
+          customGroup,
           active.lyricModel,
           lyricModelLabel(active.lyricModel, customVocalsMap)
         );
       }
+      lyricModelSel.appendChild(customGroup);
       lyricModelSel.value = active.lyricModel;
       lyricOctaveSel.value = String(active.vocalOctave);
       lyricInput.value = active.lyrics;
@@ -9032,9 +9285,10 @@ var mountDAW = (target, options = {}) => {
       lyricModelSel.addEventListener("change", () => {
         if (lyricModelSel.value === CUSTOM_VOCAL_ADD_VALUE) {
           lyricCustomNote.textContent = "";
-          lyricCustomAlias.value = "";
-          lyricCustomKey.value = "";
           lyricCustom.classList.remove("dtm-hidden");
+          lyricIcon.removeAttribute("src");
+          lyricIcon.classList.add("dtm-hidden");
+          lyricTerms.classList.add("dtm-hidden");
           return;
         }
         lyricCustom.classList.add("dtm-hidden");
@@ -9044,45 +9298,41 @@ var mountDAW = (target, options = {}) => {
         fireLyricsChange(active);
       });
       lyricCustomGuide.addEventListener("click", () => {
-        showModal("\u30AB\u30B9\u30BF\u30E0\u97F3\u6E90(.koe)\u306E\u4F7F\u3044\u65B9", KOE_INFO_HTML);
+        showModal("\u30AB\u30B9\u30BF\u30E0\u97F3\u58F0(.koe)\u306E\u4F7F\u3044\u65B9", KOE_INFO_HTML);
       });
       lyricCustomApply.addEventListener("click", () => {
         const src = lyricCustomSrc.value.trim();
         if (!isValidHttpUrl(src)) {
-          lyricCustomNote.textContent = "\u97F3\u6E90URL\u304C\u4E0D\u6B63\u3067\u3059\uFF08http/https\u306E\u307F\u30FB2048\u6587\u5B57\u307E\u3067\uFF09";
+          lyricCustomNote.textContent = "\u97F3\u58F0URL\u304C\u4E0D\u6B63\u3067\u3059\uFF08http/https\u306E\u307F\u30FB2048\u6587\u5B57\u307E\u3067\uFF09";
           return;
         }
         const iconRaw = lyricCustomIcon.value.trim();
         const iconUrl = isValidHttpUrl(iconRaw) ? iconRaw : "";
-        const alias = lyricCustomAlias.value.trim();
         const existing = [...customVocalsMap.values()].find(
           (d) => d.url === src
         );
-        const keyRaw = lyricCustomKey.value.trim().toLowerCase();
         let key;
-        if (keyRaw) {
-          if (!CUSTOM_VOCAL_KEY_RE.test(keyRaw)) {
-            lyricCustomNote.textContent = "\u8B58\u5225\u5B50\u304C\u4E0D\u6B63\u3067\u3059\uFF08\u82F1\u5B57\u307E\u305F\u306F\u30A2\u30F3\u30C0\u30FC\u30B9\u30B3\u30A2\u3067\u59CB\u307E\u308B\u82F1\u6570\u5B57\u30FB_\u306E\u307F\uFF09";
-            return;
-          }
-          if (BASE_LYRIC_MODELS.includes(keyRaw)) {
-            lyricCustomNote.textContent = "\u305D\u306E\u8B58\u5225\u5B50\u306F\u5185\u8535\u30E2\u30C7\u30EB\u540D\u3068\u885D\u7A81\u3057\u3066\u3044\u307E\u3059";
-            return;
-          }
-          const conflict = customVocalsMap.get(keyRaw);
-          if (conflict && conflict.url !== src) {
-            lyricCustomNote.textContent = "\u305D\u306E\u8B58\u5225\u5B50\u306F\u5225\u306E\u97F3\u6E90\u306B\u4F7F\u7528\u6E08\u307F\u3067\u3059";
-            return;
-          }
-          key = keyRaw;
+        if (existing) {
+          key = existing.key;
         } else {
-          key = existing?.key ?? genCustomVocalKey();
+          const derived = deriveCustomVocalKeyFromUrl(src);
+          if (derived && !BASE_LYRIC_MODELS.includes(derived)) {
+            if (!customVocalsMap.has(derived)) {
+              key = derived;
+            } else {
+              let n = 2;
+              while (customVocalsMap.has(`${derived}${n}`)) n++;
+              key = `${derived}${n}`;
+            }
+          } else {
+            key = genCustomVocalKey();
+          }
         }
         registerCustomVocal({
           key,
           iconUrl: iconUrl || (existing?.iconUrl ?? ""),
           url: src,
-          label: alias || existing?.label
+          label: existing?.label
         });
         active.lyricModel = key;
         fireLyricsChange(active);
@@ -9361,7 +9611,8 @@ var mountDAW = (target, options = {}) => {
       bpm: parsedBpm,
       lyrics,
       meta,
-      mergedTrackCount
+      mergedTrackCount,
+      trackVelocity
     } = parseMML(mml, {
       stepsPerBar: renderConfig.stepsPerBar,
       collectLyrics: true,
@@ -9394,6 +9645,13 @@ var mountDAW = (target, options = {}) => {
         options.onTrackInstrumentChange?.(i, name);
       }
     });
+    trackStates.forEach((t, i) => {
+      const v = trackVelocity.get(i);
+      if (v !== void 0 && v !== t.volume) {
+        t.volume = v;
+        t.core.setVolume(v);
+      }
+    });
     for (const t of trackStates) {
       t.lyrics = "";
       t.lyricModel = "";
@@ -9585,7 +9843,7 @@ var mountDAW = (target, options = {}) => {
     refs.prevBarBtn.addEventListener("click", () => {
       const targetStep = Math.max(
         0,
-        Math.floor((getCurrentPlayStep() - 1) / renderConfig.stepsPerBar) * renderConfig.stepsPerBar
+        (Math.floor((getCurrentPlayStep() - 1) / renderConfig.stepsPerBar) - 1) * renderConfig.stepsPerBar
       );
       jumpTo(targetStep);
     });
@@ -9630,6 +9888,41 @@ var mountDAW = (target, options = {}) => {
       applyZoomY();
       notifyViewState();
     });
+    refs.bgUploadBtn.addEventListener("click", () => refs.bgFileInput.click());
+    refs.bgFileInput.addEventListener("change", () => {
+      const file = refs.bgFileInput.files?.[0];
+      refs.bgFileInput.value = "";
+      if (!file) return;
+      if (!COMPRESSIBLE_IMAGE_TYPES.has(file.type)) {
+        saveBgBlob(file).then(() => applyRollBackground(file)).catch(() => {
+        });
+        return;
+      }
+      const objectUrl = URL.createObjectURL(file);
+      const img = new Image();
+      img.onload = () => {
+        URL.revokeObjectURL(objectUrl);
+        const maxW = refs.rollContainer.clientWidth || 800;
+        const maxH = refs.rollContainer.clientHeight || 450;
+        resizeImageToBlob(img, maxW, maxH).then(
+          (blob2) => saveBgBlob(blob2).then(() => applyRollBackground(blob2))
+        ).catch(() => {
+        });
+      };
+      img.src = objectUrl;
+    });
+    refs.bgRemoveBtn.addEventListener("click", () => {
+      deleteBgBlob().catch(() => {
+      }).finally(() => applyRollBackground(null));
+    });
+    refs.bgOpacityInput.addEventListener("input", () => {
+      const opacityVal = Number.parseInt(refs.bgOpacityInput.value, 10);
+      applyBgOpacity(opacityVal);
+      try {
+        localStorage.setItem(BG_OPACITY_KEY, String(opacityVal));
+      } catch (_) {
+      }
+    });
     refs.decomposeChordToggle.addEventListener("change", notifyViewState);
     refs.ignoreChordHeavyToggle.addEventListener("change", notifyViewState);
     refs.masterVolume.addEventListener("input", () => {
@@ -9702,11 +9995,11 @@ var mountDAW = (target, options = {}) => {
     refs.mmlLoadBtn.addEventListener("click", async () => {
       const mml = refs.mmlInput.value;
       if (!isAdvanced && options.onRequestAdvancedMode) {
-        const { mergedTrackCount } = parseMML(mml, {
+        const { mergedTrackCount, meta } = parseMML(mml, {
           stepsPerBar: renderConfig.stepsPerBar,
           clampTrackCount: trackStates.length
         });
-        if (mergedTrackCount > 0) {
+        if (mergedTrackCount > 0 || meta.mode === "advanced") {
           const confirmed = await showConfirmModal(
             "\u521D\u5FC3\u8005\u30E2\u30FC\u30C9\u3067\u8AAD\u307F\u8FBC\u3080\u3068\u3001\u97F3\u304C\u5D29\u308C\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059\u3002<br>\u4E0A\u7D1A\u8005\u30E2\u30FC\u30C9\u306B\u5207\u308A\u66FF\u3048\u307E\u3059\u304B\uFF1F"
           );
@@ -9740,6 +10033,7 @@ var mountDAW = (target, options = {}) => {
     };
     showModal = (title, bodyHTML) => {
       collapseActiveSample();
+      collapseSearchPreview();
       refs.modalTitle.textContent = title;
       refs.modalBody.innerHTML = bodyHTML;
       refs.modalOverlay.removeAttribute("hidden");
@@ -9828,11 +10122,13 @@ var mountDAW = (target, options = {}) => {
     };
     refs.modalClose.addEventListener("click", () => {
       collapseActiveSample();
+      collapseSearchPreview();
       refs.modalOverlay.setAttribute("hidden", "");
     });
     refs.modalOverlay.addEventListener("click", (e) => {
       if (e.target === refs.modalOverlay) {
         collapseActiveSample();
+        collapseSearchPreview();
         refs.modalOverlay.setAttribute("hidden", "");
       }
     });
@@ -9853,6 +10149,7 @@ var mountDAW = (target, options = {}) => {
       })
     );
     if (showMidi) wireMidi();
+    if (showMidiSearch) wireMidiSearch();
     document.addEventListener("keydown", onKeyDown);
     refs.root.addEventListener("keydown", (e) => {
       const t = e.target;
@@ -9917,6 +10214,236 @@ var mountDAW = (target, options = {}) => {
       overlayDuring(() => applyMidiSelection(pendingMidi, selected));
     });
   };
+  const buildPreviewMml = (midi) => {
+    const analysis = analyzeMidiTracks(midi);
+    const selected = analysis.filter((a) => a.selected).map((a) => a.index);
+    const { placements, bpm: parsedBpm } = extractMidiPlacements(
+      midi,
+      selected
+    );
+    const byTrack = /* @__PURE__ */ new Map();
+    for (const p of placements) {
+      if (!byTrack.has(p.trackId)) byTrack.set(p.trackId, []);
+      byTrack.get(p.trackId)?.push(p);
+    }
+    const refCore = trackStates[0].core;
+    const tempo = Math.round(parsedBpm) || bpm;
+    const lines = [];
+    let i = 0;
+    for (const notes of byTrack.values()) {
+      const asNotes = notes.map((p) => ({
+        id: 0,
+        startStep: p.startStep,
+        durationSteps: p.durationSteps,
+        pitch: p.pitch,
+        velocity: p.velocity
+      }));
+      const mml = refCore.getMMLFromNotes(asNotes, tempo, 100).trim();
+      lines.push(`@${i} ${mml}`);
+      i++;
+    }
+    return [...lines, MML_END_MARKER].join(";\n");
+  };
+  const fetchVerifiedMidi = async (fileName) => {
+    if (!options.parseMidi || !midiSearchClient) {
+      throw new Error("parseMidi/midiSearchClient not injected");
+    }
+    const midiBytes = await midiSearchClient.fetchMidi(fileName);
+    const midi = await options.parseMidi(new Uint8Array(midiBytes));
+    const analysis = analyzeMidiTracks(midi);
+    const selected = analysis.filter((a) => a.selected).map((a) => a.index);
+    if (!isPlausibleMidiTranscription(midi, selected)) {
+      throw new Error("implausible MIDI transcription");
+    }
+    return midi;
+  };
+  let searchPreviewPlayer = null;
+  let searchPreviewBtn = null;
+  const collapseSearchPreview = () => {
+    if (searchPreviewPlayer) {
+      searchPreviewPlayer.stop();
+      searchPreviewPlayer.destroy();
+      searchPreviewPlayer = null;
+    }
+    if (searchPreviewBtn) {
+      searchPreviewBtn.textContent = "\u25B6 \u8A66\u8074";
+      searchPreviewBtn.classList.remove("dtm-btn--danger");
+      searchPreviewBtn.classList.add("dtm-btn--ghost");
+      const container = searchPreviewBtn.closest(".dtm-modal-sample-box")?.querySelector(".dtm-modal-sample-player-container");
+      if (container) container.innerHTML = "";
+      searchPreviewBtn = null;
+    }
+  };
+  const wireMidiSearch = () => {
+    if (!midiSearchClient) return;
+    refs.midiSearchOpenBtn.addEventListener("click", () => {
+      showModal(
+        "MML\u691C\u7D22",
+        `
+				<div class="dtm-row" style="flex-wrap:nowrap">
+					<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 class="dtm-row" data-dtm="modal-midi-search-results" style="flex-direction:column;align-items:stretch;gap:4px"></div>
+				`
+      );
+      const input = refs.modalBody.querySelector(
+        '[data-dtm="modal-midi-search-input"]'
+      );
+      const searchBtn = refs.modalBody.querySelector(
+        '[data-dtm="modal-midi-search-btn"]'
+      );
+      const results = refs.modalBody.querySelector(
+        '[data-dtm="modal-midi-search-results"]'
+      );
+      const runSearch = async () => {
+        const q2 = input.value.trim();
+        if (!q2) return;
+        collapseSearchPreview();
+        searchBtn.disabled = true;
+        searchBtn.textContent = "\u691C\u7D22\u4E2D...";
+        results.innerHTML = "";
+        try {
+          const songs = await midiSearchClient.searchSongs({ title: q2 });
+          if (songs.length === 0) {
+            results.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();
+                } 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 {
+                  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";
+                }
+              }
+            });
+            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);
+            results.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();
+    });
+  };
   const onKeyDown = (e) => {
     if (!(e.ctrlKey || e.metaKey)) return;
     if (e.code === "KeyZ" && !e.shiftKey) {
@@ -9972,6 +10499,22 @@ var mountDAW = (target, options = {}) => {
   updateUndoRedo();
   redrawAll();
   if (options.initialMML) loadMML(options.initialMML);
+  let initialOpacity = 40;
+  try {
+    const storedOpacity = localStorage.getItem(BG_OPACITY_KEY);
+    if (storedOpacity !== null) {
+      initialOpacity = Number.parseInt(storedOpacity, 10);
+      if (Number.isNaN(initialOpacity) || initialOpacity < 0 || initialOpacity > 100) {
+        initialOpacity = 40;
+      }
+    }
+  } catch (_) {
+  }
+  applyBgOpacity(initialOpacity);
+  loadBgBlob().then((blob2) => {
+    if (blob2) applyRollBackground(blob2);
+  }).catch(() => {
+  });
   let resizeTimer = null;
   const resizeObserver = new ResizeObserver(() => {
     if (resizeTimer) clearTimeout(resizeTimer);
@@ -11293,13 +11836,17 @@ var createDtmStudio = async (options = {}) => {
   const mountedPlayers = [];
   const mountedModeSwitches = [];
   const mountEditor = (target, opts = {}) => {
+    const mergedOpts = {
+      midiSearch: options.midiSearch,
+      ...opts
+    };
     const {
       preset,
       presetUI,
       onInstrumentChange,
       onTrackInstrumentChange: externalOnTrackInstrumentChange,
       ...dawOverrides
-    } = opts;
+    } = mergedOpts;
     const tracks = dawOverrides.tracks ?? TRACKS_SIMPLE;
     const trackIds = tracks.map((t) => t.id);
     const presetKey = preset && INSTRUMENT_PRESETS[preset] ? preset : defaultPreset;
@@ -11635,6 +12182,7 @@ var createDtmStudio = async (options = {}) => {
   MAX_VOCAL_VOLUME,
   MMLCore,
   MML_END_MARKER,
+  MidiSearchClient,
   PITCH_MAP,
   PREWARM_NOTES,
   TRACKS_ADVANCED,
@@ -11684,6 +12232,7 @@ var createDtmStudio = async (options = {}) => {
   init,
   injectStyles,
   isChordHeavyTrack,
+  isPlausibleMidiTranscription,
   isValidHttpUrl,
   koeUrl,
   mountDAW,
@@ -11697,6 +12246,7 @@ var createDtmStudio = async (options = {}) => {
   parseMmlMeta,
   playMML,
   playSingingMML,
+  setBackgroundActive,
   setDrawOffset,
   shiftNotes,
   showLoadingOverlay,