feat(studio): shrink + lower keyframe diamonds under the beat strip

When a clip's track shows the beat-dot strip (the top band), its keyframe
diamonds and connecting lines render at 45% size and centered in the
region below the band, so they don't collide with the dots. Full size and
vertically centered otherwise.

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

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

Author: vanceingalls

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

@@ -3,7 +3,7 @@ import { moveBeatCompositionTime, deleteBeatAtCompositionTime } from "../../util
 import { usePlayerStore } from "../store/playerStore";
 import { CLIP_Y } from "./timelineLayout";
 
-const BEAT_BAND_H = 14; // dark band height at top of track
+export const BEAT_BAND_H = 14; // dark band height at top of track
 const BEAT_HIT_W = 12; // grab width per beat (px)
 
 /** Hide both layers when beats are packed tighter than this (px) — too dense to read. */

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

@@ -217,6 +217,14 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
         const isPendingTrack =
           draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
+        // The beat-dot strip occupies the top of this track's lane (active track,
+        // or the music track when nothing is selected). When shown, keyframe
+        // diamonds shrink + drop to the bottom half so they don't collide with it.
+        const beatStripOnTrack =
+          (beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
+          (selectedElementId
+            ? els.some((e) => (e.key ?? e.id) === selectedElementId)
+            : els.some(isMusicTrack));
         return (
           <div
             key={trackNum}
@@ -260,9 +268,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
               />
               {/* Beat dots on the active track (the one holding the selection),
                   falling back to the music track when nothing is selected. */}
-              {(selectedElementId
-                ? els.some((e) => (e.key ?? e.id) === selectedElementId)
-                : els.some(isMusicTrack)) && (
+              {beatStripOnTrack && (
                 <BeatStrip
                   beatTimes={beatAnalysis?.beatTimes}
                   beatStrengths={beatAnalysis?.beatStrengths}
@@ -428,6 +434,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         keyframesData={keyframeCache.get(elementKey)!}
                         clipWidthPx={Math.max(previewElement.duration * pps, 4)}
                         clipHeightPx={TRACK_H - 2 * CLIP_Y}
+                        beatsActive={beatStripOnTrack}
                         accentColor={clipStyle.accent}
                         isSelected={isSelected}
                         currentPercentage={

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

@@ -1,4 +1,5 @@
 import { memo, useEffect, useRef, useState } from "react";
+import { BEAT_BAND_H } from "./BeatStrip";
 
 interface KeyframeEntry {
   percentage: number;
@@ -17,6 +18,9 @@ interface TimelineClipDiamondsProps {
   keyframesData: KeyframeCacheEntry;
   clipWidthPx: number;
   clipHeightPx: number;
+  /** Beat-dot strip is shown on this track → shrink diamonds + drop them into
+   *  the bottom half so they clear the strip at the top. */
+  beatsActive?: boolean;
   accentColor: string;
   isSelected: boolean;
   currentPercentage: number;
@@ -41,6 +45,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   keyframesData,
   clipWidthPx,
   clipHeightPx,
+  beatsActive,
   accentColor,
   isSelected,
   currentPercentage,
@@ -98,8 +103,11 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
 
   if (clipWidthPx < 20) return null;
 
-  const diamondSize = Math.round(clipHeightPx * DIAMOND_RATIO);
+  // When the beat strip occupies the top band, shrink the diamonds and center
+  // them in the remaining bottom region so they don't collide with it.
+  const diamondSize = Math.round(clipHeightPx * (beatsActive ? 0.45 : DIAMOND_RATIO));
   const half = diamondSize / 2;
+  const centerY = beatsActive ? BEAT_BAND_H + (clipHeightPx - BEAT_BAND_H) / 2 : clipHeightPx / 2;
   const sorted = keyframesData.keyframes.slice().sort((a, b) => a.percentage - b.percentage);
   const baseColor = isSelected ? accentColor : "#a3a3a3";
   const baseOpacity = isSelected ? 0.4 : 0.25;
@@ -185,7 +193,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             className="absolute"
             style={{
               left: x1,
-              top: "50%",
+              top: centerY,
               width: x2 - x1,
               height: 2,
               transform: "translateY(-1px)",
@@ -211,7 +219,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             className="absolute"
             style={{
               left: leftPx,
-              top: "50%",
+              top: centerY,
               transform: "translateY(-50%)",
               width: diamondSize,
               height: diamondSize,