Merge branch 'main' into implement-workflows

1 files changed, 427 insertions, 70 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 1d2df66d..9dec5bbc 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -27,21 +27,29 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";

 import { processMediaFiles } from "@/lib/media-processing";

 import { toast } from "sonner";

-import { useState, useRef, useEffect } from "react";

+import { useState, useRef, useEffect, useCallback } from "react";

+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

+} from "../ui/select";

 

 export function Timeline() {

   // Timeline shows all tracks (video, audio, effects) and their clips.

   // You can drag media here to add it to your project.

   // Clips can be trimmed, deleted, and moved.

-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration } =

+  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } =

     useTimelineStore();

   const { mediaItems, addMediaItem } = useMediaStore();

-  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore();

+  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();

   const [isDragOver, setIsDragOver] = useState(false);

   const [isProcessing, setIsProcessing] = useState(false);

   const [zoomLevel, setZoomLevel] = useState(1);

   const dragCounterRef = useRef(0);

   const timelineRef = useRef<HTMLDivElement>(null);

+  const [isInTimeline, setIsInTimeline] = useState(false);

 

   // Unified context menu state

   const [contextMenu, setContextMenu] = useState<{

@@ -52,6 +60,20 @@ export function Timeline() {
     y: number;

   } | null>(null);

 

+  // Marquee selection state

+  const [marquee, setMarquee] = useState<{

+    startX: number;

+    startY: number;

+    endX: number;

+    endY: number;

+    active: boolean;

+    additive: boolean;

+  } | null>(null);

+

+  // Playhead scrubbing state

+  const [isScrubbing, setIsScrubbing] = useState(false);

+  const [scrubTime, setScrubTime] = useState<number | null>(null);

+

   // Update timeline duration when tracks change

   useEffect(() => {

     const totalDuration = getTotalDuration();

@@ -67,6 +89,133 @@ export function Timeline() {
     }

   }, [contextMenu]);

 

+  // Keyboard event for deleting selected clips

+  useEffect(() => {

+    const handleKeyDown = (e: KeyboardEvent) => {

+      if ((e.key === "Delete" || e.key === "Backspace") && selectedClips.length > 0) {

+        selectedClips.forEach(({ trackId, clipId }) => {

+          removeClipFromTrack(trackId, clipId);

+        });

+        clearSelectedClips();

+      }

+    };

+    window.addEventListener("keydown", handleKeyDown);

+    return () => window.removeEventListener("keydown", handleKeyDown);

+  }, [selectedClips, removeClipFromTrack, clearSelectedClips]);

+

+  // Keyboard event for undo (Cmd+Z)

+  useEffect(() => {

+    const handleKeyDown = (e: KeyboardEvent) => {

+      if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {

+        e.preventDefault();

+        undo();

+      }

+    };

+    window.addEventListener("keydown", handleKeyDown);

+    return () => window.removeEventListener("keydown", handleKeyDown);

+  }, [undo]);

+

+  // Keyboard event for redo (Cmd+Shift+Z or Cmd+Y)

+  useEffect(() => {

+    const handleKeyDown = (e: KeyboardEvent) => {

+      if ((e.metaKey || e.ctrlKey) && e.key === "z" && e.shiftKey) {

+        e.preventDefault();

+        redo();

+      } else if ((e.metaKey || e.ctrlKey) && e.key === "y") {

+        e.preventDefault();

+        redo();

+      }

+    };

+    window.addEventListener("keydown", handleKeyDown);

+    return () => window.removeEventListener("keydown", handleKeyDown);

+  }, [redo]);

+

+  // Mouse down on timeline background to start marquee

+  const handleTimelineMouseDown = (e: React.MouseEvent) => {

+    if (e.target === e.currentTarget && e.button === 0) {

+      setMarquee({

+        startX: e.clientX,

+        startY: e.clientY,

+        endX: e.clientX,

+        endY: e.clientY,

+        active: true,

+        additive: e.metaKey || e.ctrlKey || e.shiftKey,

+      });

+    }

+  };

+

+  // Mouse move to update marquee

+  useEffect(() => {

+    if (!marquee || !marquee.active) return;

+    const handleMouseMove = (e: MouseEvent) => {

+      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY });

+    };

+    const handleMouseUp = (e: MouseEvent) => {

+      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false });

