@onjmin/dtm 0.1.49 → 0.1.53

package/dist/index.mjs

@@ -1215,7 +1215,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>`
@@ -1293,6 +1299,12 @@ 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>
   </details>
 
@@ -1331,6 +1343,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>
@@ -1441,6 +1456,9 @@ 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"),
     rollContainer: sel("roll"),
     wrapper: sel("wrapper"),
     vScroll: sel("vscroll"),
@@ -1459,6 +1477,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"),
@@ -2503,8 +2522,9 @@ var KOE_VOICEBANKS = {
   teto: "\u91CD\u97F3\u30C6\u30C8\u5358\u72EC\u97F3.koe",
   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"
+  mgroid: "MGRoid_\u539F\u97F3\u8A2D\u5B9A\u6E08\u307F.koe",
+  motroid: "MOTRoid\u5B8C\u5168\u7248V2.koe",
+  nynroid: "NYNRoidver1.4.koe"
 };
 var KOE_VOICEBANK_LABELS = {
   tsukuyomi: "\u3064\u304F\u3088\u307F\u3061\u3083\u3093",
@@ -2515,8 +2535,9 @@ var KOE_VOICEBANK_LABELS = {
   teto: "\u91CD\u97F3\u30C6\u30C8",
   shiyo: "\u9769\u547D\u30B7\u30E8",
   rei: "\u8DB3\u7ACB\u30EC\u30A4",
-  MGRoid: "MGRoid",
-  MOTRoid: "MOTRoid"
+  mgroid: "MGRoid",
+  motroid: "MOTRoid",
+  nynroid: "NYNRoid"
 };
 var VOICE_IMAGE_KEY = {
   klatt: "puyuyu",
@@ -2528,8 +2549,9 @@ var VOICE_IMAGE_KEY = {
   teto: "teto",
   shiyo: "shiyo",
   rei: "rei",
-  MGRoid: "MGRoid",
-  MOTRoid: "MOTRoid"
+  mgroid: "MGRoid",
+  motroid: "MOTRoid",
+  nynroid: "NYNRoid"
 };
 var KOE_VOICEBANK_TERMS = {
   tsukuyomi: "https://tyc.rei-yumesaki.net/material/utau/terms/",
@@ -2540,8 +2562,9 @@ var KOE_VOICEBANK_TERMS = {
   teto: "https://kasaneteto.jp/guidelines/voice.html",
   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"
+  mgroid: "https://x.com/nisusansu/status/1048825378188353536",
+  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";
@@ -3365,6 +3388,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;
@@ -3517,6 +3553,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;
@@ -3582,6 +3657,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
@@ -3731,7 +3810,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,
@@ -3777,7 +3856,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)";
@@ -5349,6 +5428,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: 0.4;
+  pointer-events: none;
+}
 .dtm-vscroll {
   position: relative;
   width: 20px;
@@ -5721,9 +5812,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;
@@ -6326,6 +6422,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=";
 
@@ -6361,7 +6460,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;
 
@@ -7594,12 +7694,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;
@@ -7750,6 +7850,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 "";
@@ -7767,13 +7879,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,
@@ -8386,6 +8501,28 @@ var mountDAW = (target, options = {}) => {
       redrawAll();
     }
   };
+  const ROLL_BG_STORAGE_KEY = "dtm-piano-roll-bg";
+  const resizeImageToDataUrl = (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) return img.src;
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas.toDataURL("image/jpeg", 0.7);
+  };
+  const applyRollBackground = (dataUrl) => {
+    refs.rollContainer.style.setProperty(
+      "--dtm-roll-bg-image",
+      dataUrl ? `url(${dataUrl})` : "none"
+    );
+    refs.bgRemoveBtn.classList.toggle("dtm-hidden", !dataUrl);
+    setBackgroundActive(!!dataUrl);
+    redrawAll();
+  };
   const setupCanvas = () => {
     const w = refs.rollContainer.clientWidth || 800;
     const h = refs.rollContainer.clientHeight || 450;
@@ -8751,10 +8888,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>
@@ -8819,12 +8954,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"]'
       );
@@ -8845,7 +8974,7 @@ var mountDAW = (target, options = {}) => {
       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(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(
           active.lyricModel,
@@ -8917,9 +9046,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");
@@ -8929,45 +9059,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);
@@ -9468,9 +9594,10 @@ var mountDAW = (target, options = {}) => {
     refs.playBtn.addEventListener("click", togglePlay);
     refs.playBtn.disabled = false;
     refs.prevBarBtn.addEventListener("click", () => {
+      const barsBack = playbackState === "playing" ? 2 : 1;
       const targetStep = Math.max(
         0,
-        Math.floor((getCurrentPlayStep() - 1) / renderConfig.stepsPerBar) * renderConfig.stepsPerBar
+        (Math.floor((getCurrentPlayStep() - 1) / renderConfig.stepsPerBar) - barsBack) * renderConfig.stepsPerBar
       );
       jumpTo(targetStep);
     });
@@ -9515,6 +9642,35 @@ 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;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const img = new Image();
+        img.onload = () => {
+          const maxW = refs.rollContainer.clientWidth || 800;
+          const maxH = refs.rollContainer.clientHeight || 450;
+          const dataUrl = resizeImageToDataUrl(img, maxW, maxH);
+          try {
+            localStorage.setItem(ROLL_BG_STORAGE_KEY, dataUrl);
+          } catch {
+          }
+          applyRollBackground(dataUrl);
+        };
+        img.src = reader.result;
+      };
+      reader.readAsDataURL(file);
+    });
+    refs.bgRemoveBtn.addEventListener("click", () => {
+      try {
+        localStorage.removeItem(ROLL_BG_STORAGE_KEY);
+      } catch {
+      }
+      applyRollBackground(null);
+    });
     refs.decomposeChordToggle.addEventListener("change", notifyViewState);
     refs.ignoreChordHeavyToggle.addEventListener("change", notifyViewState);
     refs.masterVolume.addEventListener("input", () => {
@@ -9625,6 +9781,7 @@ var mountDAW = (target, options = {}) => {
     };
     showModal = (title, bodyHTML) => {
       collapseActiveSample();
+      collapseSearchPreview();
       refs.modalTitle.textContent = title;
       refs.modalBody.innerHTML = bodyHTML;
       refs.modalOverlay.removeAttribute("hidden");
@@ -9713,11 +9870,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", "");
       }
     });
@@ -9738,6 +9897,7 @@ var mountDAW = (target, options = {}) => {
       })
     );
     if (showMidi) wireMidi();
+    if (showMidiSearch) wireMidiSearch();
     document.addEventListener("keydown", onKeyDown);
     refs.root.addEventListener("keydown", (e) => {
       const t = e.target;
@@ -9802,6 +9962,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) {
@@ -9857,6 +10247,11 @@ var mountDAW = (target, options = {}) => {
   updateUndoRedo();
   redrawAll();
   if (options.initialMML) loadMML(options.initialMML);
+  try {
+    const storedBg = localStorage.getItem(ROLL_BG_STORAGE_KEY);
+    if (storedBg) applyRollBackground(storedBg);
+  } catch {
+  }
   let resizeTimer = null;
   const resizeObserver = new ResizeObserver(() => {
     if (resizeTimer) clearTimeout(resizeTimer);
@@ -11177,13 +11572,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;
@@ -11518,6 +11917,7 @@ export {
   MAX_VOCAL_VOLUME,
   MMLCore,
   MML_END_MARKER,
+  MidiSearchClient,
   PITCH_MAP,
   PREWARM_NOTES,
   TRACKS_ADVANCED,
@@ -11567,6 +11967,7 @@ export {
   init,
   injectStyles,
   isChordHeavyTrack,
+  isPlausibleMidiTranscription,
   isValidHttpUrl,
   koeUrl,
   mountDAW,
@@ -11580,6 +11981,7 @@ export {
   parseMmlMeta,
   playMML,
   playSingingMML,
+  setBackgroundActive,
   setDrawOffset,
   shiftNotes,
   showLoadingOverlay,