@onjmin/dtm 0.1.36 → 0.1.38

package/dist/index.mjs

@@ -146,6 +146,7 @@ async function buildNameToKeyMapping() {
   }
   return nameToKey;
 }
+var GM_INSTRUMENT_NAMES = FONT_NAME_SURIKOV.trim().split("\n").map((line) => line.slice(line.indexOf(" ") + 1));
 
 // node_modules/.pnpm/@onjmin+chord-parser@1.0.2/node_modules/@onjmin/chord-parser/dist/index.mjs
 var SHARP_NAMES = [
@@ -1223,14 +1224,17 @@ var buildUI = (target, options) => {
   target.innerHTML = `
 <div class="dtm-daw" data-dtm="root">
   <div class="dtm-topbar" data-dtm="transport">
-    <button class="dtm-iconbtn" data-dtm="prev-bar" title="1\u5C0F\u7BC0\u524D">${icon("chevronLeft")}</button>
-    <button class="dtm-play" data-dtm="play" disabled>${icon("play")}<span>\u8A66\u8074</span></button>
-    <button class="dtm-iconbtn" data-dtm="next-bar" title="1\u5C0F\u7BC0\u5F8C">${icon("chevronRight")}</button>
-    <label class="dtm-toggle"><input type="checkbox" data-dtm="solo"><span>\u30BD\u30ED</span></label>
-    <span class="dtm-topbar-loading dtm-blink" data-dtm="topbar-loading">... LOADING ...</span>
-    <span class="dtm-grow"></span>
-    <span class="dtm-label">BPM</span>
-    <input type="number" class="dtm-input dtm-input--num" data-dtm="bpm" value="${defaultBpm}" min="20" max="300">
+    <div class="dtm-topbar-row1">
+      <button class="dtm-iconbtn" data-dtm="prev-bar" title="1\u5C0F\u7BC0\u524D">${icon("chevronLeft")}</button>
+      <button class="dtm-play" data-dtm="play" disabled>${icon("play")}<span>\u8A66\u8074</span></button>
+      <button class="dtm-iconbtn" data-dtm="next-bar" title="1\u5C0F\u7BC0\u5F8C">${icon("chevronRight")}</button>
+      <label class="dtm-toggle"><input type="checkbox" data-dtm="solo"><span>\u30BD\u30ED</span></label>
+      <span class="dtm-topbar-loading dtm-blink" data-dtm="topbar-loading">... LOADING ...</span>
+      <span class="dtm-grow"></span>
+      <span class="dtm-label">BPM</span>
+      <input type="number" class="dtm-input dtm-input--num" data-dtm="bpm" value="${defaultBpm}" min="20" max="300">
+    </div>
+    <div class="dtm-tracks" data-dtm="track-tabs"></div>
   </div>
 
   <div class="dtm-tooldock">
@@ -1253,8 +1257,6 @@ var buildUI = (target, options) => {
     </select>
   </div>
 
-  <div class="dtm-tracks" data-dtm="track-tabs"></div>
-
   <div class="dtm-roll-wrap">
     <div class="dtm-roll" data-dtm="roll">
       <div data-dtm="wrapper" style="position:absolute;inset:0;"></div>
@@ -3549,12 +3551,14 @@ var drawKeyboard = () => {
     const totalPitch = pitchIndex + pitchRangeStart;
     const pitchMod12 = totalPitch % 12;
     const isBlackKey = blackKeyPitches.has(pitchMod12);
+    const octave = Math.floor(totalPitch / 12) - 1;
+    const isC4Range = octave === 4;
     const screenY = y - g_draw_offset_y;
     const bkW = Math.floor(KEYBOARD_WIDTH * BK_RATIO);
     if (isBlackKey) {
-      g_key_ctx.fillStyle = WHITE_KEY;
+      g_key_ctx.fillStyle = isC4Range ? "#d8d4be" : WHITE_KEY;
       g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
-      g_key_ctx.fillStyle = BLACK_KEY;
+      g_key_ctx.fillStyle = isC4Range ? "#1a1408" : BLACK_KEY;
       g_key_ctx.fillRect(0, screenY, bkW, keyHeight);
       g_key_ctx.strokeStyle = BK_EDGE;
       g_key_ctx.lineWidth = 1;
@@ -3563,7 +3567,7 @@ var drawKeyboard = () => {
       g_key_ctx.lineTo(bkW, screenY + keyHeight);
       g_key_ctx.stroke();
     } else {
-      g_key_ctx.fillStyle = WHITE_KEY;
+      g_key_ctx.fillStyle = isC4Range ? "#dedad0" : WHITE_KEY;
       g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
       if (pitchMod12 === 5 || pitchMod12 === 0) {
         g_key_ctx.strokeStyle = WW_SEP;
@@ -3575,13 +3579,13 @@ var drawKeyboard = () => {
       }
     }
     if (pitchMod12 === 0) {
-      const octave = Math.floor(totalPitch / 12) - 1;
+      const octave2 = Math.floor(totalPitch / 12) - 1;
       g_key_ctx.fillStyle = "#555040";
       g_key_ctx.font = "10px 'k8x12',monospace";
       g_key_ctx.textAlign = "right";
       g_key_ctx.textBaseline = "bottom";
       g_key_ctx.fillText(
-        `${KEY_NAMES[pitchMod12]}${octave}`,
+        `${KEY_NAMES[pitchMod12]}${octave2}`,
         KEYBOARD_WIDTH - 4,
         screenY + keyHeight - 2
       );
@@ -3633,17 +3637,22 @@ var drawGrid = (noteLengthSteps = 1) => {
   drawKeyboard();
   drawHeader();
   g_grid_ctx.clearRect(0, 0, g_grid_canvas.width, g_grid_canvas.height);
-  const { keyHeight, keyCount, stepWidth, stepsPerBar } = g_config;
+  const { keyHeight, keyCount, stepWidth, stepsPerBar, pitchRangeStart } = g_config;
   const startY = Math.floor(g_draw_offset_y / keyHeight) * keyHeight;
   const endY = g_draw_offset_y + g_grid_canvas.height;
   for (let y = startY; y < endY; y += keyHeight) {
     const pitchIndex = keyCount - 1 - y / keyHeight;
+    const totalPitch = pitchIndex + pitchRangeStart;
     const pitchMod12 = pitchIndex % 12;
     const isBlackKey = blackKeyPitches.has(pitchMod12);
     const isC = pitchMod12 === 0;
+    const octave = Math.floor(totalPitch / 12) - 1;
+    const isC4Range = octave === 4;
     const screenY = y - g_draw_offset_y;
-    if (isBlackKey) {
-      g_grid_ctx.fillStyle = "#0d1020";
+    g_grid_ctx.fillStyle = 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)";
       g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
     }
     g_grid_ctx.beginPath();
@@ -4285,6 +4294,7 @@ var PITCH_MAP2 = {
 };
 var clamp2 = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
 var META_DIRECTIVE = /#(inst|drum|volume|drumvolume|mode)=([\w-]+)/gi;
+var TRACK_INST_DIRECTIVE = /#t(\d+)inst=([^#;\r\n]+)/gi;
 var parseMmlMeta = (mml) => {
   const meta = {};
   for (const m of mml.matchAll(META_DIRECTIVE)) {
@@ -4303,9 +4313,17 @@ var parseMmlMeta = (mml) => {
       }
     }
   }
+  for (const m of mml.matchAll(TRACK_INST_DIRECTIVE)) {
+    const idx = Number.parseInt(m[1], 10);
+    const name = m[2].trim();
+    if (!Number.isNaN(idx) && name) {
+      meta.trackInstruments ??= {};
+      meta.trackInstruments[idx] = name;
+    }
+  }
   return meta;
 };
-var stripMmlMeta = (mml) => mml.replace(META_DIRECTIVE, "");
+var stripMmlMeta = (mml) => mml.replace(META_DIRECTIVE, "").replace(TRACK_INST_DIRECTIVE, "");
 var formatMmlMeta = (meta, space = "") => {
   const parts = [];
   if (meta.instrument) parts.push(`#inst=${meta.instrument}`);
@@ -4314,6 +4332,11 @@ var formatMmlMeta = (meta, space = "") => {
   if (meta.drumVolume !== void 0)
     parts.push(`#drumvolume=${meta.drumVolume}`);
   if (meta.mode) parts.push(`#mode=${meta.mode}`);
+  if (meta.trackInstruments) {
+    for (const [idx, name] of Object.entries(meta.trackInstruments)) {
+      if (name) parts.push(`#t${idx}inst=${name}`);
+    }
+  }
   return parts.join(space);
 };
 var parseMML = (mml, options = {}) => {
@@ -4935,7 +4958,7 @@ var DAW_CSS = `
   top: 0;
   z-index: 20;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--dtm-gap);
   padding: 6px;
@@ -4945,18 +4968,19 @@ var DAW_CSS = `
     inset 0 0 0 2px var(--c-black),
     0 0 0 2px var(--dtm-success),
     4px 4px 0 var(--c-black);
+}
+.dtm-topbar-row1 {
+  display: flex;
+  align-items: center;
+  gap: var(--dtm-gap);
+  flex-basis: 100%;
+  min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-.dtm-topbar::-webkit-scrollbar {
-  display: none;
-}
-.dtm-topbar > * {
-  flex-shrink: 0;
-}
-.dtm-topbar > .dtm-grow {
-  flex-shrink: 1;
-}
+.dtm-topbar-row1::-webkit-scrollbar { display: none; }
+.dtm-topbar-row1 > * { flex-shrink: 0; }
+.dtm-topbar-row1 > .dtm-grow { flex-shrink: 1; }
 
 /* PLAY\u30DC\u30BF\u30F3 \u2014 \u30B2\u30FC\u30E0\u306E\u300C\u6C7A\u5B9A\u30DC\u30BF\u30F3\u300D\u7684\u5B58\u5728\u611F */
 .dtm-play {
@@ -5146,46 +5170,39 @@ var DAW_CSS = `
 .dtm-modebtn--active { background: var(--dtm-primary); color: var(--dtm-pfg); }
 .dtm-modebtn:not(.dtm-modebtn--active):active { background: var(--dtm-border2); }
 
-/* \u2500\u2500\u2500 \u30C8\u30E9\u30C3\u30AF\u30D4\u30EB\uFF08\u30AD\u30E3\u30E9\u30AF\u30BF\u30FC\u9078\u629E\u30DC\u30BF\u30F3\uFF09 \u2500\u2500\u2500 */
+/* \u2500\u2500\u2500 \u30C8\u30E9\u30C3\u30AF\u30D4\u30EB\uFF08\u756A\u53F7\u30DC\u30BF\u30F3\u3001\u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC2\u884C\u76EE\uFF09 \u2500\u2500\u2500 */
 .dtm-tracks {
+  flex-basis: 100%;
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--dtm-gap);
+  flex-wrap: nowrap;
+  gap: 3px;
 }
 .dtm-pill {
   --dtm-pill-color: var(--dtm-primary);
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  flex: 1 1 auto;
   justify-content: center;
-  min-height: 42px;
-  padding: 0 12px;
-  border: 2px solid var(--dtm-border2);
-  background: var(--dtm-deep);
-  color: var(--dtm-muted);
+  flex: 1 1 0;
+  min-width: 0;
+  height: 26px;
+  padding: 0;
+  border: 2px solid var(--c-black);
+  background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);
+  color: var(--c-white);
   font-family: var(--dtm-font);
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: .1em;
+  font-size: 11px;
+  font-weight: bold;
   cursor: pointer;
-  box-shadow: 3px 3px 0 var(--c-black);
-}
-.dtm-pill .dtm-dot {
-  width: 8px; height: 8px;
-  background: var(--dtm-pill-color);
-  flex: 0 0 auto;
-  box-shadow: 1px 1px 0 var(--c-black);
+  box-shadow: 2px 2px 0 var(--c-black);
+  opacity: 0.7;
 }
-/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u91D1\u8272\u30CF\u30A4\u30E9\u30A4\u30C8 + \u30AB\u30FC\u30BD\u30EB */
+/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */
 .dtm-pill--active {
+  opacity: 1;
   border-color: var(--dtm-gold);
-  color: var(--dtm-gold);
-  background: var(--dtm-surface);
-  box-shadow: 0 0 0 2px var(--dtm-gold), 3px 3px 0 var(--c-black);
+  box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);
 }
-.dtm-pill--active::before { content: "\u25BA "; font-size: 10px; }
-.dtm-pill:not(.dtm-pill--active):active { transform: translate(3px,3px); box-shadow: none; }
+.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); box-shadow: none; }
 
 /* \u2500\u2500\u2500 \u30D4\u30A2\u30CE\u30ED\u30FC\u30EB\uFF08\u30C8\u30E9\u30C3\u30AB\u30FC\u98A8\uFF09 \u2500\u2500\u2500 */
 .dtm-roll-wrap { display: flex; gap: var(--dtm-gap); }
@@ -5329,7 +5346,7 @@ var DAW_CSS = `
 }
 .dtm-overlay[hidden] { display: none; }
 .dtm-overlay::before {
-  content: 'NOW LOADING';
+  content: '\u30ED\u30FC\u30C9\u4E2D';
   font-family: var(--dtm-font);
   font-size: 13px;
   color: var(--dtm-primary);
@@ -5522,6 +5539,15 @@ var DAW_CSS = `
   justify-content: center;
 }
 
+.dtm-confirm-footer {
+  padding: 8px 12px;
+  border-top: 2px solid var(--c-black);
+  background: var(--dtm-deep);
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
 .dtm-modal {
   max-width: 500px;
   width: 100%;
@@ -6544,9 +6570,11 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   const mmlInfoItem = makeMenuItem("MML\u66F8\u5F0F\u3068\u306F");
   const embedItem = makeMenuItem("\u57CB\u3081\u8FBC\u3080");
   const copyMmlItem = makeMenuItem("MML\u30B3\u30D4\u30FC");
-  menuDropdown.appendChild(showMmlItem);
-  menuDropdown.appendChild(mmlInfoItem);
-  menuDropdown.appendChild(embedItem);
+  if (!options._skipInfoModals) {
+    menuDropdown.appendChild(showMmlItem);
+    menuDropdown.appendChild(mmlInfoItem);
+    menuDropdown.appendChild(embedItem);
+  }
   menuDropdown.appendChild(copyMmlItem);
   menuContainer.appendChild(menuDropdown);
   mmlHeader.appendChild(menuContainer);
@@ -6700,6 +6728,8 @@ var mountMmlPlayer = (target, mml, options = {}) => {
           volume: trackVolume,
           // 解説モーダル内の試聴サンプルは規約同意を要求しない。
           skipConsent: true,
+          // 再帰的なモーダル生成を防ぐ。
+          _skipInfoModals: true,
           onStop: () => {
             if (activeSampleBtn === el) resetSampleBtn(el);
           }
@@ -6709,65 +6739,67 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       });
     }
   };
-  showMmlItem.addEventListener("click", (e) => {
-    e.stopPropagation();
-    toggleMenu(false);
-    const modalBody = openInfoModal("MML\u3092\u8868\u793A");
-    const desc = doc.createElement("p");
-    desc.textContent = "\u3053\u306EMML\u3092\u30B3\u30D4\u30FC\u3057\u3066\u3001\u4ED6\u306E\u30D7\u30EC\u30A4\u30E4\u30FC\u3084\u5171\u6709URL\u306B\u8CBC\u308A\u4ED8\u3051\u3066\u4F7F\u7528\u3067\u304D\u307E\u3059\u3002";
-    desc.style.marginBottom = "8px";
-    modalBody.appendChild(desc);
-    const sourceMml = options.getMml?.() ?? mml;
-    const displayMml = sourceMml.split(";").map((s) => s.trim()).filter((s) => s.length > 0).join(";\n");
-    const pre = doc.createElement("pre");
-    pre.textContent = displayMml;
-    pre.style.whiteSpace = "pre-wrap";
-    pre.style.wordBreak = "break-all";
-    pre.style.cursor = "text";
-    pre.addEventListener("click", () => {
-      const range = doc.createRange();
-      range.selectNodeContents(pre);
-      const sel = doc.defaultView?.getSelection();
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-    });
-    modalBody.appendChild(pre);
-    appendCopyButton(modalBody, sourceMml);
-  });
-  mmlInfoItem.addEventListener("click", (e) => {
-    e.stopPropagation();
-    toggleMenu(false);
-    const modalBody = openInfoModal("MML\u306E\u66F8\u304D\u65B9\u89E3\u8AAC");
-    modalBody.innerHTML = MML_INFO_HTML;
-    wireSampleButtons(modalBody);
-  });
-  embedItem.addEventListener("click", async (e) => {
-    e.stopPropagation();
-    toggleMenu(false);
-    const modalBody = openInfoModal("\u57CB\u3081\u8FBC\u307F");
-    const loading = doc.createElement("p");
-    loading.textContent = "\u751F\u6210\u4E2D...";
-    modalBody.appendChild(loading);
-    try {
-      const embedBase = options.embedUrl ?? "https://onjmin.github.io/dtm/demo/embed.html";
-      const payload = await encodeMml(mml);
-      const url2 = `${embedBase}#${payload}`;
-      const snippet = `<iframe src="${url2}" width="100%" height="260" frameborder="0" loading="lazy" title="@onjmin/dtm player"></iframe>`;
-      if (!modalBody.isConnected) return;
-      loading.remove();
+  if (!options._skipInfoModals) {
+    showMmlItem.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleMenu(false);
+      const modalBody = openInfoModal("MML\u3092\u8868\u793A");
       const desc = doc.createElement("p");
-      desc.textContent = "\u3053\u306EHTML\u3092\u30D6\u30ED\u30B0\u3084\u30B5\u30A4\u30C8\u306B\u8CBC\u308A\u4ED8\u3051\u308B\u3068\u3001\u30D7\u30EC\u30A4\u30E4\u30FC\u3092\u305D\u306E\u307E\u307E\u57CB\u3081\u8FBC\u3081\u307E\u3059\u3002";
+      desc.textContent = "\u3053\u306EMML\u3092\u30B3\u30D4\u30FC\u3057\u3066\u3001\u4ED6\u306E\u30D7\u30EC\u30A4\u30E4\u30FC\u3084\u5171\u6709URL\u306B\u8CBC\u308A\u4ED8\u3051\u3066\u4F7F\u7528\u3067\u304D\u307E\u3059\u3002";
+      desc.style.marginBottom = "8px";
+      modalBody.appendChild(desc);
+      const sourceMml = options.getMml?.() ?? mml;
+      const displayMml = sourceMml.split(";").map((s) => s.trim()).filter((s) => s.length > 0).join(";\n");
       const pre = doc.createElement("pre");
-      pre.textContent = snippet;
+      pre.textContent = displayMml;
       pre.style.whiteSpace = "pre-wrap";
       pre.style.wordBreak = "break-all";
-      modalBody.append(desc, pre);
-      appendCopyButton(modalBody, snippet);
-    } catch (err2) {
-      console.error("[dtm] failed to generate embed snippet", err2);
-      if (modalBody.isConnected) loading.textContent = "\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F";
-    }
-  });
+      pre.style.cursor = "text";
+      pre.addEventListener("click", () => {
+        const range = doc.createRange();
+        range.selectNodeContents(pre);
+        const sel = doc.defaultView?.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      });
+      modalBody.appendChild(pre);
+      appendCopyButton(modalBody, sourceMml);
+    });
+    mmlInfoItem.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleMenu(false);
+      const modalBody = openInfoModal("MML\u306E\u66F8\u304D\u65B9\u89E3\u8AAC");
+      modalBody.innerHTML = MML_INFO_HTML;
+      wireSampleButtons(modalBody);
+    });
+    embedItem.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      toggleMenu(false);
+      const modalBody = openInfoModal("\u57CB\u3081\u8FBC\u307F");
+      const loading = doc.createElement("p");
+      loading.textContent = "\u751F\u6210\u4E2D...";
+      modalBody.appendChild(loading);
+      try {
+        const embedBase = options.embedUrl ?? "https://onjmin.github.io/dtm/demo/embed.html";
+        const payload = await encodeMml(mml);
+        const url2 = `${embedBase}#${payload}`;
+        const snippet = `<iframe src="${url2}" width="100%" height="260" frameborder="0" loading="lazy" title="@onjmin/dtm player"></iframe>`;
+        if (!modalBody.isConnected) return;
+        loading.remove();
+        const desc = doc.createElement("p");
+        desc.textContent = "\u3053\u306EHTML\u3092\u30D6\u30ED\u30B0\u3084\u30B5\u30A4\u30C8\u306B\u8CBC\u308A\u4ED8\u3051\u308B\u3068\u3001\u30D7\u30EC\u30A4\u30E4\u30FC\u3092\u305D\u306E\u307E\u307E\u57CB\u3081\u8FBC\u3081\u307E\u3059\u3002";
+        const pre = doc.createElement("pre");
+        pre.textContent = snippet;
+        pre.style.whiteSpace = "pre-wrap";
+        pre.style.wordBreak = "break-all";
+        modalBody.append(desc, pre);
+        appendCopyButton(modalBody, snippet);
+      } catch (err2) {
+        console.error("[dtm] failed to generate embed snippet", err2);
+        if (modalBody.isConnected) loading.textContent = "\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F";
+      }
+    });
+  }
   copyMmlItem.addEventListener("click", async (e) => {
     e.stopPropagation();
     const success = await copyToClipboard(doc, options.getMml?.() ?? mml);
@@ -7364,8 +7396,8 @@ var MIDI_INFO_HTML = `
 
   <h4>3. \u30E2\u30FC\u30C9\u306B\u3088\u308B\u53D6\u308A\u8FBC\u307F\u65B9\u306E\u9055\u3044</h4>
   <ul>
-    <li><strong>SIMPLE</strong>: \u5404\u30C8\u30E9\u30C3\u30AF\u306E\u7279\u5FB4\u304B\u3089\u3001\u30E1\u30ED\u30C7\u30A3\u30FC\u30FB\u30B5\u30D6\u30E1\u30ED\u30FB\u30D9\u30FC\u30B9\u30FB\u4F34\u594F\u306E4\u3064\u306E\u5F79\u5272\u306B\u81EA\u52D5\u3067\u632F\u308A\u5206\u3051\u3089\u308C\u307E\u3059\u3002</li>
-    <li><strong>ADVANCED</strong>: MIDI\u306E\u30C8\u30E9\u30C3\u30AF\u69CB\u6210\u304C\u305D\u306E\u307E\u307E\u53CD\u6620\u3055\u308C\u307E\u3059\uFF081\u5BFE1\uFF09\u3002</li>
+    <li><strong>\u521D\u5FC3\u8005\u30E2\u30FC\u30C9</strong>: \u5404\u30C8\u30E9\u30C3\u30AF\u306E\u7279\u5FB4\u304B\u3089\u3001\u30E1\u30ED\u30C7\u30A3\u30FC\u30FB\u30B5\u30D6\u30E1\u30ED\u30FB\u30D9\u30FC\u30B9\u30FB\u4F34\u594F\u306E4\u3064\u306E\u5F79\u5272\u306B\u81EA\u52D5\u3067\u632F\u308A\u5206\u3051\u3089\u308C\u307E\u3059\u3002</li>
+    <li><strong>\u4E0A\u7D1A\u8005\u30E2\u30FC\u30C9</strong>: MIDI\u306E\u30C8\u30E9\u30C3\u30AF\u69CB\u6210\u304C\u305D\u306E\u307E\u307E\u53CD\u6620\u3055\u308C\u307E\u3059\uFF081\u5BFE1\uFF09\u3002</li>
   </ul>
 
   <h4>4. MIDI\u30D5\u30A1\u30A4\u30EB\u3092\u624B\u306B\u5165\u308C\u308B</h4>
@@ -7417,105 +7449,105 @@ var TRACKS_SIMPLE = [
 var TRACKS_ADVANCED = [
   {
     id: "t0",
-    name: "TRACK 01",
+    name: "\u30C8\u30E9\u30C3\u30AF1",
     color: [41, 173, 255],
     instrument: 0,
     volume: 100
   },
   {
     id: "t1",
-    name: "TRACK 02",
+    name: "\u30C8\u30E9\u30C3\u30AF2",
     color: [0, 228, 54],
     instrument: 1,
     volume: 100
   },
   {
     id: "t2",
-    name: "TRACK 03",
+    name: "\u30C8\u30E9\u30C3\u30AF3",
     color: [255, 119, 168],
     instrument: 2,
     volume: 100
   },
   {
     id: "t3",
-    name: "TRACK 04",
+    name: "\u30C8\u30E9\u30C3\u30AF4",
     color: [255, 163, 0],
     instrument: 3,
     volume: 100
   },
   {
     id: "t4",
-    name: "TRACK 05",
+    name: "\u30C8\u30E9\u30C3\u30AF5",
     color: [255, 236, 39],
     instrument: 4,
     volume: 100
   },
   {
     id: "t5",
-    name: "TRACK 06",
+    name: "\u30C8\u30E9\u30C3\u30AF6",
     color: [131, 118, 156],
     instrument: 5,
     volume: 100
   },
   {
     id: "t6",
-    name: "TRACK 07",
+    name: "\u30C8\u30E9\u30C3\u30AF7",
     color: [255, 0, 77],
     instrument: 6,
     volume: 100
   },
   {
     id: "t7",
-    name: "TRACK 08",
+    name: "\u30C8\u30E9\u30C3\u30AF8",
     color: [255, 204, 170],
     instrument: 7,
     volume: 100
   },
   {
     id: "t8",
-    name: "TRACK 09",
+    name: "\u30C8\u30E9\u30C3\u30AF9",
     color: [194, 195, 199],
     instrument: 8,
     volume: 100
   },
   {
     id: "t9",
-    name: "TRACK 10",
+    name: "\u30C8\u30E9\u30C3\u30AF10",
     color: [0, 135, 81],
     instrument: 9,
     volume: 100
   },
   {
     id: "t10",
-    name: "TRACK 11",
+    name: "\u30C8\u30E9\u30C3\u30AF11",
     color: [171, 82, 54],
     instrument: 10,
     volume: 100
   },
   {
     id: "t11",
-    name: "TRACK 12",
+    name: "\u30C8\u30E9\u30C3\u30AF12",
     color: [126, 37, 83],
     instrument: 11,
     volume: 100
   },
   {
     id: "t12",
-    name: "TRACK 13",
+    name: "\u30C8\u30E9\u30C3\u30AF13",
     color: [255, 241, 232],
     instrument: 12,
     volume: 100
   },
   {
     id: "t13",
-    name: "TRACK 14",
+    name: "\u30C8\u30E9\u30C3\u30AF14",
     color: [120, 200, 255],
     instrument: 13,
     volume: 100
   },
   {
     id: "t14",
-    name: "TRACK 15",
+    name: "\u30C8\u30E9\u30C3\u30AF15",
     color: [100, 255, 160],
     instrument: 14,
     volume: 100
@@ -7529,6 +7561,13 @@ var LYRIC_MODEL_LABELS2 = {
 };
 var lyricModelLabel = (model) => LYRIC_MODEL_LABELS2[model] ?? model;
 var clamp3 = (v, min, max) => Math.min(Math.max(v, min), max);
+var normalizeInstrumentName = (name) => {
+  if (!name) return "";
+  const stripped = name.replace(/\s+/g, "").toLowerCase();
+  return GM_INSTRUMENT_NAMES.find(
+    (n) => n.replace(/\s+/g, "").toLowerCase() === stripped
+  ) ?? name;
+};
 var mountDAW = (target, options = {}) => {
   injectStyles();
   const getAudioTime = options.getAudioTime ?? (() => performance.now() / 1e3);
@@ -7568,7 +7607,8 @@ var mountDAW = (target, options = {}) => {
   let snapGridSteps = 12;
   const gridLineSteps = 48;
   let currentOffsetX = 0;
-  let currentOffsetY = (104 - 1 - 60) * renderConfig.keyHeight - 215;
+  const _initPitch = options.initialScrollPitch;
+  let currentOffsetY = _initPitch !== void 0 ? (renderConfig.keyCount - 1 - _initPitch) * renderConfig.keyHeight - 215 : (104 - 1 - 60) * renderConfig.keyHeight - 215;
   let playStartStep = 0;
   let isSolo = false;
   let lyricTrackIndices = /* @__PURE__ */ new Set();
@@ -7581,6 +7621,24 @@ var mountDAW = (target, options = {}) => {
   let copiedNotes = [];
   let trackStates = [];
   let suppressPatch = false;
+  let lyricsDebounceTimer = null;
+  const fireLyricsChange = (t) => {
+    if (!options.onLyricsChange) return;
+    const trackId = t.config.id;
+    const data = {
+      lyrics: t.lyrics,
+      model: t.lyricModel,
+      vocalVolume: t.vocalVolume,
+      vocalGate: t.vocalGate,
+      vocalPan: t.vocalPan,
+      vocalOctave: t.vocalOctave
+    };
+    if (lyricsDebounceTimer) clearTimeout(lyricsDebounceTimer);
+    lyricsDebounceTimer = setTimeout(() => {
+      options.onLyricsChange(trackId, data);
+      lyricsDebounceTimer = null;
+    }, 300);
+  };
   const hiddenTracks = /* @__PURE__ */ new Set();
   const audioMutedTracks = /* @__PURE__ */ new Set();
   const createTrackStates = () => {
@@ -7629,7 +7687,8 @@ var mountDAW = (target, options = {}) => {
         vocalVolume: DEFAULT_VOCAL_VOLUME,
         vocalGate: 100,
         vocalPan: 64,
-        vocalOctave: 0
+        vocalOctave: 0,
+        trackInstrument: ""
       };
     });
   };
@@ -8335,19 +8394,20 @@ var mountDAW = (target, options = {}) => {
   };
   const updateTrackPanel = () => {
     refs.trackTabs.innerHTML = "";
-    for (const t of trackStates) {
+    for (const [i, t] of trackStates.entries()) {
       const [r, g, b] = t.config.color;
       const btn = document.createElement("button");
       btn.className = `dtm-pill ${t.config.id === activeTrackId ? "dtm-pill--active" : ""}`;
       btn.style.setProperty("--dtm-pill-color", `rgb(${r},${g},${b})`);
-      btn.innerHTML = `<span class="dtm-dot"></span><span>${t.config.name}</span>`;
+      btn.title = t.config.name;
+      btn.textContent = String(i + 1);
       btn.addEventListener("click", () => switchTrack(t.config.id));
       refs.trackTabs.appendChild(btn);
     }
     const active = getActive();
     refs.trackBody.innerHTML = `
       <div class="dtm-row">
-        <span class="dtm-label">velocity</span>
+        <span class="dtm-label">\u30D9\u30ED\u30B7\u30C6\u30A3</span>
         <input type="range" class="dtm-range dtm-grow" data-dtm="track-vol" min="0" max="127" value="${active.volume}">
         <span class="dtm-label" data-dtm="track-vol-label">${active.volume}</span>
       </div>`;
@@ -8362,6 +8422,59 @@ var mountDAW = (target, options = {}) => {
       active.core.setVolume(active.volume);
       volLabel.textContent = String(active.volume);
     });
+    const instRow = document.createElement("div");
+    instRow.className = "dtm-row";
+    instRow.innerHTML = `<span class="dtm-label">\u697D\u5668</span>`;
+    const instSel = document.createElement("select");
+    instSel.className = "dtm-select dtm-grow";
+    const defaultOpt = document.createElement("option");
+    defaultOpt.value = "";
+    defaultOpt.textContent = "\u30C7\u30D5\u30A9\u30EB\u30C8\uFF08\u30D7\u30EA\u30BB\u30C3\u30C8\uFF09";
+    instSel.appendChild(defaultOpt);
+    const GM_GROUPS = [
+      "\u30D4\u30A2\u30CE",
+      "\u30AF\u30ED\u30DE\u30C6\u30A3\u30C3\u30AF\u30D1\u30FC\u30AB\u30C3\u30B7\u30E7\u30F3",
+      "\u30AA\u30EB\u30AC\u30F3",
+      "\u30AE\u30BF\u30FC",
+      "\u30D9\u30FC\u30B9",
+      "\u30B9\u30C8\u30EA\u30F3\u30B0\u30B9",
+      "\u30A2\u30F3\u30B5\u30F3\u30D6\u30EB",
+      "\u30D6\u30E9\u30B9",
+      "\u30EA\u30FC\u30C9\uFF08\u6728\u7BA1\uFF09",
+      "\u30D1\u30A4\u30D7",
+      "\u30B7\u30F3\u30BB\u30EA\u30FC\u30C9",
+      "\u30B7\u30F3\u30BB\u30D1\u30C3\u30C9",
+      "\u30B7\u30F3\u30BB\u30A8\u30D5\u30A7\u30AF\u30C8",
+      "\u30A8\u30B9\u30CB\u30C3\u30AF",
+      "\u30D1\u30FC\u30AB\u30C3\u30B7\u30D6",
+      "\u30B5\u30A6\u30F3\u30C9\u30A8\u30D5\u30A7\u30AF\u30C8"
+    ];
+    GM_GROUPS.forEach((groupName, gi) => {
+      const grp = document.createElement("optgroup");
+      grp.label = groupName;
+      for (let j = 0; j < 8; j++) {
+        const name = GM_INSTRUMENT_NAMES[gi * 8 + j];
+        if (!name) break;
+        const o = document.createElement("option");
+        o.value = name;
+        o.textContent = name;
+        grp.appendChild(o);
+      }
+      instSel.appendChild(grp);
+    });
+    instSel.value = normalizeInstrumentName(active.trackInstrument);
+    const syncInstDisabled = () => {
+      instSel.disabled = !!active.lyricModel;
+      instSel.title = active.lyricModel ? "\u6B4C\u8A5E\u30E2\u30FC\u30C9\u306E\u3068\u304D\u306F\u697D\u5668\u3092\u500B\u5225\u6307\u5B9A\u3067\u304D\u307E\u305B\u3093" : "";
+    };
+    syncInstDisabled();
+    instSel.addEventListener("change", () => {
+      active.trackInstrument = instSel.value;
+      const trackIndex = trackStates.indexOf(active);
+      options.onTrackInstrumentChange?.(trackIndex, active.trackInstrument);
+    });
+    instRow.appendChild(instSel);
+    refs.trackBody.appendChild(instRow);
     if (isAdvanced || active.config.id !== "chord") {
       const lyricDiv = document.createElement("div");
       lyricDiv.className = "dtm-row";
@@ -8369,7 +8482,7 @@ var mountDAW = (target, options = {}) => {
       lyricDiv.style.alignItems = "stretch";
       lyricDiv.innerHTML = `
       <div class="dtm-row">
-        <span class="dtm-label">\u266A \u6B4C\u8A5E</span>
+        <span class="dtm-label">\u266A UTAU</span>
         <select class="dtm-select" data-dtm="lyric-model" aria-label="\u6B4C\u5531\u30E2\u30C7\u30EB"></select>
         <img class="dtm-lyric-icon dtm-hidden" data-dtm="lyric-icon" width="20" height="20" alt="" draggable="false">
         <select class="dtm-select" data-dtm="lyric-octave" aria-label="\u30AA\u30AF\u30BF\u30FC\u30D6\uFF08\u97F3\u6E90\u306E\u5F97\u610F\u97F3\u57DF\u306B\u5408\u308F\u305B\u308B\uFF09" title="\u30AA\u30AF\u30BF\u30FC\u30D6">
@@ -8443,7 +8556,7 @@ var mountDAW = (target, options = {}) => {
         o.textContent = label;
         lyricModelSel.appendChild(o);
       };
-      addOpt("", "\u306A\u3057");
+      addOpt("", "\u30DC\u30FC\u30AB\u30EB\u306A\u3057");
       for (const m of LYRIC_MODELS) addOpt(m, lyricModelLabel(m));
       if (active.lyricModel && !LYRIC_MODELS.includes(active.lyricModel)) {
         addOpt(active.lyricModel, lyricModelLabel(active.lyricModel));
@@ -8492,21 +8605,27 @@ var mountDAW = (target, options = {}) => {
       lyricModelSel.addEventListener("change", () => {
         active.lyricModel = lyricModelSel.value;
         syncLyricVisibility();
+        syncInstDisabled();
+        fireLyricsChange(active);
       });
       lyricOctaveSel.addEventListener("change", () => {
         active.vocalOctave = Number.parseInt(lyricOctaveSel.value, 10);
+        fireLyricsChange(active);
       });
       lyricInput.addEventListener("input", () => {
         active.lyrics = lyricInput.value;
         updateLyricCount();
+        fireLyricsChange(active);
       });
       lyricVol.addEventListener("input", () => {
         active.vocalVolume = Number.parseInt(lyricVol.value, 10);
         lyricVolLabel.textContent = lyricVol.value;
+        fireLyricsChange(active);
       });
       lyricPan.addEventListener("input", () => {
         active.vocalPan = Number.parseInt(lyricPan.value, 10);
         lyricPanLabel.textContent = fmtPan(active.vocalPan);
+        fireLyricsChange(active);
       });
       lyricPanLabel.style.cursor = "pointer";
       lyricPanLabel.title = "\u30BF\u30C3\u30D7\u3067\u4E2D\u592E(C)\u3078";
@@ -8514,6 +8633,7 @@ var mountDAW = (target, options = {}) => {
         active.vocalPan = 64;
         lyricPan.value = "64";
         lyricPanLabel.textContent = fmtPan(64);
+        fireLyricsChange(active);
       });
     }
     if (active.config.id === "chord" && showChord) {
@@ -8588,13 +8708,19 @@ var mountDAW = (target, options = {}) => {
     const barLimitBars = Number(refs.barLimitSelect.value);
     const limitSteps = barLimitBars > 0 ? barLimitBars * renderConfig.stepsPerBar : Infinity;
     const clipNotes = (notes) => limitSteps === Infinity ? notes : notes.filter((n) => n.startStep < limitSteps);
+    const trackInstrumentsForMeta = {};
+    trackStates.forEach((t, i) => {
+      if (t.trackInstrument) trackInstrumentsForMeta[i] = t.trackInstrument;
+    });
+    const trackInstMeta = Object.keys(trackInstrumentsForMeta).length > 0 ? trackInstrumentsForMeta : void 0;
     const metaLineFull = formatMmlMeta(
       {
         instrument: currentInstrument || void 0,
         drum: currentDrumPattern !== "none" ? currentDrumPattern : void 0,
         volume: masterVolume,
         drumVolume,
-        mode
+        mode,
+        trackInstruments: trackInstMeta
       },
       " "
     );
@@ -8604,7 +8730,8 @@ var mountDAW = (target, options = {}) => {
         drum: currentDrumPattern !== "none" ? currentDrumPattern : void 0,
         volume: masterVolume,
         drumVolume,
-        mode
+        mode,
+        trackInstruments: trackInstMeta
       },
       ""
     );
@@ -8762,6 +8889,13 @@ var mountDAW = (target, options = {}) => {
       refs.drumVolume.value = String(meta.drumVolume);
       refs.drumVolumeLabel.textContent = `${meta.drumVolume}%`;
     }
+    trackStates.forEach((t, i) => {
+      const name = normalizeInstrumentName(meta.trackInstruments?.[i] ?? "");
+      if (t.trackInstrument !== name) {
+        t.trackInstrument = name;
+        options.onTrackInstrumentChange?.(i, name);
+      }
+    });
     for (const t of trackStates) {
       t.lyrics = "";
       t.lyricModel = "";
@@ -8921,6 +9055,31 @@ var mountDAW = (target, options = {}) => {
       setLoading(false);
     }, 30);
   };
+  const showConfirmModal = (message) => new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "dtm-modal-overlay";
+    overlay.innerHTML = `
+				<div class="dtm-modal">
+					<div class="dtm-modal-header">
+						<span class="dtm-modal-title">\u30E2\u30FC\u30C9\u306E\u78BA\u8A8D</span>
+					</div>
+					<div class="dtm-modal-body"><p>${message}</p></div>
+					<div class="dtm-confirm-footer">
+						<button class="dtm-btn dtm-btn--ghost dtm-confirm-no">\u3044\u3044\u3048\uFF08\u3053\u306E\u307E\u307E\u8AAD\u307F\u8FBC\u3080\uFF09</button>
+						<button class="dtm-btn dtm-btn--primary dtm-confirm-yes">\u306F\u3044\uFF08\u4E0A\u7D1A\u8005\u30E2\u30FC\u30C9\u306B\u5207\u308A\u66FF\u3048\u308B\uFF09</button>
+					</div>
+				</div>`;
+    const close = (result) => {
+      overlay.remove();
+      resolve(result);
+    };
+    overlay.querySelector(".dtm-confirm-yes").addEventListener("click", () => close(true));
+    overlay.querySelector(".dtm-confirm-no").addEventListener("click", () => close(false));
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close(false);
+    });
+    document.body.appendChild(overlay);
+  });
   const wireEvents = () => {
     refs.playBtn.addEventListener("click", togglePlay);
     refs.playBtn.disabled = false;
@@ -9040,10 +9199,25 @@ var mountDAW = (target, options = {}) => {
       "click",
       () => copy(refs.outputMini.textContent ?? "", refs.copyMiniBtn)
     );
-    refs.mmlLoadBtn.addEventListener(
-      "click",
-      () => overlayDuring(() => loadMML(refs.mmlInput.value))
-    );
+    refs.mmlLoadBtn.addEventListener("click", async () => {
+      const mml = refs.mmlInput.value;
+      if (!isAdvanced && options.onRequestAdvancedMode) {
+        const { mergedTrackCount } = parseMML(mml, {
+          stepsPerBar: renderConfig.stepsPerBar,
+          clampTrackCount: trackStates.length
+        });
+        if (mergedTrackCount > 0) {
+          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"
+          );
+          if (confirmed) {
+            options.onRequestAdvancedMode(mml);
+            return;
+          }
+        }
+      }
+      overlayDuring(() => loadMML(mml));
+    });
     let activeSamplePlayer = null;
     let activeSampleButton = null;
     const collapseActiveSample = () => {
@@ -9136,6 +9310,7 @@ var mountDAW = (target, options = {}) => {
                 singingVoices: options.singingVoices,
                 drumPatterns: options.drumPatterns,
                 volume: masterVolume,
+                _skipInfoModals: true,
                 onStop: () => {
                   if (activeSampleButton === htmlBtn) {
                     htmlBtn.textContent = "\u25B6 \u8A66\u8074";
@@ -9217,7 +9392,7 @@ var mountDAW = (target, options = {}) => {
       refs.overlay.hidden = true;
       setLoading(false);
     });
-    refs.midiLoadBtn.addEventListener("click", () => {
+    refs.midiLoadBtn.addEventListener("click", async () => {
       if (!pendingMidi) return;
       const selected = [];
       const btns = refs.midiTrackSelection.querySelectorAll("button");
@@ -9226,6 +9401,19 @@ var mountDAW = (target, options = {}) => {
           selected.push(detectedTracks[i].index);
       });
       if (selected.length === 0) return;
+      if (!isAdvanced && options.onRequestAdvancedMode && selected.length > trackStates.length) {
+        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"
+        );
+        if (confirmed) {
+          const midi = pendingMidi;
+          const sel = selected.slice();
+          options.onRequestAdvancedMode(void 0, (newDaw) => {
+            newDaw.applyMidiParsed?.(midi, sel);
+          });
+          return;
+        }
+      }
       overlayDuring(() => applyMidiSelection(pendingMidi, selected));
     });
   };
@@ -9362,6 +9550,9 @@ var mountDAW = (target, options = {}) => {
     },
     loadMML,
     loadMIDI,
+    applyMidiParsed: (midi, selectedIndices) => {
+      overlayDuring(() => applyMidiSelection(midi, selectedIndices));
+    },
     exportMIDI: exportMIDI2,
     setBpm,
     getPlaybackState: () => playbackState,
@@ -9396,6 +9587,37 @@ var mountDAW = (target, options = {}) => {
       if (audible) audioMutedTracks.delete(trackId);
       else audioMutedTracks.add(trackId);
     },
+    applyLyrics: (trackId, data) => {
+      const t = trackStates.find((s) => s.config.id === trackId);
+      if (!t) return;
+      t.lyrics = data.lyrics;
+      t.lyricModel = data.model;
+      t.vocalVolume = data.vocalVolume;
+      t.vocalGate = data.vocalGate;
+      t.vocalPan = data.vocalPan;
+      t.vocalOctave = data.vocalOctave;
+    },
+    applyTrackInstrument: (trackIndex, instrumentName) => {
+      const t = trackStates[trackIndex];
+      if (!t) return;
+      const name = normalizeInstrumentName(instrumentName);
+      t.trackInstrument = name;
+      if (t.config.id === activeTrackId) updateTrackPanel();
+    },
+    noteToCanvas: (step, pitch) => {
+      const canvas = getGridCanvas();
+      const x = step * renderConfig.stepWidth - currentOffsetX;
+      const y = (renderConfig.keyCount - 1 - pitch) * renderConfig.keyHeight - currentOffsetY;
+      const onScreen = x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height;
+      let side = null;
+      if (!onScreen) {
+        if (x < 0) side = "left";
+        else if (x > canvas.width) side = "right";
+        else if (y < 0) side = "top";
+        else side = "bottom";
+      }
+      return { x, y, onScreen, side };
+    },
     destroy: () => {
       sequencer.stop();
       options.singingVoices?.stopStream();
@@ -10046,7 +10268,7 @@ var SoundFont = class _SoundFont {
     const { buffer, _param } = zone;
     if (!buffer || !_param) return;
     src.buffer = buffer;
-    g.gain.value = volume;
+    g.gain.setValueAtTime(volume, _when);
     src.playbackRate.setValueAtTime(_param.playbackRate, 0);
     Object.assign(src, _param.src);
     const _duration = duration + _SoundFont.afterTime;
@@ -10098,6 +10320,12 @@ var adjustZone = async (ctx, zone) => {
     }
   } else if (zone.file) {
     const buf = Uint8Array.from(atob(zone.file), (c) => c.charCodeAt(0)).buffer;
+    if (ctx.state !== "running") {
+      try {
+        await ctx.resume();
+      } catch {
+      }
+    }
     zone.buffer = await ctx.decodeAudioData(buf);
   }
   for (const [k, v] of [
@@ -10314,6 +10542,14 @@ var createDtmStudio = async (options = {}) => {
     }
   })();
   let nameToKey = {};
+  const resolveNameToKey = (name) => {
+    if (nameToKey[name]) return nameToKey[name];
+    const stripped = name.replace(/\s+/g, "").toLowerCase();
+    const canonical = Object.keys(nameToKey).find(
+      (k) => k.replace(/\s+/g, "").toLowerCase() === stripped
+    );
+    return canonical ? nameToKey[canonical] : void 0;
+  };
   const soundFonts = /* @__PURE__ */ new Map();
   const loadingByKey = /* @__PURE__ */ new Map();
   const loadInstrument = (instrumentKey) => {
@@ -10399,7 +10635,7 @@ var createDtmStudio = async (options = {}) => {
     if (opts.label !== null) {
       const lab = doc.createElement("span");
       lab.className = "dtm-controlbar-label";
-      lab.textContent = opts.label ?? "INSTRUMENT";
+      lab.textContent = opts.label ?? "\u697D\u5668\u30D7\u30EA\u30BB\u30C3\u30C8";
       wrapper.appendChild(lab);
     }
     const select = doc.createElement("select");
@@ -10464,7 +10700,13 @@ var createDtmStudio = async (options = {}) => {
   const mountedPlayers = [];
   const mountedModeSwitches = [];
   const mountEditor = (target, opts = {}) => {
-    const { preset, presetUI, onInstrumentChange, ...dawOverrides } = opts;
+    const {
+      preset,
+      presetUI,
+      onInstrumentChange,
+      onTrackInstrumentChange: externalOnTrackInstrumentChange,
+      ...dawOverrides
+    } = opts;
     const tracks = dawOverrides.tracks ?? TRACKS_SIMPLE;
     const trackIds = tracks.map((t) => t.id);
     const presetKey = preset && INSTRUMENT_PRESETS[preset] ? preset : defaultPreset;
@@ -10472,14 +10714,29 @@ var createDtmStudio = async (options = {}) => {
     const initialPreset = meta.instrument && INSTRUMENT_PRESETS[meta.instrument] ? meta.instrument : presetKey;
     let editorPreset = initialPreset;
     const isAdvancedMode = dawOverrides.mode === "advanced";
+    const trackInstOverrides = /* @__PURE__ */ new Map();
+    if (meta.trackInstruments) {
+      for (const [idxStr, name] of Object.entries(meta.trackInstruments)) {
+        const idx = Number(idxStr);
+        const key = resolveNameToKey(name);
+        if (key) trackInstOverrides.set(idx, key);
+      }
+    }
     const playNote = (e) => {
-      const sf2 = resolveSoundFont(
-        editorPreset,
-        e.trackId,
-        isAdvancedMode ? "advanced" : "simple"
-      );
-      if (!sf2) return;
-      sf2.play({
+      const trackIdx = tracks.findIndex((t) => t.id === e.trackId);
+      const overrideKey = trackIdx >= 0 ? trackInstOverrides.get(trackIdx) : void 0;
+      let sfInst;
+      if (overrideKey) {
+        sfInst = soundFonts.get(overrideKey);
+      } else {
+        sfInst = resolveSoundFont(
+          editorPreset,
+          e.trackId,
+          isAdvancedMode ? "advanced" : "simple"
+        );
+      }
+      if (!sfInst) return;
+      sfInst.play({
         ctx: audioCtx,
         destination: masterGain,
         pitch: e.pitch,
@@ -10496,6 +10753,17 @@ var createDtmStudio = async (options = {}) => {
       }
       onInstrumentChange?.(key);
     };
+    const handleTrackInstrumentChange = async (trackIndex, instrumentName) => {
+      if (!instrumentName) {
+        trackInstOverrides.delete(trackIndex);
+        return;
+      }
+      await listReady;
+      const key = resolveNameToKey(instrumentName);
+      if (!key) return;
+      trackInstOverrides.set(trackIndex, key);
+      await loadInstrument(key);
+    };
     const base = {
       getAudioTime: () => audioCtx.currentTime,
       onResumeAudio: resumeAudio,
@@ -10504,6 +10772,10 @@ var createDtmStudio = async (options = {}) => {
       singingVoices,
       parseMidi,
       onInstrumentChange: handleInstrumentChange,
+      onTrackInstrumentChange: (idx, name) => {
+        void handleTrackInstrumentChange(idx, name);
+        externalOnTrackInstrumentChange?.(idx, name);
+      },
       ...dawOverrides
     };
     const daw = mountDAW(target, base);
@@ -10551,6 +10823,10 @@ var createDtmStudio = async (options = {}) => {
           presetSelect.setValue(name);
         }
       },
+      applyTrackInstrument: (trackIndex, instrumentName) => {
+        daw.applyTrackInstrument(trackIndex, instrumentName);
+        void handleTrackInstrumentChange(trackIndex, instrumentName);
+      },
       destroy
     };
   };
@@ -10558,8 +10834,8 @@ var createDtmStudio = async (options = {}) => {
     const doc = target.ownerDocument;
     const tracksFor = opts.tracksFor ?? ((m) => m === "advanced" ? TRACKS_ADVANCED : TRACKS_SIMPLE);
     const labels = {
-      simple: opts.labels?.simple ?? "\u30B7\u30F3\u30D7\u30EB",
-      advanced: opts.labels?.advanced ?? "\u30A2\u30C9\u30D0\u30F3\u30B9"
+      simple: opts.labels?.simple ?? "\u521D\u5FC3\u8005",
+      advanced: opts.labels?.advanced ?? "\u4E0A\u7D1A\u8005"
     };
     const editorOptionsFor = (mode) => typeof opts.editorOptions === "function" ? opts.editorOptions(mode) : opts.editorOptions ?? {};
     let currentMode = opts.mode ?? "simple";
@@ -10569,7 +10845,7 @@ var createDtmStudio = async (options = {}) => {
     if (opts.label !== null) {
       const lab = doc.createElement("span");
       lab.className = "dtm-controlbar-label";
-      lab.textContent = opts.label ?? "MODE";
+      lab.textContent = opts.label ?? "\u30E2\u30FC\u30C9";
       wrapper.appendChild(lab);
     }
     const seg = doc.createElement("div");
@@ -10600,7 +10876,15 @@ var createDtmStudio = async (options = {}) => {
         ...editorOpts,
         mode,
         tracks: tracksFor(mode),
-        initialMML: mml ?? editorOpts.initialMML
+        initialMML: mml ?? editorOpts.initialMML,
+        onRequestAdvancedMode: (pendingMml, applyMidi) => {
+          doUnmount();
+          currentMode = "advanced";
+          updateButtons();
+          opts.onChange?.("advanced");
+          doMount("advanced", pendingMml);
+          if (applyMidi && daw) applyMidi(daw);
+        }
       });
       attachWrapper();
       opts.onMount?.(daw, mode);
@@ -10650,24 +10934,44 @@ var createDtmStudio = async (options = {}) => {
       (idx) => getRoleForTrackIndex(idx, isAdvancedMode ? "advanced" : "simple")
     );
     const loadTrackIds = trackIds.length > 0 ? trackIds : [...TRACK_ROLES];
-    void loadPreset(
-      playerPreset,
-      loadTrackIds,
-      isAdvancedMode ? "advanced" : "simple"
-    );
-    const playPlayerNote = (e) => {
-      const idx = Number(e.trackId);
-      const role = getRoleForTrackIndex(
-        idx,
-        isAdvancedMode ? "advanced" : "simple"
-      );
-      const sf2 = resolveSoundFont(
+    const playerTrackInstKeys = /* @__PURE__ */ new Map();
+    const loadPlayerTrackInstruments = async () => {
+      if (!meta.trackInstruments) return;
+      await listReady;
+      for (const [idxStr, name] of Object.entries(meta.trackInstruments)) {
+        const key = resolveNameToKey(name);
+        if (!key) continue;
+        playerTrackInstKeys.set(Number(idxStr), key);
+        await loadInstrument(key);
+      }
+    };
+    void Promise.all([
+      loadPreset(
         playerPreset,
-        role,
+        loadTrackIds,
         isAdvancedMode ? "advanced" : "simple"
-      );
-      if (!sf2) return;
-      sf2.play({
+      ),
+      loadPlayerTrackInstruments()
+    ]);
+    const playPlayerNote = (e) => {
+      const idx = Number(e.trackId);
+      const overrideKey = playerTrackInstKeys.get(idx);
+      let sfInst;
+      if (overrideKey) {
+        sfInst = soundFonts.get(overrideKey);
+      } else {
+        const role = getRoleForTrackIndex(
+          idx,
+          isAdvancedMode ? "advanced" : "simple"
+        );
+        sfInst = resolveSoundFont(
+          playerPreset,
+          role,
+          isAdvancedMode ? "advanced" : "simple"
+        );
+      }
+      if (!sfInst) return;
+      sfInst.play({
         ctx: audioCtx,
         destination: masterGain,
         pitch: e.pitch,
@@ -10725,6 +11029,7 @@ export {
   DRUM_FONT,
   DRUM_KEYS,
   DRUM_PATTERNS,
+  GM_INSTRUMENT_NAMES,
   INSTRUMENT_PRESETS,
   KOE_BASE_URL,
   KOE_VOICEBANKS,