+    };

+    window.addEventListener("mousemove", handleMouseMove);

+    window.addEventListener("mouseup", handleMouseUp);

+    return () => {

+      window.removeEventListener("mousemove", handleMouseMove);

+      window.removeEventListener("mouseup", handleMouseUp);

+    };

+  }, [marquee]);

+

+  // On marquee end, select clips in box

+  useEffect(() => {

+    if (!marquee || marquee.active) return;

+    const timeline = timelineRef.current;

+    if (!timeline) return;

+    const rect = timeline.getBoundingClientRect();

+    const x1 = Math.min(marquee.startX, marquee.endX) - rect.left;

+    const x2 = Math.max(marquee.startX, marquee.endX) - rect.left;

+    const y1 = Math.min(marquee.startY, marquee.endY) - rect.top;

+    const y2 = Math.max(marquee.startY, marquee.endY) - rect.top;

+    // Validation: skip if too small

+    if (Math.abs(x2 - x1) < 5 || Math.abs(y2 - y1) < 5) {

+      setMarquee(null);

+      return;

+    }

+    // Clamp to timeline bounds

+    const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));

+    const bx1 = clamp(x1, 0, rect.width);

+    const bx2 = clamp(x2, 0, rect.width);

+    const by1 = clamp(y1, 0, rect.height);

+    const by2 = clamp(y2, 0, rect.height);

+    let newSelection: { trackId: string; clipId: string }[] = [];

+    tracks.forEach((track, trackIdx) => {

+      track.clips.forEach((clip) => {

+        const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;

+        const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);

+        const clipLeft = clip.startTime * 50 * zoomLevel;

+        const clipTop = trackIdx * 60;

+        const clipBottom = clipTop + 60;

+        const clipRight = clipLeft + clipWidth;

+        if (

+          bx1 < clipRight &&

+          bx2 > clipLeft &&

+          by1 < clipBottom &&

+          by2 > clipTop

+        ) {

+          newSelection.push({ trackId: track.id, clipId: clip.id });

+        }

+      });

+    });

+    if (newSelection.length > 0) {

+      if (marquee.additive) {

+        const selectedSet = new Set(selectedClips.map((c) => c.trackId + ':' + c.clipId));

+        newSelection = [

+          ...selectedClips,

+          ...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)),

+        ];

+      }

+      setSelectedClips(newSelection);

+    } else if (!marquee.additive) {

+      clearSelectedClips();

+    }

+    setMarquee(null);

+  }, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]);

+

   const handleDragEnter = (e: React.DragEvent) => {

     // When something is dragged over the timeline, show overlay

     e.preventDefault();

@@ -173,25 +322,69 @@ export function Timeline() {
     }

   };

 

-  const handleTimelineClick = (e: React.MouseEvent) => {

-    const timeline = timelineRef.current;

-    if (!timeline || duration === 0) return;

-

-    const rect = timeline.getBoundingClientRect();

-    const x = e.clientX - rect.left;

-    const timelineWidth = rect.width;

-    const visibleDuration = duration / zoomLevel;

-    const clickedTime = (x / timelineWidth) * visibleDuration;

+  const handleSeekToPosition = (e: React.MouseEvent) => {

+    const rect = e.currentTarget.getBoundingClientRect();

+    const clickX = e.clientX - rect.left;

+    const clickedTime = clickX / (50 * zoomLevel);

+    const clampedTime = Math.max(0, Math.min(duration, clickedTime));

+    

+    seek(clampedTime);

+  };

 

-    seek(Math.max(0, Math.min(duration, clickedTime)));

+  const handleTimelineAreaClick = (e: React.MouseEvent) => {

+    if (e.target === e.currentTarget) {

+      clearSelectedClips();

+      

+      // Calculate the clicked time position and seek to it

+      handleSeekToPosition(e);

+    }

   };

 

   const handleWheel = (e: React.WheelEvent) => {

-    e.preventDefault();

-    const delta = e.deltaY > 0 ? -0.05 : 0.05;

-    setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));

