Merge branch 'staging'

6 files changed, 2584 insertions, 2788 deletions

diff --git a/apps/web/src/components/delete-project-dialog.tsx b/apps/web/src/components/delete-project-dialog.tsx
index db709647..e2b32dda 100644
--- a/apps/web/src/components/delete-project-dialog.tsx
+++ b/apps/web/src/components/delete-project-dialog.tsx
@@ -1,53 +1,68 @@
-import { Button } from "@/components/ui/button";

-import {

-  Dialog,

-  DialogContent,

-  DialogDescription,

-  DialogFooter,

-  DialogHeader,

-  DialogTitle,

-} from "@/components/ui/dialog";

-

-export function DeleteProjectDialog({

-  isOpen,

-  onOpenChange,

-  onConfirm,

-}: {

-  isOpen: boolean;

-  onOpenChange: (open: boolean) => void;

-  onConfirm: () => void;

-}) {

-  return (

-    <Dialog open={isOpen} onOpenChange={onOpenChange}>

-      <DialogContent

-        onOpenAutoFocus={(e) => {

-          e.preventDefault();

-          e.stopPropagation();

-        }}

-      >

-        <DialogHeader>

-          <DialogTitle>Delete Project</DialogTitle>

-          <DialogDescription>

-            Are you sure you want to delete this project? This action cannot be

-            undone.

-          </DialogDescription>

-        </DialogHeader>

-        <DialogFooter>

-          <Button

-            variant="outline"

-            onClick={(e) => {

-              e.preventDefault();

-              e.stopPropagation();

-              onOpenChange(false);

-            }}

-          >

-            Cancel

-          </Button>

-          <Button variant="destructive" onClick={onConfirm}>

-            Delete

-          </Button>

-        </DialogFooter>

-      </DialogContent>

-    </Dialog>

-  );

-}

+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export function DeleteProjectDialog({
+  isOpen,
+  onOpenChange,
+  onConfirm,
+  projectName,
+}: {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  projectName?: string;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {projectName ? (
+              <>
+                {"Delete '"}
+                <span className="inline-block max-w-[300px] truncate align-bottom">
+                  {projectName}
+                </span>
+                {"'?"}
+              </>
+            ) : (
+              "Delete Project?"
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this project? This action cannot be
+            undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOpenChange(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index f4e520b2..b05bee7e 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -69,7 +69,7 @@ export function TabBar() {
       />

       <div

         ref={scrollContainerRef}

-        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"

+        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full"

       >

         {(Object.keys(tabs) as Tab[]).map((tabKey) => {

           const tab = tabs[tabKey];

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 8cccd0e4..71b2cd26 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -1,470 +1,470 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "../ui/button";
-import {
-  MoreVertical,
-  Scissors,
-  Trash2,
-  SplitSquareHorizontal,
-  Music,
-  ChevronRight,
-  ChevronLeft,
-  Type,
-  Copy,
-  RefreshCw,
-} from "lucide-react";
-import { useMediaStore } from "@/stores/media-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import AudioWaveform from "./audio-waveform";
-import { toast } from "sonner";
-import { TimelineElementProps, TrackType } from "@/types/timeline";
-import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
-import {
-  getTrackElementClasses,
-  TIMELINE_CONSTANTS,
-  getTrackHeight,
-} from "@/constants/timeline-constants";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from "../ui/dropdown-menu";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "../ui/context-menu";
-
-export function TimelineElement({
-  element,
-  track,
-  zoomLevel,
-  isSelected,
-  onElementMouseDown,
-  onElementClick,
-}: TimelineElementProps) {
-  const { mediaItems } = useMediaStore();
-  const {
-    updateElementTrim,
-    updateElementDuration,
-    removeElementFromTrack,
-    dragState,
-    splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
-    addElementToTrack,
-    replaceElementMedia,
-  } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
-
-  const [elementMenuOpen, setElementMenuOpen] = useState(false);
-
-  const {
-    resizing,
-    isResizing,
-    handleResizeStart,
-    handleResizeMove,
-    handleResizeEnd,
-  } = useTimelineElementResize({
-    element,
-    track,
-    zoomLevel,
-    onUpdateTrim: updateElementTrim,
-    onUpdateDuration: updateElementDuration,
-  });
-
-  const effectiveDuration =
-    element.duration - element.trimStart - element.trimEnd;
-  const elementWidth = Math.max(
-    TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,
-    effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel
-  );
-
-  // Use real-time position during drag, otherwise use stored position
-  const isBeingDragged = dragState.elementId === element.id;
-  const elementStartTime =
-    isBeingDragged && dragState.isDragging
-      ? dragState.currentTime
-      : element.startTime;
-  const elementLeft = elementStartTime * 50 * zoomLevel;
-
-  const handleDeleteElement = () => {
-    removeElementFromTrack(track.id, element.id);
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitElement = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element to split");
-      return;
-    }
-
-    const secondElementId = splitElement(track.id, element.id, currentTime);
-    if (!secondElementId) {
-      toast.error("Failed to split element");
-    }
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitAndKeepLeft = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element");
-      return;
-    }
-
-    splitAndKeepLeft(track.id, element.id, currentTime);
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitAndKeepRight = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element");
-      return;
-    }
-
-    splitAndKeepRight(track.id, element.id, currentTime);
-    setElementMenuOpen(false);
-  };
-
-  const handleSeparateAudio = () => {
-    if (element.type !== "media") {
-      toast.error("Audio separation only available for media elements");
-      return;
-    }
-
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-    if (!mediaItem || mediaItem.type !== "video") {
-      toast.error("Audio separation only available for video elements");
-      return;
-    }
-
-    const audioElementId = separateAudio(track.id, element.id);
-    if (!audioElementId) {
-      toast.error("Failed to separate audio");
-    }
-    setElementMenuOpen(false);
-  };
-
-  const canSplitAtPlayhead = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    return currentTime > effectiveStart && currentTime < effectiveEnd;
-  };
-
-  const canSeparateAudio = () => {
-    if (element.type !== "media") return false;
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-    return mediaItem?.type === "video" && track.type === "media";
-  };
-
-  const handleElementSplitContext = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime > effectiveStart && currentTime < effectiveEnd) {
-      const secondElementId = splitElement(track.id, element.id, currentTime);
-      if (!secondElementId) {
-        toast.error("Failed to split element");
-      }
-    } else {
-      toast.error("Playhead must be within element to split");
-    }
-  };
-
-  const handleElementDuplicateContext = () => {
-    const { id, ...elementWithoutId } = element;
-    addElementToTrack(track.id, {
-      ...elementWithoutId,
-      name: element.name + " (copy)",
-      startTime:
-        element.startTime +
-        (element.duration - element.trimStart - element.trimEnd) +
-        0.1,
-    });
-  };
-
-  const handleElementDeleteContext = () => {
-    removeElementFromTrack(track.id, element.id);
-  };
-
-  const handleReplaceClip = () => {
-    if (element.type !== "media") {
-      toast.error("Replace is only available for media clips");
-      return;
-    }
-
-    // Create a file input to select replacement media
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "video/*,audio/*,image/*";
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) return;
-
-      try {
-        const success = await replaceElementMedia(track.id, element.id, file);
-        if (success) {
-          toast.success("Clip replaced successfully");
-        } else {
-          toast.error("Failed to replace clip");
-        }
-      } catch (error) {
-        toast.error("Failed to replace clip");
-        console.log(
-          JSON.stringify({ error: "Failed to replace clip", details: error })
-        );
-      }
-    };
-    input.click();
-  };
-
-  const renderElementContent = () => {
-    if (element.type === "text") {
-      return (
-        <div className="w-full h-full flex items-center justify-start pl-2">
-          <span className="text-xs text-foreground/80 truncate">
-            {element.content}
-          </span>
-        </div>
-      );
-    }
-
-    // Render media element ->
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-    if (!mediaItem) {
-      return (
-        <span className="text-xs text-foreground/80 truncate">
-          {element.name}
-        </span>
-      );
-    }
-
-    const TILE_ASPECT_RATIO = 16 / 9;
-
-    if (mediaItem.type === "image") {
-      // Calculate tile size based on 16:9 aspect ratio
-      const trackHeight = getTrackHeight(track.type);
-      const tileHeight = trackHeight - 8; // Account for padding
-      const tileWidth = tileHeight * TILE_ASPECT_RATIO;
-
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <div className="bg-[#004D52] py-3 w-full h-full relative">
-            {/* Background with tiled images */}
-            <div
-              className="absolute top-3 bottom-3 left-0 right-0"
-              style={{
-                backgroundImage: mediaItem.url
-                  ? `url(${mediaItem.url})`
-                  : "none",
-                backgroundRepeat: "repeat-x",
-                backgroundSize: `${tileWidth}px ${tileHeight}px`,
-                backgroundPosition: "left center",
-                pointerEvents: "none",
-              }}
-              aria-label={`Tiled background of ${mediaItem.name}`}
-            />
-            {/* Overlay with vertical borders */}
-            <div
-              className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
-              style={{
-                backgroundImage: `repeating-linear-gradient(
-                  to right,
-                  transparent 0px,
-                  transparent ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth}px
-                )`,
-                backgroundPosition: "left center",
-              }}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    const VIDEO_TILE_PADDING = 16;
-    const OVERLAY_SPACE_MULTIPLIER = 1.5;
-
-    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
-      const trackHeight = getTrackHeight(track.type);
-      const tileHeight = trackHeight - VIDEO_TILE_PADDING;
-      const tileWidth = tileHeight * TILE_ASPECT_RATIO;
-
-      return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="flex-1 h-full relative overflow-hidden">
-            {/* Background with tiled thumbnails */}
-            <div
-              className="absolute inset-0"
-              style={{
-                backgroundImage: mediaItem.thumbnailUrl
-                  ? `url(${mediaItem.thumbnailUrl})`
-                  : "none",
-                backgroundRepeat: "repeat-x",
-                backgroundSize: `${tileWidth}px ${tileHeight}px`,
-                backgroundPosition: "left center",
-                pointerEvents: "none",
-              }}
-              aria-label={`Tiled thumbnail of ${mediaItem.name}`}
-            />
-            {/* Overlay with vertical borders */}
-            <div
-              className="absolute inset-0 pointer-events-none"
-              style={{
-                backgroundImage: `repeating-linear-gradient(
-                  to right,
-                  transparent 0px,
-                  transparent ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth}px
-                )`,
-                backgroundPosition: "left center",
-              }}
-            />
-          </div>
-          {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (
-            <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
-              {element.name}
-            </div>
-          ) : (
-            <span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">
-              {element.name}
-            </span>
-          )}
-        </div>
-      );
-    }
-
-    // Render audio element ->
-    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>
-      );
-    }
-
-    return (
-      <span className="text-xs text-foreground/80 truncate">
-        {element.name}
-      </span>
-    );
-  };
-
-  const handleElementMouseDown = (e: React.MouseEvent) => {
-    if (onElementMouseDown) {
-      onElementMouseDown(e, element);
-    }
-  };
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <div
-          className={`absolute top-0 h-full select-none timeline-element ${
-            isBeingDragged ? "z-50" : "z-10"
-          }`}
-          style={{
-            left: `${elementLeft}px`,
-            width: `${elementWidth}px`,
-          }}
-          data-element-id={element.id}
-          data-track-id={track.id}
-          onMouseMove={resizing ? handleResizeMove : undefined}
-          onMouseUp={resizing ? handleResizeEnd : undefined}
-          onMouseLeave={resizing ? handleResizeEnd : undefined}
-        >
-          <div
-            className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
-              track.type
-            )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
-              isBeingDragged ? "z-50" : "z-10"
-            }`}
-            onClick={(e) => onElementClick && onElementClick(e, element)}
-            onMouseDown={handleElementMouseDown}
-            onContextMenu={(e) =>
-              onElementMouseDown && onElementMouseDown(e, element)
-            }
-          >
-            <div className="absolute inset-0 flex items-center h-full">
-              {renderElementContent()}
-            </div>
-
-            {isSelected && (
-              <>
-                <div
-                  className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
-                  onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
-                />
-                <div
-                  className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
-                  onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
-                />
-              </>
-            )}
-          </div>
-        </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onClick={handleElementSplitContext}>
-          <Scissors className="h-4 w-4 mr-2" />
-          Split at playhead
-        </ContextMenuItem>
-        <ContextMenuItem onClick={handleElementDuplicateContext}>
-          <Copy className="h-4 w-4 mr-2" />
-          Duplicate {element.type === "text" ? "text" : "clip"}
-        </ContextMenuItem>
-        {element.type === "media" && (
-          <ContextMenuItem onClick={handleReplaceClip}>
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Replace clip
-          </ContextMenuItem>
-        )}
-        <ContextMenuSeparator />
-        <ContextMenuItem
-          onClick={handleElementDeleteContext}
-          className="text-destructive focus:text-destructive"
-        >
-          <Trash2 className="h-4 w-4 mr-2" />
-          Delete {element.type === "text" ? "text" : "clip"}
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}
+"use client";

+

+import { useState } from "react";

+import { Button } from "../ui/button";

+import {

+  MoreVertical,

+  Scissors,

+  Trash2,

+  SplitSquareHorizontal,

+  Music,

+  ChevronRight,

+  ChevronLeft,

+  Type,

+  Copy,

+  RefreshCw,

+} from "lucide-react";

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

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

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

+import AudioWaveform from "./audio-waveform";

+import { toast } from "sonner";

+import { TimelineElementProps, TrackType } from "@/types/timeline";

+import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";

+import {

+  getTrackElementClasses,

+  TIMELINE_CONSTANTS,

+  getTrackHeight,

+} from "@/constants/timeline-constants";

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuSeparator,

+  DropdownMenuTrigger,

+  DropdownMenuSub,

+  DropdownMenuSubContent,

+  DropdownMenuSubTrigger,

+} from "../ui/dropdown-menu";

+import {

+  ContextMenu,

+  ContextMenuContent,

+  ContextMenuItem,

+  ContextMenuSeparator,

+  ContextMenuTrigger,

+} from "../ui/context-menu";

+

+export function TimelineElement({

+  element,

+  track,

+  zoomLevel,

+  isSelected,

+  onElementMouseDown,

+  onElementClick,

+}: TimelineElementProps) {

+  const { mediaItems } = useMediaStore();

+  const {

+    updateElementTrim,

+    updateElementDuration,

+    removeElementFromTrack,

+    dragState,

+    splitElement,

+    splitAndKeepLeft,

+    splitAndKeepRight,

+    separateAudio,

+    addElementToTrack,

+    replaceElementMedia,

+  } = useTimelineStore();

+  const { currentTime } = usePlaybackStore();

+

+  const [elementMenuOpen, setElementMenuOpen] = useState(false);

+

+  const {

+    resizing,

+    isResizing,

+    handleResizeStart,

+    handleResizeMove,

+    handleResizeEnd,

+  } = useTimelineElementResize({

+    element,

+    track,

+    zoomLevel,

+    onUpdateTrim: updateElementTrim,

+    onUpdateDuration: updateElementDuration,

+  });

+

+  const effectiveDuration =

+    element.duration - element.trimStart - element.trimEnd;

+  const elementWidth = Math.max(

+    TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,

+    effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel

+  );

+

+  // Use real-time position during drag, otherwise use stored position

+  const isBeingDragged = dragState.elementId === element.id;

+  const elementStartTime =

+    isBeingDragged && dragState.isDragging

+      ? dragState.currentTime

+      : element.startTime;

+  const elementLeft = elementStartTime * 50 * zoomLevel;

+

+  const handleDeleteElement = () => {

+    removeElementFromTrack(track.id, element.id);

+    setElementMenuOpen(false);

+  };

+

+  const handleSplitElement = () => {

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+

+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {

+      toast.error("Playhead must be within element to split");

+      return;

+    }

+

+    const secondElementId = splitElement(track.id, element.id, currentTime);

+    if (!secondElementId) {

+      toast.error("Failed to split element");

+    }

+    setElementMenuOpen(false);

+  };

+

+  const handleSplitAndKeepLeft = () => {

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+

+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {

+      toast.error("Playhead must be within element");

+      return;

+    }

+

+    splitAndKeepLeft(track.id, element.id, currentTime);

+    setElementMenuOpen(false);

+  };

+

+  const handleSplitAndKeepRight = () => {

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+

+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {

+      toast.error("Playhead must be within element");

+      return;

+    }

+

+    splitAndKeepRight(track.id, element.id, currentTime);

+    setElementMenuOpen(false);

+  };

+

+  const handleSeparateAudio = () => {

+    if (element.type !== "media") {

+      toast.error("Audio separation only available for media elements");

+      return;

+    }

+

+    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);

+    if (!mediaItem || mediaItem.type !== "video") {

+      toast.error("Audio separation only available for video elements");

+      return;

+    }

+

+    const audioElementId = separateAudio(track.id, element.id);

+    if (!audioElementId) {

+      toast.error("Failed to separate audio");

+    }

+    setElementMenuOpen(false);

+  };

+

+  const canSplitAtPlayhead = () => {

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+    return currentTime > effectiveStart && currentTime < effectiveEnd;

+  };

+

+  const canSeparateAudio = () => {

+    if (element.type !== "media") return false;

+    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);

+    return mediaItem?.type === "video" && track.type === "media";

+  };

+

+  const handleElementSplitContext = () => {

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+

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

+      const secondElementId = splitElement(track.id, element.id, currentTime);

+      if (!secondElementId) {

+        toast.error("Failed to split element");

+      }

+    } else {

+      toast.error("Playhead must be within element to split");

+    }

+  };

+

+  const handleElementDuplicateContext = () => {

+    const { id, ...elementWithoutId } = element;

+    addElementToTrack(track.id, {

+      ...elementWithoutId,

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

+      startTime:

+        element.startTime +

+        (element.duration - element.trimStart - element.trimEnd) +

+        0.1,

+    });

+  };

+

+  const handleElementDeleteContext = () => {

+    removeElementFromTrack(track.id, element.id);

+  };

+

+  const handleReplaceClip = () => {

+    if (element.type !== "media") {

+      toast.error("Replace is only available for media clips");

+      return;

+    }

+

+    // Create a file input to select replacement media

+    const input = document.createElement("input");

+    input.type = "file";

+    input.accept = "video/*,audio/*,image/*";

+    input.onchange = async (e) => {

+      const file = (e.target as HTMLInputElement).files?.[0];

+      if (!file) return;

+

+      try {

+        const success = await replaceElementMedia(track.id, element.id, file);

+        if (success) {

+          toast.success("Clip replaced successfully");

+        } else {

+          toast.error("Failed to replace clip");

+        }

+      } catch (error) {

+        toast.error("Failed to replace clip");

+        console.log(

+          JSON.stringify({ error: "Failed to replace clip", details: error })

+        );

+      }

+    };

+    input.click();

+  };

+

+  const renderElementContent = () => {

+    if (element.type === "text") {

+      return (

+        <div className="w-full h-full flex items-center justify-start pl-2">

+          <span className="text-xs text-foreground/80 truncate">

+            {element.content}

+          </span>

+        </div>

+      );

+    }

+

+    // Render media element ->

+    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);

+    if (!mediaItem) {

+      return (

+        <span className="text-xs text-foreground/80 truncate">

+          {element.name}

+        </span>

+      );

+    }

+

+    const TILE_ASPECT_RATIO = 16 / 9;

+

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

+      // Calculate tile size based on 16:9 aspect ratio

+      const trackHeight = getTrackHeight(track.type);

+      const tileHeight = trackHeight - 8; // Account for padding

+      const tileWidth = tileHeight * TILE_ASPECT_RATIO;

+

+      return (

+        <div className="w-full h-full flex items-center justify-center">

+          <div className="bg-[#004D52] py-3 w-full h-full relative">

+            {/* Background with tiled images */}

+            <div

+              className="absolute top-3 bottom-3 left-0 right-0"

+              style={{

+                backgroundImage: mediaItem.url

+                  ? `url(${mediaItem.url})`

+                  : "none",

+                backgroundRepeat: "repeat-x",

+                backgroundSize: `${tileWidth}px ${tileHeight}px`,

+                backgroundPosition: "left center",

+                pointerEvents: "none",

+              }}

+              aria-label={`Tiled background of ${mediaItem.name}`}

+            />

+            {/* Overlay with vertical borders */}

+            <div

+              className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"

+              style={{

+                backgroundImage: `repeating-linear-gradient(

+                  to right,

+                  transparent 0px,

+                  transparent ${tileWidth - 1}px,

+                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,

+                  rgba(255, 255, 255, 0.6) ${tileWidth}px

+                )`,

+                backgroundPosition: "left center",

+              }}

+            />

+          </div>

+        </div>

+      );

+    }

+

+    const VIDEO_TILE_PADDING = 16;

+    const OVERLAY_SPACE_MULTIPLIER = 1.5;

+

+    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {

+      const trackHeight = getTrackHeight(track.type);

+      const tileHeight = trackHeight - VIDEO_TILE_PADDING;

+      const tileWidth = tileHeight * TILE_ASPECT_RATIO;

+

+      return (

+        <div className="w-full h-full flex items-center gap-2">

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

+            {/* Background with tiled thumbnails */}

+            <div

+              className="absolute inset-0"

+              style={{

+                backgroundImage: mediaItem.thumbnailUrl

+                  ? `url(${mediaItem.thumbnailUrl})`

+                  : "none",

+                backgroundRepeat: "repeat-x",

+                backgroundSize: `${tileWidth}px ${tileHeight}px`,

+                backgroundPosition: "left center",

+                pointerEvents: "none",

+              }}

+              aria-label={`Tiled thumbnail of ${mediaItem.name}`}

+            />

+            {/* Overlay with vertical borders */}

+            <div

+              className="absolute inset-0 pointer-events-none"

+              style={{

+                backgroundImage: `repeating-linear-gradient(

+                  to right,

+                  transparent 0px,

+                  transparent ${tileWidth - 1}px,

+                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,

+                  rgba(255, 255, 255, 0.6) ${tileWidth}px

+                )`,

+                backgroundPosition: "left center",

+              }}

+            />

+          </div>

+          {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (

+            <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">

+              {element.name}

+            </div>

+          ) : (

+            <span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">

+              {element.name}

+            </span>

+          )}

+        </div>

+      );

+    }

+

+    // Render audio element ->

+    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>

+      );

+    }

+

+    return (

+      <span className="text-xs text-foreground/80 truncate">

+        {element.name}

+      </span>

+    );

+  };

+

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

+    if (onElementMouseDown) {

+      onElementMouseDown(e, element);

+    }

+  };

+

+  return (

+    <ContextMenu>

+      <ContextMenuTrigger asChild>

+        <div

+          className={`absolute top-0 h-full select-none timeline-element ${

+            isBeingDragged ? "z-50" : "z-10"

+          }`}

+          style={{

+            left: `${elementLeft}px`,

+            width: `${elementWidth}px`,

+          }}

+          data-element-id={element.id}

+          data-track-id={track.id}

+          onMouseMove={resizing ? handleResizeMove : undefined}

+          onMouseUp={resizing ? handleResizeEnd : undefined}

+          onMouseLeave={resizing ? handleResizeEnd : undefined}

+        >

+          <div

+            className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(

+              track.type

+            )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${

+              isBeingDragged ? "z-50" : "z-10"

+            }`}

