@onjmin/dtm 1.0.7 → 2.0.2

package/dist/index.mjs

@@ -148,7 +148,7 @@ async function buildNameToKeyMapping() {
 }
 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.4/node_modules/@onjmin/chord-parser/dist/index.mjs
+// node_modules/.pnpm/@onjmin+chord-parser@1.1.1/node_modules/@onjmin/chord-parser/dist/index.mjs
 var SHARP_NAMES = [
   "C",
   "C#",
@@ -179,6 +179,10 @@ var FLAT_NAMES = [
 ];
 var toPitchClass = (n) => (n % 12 + 12) % 12;
 var noteName = (pc, flat = false) => (flat ? FLAT_NAMES : SHARP_NAMES)[toPitchClass(pc)];
+var LETTER_FIFTH = [0, 2, 4, -1, 1, 3, 5];
+var DEGREE_FIFTH = [0, 2, 4, -1, 1, 3, 5];
+var deg2fifth = (deg) => DEGREE_FIFTH[(deg - 1) % 7];
+var HALF_FIFTH = 7;
 var SyntaxErrorWithPos = class extends Error {
   constructor(input, msg) {
     super(
@@ -225,6 +229,16 @@ var Input = class _Input {
 };
 var Output = class {
   pitch = null;
+  /** ルート音の五度圏インデックス。`pitch` と対で持つ。 */
+  rootFifth = 0;
+  /**
+   * 構成音の五度圏オフセット。キーは「ルートからの相対半音 mod 12」。
+   *
+   * 五度圏インデックスはオクターブ不変なので、分数コードのオクターブシフト
+   * （`value` の配列を ±12 する処理）の影響を受けない。そのため構成音の集合とは
+   * 別にこの対応表を持っておけば、配列操作側に手を入れずに綴りを保てる。
+   */
+  relFifths = /* @__PURE__ */ new Map();
   chord = null;
   isChord = false;
   pending = null;
@@ -308,9 +322,17 @@ var parseFormula = (input, output = new Output(), nest = 0) => {
       case DIVIDE: {
         const o = parseFormula(input, new Output(), nest);
         const v = [...output.value];
+        const rebase = (semi, fifth) => noteFifth(
+          output,
+          semi - output.pitch,
+          fifth - output.rootFifth
+        );
         if (o.isChord) {
+          for (const [rel, f] of o.relFifths)
+            rebase(o.pitch + rel, o.rootFifth + f);
           output.value = [...o.value].concat(v);
         } else {
+          rebase(o.pitch, o.rootFifth);
           const a = v.sort((x2, y) => x2 - y);
           const pitch = (o.pitch + 3) % 12 - 3;
           if (a[0] < pitch) {
@@ -357,63 +379,91 @@ var parsePitch = (input, output) => {
   const pitch = pitchMatcher.parse(input);
   if (pitch === null) err(input, "Not found pitch");
   output.pitch = pitch;
+  output.rootFifth = LETTER_FIFTH[idx2pitch.slice(0, 7).indexOf(pitch)];
   for (let i2 = 0; i2 < 2; i2++) {
     const half = parseHalf(input, true);
     if (half === null) break;
     output.pitch += half;
+    output.rootFifth += half * HALF_FIFTH;
   }
   return parseBase(input, output);
 };
+var noteFifth = (out, semi, fifth) => {
+  out.relFifths.set((semi % 12 + 12) % 12, fifth);
+};
 var MAJOR = [0, 4, 7];
 var DIM = [0, 3, 6];
+var BASE_FIFTHS = /* @__PURE__ */ new Map();
+var MINOR = [0, 3, 7];
+var AUG = [0, 4, 8];
+var HALF_DIM = [0, 3, 6, 10];
+BASE_FIFTHS.set(MAJOR, [0, 4, 1]);
+BASE_FIFTHS.set(MINOR, [0, -3, 1]);
+BASE_FIFTHS.set(DIM, [0, -3, -6]);
+BASE_FIFTHS.set(AUG, [0, 4, 8]);
+BASE_FIFTHS.set(HALF_DIM, [0, -3, -6, -2]);
 var baseMatcher = new Matcher();
-baseMatcher.set(["m", "min", "Min", "minor", "Minor", "-"], [0, 3, 7]);
+baseMatcher.set(["m", "min", "Min", "minor", "Minor", "-"], MINOR);
 baseMatcher.set(["dim", "\u3007"], DIM);
-baseMatcher.set("+", [0, 4, 8]);
-baseMatcher.set(["\u03A6", "\u03C6", "\xF8"], [0, 3, 6, 10]);
+baseMatcher.set("+", AUG);
+baseMatcher.set(["\u03A6", "\u03C6", "\xF8"], HALF_DIM);
 var parseBase = (input, output) => {
   const isMajMarker = /^maj/i.test(input.str.slice(input.idx));
   const res = isMajMarker ? null : baseMatcher.parse(input);
   if (res !== null) output.isChord = true;
-  output.chord = new Set(res || MAJOR);
+  const base = res || MAJOR;
+  output.chord = new Set(base);
+  const baseFifths = BASE_FIFTHS.get(base);
+  if (baseFifths)
+    for (const [i2, semi] of base.entries())
+      noteFifth(output, semi, baseFifths[i2]);
   if (res === DIM) {
     const { num } = input;
     const chord = output.chord;
-    if (num !== null) chord.add(deg2pitch(num) - 2);
+    if (num !== null) {
+      chord.add(deg2pitch(num) - 2);
+      noteFifth(output, deg2pitch(num) - 2, deg2fifth(num) - 2 * HALF_FIFTH);
+    }
   }
   output.nest = input.nest;
   return parseTerm(input, output);
 };
-var add = (chord, n, half) => {
-  chord.add(deg2pitch(n) + half);
+var put = (chord, out, deg, half = 0) => {
+  chord.add(deg2pitch(deg) + half);
+  noteFifth(out, deg2pitch(deg) + half, deg2fifth(deg) + half * HALF_FIFTH);
 };
-var aug = (chord) => {
+var add = (chord, n, half, out) => {
+  put(chord, out, n, half);
+};
+var aug = (chord, out) => {
   chord.delete(deg2pitch(5));
-  chord.add(deg2pitch(5) + 1);
+  put(chord, out, 5, 1);
 };
-var _7th = (chord, n, _half2, isFlat = false) => {
+var _7th = (chord, n, _half2, out, isFlat = false) => {
   if (n === 5) chord.delete(deg2pitch(3));
-  else if (n === 6) chord.add(deg2pitch(6));
-  else if (n === 69) chord.add(deg2pitch(6)).add(deg2pitch(9));
-  else {
-    if (n >= 7) chord.add(deg2pitch(7) + (isFlat ? -1 : 0));
-    if (n >= 9) chord.add(deg2pitch(9));
-    if (n >= 11) chord.add(deg2pitch(11));
-    if (n >= 13) chord.add(deg2pitch(13));
+  else if (n === 6) put(chord, out, 6);
+  else if (n === 69) {
+    put(chord, out, 6);
+    put(chord, out, 9);
+  } else {
+    if (n >= 7) put(chord, out, 7, isFlat ? -1 : 0);
+    if (n >= 9) put(chord, out, 9);
+    if (n >= 11) put(chord, out, 11);
+    if (n >= 13) put(chord, out, 13);
   }
 };
-var _half = (chord, n, half) => {
+var _half = (chord, n, half, out) => {
   chord.delete(deg2pitch(n));
-  chord.add(deg2pitch(n) + half);
+  put(chord, out, n, half);
 };
 var funcMatcher = new Matcher();
 funcMatcher.set("add", add);
 funcMatcher.set(["omit", "no"], (chord, n, half) => {
   chord.delete(deg2pitch(n) + half);
 });
-funcMatcher.set("sus", (chord, n, half) => {
+funcMatcher.set("sus", (chord, n, half, out) => {
   chord.delete(deg2pitch(3));
-  chord.add(deg2pitch(n) + half);
+  put(chord, out, n, half);
 });
 funcMatcher.set(
   ["M", "maj", "Maj", "major", "Major", "\u25B3", "\u0394"],
@@ -429,17 +479,18 @@ var parseFunc = (input, output) => {
     const half = parseHalf(input);
     const { num } = input;
     if (num === null) {
-      if (isAug) aug(chord);
+      if (isAug) aug(chord, output);
       else err(input, "Not found number");
     }
     if (half === null) {
-      if (input.nest === output.nest) _7th(chord, num, 0, true);
-      else add(chord, num, 0);
+      if (input.nest === output.nest)
+        _7th(chord, num, 0, output, true);
+      else add(chord, num, 0, output);
     } else {
-      _half(chord, num, half);
+      _half(chord, num, half, output);
     }
   } else if (func === aug) {
-    aug(chord);
+    aug(chord, output);
   } else {
     output.pending = func;
   }
@@ -453,7 +504,8 @@ var parsePending = (input, output) => {
   pending(
     chord,
     num,
-    half === null ? 0 : half
+    half === null ? 0 : half,
+    output
   );
   output.pending = null;
   return parseTerm(input, output);
@@ -465,12 +517,29 @@ var parseChord = (symbol) => {
   const pitchClasses = [...new Set(notes.map(toPitchClass))].sort(
     (a, b) => a - b
   );
+  const rootPitch = output.pitch;
+  const rootFifth = output.rootFifth;
+  const noteFifths = notes.map((n) => {
+    const rel = ((n - rootPitch) % 12 + 12) % 12;
+    const f = output.relFifths.get(rel);
+    if (f !== void 0) return rootFifth + f;
+    let best = 0;
+    for (let k = -6; k <= 6; k++) {
+      if ((k * 7 % 12 + 12) % 12 === rel) {
+        best = k;
+        break;
+      }
+    }
+    return rootFifth + best;
+  });
   return {
     symbol,
-    root: toPitchClass(output.pitch),
+    root: toPitchClass(rootPitch),
     notes,
     pitchClasses,
-    intervals
+    intervals,
+    rootFifth,
+    noteFifths
   };
 };
 var QUALITY_SOURCE = [
@@ -1499,10 +1568,72 @@ var createChannelStrip = (ctx, destination, options = {}) => {
   };
 };
 
+// src/tuning.ts
+var UNITS_PER_OCTAVE = 372;
+var UNITS_PER_SEMITONE = 372 / 12;
+var UNITS_PER_EDO31_DEGREE = 372 / 31;
+var CENTS_PER_UNIT = 1200 / UNITS_PER_OCTAVE;
+var A4_UNITS = 69 * UNITS_PER_SEMITONE;
+var A4_HZ = 440;
+var DEFAULT_EDO = 12;
+var unitsPerStep = (edo) => UNITS_PER_OCTAVE / edo;
+var midiToUnits = (midi) => midi * UNITS_PER_SEMITONE;
+var unitsToMidi = (units) => units / UNITS_PER_SEMITONE;
+var unitsToHz = (units) => A4_HZ * 2 ** ((units - A4_UNITS) / UNITS_PER_OCTAVE);
+var unitsToMidiDetune = (units) => {
+  const midi = Math.round(units / UNITS_PER_SEMITONE);
+  return {
+    midi,
+    detuneCents: (units - midi * UNITS_PER_SEMITONE) * CENTS_PER_UNIT
+  };
+};
+var NATURAL_STEPS = {
+  12: { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 },
+  31: { c: 0, d: 5, e: 10, f: 13, g: 18, a: 23, b: 28 }
+};
+var chromaticStep = (edo) => edo === 31 ? 2 : 1;
+var MICRO_STEP = 1;
+var isNaturalLetter = (ch) => Object.hasOwn(NATURAL_STEPS[12], ch);
+var naturalStep = (ch, edo) => NATURAL_STEPS[edo][ch] ?? null;
+var spellingToUnits = (letter, octave, chromatic, micro, edo) => {
+  const step = naturalStep(letter, edo);
+  if (step === null) return null;
+  const perStep = unitsPerStep(edo);
+  const stepsFromC = step + chromatic * chromaticStep(edo) + micro * MICRO_STEP;
+  return (octave + 1) * UNITS_PER_OCTAVE + stepsFromC * perStep;
+};
+var FIFTH_STEPS = { 12: 7, 31: 18 };
+var fifthToStep = (fifthIndex, edo) => {
+  const n = fifthIndex * FIFTH_STEPS[edo];
+  return (n % edo + edo) % edo;
+};
+var fifthToUnits = (fifthIndex, edo) => fifthToStep(fifthIndex, edo) * unitsPerStep(edo);
+var PITCH_ENCODING_VERSION = 2;
+var pitchV1ToUnits = (pitch) => pitch * UNITS_PER_SEMITONE;
+var unitsToPitchV1 = (units) => Math.round(units / UNITS_PER_SEMITONE);
+
 // src/chords.ts
 var C3 = 48;
+var MEANTONE_STEP_BY_SEMITONE = [0, 3, 5, 8, 10, 13, 16, 18, 21, 23, 26, 28];
+var chordToneToUnits = (relSemitone, relFifth, rootSemitone, rootFifth, edo) => {
+  const perStep = UNITS_PER_OCTAVE / edo;
+  const rootOct = Math.floor(rootSemitone / 12);
+  const rootWithin = (rootSemitone % 12 + 12) % 12;
+  const rootStep = edo === 31 ? (fifthToStep(rootFifth, 31) + MEANTONE_STEP_BY_SEMITONE[rootWithin] - fifthToStep(rootFifth, 31) + 31) % 31 : rootWithin;
+  const relWithin12 = (relSemitone % 12 + 12) % 12;
+  const relOct = Math.round((relSemitone - relWithin12) / 12);
+  const relStep = (fifthToStep(relFifth, edo) - fifthToStep(rootFifth, edo) + edo) % edo;
+  return (rootOct + relOct) * UNITS_PER_OCTAVE + (rootStep + relStep) * perStep;
+};
 var buildChordPlacements = (options) => {
-  const { chordStr, patternType, rootShift, bpm, stepsPerBar } = options;
+  const {
+    chordStr,
+    patternType,
+    rootShift,
+    bpm,
+    stepsPerBar,
+    edo = 12
+  } = options;
   const placements = [];
   if (!chordStr.trim()) return placements;
   const offset = rootShift;
@@ -1531,8 +1662,20 @@ var buildChordPlacements = (options) => {
     for (const group of Object.values(chordGroups)) {
       for (const chord of group) {
         let notes;
+        let toUnits;
         try {
-          notes = [...parseChord(`${chord.key}${chord.chord}`).notes];
+          const parsed = parseChord(`${chord.key}${chord.chord}`);
+          notes = [...parsed.notes];
+          const fifthOf = new Map(
+            parsed.notes.map((n, i2) => [n, parsed.noteFifths[i2]])
+          );
+          toUnits = (rel) => chordToneToUnits(
+            rel,
+            fifthOf.get(rel) ?? parsed.rootFifth,
+            C3 + offset,
+            parsed.rootFifth,
+            edo === 31 ? 31 : 12
+          );
         } catch {
           continue;
         }
@@ -1541,7 +1684,7 @@ var buildChordPlacements = (options) => {
           for (const noteOffset of notes) {
             placements.push({
               startStep: chord.whenStep,
-              pitch: C3 + noteOffset + offset,
+              pitchUnits: toUnits(noteOffset),
               durationSteps: noteLength,
               velocity: 100
             });
@@ -1551,7 +1694,7 @@ var buildChordPlacements = (options) => {
           notes.forEach((noteOffset, i2) => {
             placements.push({
               startStep: chord.whenStep + i2 * arpInterval,
-              pitch: C3 + noteOffset + offset,
+              pitchUnits: toUnits(noteOffset),
               durationSteps: noteLength - i2 * arpInterval,
               velocity: 100
             });
@@ -1561,7 +1704,7 @@ var buildChordPlacements = (options) => {
           notes.forEach((noteOffset, i2) => {
             placements.push({
               startStep: chord.whenStep + i2 * arpInterval,
-              pitch: C3 + noteOffset + offset,
+              pitchUnits: toUnits(noteOffset),
               durationSteps: Math.max(12, noteLength - i2 * arpInterval),
               velocity: 100
             });
@@ -1575,7 +1718,7 @@ var buildChordPlacements = (options) => {
               for (const noteOffset of notes) {
                 placements.push({
                   startStep: syncopatedStep,
-                  pitch: C3 + noteOffset + offset,
+                  pitchUnits: toUnits(noteOffset),
                   durationSteps: Math.min(halfBeat, 12),
                   velocity: 100
                 });
@@ -1594,7 +1737,7 @@ var buildChordPlacements = (options) => {
               for (const noteOffset of notes) {
                 placements.push({
                   startStep: noteStart,
-                  pitch: C3 + noteOffset + offset,
+                  pitchUnits: toUnits(noteOffset),
                   durationSteps: yatsumeLengthSteps,
                   velocity: 100
                 });
@@ -1606,7 +1749,7 @@ var buildChordPlacements = (options) => {
             const stepOffset = i2 * Math.floor(stepsPerBar / 4);
             placements.push({
               startStep: chord.whenStep + stepOffset,
-              pitch: C3 + noteOffset + offset,
+              pitchUnits: toUnits(noteOffset),
               durationSteps: Math.max(12, Math.floor(stepsPerBar / 4)),
               velocity: 100
             });
@@ -1618,8 +1761,20 @@ var buildChordPlacements = (options) => {
     const chordNames = chordStr.split(/[\s,]+/).filter((c) => c);
     chordNames.forEach((chordName, barIndex) => {
       let notes;
+      let toUnits;
       try {
-        notes = [...parseChord(chordName).notes];
+        const parsed = parseChord(chordName);
+        notes = [...parsed.notes];
+        const fifthOf = new Map(
+          parsed.notes.map((n, i2) => [n, parsed.noteFifths[i2]])
+        );
+        toUnits = (rel) => chordToneToUnits(
+          rel,
+          fifthOf.get(rel) ?? parsed.rootFifth,
+          C3 + offset,
+          parsed.rootFifth,
+          edo === 31 ? 31 : 12
+        );
       } catch {
         return;
       }
@@ -1629,7 +1784,7 @@ var buildChordPlacements = (options) => {
         const stepOffset = i2 * 3;
         placements.push({
           startStep: startStep + stepOffset,
-          pitch: C3 + noteOffset + offset,
+          pitchUnits: toUnits(noteOffset),
           durationSteps: chordLength - stepOffset,
           velocity: 100
         });
@@ -2161,6 +2316,11 @@ var DEFAULT_VELOCITY = 100;
 var DEFAULT_PLAYBACK_VELOCITY = 127;
 var DEFAULT_STEPS_PER_BAR = 192;
 var MML_END_MARKER = "#end;";
+var PITCH_RANGE_START = 0;
+var PITCH_RANGE_END = 3937;
+var unitsPerRow = (edo) => 372 / edo;
+var keyCountFor = (edo) => Math.floor((PITCH_RANGE_END - PITCH_RANGE_START) / unitsPerRow(edo)) + 1;
+var KEY_COUNT = keyCountFor(12);
 
 // src/vibrato.ts
 var VIBRATO_MIN_SEC = 0.35;
@@ -2560,7 +2720,8 @@ var FORMANTS = {
   // 撥音(ん)は鼻音寄りの低フォルマント
   N: [250, 1e3]
 };
-var midiToFreq = (m) => 440 * 2 ** ((m - 69) / 12);
+var unitsToFreq = (units) => 440 * 2 ** ((units - 2139) / 372);
+var unitsToMidiFloat = (units) => units / 31;
 var createKlattVoice = (ctx, destination, reverbBus, delayBus) => {
   const active = /* @__PURE__ */ new Set();
   const voice = (syllable, e) => {
@@ -2594,7 +2755,7 @@ var createKlattVoice = (ctx, destination, reverbBus, delayBus) => {
     }
     const osc = ctx.createOscillator();
     osc.type = "sawtooth";
-    osc.frequency.value = midiToFreq(e.pitch);
+    osc.frequency.value = unitsToFreq(e.pitchUnits);
     const makeFormant = (freq, q2, gainScale) => {
       const filter = ctx.createBiquadFilter();
       filter.type = "bandpass";
@@ -2846,7 +3007,7 @@ var createLocalBackend = async (options) => {
     if (!consonantPcm || !vowelPcm) return null;
     const spliced = spliceCompositePcm(consonantPcm, vowelPcm, KOE_SAMPLE_RATE);
     if (!spliced) return null;
-    const targetHz = midiToFreq(pitch);
+    const targetHz = unitsToFreq(pitch);
     const audio = worldline.renderNote({
       pcm: spliced.pcm,
       pitch: vibrato ? vibratoPitchCurve(targetHz, spliced.preMs) : targetHz,
@@ -2875,7 +3036,7 @@ var createLocalBackend = async (options) => {
     if (!pcm || pcm.length === 0) return null;
     const entry = bank.manifest.phonemes[alias];
     const lead = leadInFromEntry(entry);
-    const targetHz = midiToFreq(pitch);
+    const targetHz = unitsToFreq(pitch);
     if (worldline) {
       const audio = worldline.renderNote({
         pcm,
@@ -3082,7 +3243,7 @@ var createKoeVoice = async (ctx, destination, options) => {
       backend.pitchTokens,
       syllable,
       prevVowel,
-      e.pitch
+      unitsToMidiFloat(e.pitchUnits)
     );
     if (syllable.vowel && syllable.vowel !== "N") prevVowel = syllable.vowel;
     if (!alias) return;
@@ -3090,7 +3251,7 @@ var createKoeVoice = async (ctx, destination, options) => {
     const peak = Math.max(1e-4, e.volume);
     const pan = e.pan ?? 0;
     const durationMs = Math.max(60, e.duration * 1e3);
-    void renderInto(alias, e.pitch, durationMs).then((r) => {
+    void renderInto(alias, e.pitchUnits, durationMs).then((r) => {
       if (r)
         schedule(r, t0, peak, pan, e.reverbSend, e.delaySend, e.destination);
     });
@@ -3102,7 +3263,10 @@ var createKoeVoice = async (ctx, destination, options) => {
       backend.pitchTokens,
       syllable,
       prevVowelArg,
-      pitch
+      // 多音階バンクのピッチトークン（"_G4" 等）は録音の音名なので、
+      // 最寄り選択はMIDIノート番号の尺度で行う。units のまま渡すと常に
+      // 最高音のトークンが選ばれてしまう。
+      unitsToMidiFloat(pitch)
     );
     if (!alias) return null;
     const dMs = Math.max(60, durationMs);
@@ -3134,13 +3298,14 @@ var STREAM_LOOKAHEAD_SEC = 1.5;
 var STREAM_POLL_MS = 100;
 var OCTAVE_UNISON_PEAK_SCALE = 0.6;
 var octaveUnisonOffsets = (mode) => {
+  const OCT = 372;
   switch (mode) {
     case "down":
-      return [-12];
+      return [-OCT];
     case "up":
-      return [12];
+      return [OCT];
     case "both":
-      return [-12, 12];
+      return [-OCT, OCT];
     default:
       return [];
   }
@@ -3350,7 +3515,7 @@ var createSingingVoices = (ctx, destination, options = {}) => {
               const effPeak = (dest ? peak * masterVolumeScalar : peak) * peakScale;
               model(note.syllable, {
                 trackId: track.id ?? "",
-                pitch,
+                pitchUnits: pitch,
                 velocity: 100,
                 volume: effPeak,
                 when,
@@ -3416,17 +3581,13 @@ var createVoiceRegistry = (models = {}, fallback = "klatt") => {
 };
 
 // src/mml-parser.ts
-var PITCH_MAP = {
-  c: 0,
-  d: 2,
-  e: 4,
-  f: 5,
-  g: 7,
-  a: 9,
-  b: 11
+var NATURAL_STEPS2 = {
+  12: { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 },
+  31: { c: 0, d: 5, e: 10, f: 13, g: 18, a: 23, b: 28 }
 };
+var isNatural = (ch) => Object.hasOwn(NATURAL_STEPS2[12], ch);
 var clamp3 = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
-var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode)=([\w-]+)/gi;
+var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode|edo)=([\w-]+)/gi;
 var TRACK_INST_DIRECTIVE = /#t(\d+)inst=([^#;\r\n]+)/gi;
 var TRACK_COMP_DIRECTIVE = /#t(\d+)comp=(\d+)/gi;
 var TRACK_WIDTH_DIRECTIVE = /#t(\d+)width=(\d+)/gi;
@@ -3476,6 +3637,9 @@ var parseMmlMeta = (mml) => {
       if (m[2] === "simple" || m[2] === "advanced") {
         meta.mode = m[2];
       }
+    } else if (key === "edo") {
+      const e = Number.parseInt(m[2], 10);
+      if (e === 12 || e === 31) meta.edo = e;
     }
   }
   for (const m of mml.matchAll(TRACK_INST_DIRECTIVE)) {
@@ -3578,6 +3742,7 @@ var formatMmlMeta = (meta, space = "") => {
   if (meta.fadeOut !== void 0 && meta.fadeOut !== 0)
     parts.push(`#fadeout=${meta.fadeOut}`);
   if (meta.mode) parts.push(`#mode=${meta.mode}`);
+  if (meta.edo !== void 0 && meta.edo !== 12) parts.push(`#edo=${meta.edo}`);
   if (meta.trackInstruments) {
     for (const [idx, name] of Object.entries(meta.trackInstruments)) {
       if (name) parts.push(`#t${idx}inst=${name}`);
@@ -3652,6 +3817,10 @@ var parseMML = (mml, options = {}) => {
   const endMarkerBase = MML_END_MARKER.replace(/;+$/, "");
   const endRegex = new RegExp(`(?<![cdafgCDAFG])${endMarkerBase}\\b;?`, "gi");
   const fullMML = stripLyrics(noMeta).replace(endRegex, "").replace(/[\n\r]+/g, " ").trim();
+  const edo = meta.edo === 31 ? 31 : 12;
+  const naturals = NATURAL_STEPS2[edo];
+  const unitsPerStep2 = 372 / edo;
+  const chromaticStep2 = edo === 31 ? 2 : 1;
   const parts = fullMML.split(/(@\d+)/).filter((p) => p.trim().length > 0);
   let trackIndex = 0;
   let sourceTrackIndex = 0;
@@ -3699,6 +3868,19 @@ var parseMML = (mml, options = {}) => {
         type
       });
     };
+    const readAccidentals = () => {
+      let delta = 0;
+      while (j < body.length) {
+        const a = body[j];
+        if (a === "#") delta += chromaticStep2;
+        else if (a === "-") delta -= chromaticStep2;
+        else if (a === "+") delta += edo === 31 ? 1 : chromaticStep2;
+        else if (a === "_") delta -= edo === 31 ? 1 : chromaticStep2;
+        else break;
+        j++;
+      }
+      return delta;
+    };
     const parseLength = () => {
       let numStr = "";
       while (j < body.length && /\d/.test(body[j])) {
@@ -3770,17 +3952,11 @@ var parseMML = (mml, options = {}) => {
         const savedOctave = octave;
         while (j < body.length && body[j] !== "]") {
           const c = body[j];
-          if (Object.hasOwn(PITCH_MAP, c)) {
-            let pitch = PITCH_MAP[c];
+          if (isNatural(c)) {
+            let pitchSteps = naturals[c];
             j++;
-            if (j < body.length && (body[j] === "#" || body[j] === "+")) {
-              pitch++;
-              j++;
-            } else if (j < body.length && body[j] === "-") {
-              pitch--;
-              j++;
-            }
-            chordNotes.push((octave + 1) * 12 + pitch);
+            pitchSteps += readAccidentals();
+            chordNotes.push((octave + 1) * 372 + pitchSteps * unitsPerStep2);
           } else if (c === ">") {
             octave = Math.min(8, octave + 1);
             j++;
@@ -3806,7 +3982,7 @@ var parseMML = (mml, options = {}) => {
           placements.push({
             trackIndex,
             startStep: currentStep,
-            pitch: p,
+            pitchUnits: p,
             durationSteps: Math.max(1, steps),
             velocity
           });
@@ -3814,23 +3990,17 @@ var parseMML = (mml, options = {}) => {
         pushTok("chord", currentStep, Math.max(1, steps), tokStart);
         currentStep += steps;
         octave = savedOctave;
-      } else if (Object.hasOwn(PITCH_MAP, ch)) {
-        let pitch = PITCH_MAP[ch];
+      } else if (isNatural(ch)) {
+        let pitchSteps = naturals[ch];
         j++;
-        if (j < body.length && (body[j] === "#" || body[j] === "+")) {
-          pitch++;
-          j++;
-        } else if (j < body.length && body[j] === "-") {
-          pitch--;
-          j++;
-        }
-        const midiPitch = (octave + 1) * 12 + pitch;
+        pitchSteps += readAccidentals();
+        const midiPitch = (octave + 1) * 372 + pitchSteps * unitsPerStep2;
         const steps = parseLength();
         recordContributor();
         placements.push({
           trackIndex,
           startStep: currentStep,
-          pitch: midiPitch,
+          pitchUnits: midiPitch,
           durationSteps: Math.max(1, steps),
           velocity
         });
@@ -3962,7 +4132,7 @@ var createSequencer = (options) => {
         maxEndStep = Math.max(maxEndStep, note.startStep + note.durationSteps);
         timeline.push({
           trackId: track.id,
-          pitch: note.pitch,
+          pitch: note.pitchUnits,
           volume: track.volume / 100,
           velocity: note.velocity ?? DEFAULT_PLAYBACK_VELOCITY,
           when,
@@ -4025,7 +4195,7 @@ var createSequencer = (options) => {
       const currentVolume = (trackVolumeMap.get(ev.trackId) ?? ev.volume * 100) / 100;
       options.onPlayNote({
         trackId: ev.trackId,
-        pitch: ev.pitch,
+        pitchUnits: ev.pitch,
         velocity: ev.velocity,
         volume: currentVolume * velocityVolume,
         when: Math.max(0, _when),
@@ -6345,7 +6515,7 @@ var SONG_DRUM_PATTERNS = {
 };
 
 // src/synth.ts
-var freqFromPitch = (pitch) => 440 * 2 ** ((pitch - 69) / 12);
+var freqFromPitch = (pitchUnits) => unitsToHz(pitchUnits);
 var createSynth = (ctx, destination = ctx.destination, tone = {}) => {
   const wave = tone.wave ?? "square";
   const attack = tone.attack ?? 0;
@@ -6361,7 +6531,7 @@ var createSynth = (ctx, destination = ctx.destination, tone = {}) => {
     const osc = ctx.createOscillator();
     const gain = ctx.createGain();
     osc.type = wave;
-    osc.frequency.value = freqFromPitch(e.pitch);
+    osc.frequency.value = freqFromPitch(e.pitchUnits);
     const t0 = ctx.currentTime + e.when;
     const peak = Math.max(1e-4, 0.06 * e.volume * 1.5 * gainScale);
     if (tone.decay) {
@@ -6466,7 +6636,7 @@ var playPlacements = (placements, options) => {
       id: id++,
       startStep: p.startStep,
       durationSteps: p.durationSteps,
-      pitch: p.pitch,
+      pitchUnits: p.pitchUnits,
       velocity: p.velocity
     }));
     return {
@@ -6637,7 +6807,7 @@ var playNote = (options) => {
   const dur = options.duration ?? 1;
   synth.playNote({
     trackId: "melody",
-    pitch: options.pitch,
+    pitchUnits: options.pitchUnits,
     velocity: 100,
     volume: vol / 100,
     when: 0,
@@ -6658,7 +6828,7 @@ var playChords = (chordStr, options = {}) => {
     // 伴奏トラック
     startStep: p.startStep,
     durationSteps: p.durationSteps,
-    pitch: p.pitch,
+    pitchUnits: p.pitchUnits,
     velocity: p.velocity
   }));
   return playPlacements(placements, {
@@ -7191,38 +7361,66 @@ var DAW_CSS = `
   flex-basis: 100%;
   display: flex;
   flex-wrap: nowrap;
-  gap: 3px;
+  gap: 4px;
+  align-items: flex-end;
 }
 .dtm-pill {
   --dtm-pill-color: var(--dtm-primary);
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 1 1 0;
   min-width: 0;
-  height: 26px;
+  height: 24px;
   padding: 0;
   border: 2px solid var(--c-black);
-  background: color-mix(in srgb, var(--dtm-pill-color) 40%, black);
-  color: var(--c-white);
+  background: color-mix(in srgb, var(--dtm-pill-color) 22%, #0e121e);
+  color: color-mix(in srgb, var(--c-white) 60%, transparent);
   font-family: var(--dtm-font);
   font-size: 11px;
   font-weight: bold;
   cursor: pointer;
-  box-shadow: 2px 2px 0 var(--c-black);
-  opacity: 0.7;
+  box-shadow: 1px 1px 0 var(--c-black);
+  opacity: 0.55;
+  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
 }
-/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u4E0D\u900F\u660E + \u91D1\u67A0 */
+.dtm-pill:hover:not(.dtm-pill--active) {
+  opacity: 0.85;
+  background: color-mix(in srgb, var(--dtm-pill-color) 45%, #0e121e);
+  color: var(--c-white);
+}
+/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u9BAE\u660E\u306A\u30C8\u30E9\u30C3\u30AF\u8272 + \u30B4\u30FC\u30EB\u30C9\u67A0 + \u30B0\u30ED\u30FC + \u4E0A\u6607\u7ACB\u4F53\u30BF\u30D6\u8868\u73FE */
 .dtm-pill--active {
   opacity: 1;
+  height: 28px;
+  background: var(--dtm-pill-color);
+  color: #ffffff;
+  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
   border-color: var(--dtm-gold);
-  box-shadow: 0 0 0 1px var(--dtm-gold), 2px 2px 0 var(--c-black);
+  box-shadow:
+    0 0 0 1.5px var(--dtm-gold),
+    0 0 10px color-mix(in srgb, var(--dtm-pill-color) 70%, transparent),
+    2px 2px 0 var(--c-black);
+  z-index: 1;
+  transform: translateY(-2px);
 }
-.dtm-pill:not(.dtm-pill--active):active { transform: translate(2px,2px); box-shadow: none; }
+.dtm-pill--active::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: 2px;
+  right: 2px;
+  height: 2px;
+  background: #ffffff;
+  border-radius: 1px;
+  opacity: 0.85;
+}
+.dtm-pill:not(.dtm-pill--active):active { transform: translate(1px,1px); box-shadow: none; }
 /* \u518D\u751F\u4E2D\u3001\u5B9F\u969B\u306B\u767A\u97F3\u3057\u305F\u77AC\u9593\u3060\u3051\u70B9\u706F\uFF08\u3069\u306E\u30BF\u30D6\u304C\u4ECA\u9CF4\u3063\u3066\u3044\u308B\u304B\u8996\u899A\u7684\u306B\u5206\u304B\u308B\u3088\u3046\u306B\uFF09 */
 .dtm-pill--sounding {
-  background: color-mix(in srgb, var(--dtm-pill-color) 85%, white);
-  transition: background 30ms linear;
+  filter: brightness(1.6);
+  transition: filter 30ms linear;
 }
 
 /* \u2500\u2500\u2500 \u30D4\u30A2\u30CE\u30ED\u30FC\u30EB\uFF08\u30C8\u30E9\u30C3\u30AB\u30FC\u98A8\uFF09 \u2500\u2500\u2500 */
@@ -7328,6 +7526,49 @@ var DAW_CSS = `
 .dtm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .dtm-track-body { display: flex; flex-direction: column; gap: 10px; }
 
+/* \u2500\u2500\u2500 \u30A2\u30AF\u30C6\u30A3\u30D6\u30C8\u30E9\u30C3\u30AF\u60C5\u5831\u30D0\u30CA\u30FC \u2500\u2500\u2500 */
+.dtm-active-track-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: color-mix(in srgb, var(--dtm-track-color, var(--dtm-primary)) 16%, var(--dtm-deep));
+  border: 2px solid var(--c-black);
+  border-left: 5px solid var(--dtm-track-color, var(--dtm-primary));
+  box-shadow: 2px 2px 0 var(--c-black);
+  margin-bottom: 2px;
+}
+.dtm-active-track-badge {
+  font-family: var(--dtm-font);
+  font-size: 11px;
+  font-weight: bold;
+  background: var(--dtm-track-color, var(--dtm-primary));
+  color: #ffffff;
+  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
+  padding: 2px 6px;
+  border: 1px solid var(--c-black);
+  border-radius: 2px;
+  letter-spacing: .06em;
+}
+.dtm-active-track-name {
+  font-family: var(--dtm-font);
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--c-white);
+  flex: 1 1 auto;
+}
+.dtm-active-track-pill {
+  font-family: var(--dtm-font);
+  font-size: 9px;
+  font-weight: bold;
+  letter-spacing: .08em;
+  padding: 2px 5px;
+  color: var(--dtm-gold);
+  border: 1px solid var(--dtm-gold);
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+}
+
 /* \u2500\u2500\u2500 MML\u51FA\u529B\uFF08CRT\u30BF\u30FC\u30DF\u30CA\u30EB\uFF09 \u2500\u2500\u2500 */
 .dtm-output {
   background: var(--c-black);
@@ -8744,7 +8985,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     0
   );
   const timedNotes = placements.map((p) => ({
-    pitch: p.pitch,
+    pitch: unitsToPitchV1(p.pitchUnits),
     when: p.startStep * secondsPerStep,
     duration: p.durationSteps * secondsPerStep
   }));
@@ -8777,7 +9018,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       id: id++,
       startStep: p.startStep,
       durationSteps: p.durationSteps,
-      pitch: p.pitch,
+      pitchUnits: p.pitchUnits,
       velocity: DEFAULT_VELOCITY
     }));
     return {
@@ -9602,7 +9843,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       (a, b) => a.startStep - b.startStep
     );
     const gate = (lt.gate ?? DEFAULT_GATE) / 100;
-    const semis = (lt.octave ?? 0) * 12;
+    const semis = (lt.octave ?? 0) * UNITS_PER_OCTAVE;
     const count = Math.min(sorted.length, lt.syllables.length);
     const notes = [];
     for (let i2 = 0; i2 < count; i2++) {
@@ -9610,7 +9851,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       if (n.startStep < fromStep) continue;
       notes.push({
         syllable: lt.syllables[i2],
-        pitch: n.pitch + semis,
+        pitch: n.pitchUnits + semis,
         startSec: (n.startStep - fromStep) * secondsPerStep,
         durationSec: n.durationSteps * secondsPerStep * gate
       });
@@ -9885,6 +10126,7 @@ var SoundFont = class _SoundFont {
     pitch = 60,
     volume = 1,
     velocity,
+    detuneCents = 0,
     when = 0,
     duration = 1
   } = {}) {
@@ -9904,7 +10146,7 @@ var SoundFont = class _SoundFont {
     Object.assign(src, _param.src);
     const humanizeCents = (Math.random() * 2 - 1) * _SoundFont.humanizeDetuneCents;
     const humanizeGainMul = 1 + (Math.random() * 2 - 1) * _SoundFont.humanizeGainRatio;
-    src.detune.setValueAtTime(humanizeCents, 0);
+    src.detune.setValueAtTime(humanizeCents + detuneCents, 0);
     const effectiveVolume = volume * humanizeGainMul;
     const brightness = velocity === void 0 ? 1 : Math.max(0, Math.min(1, velocity / 127));
     const filter = brightness >= _SoundFont.brightnessBypassAbove ? void 0 : ctx.createBiquadFilter();
@@ -11043,7 +11285,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
     scheduleMetronomeBeats(ctx, cutGain);
   };
   const wafPlayDynamic = ({
-    pitch,
+    pitchUnits,
     velocity,
     volume,
     when,
@@ -11053,10 +11295,12 @@ var mountChordPlayer = (target, chords, options = {}) => {
   }) => {
     const waf = activeGmName ? _wafCache.get(activeGmName) : null;
     if (waf) {
+      const { midi, detuneCents } = unitsToMidiDetune(pitchUnits);
       waf.play({
         ctx,
         destination,
-        pitch,
+        pitch: midi,
+        detuneCents,
         volume: volume * 0.85,
         velocity,
         when,
@@ -11066,7 +11310,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
       const synth = createSynth(ctx, destination);
       synth.playNote({
         trackId: "chord",
-        pitch,
+        pitchUnits,
         velocity: 100,
         volume,
         when,
@@ -11095,7 +11339,8 @@ var mountChordPlayer = (target, chords, options = {}) => {
           trackIndex: 3,
           startStep: whenStep,
           durationSteps,
-          pitch: C32 + noteOffset,
+          // chord-parser の構成音は12平均律の半音。内部表現の units へ写す。
+          pitchUnits: pitchV1ToUnits(C32 + noteOffset),
           velocity: 100
         });
       }
@@ -11108,7 +11353,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
       synth: false,
       onPlayNote: (e) => {
         wafPlayDynamic({
-          pitch: e.pitch,
+          pitchUnits: e.pitchUnits,
           velocity: e.velocity,
           volume: e.volume,
           when: e.when,
@@ -11550,6 +11795,14 @@ var buildUI = (target, options) => {
     <summary>\u5168\u4F53\u30C8\u30E9\u30C3\u30AF\u8A2D\u5B9A</summary>
     <div class="dtm-panel-body">
       <div data-dtm="preset-select-slot"></div>
+      <div class="dtm-row">
+        <span class="dtm-label">\u97F3\u5F8B</span>
+        <select class="dtm-select dtm-grow" data-dtm="edo-select">
+          <option value="12">12\u5E73\u5747\u5F8B\uFF08\u901A\u5E38\uFF09</option>
+          <option value="31">31\u5E73\u5747\u5F8B\uFF08\u5FAE\u5206\u97F3\uFF09</option>
+        </select>
+        <button class="dtm-infobtn" data-dtm="edo-info" title="\u97F3\u5F8B\u306E\u89E3\u8AAC">${icon("info", 12)}</button>
+      </div>
       <div class="dtm-row">
         <span class="dtm-label">\u5168\u4F53\u97F3\u91CF</span>
         <input type="range" class="dtm-range dtm-grow" data-dtm="master-volume" value="50" min="0" max="100">
@@ -11882,6 +12135,8 @@ var buildUI = (target, options) => {
     copyMiniBtn: sel("copy-mini"),
     overlay: sel("overlay"),
     mmlInfoBtn: sel("mml-info"),
+    edoSelect: sel("edo-select"),
+    edoInfoBtn: sel("edo-info"),
     modalOverlay: sel("modal-overlay"),
     modalTitle: sel("modal-title"),
     modalBody: sel("modal-body"),
@@ -12002,17 +12257,21 @@ var SCALES = [
   [0, 2, 4, 7, 9]
   // Pentatonic Major
 ];
+var MEANTONE_STEP_BY_SEMITONE2 = [0, 3, 5, 8, 10, 13, 16, 18, 21, 23, 26, 28];
 var generateRandomPattern = (core, options) => {
-  const { stepsPerBar, startStep, pitchRangeStart } = options;
+  const { stepsPerBar, startStep, pitchRangeStart, edo = 12 } = options;
   const numBars = 8;
   const noteLength = 24;
-  const basePitch = pitchRangeStart + 60;
+  const semitoneToStep = (semi) => edo === 31 ? MEANTONE_STEP_BY_SEMITONE2[semi] : semi;
+  const upr = UNITS_PER_OCTAVE / edo;
+  const basePitch = pitchRangeStart + 60 * UNITS_PER_SEMITONE;
   const scale = SCALES[Math.floor(Math.random() * SCALES.length)];
   const rootOffset = Math.floor(Math.random() * 12);
   const availablePitches = [];
   for (let i2 = 0; i2 < 12; i2++) {
     const noteInOctave = (i2 - rootOffset + 12) % 12;
-    if (scale.includes(noteInOctave)) availablePitches.push(basePitch + i2);
+    if (scale.includes(noteInOctave))
+      availablePitches.push(basePitch + semitoneToStep(i2) * upr);
   }
   core.beginBatch();
   for (let bar = 0; bar < numBars; bar++) {
@@ -12047,14 +12306,17 @@ var applyHarmonicFilter = (targetCore, chordCore, options) => {
     const isNewBar = halfBar % 2 === 0;
     const chordHere = chordCore.getNotes().filter((n) => n.startStep >= start && n.startStep < end);
     if (chordHere.length > 0) {
-      currentClasses = new Set(chordHere.map((n) => n.pitch % 12));
+      currentClasses = new Set(
+        chordHere.map((n) => n.pitchUnits % UNITS_PER_OCTAVE)
+      );
     } else if (isNewBar) {
       currentClasses = /* @__PURE__ */ new Set();
     }
     if (currentClasses.size === 0) continue;
     const activeHere = targetCore.getNotes().filter((n) => n.startStep >= start && n.startStep < end);
     for (const n of activeHere) {
-      if (!currentClasses.has(n.pitch % 12)) targetCore.deleteNoteById(n.id);
+      if (!currentClasses.has(n.pitchUnits % UNITS_PER_OCTAVE))
+        targetCore.deleteNoteById(n.id);
     }
   }
   targetCore.endBatch();
@@ -12076,13 +12338,17 @@ var applyMonophonic = (targetCore, chordCore, options) => {
     const isNewBar = halfBar % 2 === 0;
     const chordHere = chordCore.getNotes().filter((n) => n.startStep >= start && n.startStep < end);
     if (chordHere.length > 0) {
-      currentClasses = new Set(chordHere.map((n) => n.pitch % 12));
+      currentClasses = new Set(
+        chordHere.map((n) => n.pitchUnits % UNITS_PER_OCTAVE)
+      );
     } else if (isNewBar) {
       currentClasses = /* @__PURE__ */ new Set();
     }
     if (currentClasses.size === 0) continue;
     const activeHere = targetCore.getNotes().filter((n) => n.startStep >= start && n.startStep < end);
-    const filtered = activeHere.filter((n) => currentClasses.has(n.pitch % 12));
+    const filtered = activeHere.filter(
+      (n) => currentClasses.has(n.pitchUnits % UNITS_PER_OCTAVE)
+    );
     const filteredIds = new Set(filtered.map((n) => n.id));
     for (const n of activeHere) {
       if (!filteredIds.has(n.id)) targetCore.deleteNoteById(n.id);
@@ -12094,7 +12360,7 @@ var applyMonophonic = (targetCore, chordCore, options) => {
     }
     for (const notesAtTime of timeMap.values()) {
       if (notesAtTime.length > 1) {
-        notesAtTime.sort((a, b) => b.pitch - a.pitch);
+        notesAtTime.sort((a, b) => b.pitchUnits - a.pitchUnits);
         const [, ...others] = notesAtTime;
         for (const on of others) targetCore.deleteNoteById(on.id);
       }
@@ -12110,18 +12376,21 @@ var shiftNotes = (cores, shiftSteps) => {
     for (const note of notes) {
       const newStart = note.startStep + shiftSteps;
       if (newStart < 0) core.deleteNoteById(note.id);
-      else core.moveNote(note.id, newStart, note.pitch);
+      else core.moveNote(note.id, newStart, note.pitchUnits);
     }
     core.saveHistory();
   }
 };
-var transposeNotes = (cores, semitones) => {
-  if (semitones === 0) return;
+var transposeNotes = (cores, steps) => {
+  if (steps === 0) return;
   for (const core of cores) {
     const notes = [...core.getNotes()];
     for (const note of notes) {
-      const newPitch = Math.max(0, Math.min(127, note.pitch + semitones));
-      if (newPitch !== note.pitch) {
+      const newPitch = Math.max(
+        PITCH_RANGE_START,
+        Math.min(PITCH_RANGE_END, note.pitchUnits + steps)
+      );
+      if (newPitch !== note.pitchUnits) {
         core.moveNote(note.id, note.startStep, newPitch);
       }
     }
@@ -12446,11 +12715,31 @@ var exportMIDI = (options) => {
   const div = 480;
   const tickPerStep = div / STEPS_PER_BEAT3;
   const midiTracks = [];
-  tracks.forEach((track, ch) => {
+  const NOTE_CHANNELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15];
+  const BEND_RANGE_SEMITONES = 2;
+  const bendKey = (cents) => Math.round(cents * 100);
+  const bendUse = /* @__PURE__ */ new Map();
+  for (const track of tracks) {
+    for (const n of track.notes) {
+      const { detuneCents } = unitsToMidiDetune(n.pitchUnits);
+      const k = bendKey(detuneCents);
+      bendUse.set(k, (bendUse.get(k) ?? 0) + 1);
+    }
+  }
+  const bendChannel = /* @__PURE__ */ new Map();
+  const ordered = [...bendUse.entries()].sort((a, b) => b[1] - a[1]);
+  for (const [k] of ordered) {
+    if (bendChannel.size >= NOTE_CHANNELS.length) break;
+    bendChannel.set(k, NOTE_CHANNELS[bendChannel.size]);
+  }
+  tracks.forEach((track) => {
     if (track.notes.length === 0) return;
-    const channel = ch < 9 ? ch : ch + 1 & 15;
     const events = [];
     for (const n of track.notes) {
+      const { midi, detuneCents } = unitsToMidiDetune(n.pitchUnits);
+      const k = bendKey(detuneCents);
+      const channel = bendChannel.get(k) ?? bendChannel.get(0) ?? 0;
+      const note = Math.max(0, Math.min(127, midi));
       const startTick = Math.round(n.startStep * tickPerStep);
       const endTick = Math.round(
         (n.startStep + (n.durationSteps || 1)) * tickPerStep
@@ -12458,12 +12747,25 @@ var exportMIDI = (options) => {
       const vel = Math.round(
         (n.velocity ?? DEFAULT_VELOCITY) * (track.volume ?? 100) / 100
       );
-      events.push({ t: startTick, m: [144 | channel, n.pitch, vel] });
-      events.push({ t: endTick, m: [144 | channel, n.pitch, 0] });
+      events.push({ t: startTick, m: [144 | channel, note, vel] });
+      events.push({ t: endTick, m: [144 | channel, note, 0] });
     }
     events.sort((a, b) => a.t - b.t);
     midiTracks.push(events);
   });
+  const bendSetup = [];
+  for (const [k, channel] of bendChannel) {
+    const cents = k / 100;
+    bendSetup.push({ t: 0, m: [176 | channel, 101, 0] });
+    bendSetup.push({ t: 0, m: [176 | channel, 100, 0] });
+    bendSetup.push({ t: 0, m: [176 | channel, 6, BEND_RANGE_SEMITONES] });
+    bendSetup.push({ t: 0, m: [176 | channel, 38, 0] });
+    bendSetup.push({ t: 0, m: [176 | channel, 101, 127] });
+    bendSetup.push({ t: 0, m: [176 | channel, 100, 127] });
+    const raw = 8192 + Math.round(cents / (BEND_RANGE_SEMITONES * 100) * 8192);
+    const v = Math.max(0, Math.min(16383, raw));
+    bendSetup.push({ t: 0, m: [224 | channel, v & 127, v >> 7 & 127] });
+  }
   const maxStep = Math.max(
     ...tracks.filter((t) => t.notes.length > 0).map(
       (t) => Math.max(...t.notes.map((n) => n.startStep + n.durationSteps))
@@ -12500,6 +12802,7 @@ var exportMIDI = (options) => {
   headerChunks(arr, midiTracks.length + 1, div);
   trackChunks(arr, (a) => {
     a.push(0, 255, 81, 3, ...to3byte(Math.round(6e7 / bpm)));
+    for (const ev of bendSetup) a.push(0, ...ev.m);
   });
   for (const events of midiTracks) {
     trackChunks(arr, (a) => {
@@ -12746,380 +13049,8 @@ var LinkedList = class {
   }
 };
 
-// src/renderer.ts
-var g_header_canvas;
-var g_key_canvas;
-var g_grid_canvas;
-var g_header_ctx;
-var g_key_ctx;
-var g_grid_ctx;
-var g_config;
-var KEYBOARD_WIDTH = 60;
-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
-});
-var getGridCanvas = () => g_grid_canvas;
-var getGridContext = () => g_grid_ctx;
-var getHeaderCanvas = () => g_header_canvas;
-var init = (mountTarget, width = 800, height = 450, config) => {
-  g_config = config;
-  const headerCanvas = document.createElement("canvas");
-  g_header_canvas = headerCanvas;
-  headerCanvas.width = width - KEYBOARD_WIDTH;
-  headerCanvas.height = HEADER_HEIGHT;
-  headerCanvas.style.position = "absolute";
-  headerCanvas.style.left = `${KEYBOARD_WIDTH}px`;
-  headerCanvas.style.top = "0px";
-  const headerCtx = headerCanvas.getContext("2d");
-  if (!headerCtx)
-    throw new Error("Failed to get 2D rendering context for header.");
-  g_header_ctx = headerCtx;
-  const keyCanvas = document.createElement("canvas");
-  g_key_canvas = keyCanvas;
-  keyCanvas.width = KEYBOARD_WIDTH;
-  keyCanvas.height = height - HEADER_HEIGHT;
-  keyCanvas.style.position = "absolute";
-  keyCanvas.style.left = "0px";
-  keyCanvas.style.top = `${HEADER_HEIGHT}px`;
-  const keyCtx = keyCanvas.getContext("2d");
-  if (!keyCtx)
-    throw new Error("Failed to get 2D rendering context for keyboard.");
-  g_key_ctx = keyCtx;
-  const gridCanvas = document.createElement("canvas");
-  g_grid_canvas = gridCanvas;
-  gridCanvas.width = width - KEYBOARD_WIDTH;
-  gridCanvas.height = height - HEADER_HEIGHT;
-  gridCanvas.style.position = "absolute";
-  gridCanvas.style.left = `${KEYBOARD_WIDTH}px`;
-  gridCanvas.style.top = `${HEADER_HEIGHT}px`;
-  gridCanvas.style.touchAction = "none";
-  gridCanvas.style.userSelect = "none";
-  const gridCtx = gridCanvas.getContext("2d", { willReadFrequently: true });
-  if (!gridCtx) throw new Error("Failed to get 2D rendering context for grid.");
-  g_grid_ctx = gridCtx;
-  mountTarget.innerHTML = "";
-  mountTarget.style.position = "relative";
-  mountTarget.style.width = `${width + KEYBOARD_WIDTH}px`;
-  mountTarget.style.height = `${height}px`;
-  mountTarget.append(headerCanvas, keyCanvas, gridCanvas);
-  drawHeaderCorner();
-};
-var blackKeyPitches = /* @__PURE__ */ new Set([1, 3, 6, 8, 10]);
-var KEY_NAMES = [
-  "C",
-  "C#",
-  "D",
-  "D#",
-  "E",
-  "F",
-  "F#",
-  "G",
-  "G#",
-  "A",
-  "A#",
-  "B"
-];
-var drawHeaderCorner = () => {
-  const mountTarget = g_key_canvas.parentElement;
-  if (!mountTarget) return;
-  let cornerDiv = mountTarget.querySelector("#header-corner");
-  if (!cornerDiv) {
-    cornerDiv = document.createElement("div");
-    cornerDiv.id = "header-corner";
-    cornerDiv.style.position = "absolute";
-    cornerDiv.style.left = "0px";
-    cornerDiv.style.top = "0px";
-    cornerDiv.style.width = `${KEYBOARD_WIDTH}px`;
-    cornerDiv.style.height = `${HEADER_HEIGHT}px`;
-    cornerDiv.style.backgroundColor = "#0a0f1f";
-    cornerDiv.style.borderRight = "2px solid #29adff";
-    cornerDiv.style.borderBottom = "2px solid #29adff";
-    mountTarget.insertBefore(cornerDiv, g_header_canvas);
-  }
-};
-var drawKeyboard = () => {
-  g_key_ctx.clearRect(0, 0, g_key_canvas.width, g_key_canvas.height);
-  const { keyHeight, keyCount, pitchRangeStart } = g_config;
-  const startY = Math.floor(g_draw_offset_y / keyHeight) * keyHeight;
-  const endY = g_draw_offset_y + g_key_canvas.height;
-  const WHITE_KEY = "#ccc8b4";
-  const BLACK_KEY = "#111111";
-  const BK_EDGE = "#383838";
-  const WW_SEP = "#807a6a";
-  const BK_RATIO = 0.62;
-  for (let y = startY; y < endY; y += keyHeight) {
-    const pitchIndex = keyCount - 1 - y / keyHeight;
-    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 = isC4Range ? "#d8d4be" : WHITE_KEY;
-      g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
-      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;
-      g_key_ctx.beginPath();
-      g_key_ctx.moveTo(bkW, screenY);
-      g_key_ctx.lineTo(bkW, screenY + keyHeight);
-      g_key_ctx.stroke();
-    } else {
-      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;
-        g_key_ctx.lineWidth = 1;
-        g_key_ctx.beginPath();
-        g_key_ctx.moveTo(0, screenY + keyHeight - 0.5);
-        g_key_ctx.lineTo(KEYBOARD_WIDTH, screenY + keyHeight - 0.5);
-        g_key_ctx.stroke();
-      }
-    }
-    if (pitchMod12 === 0) {
-      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]}${octave2}`,
-        KEYBOARD_WIDTH - 4,
-        screenY + keyHeight - 2
-      );
-    }
-  }
-  g_key_ctx.beginPath();
-  g_key_ctx.strokeStyle = "#29adff";
-  g_key_ctx.lineWidth = 2;
-  g_key_ctx.moveTo(KEYBOARD_WIDTH, 0);
-  g_key_ctx.lineTo(KEYBOARD_WIDTH, g_key_canvas.height);
-  g_key_ctx.stroke();
-};
-var drawHeader = () => {
-  g_header_ctx.clearRect(0, 0, g_header_canvas.width, g_header_canvas.height);
-  const { stepWidth, stepsPerBar } = g_config;
-  g_header_ctx.save();
-  g_header_ctx.translate(-g_draw_offset_x, 0);
-  g_header_ctx.fillStyle = g_bg_active ? "rgba(10,15,31,0.55)" : "#0a0f1f";
-  g_header_ctx.fillRect(
-    g_draw_offset_x,
-    0,
-    g_header_canvas.width,
-    HEADER_HEIGHT
-  );
-  g_header_ctx.strokeStyle = "#3d405b";
-  g_header_ctx.lineWidth = 1;
-  g_header_ctx.font = "11px 'k8x12',monospace";
-  g_header_ctx.fillStyle = "#83769c";
-  const startBar = Math.floor(g_draw_offset_x / (stepsPerBar * stepWidth));
-  const endBar = Math.ceil(
-    (g_draw_offset_x + g_header_canvas.width) / (stepsPerBar * stepWidth)
-  );
-  for (let bar = startBar; bar <= endBar + 1; bar++) {
-    const x2 = bar * stepsPerBar * stepWidth;
-    const screenX = x2;
-    g_header_ctx.beginPath();
-    g_header_ctx.moveTo(screenX, 0);
-    g_header_ctx.lineTo(screenX, HEADER_HEIGHT);
-    g_header_ctx.stroke();
-    if (bar >= 0) {
-      g_header_ctx.textAlign = "left";
-      g_header_ctx.textBaseline = "middle";
-      g_header_ctx.fillText(`${bar + 1}`, screenX + 5, HEADER_HEIGHT / 2);
-    }
-  }
-  g_header_ctx.restore();
-};
-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, 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 = totalPitch % 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;
-    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)";
-      g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
-    }
-    g_grid_ctx.beginPath();
-    g_grid_ctx.strokeStyle = isC ? "#3d405b" : "#1a1d30";
-    g_grid_ctx.lineWidth = 1;
-    const lineY = screenY + keyHeight;
-    g_grid_ctx.moveTo(0, lineY);
-    g_grid_ctx.lineTo(g_grid_canvas.width, lineY);
-    g_grid_ctx.stroke();
-  }
-  const gridStep = noteLengthSteps || 48;
-  const startX = Math.floor(g_draw_offset_x / (stepWidth * gridStep)) * stepWidth * gridStep;
-  const endX = g_draw_offset_x + g_grid_canvas.width;
-  const lineStep = stepWidth * gridStep;
-  for (let x2 = startX; x2 <= endX; x2 += lineStep) {
-    const step = x2 / stepWidth;
-    const isBarLine = step % stepsPerBar === 0;
-    const isNoteLine = step % gridStep === 0;
-    const screenX = x2 - g_draw_offset_x;
-    g_grid_ctx.beginPath();
-    g_grid_ctx.strokeStyle = isBarLine ? "#3d405b" : isNoteLine ? "#242840" : "#1a1d30";
-    g_grid_ctx.lineWidth = isBarLine ? 2 : 1;
-    g_grid_ctx.moveTo(screenX, 0);
-    g_grid_ctx.lineTo(screenX, g_grid_canvas.height);
-    g_grid_ctx.stroke();
-  }
-};
-var drawNotes = (notes, color = [59, 130, 246, 1]) => {
-  const { keyHeight, stepWidth, keyCount, pitchRangeStart } = g_config;
-  for (const note of notes) {
-    const logicalX = note.startStep * stepWidth;
-    const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
-    const logicalY = yIndex * keyHeight;
-    const w = note.durationSteps * stepWidth;
-    const h = keyHeight;
-    const renderX = logicalX - g_draw_offset_x;
-    const renderY = logicalY - g_draw_offset_y;
-    const velocityOpacity = note.velocity !== void 0 ? 0.5 + note.velocity / 127 * 0.5 : 1;
-    const [r, g, b, a] = color;
-    const finalOpacity = a * velocityOpacity;
-    g_grid_ctx.fillStyle = `rgba(${r},${g},${b},${finalOpacity})`;
-    g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
-  }
-};
-var drawNoteLyrics = (notes, syllables) => {
-  if (syllables.length === 0) return;
-  const { keyHeight, stepWidth, keyCount, pitchRangeStart } = g_config;
-  if (keyHeight < 10) return;
-  const fontSize = Math.min(12, Math.floor(keyHeight * 0.85));
-  const sorted = [...notes].sort((a, b) => a.startStep - b.startStep);
-  const count = Math.min(sorted.length, syllables.length);
-  g_grid_ctx.save();
-  g_grid_ctx.font = `${fontSize}px 'k8x12',sans-serif`;
-  g_grid_ctx.textAlign = "left";
-  g_grid_ctx.textBaseline = "middle";
-  g_grid_ctx.lineWidth = 3;
-  g_grid_ctx.lineJoin = "round";
-  for (let i2 = 0; i2 < count; i2++) {
-    const kana = syllables[i2];
-    if (!kana) continue;
-    const note = sorted[i2];
-    const renderX = note.startStep * stepWidth - g_draw_offset_x;
-    const renderY = (keyCount - 1 - (note.pitch - pitchRangeStart)) * keyHeight - g_draw_offset_y;
-    const w = note.durationSteps * stepWidth;
-    if (w < 6) continue;
-    if (renderX + w < 0 || renderX > g_grid_canvas.width) continue;
-    if (renderY + keyHeight < 0 || renderY > g_grid_canvas.height) continue;
-    const textX = renderX + 2;
-    const textY = renderY + keyHeight / 2;
-    g_grid_ctx.save();
-    g_grid_ctx.beginPath();
-    g_grid_ctx.rect(renderX + 1, renderY + 1, w - 2, keyHeight - 2);
-    g_grid_ctx.clip();
-    g_grid_ctx.strokeStyle = "rgba(0,0,0,0.85)";
-    g_grid_ctx.strokeText(kana, textX, textY);
-    g_grid_ctx.fillStyle = "#fff1e8";
-    g_grid_ctx.fillText(kana, textX, textY);
-    g_grid_ctx.restore();
-  }
-  g_grid_ctx.restore();
-};
-var drawSelectionRect = (rect) => {
-  if (!rect) return;
-  g_grid_ctx.save();
-  g_grid_ctx.strokeStyle = "#ffec27";
-  g_grid_ctx.lineWidth = 2;
-  g_grid_ctx.setLineDash([4, 4]);
-  g_grid_ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
-  g_grid_ctx.fillStyle = "rgba(255,236,39,0.08)";
-  g_grid_ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  g_grid_ctx.restore();
-};
-var drawSelectedNotes = (notes, selectedIds, baseColor = [59, 130, 246, 1]) => {
-  const { keyHeight, stepWidth, keyCount, pitchRangeStart } = g_config;
-  for (const note of notes) {
-    if (!selectedIds.has(note.id)) continue;
-    const logicalX = note.startStep * stepWidth;
-    const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
-    const logicalY = yIndex * keyHeight;
-    const w = note.durationSteps * stepWidth;
-    const h = keyHeight;
-    const renderX = logicalX - g_draw_offset_x;
-    const renderY = logicalY - g_draw_offset_y;
-    const velocityOpacity = note.velocity !== void 0 ? 0.5 + note.velocity / 127 * 0.5 : 1;
-    const [r, g, b, a] = baseColor;
-    const darkenFactor = 1.3;
-    const darkerR = Math.min(255, r * darkenFactor);
-    const darkerG = Math.min(255, g * darkenFactor);
-    const darkerB = Math.min(255, b * darkenFactor);
-    const finalOpacity = a * velocityOpacity;
-    g_grid_ctx.fillStyle = `rgba(${darkerR},${darkerG},${darkerB},${finalOpacity})`;
-    g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
-  }
-};
-var getXY = (e) => {
-  const { clientX, clientY } = e;
-  const rect = g_grid_canvas.getBoundingClientRect();
-  const x2 = Math.floor(clientX - rect.left);
-  const y = Math.floor(clientY - rect.top);
-  return [x2, y, e.buttons];
-};
-var getGridPosition = (e) => {
-  const [x2, y] = getXY(e);
-  const { keyCount, pitchRangeStart, keyHeight, stepWidth } = g_config;
-  const step = Math.floor((x2 + g_draw_offset_x) / stepWidth);
-  const absoluteY = y + g_draw_offset_y;
-  const yIndex = Math.floor(absoluteY / keyHeight);
-  const pitch = keyCount - 1 - yIndex + pitchRangeStart;
-  return { step, pitch, x: x2, y };
-};
-var onClick = (callback) => {
-  g_grid_canvas.addEventListener(
-    "click",
-    (e) => {
-      const [x2, y] = getXY(e);
-      const { keyCount, pitchRangeStart, keyHeight, stepWidth } = g_config;
-      const step = Math.floor((x2 + g_draw_offset_x) / stepWidth);
-      const absoluteY = y + g_draw_offset_y;
-      const yIndex = Math.floor(absoluteY / keyHeight);
-      const pitch = keyCount - 1 - yIndex + pitchRangeStart;
-      if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount) {
-        requestAnimationFrame(() => callback(step, pitch));
-      }
-    },
-    { passive: true }
-  );
-  g_grid_canvas.addEventListener("contextmenu", (e) => e.preventDefault());
-};
-var setDrawOffset = (x2, y) => {
-  g_draw_offset_x = x2;
-  g_draw_offset_y = y;
-  drawKeyboard();
-  drawHeader();
-};
-
 // src/mml-core.ts
-var PITCH_MAP2 = [
+var PITCH_MAP = [
   "c",
   "c+",
   "d",
@@ -13133,6 +13064,39 @@ var PITCH_MAP2 = [
   "a+",
   "b"
 ];
+var EDO31_NAMES = [
+  "c",
+  "c+",
+  "c#",
+  "d-",
+  "d_",
+  "d",
+  "d+",
+  "d#",
+  "e-",
+  "e_",
+  "e",
+  "f-",
+  "e#",
+  "f",
+  "f+",
+  "f#",
+  "g-",
+  "g_",
+  "g",
+  "g+",
+  "g#",
+  "a-",
+  "a_",
+  "a",
+  "a+",
+  "a#",
+  "b-",
+  "b_",
+  "b",
+  "b+",
+  "b#"
+];
 var MMLCore = class _MMLCore {
   notes = [];
   nextNoteId = 0;
@@ -13146,9 +13110,12 @@ var MMLCore = class _MMLCore {
   lastUndoTime = 0;
   static UNDO_DEBOUNCE_MS = 100;
   toolMode = "pen";
-  constructor(handlers, volume = 80) {
+  /** グリッド寸法の供給元（描画器ではなく呼び出し側が持つ設定を読む） */
+  getConfig;
+  constructor(handlers, volume = 80, getConfig) {
     this.handlers = handlers;
     this.volume = volume;
+    this.getConfig = getConfig;
     this.lastHistorySnapshot = JSON.stringify(this.notes);
     this.history.add([]);
     this.generateAndNotify();
@@ -13235,14 +13202,14 @@ var MMLCore = class _MMLCore {
    */
   addNote(step, pitch, options) {
     const existingIndex = this.notes.findIndex(
-      (n) => n.startStep === step && n.pitch === pitch
+      (n) => n.startStep === step && n.pitchUnits === pitch
     );
     if (existingIndex === -1) {
       const newNote = {
         id: this.nextNoteId++,
         startStep: step,
         durationSteps: options.noteLengthSteps,
-        pitch,
+        pitchUnits: pitch,
         velocity: options.velocity ?? DEFAULT_VELOCITY
       };
       this.notes.push(newNote);
@@ -13270,9 +13237,11 @@ var MMLCore = class _MMLCore {
   moveNote(noteId, startStep, pitch) {
     const note = this.notes.find((target) => target.id === noteId);
     if (!note) return;
-    const totalSteps = this.getMaxStep() + getRenderConfig().stepsPerBar;
-    const pitchRangeStart = getRenderConfig().pitchRangeStart;
-    const pitchRangeEnd = pitchRangeStart + getRenderConfig().keyCount - 1;
+    const totalSteps = this.getMaxStep() + this.getConfig().stepsPerBar;
+    const cfg = this.getConfig();
+    const upr = cfg.unitsPerRow ?? UNITS_PER_SEMITONE;
+    const pitchRangeStart = cfg.pitchRangeStart;
+    const pitchRangeEnd = pitchRangeStart + (cfg.keyCount - 1) * upr;
     const clampedPitch = Math.min(
       Math.max(pitch, pitchRangeStart),
       pitchRangeEnd
@@ -13282,7 +13251,7 @@ var MMLCore = class _MMLCore {
       totalSteps - note.durationSteps
     );
     note.startStep = clampedStart;
-    note.pitch = clampedPitch;
+    note.pitchUnits = clampedPitch;
     this.notes.sort((a, b) => a.startStep - b.startStep);
     this.generateAndNotify();
   }
@@ -13327,7 +13296,7 @@ var MMLCore = class _MMLCore {
    * ただし、残りステップ(limit)は絶対に超えない。
    */
   stepsToMMLDuration(steps, limit) {
-    const config = getRenderConfig();
+    const config = this.getConfig();
     const total = config.stepsPerBar;
     const candidates = [
       { dur: "1.", s: total * 1.5 },
@@ -13363,7 +13332,7 @@ var MMLCore = class _MMLCore {
    * ギャップに収まる最大の音符を探す（減算アルゴリズム用）
    */
   findBestFitDuration(gap) {
-    const config = getRenderConfig();
+    const config = this.getConfig();
     const durations = [1, 2, 4, 8, 12, 16, 24, 32, 48, 64];
     for (const d of durations) {
       const stepLen = config.stepsPerBar / d;
@@ -13373,12 +13342,20 @@ var MMLCore = class _MMLCore {
     }
     return { dur: 64, steps: config.stepsPerBar / 64 };
   }
+  /** ピッチ(units) → その音律での「オクターブ番号」と「音名」。 */
+  spell(pitchUnits) {
+    const edo = this.getConfig().edo ?? 12;
+    const names = edo === 31 ? EDO31_NAMES : PITCH_MAP;
+    const octave = Math.floor(pitchUnits / 372) - 1;
+    const within = (pitchUnits % 372 + 372) % 372;
+    const step = Math.round(within / (372 / edo));
+    return { octave, name: names[step % edo] };
+  }
   /**
    * ピッチからオクターブ最適化のある音名を取得
    */
   getNoteWithOctave(pitch, lastOctave) {
-    const octave = Math.floor(pitch / 12) - 1;
-    const name = PITCH_MAP2[pitch % 12];
+    const { octave, name } = this.spell(pitch);
     if (lastOctave === -1 || Math.abs(octave - lastOctave) >= 2) {
       return { text: `o${octave}${name}`, currentOctave: octave };
     }
@@ -13401,7 +13378,7 @@ var MMLCore = class _MMLCore {
    * 各音符の長さを忠実に出力する（次の音符がなければ曲末まで伸ばせる）。
    */
   generateMML = (volumeOverride) => {
-    const config = getRenderConfig();
+    const config = this.getConfig();
     const vol = volumeOverride ?? this.volume;
     const header = `t${this.tempo} v${vol}`;
     const segments = [];
@@ -13442,14 +13419,13 @@ var MMLCore = class _MMLCore {
       const actualStepGenerated = this.getStepFromDottedMML(durStr);
       if (notes.length > 1) {
         const noteStrs = notes.map((n) => {
-          const oct = Math.floor(n.pitch / 12) - 1;
-          const name = PITCH_MAP2[n.pitch % 12];
+          const { octave: oct, name } = this.spell(n.pitchUnits);
           return `o${oct}${name}`;
         });
         segments.push(`[${noteStrs.join("")}]${durStr}`);
       } else {
         const { text, currentOctave } = this.getNoteWithOctave(
-          notes[0].pitch,
+          notes[0].pitchUnits,
           lastOctave
         );
         segments.push(`${text}${durStr}`);
@@ -13480,7 +13456,7 @@ var MMLCore = class _MMLCore {
    * MMLの音長文字列（"4", "4.", "12"など）をステップ数に変換する
    */
   getStepFromDottedMML(durStr) {
-    const config = getRenderConfig();
+    const config = this.getConfig();
     const total = config.stepsPerBar;
     const isDotted = durStr.endsWith(".");
     const baseDur = parseInt(isDotted ? durStr.slice(0, -1) : durStr, 10);
@@ -13490,7 +13466,7 @@ var MMLCore = class _MMLCore {
 };
 var decomposeToMonophonic = (notes) => {
   const sorted = [...notes].sort(
-    (a, b) => a.startStep - b.startStep || a.pitch - b.pitch
+    (a, b) => a.startStep - b.startStep || a.pitchUnits - b.pitchUnits
   );
   const tracks = [];
   const trackEnds = [];
@@ -13525,6 +13501,493 @@ var isChordHeavyTrack = (notes, threshold = 0.6) => {
   return chordNotes / notes.length >= threshold;
 };
 
+// src/renderer.ts
+var KEYBOARD_WIDTH = 60;
+var HEADER_HEIGHT = 20;
+var NATURAL_STEPS3 = {
+  12: [0, 2, 4, 5, 7, 9, 11],
+  31: [0, 5, 10, 13, 18, 23, 28]
+};
+var keyTier = (step, edo) => {
+  const naturals = NATURAL_STEPS3[edo] ?? NATURAL_STEPS3[12];
+  let best = edo;
+  for (const n of naturals) {
+    const d = Math.abs(step - n);
+    best = Math.min(best, d, edo - d);
+  }
+  if (best === 0) return 0;
+  return best >= (edo === 31 ? 2 : 1) ? 2 : 1;
+};
+var KEY_NAMES = [
+  "C",
+  "C#",
+  "D",
+  "D#",
+  "E",
+  "F",
+  "F#",
+  "G",
+  "G#",
+  "A",
+  "A#",
+  "B"
+];
+var createRenderer = (mountTarget, width = 800, height = 450, config) => {
+  let g_header_canvas;
+  let g_key_canvas;
+  let g_grid_canvas;
+  let g_header_ctx;
+  let g_key_ctx;
+  let g_grid_ctx;
+  let g_config = config;
+  const getRenderConfig = () => g_config;
+  let g_draw_offset_x = 0;
+  let g_draw_offset_y = 0;
+  let g_bg_active = false;
+  const setBackgroundActive = (active) => {
+    g_bg_active = active;
+  };
+  const getDrawOffset = () => ({
+    x: g_draw_offset_x,
+    y: g_draw_offset_y
+  });
+  const getGridCanvas = () => g_grid_canvas;
+  const getGridContext = () => g_grid_ctx;
+  const getHeaderCanvas = () => g_header_canvas;
+  const setup = () => {
+    g_config = config;
+    const headerCanvas = document.createElement("canvas");
+    g_header_canvas = headerCanvas;
+    headerCanvas.width = width - KEYBOARD_WIDTH;
+    headerCanvas.height = HEADER_HEIGHT;
+    headerCanvas.style.position = "absolute";
+    headerCanvas.style.left = `${KEYBOARD_WIDTH}px`;
+    headerCanvas.style.top = "0px";
+    const headerCtx = headerCanvas.getContext("2d");
+    if (!headerCtx)
+      throw new Error("Failed to get 2D rendering context for header.");
+    g_header_ctx = headerCtx;
+    const keyCanvas = document.createElement("canvas");
+    g_key_canvas = keyCanvas;
+    keyCanvas.width = KEYBOARD_WIDTH;
+    keyCanvas.height = height - HEADER_HEIGHT;
+    keyCanvas.style.position = "absolute";
+    keyCanvas.style.left = "0px";
+    keyCanvas.style.top = `${HEADER_HEIGHT}px`;
+    const keyCtx = keyCanvas.getContext("2d");
+    if (!keyCtx)
+      throw new Error("Failed to get 2D rendering context for keyboard.");
+    g_key_ctx = keyCtx;
+    const gridCanvas = document.createElement("canvas");
+    g_grid_canvas = gridCanvas;
+    gridCanvas.width = width - KEYBOARD_WIDTH;
+    gridCanvas.height = height - HEADER_HEIGHT;
+    gridCanvas.style.position = "absolute";
+    gridCanvas.style.left = `${KEYBOARD_WIDTH}px`;
+    gridCanvas.style.top = `${HEADER_HEIGHT}px`;
+    gridCanvas.style.touchAction = "none";
+    gridCanvas.style.userSelect = "none";
+    const gridCtx = gridCanvas.getContext("2d", { willReadFrequently: true });
+    if (!gridCtx)
+      throw new Error("Failed to get 2D rendering context for grid.");
+    g_grid_ctx = gridCtx;
+    mountTarget.innerHTML = "";
+    mountTarget.style.position = "relative";
+    mountTarget.style.width = `${width + KEYBOARD_WIDTH}px`;
+    mountTarget.style.height = `${height}px`;
+    mountTarget.append(headerCanvas, keyCanvas, gridCanvas);
+    drawHeaderCorner();
+  };
+  const drawHeaderCorner = () => {
+    const mountTarget2 = g_key_canvas.parentElement;
+    if (!mountTarget2) return;
+    let cornerDiv = mountTarget2.querySelector(
+      "#header-corner"
+    );
+    if (!cornerDiv) {
+      cornerDiv = document.createElement("div");
+      cornerDiv.id = "header-corner";
+      cornerDiv.style.position = "absolute";
+      cornerDiv.style.left = "0px";
+      cornerDiv.style.top = "0px";
+      cornerDiv.style.width = `${KEYBOARD_WIDTH}px`;
+      cornerDiv.style.height = `${HEADER_HEIGHT}px`;
+      cornerDiv.style.backgroundColor = "#0a0f1f";
+      cornerDiv.style.borderRight = "2px solid #29adff";
+      cornerDiv.style.borderBottom = "2px solid #29adff";
+      mountTarget2.insertBefore(cornerDiv, g_header_canvas);
+    }
+  };
+  const drawKeyboard = () => {
+    g_key_ctx.clearRect(0, 0, g_key_canvas.width, g_key_canvas.height);
+    const {
+      keyHeight,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE,
+      edo = 12
+    } = g_config;
+    const startY = Math.floor(g_draw_offset_y / keyHeight) * keyHeight;
+    const endY = g_draw_offset_y + g_key_canvas.height;
+    const WHITE_KEY = "#ccc8b4";
+    const BLACK_KEY = "#111111";
+    const MICRO_KEY = "#4a4a4a";
+    const BK_EDGE = "#383838";
+    const WW_SEP = "#807a6a";
+    const BK_RATIO = 0.62;
+    const MICRO_RATIO = 0.45;
+    for (let y = startY; y < endY; y += keyHeight) {
+      const rowIndex = keyCount - 1 - y / keyHeight;
+      const units = pitchRangeStart + rowIndex * upr;
+      const step = Math.round(
+        (units % UNITS_PER_OCTAVE + UNITS_PER_OCTAVE) % UNITS_PER_OCTAVE / upr % edo
+      );
+      const tier = keyTier(step, edo);
+      const octave = Math.floor(units / UNITS_PER_OCTAVE) - 1;
+      const isC4Range = octave === 4;
+      const screenY = y - g_draw_offset_y;
+      const bkW = Math.floor(
+        KEYBOARD_WIDTH * (tier === 1 ? MICRO_RATIO : BK_RATIO)
+      );
+      if (tier !== 0) {
+        g_key_ctx.fillStyle = isC4Range ? "#d8d4be" : WHITE_KEY;
+        g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
+        g_key_ctx.fillStyle = tier === 1 ? MICRO_KEY : isC4Range ? "#1a1408" : BLACK_KEY;
+        g_key_ctx.fillRect(0, screenY, bkW, keyHeight);
+        g_key_ctx.strokeStyle = BK_EDGE;
+        g_key_ctx.lineWidth = 1;
+        g_key_ctx.beginPath();
+        g_key_ctx.moveTo(bkW, screenY);
+        g_key_ctx.lineTo(bkW, screenY + keyHeight);
+        g_key_ctx.stroke();
+      } else {
+        g_key_ctx.fillStyle = isC4Range ? "#dedad0" : WHITE_KEY;
+        g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
+        if (edo === 12 && (step === 5 || step === 0)) {
+          g_key_ctx.strokeStyle = WW_SEP;
+          g_key_ctx.lineWidth = 1;
+          g_key_ctx.beginPath();
+          g_key_ctx.moveTo(0, screenY + keyHeight - 0.5);
+          g_key_ctx.lineTo(KEYBOARD_WIDTH, screenY + keyHeight - 0.5);
+          g_key_ctx.stroke();
+        }
+      }
+      if (step === 0) {
+        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[0]}${octave}`,
+          KEYBOARD_WIDTH - 4,
+          screenY + keyHeight - 2
+        );
+      }
+    }
+    g_key_ctx.beginPath();
+    g_key_ctx.strokeStyle = "#29adff";
+    g_key_ctx.lineWidth = 2;
+    g_key_ctx.moveTo(KEYBOARD_WIDTH, 0);
+    g_key_ctx.lineTo(KEYBOARD_WIDTH, g_key_canvas.height);
+    g_key_ctx.stroke();
+  };
+  const drawHeader = () => {
+    g_header_ctx.clearRect(0, 0, g_header_canvas.width, g_header_canvas.height);
+    const { stepWidth, stepsPerBar } = g_config;
+    g_header_ctx.save();
+    g_header_ctx.translate(-g_draw_offset_x, 0);
+    g_header_ctx.fillStyle = g_bg_active ? "rgba(10,15,31,0.55)" : "#0a0f1f";
+    g_header_ctx.fillRect(
+      g_draw_offset_x,
+      0,
+      g_header_canvas.width,
+      HEADER_HEIGHT
+    );
+    g_header_ctx.strokeStyle = "#3d405b";
+    g_header_ctx.lineWidth = 1;
+    g_header_ctx.font = "11px 'k8x12',monospace";
+    g_header_ctx.fillStyle = "#83769c";
+    const startBar = Math.floor(g_draw_offset_x / (stepsPerBar * stepWidth));
+    const endBar = Math.ceil(
+      (g_draw_offset_x + g_header_canvas.width) / (stepsPerBar * stepWidth)
+    );
+    for (let bar = startBar; bar <= endBar + 1; bar++) {
+      const x2 = bar * stepsPerBar * stepWidth;
+      const screenX = x2;
+      g_header_ctx.beginPath();
+      g_header_ctx.moveTo(screenX, 0);
+      g_header_ctx.lineTo(screenX, HEADER_HEIGHT);
+      g_header_ctx.stroke();
+      if (bar >= 0) {
+        g_header_ctx.textAlign = "left";
+        g_header_ctx.textBaseline = "middle";
+        g_header_ctx.fillText(`${bar + 1}`, screenX + 5, HEADER_HEIGHT / 2);
+      }
+    }
+    g_header_ctx.restore();
+  };
+  const drawGrid = (noteLengthSteps = 1) => {
+    drawKeyboard();
+    drawHeader();
+    g_grid_ctx.clearRect(0, 0, g_grid_canvas.width, g_grid_canvas.height);
+    const {
+      keyHeight,
+      keyCount,
+      stepWidth,
+      stepsPerBar,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE,
+      edo = 12
+    } = 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 rowIndex = keyCount - 1 - y / keyHeight;
+      const units = pitchRangeStart + rowIndex * upr;
+      const step = Math.round(
+        (units % UNITS_PER_OCTAVE + UNITS_PER_OCTAVE) % UNITS_PER_OCTAVE / upr % edo
+      );
+      const tier = keyTier(step, edo);
+      const isC = step === 0;
+      const octave = Math.floor(units / UNITS_PER_OCTAVE) - 1;
+      const isC4Range = octave === 4;
+      const screenY = y - g_draw_offset_y;
+      g_grid_ctx.fillStyle = g_bg_active ? tier === 2 ? "rgba(8,11,22,0.55)" : tier === 1 ? "rgba(12,16,30,0.5)" : "rgba(17,22,40,0.45)" : tier === 2 ? "#080b16" : tier === 1 ? "#0c101d" : "#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();
+      g_grid_ctx.strokeStyle = isC ? "#3d405b" : "#1a1d30";
+      g_grid_ctx.lineWidth = 1;
+      const lineY = screenY + keyHeight;
+      g_grid_ctx.moveTo(0, lineY);
+      g_grid_ctx.lineTo(g_grid_canvas.width, lineY);
+      g_grid_ctx.stroke();
+    }
+    const gridStep = noteLengthSteps || 48;
+    const startX = Math.floor(g_draw_offset_x / (stepWidth * gridStep)) * stepWidth * gridStep;
+    const endX = g_draw_offset_x + g_grid_canvas.width;
+    const lineStep = stepWidth * gridStep;
+    for (let x2 = startX; x2 <= endX; x2 += lineStep) {
+      const step = x2 / stepWidth;
+      const isBarLine = step % stepsPerBar === 0;
+      const isNoteLine = step % gridStep === 0;
+      const screenX = x2 - g_draw_offset_x;
+      g_grid_ctx.beginPath();
+      g_grid_ctx.strokeStyle = isBarLine ? "#3d405b" : isNoteLine ? "#242840" : "#1a1d30";
+      g_grid_ctx.lineWidth = isBarLine ? 2 : 1;
+      g_grid_ctx.moveTo(screenX, 0);
+      g_grid_ctx.lineTo(screenX, g_grid_canvas.height);
+      g_grid_ctx.stroke();
+    }
+  };
+  const drawNotes = (notes, color = [59, 130, 246, 1], isActive = true) => {
+    const {
+      keyHeight,
+      stepWidth,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = g_config;
+    const canvasWidth = g_grid_canvas.width;
+    const canvasHeight = g_grid_canvas.height;
+    const [r, g, b, a] = color;
+    for (const note of notes) {
+      const logicalX = note.startStep * stepWidth;
+      const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
+      const logicalY = yIndex * keyHeight;
+      const w = note.durationSteps * stepWidth;
+      const h = keyHeight;
+      const renderX = logicalX - g_draw_offset_x;
+      const renderY = logicalY - g_draw_offset_y;
+      if (renderX + w < 0 || renderX > canvasWidth) continue;
+      if (renderY + h < 0 || renderY > canvasHeight) continue;
+      if (isActive) {
+        const velocityOpacity = note.velocity !== void 0 ? 0.6 + note.velocity / 127 * 0.4 : 1;
+        const finalOpacity = a * velocityOpacity;
+        g_grid_ctx.fillStyle = `rgba(${r},${g},${b},${finalOpacity})`;
+        g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
+        if (w >= 4 && h >= 4) {
+          g_grid_ctx.fillStyle = "rgba(255,255,255,0.4)";
+          g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, 1);
+          g_grid_ctx.fillRect(renderX + 1, renderY + 1, 1, h - 2);
+          g_grid_ctx.fillStyle = "rgba(0,0,0,0.45)";
+          g_grid_ctx.fillRect(renderX + 1, renderY + h - 2, w - 2, 1);
+          g_grid_ctx.fillRect(renderX + w - 2, renderY + 1, 1, h - 2);
+        }
+      } else {
+        const velocityOpacity = note.velocity !== void 0 ? 0.7 + note.velocity / 127 * 0.3 : 1;
+        const finalOpacity = Math.min(0.25, a * 0.22) * velocityOpacity;
+        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+        const ghostR = Math.round(r * 0.6 + gray * 0.4);
+        const ghostG = Math.round(g * 0.6 + gray * 0.4);
+        const ghostB = Math.round(b * 0.6 + gray * 0.4);
+        g_grid_ctx.fillStyle = `rgba(${ghostR},${ghostG},${ghostB},${finalOpacity})`;
+        g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
+      }
+    }
+  };
+  const drawNoteLyrics = (notes, syllables) => {
+    if (syllables.length === 0) return;
+    const {
+      keyHeight,
+      stepWidth,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = g_config;
+    if (keyHeight < 7) return;
+    const fontSize = Math.min(12, Math.floor(keyHeight * 0.85));
+    const sorted = [...notes].sort((a, b) => a.startStep - b.startStep);
+    const count = Math.min(sorted.length, syllables.length);
+    g_grid_ctx.save();
+    g_grid_ctx.font = `${fontSize}px 'k8x12',sans-serif`;
+    g_grid_ctx.textAlign = "left";
+    g_grid_ctx.textBaseline = "middle";
+    g_grid_ctx.lineWidth = 3;
+    g_grid_ctx.lineJoin = "round";
+    for (let i2 = 0; i2 < count; i2++) {
+      const kana = syllables[i2];
+      if (!kana) continue;
+      const note = sorted[i2];
+      const renderX = note.startStep * stepWidth - g_draw_offset_x;
+      const renderY = (keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr) * keyHeight - g_draw_offset_y;
+      const w = note.durationSteps * stepWidth;
+      if (w < 6) continue;
+      if (renderX + w < 0 || renderX > g_grid_canvas.width) continue;
+      if (renderY + keyHeight < 0 || renderY > g_grid_canvas.height) continue;
+      const textX = renderX + 2;
+      const textY = renderY + keyHeight / 2;
+      g_grid_ctx.save();
+      g_grid_ctx.beginPath();
+      g_grid_ctx.rect(renderX + 1, renderY + 1, w - 2, keyHeight - 2);
+      g_grid_ctx.clip();
+      g_grid_ctx.strokeStyle = "rgba(0,0,0,0.85)";
+      g_grid_ctx.strokeText(kana, textX, textY);
+      g_grid_ctx.fillStyle = "#fff1e8";
+      g_grid_ctx.fillText(kana, textX, textY);
+      g_grid_ctx.restore();
+    }
+    g_grid_ctx.restore();
+  };
+  const drawSelectionRect = (rect) => {
+    if (!rect) return;
+    g_grid_ctx.save();
+    g_grid_ctx.strokeStyle = "#ffec27";
+    g_grid_ctx.lineWidth = 2;
+    g_grid_ctx.setLineDash([4, 4]);
+    g_grid_ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    g_grid_ctx.fillStyle = "rgba(255,236,39,0.08)";
+    g_grid_ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    g_grid_ctx.restore();
+  };
+  const drawSelectedNotes = (notes, selectedIds, baseColor = [59, 130, 246, 1]) => {
+    const {
+      keyHeight,
+      stepWidth,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = g_config;
+    for (const note of notes) {
+      if (!selectedIds.has(note.id)) continue;
+      const logicalX = note.startStep * stepWidth;
+      const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
+      const logicalY = yIndex * keyHeight;
+      const w = note.durationSteps * stepWidth;
+      const h = keyHeight;
+      const renderX = logicalX - g_draw_offset_x;
+      const renderY = logicalY - g_draw_offset_y;
+      const velocityOpacity = note.velocity !== void 0 ? 0.5 + note.velocity / 127 * 0.5 : 1;
+      const [r, g, b, a] = baseColor;
+      const darkenFactor = 1.3;
+      const darkerR = Math.min(255, r * darkenFactor);
+      const darkerG = Math.min(255, g * darkenFactor);
+      const darkerB = Math.min(255, b * darkenFactor);
+      const finalOpacity = a * velocityOpacity;
+      g_grid_ctx.fillStyle = `rgba(${darkerR},${darkerG},${darkerB},${finalOpacity})`;
+      g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
+    }
+  };
+  const getXY = (e) => {
+    const { clientX, clientY } = e;
+    const rect = g_grid_canvas.getBoundingClientRect();
+    const x2 = Math.floor(clientX - rect.left);
+    const y = Math.floor(clientY - rect.top);
+    return [x2, y, e.buttons];
+  };
+  const getGridPosition = (e) => {
+    const [x2, y] = getXY(e);
+    const {
+      keyCount,
+      pitchRangeStart,
+      keyHeight,
+      stepWidth,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = g_config;
+    const step = Math.floor((x2 + g_draw_offset_x) / stepWidth);
+    const absoluteY = y + g_draw_offset_y;
+    const yIndex = Math.floor(absoluteY / keyHeight);
+    const pitch = pitchRangeStart + (keyCount - 1 - yIndex) * upr;
+    return { step, pitch, x: x2, y };
+  };
+  const onClick = (callback) => {
+    g_grid_canvas.addEventListener(
+      "click",
+      (e) => {
+        const [x2, y] = getXY(e);
+        const {
+          keyCount,
+          pitchRangeStart,
+          keyHeight,
+          stepWidth,
+          unitsPerRow: upr = UNITS_PER_SEMITONE
+        } = g_config;
+        const step = Math.floor((x2 + g_draw_offset_x) / stepWidth);
+        const absoluteY = y + g_draw_offset_y;
+        const yIndex = Math.floor(absoluteY / keyHeight);
+        const pitch = pitchRangeStart + (keyCount - 1 - yIndex) * upr;
+        if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount) {
+          requestAnimationFrame(() => callback(step, pitch));
+        }
+      },
+      { passive: true }
+    );
+    g_grid_canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+  };
+  const setDrawOffset = (x2, y) => {
+    g_draw_offset_x = x2;
+    g_draw_offset_y = y;
+    drawKeyboard();
+    drawHeader();
+  };
+  setup();
+  return {
+    getRenderConfig,
+    setBackgroundActive,
+    getDrawOffset,
+    getGridCanvas,
+    getGridContext,
+    getHeaderCanvas,
+    drawKeyboard,
+    drawHeader,
+    drawGrid,
+    drawNotes,
+    drawNoteLyrics,
+    drawSelectionRect,
+    drawSelectedNotes,
+    getXY,
+    getGridPosition,
+    onClick,
+    setDrawOffset,
+    destroy: () => {
+      mountTarget.innerHTML = "";
+    }
+  };
+};
+
 // src/daw.ts
 var CHORD_INFO_HTML2 = `
 <div class="dtm-modal-body-content">
@@ -13811,6 +14274,27 @@ var MIDI_INFO_HTML = `
   <p style="margin-top:4px;"><small>\u6B4C\u8A5E\u306E\u62BD\u51FA: <a href="https://rpgen3.github.io/ust2txt/" target="_blank" rel="noopener">ust2txt</a></small></p>
 </div>
 `;
+var EDO_INFO_HTML = `
+<div class="dtm-modal-section">
+  <p><strong>\u97F3\u5F8B</strong>\u306F1\u30AA\u30AF\u30BF\u30FC\u30D6\u3092\u4F55\u7B49\u5206\u3059\u308B\u304B\u306E\u8A2D\u5B9A\u3067\u3059\u3002\u66F2\u5168\u4F53\u306B\u52B9\u304D\u307E\u3059\uFF08\u30C8\u30E9\u30C3\u30AF\u3054\u3068\u30FB\u5C0F\u7BC0\u3054\u3068\u306B\u306F\u5909\u3048\u3089\u308C\u307E\u305B\u3093\uFF09\u3002</p>
+  <p><strong>12\u5E73\u5747\u5F8B</strong>\u304C\u901A\u5E38\u306E\u30D4\u30A2\u30CE\u3068\u540C\u3058\u8ABF\u5F8B\u3067\u3059\u3002<strong>31\u5E73\u5747\u5F8B</strong>\u306F1\u30AA\u30AF\u30BF\u30FC\u30D6\u309231\u7B49\u5206\u3057\u3001\u30D4\u30A2\u30CE\u306B\u306F\u7121\u3044\u97F3\uFF08\u5FAE\u5206\u97F3\uFF09\u304C\u4F7F\u3048\u307E\u3059\u3002</p>
+  <p style="margin-top:8px;"><strong>31\u5E73\u5747\u5F8B\u306E\u7279\u5FB4</strong></p>
+  <ul>
+    <li>\u95773\u5EA6\u304C\u7D14\u6B63\u306B\u3054\u304F\u8FD1\u304F\uFF08\u8AA4\u5DEE0.8\u30BB\u30F3\u30C8\uFF09\u3001<strong>\u548C\u97F3\u304C12\u5E73\u5747\u5F8B\u3088\u308A\u7DBA\u9E97\u306B\u97FF\u304D\u307E\u3059</strong>\u3002</li>
+    <li>\u30D4\u30A2\u30CE\u306B\u7121\u3044\u97F3\u304C\u4F7F\u3048\u307E\u3059\u3002\u4E2D\u7ACB3\u5EA6\uFF08\u9577\u77ED\u3069\u3061\u3089\u3067\u3082\u306A\u30443\u5EA6\uFF09\u3001\u81EA\u71367\u5EA6\uFF08\u30D0\u30FC\u30D0\u30FC\u30B7\u30E7\u30C3\u30D7\u306E\u97FF\u304D\uFF09\u306A\u3069\u3002</li>
+    <li>C\u266F \u3068 D\u266D \u304C<strong>\u5225\u306E\u97F3</strong>\u306B\u306A\u308A\u307E\u3059\uFF0812\u5E73\u5747\u5F8B\u3067\u306F\u540C\u3058\u97F3\uFF09\u3002</li>
+  </ul>
+  <p style="margin-top:8px;"><strong>MML\u3067\u306E\u66F8\u304D\u65B9</strong></p>
+  <p><code>#edo=31</code> \u3092\u5BA3\u8A00\u3057\u307E\u3059\u3002\u81E8\u6642\u8A18\u53F7\u306F4\u3064\u4F7F\u3044\u5206\u3051\u307E\u3059\u3002</p>
+  <ul>
+    <li><code>#</code> \u2026 \u534A\u97F3\u4E0A\u3052\uFF082\u5EA6\uFF09\u3000<code>-</code> \u2026 \u534A\u97F3\u4E0B\u3052\uFF082\u5EA6\uFF09</li>
+    <li><code>+</code> \u2026 \u5FAE\u5206\u97F31\u3064\u4E0A\u3052\uFF081\u5EA6\uFF09\u3000<code>_</code> \u2026 \u5FAE\u5206\u97F31\u3064\u4E0B\u3052\uFF081\u5EA6\uFF09</li>
+  </ul>
+  <p>\u4F8B: <code>#edo=31 @0 o4 c c+ c# d- d_ d;</code></p>
+  <p style="margin-top:8px;"><small>12\u5E73\u5747\u5F8B\u3067\u306F4\u8A18\u53F7\u3068\u3082\u5F93\u6765\u901A\u308A\u306E\u610F\u5473\uFF08\u30B7\u30E3\u30FC\u30D72\u3064\u30FB\u30D5\u30E9\u30C3\u30C82\u3064\uFF09\u306B\u306A\u308B\u306E\u3067\u3001\u65E2\u5B58\u306E\u66F2\u306E\u89E3\u91C8\u306F\u5909\u308F\u308A\u307E\u305B\u3093\u3002</small></p>
+  <p style="margin-top:8px;"><small>\u5207\u308A\u66FF\u3048\u308B\u3068\u3001\u65E2\u5B58\u306E\u97F3\u7B26\u306F\u65B0\u3057\u3044\u97F3\u5F8B\u306E\u683C\u5B50\u3078\u4E38\u3081\u3089\u308C\u307E\u3059\u300212\u219231 \u306F\u6700\u592719\u30BB\u30F3\u30C8\u306E\u79FB\u52D5\u3067\u5143\u306B\u623B\u305B\u307E\u3059\u304C\u3001<strong>31\u219212 \u306F\u6700\u592748\u30BB\u30F3\u30C8\u52D5\u304D\u300112\u5E73\u5747\u5F8B\u306B\u7121\u3044\u97F3\u306F\u5931\u308F\u308C\u307E\u3059</strong>\u3002</small></p>
+</div>
+`;
 var KOE_INFO_HTML = `
 <div class="dtm-modal-body-content">
   <h4>1. UTAU\u97F3\u6E90\u3092 .koe \u306B\u5909\u63DB\u3059\u308B</h4>
@@ -14028,7 +14512,7 @@ var AUTO_ROLE_BASE_VOLUME = {
   chord: 72
 };
 var computeAutoRoleStats = (notes) => {
-  const avgPitch = notes.reduce((s, n) => s + n.pitch, 0) / notes.length;
+  const avgPitch = notes.reduce((s, n) => s + n.pitchUnits, 0) / notes.length;
   const avgDur = notes.reduce((s, n) => s + n.durationSteps, 0) / notes.length;
   const byStart = /* @__PURE__ */ new Map();
   for (const n of notes)
@@ -14042,8 +14526,9 @@ var computeAutoRoleStats = (notes) => {
   const notesPerBeat = notes.length / spanBeats;
   return { avgPitch, avgDur, avgPoly, maxPoly, notesPerBeat };
 };
+var AUTO_ROLE_BASS_UNITS = 48 * UNITS_PER_SEMITONE;
 var classifyTrackRole = (stats) => {
-  if (stats.avgPitch < 48) return "bass";
+  if (stats.avgPitch < AUTO_ROLE_BASS_UNITS) return "bass";
   if (stats.maxPoly >= 2 && stats.avgDur >= AUTO_ROLE_STEPS_PER_BEAT)
     return "chord";
   if (stats.notesPerBeat < 1.2 && stats.avgDur >= AUTO_ROLE_STEPS_PER_BEAT * 1.5)
@@ -14055,7 +14540,10 @@ var computeAutoRoleVolume = (role, stats) => {
   if (role === "chord" && stats.avgPoly > 1) {
     vol /= Math.sqrt(stats.avgPoly);
   } else if (role === "bass") {
-    const depthSemitones = Math.max(0, 48 - stats.avgPitch);
+    const depthSemitones = Math.max(
+      0,
+      (AUTO_ROLE_BASS_UNITS - stats.avgPitch) / UNITS_PER_SEMITONE
+    );
     vol += Math.min(12, depthSemitones * 0.5);
   }
   return clamp5(Math.round(vol), 1, 127);
@@ -14147,17 +14635,48 @@ var mountDAW = (target, options = {}) => {
   refs.drumVolumeLabel.textContent = `${options.drumVolume ?? 80}%`;
   const renderConfig = {
     stepsPerBar: 192,
-    keyCount: 128,
-    pitchRangeStart: 0,
+    keyCount: KEY_COUNT,
+    pitchRangeStart: PITCH_RANGE_START,
+    unitsPerRow: unitsPerRow(12),
+    edo: 12,
     keyHeight: BASE_KEY_HEIGHT,
     stepWidth: BASE_STEP_WIDTH * 2
     // zoom100% 相当
   };
+  let renderer;
   let zoomX = 100;
   let zoomY = 100;
   let bpm = options.defaultBpm ?? DEFAULT_BPM;
   let masterVolume = options.masterVolume ?? 50;
-  options.singingVoices?.setVolume(masterVolume / 100);
+  const applyMasterVolume = (volume) => {
+    masterVolume = clamp5(Math.round(volume), 0, 100);
+    refs.masterVolume.value = String(masterVolume);
+    refs.masterVolumeLabel.textContent = `${masterVolume}%`;
+    options.singingVoices?.setVolume(masterVolume / 100);
+  };
+  applyMasterVolume(masterVolume);
+  const snapToEdoGrid = (units) => {
+    const upr = renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE;
+    return Math.round(units / upr) * upr;
+  };
+  const applyEdo = (edo, opts) => {
+    const next = edo === 31 ? 31 : 12;
+    if (renderConfig.edo === next) return;
+    const upr = unitsPerRow(next);
+    renderConfig.edo = next;
+    renderConfig.unitsPerRow = upr;
+    renderConfig.keyCount = keyCountFor(next);
+    if (!opts?.snap) return;
+    for (const t of trackStates) {
+      t.core.beginBatch();
+      for (const note of [...t.core.getNotes()]) {
+        const snapped = Math.round(note.pitchUnits / upr) * upr;
+        if (snapped !== note.pitchUnits)
+          t.core.moveNote(note.id, note.startStep, snapped);
+      }
+      t.core.endBatch();
+    }
+  };
   let reverbAmount = options.reverbAmount ?? 0;
   let reverbDecay = options.reverbDecay ?? DEFAULT_REVERB_DECAY_SEC;
   let reverbPreDelay = options.reverbPreDelay ?? DEFAULT_REVERB_PREDELAY_MS;
@@ -14215,8 +14734,8 @@ var mountDAW = (target, options = {}) => {
   let snapGridSteps = 12;
   const gridLineSteps = 48;
   let currentOffsetX = 0;
-  const _initPitch = options.initialScrollPitch ?? 48;
-  let currentOffsetY = (renderConfig.keyCount - 1 - _initPitch) * renderConfig.keyHeight - 215;
+  const _initPitch = pitchV1ToUnits(options.initialScrollPitch ?? 48);
+  let currentOffsetY = (renderConfig.keyCount - 1 - (_initPitch - renderConfig.pitchRangeStart) / (renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE)) * renderConfig.keyHeight - 215;
   let playStartStep = 0;
   let isSolo = false;
   let lyricTrackIndices = /* @__PURE__ */ new Set();
@@ -14311,21 +14830,28 @@ var mountDAW = (target, options = {}) => {
               if (!ready) return;
               if (!suppressPatch && options.onNotesPatch) {
                 const prevByKey = new Map(
-                  prevNotes.map((n) => [`${n.startStep}_${n.pitch}`, n])
+                  prevNotes.map((n) => [`${n.startStep}_${n.pitchUnits}`, n])
                 );
                 const currByKey = new Map(
-                  notes.map((n) => [`${n.startStep}_${n.pitch}`, n])
+                  notes.map((n) => [`${n.startStep}_${n.pitchUnits}`, n])
                 );
                 const added = notes.filter((n) => {
-                  const prev = prevByKey.get(`${n.startStep}_${n.pitch}`);
+                  const prev = prevByKey.get(
+                    `${n.startStep}_${n.pitchUnits}`
+                  );
                   return !prev || prev.durationSteps !== n.durationSteps || prev.velocity !== n.velocity;
                 }).map((n) => ({
                   startStep: n.startStep,
-                  pitch: n.pitch,
+                  pitchUnits: n.pitchUnits,
                   durationSteps: n.durationSteps,
                   velocity: n.velocity
                 }));
-                const removed = prevNotes.filter((n) => !currByKey.has(`${n.startStep}_${n.pitch}`)).map((n) => ({ startStep: n.startStep, pitch: n.pitch }));
+                const removed = prevNotes.filter(
+                  (n) => !currByKey.has(`${n.startStep}_${n.pitchUnits}`)
+                ).map((n) => ({
+                  startStep: n.startStep,
+                  pitchUnits: n.pitchUnits
+                }));
                 if (added.length > 0 || removed.length > 0) {
                   options.onNotesPatch(config.id, added, removed);
                 }
@@ -14335,7 +14861,8 @@ var mountDAW = (target, options = {}) => {
               updateUndoRedo();
             }
           },
-          config.volume
+          config.volume,
+          () => renderConfig
         ),
         volume: config.volume,
         savedChordInput: "",
@@ -14430,18 +14957,18 @@ var mountDAW = (target, options = {}) => {
     return (lastNoteMeasure + 2) * renderConfig.stepsPerBar;
   };
   const getMaxOffsetX = () => {
-    const canvas = getGridCanvas();
+    const canvas = renderer.getGridCanvas();
     const maxNoteStep = getMaxNoteStep();
     const totalContentWidth = maxNoteStep * renderConfig.stepWidth;
     return Math.max(0, totalContentWidth - canvas.width);
   };
   const getMaxOffsetY = () => {
     const totalHeight = renderConfig.keyCount * renderConfig.keyHeight;
-    return Math.max(0, totalHeight - getGridCanvas().height);
+    return Math.max(0, totalHeight - renderer.getGridCanvas().height);
   };
   const drawStartLine = () => {
-    const ctx = getGridContext();
-    const canvas = getGridCanvas();
+    const ctx = renderer.getGridContext();
+    const canvas = renderer.getGridCanvas();
     if (!ctx) return;
     const x2 = playStartStep * renderConfig.stepWidth - currentOffsetX;
     if (x2 < -10 || x2 > canvas.width + 10) return;
@@ -14456,8 +14983,8 @@ var mountDAW = (target, options = {}) => {
     ctx.restore();
   };
   const drawPlayhead = () => {
-    const ctx = getGridContext();
-    const canvas = getGridCanvas();
+    const ctx = renderer.getGridContext();
+    const canvas = renderer.getGridCanvas();
     if (!ctx) return;
     const x2 = currentPlayStep * renderConfig.stepWidth - currentOffsetX;
     if (x2 < 0 || x2 > canvas.width) return;
@@ -14471,20 +14998,28 @@ var mountDAW = (target, options = {}) => {
     ctx.restore();
   };
   const redrawAll = () => {
-    drawGrid(gridLineSteps);
+    renderer.drawGrid(gridLineSteps);
     let lyricTargetNotes = null;
+    let activeTrackState = null;
     for (const t of trackStates) {
       if (hiddenTracks.has(t.config.id)) continue;
       if (isSolo && t.config.id !== activeTrackId) continue;
+      if (t.config.id === activeTrackId) {
+        activeTrackState = t;
+        continue;
+      }
       const [r, g, b] = t.config.color;
-      const isActive = t.config.id === activeTrackId;
-      const a = isActive ? 1 : 0.3;
       const notes = t.core.getNotes();
-      drawNotes(notes, [r, g, b, a]);
-      if (isActive) lyricTargetNotes = notes;
+      renderer.drawNotes(notes, [r, g, b, 1], false);
+    }
+    if (activeTrackState) {
+      const [r, g, b] = activeTrackState.config.color;
+      const notes = activeTrackState.core.getNotes();
+      renderer.drawNotes(notes, [r, g, b, 1], true);
+      lyricTargetNotes = notes;
     }
     if (activeToolMode === "select" && selectionRect) {
-      const ctx = getGridContext();
+      const ctx = renderer.getGridContext();
       ctx.save();
       ctx.strokeStyle = "#ffec27";
       ctx.lineWidth = 2;
@@ -14507,19 +15042,19 @@ var mountDAW = (target, options = {}) => {
     if (activeToolMode === "select" && selectedNotes.length > 0) {
       const ids = new Set(selectedNotes.map((n) => n.id));
       const active = getActive();
-      drawSelectedNotes(active.core.getNotes(), ids, [
+      renderer.drawSelectedNotes(active.core.getNotes(), ids, [
         ...active.config.color,
         1
       ]);
     }
     if (lyricTargetNotes)
-      drawNoteLyrics(lyricTargetNotes, getActiveLyricKana());
+      renderer.drawNoteLyrics(lyricTargetNotes, getActiveLyricKana());
     drawStartLine();
     if (playbackState === "playing") drawPlayhead();
     updateScrollbars();
   };
   const updateScrollbars = () => {
-    const canvas = getGridCanvas();
+    const canvas = renderer.getGridCanvas();
     const maxOffsetX = getMaxOffsetX();
     const sbW = refs.hScroll.clientWidth;
     if (maxOffsetX <= 0) {
@@ -14603,7 +15138,7 @@ var mountDAW = (target, options = {}) => {
       const x2 = clamp5(clientX - rect.left - thumbW / 2, 0, rect.width - thumbW);
       const ratio = x2 / (rect.width - thumbW);
       currentOffsetX = clamp5(ratio * maxOffsetX, 0, maxOffsetX);
-      setDrawOffset(currentOffsetX, currentOffsetY);
+      renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       redrawAll();
     };
     const moveV = (clientY) => {
@@ -14614,7 +15149,7 @@ var mountDAW = (target, options = {}) => {
       const y = clamp5(clientY - rect.top - thumbH / 2, 0, rect.height - thumbH);
       const ratio = y / (rect.height - thumbH);
       currentOffsetY = clamp5(ratio * maxOffset, 0, maxOffset);
-      setDrawOffset(currentOffsetX, currentOffsetY);
+      renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       redrawAll();
     };
   };
@@ -14653,8 +15188,8 @@ var mountDAW = (target, options = {}) => {
   const autoScrollTick = () => {
     autoScrollRAF = null;
     if (!isSelecting || !lastMoveEvent) return;
-    const canvas = getGridCanvas();
-    const { x: x2, y } = getGridPosition(lastMoveEvent);
+    const canvas = renderer.getGridCanvas();
+    const { x: x2, y } = renderer.getGridPosition(lastMoveEvent);
     const dx = computeEdgeSpeed(x2, canvas.width);
     const dy = computeEdgeSpeed(y, canvas.height);
     if (dx !== 0 || dy !== 0) {
@@ -14662,7 +15197,7 @@ var mountDAW = (target, options = {}) => {
       const maxOffsetY = getMaxOffsetY();
       currentOffsetX = clamp5(currentOffsetX + dx, 0, maxOffsetX);
       currentOffsetY = clamp5(currentOffsetY + dy, 0, maxOffsetY);
-      setDrawOffset(currentOffsetX, currentOffsetY);
+      renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       onPointerMove(lastMoveEvent);
     }
     if (isSelecting) {
@@ -14683,11 +15218,17 @@ var mountDAW = (target, options = {}) => {
   };
   const findActiveNoteAt = (x2, y, margin = 0) => {
     const active = getActive();
-    const { stepWidth, keyHeight, keyCount, pitchRangeStart } = renderConfig;
-    const offset = getDrawOffset();
+    const {
+      stepWidth,
+      keyHeight,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = renderConfig;
+    const offset = renderer.getDrawOffset();
     for (const note of active.core.getNotes()) {
       const logicalX = note.startStep * stepWidth;
-      const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
+      const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
       const logicalY = yIndex * keyHeight;
       const w = note.durationSteps * stepWidth;
       const renderX = logicalX - offset.x;
@@ -14700,7 +15241,7 @@ var mountDAW = (target, options = {}) => {
   const hasNoteAt = (step, pitch, excludeId) => {
     const active = getActive();
     return active.core.getNotes().some(
-      (n) => n.id !== excludeId && n.pitch === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
+      (n) => n.id !== excludeId && n.pitchUnits === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
     );
   };
   const snapToGrid = (duration) => Math.max(
@@ -14711,7 +15252,7 @@ var mountDAW = (target, options = {}) => {
   const onGridPointerDown = (event) => {
     event.preventDefault();
     options.onResumeAudio?.();
-    const { x: x2, y, step, pitch } = getGridPosition(event);
+    const { x: x2, y, step, pitch } = renderer.getGridPosition(event);
     const active = getActive();
     if (activeToolMode === "eraser") {
       if (isActiveLocked()) return;
@@ -14726,7 +15267,7 @@ var mountDAW = (target, options = {}) => {
           selectedOriginal = selectedNotes.map((n) => ({
             id: n.id,
             startStep: n.startStep,
-            pitch: n.pitch
+            pitch: n.pitchUnits
           }));
           isSelecting = true;
           dragMode = "move";
@@ -14745,7 +15286,7 @@ var mountDAW = (target, options = {}) => {
           {
             id: clicked.id,
             startStep: clicked.startStep,
-            pitch: clicked.pitch
+            pitch: clicked.pitchUnits
           }
         ];
         isSelecting = true;
@@ -14763,9 +15304,9 @@ var mountDAW = (target, options = {}) => {
     hasDragged = false;
     const existing = findActiveNoteAt(x2, y, TOUCH_HIT_MARGIN);
     if (existing) {
-      playPreview(existing.pitch);
+      playPreview(existing.pitchUnits);
       const { stepWidth } = renderConfig;
-      const offset = getDrawOffset();
+      const offset = renderer.getDrawOffset();
       const renderX = existing.startStep * stepWidth - offset.x;
       const w = existing.durationSteps * stepWidth;
       if (x2 >= renderX + w - resizeHandleWidth && x2 <= renderX + w) {
@@ -14776,17 +15317,17 @@ var mountDAW = (target, options = {}) => {
           dragOffsetPitch: 0,
           startStep: existing.startStep,
           durationSteps: existing.durationSteps,
-          lastPreviewPitch: existing.pitch
+          lastPreviewPitch: existing.pitchUnits
         };
       } else {
         dragState = {
           noteId: existing.id,
           mode: "move",
           dragOffsetStep: step - existing.startStep,
-          dragOffsetPitch: pitch - existing.pitch,
+          dragOffsetPitch: pitch - existing.pitchUnits,
           startStep: existing.startStep,
           durationSteps: existing.durationSteps,
-          lastPreviewPitch: existing.pitch
+          lastPreviewPitch: existing.pitchUnits
         };
       }
       suppressClick = true;
@@ -14797,14 +15338,14 @@ var mountDAW = (target, options = {}) => {
     const newStart = snappedStep;
     const newEnd = newStart + currentInsertLength;
     const overlapping = active.core.getNotes().some(
-      (n) => n.pitch === pitch && newStart < n.startStep + n.durationSteps && newEnd > n.startStep
+      (n) => n.pitchUnits === pitch && newStart < n.startStep + n.durationSteps && newEnd > n.startStep
     );
     if (!overlapping) {
       active.core.addNote(snappedStep, pitch, {
         noteLengthSteps: currentInsertLength
       });
       playPreview(pitch);
-      const newNote = active.core.getNotes().find((n) => n.startStep === snappedStep && n.pitch === pitch);
+      const newNote = active.core.getNotes().find((n) => n.startStep === snappedStep && n.pitchUnits === pitch);
       if (newNote) {
         dragState = {
           noteId: newNote.id,
@@ -14813,7 +15354,7 @@ var mountDAW = (target, options = {}) => {
           dragOffsetPitch: 0,
           startStep: newNote.startStep,
           durationSteps: newNote.durationSteps,
-          lastPreviewPitch: newNote.pitch
+          lastPreviewPitch: newNote.pitchUnits
         };
         hasDragged = true;
       }
@@ -14824,7 +15365,7 @@ var mountDAW = (target, options = {}) => {
     const active = getActive();
     if (activeToolMode === "pen") {
       if (!dragState) return;
-      const { step, pitch } = getGridPosition(event);
+      const { step, pitch } = renderer.getGridPosition(event);
       hasDragged = true;
       if (dragState.mode === "move") {
         const nextStart = step - dragState.dragOffsetStep;
@@ -14848,7 +15389,7 @@ var mountDAW = (target, options = {}) => {
     }
     if (activeToolMode === "select" && isSelecting && selectionStart) {
       ensureAutoScroll(event);
-      const { x: x2, y, step, pitch } = getGridPosition(event);
+      const { x: x2, y, step, pitch } = renderer.getGridPosition(event);
       if (dragMode === "rect") {
         const rect = {
           x: Math.min(x2, selectionStart.x),
@@ -14857,11 +15398,17 @@ var mountDAW = (target, options = {}) => {
           height: Math.abs(y - selectionStart.y)
         };
         selectionRect = rect;
-        const { stepWidth, keyHeight, keyCount, pitchRangeStart } = renderConfig;
-        const offset = getDrawOffset();
+        const {
+          stepWidth,
+          keyHeight,
+          keyCount,
+          pitchRangeStart,
+          unitsPerRow: upr = UNITS_PER_SEMITONE
+        } = renderConfig;
+        const offset = renderer.getDrawOffset();
         selectedNotes = active.core.getNotes().filter((note) => {
           const logicalX = note.startStep * stepWidth;
-          const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
+          const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
           const logicalY = yIndex * keyHeight;
           const nx = logicalX - offset.x;
           const ny = logicalY - offset.y;
@@ -14880,7 +15427,7 @@ var mountDAW = (target, options = {}) => {
             const orig = selectedOriginal.find((o) => o.id === note.id);
             if (!orig) continue;
             const newPitch = orig.pitch + deltaPitch;
-            if (newPitch >= 0 && newPitch < 128)
+            if (newPitch >= PITCH_RANGE_START && newPitch <= PITCH_RANGE_END)
               active.core.moveNote(
                 note.id,
                 orig.startStep + snappedDelta,
@@ -15028,22 +15575,23 @@ var mountDAW = (target, options = {}) => {
       refs.bgOpacityRow.classList.add("dtm-hidden");
     }
     refs.bgRemoveBtn.classList.toggle("dtm-hidden", !blob2);
-    setBackgroundActive(!!blob2);
+    renderer.setBackgroundActive(!!blob2);
     redrawAll();
   };
   const setupCanvas = () => {
     const w = refs.rollContainer.clientWidth || 800;
     const h = refs.rollContainer.clientHeight || 450;
-    init(refs.wrapper, w, h, renderConfig);
-    const gridCanvas = getGridCanvas();
+    renderer?.destroy();
+    renderer = createRenderer(refs.wrapper, w, h, renderConfig);
+    const gridCanvas = renderer.getGridCanvas();
     gridCanvas.addEventListener("pointerdown", onGridPointerDown);
     gridCanvas.addEventListener("dblclick", (event) => {
       event.preventDefault();
       if (isActiveLocked()) return;
-      const { step, pitch } = getGridPosition(event);
+      const { step, pitch } = renderer.getGridPosition(event);
       const active = getActive();
       const note = active.core.getNotes().find(
-        (n) => n.pitch === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
+        (n) => n.pitchUnits === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
       );
       if (note) active.core.deleteNoteById(note.id);
     });
@@ -15061,7 +15609,7 @@ var mountDAW = (target, options = {}) => {
           0,
           getMaxOffsetX()
         );
-        setDrawOffset(currentOffsetX, currentOffsetY);
+        renderer.setDrawOffset(currentOffsetX, currentOffsetY);
         redrawAll();
       },
       { passive: false }
@@ -15071,7 +15619,7 @@ var mountDAW = (target, options = {}) => {
         suppressClick = false;
       }
     });
-    const headerCanvas = getHeaderCanvas();
+    const headerCanvas = renderer.getHeaderCanvas();
     headerCanvas.addEventListener("click", (event) => {
       if (playbackState === "playing") return;
       const rect = headerCanvas.getBoundingClientRect();
@@ -15087,11 +15635,11 @@ var mountDAW = (target, options = {}) => {
       }
       redrawAll();
     });
-    setDrawOffset(currentOffsetX, currentOffsetY);
+    renderer.setDrawOffset(currentOffsetX, currentOffsetY);
     redrawAll();
   };
   const applyZoomX = () => {
-    const canvas = getGridCanvas();
+    const canvas = renderer.getGridCanvas();
     const centerStep = (currentOffsetX + canvas.width / 2) / renderConfig.stepWidth;
     renderConfig.stepWidth = BASE_STEP_WIDTH * (zoomX * 2) / 100;
     refs.zoomXLabel.textContent = `${zoomX}%`;
@@ -15100,11 +15648,11 @@ var mountDAW = (target, options = {}) => {
       0,
       getMaxOffsetX()
     );
-    setDrawOffset(currentOffsetX, currentOffsetY);
+    renderer.setDrawOffset(currentOffsetX, currentOffsetY);
     redrawAll();
   };
   const applyZoomY = () => {
-    const canvas = getGridCanvas();
+    const canvas = renderer.getGridCanvas();
     const centerKey = (currentOffsetY + canvas.height / 2) / renderConfig.keyHeight;
     renderConfig.keyHeight = BASE_KEY_HEIGHT * zoomY / 100;
     refs.zoomYLabel.textContent = `${zoomY}%`;
@@ -15113,7 +15661,7 @@ var mountDAW = (target, options = {}) => {
       0,
       getMaxOffsetY()
     );
-    setDrawOffset(currentOffsetX, currentOffsetY);
+    renderer.setDrawOffset(currentOffsetX, currentOffsetY);
     redrawAll();
   };
   const getViewState = () => ({
@@ -15125,7 +15673,14 @@ var mountDAW = (target, options = {}) => {
   const notifyViewState = () => options.onViewStateChange?.(getViewState());
   const dispatchNote = (trackId, pitch, trackVol, velocity, when, duration) => {
     const volume = trackVol / 100 * (velocity / 127) * (masterVolume / 100);
-    options.onPlayNote?.({ trackId, pitch, velocity, volume, when, duration });
+    options.onPlayNote?.({
+      trackId,
+      pitchUnits: pitch,
+      velocity,
+      volume,
+      when,
+      duration
+    });
   };
   const sequencer = createSequencer({
     getTracks: () => trackStates.map((t) => ({
@@ -15153,7 +15708,7 @@ var mountDAW = (target, options = {}) => {
     },
     onTick: (step) => {
       currentPlayStep = step;
-      const canvas = getGridCanvas();
+      const canvas = renderer.getGridCanvas();
       const visibleSteps = canvas.width / renderConfig.stepWidth;
       const threshold = currentOffsetX / renderConfig.stepWidth + visibleSteps - 4;
       if (currentPlayStep > threshold) {
@@ -15163,7 +15718,7 @@ var mountDAW = (target, options = {}) => {
           0,
           getMaxOffsetX()
         );
-        setDrawOffset(currentOffsetX, currentOffsetY);
+        renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       }
       redrawAll();
     },
@@ -15194,7 +15749,7 @@ var mountDAW = (target, options = {}) => {
         (a, b) => a.startStep - b.startStep
       );
       const gate = (lt.gate ?? DEFAULT_GATE) / 100;
-      const semis = (lt.octave ?? 0) * 12;
+      const semis = (lt.octave ?? 0) * UNITS_PER_OCTAVE;
       const count = Math.min(sorted.length, lt.syllables.length);
       const notes = [];
       for (let i2 = 0; i2 < count; i2++) {
@@ -15202,7 +15757,7 @@ var mountDAW = (target, options = {}) => {
         if (n.startStep < fromStep) continue;
         notes.push({
           syllable: lt.syllables[i2],
-          pitch: n.pitch + semis,
+          pitch: n.pitchUnits + semis,
           startSec: (n.startStep - fromStep) * secondsPerStep,
           durationSec: n.durationSteps * secondsPerStep * gate
         });
@@ -15245,13 +15800,13 @@ var mountDAW = (target, options = {}) => {
       }
     }
     if (playbackState !== "paused") {
-      const canvas = getGridCanvas();
+      const canvas = renderer.getGridCanvas();
       currentOffsetX = clamp5(
         playStartStep * renderConfig.stepWidth - canvas.width * 0.5,
         0,
         getMaxOffsetX()
       );
-      setDrawOffset(currentOffsetX, currentOffsetY);
+      renderer.setDrawOffset(currentOffsetX, currentOffsetY);
     }
     playbackState = "playing";
     sequencer.start(fromStep);
@@ -15337,17 +15892,38 @@ var mountDAW = (target, options = {}) => {
     trackPillEls.clear();
     for (const [i2, t] of trackStates.entries()) {
       const [r, g, b] = t.config.color;
+      const isActive = t.config.id === activeTrackId;
       const btn = document.createElement("button");
-      btn.className = `dtm-pill ${t.config.id === activeTrackId ? "dtm-pill--active" : ""}`;
+      btn.className = `dtm-pill ${isActive ? "dtm-pill--active" : ""}`;
       btn.style.setProperty("--dtm-pill-color", `rgb(${r},${g},${b})`);
-      btn.title = t.config.name;
+      btn.title = `Track ${i2 + 1}: ${t.config.name}`;
+      btn.setAttribute(
+        "aria-label",
+        `Track ${i2 + 1}: ${t.config.name}${isActive ? " (\u9078\u629E\u4E2D)" : ""}`
+      );
       btn.textContent = String(i2 + 1);
       btn.addEventListener("click", () => switchTrack(t.config.id));
       refs.trackTabs.appendChild(btn);
       trackPillEls.set(t.config.id, btn);
     }
     const active = getActive();
+    const activeIndex = trackStates.findIndex(
+      (t) => t.config.id === activeTrackId
+    );
+    const [activeR, activeG, activeB] = active.config.color;
+    const panelEl = refs.trackBody.closest(".dtm-panel");
+    if (panelEl) {
+      const summaryEl = panelEl.querySelector("summary");
+      if (summaryEl) {
+        summaryEl.textContent = `\u500B\u5225\u30C8\u30E9\u30C3\u30AF\u8A2D\u5B9A\uFF08Track ${activeIndex + 1}: ${active.config.name}\uFF09`;
+      }
+    }
     refs.trackBody.innerHTML = `
+      <div class="dtm-active-track-banner" style="--dtm-track-color: rgb(${activeR},${activeG},${activeB})">
+        <span class="dtm-active-track-badge">TRACK ${activeIndex + 1}</span>
+        <span class="dtm-active-track-name">${active.config.name}</span>
+        <span class="dtm-active-track-pill">ACTIVE</span>
+      </div>
       <div class="dtm-row">
         <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}">
@@ -16217,6 +16793,7 @@ var mountDAW = (target, options = {}) => {
         fadeIn: Math.round(fadeInSec * 10),
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
+        edo: renderConfig.edo,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -16245,6 +16822,7 @@ var mountDAW = (target, options = {}) => {
         fadeIn: Math.round(fadeInSec * 10),
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
+        edo: renderConfig.edo,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -16384,19 +16962,19 @@ var mountDAW = (target, options = {}) => {
       }
     }
     if (candidateNotes.length === 0) return null;
-    const sum = candidateNotes.reduce((acc, note) => acc + note.pitch, 0);
+    const sum = candidateNotes.reduce((acc, note) => acc + note.pitchUnits, 0);
     return Math.round(sum / candidateNotes.length);
   };
   const centerPitch = (pitch) => {
-    const canvas = getGridCanvas();
-    const yIndex = renderConfig.keyCount - 1 - (pitch - renderConfig.pitchRangeStart);
+    const canvas = renderer.getGridCanvas();
+    const yIndex = renderConfig.keyCount - 1 - (pitch - renderConfig.pitchRangeStart) / (renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE);
     const logicalY = yIndex * renderConfig.keyHeight;
     currentOffsetY = clamp5(
       logicalY - (canvas.height - renderConfig.keyHeight) / 2,
       0,
       getMaxOffsetY()
     );
-    setDrawOffset(currentOffsetX, currentOffsetY);
+    renderer.setDrawOffset(currentOffsetX, currentOffsetY);
   };
   const clearAll = () => {
     for (const t of trackStates) {
@@ -16454,10 +17032,10 @@ var mountDAW = (target, options = {}) => {
         if (!meta.drumFont) applyDrumPatternFont(meta.drum);
       }
       if (meta.volume !== void 0) {
-        masterVolume = meta.volume;
-        refs.masterVolume.value = String(meta.volume);
-        refs.masterVolumeLabel.textContent = `${meta.volume}%`;
+        applyMasterVolume(meta.volume);
       }
+      applyEdo(meta.edo ?? 12);
+      refs.edoSelect.value = String(renderConfig.edo ?? 12);
       if (meta.drumVolume !== void 0) {
         drumVolume = meta.drumVolume;
         refs.drumVolume.value = String(meta.drumVolume);
@@ -16622,7 +17200,7 @@ var mountDAW = (target, options = {}) => {
       if (applyActiveOnly && p.trackIndex !== activeTrackIndex) continue;
       const t = trackStates[p.trackIndex];
       if (!t) continue;
-      t.core.addNote(p.startStep, p.pitch, {
+      t.core.addNote(p.startStep, p.pitchUnits, {
         noteLengthSteps: p.durationSteps,
         velocity: DEFAULT_VELOCITY
       });
@@ -16639,7 +17217,7 @@ var mountDAW = (target, options = {}) => {
     if (firstPitch !== null) {
       centerPitch(firstPitch);
     } else {
-      centerPitch(48);
+      centerPitch(pitchV1ToUnits(48));
     }
     redrawAll();
     updateTrackPanel();
@@ -16657,6 +17235,8 @@ var mountDAW = (target, options = {}) => {
     const chordTrack = trackStates.find((t) => t.config.id === "chord");
     if (!chordTrack) return;
     const placements = buildChordPlacements({
+      // 和音は五度連鎖経由で音律の格子へ写す（31平均律では長3度が10度になる）
+      edo: renderConfig.edo,
       chordStr: active.savedChordInput,
       patternType: active.savedChordPattern,
       rootShift: active.savedChordRoot,
@@ -16666,7 +17246,7 @@ var mountDAW = (target, options = {}) => {
     chordTrack.core.clearNotesWithoutHistory();
     chordTrack.core.beginBatch();
     for (const p of placements) {
-      chordTrack.core.addNote(p.startStep, p.pitch, {
+      chordTrack.core.addNote(p.startStep, p.pitchUnits, {
         noteLengthSteps: Math.max(1, p.durationSteps),
         velocity: p.velocity
       });
@@ -16704,6 +17284,8 @@ var mountDAW = (target, options = {}) => {
       active.vocalOctaveUnison = "none";
     } else {
       clearAll();
+      applyEdo(12);
+      refs.edoSelect.value = String(renderConfig.edo ?? 12);
       for (const t of trackStates) t.core.setLoadMode(true);
       for (const t of trackStates) {
         t.lyrics = "";
@@ -16730,7 +17312,7 @@ var mountDAW = (target, options = {}) => {
       if (applyActiveOnly && p.trackId !== activeTrackId) continue;
       const t = trackStates.find((ts) => ts.config.id === p.trackId);
       if (!t) continue;
-      t.core.addNote(p.startStep, p.pitch, {
+      t.core.addNote(p.startStep, snapToEdoGrid(pitchV1ToUnits(p.pitch)), {
         noteLengthSteps: p.durationSteps,
         velocity: p.velocity
       });
@@ -16747,7 +17329,7 @@ var mountDAW = (target, options = {}) => {
     if (firstPitch !== null) {
       centerPitch(firstPitch);
     } else {
-      centerPitch(48);
+      centerPitch(pitchV1ToUnits(48));
     }
     redrawAll();
     updateTrackPanel();
@@ -16811,18 +17393,21 @@ var mountDAW = (target, options = {}) => {
       }
     }, 30);
   };
-  const showConfirmModal = (message) => new Promise((resolve) => {
+  const showConfirmModal = (message, opts) => new Promise((resolve) => {
+    const title = opts?.title ?? "\u30E2\u30FC\u30C9\u306E\u78BA\u8A8D";
+    const yes = opts?.yes ?? "\u306F\u3044\uFF08\u4E0A\u7D1A\u8005\u30E2\u30FC\u30C9\u306B\u5207\u308A\u66FF\u3048\u308B\uFF09";
+    const no = opts?.no ?? "\u3044\u3044\u3048\uFF08\u3053\u306E\u307E\u307E\u8AAD\u307F\u8FBC\u3080\uFF09";
     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>
+						<span class="dtm-modal-title">${title}</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>
+						<button class="dtm-btn dtm-btn--ghost dtm-confirm-no">${no}</button>
+						<button class="dtm-btn dtm-btn--primary dtm-confirm-yes">${yes}</button>
 					</div>
 				</div>`;
     const close = (result) => {
@@ -16930,10 +17515,36 @@ var mountDAW = (target, options = {}) => {
     });
     refs.decomposeChordToggle.addEventListener("change", notifyViewState);
     refs.ignoreChordHeavyToggle.addEventListener("change", notifyViewState);
+    refs.edoSelect.addEventListener("change", async () => {
+      const next = Number.parseInt(refs.edoSelect.value, 10) === 31 ? 31 : 12;
+      const prev = renderConfig.edo ?? 12;
+      if (next === prev) return;
+      const hasNotes = trackStates.some((t) => t.core.getNotes().length > 0);
+      if (next === 12 && prev === 31 && hasNotes) {
+        const okToDrop = await showConfirmModal(
+          "31\u5E73\u5747\u5F8B\u304B\u308912\u5E73\u5747\u5F8B\u3078\u623B\u3059\u3068\u3001\u97F3\u7B26\u304C\u6700\u592748\u30BB\u30F3\u30C8\uFF08\u534A\u97F3\u306E\u7D04\u534A\u5206\uFF09\u52D5\u304D\u307E\u3059\u3002<br>12\u5E73\u5747\u5F8B\u306B\u7121\u3044\u97F3\uFF08\u4E2D\u7ACB3\u5EA6\u306A\u3069\uFF09\u306F\u8FD1\u3044\u97F3\u306B\u6F70\u308C\u3001<strong>\u5143\u306B\u306F\u623B\u305B\u307E\u305B\u3093</strong>\u3002<br>\u5207\u308A\u66FF\u3048\u307E\u3059\u304B\uFF1F",
+          {
+            title: "\u97F3\u5F8B\u306E\u78BA\u8A8D",
+            yes: "\u5207\u308A\u66FF\u3048\u308B",
+            no: "\u3084\u3081\u308B"
+          }
+        );
+        if (!okToDrop) {
+          refs.edoSelect.value = String(prev);
+          return;
+        }
+      }
+      applyEdo(next, { snap: true });
+      const first = getFirstDetectedPitch();
+      centerPitch(first ?? pitchV1ToUnits(48));
+      redrawAll();
+      updateUndoRedo();
+    });
+    refs.edoInfoBtn.addEventListener("click", () => {
+      showModal("\u97F3\u5F8B\u306E\u89E3\u8AAC", EDO_INFO_HTML);
+    });
     refs.masterVolume.addEventListener("input", () => {
-      masterVolume = Number.parseInt(refs.masterVolume.value, 10) || 0;
-      refs.masterVolumeLabel.textContent = `${masterVolume}%`;
-      options.singingVoices?.setVolume(masterVolume / 100);
+      applyMasterVolume(Number.parseInt(refs.masterVolume.value, 10) || 0);
     });
     refs.masterComp.addEventListener("input", () => {
       masterCompression = Number.parseInt(refs.masterComp.value, 10) || 0;
@@ -16997,10 +17608,7 @@ var mountDAW = (target, options = {}) => {
         const scale = targetPeak / observedPeakMax;
         const suggested = clamp5(Math.round(masterVolume * scale), 10, 100);
         if (suggested !== masterVolume) {
-          masterVolume = suggested;
-          refs.masterVolume.value = String(masterVolume);
-          refs.masterVolumeLabel.textContent = `${masterVolume}%`;
-          options.singingVoices?.setVolume(masterVolume / 100);
+          applyMasterVolume(suggested);
         }
         observedPeakMax = 0;
         observedPlayMs = 0;
@@ -17160,7 +17768,8 @@ var mountDAW = (target, options = {}) => {
         generateRandomPattern(getActive().core, {
           stepsPerBar: renderConfig.stepsPerBar,
           startStep: playStartStep,
-          pitchRangeStart: renderConfig.pitchRangeStart
+          pitchRangeStart: renderConfig.pitchRangeStart,
+          edo: renderConfig.edo
         });
         redrawAll();
       });
@@ -17497,7 +18106,7 @@ var mountDAW = (target, options = {}) => {
         id: 0,
         startStep: p.startStep,
         durationSteps: p.durationSteps,
-        pitch: p.pitch,
+        pitchUnits: snapToEdoGrid(pitchV1ToUnits(p.pitch)),
         velocity: p.velocity
       }));
       const mml = refCore.getMMLFromNotes(asNotes, tempo, 100).trim();
@@ -17952,10 +18561,10 @@ var mountDAW = (target, options = {}) => {
         const newStart = playStartStep + (note.startStep - minStart);
         const newEnd = newStart + note.durationSteps;
         const overlap = notes.some(
-          (ex) => ex.pitch === note.pitch && newStart < ex.startStep + ex.durationSteps && newEnd > ex.startStep
+          (ex) => ex.pitchUnits === note.pitchUnits && newStart < ex.startStep + ex.durationSteps && newEnd > ex.startStep
         );
         if (!overlap)
-          core.addNote(newStart, note.pitch, {
+          core.addNote(newStart, note.pitchUnits, {
             noteLengthSteps: note.durationSteps,
             velocity: note.velocity
           });
@@ -18028,13 +18637,13 @@ var mountDAW = (target, options = {}) => {
     pausedPlayStep = step;
     currentPlayStep = step;
     playbackState = "paused";
-    const canvas = getGridCanvas();
+    const canvas = renderer.getGridCanvas();
     currentOffsetX = clamp5(
       step * renderConfig.stepWidth - canvas.width * 0.5,
       0,
       getMaxOffsetX()
     );
-    setDrawOffset(currentOffsetX, currentOffsetY);
+    renderer.setDrawOffset(currentOffsetX, currentOffsetY);
     updateTransport();
     redrawAll();
   };
@@ -18102,16 +18711,10 @@ var mountDAW = (target, options = {}) => {
     forcePauseAt,
     setLoading,
     setMasterVolume: (volume) => {
-      masterVolume = clamp5(volume, 0, 100);
-      refs.masterVolume.value = String(masterVolume);
-      refs.masterVolumeLabel.textContent = `${masterVolume}%`;
-      options.singingVoices?.setVolume(masterVolume / 100);
+      applyMasterVolume(volume);
     },
     setVolume: (volume) => {
-      masterVolume = clamp5(volume, 0, 100);
-      refs.masterVolume.value = String(masterVolume);
-      refs.masterVolumeLabel.textContent = `${masterVolume}%`;
-      options.singingVoices?.setVolume(masterVolume / 100);
+      applyMasterVolume(volume);
     },
     setDrumVolume: (volume) => {
       drumVolume = clamp5(volume, 0, 100);
@@ -18154,15 +18757,19 @@ var mountDAW = (target, options = {}) => {
       suppressPatch = true;
       track.core.beginBatch();
       for (const n of added) {
-        const existing = track.core.getNotes().find((e) => e.startStep === n.startStep && e.pitch === n.pitch);
+        const existing = track.core.getNotes().find(
+          (e) => e.startStep === n.startStep && e.pitchUnits === n.pitchUnits
+        );
         if (existing) track.core.deleteNoteById(existing.id);
-        track.core.addNote(n.startStep, n.pitch, {
+        track.core.addNote(n.startStep, n.pitchUnits, {
           noteLengthSteps: n.durationSteps,
           velocity: n.velocity
         });
       }
       for (const r of removed) {
-        const note = track.core.getNotes().find((n) => n.startStep === r.startStep && n.pitch === r.pitch);
+        const note = track.core.getNotes().find(
+          (n) => n.startStep === r.startStep && n.pitchUnits === r.pitchUnits
+        );
         if (note) track.core.deleteNoteById(note.id);
       }
       track.core.endBatch();
@@ -18204,9 +18811,9 @@ var mountDAW = (target, options = {}) => {
       if (t.config.id === activeTrackId) updateTrackPanel();
     },
     noteToCanvas: (step, pitch) => {
-      const canvas = getGridCanvas();
+      const canvas = renderer.getGridCanvas();
       const x2 = step * renderConfig.stepWidth - currentOffsetX;
-      const y = (renderConfig.keyCount - 1 - pitch) * renderConfig.keyHeight - currentOffsetY;
+      const y = (renderConfig.keyCount - 1 - (pitch - renderConfig.pitchRangeStart) / (renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE)) * renderConfig.keyHeight - currentOffsetY;
       const onScreen = x2 >= 0 && x2 <= canvas.width && y >= 0 && y <= canvas.height;
       let side = null;
       if (!onScreen) {
@@ -18270,7 +18877,7 @@ var playSingingMML = async (mml, options = {}) => {
       id: id++,
       startStep: p.startStep,
       durationSteps: p.durationSteps,
-      pitch: p.pitch,
+      pitchUnits: p.pitchUnits,
       velocity: p.velocity
     }));
     return {
@@ -18296,7 +18903,7 @@ var playSingingMML = async (mml, options = {}) => {
       (a, b) => a.startStep - b.startStep
     );
     const gate = (lt.gate ?? DEFAULT_GATE) / 100;
-    const semis = (lt.octave ?? 0) * 12;
+    const semis = (lt.octave ?? 0) * UNITS_PER_OCTAVE;
     const count = Math.min(sorted.length, lt.syllables.length);
     const notes = [];
     for (let i2 = 0; i2 < count; i2++) {
@@ -18304,7 +18911,7 @@ var playSingingMML = async (mml, options = {}) => {
       if (n.startStep < fromStep) continue;
       notes.push({
         syllable: lt.syllables[i2],
-        pitch: n.pitch + semis,
+        pitch: n.pitchUnits + semis,
         startSec: (n.startStep - fromStep) * secondsPerStep,
         durationSec: n.durationSteps * secondsPerStep * gate
       });
@@ -18492,24 +19099,28 @@ var createPianoRoll = (options, handlers) => {
     config,
     noteLengthSteps = 1
   } = options;
-  init(mountTarget, width, height, config);
+  const renderer = createRenderer(mountTarget, width, height, config);
   let currentNoteLengthSteps = noteLengthSteps;
   let selectionRect = null;
   let isSelecting = false;
   let selectionStart = null;
   let selectedNotes = [];
   let copiedNotes = [];
-  const core = new MMLCore({
-    onMMLGenerated: handlers.onMMLGenerated,
-    onNotesChanged: (notes) => {
-      handlers.onNotesChanged(notes);
-    }
-  });
+  const core = new MMLCore(
+    {
+      onMMLGenerated: handlers.onMMLGenerated,
+      onNotesChanged: (notes) => {
+        handlers.onNotesChanged(notes);
+      }
+    },
+    80,
+    () => config
+  );
   const getAddNoteOptions = () => ({
     noteLengthSteps: currentNoteLengthSteps
   });
   let suppressClick = false;
-  onClick((step, pitch) => {
+  renderer.onClick((step, pitch) => {
     if (suppressClick) {
       suppressClick = false;
       return;
@@ -18521,7 +19132,7 @@ var createPianoRoll = (options, handlers) => {
     } else if (mode === "eraser") {
       const notes = core.getNotes();
       const note = notes.find(
-        (n) => n.startStep <= step && step < n.startStep + n.durationSteps && n.pitch === pitch
+        (n) => n.startStep <= step && step < n.startStep + n.durationSteps && n.pitchUnits === pitch
       );
       if (note) {
         core.deleteNoteById(note.id);
@@ -18529,17 +19140,23 @@ var createPianoRoll = (options, handlers) => {
       }
     }
   });
-  const gridCanvas = getGridCanvas();
+  const gridCanvas = renderer.getGridCanvas();
   const resizeHandleWidth = 6;
   let dragState = null;
   let hasDragged = false;
   let lastPreviewPitch = null;
   const findNoteAtPosition = (x2, y) => {
-    const { stepWidth, keyHeight, keyCount, pitchRangeStart } = getRenderConfig();
-    const offset = getDrawOffset();
+    const {
+      stepWidth,
+      keyHeight,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = renderer.getRenderConfig();
+    const offset = renderer.getDrawOffset();
     for (const note of core.getNotes()) {
       const logicalX = note.startStep * stepWidth;
-      const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
+      const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
       const logicalY = yIndex * keyHeight;
       const w = note.durationSteps * stepWidth;
       const h = keyHeight;
@@ -18553,7 +19170,7 @@ var createPianoRoll = (options, handlers) => {
   };
   const handlePointerMove = (e) => {
     if (core.getToolMode() === "select" && isSelecting && selectionStart) {
-      const { x: x2, y } = getGridPosition(e);
+      const { x: x2, y } = renderer.getGridPosition(e);
       const minX = Math.min(x2, selectionStart.x);
       const minY = Math.min(y, selectionStart.y);
       const width2 = Math.abs(x2 - selectionStart.x);
@@ -18565,7 +19182,7 @@ var createPianoRoll = (options, handlers) => {
     }
     if (!dragState) return;
     hasDragged = true;
-    const { step, pitch } = getGridPosition(e);
+    const { step, pitch } = renderer.getGridPosition(e);
     if (dragState.mode === "move") {
       if (dragState.selectedNotes && dragState.selectedNotes.length > 0) {
         const noteId = dragState.noteId;
@@ -18574,10 +19191,10 @@ var createPianoRoll = (options, handlers) => {
         const nextStart2 = step - dragState.dragOffsetStep;
         const nextPitch2 = pitch - dragState.dragOffsetPitch;
         const stepDelta = nextStart2 - baseNote.startStep;
-        const pitchDelta = nextPitch2 - baseNote.pitch;
+        const pitchDelta = nextPitch2 - baseNote.pitchUnits;
         for (const note of dragState.selectedNotes) {
           const newStart = note.startStep + stepDelta;
-          const newPitch = note.pitch + pitchDelta;
+          const newPitch = note.pitchUnits + pitchDelta;
           core.moveNote(note.id, newStart, newPitch);
         }
         if (options.onPreviewSound && pitch !== lastPreviewPitch) {
@@ -18618,7 +19235,7 @@ var createPianoRoll = (options, handlers) => {
     }
   };
   gridCanvas.addEventListener("pointerdown", (e) => {
-    const { x: x2, y, step, pitch } = getGridPosition(e);
+    const { x: x2, y, step, pitch } = renderer.getGridPosition(e);
     const currentMode = core.getToolMode();
     if (currentMode === "select") {
       const clickedNote = findNoteAtPosition(x2, y);
@@ -18629,7 +19246,7 @@ var createPianoRoll = (options, handlers) => {
             noteId: clickedNote.id,
             mode: "move",
             dragOffsetStep: step - clickedNote.startStep,
-            dragOffsetPitch: pitch - clickedNote.pitch,
+            dragOffsetPitch: pitch - clickedNote.pitchUnits,
             startStep: clickedNote.startStep,
             selectedNotes: notesInRect
             // 複数選択ノートを保存
@@ -18647,10 +19264,16 @@ var createPianoRoll = (options, handlers) => {
     }
     const note = findNoteAtPosition(x2, y);
     if (!note) return;
-    const { stepWidth, keyHeight, keyCount, pitchRangeStart } = getRenderConfig();
-    const offset = getDrawOffset();
+    const {
+      stepWidth,
+      keyHeight,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = renderer.getRenderConfig();
+    const offset = renderer.getDrawOffset();
     const logicalX = note.startStep * stepWidth;
-    const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
+    const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
     const logicalY = yIndex * keyHeight;
     const renderX = logicalX - offset.x;
     const renderY = logicalY - offset.y;
@@ -18669,7 +19292,7 @@ var createPianoRoll = (options, handlers) => {
       noteId: note.id,
       mode: "move",
       dragOffsetStep: step - note.startStep,
-      dragOffsetPitch: pitch - note.pitch,
+      dragOffsetPitch: pitch - note.pitchUnits,
       startStep: note.startStep
     };
   });
@@ -18680,41 +19303,47 @@ var createPianoRoll = (options, handlers) => {
     "wheel",
     (e) => {
       e.preventDefault();
-      const configValues = getRenderConfig();
+      const configValues = renderer.getRenderConfig();
       const gridHeight = gridCanvas.height;
       const maxOffsetY = Math.max(
         0,
         configValues.keyCount * configValues.keyHeight - gridHeight
       );
-      const currentOffset = getDrawOffset();
+      const currentOffset = renderer.getDrawOffset();
       const nextOffsetY = Math.min(
         Math.max(currentOffset.y + e.deltaY, 0),
         maxOffsetY
       );
-      setDrawOffset(currentOffset.x, nextOffsetY);
-      drawGrid();
-      drawNotes(core.getNotes());
+      renderer.setDrawOffset(currentOffset.x, nextOffsetY);
+      renderer.drawGrid();
+      renderer.drawNotes(core.getNotes());
     },
     { passive: false }
   );
   const redraw = () => {
-    drawGrid();
-    drawNotes(core.getNotes());
+    renderer.drawGrid();
+    renderer.drawNotes(core.getNotes());
     if (core.getToolMode() === "select") {
-      drawSelectionRect(selectionRect);
+      renderer.drawSelectionRect(selectionRect);
       if (selectedNotes.length > 0) {
         const selectedIds = new Set(selectedNotes.map((n) => n.id));
-        drawSelectedNotes(core.getNotes(), selectedIds);
+        renderer.drawSelectedNotes(core.getNotes(), selectedIds);
       }
     }
   };
   const getNotesInRect = (rect) => {
-    const { stepWidth, keyHeight, keyCount, pitchRangeStart } = getRenderConfig();
-    const offset = getDrawOffset();
+    const {
+      stepWidth,
+      keyHeight,
+      keyCount,
+      pitchRangeStart,
+      unitsPerRow: upr = UNITS_PER_SEMITONE
+    } = renderer.getRenderConfig();
+    const offset = renderer.getDrawOffset();
     const notes = [];
     for (const note of core.getNotes()) {
       const logicalX = note.startStep * stepWidth;
-      const yIndex = keyCount - 1 - (note.pitch - pitchRangeStart);
+      const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
       const logicalY = yIndex * keyHeight;
       const noteRect = {
         x: logicalX - offset.x,
@@ -18761,7 +19390,7 @@ var createPianoRoll = (options, handlers) => {
       const minStart = Math.min(...copiedNotes.map((n) => n.startStep));
       copiedNotes.forEach((note) => {
         const newStep = startStep + (note.startStep - minStart);
-        core.addNote(newStep, note.pitch, {
+        core.addNote(newStep, note.pitchUnits, {
           noteLengthSteps: note.durationSteps,
           velocity: note.velocity
         });
@@ -19602,10 +20231,12 @@ var createDtmStudio = async (options = {}) => {
         );
       }
       if (!sfInst) return;
+      const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
       sfInst.play({
         ctx: audioCtx,
         destination: getChannelStrip(e.trackId).input,
-        pitch: e.pitch,
+        pitch: midi,
+        detuneCents,
         volume: e.volume,
         velocity: e.velocity,
         when: e.when,
@@ -19921,10 +20552,12 @@ var createDtmStudio = async (options = {}) => {
         );
       }
       if (!sfInst) return;
+      const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
       sfInst.play({
         ctx: audioCtx,
         destination: getChannelStrip(e.trackId).input,
-        pitch: e.pitch,
+        pitch: midi,
+        detuneCents,
         volume: e.volume,
         velocity: e.velocity,
         when: e.when,
@@ -20010,10 +20643,12 @@ var createDtmStudio = async (options = {}) => {
         );
       }
       if (!sfInst) return;
+      const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
       sfInst.play({
         ctx: audioCtx,
         destination: getChannelStrip(e.trackId).input,
-        pitch: e.pitch,
+        pitch: midi,
+        detuneCents,
         volume: e.volume,
         velocity: e.velocity,
         when: e.when,
@@ -20092,10 +20727,12 @@ var createDtmStudio = async (options = {}) => {
         );
       }
       if (!sfInst) return;
+      const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
       sfInst.play({
         ctx: audioCtx,
         destination: getChannelStrip(e.trackId).input,
-        pitch: e.pitch,
+        pitch: midi,
+        detuneCents,
         volume: e.volume,
         velocity: e.velocity,
         when: e.when,
@@ -20132,10 +20769,12 @@ var createDtmStudio = async (options = {}) => {
       sfInst = resolveSoundFont(defaultPreset, role, "simple");
     }
     if (!sfInst) return;
+    const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
     sfInst.play({
       ctx: audioCtx,
       destination: getChannelStrip(e.trackId).input,
-      pitch: e.pitch,
+      pitch: midi,
+      detuneCents,
       volume: e.volume,
       velocity: e.velocity,
       when: e.when,
@@ -20158,10 +20797,12 @@ var createDtmStudio = async (options = {}) => {
     if (audioCtx.state === "suspended") {
       await audioCtx.resume();
     }
+    const { midi, detuneCents } = unitsToMidiDetune(options2.pitchUnits);
     sfInst.play({
       ctx: audioCtx,
       destination: masterGain,
-      pitch: options2.pitch,
+      pitch: midi,
+      detuneCents,
       volume: vol / 100,
       when: 0,
       duration: dur
@@ -20181,7 +20822,7 @@ var createDtmStudio = async (options = {}) => {
       // 伴奏トラック
       startStep: p.startStep,
       durationSteps: p.durationSteps,
-      pitch: p.pitch,
+      pitchUnits: p.pitchUnits,
       velocity: p.velocity
     }));
     const playerPreset = defaultPreset;
@@ -20189,10 +20830,12 @@ var createDtmStudio = async (options = {}) => {
     const playPlayerNote = (e) => {
       const sfInst = resolveSoundFont(playerPreset, "chord");
       if (!sfInst) return;
+      const { midi, detuneCents } = unitsToMidiDetune(e.pitchUnits);
       sfInst.play({
         ctx: audioCtx,
         destination: getChannelStrip("chord").input,
-        pitch: e.pitch,
+        pitch: midi,
+        detuneCents,
         volume: e.volume,
         velocity: e.velocity,
         when: e.when,
@@ -20330,8 +20973,12 @@ var createDtmStudio = async (options = {}) => {
   };
 };
 export {
+  A4_HZ,
+  A4_UNITS,
+  CENTS_PER_UNIT,
   DAW_CSS,
   DEFAULT_BPM,
+  DEFAULT_EDO,
   DEFAULT_GATE,
   DEFAULT_PAN,
   DEFAULT_PLAYBACK_VELOCITY,
@@ -20341,21 +20988,30 @@ export {
   DRUM_FONT,
   DRUM_KEYS,
   DRUM_PATTERNS,
+  EDO31_NAMES,
   GM_INSTRUMENT_NAMES,
   INSTRUMENT_PRESETS,
+  KEY_COUNT,
   KOE_BASE_URL,
   KOE_VOICEBANKS,
   KOE_VOICEBANK_LABELS,
   KOE_VOICEBANK_TERMS,
   LinkedList,
   MAX_VOCAL_VOLUME,
+  MICRO_STEP,
   MMLCore,
   MML_END_MARKER,
   MidiSearchClient,
-  PITCH_MAP2 as PITCH_MAP,
+  PITCH_ENCODING_VERSION,
+  PITCH_MAP,
+  PITCH_RANGE_END,
+  PITCH_RANGE_START,
   PREWARM_NOTES,
   TRACKS_ADVANCED,
   TRACKS_SIMPLE,
+  UNITS_PER_EDO31_DEGREE,
+  UNITS_PER_OCTAVE,
+  UNITS_PER_SEMITONE,
   VIBRATO_MIN_SEC,
   VOICE_IMAGES,
   VOICE_IMAGE_KEY,
@@ -20365,6 +21021,7 @@ export {
   buildChordPlacements,
   buildDrumPatternJson,
   buildNameToKeyMapping,
+  chromaticStep,
   collectPitchTokens,
   concatFloat32,
   createAudioContext,
@@ -20373,19 +21030,13 @@ export {
   createKoeVoice,
   createLyricsConductor,
   createPianoRoll,
+  createRenderer,
   createSequencer,
   createSingingVoices,
   createSynth,
   createVoiceRegistry,
   decodeMml,
   decomposeToMonophonic,
-  drawGrid,
-  drawHeader,
-  drawKeyboard,
-  drawNoteLyrics,
-  drawNotes,
-  drawSelectedNotes,
-  drawSelectionRect,
   encodeMml,
   encodeWavPCM16,
   exportMIDI,
@@ -20393,36 +21044,34 @@ export {
   extractMidiDrumPattern,
   extractMidiPlacements,
   extractMidiPlacementsByTrack,
+  fifthToStep,
+  fifthToUnits,
   formatMmlMeta,
   freqFromPitch,
   generateRandomPattern,
-  getDrawOffset,
   getDrumPatternKeys,
-  getGridCanvas,
-  getGridContext,
-  getGridPosition,
-  getHeaderCanvas,
   getMidiBPM,
-  getRenderConfig,
-  getXY,
   icon,
-  init,
   injectStyles,
   isChordHeavyTrack,
+  isNaturalLetter,
   isPlausibleMidiTranscription,
   isValidHttpUrl,
+  keyCountFor,
   koeUrl,
+  midiToUnits,
   mountChordPlayer,
   mountDAW,
   mountMmlPlayer,
+  naturalStep,
   normalizeDrumPatterns,
   normalizeLyrics,
-  onClick,
   panToStereo,
   parseCustomVocals,
   parseLyrics,
   parseMML,
   parseMmlMeta,
+  pitchV1ToUnits,
   playChords,
   playMML,
   playNote,
@@ -20430,13 +21079,18 @@ export {
   playSingingMML,
   resolveDrumPattern,
   resolveLoopPoint,
-  setBackgroundActive,
-  setDrawOffset,
   shiftNotes,
   showLoadingOverlay,
+  spellingToUnits,
   stripCustomVocals,
   stripLyrics,
   stripMmlMeta,
   transposeNotes,
+  unitsPerRow,
+  unitsPerStep,
+  unitsToHz,
+  unitsToMidi,
+  unitsToMidiDetune,
+  unitsToPitchV1,
   vocalVolumeToGain
 };