fix: ruler click moves playhead, drag moves range

app/static/js/app.jsx

@@ -5852,7 +5852,6 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
     }), React.createElement("div", {
       ref: rulerScrollRef,
       className: "flex-1 overflow-hidden",
-      style: { cursor: 'default' },
       onMouseDown: (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left + e.currentTarget.scrollLeft;
@@ -5885,28 +5884,6 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
             }, 40);
           }
         }
-        if (clickInRange) {
-          const rangeWidth = loopEndBeat - loopStartBeat;
-          const offset = clickBeat - loopStartBeat;
-          rulerDragRef.current = { mode: 'move', startX: e.clientX, offset, rangeWidth, startBeat: loopStartBeat };
-          const onMove = (ev) => {
-            const r = rulerScrollRef.current;
-            if (!r || !rulerDragRef.current || rulerDragRef.current.mode !== 'move') return;
-            const rRect = r.getBoundingClientRect();
-            const bx = ev.clientX - rRect.left + r.scrollLeft;
-            const rawBeat = Math.max(0, bx / pixelsPerBeat);
-            const centerBeat = getSnapBeat(rawBeat - rulerDragRef.current.offset, snapVal);
-            const halfRange = rulerDragRef.current.rangeWidth / 2;
-            const newStart = Math.max(0, centerBeat - halfRange);
-            setLoopStartBeat(newStart);
-            setLoopEndBeat(newStart + rulerDragRef.current.rangeWidth);
-            setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, selectionStart: newStart * beatSec, selectionEnd: (newStart + rulerDragRef.current.rangeWidth) * beatSec } : s));
-          };
-          const onUp = () => { rulerDragRef.current = null; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
-          document.addEventListener('mousemove', onMove);
-          document.addEventListener('mouseup', onUp);
-          return;
-        }
         const snappedStartBeat = getSnapBeat(clickBeat, snapVal);
         rulerDragRef.current = { startX: e.clientX, startBeat: snappedStartBeat, scrollLeft: e.currentTarget.scrollLeft };
         const onMove = (ev) => {
@@ -5917,6 +5894,16 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
           const rawBeat = Math.max(0, bx / pixelsPerBeat);
           const beat = getSnapBeat(rawBeat, snapVal);
           if (Math.abs(ev.clientX - rulerDragRef.current.startX) > 5) {
+            if (clickInRange) {
+              const rangeWidth = loopEndBeat - loopStartBeat;
+              const offset = rulerDragRef.current.startBeat - loopStartBeat;
+              const centerBeat = beat - offset;
+              const halfRange = rangeWidth / 2;
+              const newStart = Math.max(0, centerBeat - halfRange);
+              setLoopStartBeat(newStart);
+              setLoopEndBeat(newStart + rangeWidth);
+              setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, selectionStart: newStart * beatSec, selectionEnd: (newStart + rangeWidth) * beatSec } : s));
+            } else {
               const sBeat = Math.max(0, Math.min(rulerDragRef.current.startBeat, beat));
               const eBeat = Math.max(sBeat + 1, Math.max(rulerDragRef.current.startBeat, beat));
               setLoopStartBeat(sBeat);
@@ -5927,6 +5914,7 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
                 selectionEnd: eBeat * beatSec
               } : s));
             }
+          }
         };
         const onUp = () => { rulerDragRef.current = null; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
         document.addEventListener('mousemove', onMove);