+            onClick={(e) => onElementClick && onElementClick(e, element)}

+            onMouseDown={handleElementMouseDown}

+            onContextMenu={(e) =>

+              onElementMouseDown && onElementMouseDown(e, element)

+            }

+          >

+            <div className="absolute inset-0 flex items-center h-full">

+              {renderElementContent()}

+            </div>

+

+            {isSelected && (

+              <>

+                <div

+                  className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"

+                  onMouseDown={(e) => handleResizeStart(e, element.id, "left")}

+                />

+                <div

+                  className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"

+                  onMouseDown={(e) => handleResizeStart(e, element.id, "right")}

+                />

+              </>

+            )}

+          </div>

+        </div>

+      </ContextMenuTrigger>

+      <ContextMenuContent>

+        <ContextMenuItem onClick={handleElementSplitContext}>

+          <Scissors className="h-4 w-4 mr-2" />

+          Split at playhead

+        </ContextMenuItem>

+        <ContextMenuItem onClick={handleElementDuplicateContext}>

+          <Copy className="h-4 w-4 mr-2" />

+          Duplicate {element.type === "text" ? "text" : "clip"}

+        </ContextMenuItem>

+        {element.type === "media" && (

+          <ContextMenuItem onClick={handleReplaceClip}>

+            <RefreshCw className="h-4 w-4 mr-2" />

+            Replace clip

+          </ContextMenuItem>

+        )}

+        <ContextMenuSeparator />

+        <ContextMenuItem

+          onClick={handleElementDeleteContext}

+          className="text-destructive focus:text-destructive"

+        >

+          <Trash2 className="h-4 w-4 mr-2" />

+          Delete {element.type === "text" ? "text" : "clip"}

+        </ContextMenuItem>

+      </ContextMenuContent>

+    </ContextMenu>

+  );

+}

diff --git a/apps/web/src/components/editor/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline-toolbar.tsx
deleted file mode 100644
index e887efa0..00000000
--- a/apps/web/src/components/editor/timeline-toolbar.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-"use client";

-

-import type { TrackType } from "@/types/timeline";

-import {

-  ArrowLeftToLine,

-  ArrowRightToLine,

-  Copy,

-  Pause,

-  Play,

-  Scissors,

-  Snowflake,

-  SplitSquareHorizontal,

-  Trash2,

-} from "lucide-react";

-import { Button } from "../ui/button";

-import {

-  Select,

-  SelectContent,

-  SelectItem,

-  SelectTrigger,

-  SelectValue,

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

-import {

-  Tooltip,

-  TooltipContent,

-  TooltipProvider,

-  TooltipTrigger,

-} from "../ui/tooltip";

-

-interface TimelineToolbarProps {

-  isPlaying: boolean;

-  currentTime: number;

-  duration: number;

-  speed: number;

-  tracks: any[];

-  toggle: () => void;

-  setSpeed: (speed: number) => void;

-  addTrack: (type: TrackType) => string;

-  addClipToTrack: (trackId: string, clip: any) => void;

-  handleSplitSelected: () => void;

-  handleDuplicateSelected: () => void;

-  handleFreezeSelected: () => void;

-  handleDeleteSelected: () => void;

-}

-

-export function TimelineToolbar({

-  isPlaying,

-  currentTime,

-  duration,

-  speed,

-  tracks,

-  toggle,

-  setSpeed,

-  addTrack,

-  addClipToTrack,

-  handleSplitSelected,

-  handleDuplicateSelected,

-  handleFreezeSelected,

-  handleDeleteSelected,

-}: TimelineToolbarProps) {

-  return (

-    <div className="border-b flex items-center px-2 py-1 gap-1">

-      <TooltipProvider delayDuration={500}>

-        {/* Play/Pause Button */}

-        <Tooltip>

-          <TooltipTrigger asChild>

-            <Button

-              variant="text"

-              size="icon"

-              onClick={toggle}

-              className="mr-2"

-            >

-              {isPlaying ? (

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

-              ) : (

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

-              )}

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>

-            {isPlaying ? "Pause (Space)" : "Play (Space)"}

-          </TooltipContent>

-        </Tooltip>

-

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

-

-        {/* Time Display */}

-        <div

-          className="text-xs text-muted-foreground font-mono px-2"

-          style={{ minWidth: "18ch", textAlign: "center" }}

-        >

-          {currentTime.toFixed(1)}s / {duration.toFixed(1)}s

-        </div>

-

-        {/* Test Clip Button - for debugging */}

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

-          <>

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

-            <Tooltip>

-              <TooltipTrigger asChild>

-                <Button

-                  variant="outline"

-                  size="sm"

-                  onClick={() => {

-                    const trackId = addTrack("media");

-                    addClipToTrack(trackId, {

-                      mediaId: "test",

-                      name: "Test Clip",

-                      duration: 5,

-                      startTime: 0,

-                      trimStart: 0,

-                      trimEnd: 0,

-                    });

-                  }}

-                  className="text-xs"

-                >

-                  Add Test Clip

-                </Button>

-              </TooltipTrigger>

-              <TooltipContent>Add a test clip to try playback</TooltipContent>

-            </Tooltip>

-          </>

-        )}

-

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

-

-        <Tooltip>

-          <TooltipTrigger asChild>

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

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Split clip (S)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

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

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Split and keep left (A)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

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

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Split and keep right (D)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

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

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Separate audio (E)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

-            <Button

-              variant="text"

-              size="icon"

-              onClick={handleDuplicateSelected}

-            >

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Duplicate clip (Ctrl+D)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

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

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

-            </Button>

-          </TooltipTrigger>

-          <TooltipContent>Freeze frame (F)</TooltipContent>

-        </Tooltip>

-

-        <Tooltip>

-          <TooltipTrigger asChild>

-            <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>

-  );

-}

diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline-track.tsx
index 91b3ffa3..2aa1c2b0 100644
--- a/apps/web/src/components/editor/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline-track.tsx
@@ -1,1097 +1,1097 @@
-"use client";
-
-import { useRef, useState, useEffect } from "react";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { toast } from "sonner";
-import { TimelineElement } from "./timeline-element";
-import {
-  TimelineTrack,
-  sortTracksByOrder,
-  ensureMainTrack,
-  getMainTrack,
-  canElementGoOnTrack,
-} from "@/types/timeline";
-import { usePlaybackStore } from "@/stores/playback-store";
-import type {
-  TimelineElement as TimelineElementType,
-  DragData,
-} from "@/types/timeline";
-import {
-  snapTimeToFrame,
-  TIMELINE_CONSTANTS,
-} from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
-
-export function TimelineTrackContent({
-  track,
-  zoomLevel,
-  onSnapPointChange,
-}: {
-  track: TimelineTrack;
-  zoomLevel: number;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-}) {
-  const { mediaItems } = useMediaStore();
-  const {
-    tracks,
-    addTrack,
-    moveElementToTrack,
-    updateElementStartTime,
-    addElementToTrack,
-    selectedElements,
-    selectElement,
-    dragState,
-    startDrag: startDragAction,
-    updateDragTime,
-    endDrag: endDragAction,
-    clearSelectedElements,
-    insertTrackAt,
-    snappingEnabled,
-  } = useTimelineStore();
-
-  const { currentTime } = usePlaybackStore();
-
-  // Initialize snapping hook
-  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({
-    snapThreshold: 10,
-    enableElementSnapping: snappingEnabled,
-    enablePlayheadSnapping: snappingEnabled,
-  });
-
-  // Helper function for drop snapping that tries both edges
-  const getDropSnappedTime = (
-    dropTime: number,
-    elementDuration: number,
-    excludeElementId?: string
-  ) => {
-    if (!snappingEnabled) {
-      // Use frame snapping if project has FPS, otherwise use decimal snapping
-      const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
-      return snapTimeToFrame(dropTime, projectFps);
-    }
-
-    // Try snapping both start and end edges for drops
-    const startSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      true // snap to start edge
-    );
-
-    const endSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      false // snap to end edge
-    );
-
-    // Choose the snap result with the smaller distance (closer snap)
-    let bestSnapResult = startSnapResult;
-    if (
-      endSnapResult.snapPoint &&
-      (!startSnapResult.snapPoint ||
-        endSnapResult.snapDistance < startSnapResult.snapDistance)
-    ) {
-      bestSnapResult = endSnapResult;
-    }
-
-    return bestSnapResult.snappedTime;
-  };
-
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const [isDropping, setIsDropping] = useState(false);
-  const [dropPosition, setDropPosition] = useState<number | null>(null);
-  const [wouldOverlap, setWouldOverlap] = useState(false);
-  const dragCounterRef = useRef(0);
-  const [mouseDownLocation, setMouseDownLocation] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-
-  // Set up mouse event listeners for drag
-  useEffect(() => {
-    if (!dragState.isDragging) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!timelineRef.current) return;
-
-      // On first mouse move during drag, ensure the element is selected
-      if (dragState.elementId && dragState.trackId) {
-        const isSelected = selectedElements.some(
-          (c) =>
-            c.trackId === dragState.trackId &&
-            c.elementId === dragState.elementId
-        );
-
-        if (!isSelected) {
-          // Select this element (replacing other selections) since we're dragging it
-          selectElement(dragState.trackId, dragState.elementId, false);
-        }
-      }
-
-      const timelineRect = timelineRef.current.getBoundingClientRect();
-      const mouseX = e.clientX - timelineRect.left;
-      const mouseTime = Math.max(
-        0,
-        mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-      );
-      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
-
-      // Apply snapping if enabled
-      let finalTime = adjustedTime;
-      let snapPoint = null;
-      if (snappingEnabled) {
-        // Find the element being dragged to get its duration
-        let elementDuration = 5; // fallback duration
-        if (dragState.elementId && dragState.trackId) {
-          const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-          const element = sourceTrack?.elements.find(
-            (e) => e.id === dragState.elementId
-          );
-          if (element) {
-            elementDuration =
-              element.duration - element.trimStart - element.trimEnd;
-          }
-        }
-
-        // Try snapping both start and end edges
-        const startSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          true // snap to start edge
-        );
-
-        const endSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          false // snap to end edge
-        );
-
-        // Choose the snap result with the smaller distance (closer snap)
-        let bestSnapResult = startSnapResult;
-        if (
-          endSnapResult.snapPoint &&
-          (!startSnapResult.snapPoint ||
-            endSnapResult.snapDistance < startSnapResult.snapDistance)
-        ) {
-          bestSnapResult = endSnapResult;
-        }
-
-        finalTime = bestSnapResult.snappedTime;
-        snapPoint = bestSnapResult.snapPoint;
-
-        // Notify parent component about snap point change
-        onSnapPointChange?.(snapPoint);
-      } else {
-        // Use frame snapping if project has FPS, otherwise use decimal snapping
-        const projectStore = useProjectStore.getState();
-        const projectFps = projectStore.activeProject?.fps || 30;
-        finalTime = snapTimeToFrame(adjustedTime, projectFps);
-
-        // Clear snap point when not snapping
-        onSnapPointChange?.(null);
-      }
-
-      updateDragTime(finalTime);
-    };
-
-    const handleMouseUp = (e: MouseEvent) => {
-      if (!dragState.elementId || !dragState.trackId) return;
-
-      // If this track initiated the drag, we should handle the mouse up regardless of where it occurs
-      const isTrackThatStartedDrag = dragState.trackId === track.id;
-
-      const timelineRect = timelineRef.current?.getBoundingClientRect();
-      if (!timelineRect) {
-        if (isTrackThatStartedDrag) {
-          updateElementStartTime(
-            track.id,
-            dragState.elementId,
-            dragState.currentTime
-          );
-          endDragAction();
-          // Clear snap point when drag ends
-          onSnapPointChange?.(null);
-        }
-        return;
-      }
-
-      const isMouseOverThisTrack =
-        e.clientY >= timelineRect.top && e.clientY <= timelineRect.bottom;
-
-      if (!isMouseOverThisTrack && !isTrackThatStartedDrag) return;
-
-      const finalTime = dragState.currentTime;
-
-      if (isMouseOverThisTrack) {
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const targetTrack = tracks.find((t) => t.id === track.id);
-          const hasOverlap = targetTrack?.elements.some((existingElement) => {
-            if (
-              dragState.trackId === track.id &&
-              existingElement.id === dragState.elementId
-            ) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            if (dragState.trackId === track.id) {
-              updateElementStartTime(track.id, dragState.elementId, finalTime);
-            } else {
-              moveElementToTrack(
-                dragState.trackId,
-                track.id,
-                dragState.elementId
-              );
-              requestAnimationFrame(() => {
-                updateElementStartTime(
-                  track.id,
-                  dragState.elementId!,
-                  finalTime
-                );
-              });
-            }
-          }
-        }
-      } else if (isTrackThatStartedDrag) {
-        // Mouse is not over this track, but this track started the drag
-        // This means user released over ruler/outside - update position within same track
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const hasOverlap = track.elements.some((existingElement) => {
-            if (existingElement.id === dragState.elementId) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            updateElementStartTime(track.id, dragState.elementId, finalTime);
-          }
-        }
-      }
-
-      if (isTrackThatStartedDrag) {
-        endDragAction();
-        // Clear snap point when drag ends
-        onSnapPointChange?.(null);
-      }
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [
-    dragState.isDragging,
-    dragState.clickOffsetTime,
-    dragState.elementId,
-    dragState.trackId,
-    dragState.currentTime,
-    zoomLevel,
-    tracks,
-    track.id,
-    updateDragTime,
-    updateElementStartTime,
-    moveElementToTrack,
-    endDragAction,
-    selectedElements,
-    selectElement,
-    onSnapPointChange,
-  ]);
-
-  const handleElementMouseDown = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    setMouseDownLocation({ x: e.clientX, y: e.clientY });
-
-    // Detect right-click (button 2) and handle selection without starting drag
-    const isRightClick = e.button === 2;
-    const isMultiSelect = e.metaKey || e.ctrlKey || e.shiftKey;
-
-    if (isRightClick) {
-      // Handle right-click selection
-      const isSelected = selectedElements.some(
-        (c) => c.trackId === track.id && c.elementId === element.id
-      );
-
-      // If element is not selected, select it (keep other selections if multi-select)
-      if (!isSelected) {
-        selectElement(track.id, element.id, isMultiSelect);
-      }
-      // If element is already selected, keep it selected
-
-      // Don't start drag action for right-clicks
-      return;
-    }
-
-    // Handle multi-selection for left-click with modifiers
-    if (isMultiSelect) {
-      selectElement(track.id, element.id, true);
-    }
-
-    // Calculate the offset from the left edge of the element to where the user clicked
-    const elementElement = e.currentTarget as HTMLElement;
-    const elementRect = elementElement.getBoundingClientRect();
-    const clickOffsetX = e.clientX - elementRect.left;
-    const clickOffsetTime =
-      clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-
-    startDragAction(
-      element.id,
-      track.id,
-      e.clientX,
-      element.startTime,
-      clickOffsetTime
-    );
-  };
-
-  const handleElementClick = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    e.stopPropagation();
-
-    // Check if mouse moved significantly
-    if (mouseDownLocation) {
-      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
-      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
-      // If it moved more than a few pixels, consider it a drag and not a click.
-      if (deltaX > 5 || deltaY > 5) {
-        setMouseDownLocation(null); // Reset for next interaction
-        return;
-      }
-    }
-
-    // Skip selection logic for multi-selection (handled in mousedown)
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      return;
-    }
-
-    // Handle single selection
-    const isSelected = selectedElements.some(
-      (c) => c.trackId === track.id && c.elementId === element.id
-    );
-
-    if (!isSelected) {
-      // If element is not selected, select it (replacing other selections)
-      selectElement(track.id, element.id, false);
-    }
-    // If element is already selected, keep it selected (do nothing)
-  };
-
-  const handleTrackDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Handle both timeline elements and media items
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    // Calculate drop position for overlap checking
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    let dropTime = 0;
-    if (trackContainer) {
-      const rect = trackContainer.getBoundingClientRect();
-      const mouseX = Math.max(0, e.clientX - rect.left);
-      dropTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    }
-
-    // Check for potential overlaps and show appropriate feedback
-    let wouldOverlap = false;
-
-    if (hasMediaItem) {
-      try {
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (mediaItemData) {
-          const dragData: DragData = JSON.parse(mediaItemData);
-
-          if (dragData.type === "text") {
-            // Text elements have default duration of 5 seconds
-            const newElementDuration = 5;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              newElementDuration
-            );
-            const newElementEnd = snappedTime + newElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return snappedTime < existingEnd && newElementEnd > existingStart;
-            });
-          } else {
-            // Media elements
-            const mediaItem = mediaItems.find(
-              (item) => item.id === dragData.id
-            );
-            if (mediaItem) {
-              const newElementDuration = mediaItem.duration || 5;
-              const snappedTime = getDropSnappedTime(
-                dropTime,
-                newElementDuration
-              );
-              const newElementEnd = snappedTime + newElementDuration;
-
-              wouldOverlap = track.elements.some((existingElement) => {
-                const existingStart = existingElement.startTime;
-                const existingEnd =
-                  existingElement.startTime +
-                  (existingElement.duration -
-                    existingElement.trimStart -
-                    existingElement.trimEnd);
-                return (
-                  snappedTime < existingEnd && newElementEnd > existingStart
-                );
-              });
-            }
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    } else if (hasTimelineElement) {
-      try {
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (timelineElementData) {
-          const { elementId, trackId: fromTrackId } =
-            JSON.parse(timelineElementData);
-          const sourceTrack = tracks.find(
-            (t: TimelineTrack) => t.id === fromTrackId
-          );
-          const movingElement = sourceTrack?.elements.find(
-            (c: any) => c.id === elementId
-          );
-
-          if (movingElement) {
-            const movingElementDuration =
-              movingElement.duration -
-              movingElement.trimStart -
-              movingElement.trimEnd;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              movingElementDuration,
-              elementId
-            );
-            const movingElementEnd = snappedTime + movingElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              if (fromTrackId === track.id && existingElement.id === elementId)
-                return false;
-
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return (
-                snappedTime < existingEnd && movingElementEnd > existingStart
-              );
-            });
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    }
-
-    if (wouldOverlap) {
-      e.dataTransfer.dropEffect = "none";
-      setWouldOverlap(true);
-      // Use default duration for position indicator
-      setDropPosition(getDropSnappedTime(dropTime, 5));
-      return;
-    }
-
-    e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";
-    setWouldOverlap(false);
-    // Use default duration for position indicator
-    setDropPosition(getDropSnappedTime(dropTime, 5));
-  };
-
-  const handleTrackDragEnter = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current++;
-    setIsDropping(true);
-  };
-
-  const handleTrackDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current--;
-
-    if (dragCounterRef.current === 0) {
-      setIsDropping(false);
-      setWouldOverlap(false);
-      setDropPosition(null);
-    }
-  };
-
-  const handleTrackDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Debug logging
-    console.log(
-      JSON.stringify({
-        message: "Drop event started in timeline track",
-        dataTransferTypes: Array.from(e.dataTransfer.types),
-        trackId: track.id,
-        trackType: track.type,
-      })
-    );
-
-    // Reset all drag states
-    dragCounterRef.current = 0;
-    setIsDropping(false);
-    setWouldOverlap(false);
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    if (!trackContainer) return;
-
-    const rect = trackContainer.getBoundingClientRect();
-    const mouseX = Math.max(0, e.clientX - rect.left);
-    const mouseY = e.clientY - rect.top; // Get Y position relative to this track
-    const newStartTime =
-      mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
-    const snappedTime = snapTimeToFrame(newStartTime, projectFps);
-
-    // Calculate drop position relative to tracks
-    const currentTrackIndex = tracks.findIndex((t) => t.id === track.id);
-
-    // Determine drop zone within the track (top 20px, middle 20px, bottom 20px)
-    let dropPosition: "above" | "on" | "below";
-    if (mouseY < 20) {
-      dropPosition = "above";
-    } else if (mouseY > 40) {
-      dropPosition = "below";
-    } else {
-      dropPosition = "on";
-    }
-
-    try {
-      if (hasTimelineElement) {
-        // Handle timeline element movement
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (!timelineElementData) return;
-
-        const {
-          elementId,
-          trackId: fromTrackId,
-          clickOffsetTime = 0,
-        } = JSON.parse(timelineElementData);
-
-        // Find the element being moved
-        const sourceTrack = tracks.find(
-          (t: TimelineTrack) => t.id === fromTrackId
-        );
-        const movingElement = sourceTrack?.elements.find(
-          (c: TimelineElementType) => c.id === elementId
-        );
-
-        if (!movingElement) {
-          toast.error("Element not found");
-          return;
-        }
-
-        // Check for overlaps with existing elements (excluding the moving element itself)
-        const movingElementDuration =
-          movingElement.duration -
-          movingElement.trimStart -
-          movingElement.trimEnd;
-
-        // Adjust position based on where user clicked on the element
-        const adjustedStartTime = newStartTime - clickOffsetTime;
-        const snappedStartTime = getDropSnappedTime(
-          adjustedStartTime,
-          movingElementDuration,
-          elementId
-        );
-        const finalStartTime = Math.max(0, snappedStartTime);
-        const movingElementEnd = finalStartTime + movingElementDuration;
-
-        const hasOverlap = track.elements.some((existingElement) => {
-          // Skip the element being moved if it's on the same track
-          if (fromTrackId === track.id && existingElement.id === elementId)
-            return false;
-
-          const existingStart = existingElement.startTime;
-          const existingEnd =
-            existingElement.startTime +
-            (existingElement.duration -
-              existingElement.trimStart -
-              existingElement.trimEnd);
-
-          // Check if elements overlap
-          return (
-            finalStartTime < existingEnd && movingElementEnd > existingStart
-          );
-        });
-
-        if (hasOverlap) {
-          toast.error(
-            "Cannot move element here - it would overlap with existing elements"
-          );
-          return;
-        }
-
-        if (fromTrackId === track.id) {
-          // Moving within same track
-          updateElementStartTime(track.id, elementId, finalStartTime);
-        } else {
-          // Moving to different track
-          moveElementToTrack(fromTrackId, track.id, elementId);
-          requestAnimationFrame(() => {
-            updateElementStartTime(track.id, elementId, finalStartTime);
-          });
-        }
-      } else if (hasMediaItem) {
-        // Handle media item drop
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (!mediaItemData) return;
-
-        const dragData: DragData = JSON.parse(mediaItemData);
-
-        if (dragData.type === "text") {
-          let targetTrackId = track.id;
-          let targetTrack = track;
-
-          // Handle position-aware track creation for text
-          if (track.type !== "text" || dropPosition !== "on") {
-            // Text tracks should go above the main track
-            const mainTrack = getMainTrack(tracks);
-            let insertIndex: number;
-
-            if (dropPosition === "above") {
-              insertIndex = currentTrackIndex;
-            } else if (dropPosition === "below") {
-              insertIndex = currentTrackIndex + 1;
-            } else {
-              // dropPosition === "on" but track is not text type
-              // Insert above main track if main track exists, otherwise at top
-              if (mainTrack) {
-                const mainTrackIndex = tracks.findIndex(
-                  (t) => t.id === mainTrack.id
-                );
-                insertIndex = mainTrackIndex;
-              } else {
-                insertIndex = 0; // Top of timeline
-              }
-            }
-
-            targetTrackId = insertTrackAt("text", insertIndex);
-            // Get the updated tracks array after creating the new track
-            const updatedTracks = useTimelineStore.getState().tracks;
-            const newTargetTrack = updatedTracks.find(
-              (t) => t.id === targetTrackId
-            );
-            if (!newTargetTrack) return;
-            targetTrack = newTargetTrack;
-          }
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = 5; // Default text duration
-          const textSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = textSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              textSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            type: "text",
-            name: dragData.name || "Text",
-            content: dragData.content || "Default Text",
-            duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-            startTime: textSnappedTime,
-            trimStart: 0,
-            trimEnd: 0,
-            fontSize: 48,
-            fontFamily: "Arial",
-            color: "#ffffff",
-            backgroundColor: "transparent",
-            textAlign: "center",
-            fontWeight: "normal",
-            fontStyle: "normal",
-            textDecoration: "none",
-            x: 0,
-            y: 0,
-            rotation: 0,
-            opacity: 1,
-          });
-        } else {
-          // Handle media items
-          const mediaItem = mediaItems.find((item) => item.id === dragData.id);
-
-          if (!mediaItem) {
-            toast.error("Media item not found");
-            return;
-          }
-
-          let targetTrackId = track.id;
-
-          // Check if track type is compatible
-          const isVideoOrImage =
-            dragData.type === "video" || dragData.type === "image";
-          const isAudio = dragData.type === "audio";
-          const isCompatible = isVideoOrImage
-            ? canElementGoOnTrack("media", track.type)
-            : isAudio
-              ? canElementGoOnTrack("media", track.type)
-              : false;
-
-          let targetTrack = tracks.find((t) => t.id === targetTrackId);
-
-          // Handle position-aware track creation for media elements
-          if (!isCompatible || dropPosition !== "on") {
-            if (isVideoOrImage) {
-              // For video/image, check if we need a main track or additional media track
-              const mainTrack = getMainTrack(tracks);
-
-              if (!mainTrack) {
-                // No main track exists, create it
-                targetTrackId = addTrack("media");
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              } else if (
-                mainTrack.elements.length === 0 &&
-                dropPosition === "on"
-              ) {
-                // Main track exists and is empty, use it
-                targetTrackId = mainTrack.id;
-                targetTrack = mainTrack;
-              } else {
-                // Create new media track
-                let insertIndex: number;
-
-                if (dropPosition === "above") {
-                  insertIndex = currentTrackIndex;
-                } else if (dropPosition === "below") {
-                  insertIndex = currentTrackIndex + 1;
-                } else {
-                  // Insert above main track
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex;
-                }
-
-                targetTrackId = insertTrackAt("media", insertIndex);
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              }
-            } else if (isAudio) {
-              // Audio tracks go at the bottom
-              const mainTrack = getMainTrack(tracks);
-              let insertIndex: number;
-
-              if (dropPosition === "above") {
-                insertIndex = currentTrackIndex;
-              } else if (dropPosition === "below") {
-                insertIndex = currentTrackIndex + 1;
-              } else {
-                // Insert after main track (bottom area)
-                if (mainTrack) {
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex + 1;
-                } else {
-                  insertIndex = tracks.length; // Bottom of timeline
-                }
-              }
-
-              targetTrackId = insertTrackAt("audio", insertIndex);
-              const updatedTracks = useTimelineStore.getState().tracks;
-              const newTargetTrack = updatedTracks.find(
-                (t) => t.id === targetTrackId
-              );
-              if (!newTargetTrack) return;
-              targetTrack = newTargetTrack;
-            }
-          }
-
-          if (!targetTrack) return;
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = mediaItem.duration || 5;
-          const mediaSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = mediaSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              mediaSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            type: "media",
-            mediaId: mediaItem.id,
-            name: mediaItem.name,
-            duration: mediaItem.duration || 5,
-            startTime: mediaSnappedTime,
-            trimStart: 0,
-            trimEnd: 0,
-          });
-        }
-      }
-    } catch (error) {
-      console.error("Error handling drop:", error);
-      toast.error("Failed to add media to track");
-    }
-  };
-
-  return (
-    <div
-      className="w-full h-full hover:bg-muted/20"
-      onClick={(e) => {
-        // If clicking empty area (not on an element), deselect all elements
-        if (!(e.target as HTMLElement).closest(".timeline-element")) {
-          clearSelectedElements();
-        }
-      }}
-      onDragOver={handleTrackDragOver}
-      onDragEnter={handleTrackDragEnter}
-      onDragLeave={handleTrackDragLeave}
-      onDrop={handleTrackDrop}
-    >
-      <div
-        ref={timelineRef}
-        className="h-full relative track-elements-container min-w-full"
-      >
-        {track.elements.length === 0 ? (
-          <div
-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
-              isDropping
-                ? wouldOverlap
-                  ? "border-red-500 bg-red-500/10 text-red-600"
-                  : "border-blue-500 bg-blue-500/10 text-blue-600"
-                : "border-muted/30"
-            }`}
-          >
-            {isDropping
-              ? wouldOverlap
-                ? "Cannot drop - would overlap"
-                : "Drop element here"
-              : ""}
-          </div>
-        ) : (
-          <>
-            {track.elements.map((element) => {
-              const isSelected = selectedElements.some(
-                (c) => c.trackId === track.id && c.elementId === element.id
-              );
-
-              const handleElementSplit = () => {
-                const { currentTime } = usePlaybackStore();
-                const { splitElement } = useTimelineStore();
-                const splitTime = currentTime;
-                const effectiveStart = element.startTime;
-                const effectiveEnd =
-                  element.startTime +
-                  (element.duration - element.trimStart - element.trimEnd);
-
-                if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-                  const secondElementId = splitElement(
-                    track.id,
-                    element.id,
-                    splitTime
-                  );
-                  if (!secondElementId) {
-                    toast.error("Failed to split element");
-                  }
-                } else {
-                  toast.error("Playhead must be within element to split");
-                }
-              };
-
-              const handleElementDuplicate = () => {
-                const { addElementToTrack } = useTimelineStore.getState();
-                const { id, ...elementWithoutId } = element;
-                addElementToTrack(track.id, {
-                  ...elementWithoutId,
-                  name: element.name + " (copy)",
-                  startTime:
-                    element.startTime +
-                    (element.duration - element.trimStart - element.trimEnd) +
-                    0.1,
-                });
-              };
-
-              const handleElementDelete = () => {
-                const { removeElementFromTrack } = useTimelineStore.getState();
-                removeElementFromTrack(track.id, element.id);
-              };
-
-              return (
-                <TimelineElement
-                  key={element.id}
-                  element={element}
-                  track={track}
-                  zoomLevel={zoomLevel}
-                  isSelected={isSelected}
-                  onElementMouseDown={handleElementMouseDown}
-                  onElementClick={handleElementClick}
-                />
-              );
-            })}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";

+

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

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

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

+import { toast } from "sonner";

+import { TimelineElement } from "./timeline-element";

+import {

+  TimelineTrack,

+  sortTracksByOrder,

+  ensureMainTrack,

+  getMainTrack,

+  canElementGoOnTrack,

+} from "@/types/timeline";

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

+import type {

+  TimelineElement as TimelineElementType,

+  DragData,

+} from "@/types/timeline";

+import {

+  snapTimeToFrame,

+  TIMELINE_CONSTANTS,

+} from "@/constants/timeline-constants";

+import { useProjectStore } from "@/stores/project-store";

+import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";

+

+export function TimelineTrackContent({

+  track,

+  zoomLevel,

+  onSnapPointChange,

+}: {

+  track: TimelineTrack;

+  zoomLevel: number;

+  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;

+}) {

+  const { mediaItems } = useMediaStore();

+  const {

+    tracks,

+    addTrack,

+    moveElementToTrack,

+    updateElementStartTime,

+    addElementToTrack,

+    selectedElements,

+    selectElement,

+    dragState,

+    startDrag: startDragAction,

+    updateDragTime,

+    endDrag: endDragAction,

+    clearSelectedElements,

+    insertTrackAt,

+    snappingEnabled,

+  } = useTimelineStore();

+

+  const { currentTime } = usePlaybackStore();

+

+  // Initialize snapping hook

+  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({

+    snapThreshold: 10,

+    enableElementSnapping: snappingEnabled,

+    enablePlayheadSnapping: snappingEnabled,

+  });

+

+  // Helper function for drop snapping that tries both edges

+  const getDropSnappedTime = (

+    dropTime: number,

+    elementDuration: number,

+    excludeElementId?: string

+  ) => {

+    if (!snappingEnabled) {

+      // Use frame snapping if project has FPS, otherwise use decimal snapping

+      const projectStore = useProjectStore.getState();

+      const projectFps = projectStore.activeProject?.fps || 30;

+      return snapTimeToFrame(dropTime, projectFps);

+    }

+

+    // Try snapping both start and end edges for drops

+    const startSnapResult = snapElementEdge(

+      dropTime,

+      elementDuration,

+      tracks,

+      currentTime,

+      zoomLevel,

+      excludeElementId,

+      true // snap to start edge

+    );

+

+    const endSnapResult = snapElementEdge(

+      dropTime,

+      elementDuration,

+      tracks,

+      currentTime,

+      zoomLevel,

+      excludeElementId,

+      false // snap to end edge

+    );

+

+    // Choose the snap result with the smaller distance (closer snap)

+    let bestSnapResult = startSnapResult;

+    if (

+      endSnapResult.snapPoint &&

+      (!startSnapResult.snapPoint ||

+        endSnapResult.snapDistance < startSnapResult.snapDistance)

+    ) {

+      bestSnapResult = endSnapResult;

+    }

+

+    return bestSnapResult.snappedTime;

+  };

+

+  const timelineRef = useRef<HTMLDivElement>(null);

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

+  const [dropPosition, setDropPosition] = useState<number | null>(null);

+  const [wouldOverlap, setWouldOverlap] = useState(false);

+  const dragCounterRef = useRef(0);

+  const [mouseDownLocation, setMouseDownLocation] = useState<{

+    x: number;

+    y: number;

+  } | null>(null);

+

+  // Set up mouse event listeners for drag

+  useEffect(() => {

+    if (!dragState.isDragging) return;

+

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

+      if (!timelineRef.current) return;

+

+      // On first mouse move during drag, ensure the element is selected

+      if (dragState.elementId && dragState.trackId) {

+        const isSelected = selectedElements.some(

+          (c) =>

+            c.trackId === dragState.trackId &&

+            c.elementId === dragState.elementId

+        );

+

+        if (!isSelected) {

+          // Select this element (replacing other selections) since we're dragging it

+          selectElement(dragState.trackId, dragState.elementId, false);

+        }

+      }

+

+      const timelineRect = timelineRef.current.getBoundingClientRect();

+      const mouseX = e.clientX - timelineRect.left;

+      const mouseTime = Math.max(

+        0,

+        mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)

+      );

+      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);

+

+      // Apply snapping if enabled

+      let finalTime = adjustedTime;

+      let snapPoint = null;

+      if (snappingEnabled) {

+        // Find the element being dragged to get its duration

+        let elementDuration = 5; // fallback duration

+        if (dragState.elementId && dragState.trackId) {

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

+          const element = sourceTrack?.elements.find(

+            (e) => e.id === dragState.elementId

+          );

+          if (element) {

+            elementDuration =

+              element.duration - element.trimStart - element.trimEnd;

+          }

+        }

+

+        // Try snapping both start and end edges

+        const startSnapResult = snapElementEdge(

+          adjustedTime,

+          elementDuration,

+          tracks,

+          currentTime,

+          zoomLevel,

+          dragState.elementId || undefined,

+          true // snap to start edge

+        );

+

+        const endSnapResult = snapElementEdge(

+          adjustedTime,

+          elementDuration,

+          tracks,

+          currentTime,

+          zoomLevel,

+          dragState.elementId || undefined,

+          false // snap to end edge

+        );

+

+        // Choose the snap result with the smaller distance (closer snap)

+        let bestSnapResult = startSnapResult;

+        if (

+          endSnapResult.snapPoint &&

+          (!startSnapResult.snapPoint ||

+            endSnapResult.snapDistance < startSnapResult.snapDistance)

+        ) {

+          bestSnapResult = endSnapResult;

+        }

+

+        finalTime = bestSnapResult.snappedTime;

+        snapPoint = bestSnapResult.snapPoint;

+

+        // Notify parent component about snap point change

+        onSnapPointChange?.(snapPoint);

+      } else {

+        // Use frame snapping if project has FPS, otherwise use decimal snapping

+        const projectStore = useProjectStore.getState();

+        const projectFps = projectStore.activeProject?.fps || 30;

+        finalTime = snapTimeToFrame(adjustedTime, projectFps);

+

+        // Clear snap point when not snapping

+        onSnapPointChange?.(null);

+      }

+

+      updateDragTime(finalTime);

+    };

+

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

+      if (!dragState.elementId || !dragState.trackId) return;

+

+      // If this track initiated the drag, we should handle the mouse up regardless of where it occurs

+      const isTrackThatStartedDrag = dragState.trackId === track.id;

+

+      const timelineRect = timelineRef.current?.getBoundingClientRect();

+      if (!timelineRect) {

+        if (isTrackThatStartedDrag) {

+          updateElementStartTime(

+            track.id,

+            dragState.elementId,

+            dragState.currentTime

+          );

+          endDragAction();

+          // Clear snap point when drag ends

+          onSnapPointChange?.(null);

+        }

+        return;

+      }

+

+      const isMouseOverThisTrack =

+        e.clientY >= timelineRect.top && e.clientY <= timelineRect.bottom;

+

+      if (!isMouseOverThisTrack && !isTrackThatStartedDrag) return;

+

+      const finalTime = dragState.currentTime;

+

+      if (isMouseOverThisTrack) {

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

+        const movingElement = sourceTrack?.elements.find(

+          (c) => c.id === dragState.elementId

+        );

+

+        if (movingElement) {

+          const movingElementDuration =

+            movingElement.duration -

+            movingElement.trimStart -

+            movingElement.trimEnd;

+          const movingElementEnd = finalTime + movingElementDuration;

+

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

+          const hasOverlap = targetTrack?.elements.some((existingElement) => {

+            if (

+              dragState.trackId === track.id &&

+              existingElement.id === dragState.elementId

+            ) {

+              return false;

+            }

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+            return finalTime < existingEnd && movingElementEnd > existingStart;

+          });

+

+          if (!hasOverlap) {

+            if (dragState.trackId === track.id) {

+              updateElementStartTime(track.id, dragState.elementId, finalTime);

+            } else {

+              moveElementToTrack(

+                dragState.trackId,

+                track.id,

+                dragState.elementId

+              );

+              requestAnimationFrame(() => {

+                updateElementStartTime(

+                  track.id,

+                  dragState.elementId!,

+                  finalTime

+                );

+              });

+            }

+          }

+        }

+      } else if (isTrackThatStartedDrag) {

+        // Mouse is not over this track, but this track started the drag

+        // This means user released over ruler/outside - update position within same track

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

+        const movingElement = sourceTrack?.elements.find(

+          (c) => c.id === dragState.elementId

+        );

+

+        if (movingElement) {

+          const movingElementDuration =

+            movingElement.duration -

+            movingElement.trimStart -

+            movingElement.trimEnd;

+          const movingElementEnd = finalTime + movingElementDuration;

+

+          const hasOverlap = track.elements.some((existingElement) => {

+            if (existingElement.id === dragState.elementId) {

+              return false;

+            }

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+            return finalTime < existingEnd && movingElementEnd > existingStart;

+          });

+

+          if (!hasOverlap) {

+            updateElementStartTime(track.id, dragState.elementId, finalTime);

+          }

+        }

+      }

+

+      if (isTrackThatStartedDrag) {

+        endDragAction();

+        // Clear snap point when drag ends

+        onSnapPointChange?.(null);

+      }

+    };

+

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

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

+

+    return () => {

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

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

+    };

+  }, [

+    dragState.isDragging,

+    dragState.clickOffsetTime,

+    dragState.elementId,

+    dragState.trackId,

+    dragState.currentTime,

+    zoomLevel,

+    tracks,

+    track.id,

+    updateDragTime,

+    updateElementStartTime,

+    moveElementToTrack,

+    endDragAction,

+    selectedElements,

+    selectElement,

+    onSnapPointChange,

+  ]);

+

+  const handleElementMouseDown = (

+    e: React.MouseEvent,

+    element: TimelineElementType

+  ) => {

+    setMouseDownLocation({ x: e.clientX, y: e.clientY });

+

+    // Detect right-click (button 2) and handle selection without starting drag

+    const isRightClick = e.button === 2;

+    const isMultiSelect = e.metaKey || e.ctrlKey || e.shiftKey;

+

+    if (isRightClick) {

+      // Handle right-click selection

+      const isSelected = selectedElements.some(

+        (c) => c.trackId === track.id && c.elementId === element.id

+      );

+

+      // If element is not selected, select it (keep other selections if multi-select)

+      if (!isSelected) {

+        selectElement(track.id, element.id, isMultiSelect);

+      }

+      // If element is already selected, keep it selected

+

+      // Don't start drag action for right-clicks

+      return;

+    }

+

+    // Handle multi-selection for left-click with modifiers

+    if (isMultiSelect) {

+      selectElement(track.id, element.id, true);

+    }

+

+    // Calculate the offset from the left edge of the element to where the user clicked

+    const elementElement = e.currentTarget as HTMLElement;

+    const elementRect = elementElement.getBoundingClientRect();

+    const clickOffsetX = e.clientX - elementRect.left;

+    const clickOffsetTime =

+      clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+

+    startDragAction(

+      element.id,

+      track.id,

+      e.clientX,

+      element.startTime,

+      clickOffsetTime

+    );

+  };

+

+  const handleElementClick = (

+    e: React.MouseEvent,

+    element: TimelineElementType

+  ) => {

+    e.stopPropagation();

+

+    // Check if mouse moved significantly

+    if (mouseDownLocation) {

+      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);

+      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);

+      // If it moved more than a few pixels, consider it a drag and not a click.

+      if (deltaX > 5 || deltaY > 5) {

+        setMouseDownLocation(null); // Reset for next interaction

+        return;

+      }

+    }

+

+    // Skip selection logic for multi-selection (handled in mousedown)

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

+      return;

+    }

+

+    // Handle single selection

+    const isSelected = selectedElements.some(

+      (c) => c.trackId === track.id && c.elementId === element.id

+    );

+

+    if (!isSelected) {

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

+      selectElement(track.id, element.id, false);

+    }

+    // If element is already selected, keep it selected (do nothing)

+  };

+

+  const handleTrackDragOver = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Handle both timeline elements and media items

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    // Calculate drop position for overlap checking

+    const trackContainer = e.currentTarget.querySelector(

+      ".track-elements-container"

+    ) as HTMLElement;

+    let dropTime = 0;

+    if (trackContainer) {

+      const rect = trackContainer.getBoundingClientRect();

+      const mouseX = Math.max(0, e.clientX - rect.left);

+      dropTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+    }

+

+    // Check for potential overlaps and show appropriate feedback

+    let wouldOverlap = false;

+

+    if (hasMediaItem) {

+      try {

+        const mediaItemData = e.dataTransfer.getData(

+          "application/x-media-item"

+        );

+        if (mediaItemData) {

+          const dragData: DragData = JSON.parse(mediaItemData);

+

+          if (dragData.type === "text") {

+            // Text elements have default duration of 5 seconds

+            const newElementDuration = 5;

+            const snappedTime = getDropSnappedTime(

+              dropTime,

+              newElementDuration

+            );

+            const newElementEnd = snappedTime + newElementDuration;

+

+            wouldOverlap = track.elements.some((existingElement) => {

+              const existingStart = existingElement.startTime;

+              const existingEnd =

+                existingElement.startTime +

+                (existingElement.duration -

+                  existingElement.trimStart -

+                  existingElement.trimEnd);

+              return snappedTime < existingEnd && newElementEnd > existingStart;

+            });

+          } else {

+            // Media elements

+            const mediaItem = mediaItems.find(

+              (item) => item.id === dragData.id

+            );

+            if (mediaItem) {

+              const newElementDuration = mediaItem.duration || 5;

+              const snappedTime = getDropSnappedTime(

+                dropTime,

+                newElementDuration

+              );

+              const newElementEnd = snappedTime + newElementDuration;

+

+              wouldOverlap = track.elements.some((existingElement) => {

+                const existingStart = existingElement.startTime;

+                const existingEnd =

+                  existingElement.startTime +

+                  (existingElement.duration -

+                    existingElement.trimStart -

+                    existingElement.trimEnd);

+                return (

+                  snappedTime < existingEnd && newElementEnd > existingStart

+                );

+              });

+            }

+          }

+        }

+      } catch (error) {

+        // Continue with default behavior

+      }

+    } else if (hasTimelineElement) {

+      try {

+        const timelineElementData = e.dataTransfer.getData(

+          "application/x-timeline-element"

+        );

+        if (timelineElementData) {

+          const { elementId, trackId: fromTrackId } =

+            JSON.parse(timelineElementData);

+          const sourceTrack = tracks.find(

+            (t: TimelineTrack) => t.id === fromTrackId

+          );

+          const movingElement = sourceTrack?.elements.find(

+            (c: any) => c.id === elementId

+          );

+

+          if (movingElement) {

+            const movingElementDuration =

+              movingElement.duration -

+              movingElement.trimStart -

+              movingElement.trimEnd;

+            const snappedTime = getDropSnappedTime(

+              dropTime,

+              movingElementDuration,

+              elementId

+            );

+            const movingElementEnd = snappedTime + movingElementDuration;

+

+            wouldOverlap = track.elements.some((existingElement) => {

+              if (fromTrackId === track.id && existingElement.id === elementId)

+                return false;

+

+              const existingStart = existingElement.startTime;

+              const existingEnd =

+                existingElement.startTime +

+                (existingElement.duration -

+                  existingElement.trimStart -

+                  existingElement.trimEnd);

+              return (

+                snappedTime < existingEnd && movingElementEnd > existingStart

+              );

+            });

+          }

+        }

+      } catch (error) {

+        // Continue with default behavior

+      }

+    }

+

+    if (wouldOverlap) {

+      e.dataTransfer.dropEffect = "none";

+      setWouldOverlap(true);

+      // Use default duration for position indicator

+      setDropPosition(getDropSnappedTime(dropTime, 5));

+      return;

+    }

+

+    e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";

+    setWouldOverlap(false);

+    // Use default duration for position indicator

+    setDropPosition(getDropSnappedTime(dropTime, 5));

+  };

+

+  const handleTrackDragEnter = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    dragCounterRef.current++;

+    setIsDropping(true);

+  };

+

+  const handleTrackDragLeave = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    dragCounterRef.current--;

+

+    if (dragCounterRef.current === 0) {

+      setIsDropping(false);

+      setWouldOverlap(false);

+      setDropPosition(null);

+    }

+  };

+

+  const handleTrackDrop = (e: React.DragEvent) => {

+    e.preventDefault();

+    e.stopPropagation();

+

+    // Debug logging

+    console.log(

+      JSON.stringify({

+        message: "Drop event started in timeline track",

+        dataTransferTypes: Array.from(e.dataTransfer.types),

+        trackId: track.id,

+        trackType: track.type,

+      })

+    );

+

+    // Reset all drag states

+    dragCounterRef.current = 0;

+    setIsDropping(false);

+    setWouldOverlap(false);

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    const trackContainer = e.currentTarget.querySelector(

+      ".track-elements-container"

+    ) as HTMLElement;

+    if (!trackContainer) return;

+

+    const rect = trackContainer.getBoundingClientRect();

+    const mouseX = Math.max(0, e.clientX - rect.left);

+    const mouseY = e.clientY - rect.top; // Get Y position relative to this track

+    const newStartTime =

+      mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+    const projectStore = useProjectStore.getState();

+    const projectFps = projectStore.activeProject?.fps || 30;

+    const snappedTime = snapTimeToFrame(newStartTime, projectFps);

+

+    // Calculate drop position relative to tracks

+    const currentTrackIndex = tracks.findIndex((t) => t.id === track.id);

+

+    // Determine drop zone within the track (top 20px, middle 20px, bottom 20px)

+    let dropPosition: "above" | "on" | "below";

+    if (mouseY < 20) {

+      dropPosition = "above";

+    } else if (mouseY > 40) {

+      dropPosition = "below";

+    } else {

+      dropPosition = "on";

+    }

+

+    try {

+      if (hasTimelineElement) {

+        // Handle timeline element movement

+        const timelineElementData = e.dataTransfer.getData(

+          "application/x-timeline-element"

+        );

+        if (!timelineElementData) return;

+

+        const {

+          elementId,

+          trackId: fromTrackId,

+          clickOffsetTime = 0,

+        } = JSON.parse(timelineElementData);

+

+        // Find the element being moved

+        const sourceTrack = tracks.find(

+          (t: TimelineTrack) => t.id === fromTrackId

+        );

+        const movingElement = sourceTrack?.elements.find(

+          (c: TimelineElementType) => c.id === elementId

+        );

+

+        if (!movingElement) {

+          toast.error("Element not found");

+          return;

+        }

+

+        // Check for overlaps with existing elements (excluding the moving element itself)

+        const movingElementDuration =

+          movingElement.duration -

+          movingElement.trimStart -

+          movingElement.trimEnd;

+

+        // Adjust position based on where user clicked on the element

+        const adjustedStartTime = newStartTime - clickOffsetTime;

+        const snappedStartTime = getDropSnappedTime(

+          adjustedStartTime,

+          movingElementDuration,

+          elementId

+        );

+        const finalStartTime = Math.max(0, snappedStartTime);

+        const movingElementEnd = finalStartTime + movingElementDuration;

+

+        const hasOverlap = track.elements.some((existingElement) => {

+          // Skip the element being moved if it's on the same track

+          if (fromTrackId === track.id && existingElement.id === elementId)

+            return false;

+

+          const existingStart = existingElement.startTime;

+          const existingEnd =

+            existingElement.startTime +

+            (existingElement.duration -

+              existingElement.trimStart -

+              existingElement.trimEnd);

+

+          // Check if elements overlap

+          return (

+            finalStartTime < existingEnd && movingElementEnd > existingStart

+          );

+        });

+

+        if (hasOverlap) {

+          toast.error(

+            "Cannot move element here - it would overlap with existing elements"

+          );

+          return;

+        }

+

+        if (fromTrackId === track.id) {

+          // Moving within same track

+          updateElementStartTime(track.id, elementId, finalStartTime);

+        } else {

+          // Moving to different track

+          moveElementToTrack(fromTrackId, track.id, elementId);

+          requestAnimationFrame(() => {

+            updateElementStartTime(track.id, elementId, finalStartTime);

+          });

+        }

+      } else if (hasMediaItem) {

+        // Handle media item drop

+        const mediaItemData = e.dataTransfer.getData(

+          "application/x-media-item"

+        );

+        if (!mediaItemData) return;

+

+        const dragData: DragData = JSON.parse(mediaItemData);

+

+        if (dragData.type === "text") {

+          let targetTrackId = track.id;

+          let targetTrack = track;

+

+          // Handle position-aware track creation for text

+          if (track.type !== "text" || dropPosition !== "on") {

+            // Text tracks should go above the main track

+            const mainTrack = getMainTrack(tracks);

+            let insertIndex: number;

+

+            if (dropPosition === "above") {

+              insertIndex = currentTrackIndex;

+            } else if (dropPosition === "below") {

+              insertIndex = currentTrackIndex + 1;

+            } else {

+              // dropPosition === "on" but track is not text type

+              // Insert above main track if main track exists, otherwise at top

+              if (mainTrack) {

+                const mainTrackIndex = tracks.findIndex(

+                  (t) => t.id === mainTrack.id

+                );

+                insertIndex = mainTrackIndex;

+              } else {

+                insertIndex = 0; // Top of timeline

+              }

+            }

+

+            targetTrackId = insertTrackAt("text", insertIndex);

+            // Get the updated tracks array after creating the new track

+            const updatedTracks = useTimelineStore.getState().tracks;

+            const newTargetTrack = updatedTracks.find(

+              (t) => t.id === targetTrackId

+            );

+            if (!newTargetTrack) return;

+            targetTrack = newTargetTrack;

+          }

+

+          // Check for overlaps with existing elements in target track

+          const newElementDuration = 5; // Default text duration

+          const textSnappedTime = getDropSnappedTime(

+            newStartTime,

+            newElementDuration

+          );

+          const newElementEnd = textSnappedTime + newElementDuration;

+

+          const hasOverlap = targetTrack.elements.some((existingElement) => {

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+

+            // Check if elements overlap

+            return (

+              textSnappedTime < existingEnd && newElementEnd > existingStart

+            );

+          });

+

+          if (hasOverlap) {

+            toast.error(

+              "Cannot place element here - it would overlap with existing elements"

+            );

+            return;

+          }

+

+          addElementToTrack(targetTrackId, {

+            type: "text",

+            name: dragData.name || "Text",

+            content: dragData.content || "Default Text",

+            duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,

+            startTime: textSnappedTime,

+            trimStart: 0,

+            trimEnd: 0,

+            fontSize: 48,

+            fontFamily: "Arial",

+            color: "#ffffff",

+            backgroundColor: "transparent",

+            textAlign: "center",

+            fontWeight: "normal",

+            fontStyle: "normal",

+            textDecoration: "none",

+            x: 0,

+            y: 0,

+            rotation: 0,

+            opacity: 1,

+          });

+        } else {

+          // Handle media items

+          const mediaItem = mediaItems.find((item) => item.id === dragData.id);

+

+          if (!mediaItem) {

+            toast.error("Media item not found");

+            return;

+          }

+

+          let targetTrackId = track.id;

+

+          // Check if track type is compatible

+          const isVideoOrImage =

+            dragData.type === "video" || dragData.type === "image";

+          const isAudio = dragData.type === "audio";

+          const isCompatible = isVideoOrImage

+            ? canElementGoOnTrack("media", track.type)

+            : isAudio

+              ? canElementGoOnTrack("media", track.type)

+              : false;

+

+          let targetTrack = tracks.find((t) => t.id === targetTrackId);

+

+          // Handle position-aware track creation for media elements

+          if (!isCompatible || dropPosition !== "on") {

+            if (isVideoOrImage) {

+              // For video/image, check if we need a main track or additional media track

+              const mainTrack = getMainTrack(tracks);

+

+              if (!mainTrack) {

+                // No main track exists, create it

+                targetTrackId = addTrack("media");

+                const updatedTracks = useTimelineStore.getState().tracks;

+                const newTargetTrack = updatedTracks.find(

+                  (t) => t.id === targetTrackId

+                );

+                if (!newTargetTrack) return;

+                targetTrack = newTargetTrack;

+              } else if (

+                mainTrack.elements.length === 0 &&

+                dropPosition === "on"

+              ) {

+                // Main track exists and is empty, use it

+                targetTrackId = mainTrack.id;

+                targetTrack = mainTrack;

+              } else {

+                // Create new media track

+                let insertIndex: number;

+

+                if (dropPosition === "above") {

+                  insertIndex = currentTrackIndex;

+                } else if (dropPosition === "below") {

+                  insertIndex = currentTrackIndex + 1;

+                } else {

+                  // Insert above main track

+                  const mainTrackIndex = tracks.findIndex(

+                    (t) => t.id === mainTrack.id

+                  );

+                  insertIndex = mainTrackIndex;

+                }

+

+                targetTrackId = insertTrackAt("media", insertIndex);

+                const updatedTracks = useTimelineStore.getState().tracks;

+                const newTargetTrack = updatedTracks.find(

+                  (t) => t.id === targetTrackId

+                );

+                if (!newTargetTrack) return;

+                targetTrack = newTargetTrack;

+              }

+            } else if (isAudio) {

+              // Audio tracks go at the bottom

+              const mainTrack = getMainTrack(tracks);

+              let insertIndex: number;

+

+              if (dropPosition === "above") {

+                insertIndex = currentTrackIndex;

+              } else if (dropPosition === "below") {

+                insertIndex = currentTrackIndex + 1;

+              } else {

+                // Insert after main track (bottom area)

+                if (mainTrack) {

+                  const mainTrackIndex = tracks.findIndex(

+                    (t) => t.id === mainTrack.id

+                  );

+                  insertIndex = mainTrackIndex + 1;

+                } else {

+                  insertIndex = tracks.length; // Bottom of timeline

+                }

+              }

+

+              targetTrackId = insertTrackAt("audio", insertIndex);

+              const updatedTracks = useTimelineStore.getState().tracks;

+              const newTargetTrack = updatedTracks.find(

+                (t) => t.id === targetTrackId

+              );

+              if (!newTargetTrack) return;

+              targetTrack = newTargetTrack;

+            }

+          }

+

+          if (!targetTrack) return;

+

+          // Check for overlaps with existing elements in target track

+          const newElementDuration = mediaItem.duration || 5;

+          const mediaSnappedTime = getDropSnappedTime(

+            newStartTime,

+            newElementDuration

+          );

+          const newElementEnd = mediaSnappedTime + newElementDuration;

+

+          const hasOverlap = targetTrack.elements.some((existingElement) => {

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+

+            // Check if elements overlap

+            return (

+              mediaSnappedTime < existingEnd && newElementEnd > existingStart

+            );

+          });

+

+          if (hasOverlap) {

+            toast.error(

+              "Cannot place element here - it would overlap with existing elements"

+            );

+            return;

+          }

+

+          addElementToTrack(targetTrackId, {

+            type: "media",

+            mediaId: mediaItem.id,

+            name: mediaItem.name,

+            duration: mediaItem.duration || 5,

+            startTime: mediaSnappedTime,

+            trimStart: 0,

+            trimEnd: 0,

+          });

+        }

+      }

+    } catch (error) {

+      console.error("Error handling drop:", error);

+      toast.error("Failed to add media to track");

+    }

+  };

+

+  return (

+    <div

+      className="w-full h-full hover:bg-muted/20"

+      onClick={(e) => {

+        // If clicking empty area (not on an element), deselect all elements

+        if (!(e.target as HTMLElement).closest(".timeline-element")) {

+          clearSelectedElements();

+        }

+      }}

+      onDragOver={handleTrackDragOver}

+      onDragEnter={handleTrackDragEnter}

+      onDragLeave={handleTrackDragLeave}

+      onDrop={handleTrackDrop}

+    >

+      <div

+        ref={timelineRef}

+        className="h-full relative track-elements-container min-w-full"

+      >

+        {track.elements.length === 0 ? (

+          <div

+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${

+              isDropping

+                ? wouldOverlap

+                  ? "border-red-500 bg-red-500/10 text-red-600"

+                  : "border-blue-500 bg-blue-500/10 text-blue-600"

+                : "border-muted/30"

+            }`}

+          >

+            {isDropping

+              ? wouldOverlap

+                ? "Cannot drop - would overlap"

+                : "Drop element here"

+              : ""}

+          </div>

+        ) : (

+          <>

+            {track.elements.map((element) => {

+              const isSelected = selectedElements.some(

+                (c) => c.trackId === track.id && c.elementId === element.id

+              );

+

+              const handleElementSplit = () => {

+                const { currentTime } = usePlaybackStore();

+                const { splitElement } = useTimelineStore();

+                const splitTime = currentTime;

+                const effectiveStart = element.startTime;

+                const effectiveEnd =

+                  element.startTime +

+                  (element.duration - element.trimStart - element.trimEnd);

+

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

+                  const secondElementId = splitElement(

+                    track.id,

+                    element.id,

+                    splitTime

+                  );

+                  if (!secondElementId) {

+                    toast.error("Failed to split element");

+                  }

+                } else {

+                  toast.error("Playhead must be within element to split");

+                }

+              };

+

+              const handleElementDuplicate = () => {

+                const { addElementToTrack } = useTimelineStore.getState();

+                const { id, ...elementWithoutId } = element;

+                addElementToTrack(track.id, {

+                  ...elementWithoutId,

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

+                  startTime:

+                    element.startTime +

+                    (element.duration - element.trimStart - element.trimEnd) +

+                    0.1,

+                });

+              };

+

+              const handleElementDelete = () => {

+                const { removeElementFromTrack } = useTimelineStore.getState();

+                removeElementFromTrack(track.id, element.id);

+              };

+

+              return (

+                <TimelineElement

+                  key={element.id}

+                  element={element}

+                  track={track}

+                  zoomLevel={zoomLevel}

+                  isSelected={isSelected}

+                  onElementMouseDown={handleElementMouseDown}

+                  onElementClick={handleElementClick}

+                />

+              );

+            })}