+    // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)

+    if (e.ctrlKey || e.metaKey) {

+      e.preventDefault();

+      const delta = e.deltaY > 0 ? -0.05 : 0.05;

+      setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));

+    }

+    // Otherwise, allow normal scrolling

   };

 

+  // --- Playhead Scrubbing Handlers ---

+  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {

+    e.preventDefault();

+    setIsScrubbing(true);

+    handleScrub(e);

+  }, [duration, zoomLevel]);

+

+  const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {

+    const timeline = timelineRef.current;

+    if (!timeline) return;

+    const rect = timeline.getBoundingClientRect();

+    const x = e.clientX - rect.left;

+    const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));

+    setScrubTime(time);

+    seek(time); // update video preview in real time

+  }, [duration, zoomLevel, seek]);

+

+  useEffect(() => {

+    if (!isScrubbing) return;

+    const onMouseMove = (e: MouseEvent) => handleScrub(e);

+    const onMouseUp = (e: MouseEvent) => {

+      setIsScrubbing(false);

+      if (scrubTime !== null) seek(scrubTime); // finalize seek

+      setScrubTime(null);

+    };

+    window.addEventListener("mousemove", onMouseMove);

+    window.addEventListener("mouseup", onMouseUp);

+    return () => {

+      window.removeEventListener("mousemove", onMouseMove);

+      window.removeEventListener("mouseup", onMouseUp);

+    };

+  }, [isScrubbing, scrubTime, seek, handleScrub]);

+

+  const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;

+

   const dragProps = {

     onDragEnter: handleDragEnter,

     onDragOver: handleDragOver,

@@ -199,10 +392,116 @@ export function Timeline() {
     onDrop: handleDrop,

   };

 

+  // Action handlers for toolbar

+  const handleSplitSelected = () => {

+    if (selectedClips.length === 0) {

+      toast.error("No clips selected");

+      return;

+    }

+    selectedClips.forEach(({ trackId, clipId }) => {

+      const track = tracks.find(t => t.id === trackId);

+      const clip = track?.clips.find(c => c.id === clipId);

+      if (clip && track) {

+        const splitTime = currentTime;

+        const effectiveStart = clip.startTime;

+        const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

+        if (splitTime > effectiveStart && splitTime < effectiveEnd) {

+          updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime));

+          addClipToTrack(track.id, {

+            mediaId: clip.mediaId,

+            name: clip.name + " (split)",

+            duration: clip.duration,

+            startTime: splitTime,

+            trimStart: clip.trimStart + (splitTime - effectiveStart),

+            trimEnd: clip.trimEnd,

+          });

+        }

+      }

+    });

+    toast.success("Split selected clip(s)");

+  };

+

+  const handleDuplicateSelected = () => {

+    if (selectedClips.length === 0) {

+      toast.error("No clips selected");

+      return;

+    }

+    selectedClips.forEach(({ trackId, clipId }) => {

+      const track = tracks.find(t => t.id === trackId);

+      const clip = track?.clips.find(c => c.id === clipId);

+      if (clip && track) {

+        addClipToTrack(track.id, {

+          mediaId: clip.mediaId,

+          name: clip.name + " (copy)",

+          duration: clip.duration,

+          startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,

+          trimStart: clip.trimStart,

+          trimEnd: clip.trimEnd,

+        });

+      }

+    });

+    toast.success("Duplicated selected clip(s)");

+  };

+

