FIX: Đã đổi tên (v202608060900)

app/static/js/app.jsx

@@ -7036,6 +7036,81 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
     if (undoStackRef.current.length > 50) undoStackRef.current.shift();
   }, []);
 
+  // ── Humanize: ngẫu nhiên hóa velocity + timing theo cường độ ──
+  const [humanizeStrength, setHumanizeStrength] = React.useState(0.10); // 0.05 nhẹ / 0.10 vừa / 0.18 mạnh
+  const applyHumanize = React.useCallback(() => {
+    if (!notes || !notes.length) { showToast('Không có nốt nào để humanize.', 'warning'); return; }
+    const velAmt = humanizeStrength;
+    const timeAmt = humanizeStrength * 0.15; // ±0.015 beat @ vừa (~12ms @120bpm)
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => ({
+      ...n,
+      velocity: Math.max(0.05, Math.min(1.0, (n.velocity || 0.8) + (Math.random() * 2 - 1) * velAmt)),
+      start_beat: Math.max(0, (n.start_beat || 0) + (Math.random() * 2 - 1) * timeAmt)
+    })));
+    showToast('Đã humanize ' + notes.length + ' nốt (velocity ±' + Math.round(velAmt * 100) + '%, timing ±' + Math.round(timeAmt * 1000) + 'ms).', 'success');
+  }, [notes, pushToUndo, setNotes, showToast, humanizeStrength]);
+
+  // ── Transpose semitone: dịch pitch tất cả nốt (clamp 0-127) ──
+  const applyTranspose = React.useCallback((semi) => {
+    const s = parseInt(semi);
+    if (isNaN(s) || s === 0) { showToast('Nhập số semitone khác 0.', 'warning'); return; }
+    if (!notes || !notes.length) { showToast('Không có nốt nào để transpose.', 'warning'); return; }
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => ({
+      ...n,
+      pitch: Math.max(0, Math.min(127, (n.pitch || 60) + s))
+    })));
+    showToast('Đã transpose ' + notes.length + ' nốt ' + (s > 0 ? '+' : '') + s + ' semitone.', 'success');
+  }, [notes, pushToUndo, setNotes, showToast]);
+
+  // ── Transpose theo SCALE (chuyển giọng): detect key hiện tại → map degree ──
+  const SCALE_PATTERNS = { major: [0, 2, 4, 5, 7, 9, 11], minor: [0, 2, 3, 5, 7, 8, 10] };
+  const SCALE_ROOTS = { C: 0, 'C#': 1, D: 2, 'D#': 3, E: 4, F: 5, 'F#': 6, G: 7, 'G#': 8, A: 9, 'A#': 10, B: 11 };
+  const detectKey = React.useCallback((noteList) => {
+    const roots = Object.keys(SCALE_ROOTS);
+    let best = null, bestScore = -1;
+    for (let ri = 0; ri < roots.length; ri++) {
+      for (const st of ['major', 'minor']) {
+        const tones = new Set(SCALE_PATTERNS[st].map(s => (SCALE_ROOTS[roots[ri]] + s) % 12));
+        let score = 0;
+        (noteList || []).forEach(n => { const pc = (((n.pitch || 60) % 12) + 12) % 12; if (tones.has(pc)) score++; });
+        if (score > bestScore) { bestScore = score; best = { root: roots[ri], scale: st }; }
+      }
+    }
+    return best || { root: 'C', scale: 'major' };
+  }, []);
+  const [keyTargetRoot, setKeyTargetRoot] = React.useState('C');
+  const [keyTargetScale, setKeyTargetScale] = React.useState('major');
+  const applyTransposeToKey = React.useCallback(() => {
+    if (!notes || !notes.length) { showToast('Không có nốt nào để chuyển giọng.', 'warning'); return; }
+    const srcKey = detectKey(notes);
+    const dstKey = { root: keyTargetRoot, scale: keyTargetScale };
+    if (srcKey.root === dstKey.root && srcKey.scale === dstKey.scale) {
+      showToast('Đã ở giọng ' + dstKey.root + ' ' + dstKey.scale + ' rồi.', 'info');
+      return;
+    }
+    const srcTones = SCALE_PATTERNS[srcKey.scale].map(s => (SCALE_ROOTS[srcKey.root] + s) % 12);
+    const dstTones = SCALE_PATTERNS[dstKey.scale].map(s => (SCALE_ROOTS[dstKey.root] + s) % 12);
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => {
+      const p = n.pitch || 60;
+      const pc = ((p % 12) + 12) % 12;
+      // Degree gần nhất trong scale nguồn (7 bậc)
+      let bestIdx = 0, bestDist = 99;
+      for (let i = 0; i < 7; i++) {
+        let d = Math.abs(pc - srcTones[i]); if (d > 6) d = 12 - d;
+        if (d < bestDist) { bestDist = d; bestIdx = i; }
+      }
+      let shift = dstTones[bestIdx] - srcTones[bestIdx];
+      if (shift > 6) shift -= 12; else if (shift < -6) shift += 12;
+      return { ...n, pitch: Math.max(0, Math.min(127, p + shift)) };
+    }));
+    showToast('Chuyển giọng ' + srcKey.root + ' ' + srcKey.scale + ' → ' + dstKey.root + ' ' + dstKey.scale + ' (' + notes.length + ' nốt).', 'success');
+  }, [notes, pushToUndo, setNotes, showToast, detectKey, keyTargetRoot, keyTargetScale]);
+
+  const [transposeSemis, setTransposeSemis] = React.useState(0);
+
   const handleUndo = React.useCallback(() => {
     const prev = undoStackRef.current.pop();
     if (!prev) return;
@@ -8387,9 +8462,9 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
   return React.createElement("div", {
     className: "flex-1 flex overflow-hidden min-h-0 bg-[#1e1e1e] flex-col h-full"
   }, 
-    /* 1. TOOLBAR HEADER */
+    /* 1. TOOLBAR HEADER — 2 hàng (wrap tự nhiên; spacer 100% ép hàng mới) */
     React.createElement("div", {
-      className: "h-10 bg-[#282828] border-b border-zinc-900 flex items-center justify-between px-4 shrink-0 text-slate-200"
+      className: "bg-[#282828] border-b border-zinc-900 flex flex-wrap items-center gap-x-2 gap-y-1 px-4 py-1.5 shrink-0 text-slate-200"
     }, React.createElement("div", {
       className: "flex items-center gap-4"
     }, React.createElement("select", {
@@ -8475,12 +8550,50 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
         return showGhostNotes ? base + 'bg-purple-900/60 text-purple-300 border border-purple-700' : base + 'text-zinc-500 hover:text-zinc-300';
       }(),
       title: "Toggle ghost notes visibility"
-    }, "\uD83D\uDC7B Ghost"), React.createElement("div", {
+    }, "\\uD83D\\uDC7B MIDI ghost notes"), React.createElement("div", {
+      style: { flexBasis: "100%", height: 0 }
+    }), React.createElement("button", {
+      onClick: applyHumanize,
+      className: "px-2 py-1 rounded text-xs bg-amber-900/40 text-amber-300 border border-amber-700/60 hover:bg-amber-800/50 transition",
+      title: "Humanize: randomize velocity + timing"
+    }, "\uD83C\uDF9A Humanize"), React.createElement("select", {
+      key: "humstr", value: humanizeStrength,
+      onChange: function(e) { setHumanizeStrength(parseFloat(e.target.value)); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Cường độ humanize"
+    }, React.createElement("option", { key: "l", value: 0.05 }, "Nh\u1EB9"), React.createElement("option", { key: "m", value: 0.10 }, "V\u1EEBa"), React.createElement("option", { key: "s", value: 0.18 }, "M\u1EA1nh")), React.createElement("div", {
+      key: "transpose", className: "flex items-center gap-1"
+    }, React.createElement("input", {
+      key: "in", type: "number", step: 1, min: -24, max: 24, value: transposeSemis,
+      onChange: function(e) { setTransposeSemis(e.target.value); },
+      className: "w-12 px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-center text-zinc-200",
+      title: "Semitone offset (vd 2 = cao hơn 1 tone)"
+    }), React.createElement("button", {
+      key: "btn", onClick: function() { applyTranspose(transposeSemis); },
+      className: "px-2 py-1 rounded text-xs bg-sky-900/40 text-sky-300 border border-sky-700/60 hover:bg-sky-800/50 transition",
+      title: "Transpose all notes by the semitone offset"
+    }, "Transpose")), React.createElement("div", {
+      key: "keyshift", className: "flex items-center gap-1"
+    }, React.createElement("select", {
+      key: "root", value: keyTargetRoot,
+      onChange: function(e) { setKeyTargetRoot(e.target.value); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Giọng đích (root)"
+    }, ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"].map(function(r) { return React.createElement("option", { key: r, value: r }, r); })), React.createElement("select", {
+      key: "scale", value: keyTargetScale,
+      onChange: function(e) { setKeyTargetScale(e.target.value); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Thể scale đích"
+    }, React.createElement("option", { key: "maj", value: "major" }, "major"), React.createElement("option", { key: "min", value: "minor" }, "minor")), React.createElement("button", {
+      key: "btn", onClick: applyTransposeToKey,
+      className: "px-2 py-1 rounded text-xs bg-violet-900/40 text-violet-300 border border-violet-700/60 hover:bg-violet-800/50 transition",
+      title: "Chuyển giọng: map degree hiện tại sang giọng đích (auto-detect key nguồn)"
+    }, "\uD83C\uDFB5 Chuy\u1EC3n gi\u1ECDng")), React.createElement("div", {
       className: "flex items-center gap-1"
     }, React.createElement("button", {
       onClick: () => onSaveNotes(st.id, st.trackId, st.target_id, notes),
       className: "px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs flex items-center gap-1 transition font-semibold"
-    }, React.createElement("i", { "data-lucide": "save", className: "w-3 h-3" }), "Lưu"), React.createElement("button", {
+    }, React.createElement("i", { "data-lucide": "save", className: "w-3 h-3" }), "L\u01B0u"), React.createElement("button", {
       onClick: () => {
         const ppq = 480;
         const bpmNum = parseInt(bpm) || 120;