+          </>

+        )}

+      </div>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index bfb663c6..5130c753 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -1,948 +1,948 @@
-"use client";
-
-import { ScrollArea } from "../ui/scroll-area";
-import { Button } from "../ui/button";
-import {
-  Scissors,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  Trash2,
-  Snowflake,
-  Copy,
-  SplitSquareHorizontal,
-  Pause,
-  Play,
-  Video,
-  Music,
-  TypeIcon,
-  Lock,
-  ZoomIn,
-  ZoomOut,
-  LockOpen,
-} from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from "../ui/tooltip";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "../ui/context-menu";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
-import { processMediaFiles } from "@/lib/media-processing";
-import { toast } from "sonner";
-import { useState, useRef, useEffect, useCallback } from "react";
-import { TimelineTrackContent } from "./timeline-track";
-import {
-  TimelinePlayhead,
-  useTimelinePlayheadRuler,
-} from "./timeline-playhead";
-import { SelectionBox } from "./selection-box";
-import { useSelectionBox } from "@/hooks/use-selection-box";
-import { SnapIndicator } from "./snap-indicator";
-import { SnapPoint } from "@/hooks/use-timeline-snapping";
-import type { DragData, TimelineTrack } from "@/types/timeline";
-import {
-  getTrackHeight,
-  getCumulativeHeightBefore,
-  getTotalTracksHeight,
-  TIMELINE_CONSTANTS,
-  snapTimeToFrame,
-} from "@/constants/timeline-constants";
-import { Slider } from "../ui/slider";
-import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";
-import TimelineCanvasRulerWrapper from "./timeline-canvas/timeline-canvas-ruler-wrapper";
-
-export function Timeline() {
-  // Timeline shows all tracks (video, audio, effects) and their elements.
-  // You can drag media here to add it to your project.
-  // elements can be trimmed, deleted, and moved.
-
-  const {
-    tracks,
-    addTrack,
-    addElementToTrack,
-    removeElementFromTrack,
-    getTotalDuration,
-    selectedElements,
-    clearSelectedElements,
-    setSelectedElements,
-    splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    toggleTrackMute,
-    separateAudio,
-    undo,
-    redo,
-    snappingEnabled,
-    toggleSnapping,
-    dragState,
-  } = useTimelineStore();
-  const { mediaItems, addMediaItem } = useMediaStore();
-  const { activeProject } = useProjectStore();
-  const { currentTime, duration, seek, setDuration, isPlaying, toggle } =
-    usePlaybackStore();
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const dragCounterRef = useRef(0);
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const rulerRef = useRef<HTMLDivElement>(null);
-  const [isInTimeline, setIsInTimeline] = useState(false);
-
-  // Timeline zoom functionality
-  const {
-    zoomLevel,
-    zoomStep,
-    handleChangeZoomLevel,
-    handleChangeZoomStep,
-    handleWheel,
-  } = useTimelineZoom();
-
-  // Old marquee selection removed - using new SelectionBox component instead
-
-  // Dynamic timeline width calculation based on playhead position and duration
-  const dynamicTimelineWidth = Math.max(
-    (duration || 0) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Base width from duration
-    (currentTime + 30) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Width to show current time + 30 seconds buffer
-    timelineRef.current?.clientWidth || 1000 // Minimum width
-  );
-
-  // Scroll synchronization and auto-scroll to playhead
-  const rulerScrollRef = useRef<HTMLDivElement>(null);
-  const trackLabelsRef = useRef<HTMLDivElement>(null);
-  const playheadRef = useRef<HTMLDivElement>(null);
-  const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
-  const isUpdatingRef = useRef(false);
-  const lastRulerSync = useRef(0);
-  const lastTracksSync = useRef(0);
-  const lastVerticalSync = useRef(0);
-
-  // Timeline playhead ruler handlers
-  const { handleRulerMouseDown } = useTimelinePlayheadRuler({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-  });
-
-  // Selection box functionality
-  const tracksContainerRef = useRef<HTMLDivElement>(null);
-  const {
-    selectionBox,
-    handleMouseDown: handleSelectionMouseDown,
-    isSelecting,
-    justFinishedSelecting,
-  } = useSelectionBox({
-    containerRef: tracksContainerRef,
-    playheadRef,
-    onSelectionComplete: (elements) => {
-      console.log(JSON.stringify({ onSelectionComplete: elements.length }));
-      setSelectedElements(elements);
-    },
-  });
-
-  // Calculate snap indicator state
-  const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
-    null
-  );
-  const showSnapIndicator =
-    dragState.isDragging && snappingEnabled && currentSnapPoint !== null;
-
-  // Callback to handle snap point changes from TimelineTrackContent
-  const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
-    setCurrentSnapPoint(snapPoint);
-  }, []);
-
-  // Timeline content click to seek handler
-  const handleTimelineContentClick = useCallback(
-    (e: React.MouseEvent) => {
-      console.log(
-        JSON.stringify({
-          timelineClick: {
-            isSelecting,
-            justFinishedSelecting,
-            willReturn: isSelecting || justFinishedSelecting,
-          },
-        })
-      );
-
-      // Don't seek if this was a selection box operation
-      if (isSelecting || justFinishedSelecting) {
-        return;
-      }
-
-      // Don't seek if clicking on timeline elements, but still deselect
-      if ((e.target as HTMLElement).closest(".timeline-element")) {
-        return;
-      }
-
-      // Don't seek if clicking on playhead
-      if (playheadRef.current?.contains(e.target as Node)) {
-        return;
-      }
-
-      // Don't seek if clicking on track labels
-      if ((e.target as HTMLElement).closest("[data-track-labels]")) {
-        clearSelectedElements();
-        return;
-      }
-
-      // Clear selected elements when clicking empty timeline area
-      console.log(JSON.stringify({ clearingSelectedElements: true }));
-      clearSelectedElements();
-
-      // Determine if we're clicking in ruler or tracks area
-      const isTracksAreaClick = (e.target as HTMLElement).closest(
-        "[data-tracks-area]"
-      );
-
-      let mouseX: number;
-      let scrollLeft = 0;
-
-      if (isTracksAreaClick) {
-        // Calculate based on ruler position
-        const rulerContent = rulerScrollRef.current?.querySelector(
-          "[data-radix-scroll-area-viewport]"
-        ) as HTMLElement;
-        if (!rulerContent) return;
-        const rect = rulerContent.getBoundingClientRect();
-        mouseX = e.clientX - rect.left;
-        scrollLeft = rulerContent.scrollLeft;
-      } else {
-        return;
-      }
-
-      const rawTime = Math.max(
-        0,
-        Math.min(
-          duration,
-          (mouseX + scrollLeft) /
-            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-        )
-      );
-
-      // Use frame snapping for timeline clicking
-      const projectFps = activeProject?.fps || 30;
-      const time = snapTimeToFrame(rawTime, projectFps);
-
-      seek(time);
-    },
-    [
-      duration,
-      zoomLevel,
-      seek,
-      rulerScrollRef,
-      clearSelectedElements,
-      isSelecting,
-      justFinishedSelecting,
-    ]
-  );
-
-  // Update timeline duration when tracks change
-  useEffect(() => {
-    const totalDuration = getTotalDuration();
-    setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline
-  }, [tracks, setDuration, getTotalDuration]);
-
-  // Old marquee system removed - using new SelectionBox component instead
-
-  const handleDragEnter = (e: React.DragEvent) => {
-    // When something is dragged over the timeline, show overlay
-    e.preventDefault();
-    // Don't show overlay for timeline elements - they're handled by tracks
-    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-      return;
-    }
-    dragCounterRef.current += 1;
-    if (!isDragOver) {
-      setIsDragOver(true);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Don't update state for timeline elements - they're handled by tracks
-    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-      return;
-    }
-
-    dragCounterRef.current -= 1;
-    if (dragCounterRef.current === 0) {
-      setIsDragOver(false);
-    }
-  };
-
-  const handleDrop = async (e: React.DragEvent) => {
-    // When media is dropped, add it as a new track/element
-    e.preventDefault();
-    setIsDragOver(false);
-    dragCounterRef.current = 0;
-
-    // Ignore timeline element drags - they're handled by track-specific handlers
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    if (hasTimelineElement) {
-      return;
-    }
-
-    const itemData = e.dataTransfer.getData("application/x-media-item");
-    if (itemData) {
-      try {
-        const dragData: DragData = JSON.parse(itemData);
-
-        if (dragData.type === "text") {
-          // Always create new text track to avoid overlaps
-          useTimelineStore.getState().addTextToNewTrack(dragData);
-        } else {
-          // Handle media items
-          const mediaItem = mediaItems.find(
-            (item: any) => item.id === dragData.id
-          );
-          if (!mediaItem) {
-            toast.error("Media item not found");
-            return;
-          }
-
-          useTimelineStore.getState().addMediaToNewTrack(mediaItem);
-        }
-      } catch (error) {
-        console.error("Error parsing dropped item data:", error);
-        toast.error("Failed to add item to timeline");
-      }
-    } else if (e.dataTransfer.files?.length > 0) {
-      // Handle file drops by creating new tracks
-      if (!activeProject) {
-        toast.error("No active project");
-        return;
-      }
-
-      setIsProcessing(true);
-      setProgress(0);
-      try {
-        const processedItems = await processMediaFiles(
-          e.dataTransfer.files,
-          (p) => setProgress(p)
-        );
-        for (const processedItem of processedItems) {
-          await addMediaItem(activeProject.id, processedItem);
-          const currentMediaItems = useMediaStore.getState().mediaItems;
-          const addedItem = currentMediaItems.find(
-            (item) =>
-              item.name === processedItem.name && item.url === processedItem.url
-          );
-          if (addedItem) {
-            useTimelineStore.getState().addMediaToNewTrack(addedItem);
-          }
-        }
-      } catch (error) {
-        // Show error if file processing fails
-        console.error("Error processing external files:", error);
-        toast.error("Failed to process dropped files");
-      } finally {
-        setIsProcessing(false);
-        setProgress(0);
-      }
-    }
-  };
-
-  const dragProps = {
-    onDragEnter: handleDragEnter,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop,
-  };
-
-  // Action handlers for toolbar
-  const handleSplitSelected = () => {
-    if (selectedElements.length === 0) {
-      toast.error("No elements selected");
-      return;
-    }
-    let splitCount = 0;
-    selectedElements.forEach(({ trackId, elementId }) => {
-      const track = tracks.find((t) => t.id === trackId);
-      const element = track?.elements.find((c) => c.id === elementId);
-      if (element && track) {
-        const effectiveStart = element.startTime;
-        const effectiveEnd =
-          element.startTime +
-          (element.duration - element.trimStart - element.trimEnd);
-
-        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
-          const newElementId = splitElement(trackId, elementId, currentTime);
-          if (newElementId) splitCount++;
-        }
-      }
-    });
-    if (splitCount === 0) {
-      toast.error("Playhead must be within selected elements to split");
-    }
-  };
-
-  const handleDuplicateSelected = () => {
-    if (selectedElements.length === 0) {
-      toast.error("No elements selected");
-      return;
-    }
-    const canDuplicate = selectedElements.length === 1;
-    if (!canDuplicate) return;
-
-    const newSelections: { trackId: string; elementId: string }[] = [];
-
-    selectedElements.forEach(({ trackId, elementId }) => {
-      const track = tracks.find((t) => t.id === trackId);
-      const element = track?.elements.find((el) => el.id === elementId);
-
-      if (element) {
-        const newStartTime =
-          element.startTime +
-          (element.duration - element.trimStart - element.trimEnd) +
-          0.1;
-
-        // Create element without id (will be generated by store)
-        const { id, ...elementWithoutId } = element;
-
-        addElementToTrack(trackId, {
-          ...elementWithoutId,
-          startTime: newStartTime,
-        });
-
-        // We can't predict the new id, so just clear selection for now
-        // TODO: addElementToTrack could return the new element id
-      }
-    });
-
-    clearSelectedElements();
-  };
-
-  const handleFreezeSelected = () => {
-    toast.info("Freeze frame functionality coming soon!");
-  };
-
-  const handleSplitAndKeepLeft = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((c) => c.id === elementId);
-    if (!element) return;
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
-    splitAndKeepLeft(trackId, elementId, currentTime);
-  };
-
-  const handleSplitAndKeepRight = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((c) => c.id === elementId);
-    if (!element) return;
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
-    splitAndKeepRight(trackId, elementId, currentTime);
-  };
-
-  const handleSeparateAudio = () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one media element to separate audio");
-      return;
-    }
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    if (!track || track.type !== "media") {
-      toast.error("Select a media element to separate audio");
-      return;
-    }
-    separateAudio(trackId, elementId);
-  };
-
-  const handleDeleteSelected = () => {
-    if (selectedElements.length === 0) {
-      toast.error("No elements selected");
-      return;
-    }
-    selectedElements.forEach(({ trackId, elementId }) => {
-      removeElementFromTrack(trackId, elementId);
-    });
-    clearSelectedElements();
-  };
-
-  // --- Scroll synchronization effect ---
-  useEffect(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-
-    if (!rulerViewport) return;
-
-    // Horizontal scroll synchronization between ruler and tracks
-    const handleRulerScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
-      lastRulerSync.current = now;
-      isUpdatingRef.current = true;
-      isUpdatingRef.current = false;
-    };
-    const handleTracksScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
-      lastTracksSync.current = now;
-      isUpdatingRef.current = true;
-      isUpdatingRef.current = false;
-    };
-
-    rulerViewport.addEventListener("scroll", handleRulerScroll);
-
-    // Vertical scroll synchronization between track labels and tracks content
-    if (trackLabelsViewport) {
-      const handleTrackLabelsScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        isUpdatingRef.current = false;
-      };
-      const handleTracksVerticalScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        isUpdatingRef.current = false;
-      };
-
-      trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
-
-      return () => {
-        rulerViewport.removeEventListener("scroll", handleRulerScroll);
-        trackLabelsViewport.removeEventListener(
-          "scroll",
-          handleTrackLabelsScroll
-        );
-      };
-    }
-
-    return () => {
-      rulerViewport.removeEventListener("scroll", handleRulerScroll);
-    };
-  }, []);
-
-  return (
-    <div
-      className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`}
-      {...dragProps}
-      onMouseEnter={() => setIsInTimeline(true)}
-      onMouseLeave={() => setIsInTimeline(false)}
-    >
-      {/* Toolbar */}
-      <div className="border-b flex items-center justify-between px-2 py-1">
-        <div className="flex items-center gap-1 w-full">
-          <TooltipProvider delayDuration={500}>
-            {/* Play/Pause Button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={toggle}
-                  className="mr-2"
-                >
-                  {isPlaying ? (
-                    <Pause className="h-4 w-4" />
-                  ) : (
-                    <Play className="h-4 w-4" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {isPlaying ? "Pause (Space)" : "Play (Space)"}
-              </TooltipContent>
-            </Tooltip>
-            <div className="w-px h-6 bg-border mx-1" />
-            {/* Time Display */}
-            <div
-              className="text-xs text-muted-foreground font-mono px-2"
-              style={{ minWidth: "18ch", textAlign: "center" }}
-            >
-              {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
-            </div>
-            {/* Test Clip Button - for debugging */}
-            {tracks.length === 0 && (
-              <>
-                <div className="w-px h-6 bg-border mx-1" />
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        const trackId = addTrack("media");
-                        addElementToTrack(trackId, {
-                          type: "media",
-                          mediaId: "test",
-                          name: "Test Clip",
-                          duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-                          startTime: 0,
-                          trimStart: 0,
-                          trimEnd: 0,
-                        });
-                      }}
-                      className="text-xs"
-                    >
-                      Add Test Clip
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    Add a test clip to try playback
-                  </TooltipContent>
-                </Tooltip>
-              </>
-            )}
-            <div className="w-px h-6 bg-border mx-1" />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleSplitSelected}
-                >
-                  <Scissors className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Split element (Ctrl+S)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleSplitAndKeepLeft}
-                >
-                  <ArrowLeftToLine className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleSplitAndKeepRight}
-                >
-                  <ArrowRightToLine className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleSeparateAudio}
-                >
-                  <SplitSquareHorizontal className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleDuplicateSelected}
-                >
-                  <Copy className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleFreezeSelected}
-                >
-                  <Snowflake className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Freeze frame (F)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleDeleteSelected}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Delete element (Delete)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  className="ml-auto"
-                  variant="text"
-                  size="icon"
-                  onClick={() => handleChangeZoomLevel(zoomLevel - 0.15)}
-                >
-                  <ZoomOut className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Zoom Out</TooltipContent>
-            </Tooltip>
-            <Slider
-              className="max-w-24"
-              max={TIMELINE_CONSTANTS.MAX_ZOOM_STEP}
-              min={0}
-              step={1}
-              value={[zoomStep]}
-              onValueChange={(value) => handleChangeZoomStep(value[0])}
-            />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={() => handleChangeZoomLevel(zoomLevel + 0.15)}
-                >
-                  <ZoomIn className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Zoom In</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-        <div className="flex items-center gap-1">
-          <TooltipProvider delayDuration={500}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="text" size="icon" onClick={toggleSnapping}>
-                  {snappingEnabled ? (
-                    <Lock className="h-4 w-4" />
-                  ) : (
-                    <LockOpen className="h-4 w-4 text-primary" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Auto snapping</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </div>
-
-      {/* Timeline Container */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden relative"
-        ref={timelineRef}
-      >
-        <TimelinePlayhead
-          currentTime={currentTime}
-          duration={duration}
-          zoomLevel={zoomLevel}
-          tracks={tracks}
-          seek={seek}
-          rulerRef={rulerRef}
-          rulerScrollRef={rulerScrollRef}
-          trackLabelsRef={trackLabelsRef}
-          timelineRef={timelineRef}
-          playheadRef={playheadRef}
-          isSnappingToPlayhead={
-            showSnapIndicator && currentSnapPoint?.type === "playhead"
-          }
-        />
-        <SnapIndicator
-          snapPoint={currentSnapPoint}
-          zoomLevel={zoomLevel}
-          tracks={tracks}
-          timelineRef={timelineRef}
-          trackLabelsRef={trackLabelsRef}
-          isVisible={showSnapIndicator}
-        />
-        {/* Timeline Header with Ruler */}
-        <div className="flex bg-panel sticky top-0 z-10">
-          <div className="w-48 flex-shrink-0 bg-muted/30 border-r h-5 px-3" />
-
-          <div className="flex-1 overflow-hidden h-5">
-            <ScrollArea className="w-full" ref={rulerScrollRef}>
-              <TimelineCanvasRulerWrapper
-                ref={rulerRef}
-                onMouseDown={handleRulerMouseDown}
-              >
-                <TimelineCanvasRuler
-                  zoomLevel={zoomLevel}
-                  duration={duration}
-                  width={dynamicTimelineWidth}
-                />
-              </TimelineCanvasRulerWrapper>
-            </ScrollArea>
-          </div>
-        </div>
-
-        {/* Tracks Area */}
-        <ScrollArea className="w-full h-full">
-          <div
-            className="flex-1 flex overflow-hidden overflow-y-auto"
-            data-tracks-area
-          >
-            {/* Track Labels */}
-            {tracks.length > 0 && (
-              <div
-                ref={trackLabelsRef}
-                className="w-48 flex-shrink-0 border-r bg-panel-accent "
-                data-track-labels
-              >
-                <div className="flex flex-col gap-1" ref={trackLabelsScrollRef}>
-                  {tracks.map((track) => (
-                    <div
-                      key={track.id}
-                      className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
-                      style={{ height: `${getTrackHeight(track.type)}px` }}
-                    >
-                      <div className="flex items-center flex-1 min-w-0">
-                        <TrackIcon track={track} />
-                      </div>
-                      {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
-                          Muted
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Timeline Tracks Content */}
-            <div
-              className="flex-1 relative overflow-hidden"
-              onWheel={handleWheel}
-              onMouseDown={handleSelectionMouseDown}
-              onClick={handleTimelineContentClick}
-              ref={tracksContainerRef}
-            >
-              <SelectionBox
-                startPos={selectionBox?.startPos || null}
-                currentPos={selectionBox?.currentPos || null}
-                containerRef={tracksContainerRef}
-                isActive={selectionBox?.isActive || false}
-              />
-              <div
-                className="relative flex-1"
-                style={{
-                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
-                  width: `${dynamicTimelineWidth}px`,
-                }}
-              >
-                {tracks.length === 0 ? (
-                  <div></div>
-                ) : (
-                  <>
-                    {tracks.map((track, index) => (
-                      <ContextMenu key={track.id}>
-                        <ContextMenuTrigger asChild>
-                          <div
-                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
-                            style={{
-                              top: `${getCumulativeHeightBefore(tracks, index)}px`,
-                              height: `${getTrackHeight(track.type)}px`,
-                            }}
-                            onClick={(e) => {
-                              // If clicking empty area (not on a element), deselect all elements
-                              if (
-                                !(e.target as HTMLElement).closest(
-                                  ".timeline-element"
-                                )
-                              ) {
-                                clearSelectedElements();
-                              }
-                            }}
-                          >
-                            <TimelineTrackContent
-                              track={track}
-                              zoomLevel={zoomLevel}
-                              onSnapPointChange={handleSnapPointChange}
-                            />
-                          </div>
-                        </ContextMenuTrigger>
-                        <ContextMenuContent>
-                          <ContextMenuItem
-                            onClick={() => toggleTrackMute(track.id)}
-                          >
-                            {track.muted ? "Unmute Track" : "Mute Track"}
-                          </ContextMenuItem>
-                          <ContextMenuItem>
-                            Track settings (soon)
-                          </ContextMenuItem>
-                        </ContextMenuContent>
-                      </ContextMenu>
-                    ))}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-}
-
-function TrackIcon({ track }: { track: TimelineTrack }) {
-  return (
-    <>
-      {track.type === "media" && (
-        <Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-      )}
-      {track.type === "text" && (
-        <TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-      )}
-      {track.type === "audio" && (
-        <Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-      )}
-    </>
-  );
-}
+"use client";

+

+import { ScrollArea } from "../ui/scroll-area";

+import { Button } from "../ui/button";

+import {

+  Scissors,

+  ArrowLeftToLine,

+  ArrowRightToLine,

+  Trash2,

+  Snowflake,

+  Copy,

+  SplitSquareHorizontal,

+  Pause,

+  Play,

+  Video,

+  Music,

+  TypeIcon,

+  Lock,

+  ZoomIn,

+  ZoomOut,

+  LockOpen,

+} from "lucide-react";

+import {

+  Tooltip,

+  TooltipContent,

+  TooltipTrigger,

+  TooltipProvider,

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

+import {

+  ContextMenu,

+  ContextMenuContent,

+  ContextMenuItem,

+  ContextMenuTrigger,

+} from "../ui/context-menu";

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

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

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

+import { useProjectStore } from "@/stores/project-store";

+import { useTimelineZoom } from "@/hooks/use-timeline-zoom";

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

+import { toast } from "sonner";

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

+import { TimelineTrackContent } from "./timeline-track";

+import {

+  TimelinePlayhead,

+  useTimelinePlayheadRuler,

+} from "./timeline-playhead";

+import { SelectionBox } from "./selection-box";

+import { useSelectionBox } from "@/hooks/use-selection-box";

+import { SnapIndicator } from "./snap-indicator";

+import { SnapPoint } from "@/hooks/use-timeline-snapping";

+import type { DragData, TimelineTrack } from "@/types/timeline";

+import {

+  getTrackHeight,

+  getCumulativeHeightBefore,

+  getTotalTracksHeight,

+  TIMELINE_CONSTANTS,

+  snapTimeToFrame,

+} from "@/constants/timeline-constants";

+import { Slider } from "../ui/slider";

+import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";

+import TimelineCanvasRulerWrapper from "./timeline-canvas/timeline-canvas-ruler-wrapper";

+

+export function Timeline() {

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

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

+  // elements can be trimmed, deleted, and moved.

+

+  const {

+    tracks,

+    addTrack,

+    addElementToTrack,

+    removeElementFromTrack,

+    getTotalDuration,

+    selectedElements,

+    clearSelectedElements,

+    setSelectedElements,

+    splitElement,

+    splitAndKeepLeft,

+    splitAndKeepRight,

+    toggleTrackMute,

+    separateAudio,

+    undo,

+    redo,

+    snappingEnabled,

+    toggleSnapping,

+    dragState,

+  } = useTimelineStore();

+  const { mediaItems, addMediaItem } = useMediaStore();

+  const { activeProject } = useProjectStore();

+  const { currentTime, duration, seek, setDuration, isPlaying, toggle } =

+    usePlaybackStore();

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

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

+  const [progress, setProgress] = useState(0);

+  const dragCounterRef = useRef(0);

+  const timelineRef = useRef<HTMLDivElement>(null);

+  const rulerRef = useRef<HTMLDivElement>(null);

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

+

+  // Timeline zoom functionality

+  const {

+    zoomLevel,

+    zoomStep,

+    handleChangeZoomLevel,

+    handleChangeZoomStep,

+    handleWheel,

+  } = useTimelineZoom();

+

+  // Old marquee selection removed - using new SelectionBox component instead

+

+  // Dynamic timeline width calculation based on playhead position and duration

+  const dynamicTimelineWidth = Math.max(

+    (duration || 0) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Base width from duration

+    (currentTime + 30) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel, // Width to show current time + 30 seconds buffer

+    timelineRef.current?.clientWidth || 1000 // Minimum width

+  );

+

+  // Scroll synchronization and auto-scroll to playhead

+  const rulerScrollRef = useRef<HTMLDivElement>(null);

+  const trackLabelsRef = useRef<HTMLDivElement>(null);

+  const playheadRef = useRef<HTMLDivElement>(null);

+  const trackLabelsScrollRef = useRef<HTMLDivElement>(null);

+  const isUpdatingRef = useRef(false);

+  const lastRulerSync = useRef(0);

+  const lastTracksSync = useRef(0);

+  const lastVerticalSync = useRef(0);

+

+  // Timeline playhead ruler handlers

+  const { handleRulerMouseDown } = useTimelinePlayheadRuler({

+    currentTime,

+    duration,

+    zoomLevel,

+    seek,

+    rulerRef,

+    rulerScrollRef,

+  });

+

+  // Selection box functionality

+  const tracksContainerRef = useRef<HTMLDivElement>(null);

+  const {

+    selectionBox,

+    handleMouseDown: handleSelectionMouseDown,

+    isSelecting,

+    justFinishedSelecting,

+  } = useSelectionBox({

+    containerRef: tracksContainerRef,

+    playheadRef,

+    onSelectionComplete: (elements) => {

+      console.log(JSON.stringify({ onSelectionComplete: elements.length }));

+      setSelectedElements(elements);

+    },

+  });

+

+  // Calculate snap indicator state

+  const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(

+    null

+  );

+  const showSnapIndicator =

+    dragState.isDragging && snappingEnabled && currentSnapPoint !== null;

+

+  // Callback to handle snap point changes from TimelineTrackContent

+  const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {

+    setCurrentSnapPoint(snapPoint);

+  }, []);

+

+  // Timeline content click to seek handler

+  const handleTimelineContentClick = useCallback(

+    (e: React.MouseEvent) => {

+      console.log(

+        JSON.stringify({

+          timelineClick: {

+            isSelecting,

+            justFinishedSelecting,

+            willReturn: isSelecting || justFinishedSelecting,

+          },

+        })

+      );

+

+      // Don't seek if this was a selection box operation

+      if (isSelecting || justFinishedSelecting) {

+        return;

+      }

+

+      // Don't seek if clicking on timeline elements, but still deselect

+      if ((e.target as HTMLElement).closest(".timeline-element")) {

+        return;

+      }

+

+      // Don't seek if clicking on playhead

+      if (playheadRef.current?.contains(e.target as Node)) {

+        return;

+      }

+

+      // Don't seek if clicking on track labels

+      if ((e.target as HTMLElement).closest("[data-track-labels]")) {

+        clearSelectedElements();

+        return;

+      }

+

+      // Clear selected elements when clicking empty timeline area

+      console.log(JSON.stringify({ clearingSelectedElements: true }));

+      clearSelectedElements();

+

+      // Determine if we're clicking in ruler or tracks area

+      const isTracksAreaClick = (e.target as HTMLElement).closest(

+        "[data-tracks-area]"

+      );

+

+      let mouseX: number;

+      let scrollLeft = 0;

+

+      if (isTracksAreaClick) {

+        // Calculate based on ruler position

+        const rulerContent = rulerScrollRef.current?.querySelector(

+          "[data-radix-scroll-area-viewport]"

+        ) as HTMLElement;

+        if (!rulerContent) return;

+        const rect = rulerContent.getBoundingClientRect();

+        mouseX = e.clientX - rect.left;

+        scrollLeft = rulerContent.scrollLeft;

+      } else {

+        return;

+      }

+

+      const rawTime = Math.max(

+        0,

+        Math.min(

+          duration,

+          (mouseX + scrollLeft) /

+            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)

+        )

+      );

+

+      // Use frame snapping for timeline clicking

+      const projectFps = activeProject?.fps || 30;

+      const time = snapTimeToFrame(rawTime, projectFps);

+

+      seek(time);

+    },

+    [

+      duration,

+      zoomLevel,

+      seek,

+      rulerScrollRef,

+      clearSelectedElements,

+      isSelecting,

+      justFinishedSelecting,

+    ]

+  );

+

+  // Update timeline duration when tracks change

+  useEffect(() => {

+    const totalDuration = getTotalDuration();

+    setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline

+  }, [tracks, setDuration, getTotalDuration]);

+

+  // Old marquee system removed - using new SelectionBox component instead

+

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

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

+    e.preventDefault();

+    // Don't show overlay for timeline elements - they're handled by tracks

+    if (e.dataTransfer.types.includes("application/x-timeline-element")) {

+      return;

+    }

+    dragCounterRef.current += 1;

+    if (!isDragOver) {

+      setIsDragOver(true);

+    }

+  };

+

+  const handleDragOver = (e: React.DragEvent) => {

+    e.preventDefault();

+  };

+

+  const handleDragLeave = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Don't update state for timeline elements - they're handled by tracks

+    if (e.dataTransfer.types.includes("application/x-timeline-element")) {

+      return;

+    }

+

+    dragCounterRef.current -= 1;

+    if (dragCounterRef.current === 0) {

+      setIsDragOver(false);

+    }

+  };

+

+  const handleDrop = async (e: React.DragEvent) => {

+    // When media is dropped, add it as a new track/element

+    e.preventDefault();

+    setIsDragOver(false);

+    dragCounterRef.current = 0;

+

+    // Ignore timeline element drags - they're handled by track-specific handlers

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    if (hasTimelineElement) {

+      return;

+    }

+

+    const itemData = e.dataTransfer.getData("application/x-media-item");

+    if (itemData) {

+      try {

+        const dragData: DragData = JSON.parse(itemData);

+

+        if (dragData.type === "text") {

+          // Always create new text track to avoid overlaps

+          useTimelineStore.getState().addTextToNewTrack(dragData);

+        } else {

+          // Handle media items

+          const mediaItem = mediaItems.find(

+            (item: any) => item.id === dragData.id

+          );

+          if (!mediaItem) {

+            toast.error("Media item not found");

+            return;

+          }

+

+          useTimelineStore.getState().addMediaToNewTrack(mediaItem);

+        }

+      } catch (error) {

+        console.error("Error parsing dropped item data:", error);

+        toast.error("Failed to add item to timeline");

+      }

+    } else if (e.dataTransfer.files?.length > 0) {

+      // Handle file drops by creating new tracks

+      if (!activeProject) {

+        toast.error("No active project");

+        return;

+      }

+

+      setIsProcessing(true);

+      setProgress(0);

+      try {

+        const processedItems = await processMediaFiles(

+          e.dataTransfer.files,

+          (p) => setProgress(p)

+        );

+        for (const processedItem of processedItems) {

+          await addMediaItem(activeProject.id, processedItem);

+          const currentMediaItems = useMediaStore.getState().mediaItems;

+          const addedItem = currentMediaItems.find(

+            (item) =>

+              item.name === processedItem.name && item.url === processedItem.url

+          );

+          if (addedItem) {

+            useTimelineStore.getState().addMediaToNewTrack(addedItem);

+          }

+        }

+      } catch (error) {

+        // Show error if file processing fails

+        console.error("Error processing external files:", error);

+        toast.error("Failed to process dropped files");

+      } finally {

+        setIsProcessing(false);

+        setProgress(0);

+      }

+    }

+  };

+

+  const dragProps = {

+    onDragEnter: handleDragEnter,

+    onDragOver: handleDragOver,

+    onDragLeave: handleDragLeave,

+    onDrop: handleDrop,

+  };

+

+  // Action handlers for toolbar

+  const handleSplitSelected = () => {

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

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

+      return;

+    }

+    let splitCount = 0;

+    selectedElements.forEach(({ trackId, elementId }) => {

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

+      const element = track?.elements.find((c) => c.id === elementId);

+      if (element && track) {

+        const effectiveStart = element.startTime;

+        const effectiveEnd =

+          element.startTime +

+          (element.duration - element.trimStart - element.trimEnd);

+

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

+          const newElementId = splitElement(trackId, elementId, currentTime);

+          if (newElementId) splitCount++;

+        }

+      }

+    });

+    if (splitCount === 0) {

+      toast.error("Playhead must be within selected elements to split");

+    }

+  };

+

+  const handleDuplicateSelected = () => {

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

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

+      return;

+    }

+    const canDuplicate = selectedElements.length === 1;

+    if (!canDuplicate) return;

+

+    const newSelections: { trackId: string; elementId: string }[] = [];

+

+    selectedElements.forEach(({ trackId, elementId }) => {

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

+      const element = track?.elements.find((el) => el.id === elementId);

+

+      if (element) {

+        const newStartTime =

+          element.startTime +

+          (element.duration - element.trimStart - element.trimEnd) +

+          0.1;

+

+        // Create element without id (will be generated by store)

+        const { id, ...elementWithoutId } = element;

+

+        addElementToTrack(trackId, {

+          ...elementWithoutId,

+          startTime: newStartTime,

+        });

+

+        // We can't predict the new id, so just clear selection for now

+        // TODO: addElementToTrack could return the new element id

+      }

+    });

+

+    clearSelectedElements();

+  };

+

+  const handleFreezeSelected = () => {

+    toast.info("Freeze frame functionality coming soon!");

+  };

+

+  const handleSplitAndKeepLeft = () => {

+    if (selectedElements.length !== 1) {

+      toast.error("Select exactly one element");

+      return;

+    }

+    const { trackId, elementId } = selectedElements[0];

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

+    const element = track?.elements.find((c) => c.id === elementId);

+    if (!element) return;

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {

+      toast.error("Playhead must be within selected element");

+      return;

+    }

+    splitAndKeepLeft(trackId, elementId, currentTime);

+  };

+

+  const handleSplitAndKeepRight = () => {

+    if (selectedElements.length !== 1) {

+      toast.error("Select exactly one element");

+      return;

+    }

+    const { trackId, elementId } = selectedElements[0];

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

+    const element = track?.elements.find((c) => c.id === elementId);

+    if (!element) return;

+    const effectiveStart = element.startTime;

+    const effectiveEnd =

+      element.startTime +

+      (element.duration - element.trimStart - element.trimEnd);

+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {

+      toast.error("Playhead must be within selected element");

+      return;

+    }

+    splitAndKeepRight(trackId, elementId, currentTime);

+  };

+

+  const handleSeparateAudio = () => {

+    if (selectedElements.length !== 1) {

+      toast.error("Select exactly one media element to separate audio");

+      return;

+    }

+    const { trackId, elementId } = selectedElements[0];

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

+    if (!track || track.type !== "media") {

+      toast.error("Select a media element to separate audio");

+      return;

+    }

+    separateAudio(trackId, elementId);

+  };

+

+  const handleDeleteSelected = () => {

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

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

+      return;

+    }

+    selectedElements.forEach(({ trackId, elementId }) => {

+      removeElementFromTrack(trackId, elementId);

+    });

+    clearSelectedElements();

+  };

+

+  // --- Scroll synchronization effect ---

+  useEffect(() => {

+    const rulerViewport = rulerScrollRef.current?.querySelector(

+      "[data-radix-scroll-area-viewport]"

+    ) as HTMLElement;

+    const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(

+      "[data-radix-scroll-area-viewport]"

+    ) as HTMLElement;

+

+    if (!rulerViewport) return;

+

+    // Horizontal scroll synchronization between ruler and tracks

+    const handleRulerScroll = () => {

+      const now = Date.now();

+      if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;

+      lastRulerSync.current = now;

+      isUpdatingRef.current = true;

+      isUpdatingRef.current = false;

+    };

+    const handleTracksScroll = () => {

+      const now = Date.now();

+      if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;

+      lastTracksSync.current = now;

+      isUpdatingRef.current = true;

+      isUpdatingRef.current = false;

+    };

+

+    rulerViewport.addEventListener("scroll", handleRulerScroll);

+

+    // Vertical scroll synchronization between track labels and tracks content

+    if (trackLabelsViewport) {

+      const handleTrackLabelsScroll = () => {

+        const now = Date.now();

+        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)

+          return;

+        lastVerticalSync.current = now;

+        isUpdatingRef.current = true;

+        isUpdatingRef.current = false;

+      };

+      const handleTracksVerticalScroll = () => {

+        const now = Date.now();

+        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)

+          return;

+        lastVerticalSync.current = now;

+        isUpdatingRef.current = true;

+        isUpdatingRef.current = false;

+      };

+

+      trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);

+

+      return () => {

+        rulerViewport.removeEventListener("scroll", handleRulerScroll);

+        trackLabelsViewport.removeEventListener(

+          "scroll",

+          handleTrackLabelsScroll

+        );

+      };

+    }

+

+    return () => {

+      rulerViewport.removeEventListener("scroll", handleRulerScroll);

+    };

+  }, []);

+

+  return (

+    <div

+      className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`}