+  const handleFreezeSelected = () => {

+    if (selectedClips.length === 0) {

+      toast.error("No clips selected");

+      return;

+    }

+    selectedClips.forEach(({ trackId, clipId }) => {

+      const track = tracks.find(t => t.id === trackId);

+      const clip = track?.clips.find(c => c.id === clipId);

+      if (clip && track) {

+        // Add a new freeze frame clip at the playhead

+        addClipToTrack(track.id, {

+          mediaId: clip.mediaId,

+          name: clip.name + " (freeze)",

+          duration: 1, // 1 second freeze frame

+          startTime: currentTime,

+          trimStart: 0,

+          trimEnd: clip.duration - 1,

+        });

+      }

+    });

+    toast.success("Freeze frame added for selected clip(s)");

+  };

+

+  const handleDeleteSelected = () => {

+    if (selectedClips.length === 0) {

+      toast.error("No clips selected");

+      return;

+    }

+    selectedClips.forEach(({ trackId, clipId }) => {

+      removeClipFromTrack(trackId, clipId);

+    });

+    clearSelectedClips();

+    toast.success("Deleted selected clip(s)");

+  };

+

+

+  // Prevent explorer zooming in/out when in timeline

+  useEffect(() => {

+    const preventZoom = (e: WheelEvent) => {

+      // if (isInTimeline && (e.ctrlKey || e.metaKey)) {

+      if (isInTimeline && (e.ctrlKey || e.metaKey) && timelineRef.current?.contains(e.target as Node)) {

+        e.preventDefault();

+      }

+    };

+

+    document.addEventListener('wheel', preventZoom, { passive: false });

+    

+    return () => {

+      document.removeEventListener('wheel', preventZoom);

+    };

+  }, [isInTimeline]);

+

   return (

     <div

       className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? "bg-accent/30 border-accent" : ""}`}

       {...dragProps}

+      onMouseEnter={() => setIsInTimeline(true)}

+      onMouseLeave={() => setIsInTimeline(false)}

+      onWheel={handleWheel}

     >

       {/* Show overlay when dragging media over the timeline */}

       {isDragOver && (

@@ -220,7 +519,7 @@ export function Timeline() {
           <Tooltip>

             <TooltipTrigger asChild>

               <Button

-                variant="ghost"

+                variant="text"

                 size="icon"

                 onClick={toggle}

                 className="mr-2"

@@ -271,7 +570,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon" onClick={handleSplitSelected}>

                 <Scissors className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -280,7 +579,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon">

                 <ArrowLeftToLine className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -289,7 +588,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon">

                 <ArrowRightToLine className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -298,7 +597,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon">

                 <SplitSquareHorizontal className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -307,7 +606,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon" onClick={handleDuplicateSelected}>

                 <Copy className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -316,7 +615,7 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon" onClick={handleFreezeSelected}>

                 <Snowflake className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

@@ -325,12 +624,35 @@ export function Timeline() {
 

           <Tooltip>

             <TooltipTrigger asChild>

-              <Button variant="ghost" size="icon">

+              <Button variant="text" size="icon" onClick={handleDeleteSelected}>

                 <Trash2 className="h-4 w-4" />

               </Button>

             </TooltipTrigger>

             <TooltipContent>Delete clip (Delete)</TooltipContent>

           </Tooltip>

+

+          <div className="w-px h-6 bg-border mx-1" />

+

+          {/* Speed Control */}

+          <Tooltip>

+            <TooltipTrigger asChild>

+              <Select

+                value={speed.toFixed(1)}

+                onValueChange={(value) => setSpeed(parseFloat(value))}

+              >

+                <SelectTrigger className="w-[90px] h-8">

+                  <SelectValue placeholder="1.0x" />

+                </SelectTrigger>

+                <SelectContent>

+                  <SelectItem value="0.5">0.5x</SelectItem>

+                  <SelectItem value="1.0">1.0x</SelectItem>

+                  <SelectItem value="1.5">1.5x</SelectItem>

+                  <SelectItem value="2.0">2.0x</SelectItem>

+                </SelectContent>

+              </Select>

+            </TooltipTrigger>

+            <TooltipContent>Playback Speed</TooltipContent>

+          </Tooltip>

         </TooltipProvider>

       </div>

 

@@ -352,10 +674,14 @@ export function Timeline() {
           <div className="flex-1 relative overflow-hidden">

             <ScrollArea className="w-full">

               <div

-                className="relative h-12 bg-muted/30"

+                className="relative h-12 bg-muted/30 cursor-pointer"

                 style={{

                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,

                 }}

+                onClick={(e) => {

+                  // Calculate the clicked time position and seek to it

+                  handleSeekToPosition(e);

+                }}

               >

                 {/* Time markers */}

                 {(() => {

@@ -420,10 +746,11 @@ export function Timeline() {
                   }).filter(Boolean);

                 })()}

 

-                {/* Playhead in ruler */}

+                {/* Playhead in ruler (scrubbable) */}

                 <div

-                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"

-                  style={{ left: `${currentTime * 50 * zoomLevel}px` }}

+                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-auto z-10 cursor-ew-resize"

+                  style={{ left: `${playheadPosition * 50 * zoomLevel}px` }}

+                  onMouseDown={handlePlayheadMouseDown}

                 >

                   <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />

                 </div>

@@ -452,25 +779,35 @@ export function Timeline() {
                   <div

                     key={track.id}

                     className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"

+                    onContextMenu={(e) => {

+                      e.preventDefault();

+                      setContextMenu({

+                        type: 'track',

+                        trackId: track.id,

+                        x: e.clientX,

+                        y: e.clientY,

+                      });

+                    }}

                   >

-                    <div className="flex items-center gap-2 flex-1 min-w-0">

+                    <div className="flex items-center flex-1 min-w-0">

                       <div

-                        className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video"

-                          ? "bg-blue-500"

-                          : track.type === "audio"

+                        className={`w-3 h-3 rounded-full flex-shrink-0 ${

+                          track.type === "video"

+                            ? "bg-blue-500"

+                            : track.type === "audio"

                             ? "bg-green-500"

                             : "bg-purple-500"

-                          }`}

+                        }`}

                       />

