feat: add DragOverlay to SequencerPage for improved drag-and-drop feedback

src/components/sequencer/SoundLibrary.tsx

@@ -31,7 +31,6 @@ function DraggableSound({ sound }: DraggableSoundProps) {
     attributes,
     listeners,
     setNodeRef,
-    transform,
     isDragging,
   } = useDraggable({
     id: `sound-${sound.id}`,
@@ -41,9 +40,8 @@ function DraggableSound({ sound }: DraggableSoundProps) {
     },
   })
 
-  const style = transform ? {
+  // Don't apply transform to prevent layout shift - DragOverlay handles the visual feedback
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+  const style = undefined
-  } : undefined
 
   const formatDuration = (ms: number): string => {
     const seconds = Math.floor(ms / 1000)
@@ -66,7 +64,7 @@ function DraggableSound({ sound }: DraggableSoundProps) {
       className={`
         group cursor-grab active:cursor-grabbing
         p-3 border rounded-lg bg-card hover:bg-accent/50 transition-colors
-        ${isDragging ? 'opacity-50 shadow-lg' : ''}
+        ${isDragging ? 'opacity-30' : ''}
       `}
       title={`Drag to add "${sound.name || sound.filename}" to a track`}
     >

src/pages/SequencerPage.tsx

@@ -2,7 +2,7 @@ import { TrackControls } from '@/components/sequencer/TrackControls'
 import { TimelineControls } from '@/components/sequencer/TimelineControls'
 import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
 import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
-import { DndContext, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
+import { DndContext, DragOverlay, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
 import { useState, useRef, useCallback, useEffect } from 'react'
 
 export interface Track {
@@ -350,6 +350,30 @@ export function SequencerPage() {
               </div>
             </div>
           </div>
+          <DragOverlay>
+            {draggedItem?.type === 'sound' ? (
+              <div className="p-3 border rounded-lg bg-card shadow-lg opacity-90">
+                <div className="flex items-start gap-2">
+                  <div className="flex-shrink-0 mt-0.5">
+                    {draggedItem.sound.type === 'SDB' && <span className="text-xs font-bold text-blue-500">SDB</span>}
+                    {draggedItem.sound.type === 'TTS' && <span className="text-xs font-bold text-green-500">TTS</span>}
+                    {draggedItem.sound.type === 'EXT' && <span className="text-xs font-bold text-purple-500">EXT</span>}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm truncate">
+                      {draggedItem.sound.name || draggedItem.sound.filename}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : draggedItem?.type === 'placed-sound' ? (
+              <div className="p-2 border rounded bg-primary/20 border-primary/40 shadow-lg opacity-90">
+                <div className="font-medium text-sm text-primary truncate">
+                  {draggedItem.name}
+                </div>
+              </div>
+            ) : null}
+          </DragOverlay>
         </DndContext>
       </div>
     </div>