+      {...dragProps}

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

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

+    >

+      {/* Toolbar */}

+      <div className="border-b flex items-center justify-between px-2 py-1">

+        <div className="flex items-center gap-1 w-full">

+          <TooltipProvider delayDuration={500}>

+            {/* Play/Pause Button */}

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={toggle}

+                  className="mr-2"

+                >

+                  {isPlaying ? (

+                    <Pause className="h-4 w-4" />

+                  ) : (

+                    <Play className="h-4 w-4" />

+                  )}

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>

+                {isPlaying ? "Pause (Space)" : "Play (Space)"}

+              </TooltipContent>

+            </Tooltip>

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

+            {/* Time Display */}

+            <div

+              className="text-xs text-muted-foreground font-mono px-2"

+              style={{ minWidth: "18ch", textAlign: "center" }}

+            >

+              {currentTime.toFixed(1)}s / {duration.toFixed(1)}s

+            </div>

+            {/* Test Clip Button - for debugging */}

+            {tracks.length === 0 && (

+              <>

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

+                <Tooltip>

+                  <TooltipTrigger asChild>

+                    <Button

+                      variant="outline"

+                      size="sm"

+                      onClick={() => {

+                        const trackId = addTrack("media");

+                        addElementToTrack(trackId, {

+                          type: "media",

+                          mediaId: "test",

+                          name: "Test Clip",

+                          duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,

+                          startTime: 0,

+                          trimStart: 0,

+                          trimEnd: 0,

+                        });

+                      }}

+                      className="text-xs"

+                    >

+                      Add Test Clip

+                    </Button>

+                  </TooltipTrigger>

+                  <TooltipContent>

+                    Add a test clip to try playback

+                  </TooltipContent>

+                </Tooltip>

+              </>

+            )}

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

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleSplitSelected}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Split element (Ctrl+S)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleSplitAndKeepLeft}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleSplitAndKeepRight}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleSeparateAudio}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleDuplicateSelected}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleFreezeSelected}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Freeze frame (F)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={handleDeleteSelected}