-                      <span className="text-sm font-medium truncate">

+                      <span className="ml-2 text-sm font-medium truncate">

                         {track.name}

                       </span>

-                      {track.muted && (

-                        <span className="ml-2 text-xs text-red-500 font-semibold">

-                          Muted

-                        </span>

-                      )}

                     </div>

+                    {track.muted && (

+                      <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">

+                        Muted

+                      </span>

+                    )}

                   </div>

                 ))}

               </div>

@@ -478,18 +815,17 @@ export function Timeline() {
           </div>

 

           {/* Timeline Tracks Content */}

-          <div className="flex-1 relative">

-            <ScrollArea className="h-full w-full">

+          <div className="flex-1 relative overflow-hidden">

+            <div className="w-full h-[600px] overflow-hidden flex" ref={timelineRef} style={{ position: 'relative' }}>

+              {/* Timeline grid and clips area (with left margin for sidebar) */}

               <div

-                ref={timelineRef}

-                className="relative cursor-pointer select-none"

+                className="relative flex-1"

                 style={{

+                  height: `${tracks.length * 60}px`,

                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,

-                  minHeight:

-                    tracks.length > 0 ? `${tracks.length * 60}px` : "200px",

                 }}

-                onClick={handleTimelineClick}

-                onWheel={handleWheel}

+                onClick={handleTimelineAreaClick}

+                onMouseDown={handleTimelineMouseDown}

               >

                 {tracks.length === 0 ? (

                   <div className="absolute inset-0 flex items-center justify-center">

@@ -528,22 +864,24 @@ export function Timeline() {
                           zoomLevel={zoomLevel}

                           setContextMenu={setContextMenu}

                         />

-

                       </div>

                     ))}

 

-                    {/* Playhead for tracks area */}

-                    <div

-                      className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"

-                      style={{

-                        left: `${currentTime * 50 * zoomLevel}px`,

-                        height: `${tracks.length * 60}px`,

-                      }}

-                    />

+                    {/* Playhead for tracks area (scrubbable) */}

+                    {tracks.length > 0 && (

+                      <div

+                        className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-20 cursor-ew-resize"

+                        style={{

+                          left: `${playheadPosition * 50 * zoomLevel}px`,

+                          height: `${tracks.length * 60}px`,

+                        }}

+                        onMouseDown={handlePlayheadMouseDown}

+                      />

+                    )}

                   </>

                 )}

               </div>

