fix(tcp): prevent panel scroll when wheeling volume ruler

React onWheel is passive so e.preventDefault() was a no-op, letting the
TCP panel scroll and the ruler slip away from the cursor (no snap).
Add native non-passive capture listener that preventDefault()s wheel
events starting on [data-sf-wheel] ruler containers.

app/static/js/app.jsx

@@ -30933,8 +30933,8 @@ STRICT CONSTRAINTS:
         onClick: e => e.stopPropagation()
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center gap-1",
+        "data-sf-wheel": "1",
         onWheel: e => {
-          e.preventDefault();
           const steps = wheelSteps('vol:' + track.id, e.deltaY, e.deltaMode, 100);
           if (!steps) return;
           const nv = Math.max(-50, Math.min(7, (track.volumeDb ?? 0) + steps * 0.5));
@@ -30958,8 +30958,8 @@ STRICT CONSTRAINTS:
         className: "w-12 text-right font-mono text-zinc-300 text-xs"
       }, track.volumeDb ?? 0, "dB")), /*#__PURE__*/React.createElement("div", {
         className: "flex items-center gap-1",
+        "data-sf-wheel": "1",
         onWheel: e => {
-          e.preventDefault();
           const steps = wheelSteps('pan:' + track.id, e.deltaY, e.deltaMode, 100);
           if (!steps) return;
           const np = Math.max(-100, Math.min(100, (track.pan ?? 0) + steps * 5));
@@ -31489,8 +31489,8 @@ STRICT CONSTRAINTS:
         className: "flex flex-col gap-2.5 text-[14px] mb-3"
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex items-center gap-1",
+        "data-sf-wheel": "1",
         onWheel: e => {
-          e.preventDefault();
           const steps = wheelSteps('vol:' + vTrack.id, e.deltaY, e.deltaMode, 100);
           if (!steps) return;
           const nv = Math.max(-50, Math.min(7, (vTrack.volumeDb ?? 0) + steps * 0.5));
@@ -31516,8 +31516,8 @@ STRICT CONSTRAINTS:
         id: `tcp-vol-label-${st.id}`
       }, vTrack.volumeDb ?? 0, "dB")), /*#__PURE__*/React.createElement("div", {
         className: "flex items-center gap-1",
+        "data-sf-wheel": "1",
         onWheel: e => {
-          e.preventDefault();
           const steps = wheelSteps('pan:' + vTrack.id, e.deltaY, e.deltaMode, 100);
           if (!steps) return;
           const np = Math.max(-100, Math.min(100, (vTrack.pan ?? 0) + steps * 5));
@@ -32761,6 +32761,13 @@ STRICT CONSTRAINTS:
     (!filteredInstruments.soundfonts.length && !filteredInstruments.vst.length) && /*#__PURE__*/React.createElement("p", { className: "text-xs text-zinc-500 py-4 text-center" }, "Kh\u00f4ng t\u00ecm th\u1ea5y nh\u1ea1c c\u1ee5 n\u00e0o")
   )));
 };
+// React onWheel is passive -> e.preventDefault() can't stop panel scroll, so the
+// ruler slips away from the cursor mid-scroll. Native capture listener (non-passive)
+// blocks scrolling whenever the wheel starts over a [data-sf-wheel] container.
+document.addEventListener('wheel', (e) => {
+  const t = e.target;
+  if (t && t.closest && t.closest('[data-sf-wheel]')) e.preventDefault();
+}, { passive: false, capture: true });
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(/*#__PURE__*/React.createElement(App, null));
 setTimeout(() => lucide.createIcons(), 300);