+                >

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

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Delete element (Delete)</TooltipContent>

+            </Tooltip>

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  className="ml-auto"

+                  variant="text"

+                  size="icon"

+                  onClick={() => handleChangeZoomLevel(zoomLevel - 0.15)}

+                >

+                  <ZoomOut className="h-4 w-4" />

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Zoom Out</TooltipContent>

+            </Tooltip>

+            <Slider

+              className="max-w-24"

+              max={TIMELINE_CONSTANTS.MAX_ZOOM_STEP}

+              min={0}

+              step={1}

+              value={[zoomStep]}

+              onValueChange={(value) => handleChangeZoomStep(value[0])}

+            />

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="text"

+                  size="icon"

+                  onClick={() => handleChangeZoomLevel(zoomLevel + 0.15)}

+                >

+                  <ZoomIn className="h-4 w-4" />

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Zoom In</TooltipContent>

+            </Tooltip>

+          </TooltipProvider>

+        </div>

+        <div className="flex items-center gap-1">

+          <TooltipProvider delayDuration={500}>

+            <Tooltip>

+              <TooltipTrigger asChild>

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

+                  {snappingEnabled ? (

+                    <Lock className="h-4 w-4" />

+                  ) : (

+                    <LockOpen className="h-4 w-4 text-primary" />

+                  )}

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Auto snapping</TooltipContent>