-            </ScrollArea>

+            </div>

           </div>

         </div>

       </div>

@@ -609,7 +947,7 @@ export function Timeline() {
                       const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

 

                       if (splitTime > effectiveStart && splitTime < effectiveEnd) {

-                        useTimelineStore.getState().updateClipTrim(

+                        updateClipTrim(

                           track.id,

                           clip.id,

                           clip.trimStart,

@@ -699,6 +1037,9 @@ function TimelineTrackContent({
     addClipToTrack,

     removeClipFromTrack,

     toggleTrackMute,

+    selectedClips,

+    selectClip,

+    deselectClip,

   } = useTimelineStore();

   const { currentTime } = usePlaybackStore();

   const [isDropping, setIsDropping] = useState(false);

@@ -1260,12 +1601,32 @@ function TimelineTrackContent({
                 effectiveDuration * 50 * zoomLevel

               );

               const clipLeft = clip.startTime * 50 * zoomLevel;

-

+              const isSelected = selectedClips.some(

+                (c) => c.trackId === track.id && c.clipId === clip.id

+              );

               return (

                 <div

                   key={clip.id}

-                  className={`timeline-clip absolute h-full rounded-sm border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg`}

+                  className={`timeline-clip absolute h-full rounded-sm border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}

                   style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}

+                  onClick={(e) => {

+                    e.stopPropagation();

+                    const isSelected = selectedClips.some(

+                      (c) => c.trackId === track.id && c.clipId === clip.id

+                    );

+                    

+                    if (e.metaKey || e.ctrlKey || e.shiftKey) {

+                      // Multi-selection mode: toggle the clip

+                      selectClip(track.id, clip.id, true);

+                    } else if (isSelected) {

+                      // If clip is already selected, deselect it

+                      deselectClip(track.id, clip.id);

+                    } else {

+                      // If clip is not selected, select it (replacing other selections)

+                      selectClip(track.id, clip.id, false);

+                    }

+                  }}

+                  tabIndex={0}

                   onContextMenu={(e) => {

                     e.preventDefault();

                     e.stopPropagation();

@@ -1294,7 +1655,7 @@ function TimelineTrackContent({
                     {/* Clip options menu */}

                     <div className="absolute top-1 right-1 z-10">

                       <Button

-                        variant="ghost"

+                        variant="text"

                         size="icon"

                         className="opacity-0 group-hover:opacity-100 transition-opacity"

                         onClick={() => setClipMenuOpen(clip.id)}

@@ -1334,24 +1695,20 @@ function TimelineTrackContent({
             {/* Drop position indicator */}

             {isDraggedOver && dropPosition !== null && (

               <div

-                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"

-                  }`}

+                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}

                 style={{

                   left: `${dropPosition * 50 * zoomLevel}px`,

                   transform: "translateX(-50%)",

                 }}

               >

                 <div

-                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"

-                    }`}

+                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}

                 />

                 <div

-                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"

-                    }`}

+                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}

                 />

                 <div

-                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"

-                    }`}

+                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}

                 >

                   {wouldOverlap ? "⚠️" : ""}

                   {dropPosition.toFixed(1)}s

@@ -1363,4 +1720,4 @@ function TimelineTrackContent({
       </div>

     </div>

   );

-}
\ No newline at end of file
+}