feat(studio): skip beat-snap on the music track, highlight move-snap target

The music track defines the beats, so moving or trimming it no longer
snaps to its own beats (isMusicTrack guard on both the move and resize
snap paths).

Moving another clip snapped only on drop with no cue. snapMoveStartToBeat
now also returns the beat it will snap to; BeatBackgroundLines draws that
beat's line as a bright neon-green glow while the clip's edge is within
the snap region, so the target is visible before drop.

Also drops .commitmsg.tmp, accidentally committed via git add -A.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>

Author: vanceingalls

.commitmsg.tmp

@@ -23,22 +23,32 @@ export const BeatBackgroundLines = memo(function BeatBackgroundLines({
   beatTimes,
   beatStrengths,
   pps,
+  highlightTime,
 }: {
   beatTimes: number[] | undefined;
   beatStrengths: number[] | undefined;
   pps: number;
+  /** Beat time a dragged clip will snap to — drawn as a bright neon line. */
+  highlightTime?: number | null;
 }) {
   if (!beatTimes || beatsTooDense(beatTimes, pps)) return null;
   return (
     <div className="absolute inset-0 pointer-events-none" style={{ zIndex: 0 }}>
       {beatTimes.map((t, i) => {
+        const isHighlight = highlightTime != null && Math.abs(t - highlightTime) < 1e-3;
         const strength = Math.pow(Math.min(1, beatStrengths?.[i] ?? 0.5), 2.2);
-        const opacity = 0.06 + strength * 0.16;
+        const opacity = isHighlight ? 1 : 0.06 + strength * 0.16;
         return (
           <div
             key={`${t}-${i}`}
             className="absolute top-0 bottom-0"
-            style={{ left: t * pps, width: 1, background: `rgba(34,197,94,${opacity.toFixed(3)})` }}
+            style={{
+              left: t * pps,
+              width: isHighlight ? 2 : 1,
+              background: `rgba(34,197,94,${opacity.toFixed(3)})`,
+              boxShadow: isHighlight ? "0 0 6px rgba(34,197,94,0.9)" : undefined,
+              zIndex: isHighlight ? 1 : undefined,
+            }}
           />
         );
       })}

packages/studio/src/player/components/BeatStrip.tsx

@@ -242,11 +242,13 @@ export const TimelineCanvas = memo(function TimelineCanvas({
               </div>
             </div>
             <div style={{ width: trackContentWidth }} className="relative">
-              {/* Faint beat lines in every track's background (behind the clips). */}
+              {/* Faint beat lines in every track's background (behind the clips);
+                  the active move-snap target is highlighted. */}
               <BeatBackgroundLines
                 beatTimes={beatAnalysis?.beatTimes}
                 beatStrengths={beatAnalysis?.beatStrengths}
                 pps={pps}
+                highlightTime={draggedClip?.started ? draggedClip.snapBeatTime : null}
               />
               {/* Beat dots only on the active track (the one holding the selection). */}
               {els.some((e) => (e.key ?? e.id) === selectedElementId) && (
@@ -370,6 +372,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         pointerOffsetY: e.clientY - rect.top,
                         previewStart: el.start,
                         previewTrack: el.track,
+                        snapBeatTime: null,
                         started: false,
                       });
                       syncClipDragAutoScroll(e.clientX, e.clientY);

packages/studio/src/player/components/TimelineCanvas.tsx

@@ -30,35 +30,42 @@ function snapToNearestBeat(time: number, beatTimes: number[], thresholdSecs: num
 
 /**
  * Snap a moved clip so whichever edge (start or end) is nearest a beat lands on
- * it, keeping the duration fixed. Returns the (clamped) start. No snap when
- * there are no beats or neither edge is within threshold.
+ * it, keeping the duration fixed. Returns the (clamped) start plus the beat time
+ * it snapped to (for the grid-line highlight), or `beat: null` when no edge is
+ * within threshold.
  */
 function snapMoveStartToBeat(
   start: number,
   duration: number,
   beatTimes: number[],
   pixelsPerSecond: number,
   timelineDuration: number,
-): number {
-  if (beatTimes.length === 0) return start;
+): { start: number; beat: number | null } {
+  if (beatTimes.length === 0) return { start, beat: null };
   const snapSecs = BEAT_SNAP_PX / Math.max(pixelsPerSecond, 1);
   const snappedStart = snapToNearestBeat(start, beatTimes, snapSecs);
   const snappedEnd = snapToNearestBeat(start + duration, beatTimes, snapSecs);
   const startMoved = snappedStart !== start;
   const endMoved = snappedEnd !== start + duration;
 
   let candidate = start;
+  let beat: number | null = null;
   if (
     startMoved &&
     (!endMoved || Math.abs(snappedStart - start) <= Math.abs(snappedEnd - (start + duration)))
   ) {
     candidate = snappedStart;
+    beat = snappedStart;
   } else if (endMoved) {
     candidate = snappedEnd - duration;
+    beat = snappedEnd;
   }
 
   const maxStart = Math.max(0, timelineDuration - duration);
-  return Math.max(0, Math.min(maxStart, Math.round(candidate * 1000) / 1000));
+  const clamped = Math.max(0, Math.min(maxStart, Math.round(candidate * 1000) / 1000));
+  // If clamping pulled the clip off the snap target, drop the highlight.
+  if (beat != null && Math.abs(clamped - candidate) > 1e-6) beat = null;
+  return { start: clamped, beat };
 }
 
 /* ── Shared state types ─────────────────────────────────────────── */
@@ -74,6 +81,8 @@ export interface DraggedClipState {
   pointerOffsetY: number;
   previewStart: number;
   previewTrack: number;
+  /** Beat time the clip will snap to on drop, for the grid-line highlight. */
+  snapBeatTime: number | null;
   started: boolean;
 }
 
@@ -199,19 +208,24 @@ export function useTimelineClipDrag({
         clientX,
         clientY,
       );
+      // The music track defines the beats, so it must not snap to itself.
+      const snap = isMusicTrack(drag.element)
+        ? { start: nextMove.start, beat: null }
+        : snapMoveStartToBeat(
+            nextMove.start,
+            drag.element.duration,
+            beatTimesRef.current,
+            ppsRef.current,
+            durationRef.current,
+          );
       return {
         ...drag,
         started: true,
         pointerClientX: clientX,
         pointerClientY: clientY,
-        previewStart: snapMoveStartToBeat(
-          nextMove.start,
-          drag.element.duration,
-          beatTimesRef.current,
-          ppsRef.current,
-          durationRef.current,
-        ),
+        previewStart: snap.start,
         previewTrack: nextMove.track,
+        snapBeatTime: snap.beat,
       };
     },
     [scrollRef, ppsRef, durationRef, trackOrderRef],
@@ -330,8 +344,9 @@ export function useTimelineClipDrag({
         // Snap edge to beat grid when beat analysis is available. The snap must
         // stay inside the same limits resolveTimelineResize enforces, or it would
         // push the edge past the available source media / composition end.
+        // The music track defines the beats, so it must not snap to itself.
         const beatTimes = beatTimesRef.current;
-        if (beatTimes.length > 0) {
+        if (beatTimes.length > 0 && !isMusicTrack(resize.element)) {
           const snapSecs = BEAT_SNAP_PX / Math.max(ppsRef.current, 1);
           if (resize.edge === "end") {
             const edgeTime = nextResize.start + nextResize.duration;