+            </Tooltip>

+          </TooltipProvider>

+        </div>

+      </div>

+

+      {/* Timeline Container */}

+      <div

+        className="flex-1 flex flex-col overflow-hidden relative"

+        ref={timelineRef}

+      >

+        <TimelinePlayhead

+          currentTime={currentTime}

+          duration={duration}

+          zoomLevel={zoomLevel}

+          tracks={tracks}

+          seek={seek}

+          rulerRef={rulerRef}

+          rulerScrollRef={rulerScrollRef}

+          trackLabelsRef={trackLabelsRef}

+          timelineRef={timelineRef}

+          playheadRef={playheadRef}

+          isSnappingToPlayhead={

+            showSnapIndicator && currentSnapPoint?.type === "playhead"

+          }

+        />

+        <SnapIndicator

+          snapPoint={currentSnapPoint}

+          zoomLevel={zoomLevel}

+          tracks={tracks}

+          timelineRef={timelineRef}

+          trackLabelsRef={trackLabelsRef}

+          isVisible={showSnapIndicator}

+        />

+        {/* Timeline Header with Ruler */}

+        <div className="flex bg-panel sticky top-0 z-10">

+          <div className="w-48 flex-shrink-0 bg-muted/30 border-r h-5 px-3" />

+

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

+            <ScrollArea className="w-full" ref={rulerScrollRef}>

