Merge branch 'main' into split-issue-83

5 files changed, 580 insertions, 267 deletions

diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
index f2b3f657..dfe08365 100644
--- a/apps/web/src/components/editor/media-panel.tsx
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -3,7 +3,7 @@
 import { Button } from "../ui/button";
 import { AspectRatio } from "../ui/aspect-ratio";
 import { DragOverlay } from "../ui/drag-overlay";
-import { useMediaStore } from "@/stores/media-store";
+import { useMediaStore, type MediaItem } from "@/stores/media-store";
 import { processMediaFiles } from "@/lib/media-processing";
 import { Plus, Image, Video, Music, Trash2, Upload } from "lucide-react";
 import { useDragDrop } from "@/hooks/use-drag-drop";
@@ -17,27 +17,28 @@ export function MediaPanel() {
   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
   const [mediaFilter, setMediaFilter] = useState("all");
 
   const processFiles = async (files: FileList | File[]) => {
-    // If no files, do nothing
-    if (!files?.length) return;
-
+    if (!files || files.length === 0) return;
     setIsProcessing(true);
+    setProgress(0);
     try {
       // Process files (extract metadata, generate thumbnails, etc.)
-      const items = await processMediaFiles(files);
+      const processedItems = await processMediaFiles(files, (p) =>
+        setProgress(p)
+      );
       // Add each processed media item to the store
-      items.forEach((item) => {
-        addMediaItem(item);
-      });
+      processedItems.forEach((item) => addMediaItem(item));
     } catch (error) {
-      // Show error if processing fails
-      console.error("File processing failed:", error);
+      // Show error toast if processing fails
+      console.error("Error processing files:", error);
       toast.error("Failed to process files");
     } finally {
       setIsProcessing(false);
+      setProgress(0);
     }
   };
 
@@ -67,7 +68,7 @@ export function MediaPanel() {
     return `${min}:${sec.toString().padStart(2, "0")}`;
   };
 
-  const startDrag = (e: React.DragEvent, item: any) => {
+  const startDrag = (e: React.DragEvent, item: MediaItem) => {
     // When dragging a media item, set drag data for timeline to read
     e.dataTransfer.setData(
       "application/x-media-item",
@@ -101,7 +102,7 @@ export function MediaPanel() {
     setFilteredMediaItems(filtered);
   }, [mediaItems, mediaFilter, searchQuery]);
 
-  const renderPreview = (item: any) => {
+  const renderPreview = (item: MediaItem) => {
     // Render a preview for each media type (image, video, audio, unknown)
     // Each preview is draggable to the timeline
     const baseDragProps = {
@@ -241,15 +242,12 @@ export function MediaPanel() {
               {isProcessing ? (
                 <>
                   <Upload className="h-4 w-4 animate-spin" />
-                  <span className="hidden md:inline ml-2">Processing...</span>
+                  <span className="hidden md:inline ml-2">{progress}%</span>
                 </>
               ) : (
                 <>
                   <Plus className="h-4 w-4" />
-                  <span
-                    className="hidden sm:inline ml-2"
-                    aria-label="Add file"
-                  >
+                  <span className="hidden sm:inline ml-2" aria-label="Add file">
                     Add
                   </span>
                 </>
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 33bfe688..e19b4de7 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -1,246 +1,283 @@
-"use client";

-

-import { useTimelineStore } from "@/stores/timeline-store";

-import { useMediaStore } from "@/stores/media-store";

-import { usePlaybackStore } from "@/stores/playback-store";

-import { VideoPlayer } from "@/components/ui/video-player";

-import { Button } from "@/components/ui/button";

-import { Play, Pause, Volume2, VolumeX } from "lucide-react";

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

-

-// Debug flag - set to false to hide active clips info

-const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";

-

-export function PreviewPanel() {

-  const { tracks } = useTimelineStore();

-  const { mediaItems } = useMediaStore();

-  const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =

-    usePlaybackStore();

-  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });

-  const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);

-  const previewRef = useRef<HTMLDivElement>(null);

-

-  // Get active clips at current time

-  const getActiveClips = () => {

-    const activeClips: Array<{

-      clip: any;

-      track: any;

-      mediaItem: any;

-    }> = [];

-

-    tracks.forEach((track) => {

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

-        const clipStart = clip.startTime;

-        const clipEnd =

-          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

-

-        if (currentTime >= clipStart && currentTime < clipEnd) {

-          const mediaItem =

-            clip.mediaId === "test"

-              ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }

-              : mediaItems.find((item) => item.id === clip.mediaId);

-

-          if (mediaItem || clip.mediaId === "test") {

-            activeClips.push({ clip, track, mediaItem });

-          }

-        }

-      });

-    });

-

-    return activeClips;

-  };

-

-  const activeClips = getActiveClips();

-  const aspectRatio = canvasSize.width / canvasSize.height;

-

-  // Render a clip

-  const renderClip = (clipData: any, index: number) => {

-    const { clip, mediaItem } = clipData;

-

-    // Test clips

-    if (!mediaItem || clip.mediaId === "test") {

-      return (

-        <div

-          key={clip.id}

-          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"

-        >

-          <div className="text-center">

-            <div className="text-2xl mb-2">🎬</div>

-            <p className="text-xs text-white">{clip.name}</p>

-          </div>

-        </div>

-      );

-    }

-

-    // Video clips

-    if (mediaItem.type === "video") {

-      return (

-        <div key={clip.id} className="absolute inset-0">

-          <VideoPlayer

-            src={mediaItem.url}

-            poster={mediaItem.thumbnailUrl}

-            clipStartTime={clip.startTime}

-            trimStart={clip.trimStart}

-            trimEnd={clip.trimEnd}

-            clipDuration={clip.duration}

-          />

-        </div>

-      );

-    }

-

-    // Image clips

-    if (mediaItem.type === "image") {

-      return (

-        <div key={clip.id} className="absolute inset-0">

-          <img

-            src={mediaItem.url}

-            alt={mediaItem.name}

-            className="w-full h-full object-cover"

-            draggable={false}

-          />

-        </div>

-      );

-    }

-

-    // Audio clips (visual representation)

-    if (mediaItem.type === "audio") {

-      return (

-        <div

-          key={clip.id}

-          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"

-        >

-          <div className="text-center">

-            <div className="text-2xl mb-2">🎵</div>

-            <p className="text-xs text-white">{mediaItem.name}</p>

-          </div>

-        </div>

-      );

-    }

-

-    return null;

-  };

-

-  // Canvas presets

-  const canvasPresets = [

-    { name: "16:9 HD", width: 1920, height: 1080 },

-    { name: "16:9 4K", width: 3840, height: 2160 },

-    { name: "9:16 Mobile", width: 1080, height: 1920 },

-    { name: "1:1 Square", width: 1080, height: 1080 },

-    { name: "4:3 Standard", width: 1440, height: 1080 },

-  ];

-

-  return (

-    <div className="h-full w-full flex flex-col min-h-0 min-w-0">

-      {/* Controls */}

-      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">

-        <span className="text-muted-foreground">Canvas:</span>

-        <select

-          value={`${canvasSize.width}x${canvasSize.height}`}

-          onChange={(e) => {

-            const preset = canvasPresets.find(

-              (p) => `${p.width}x${p.height}` === e.target.value

-            );

-            if (preset)

-              setCanvasSize({ width: preset.width, height: preset.height });

-          }}

-          className="bg-background border rounded px-2 py-1 text-xs"

-        >

-          {canvasPresets.map((preset) => (

-            <option

-              key={preset.name}

-              value={`${preset.width}x${preset.height}`}

-            >

-              {preset.name} ({preset.width}×{preset.height})

-            </option>

-          ))}

-        </select>

-

-        {/* Debug Toggle - Only show in development */}

-        {SHOW_DEBUG_INFO && (

-          <Button

-            variant="text"

-            size="sm"

-            onClick={() => setShowDebug(!showDebug)}

-            className="text-xs"

-          >

-            Debug {showDebug ? "ON" : "OFF"}

-          </Button>

-        )}

-

-        <Button

-          variant="outline"

-          size="sm"

-          onClick={toggleMute}

-          className="ml-auto"

-        >

-          {muted || volume === 0 ? (

-            <VolumeX className="h-3 w-3 mr-1" />

-          ) : (

-            <Volume2 className="h-3 w-3 mr-1" />

-          )}

-          {muted || volume === 0 ? "Unmute" : "Mute"}

-        </Button>

-

-        <Button variant="outline" size="sm" onClick={toggle}>

-          {isPlaying ? (

-            <Pause className="h-3 w-3 mr-1" />

-          ) : (

-            <Play className="h-3 w-3 mr-1" />

-          )}

-          {isPlaying ? "Pause" : "Play"}

-        </Button>

-      </div>

-

-      {/* Preview Area */}

-      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 bg-gray-900 min-h-0 min-w-0">

-        <div

-          ref={previewRef}

-          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border border-gray-600"

-          style={{

-            aspectRatio: aspectRatio.toString(),

-            width: "100%",

-            height: "100%",

-          }}

-        >

-          {activeClips.length === 0 ? (

-            <div className="absolute inset-0 flex items-center justify-center text-white/50">

-              {tracks.length === 0

-                ? "Drop media to start editing"

-                : "No clips at current time"}

-            </div>

-          ) : (

-            activeClips.map((clipData, index) => renderClip(clipData, index))

-          )}

-        </div>

-      </div>

-

-      {/* Debug Info Panel - Conditionally rendered */}

-      {showDebug && (

-        <div className="border-t bg-background p-2 flex-shrink-0">

-          <div className="text-xs font-medium mb-1">

-            Debug: Active Clips ({activeClips.length})

-          </div>

-          <div className="flex gap-2 overflow-x-auto">

-            {activeClips.map((clipData, index) => (

-              <div

-                key={clipData.clip.id}

-                className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"

-              >

-                <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">

-                  {index + 1}

-                </span>

-                <span>{clipData.clip.name}</span>

-                <span className="text-muted-foreground">

-                  ({clipData.mediaItem?.type || "test"})

-                </span>

-              </div>

-            ))}

-            {activeClips.length === 0 && (

-              <span className="text-muted-foreground">No active clips</span>

-            )}

-          </div>

-        </div>

-      )}

-    </div>

-  );

-}

+"use client";
+
+import {
+  useTimelineStore,
+  type TimelineClip,
+  type TimelineTrack,
+} from "@/stores/timeline-store";
+import { useMediaStore, type MediaItem } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { VideoPlayer } from "@/components/ui/video-player";
+import { Button } from "@/components/ui/button";
+import { Play, Pause, Volume2, VolumeX, Plus } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+interface ActiveClip {
+  clip: TimelineClip;
+  track: TimelineTrack;
+  mediaItem: MediaItem | null;
+}
+
+export function PreviewPanel() {
+  const { tracks } = useTimelineStore();
+  const { mediaItems } = useMediaStore();
+  const { currentTime, muted, toggleMute, volume } = usePlaybackStore();
+  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
+  const previewRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [previewDimensions, setPreviewDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  // Calculate optimal preview size that fits in container while maintaining aspect ratio
+  useEffect(() => {
+    const updatePreviewSize = () => {
+      if (!containerRef.current) return;
+
+      const container = containerRef.current.getBoundingClientRect();
+      const computedStyle = getComputedStyle(containerRef.current);
+
+      // Get padding values
+      const paddingTop = parseFloat(computedStyle.paddingTop);
+      const paddingBottom = parseFloat(computedStyle.paddingBottom);
+      const paddingLeft = parseFloat(computedStyle.paddingLeft);
+      const paddingRight = parseFloat(computedStyle.paddingRight);
+
+      // Get gap value (gap-4 = 1rem = 16px)
+      const gap = parseFloat(computedStyle.gap) || 16;
+
+      // Get toolbar height if it exists
+      const toolbar = containerRef.current.querySelector("[data-toolbar]");
+      const toolbarHeight = toolbar
+        ? toolbar.getBoundingClientRect().height
+        : 0;
+
+      // Calculate available space after accounting for padding, gap, and toolbar
+      const availableWidth = container.width - paddingLeft - paddingRight;
+      const availableHeight =
+        container.height -
+        paddingTop -
+        paddingBottom -
+        toolbarHeight -
+        (toolbarHeight > 0 ? gap : 0);
+
+      const targetRatio = canvasSize.width / canvasSize.height;
+      const containerRatio = availableWidth / availableHeight;
+
+      let width, height;
+
+      if (containerRatio > targetRatio) {
+        // Container is wider - constrain by height
+        height = availableHeight;
+        width = height * targetRatio;
+      } else {
+        // Container is taller - constrain by width
+        width = availableWidth;
+        height = width / targetRatio;
+      }
+
+      setPreviewDimensions({ width, height });
+    };
+
+    updatePreviewSize();
+
+    const resizeObserver = new ResizeObserver(updatePreviewSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [canvasSize.width, canvasSize.height]);
+
+  // Get active clips at current time
+  const getActiveClips = (): ActiveClip[] => {
+    const activeClips: ActiveClip[] = [];
+
+    tracks.forEach((track) => {
+      track.clips.forEach((clip) => {
+        const clipStart = clip.startTime;
+        const clipEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+        if (currentTime >= clipStart && currentTime < clipEnd) {
+          const mediaItem =
+            clip.mediaId === "test"
+              ? null // Test clips don't have a real media item
+              : mediaItems.find((item) => item.id === clip.mediaId) || null;
+
+          activeClips.push({ clip, track, mediaItem });
+        }
+      });
+    });
+
+    return activeClips;
+  };
+
+  const activeClips = getActiveClips();
+
+  // Render a clip
+  const renderClip = (clipData: ActiveClip, index: number) => {
+    const { clip, mediaItem } = clipData;
+
+    // Test clips
+    if (!mediaItem || clip.mediaId === "test") {
+      return (
+        <div
+          key={clip.id}
+          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
+        >
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎬</div>
+            <p className="text-xs text-white">{clip.name}</p>
+          </div>
+        </div>
+      );
+    }
+
+    // Video clips
+    if (mediaItem.type === "video") {
+      return (
+        <div key={clip.id} className="absolute inset-0">
+          <VideoPlayer
+            src={mediaItem.url}
+            poster={mediaItem.thumbnailUrl}
+            clipStartTime={clip.startTime}
+            trimStart={clip.trimStart}
+            trimEnd={clip.trimEnd}
+            clipDuration={clip.duration}
+          />
+        </div>
+      );
+    }
+
+    // Image clips
+    if (mediaItem.type === "image") {
+      return (
+        <div key={clip.id} className="absolute inset-0">
+          <img
+            src={mediaItem.url}
+            alt={mediaItem.name}
+            className="w-full h-full object-cover"
+            draggable={false}
+          />
+        </div>
+      );
+    }
+
+    // Audio clips (visual representation)
+    if (mediaItem.type === "audio") {
+      return (
+        <div
+          key={clip.id}
+          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
+        >
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎵</div>
+            <p className="text-xs text-white">{mediaItem.name}</p>
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  // Canvas presets
+  const canvasPresets = [
+    { name: "16:9 HD", width: 1920, height: 1080 },
+    { name: "16:9 4K", width: 3840, height: 2160 },
+    { name: "9:16 Mobile", width: 1080, height: 1920 },
+    { name: "1:1 Square", width: 1080, height: 1080 },
+    { name: "4:3 Standard", width: 1440, height: 1080 },
+  ];
+
+  return (
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
+      {/* Controls */}
+      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
+        <span className="text-muted-foreground">Canvas:</span>
+        <select
+          value={`${canvasSize.width}x${canvasSize.height}`}
+          onChange={(e) => {
+            const preset = canvasPresets.find(
+              (p) => `${p.width}x${p.height}` === e.target.value
+            );
+            if (preset)
+              setCanvasSize({ width: preset.width, height: preset.height });
+          }}
+          className="bg-background border rounded px-2 py-1 text-xs"
+        >
+          {canvasPresets.map((preset) => (
+            <option
+              key={preset.name}
+              value={`${preset.width}x${preset.height}`}
+            >
+              {preset.name} ({preset.width}×{preset.height})
+            </option>
+          ))}
+        </select>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={toggleMute}
+          className="ml-auto"
+        >
+          {muted || volume === 0 ? (
+            <VolumeX className="h-3 w-3 mr-1" />
+          ) : (
+            <Volume2 className="h-3 w-3 mr-1" />
+          )}
+          {muted || volume === 0 ? "Unmute" : "Mute"}
+        </Button>
+      </div>
+
+      {/* Preview Area */}
+      <div
+        ref={containerRef}
+        className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0 gap-4"
+      >
+        <div
+          ref={previewRef}
+          className="relative overflow-hidden rounded-sm bg-black border"
+          style={{
+            width: previewDimensions.width,
+            height: previewDimensions.height,
+          }}
+        >
+          {activeClips.length === 0 ? (
+            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+              {tracks.length === 0
+                ? "Drop media to start editing"
+                : "No clips at current time"}
+            </div>
+          ) : (
+            activeClips.map((clipData, index) => renderClip(clipData, index))
+          )}
+        </div>
+
+        <PreviewToolbar />
+      </div>
+    </div>
+  );
+}
+
+function PreviewToolbar() {
+  const { isPlaying, toggle } = usePlaybackStore();
+
+  return (
+    <div
+      data-toolbar
+      className="flex items-center justify-center gap-2 px-4 pt-2 bg-background-500 w-full"
+    >
+      <Button variant="text" size="icon" onClick={toggle}>
+        {isPlaying ? (
+          <Pause className="h-3 w-3" />
+        ) : (
+          <Play className="h-3 w-3" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index c784dab8..96ef66e5 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -17,13 +17,12 @@ import { useMediaStore } from "@/stores/media-store";
 import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
 import { useState } from "react";
 import { SpeedControl } from "./speed-control";
+import type { BackgroundType } from "@/types/editor";
 
 export function PropertiesPanel() {
   const { tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
-  const [backgroundType, setBackgroundType] = useState<
-    "blur" | "mirror" | "color"
-  >("blur");
+  const [backgroundType, setBackgroundType] = useState<BackgroundType>("blur");
   const [backgroundColor, setBackgroundColor] = useState("#000000");
 
   // Get the first video clip for preview (simplified)
@@ -78,7 +77,9 @@ export function PropertiesPanel() {
                   <Label htmlFor="bg-type">Background Type</Label>
                   <Select
                     value={backgroundType}
-                    onValueChange={(value: any) => setBackgroundType(value)}
+                    onValueChange={(value: BackgroundType) =>
+                      setBackgroundType(value)
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select background type" />
diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx
new file mode 100644
index 00000000..4c0d3b77
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-clip.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { MoreVertical, Scissors, Trash2 } from "lucide-react";
+import { useMediaStore } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useDragClip } from "@/hooks/use-drag-clip";
+import AudioWaveform from "./audio-waveform";
+import { toast } from "sonner";
+import { TimelineClipProps, ResizeState } from "@/types/timeline";
+
+export function TimelineClip({
+  clip,
+  track,
+  zoomLevel,
+  isSelected,
+  onContextMenu,
+  onClipMouseDown,
+  onClipClick,
+}: TimelineClipProps) {
+  const { mediaItems } = useMediaStore();
+  const { updateClipTrim, addClipToTrack, removeClipFromTrack, dragState } =
+    useTimelineStore();
+  const { currentTime } = usePlaybackStore();
+
+  const [resizing, setResizing] = useState<ResizeState | null>(null);
+  const [clipMenuOpen, setClipMenuOpen] = useState(false);
+
+  const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
+  const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
+
+  // Use real-time position during drag, otherwise use stored position
+  const isBeingDragged = dragState.clipId === clip.id;
+  const clipStartTime =
+    isBeingDragged && dragState.isDragging
+      ? dragState.currentTime
+      : clip.startTime;
+  const clipLeft = clipStartTime * 50 * zoomLevel;
+
+  const getTrackColor = (type: string) => {
+    switch (type) {
+      case "video":
+        return "bg-blue-500/20 border-blue-500/30";
+      case "audio":
+        return "bg-green-500/20 border-green-500/30";
+      case "effects":
+        return "bg-purple-500/20 border-purple-500/30";
+      default:
+        return "bg-gray-500/20 border-gray-500/30";
+    }
+  };
+
+  const handleResizeStart = (
+    e: React.MouseEvent,
+    clipId: string,
+    side: "left" | "right"
+  ) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    setResizing({
+      clipId,
+      side,
+      startX: e.clientX,
+      initialTrimStart: clip.trimStart,
+      initialTrimEnd: clip.trimEnd,
+    });
+  };
+
+  const updateTrimFromMouseMove = (e: { clientX: number }) => {
+    if (!resizing) return;
+
+    const deltaX = e.clientX - resizing.startX;
+    const deltaTime = deltaX / (50 * zoomLevel);
+
+    if (resizing.side === "left") {
+      const newTrimStart = Math.max(
+        0,
+        Math.min(
+          clip.duration - clip.trimEnd - 0.1,
+          resizing.initialTrimStart + deltaTime
+        )
+      );
+      updateClipTrim(track.id, clip.id, newTrimStart, clip.trimEnd);
+    } else {
+      const newTrimEnd = Math.max(
+        0,
+        Math.min(
+          clip.duration - clip.trimStart - 0.1,
+          resizing.initialTrimEnd - deltaTime
+        )
+      );
+      updateClipTrim(track.id, clip.id, clip.trimStart, newTrimEnd);
+    }
+  };
+
+  const handleResizeMove = (e: React.MouseEvent) => {
+    updateTrimFromMouseMove(e);
+  };
+
+  const handleResizeEnd = () => {
+    setResizing(null);
+  };
+
+  const handleDeleteClip = () => {
+    removeClipFromTrack(track.id, clip.id);
+    setClipMenuOpen(false);
+  };
+
+  const handleSplitClip = () => {
+    // Use current playback time as split point
+    const splitTime = currentTime;
+    // Only split if splitTime is within the clip's effective range
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) {
+      toast.error("Playhead must be within clip to split");
+      return;
+    }
+
+    const firstDuration = splitTime - effectiveStart;
+    const secondDuration = effectiveEnd - splitTime;
+
+    // First part: adjust original clip
+    updateClipTrim(
+      track.id,
+      clip.id,
+      clip.trimStart,
+      clip.trimEnd + secondDuration
+    );
+
+    // Second part: add new clip after split
+    addClipToTrack(track.id, {
+      mediaId: clip.mediaId,
+      name: clip.name + " (cut)",
+      duration: clip.duration,
+      startTime: splitTime,
+      trimStart: clip.trimStart + firstDuration,
+      trimEnd: clip.trimEnd,
+    });
+
+    setClipMenuOpen(false);
+    toast.success("Clip split successfully");
+  };
+
+  const renderClipContent = () => {
+    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+
+    if (!mediaItem) {
+      return (
+        <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+      );
+    }
+
+    if (mediaItem.type === "image") {
+      return (
+        <div className="w-full h-full flex items-center justify-center">
+          <img
+            src={mediaItem.url}
+            alt={mediaItem.name}
+            className="w-full h-full object-cover"
+            draggable={false}
+          />
+        </div>
+      );
+    }
+
+    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+      return (
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="w-8 h-8 flex-shrink-0">
+            <img
+              src={mediaItem.thumbnailUrl}
+              alt={mediaItem.name}
+              className="w-full h-full object-cover rounded-sm"
+              draggable={false}
+            />
+          </div>
+          <span className="text-xs text-foreground/80 truncate flex-1">
+            {clip.name}
+          </span>
+        </div>
+      );
+    }
+
+    if (mediaItem.type === "audio") {
+      return (
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="flex-1 min-w-0">
+            <AudioWaveform
+              audioUrl={mediaItem.url}
+              height={24}
+              className="w-full"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    // Fallback for videos without thumbnails
+    return (
+      <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+    );
+  };
+
+  return (
+    <div
+      className={`timeline-clip absolute h-full border ${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" : ""} ${isBeingDragged ? "shadow-lg z-20" : ""}`}
+      style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
+      onMouseDown={(e) => onClipMouseDown(e, clip)}
+      onClick={(e) => onClipClick(e, clip)}
+      onMouseMove={handleResizeMove}
+      onMouseUp={handleResizeEnd}
+      onMouseLeave={handleResizeEnd}
+      tabIndex={0}
+      onContextMenu={(e) => onContextMenu(e, clip.id)}
+    >
+      {/* Left trim handle */}
+      <div
+        className={`absolute left-0 top-0 bottom-0 w-2 cursor-w-resize transition-opacity bg-blue-500/50 hover:bg-blue-500 ${isSelected ? "opacity-100" : "opacity-0"}`}
+        onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
+      />
+
+      {/* Clip content */}
+      <div className="flex-1 relative">
+        {renderClipContent()}
+
+        {/* Clip options menu */}
+        <div className="absolute top-1 right-1 z-10">
+          <Button
+            variant="text"
+            size="icon"
+            className="opacity-0 group-hover:opacity-100 transition-opacity"
+            onClick={(e) => {
+              e.stopPropagation();
+              setClipMenuOpen(!clipMenuOpen);
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+
+          {clipMenuOpen && (
+            <div
+              className="absolute right-0 mt-2 w-32 bg-white border rounded shadow z-50"
+              onMouseDown={(e) => e.stopPropagation()}
+            >
+              <button
+                className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
+                onClick={handleSplitClip}
+              >
+                <Scissors className="h-4 w-4 mr-2" /> Split
+              </button>
+              <button
+                className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                onClick={handleDeleteClip}
+              >
+                <Trash2 className="h-4 w-4 mr-2" /> Delete
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right trim handle */}
+      <div
+        className={`absolute right-0 top-0 bottom-0 w-2 cursor-e-resize transition-opacity bg-blue-500/50 hover:bg-blue-500 ${isSelected ? "opacity-100" : "opacity-0"}`}
+        onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 591eac89..ae6b98d3 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -1860,3 +1860,4 @@ function TimelineTrackContent({
     </div>

   );

 }

+