Merge branch 'staging'

1 files changed, 470 insertions, 470 deletions

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>

+  );

+}