+              <TimelineCanvasRulerWrapper

+                ref={rulerRef}

+                onMouseDown={handleRulerMouseDown}

+              >

+                <TimelineCanvasRuler

+                  zoomLevel={zoomLevel}

+                  duration={duration}

+                  width={dynamicTimelineWidth}

+                />

+              </TimelineCanvasRulerWrapper>

+            </ScrollArea>

+          </div>

+        </div>

+

+        {/* Tracks Area */}

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

+          <div

+            className="flex-1 flex overflow-hidden overflow-y-auto"

+            data-tracks-area

+          >

+            {/* Track Labels */}

+            {tracks.length > 0 && (

+              <div

+                ref={trackLabelsRef}

+                className="w-48 flex-shrink-0 border-r bg-panel-accent "

+                data-track-labels

+              >

+                <div className="flex flex-col gap-1" ref={trackLabelsScrollRef}>

+                  {tracks.map((track) => (

+                    <div

+                      key={track.id}

+                      className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"

+                      style={{ height: `${getTrackHeight(track.type)}px` }}

+                    >

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

+                        <TrackIcon track={track} />

+                      </div>

+                      {track.muted && (

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

+                          Muted

+                        </span>

+                      )}

+                    </div>

+                  ))}

+                </div>

+              </div>

+            )}

+

+            {/* Timeline Tracks Content */}

+            <div

+              className="flex-1 relative overflow-hidden"

+              onWheel={handleWheel}

+              onMouseDown={handleSelectionMouseDown}

+              onClick={handleTimelineContentClick}

+              ref={tracksContainerRef}

+            >

+              <SelectionBox

+                startPos={selectionBox?.startPos || null}

+                currentPos={selectionBox?.currentPos || null}

+                containerRef={tracksContainerRef}

+                isActive={selectionBox?.isActive || false}

+              />

+              <div

+                className="relative flex-1"

+                style={{

+                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,

+                  width: `${dynamicTimelineWidth}px`,

+                }}

+              >

+                {tracks.length === 0 ? (

+                  <div></div>

+                ) : (

+                  <>

+                    {tracks.map((track, index) => (

+                      <ContextMenu key={track.id}>

+                        <ContextMenuTrigger asChild>

+                          <div

+                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"

+                            style={{

+                              top: `${getCumulativeHeightBefore(tracks, index)}px`,

+                              height: `${getTrackHeight(track.type)}px`,

+                            }}

+                            onClick={(e) => {

+                              // If clicking empty area (not on a element), deselect all elements

+                              if (

+                                !(e.target as HTMLElement).closest(

+                                  ".timeline-element"

+                                )

+                              ) {

+                                clearSelectedElements();

+                              }

+                            }}

+                          >

+                            <TimelineTrackContent

+                              track={track}

+                              zoomLevel={zoomLevel}

+                              onSnapPointChange={handleSnapPointChange}

+                            />

+                          </div>

+                        </ContextMenuTrigger>

+                        <ContextMenuContent>

+                          <ContextMenuItem

+                            onClick={() => toggleTrackMute(track.id)}

+                          >

+                            {track.muted ? "Unmute Track" : "Mute Track"}

+                          </ContextMenuItem>

+                          <ContextMenuItem>

+                            Track settings (soon)

+                          </ContextMenuItem>

+                        </ContextMenuContent>

+                      </ContextMenu>

+                    ))}

+                  </>

+                )}

+              </div>

+            </div>

+          </div>

+        </ScrollArea>

+      </div>

+    </div>

+  );

+}

+

+function TrackIcon({ track }: { track: TimelineTrack }) {

+  return (

+    <>

+      {track.type === "media" && (

+        <Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />

+      )}

+      {track.type === "text" && (

+        <TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />

+      )}

+      {track.type === "audio" && (

+        <Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />

+      )}

+    </>

+  );

+}