@hyperframes/studio 0.1.10 → 0.1.12

package/src/player/components/Timeline.tsx

@@ -1,12 +1,15 @@
 import { useRef, useMemo, useCallback, useState, memo, type ReactNode } from "react";
 import { usePlayerStore, liveTime } from "../store/playerStore";
-import { useMountEffect } from "../lib/useMountEffect";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { formatTime } from "../lib/time";
+import { TimelineClip } from "./TimelineClip";
+import { EditPopover } from "./EditModal";
 
 /* ── Layout ─────────────────────────────────────────────────────── */
 const GUTTER = 32;
-const TRACK_H = 28;
+const TRACK_H = 72;
 const RULER_H = 24;
-const CLIP_Y = 2; // vertical inset inside track
+const CLIP_Y = 3; // vertical inset inside track
 
 /* ── Vibrant Color System (Figma-inspired, dark-mode adapted) ──── */
 interface TrackStyle {
@@ -22,7 +25,7 @@ interface TrackStyle {
   icon: ReactNode;
 }
 
-/* ── Icons from Figma HyperFrames design system ── */
+/* ── Icons from Figma Motion Cut design system ── */
 const ICON_BASE = "/icons/timeline";
 function TimelineIcon({ src }: { src: string }) {
   return (
@@ -124,15 +127,21 @@ function getStyle(tag: string): TrackStyle {
 }
 
 /* ── Tick Generation ────────────────────────────────────────────── */
-function generateTicks(duration: number): { major: number[]; minor: number[] } {
-  if (duration <= 0) return { major: [], minor: [] };
+export function generateTicks(duration: number): { major: number[]; minor: number[] } {
+  if (duration <= 0 || !Number.isFinite(duration) || duration > 7200)
+    return { major: [], minor: [] };
   const intervals = [0.5, 1, 2, 5, 10, 15, 30, 60];
   const target = duration / 6;
   const majorInterval = intervals.find((i) => i >= target) ?? 60;
-  const minorInterval = majorInterval / 2;
+  const minorInterval = Math.max(0.25, majorInterval / 2);
   const major: number[] = [];
   const minor: number[] = [];
-  for (let t = 0; t <= duration + 0.001; t += minorInterval) {
+  const maxTicks = 500; // Safety cap to prevent infinite loop
+  for (
+    let t = 0;
+    t <= duration + 0.001 && major.length + minor.length < maxTicks;
+    t += minorInterval
+  ) {
     const rounded = Math.round(t * 100) / 100;
     const isMajor =
       Math.abs(rounded % majorInterval) < 0.01 ||
@@ -143,11 +152,8 @@ function generateTicks(duration: number): { major: number[]; minor: number[] } {
   return { major, minor };
 }
 
-function formatTick(s: number): string {
-  const m = Math.floor(s / 60);
-  const sec = Math.floor(s % 60);
-  return `${m}:${sec.toString().padStart(2, "0")}`;
-}
+/** @deprecated Use formatTime from '../lib/time' instead */
+export const formatTick = formatTime;
 
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
@@ -155,67 +161,250 @@ interface TimelineProps {
   onSeek?: (time: number) => void;
   /** Called when user double-clicks a composition clip to drill into it */
   onDrillDown?: (element: import("../store/playerStore").TimelineElement) => void;
+  /** Optional custom content renderer for clips (thumbnails, waveforms, etc.) */
+  renderClipContent?: (
+    element: import("../store/playerStore").TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  /** Optional overlay renderer for clips (e.g. badges, cursors) */
+  renderClipOverlay?: (element: import("../store/playerStore").TimelineElement) => ReactNode;
+  /** Called when files are dropped onto the empty timeline */
+  onFileDrop?: (files: File[]) => void;
+  /** Called when a clip is moved, resized, or changes track via drag */
+  onClipChange?: (
+    elementId: string,
+    updates: { start?: number; duration?: number; track?: number },
+  ) => void;
 }
 
-export const Timeline = memo(function Timeline({ onSeek, onDrillDown }: TimelineProps = {}) {
+export const Timeline = memo(function Timeline({
+  onSeek,
+  onDrillDown,
+  renderClipContent,
+  renderClipOverlay,
+  onFileDrop,
+}: TimelineProps = {}) {
   const elements = usePlayerStore((s) => s.elements);
   const duration = usePlayerStore((s) => s.duration);
   const timelineReady = usePlayerStore((s) => s.timelineReady);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
-  const activeEdits = usePlayerStore((s) => s.activeEdits);
+  const zoomMode = usePlayerStore((s) => s.zoomMode);
+  const manualPps = usePlayerStore((s) => s.pixelsPerSecond);
   const playheadRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const [hoveredClip, setHoveredClip] = useState<string | null>(null);
   const isDragging = useRef(false);
+  // Range selection (Shift+drag)
+  const [shiftHeld, setShiftHeld] = useState(false);
+  useMountEffect(() => {
+    const down = (e: KeyboardEvent) => e.key === "Shift" && setShiftHeld(true);
+    const up = (e: KeyboardEvent) => e.key === "Shift" && setShiftHeld(false);
+    const blur = () => setShiftHeld(false);
+    window.addEventListener("keydown", down);
+    window.addEventListener("keyup", up);
+    window.addEventListener("blur", blur);
+    return () => {
+      window.removeEventListener("keydown", down);
+      window.removeEventListener("keyup", up);
+      window.removeEventListener("blur", blur);
+    };
+  });
+  const isRangeSelecting = useRef(false);
+  const rangeAnchorTime = useRef(0);
+  const [rangeSelection, setRangeSelection] = useState<{
+    start: number;
+    end: number;
+    anchorX: number;
+    anchorY: number;
+  } | null>(null);
+  const [showPopover, setShowPopover] = useState(false);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const roRef = useRef<ResizeObserver | null>(null);
+
+  // Callback ref: sets up ResizeObserver when the DOM element actually mounts.
+  // useMountEffect can't work here because the component returns null on first
+  // render (timelineReady=false), so containerRef.current is null when the
+  // effect fires and the ResizeObserver is never created.
+  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = el;
+    if (!el) return;
+    setViewportWidth(el.clientWidth);
+    roRef.current = new ResizeObserver(([entry]) => {
+      setViewportWidth(entry.contentRect.width);
+    });
+    roRef.current.observe(el);
+  }, []);
+
+  // Clean up ResizeObserver on unmount
+  useMountEffect(() => () => {
+    roRef.current?.disconnect();
+  });
 
-  const durationRef = useRef(duration);
-  durationRef.current = duration;
+  // Effective duration: max of store duration and the furthest element end.
+  // processTimelineMessage updates elements but not duration, so elements can
+  // extend beyond the store's duration — this ensures fit mode shows everything.
+  const effectiveDuration = useMemo(() => {
+    const safeDur = Number.isFinite(duration) ? duration : 0;
+    if (elements.length === 0) return safeDur;
+    const maxEnd = Math.max(...elements.map((el) => el.start + el.duration));
+    const result = Math.max(safeDur, maxEnd);
+    return Number.isFinite(result) ? result : safeDur;
+  }, [elements, duration]);
+
+  // Calculate effective pixels per second
+  // In fit mode, use clientWidth (excludes scrollbar) with a small padding
+  const fitPps =
+    viewportWidth > GUTTER && effectiveDuration > 0
+      ? (viewportWidth - GUTTER - 2) / effectiveDuration
+      : 100;
+  const pps = zoomMode === "fit" ? fitPps : manualPps;
+  const trackContentWidth = Math.max(0, effectiveDuration * pps);
+
+  const durationRef = useRef(effectiveDuration);
+  durationRef.current = effectiveDuration;
+  const ppsRef = useRef(pps);
+  ppsRef.current = pps;
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       const dur = durationRef.current;
       if (!playheadRef.current || dur <= 0) return;
-      const pct = (t / dur) * 100;
-      playheadRef.current.style.left = `calc(${GUTTER}px + (100% - ${GUTTER}px) * ${pct / 100})`;
+      const px = t * ppsRef.current;
+      playheadRef.current.style.left = `${GUTTER + px}px`;
+
+      // Auto-scroll to follow playhead during playback or seeking
+      const scroll = scrollRef.current;
+      if (scroll && !isDragging.current) {
+        const playheadX = GUTTER + px;
+        const visibleRight = scroll.scrollLeft + scroll.clientWidth;
+        const visibleLeft = scroll.scrollLeft;
+        const edgeMargin = scroll.clientWidth * 0.12;
+
+        if (playheadX > visibleRight - edgeMargin) {
+          // Playhead near right edge — page forward
+          scroll.scrollLeft = playheadX - scroll.clientWidth * 0.15;
+        } else if (playheadX < visibleLeft + GUTTER) {
+          // Playhead before visible area (e.g. loop) — jump back
+          scroll.scrollLeft = Math.max(0, playheadX - GUTTER);
+        }
+      }
     });
     return unsub;
   });
 
+  const dragScrollRaf = useRef(0);
+
   const seekFromX = useCallback(
     (clientX: number) => {
-      const el = containerRef.current;
-      if (!el || duration <= 0) return;
+      const el = scrollRef.current;
+      if (!el || effectiveDuration <= 0) return;
       const rect = el.getBoundingClientRect();
-      const start = rect.left + GUTTER;
-      const w = rect.width - GUTTER;
-      if (w <= 0) return;
-      const pct = Math.max(0, Math.min(1, (clientX - start) / w));
-      const time = pct * duration;
-      // Notify liveTime for instant visual update (direct DOM, no re-render)
+      const scrollLeft = el.scrollLeft;
+      const x = clientX - rect.left + scrollLeft - GUTTER;
+      if (x < 0) return;
+      const time = Math.max(0, Math.min(effectiveDuration, x / pps));
       liveTime.notify(time);
-      // Call parent's onSeek to actually seek the iframe/player
       onSeek?.(time);
     },
-    [duration, onSeek],
+    [effectiveDuration, onSeek, pps],
+  );
+
+  // Auto-scroll the timeline when dragging the playhead near edges
+  const autoScrollDuringDrag = useCallback(
+    (clientX: number) => {
+      cancelAnimationFrame(dragScrollRaf.current);
+      const el = scrollRef.current;
+      if (!el || !isDragging.current) return;
+      const rect = el.getBoundingClientRect();
+      const edgeZone = 40;
+      const maxSpeed = 12;
+      let scrollDelta = 0;
+
+      if (clientX < rect.left + edgeZone) {
+        // Near left edge — scroll left
+        const proximity = Math.max(0, 1 - (clientX - rect.left) / edgeZone);
+        scrollDelta = -maxSpeed * proximity;
+      } else if (clientX > rect.right - edgeZone) {
+        // Near right edge — scroll right
+        const proximity = Math.max(0, 1 - (rect.right - clientX) / edgeZone);
+        scrollDelta = maxSpeed * proximity;
+      }
+
+      if (scrollDelta !== 0) {
+        el.scrollLeft += scrollDelta;
+        seekFromX(clientX);
+        dragScrollRaf.current = requestAnimationFrame(() => autoScrollDuringDrag(clientX));
+      }
+    },
+    [seekFromX],
   );
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
       if ((e.target as HTMLElement).closest("[data-clip]")) return;
-      isDragging.current = true;
+      if (e.button !== 0) return;
       (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+
+      // Shift+click starts range selection
+      if (e.shiftKey) {
+        isRangeSelecting.current = true;
+        setShowPopover(false);
+        const rect = scrollRef.current?.getBoundingClientRect();
+        if (rect) {
+          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+          const time = Math.max(0, x / pps);
+          rangeAnchorTime.current = time;
+          setRangeSelection({ start: time, end: time, anchorX: e.clientX, anchorY: e.clientY });
+        }
+        return;
+      }
+
+      isDragging.current = true;
+      setRangeSelection(null);
+      setShowPopover(false);
       seekFromX(e.clientX);
     },
-    [seekFromX],
+    [seekFromX, pps],
   );
   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
-      if (isDragging.current) seekFromX(e.clientX);
+      if (isRangeSelecting.current) {
+        const rect = scrollRef.current?.getBoundingClientRect();
+        if (rect) {
+          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+          const time = Math.max(0, x / pps);
+          setRangeSelection((prev) =>
+            prev ? { ...prev, end: time, anchorX: e.clientX, anchorY: e.clientY } : null,
+          );
+        }
+        return;
+      }
+      if (!isDragging.current) return;
+      seekFromX(e.clientX);
+      autoScrollDuringDrag(e.clientX);
     },
-    [seekFromX],
+    [seekFromX, autoScrollDuringDrag, pps],
   );
   const handlePointerUp = useCallback(() => {
+    if (isRangeSelecting.current) {
+      isRangeSelecting.current = false;
+      // Show popover if range is meaningful (> 0.2s)
+      setRangeSelection((prev) => {
+        if (prev && Math.abs(prev.end - prev.start) > 0.2) {
+          setShowPopover(true);
+          return prev;
+        }
+        return null;
+      });
+      return;
+    }
     isDragging.current = false;
+    cancelAnimationFrame(dragScrollRaf.current);
   }, []);
 
   const tracks = useMemo(() => {
@@ -237,13 +426,101 @@ export const Timeline = memo(function Timeline({ onSeek, onDrillDown }: Timeline
     return map;
   }, [tracks]);
 
-  const { major, minor } = useMemo(() => generateTicks(duration), [duration]);
+  const { major, minor } = useMemo(() => generateTicks(effectiveDuration), [effectiveDuration]);
+
+  const [isDragOver, setIsDragOver] = useState(false);
 
-  if (!timelineReady) return null;
-  if (elements.length === 0) {
+  if (!timelineReady || elements.length === 0) {
     return (
-      <div className="px-3 py-3 text-2xs text-neutral-600 border-t border-neutral-800/50">
-        No timeline elements
+      <div
+        className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
+          isDragOver ? "border-blue-500/50 bg-blue-500/[0.03]" : "border-neutral-800/50"
+        }`}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        }}
+        onDragLeave={() => setIsDragOver(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setIsDragOver(false);
+          if (onFileDrop && e.dataTransfer.files.length > 0) {
+            onFileDrop(Array.from(e.dataTransfer.files));
+          }
+        }}
+      >
+        {/* Ruler */}
+        <div
+          className="flex-shrink-0 border-b border-neutral-800/40 flex items-end relative"
+          style={{ height: RULER_H, paddingLeft: GUTTER }}
+        >
+          {[0, 10, 20, 30, 40, 50].map((s) => (
+            <div
+              key={s}
+              className="flex flex-col items-center"
+              style={{ position: "absolute", left: GUTTER + s * 14 }}
+            >
+              <span className="text-[9px] text-neutral-600 font-mono tabular-nums leading-none mb-0.5">
+                {`${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`}
+              </span>
+              <div className="w-px h-[5px] bg-neutral-700/40" />
+            </div>
+          ))}
+        </div>
+        {/* Empty drop zone */}
+        <div className="flex-1 flex items-center justify-center">
+          <div
+            className={`flex items-center gap-3 px-6 py-3 border border-dashed rounded-lg transition-colors duration-150 ${
+              isDragOver ? "border-blue-400/60 bg-blue-500/[0.06]" : "border-neutral-700/50"
+            }`}
+          >
+            {isDragOver ? (
+              <>
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-blue-400 flex-shrink-0"
+                >
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+                <span className="text-[13px] text-blue-400">Drop media files to import</span>
+              </>
+            ) : (
+              <>
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-neutral-600 flex-shrink-0"
+                >
+                  <rect x="2" y="2" width="20" height="20" rx="2" />
+                  <path d="M7 2v20" />
+                  <path d="M17 2v20" />
+                  <path d="M2 7h20" />
+                  <path d="M2 17h20" />
+                </svg>
+                <span className="text-[13px] text-neutral-500">
+                  {onFileDrop
+                    ? "Drop media here or describe your video to start"
+                    : "Describe your video to start creating"}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
       </div>
     );
   }
@@ -252,249 +529,249 @@ export const Timeline = memo(function Timeline({ onSeek, onDrillDown }: Timeline
 
   return (
     <div
-      ref={containerRef}
+      ref={setContainerRef}
       aria-label="Timeline"
-      className="border-t border-neutral-800/50 bg-[#0a0a0b] select-none overflow-x-hidden cursor-crosshair"
-      style={{ touchAction: "none" }}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
+      className={`border-t border-neutral-800/50 bg-[#0a0a0b] select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      style={{ touchAction: "pan-x pan-y" }}
     >
-      <div className="relative" style={{ height: totalH }}>
-        {/* Grid lines */}
-        <svg
-          className="absolute pointer-events-none"
-          style={{ left: GUTTER }}
-          width={`calc(100% - ${GUTTER}px)`}
-          height={totalH}
-        >
-          {major.map((t) => (
-            <line
-              key={`g-${t}`}
-              x1={`${(t / duration) * 100}%`}
-              y1={RULER_H}
-              x2={`${(t / duration) * 100}%`}
-              y2={totalH}
-              stroke="rgba(255,255,255,0.035)"
-              strokeWidth="1"
-            />
-          ))}
-        </svg>
+      <div
+        ref={scrollRef}
+        className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full`}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onLostPointerCapture={handlePointerUp}
+      >
+        <div className="relative" style={{ height: totalH, width: GUTTER + trackContentWidth }}>
+          {/* Grid lines */}
+          <svg
+            className="absolute pointer-events-none"
+            style={{ left: GUTTER, width: trackContentWidth }}
+            height={totalH}
+          >
+            {major.map((t) => {
+              const x = t * pps;
+              return (
+                <line
+                  key={`g-${t}`}
+                  x1={x}
+                  y1={RULER_H}
+                  x2={x}
+                  y2={totalH}
+                  stroke="rgba(255,255,255,0.035)"
+                  strokeWidth="1"
+                />
+              );
+            })}
+          </svg>
 
-        {/* Ruler */}
-        <div
-          className="relative border-b border-neutral-800/40"
-          style={{ height: RULER_H, marginLeft: GUTTER }}
-        >
-          {minor.map((t) => (
-            <div
-              key={`m-${t}`}
-              className="absolute bottom-0"
-              style={{ left: `${(t / duration) * 100}%` }}
-            >
-              <div className="w-px h-[3px] bg-neutral-700/40" />
-            </div>
-          ))}
-          {major.map((t) => (
-            <div
-              key={`M-${t}`}
-              className="absolute bottom-0 flex flex-col items-center"
-              style={{ left: `${(t / duration) * 100}%` }}
-            >
-              <span className="text-[9px] text-neutral-500 font-mono tabular-nums leading-none mb-0.5">
-                {formatTick(t)}
-              </span>
-              <div className="w-px h-[5px] bg-neutral-600/60" />
-            </div>
-          ))}
-        </div>
+          {/* Ruler */}
+          <div
+            className="relative border-b border-neutral-800/40 overflow-hidden"
+            style={{ height: RULER_H, marginLeft: GUTTER, width: trackContentWidth }}
+          >
+            {/* Shift hint */}
+            {shiftHeld && !rangeSelection && (
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+                <span className="text-[9px] text-blue-400/60 font-medium">
+                  Drag to select range
+                </span>
+              </div>
+            )}
+            {minor.map((t) => (
+              <div key={`m-${t}`} className="absolute bottom-0" style={{ left: t * pps }}>
+                <div className="w-px h-[3px] bg-neutral-700/40" />
+              </div>
+            ))}
+            {major.map((t) => (
+              <div
+                key={`M-${t}`}
+                className="absolute bottom-0 flex flex-col items-center"
+                style={{ left: t * pps }}
+              >
+                <span className="text-[9px] text-neutral-500 font-mono tabular-nums leading-none mb-0.5">
+                  {formatTime(t)}
+                </span>
+                <div className="w-px h-[5px] bg-neutral-600/60" />
+              </div>
+            ))}
+          </div>
 
-        {/* Tracks */}
-        {tracks.map(([trackNum, els]) => {
-          const ts = trackStyles.get(trackNum) ?? DEFAULT;
-          return (
-            <div
-              key={trackNum}
-              className="relative flex"
-              style={{ height: TRACK_H, backgroundColor: ts.row }}
-            >
-              {/* Gutter: colored icon badge (Figma HyperFrames style) */}
+          {/* Tracks */}
+          {tracks.map(([trackNum, els]) => {
+            const ts = trackStyles.get(trackNum) ?? DEFAULT;
+            return (
               <div
-                className="flex-shrink-0 flex items-center justify-center"
-                style={{ width: GUTTER }}
+                key={trackNum}
+                className="relative flex"
+                style={{ height: TRACK_H, backgroundColor: ts.row }}
               >
+                {/* Gutter: colored icon badge (Figma Motion Cut style) */}
                 <div
-                  className="flex items-center justify-center"
-                  style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
-                    backgroundColor: ts.gutter,
-                    border: "1px solid rgba(255,255,255,0.35)",
-                    color: "#fff",
-                  }}
+                  className="flex-shrink-0 flex items-center justify-center"
+                  style={{ width: GUTTER }}
                 >
-                  {ts.icon}
+                  <div
+                    className="flex items-center justify-center"
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 6,
+                      backgroundColor: ts.gutter,
+                      border: "1px solid rgba(255,255,255,0.35)",
+                      color: "#fff",
+                    }}
+                  >
+                    {ts.icon}
+                  </div>
                 </div>
-              </div>
 
-              {/* Clips */}
-              <div className="flex-1 relative">
-                {els.map((el, i) => {
-                  const leftPct = (el.start / duration) * 100;
-                  const widthPct = (el.duration / duration) * 100;
-                  const style = getStyle(el.tag);
-                  const isSelected = selectedElementId === el.id;
-                  const isComposition = !!el.compositionSrc;
-                  const clipKey = `${el.id}-${i}`;
-                  const isHovered = hoveredClip === clipKey;
-                  const activeEdit = activeEdits[el.id];
-                  const isBeingEdited = !!activeEdit;
-
-                  return (
-                    <div
-                      key={clipKey}
-                      data-clip="true"
-                      className="absolute flex items-center overflow-hidden"
-                      style={{
-                        left: `${leftPct}%`,
-                        width: `${Math.max(widthPct, 1)}%`,
-                        top: CLIP_Y,
-                        bottom: CLIP_Y,
-                        borderRadius: 5,
-                        backgroundColor: style.clip,
-                        backgroundImage: isComposition
-                          ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.08) 3px, rgba(255,255,255,0.08) 6px)`
-                          : undefined,
-                        border: isSelected
-                          ? `2px solid rgba(255,255,255,0.9)`
-                          : `1px solid rgba(255,255,255,${isHovered ? 0.3 : 0.15})`,
-                        boxShadow: isSelected
-                          ? `0 0 0 1px ${style.clip}, 0 2px 8px rgba(0,0,0,0.4)`
-                          : isBeingEdited
-                            ? `0 0 0 1px ${activeEdit.agentColor}80, 0 0 8px ${activeEdit.agentColor}40`
-                            : isHovered
-                              ? "0 1px 4px rgba(0,0,0,0.3)"
-                              : "none",
-                        cursor: "pointer",
-                        transition: "border-color 120ms, box-shadow 120ms, transform 80ms",
-                        transform: isHovered && !isSelected ? "scaleY(1.04)" : "scaleY(1)",
-                        zIndex: isSelected ? 10 : isHovered ? 5 : 1,
-                      }}
-                      title={
-                        isComposition
-                          ? `${el.compositionSrc} \u2022 Double-click to open`
-                          : `${el.id || el.tag} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`
-                      }
-                      onPointerEnter={() => setHoveredClip(clipKey)}
-                      onPointerLeave={() => setHoveredClip(null)}
-                      onPointerDown={(e) => e.stopPropagation()}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setSelectedElementId(isSelected ? null : el.id);
-                      }}
-                      onDoubleClick={(e) => {
-                        e.stopPropagation();
-                        if (isComposition && onDrillDown) {
-                          onDrillDown(el);
-                        }
-                      }}
-                    >
-                      {/* Agent ownership dot */}
-                      {el.agentColor && (
-                        <div
-                          className="flex-shrink-0 w-1.5 h-1.5 rounded-full ml-1"
-                          style={{ backgroundColor: el.agentColor }}
-                          title={el.agentId ? `Agent: ${el.agentId}` : undefined}
-                        />
-                      )}
-                      {/* Editing glow pulse */}
-                      {/* Agent editing indicator — cursor on the clip */}
-                      {isBeingEdited && (
-                        <>
-                          <div
-                            className="absolute inset-0 rounded-[5px] animate-pulse pointer-events-none"
-                            style={{ boxShadow: `inset 0 0 0 1px ${activeEdit.agentColor}60` }}
-                          />
-                          {/* Agent name badge above clip */}
-                          <div
-                            className="absolute pointer-events-none flex items-center gap-1"
-                            style={{
-                              top: -16,
-                              left: 2,
-                              zIndex: 30,
-                            }}
-                          >
-                            {/* Mini cursor arrow */}
-                            <svg
-                              width="8"
-                              height="10"
-                              viewBox="0 0 12 16"
-                              fill="none"
-                              style={{ flexShrink: 0 }}
-                            >
-                              <path
-                                d="M1 1L11 7L6 8L4 14L1 1Z"
-                                fill={activeEdit.agentColor}
-                                stroke="white"
-                                strokeWidth="0.8"
-                              />
-                            </svg>
-                            <span
-                              className="text-[8px] font-semibold px-1 py-px rounded whitespace-nowrap"
-                              style={{
-                                backgroundColor: activeEdit.agentColor,
-                                color: "white",
-                                boxShadow: `0 1px 4px ${activeEdit.agentColor}40`,
-                              }}
-                            >
-                              {activeEdit.agentId}
-                            </span>
-                          </div>
-                        </>
-                      )}
-                      <span
-                        className="text-[10px] font-semibold truncate px-1.5 leading-none"
-                        style={{ color: style.label }}
+                {/* Clips */}
+                <div style={{ width: trackContentWidth }} className="relative">
+                  {els.map((el, i) => {
+                    const clipStyle = getStyle(el.tag);
+                    const isSelected = selectedElementId === el.id;
+                    const isComposition = !!el.compositionSrc;
+                    const clipKey = `${el.id}-${i}`;
+                    const isHovered = hoveredClip === clipKey;
+                    const hasCustomContent = !!renderClipContent;
+                    const clipWidthPx = Math.max(el.duration * pps, 4);
+
+                    return (
+                      <TimelineClip
+                        key={clipKey}
+                        el={el}
+                        pps={pps}
+                        trackH={TRACK_H}
+                        clipY={CLIP_Y}
+                        isSelected={isSelected}
+                        isHovered={isHovered}
+                        hasCustomContent={hasCustomContent}
+                        style={clipStyle}
+                        isComposition={isComposition}
+                        onHoverStart={() => setHoveredClip(clipKey)}
+                        onHoverEnd={() => setHoveredClip(null)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedElementId(isSelected ? null : el.id);
+                        }}
+                        onDoubleClick={(e) => {
+                          e.stopPropagation();
+                          if (isComposition && onDrillDown) onDrillDown(el);
+                        }}
                       >
-                        {el.id || el.tag}
-                      </span>
-                      {widthPct > 10 && (
-                        <span
-                          className="text-[9px] font-mono tabular-nums pr-1.5 ml-auto flex-shrink-0 leading-none opacity-70"
-                          style={{ color: style.label }}
+                        {renderClipOverlay?.(el)}
+                        <div
+                          className={
+                            renderClipContent
+                              ? "absolute inset-0 overflow-hidden rounded-[4px]"
+                              : "flex items-center overflow-hidden flex-1 min-w-0"
+                          }
                         >
-                          {el.duration.toFixed(1)}s
-                        </span>
-                      )}
-                    </div>
-                  );
-                })}
+                          {renderClipContent?.(el, clipStyle) ?? (
+                            <>
+                              <span
+                                className="text-[10px] font-semibold truncate px-1.5 leading-none"
+                                style={{ color: clipStyle.label }}
+                              >
+                                {el.id || el.tag}
+                              </span>
+                              {clipWidthPx > 60 && (
+                                <span
+                                  className="text-[9px] font-mono tabular-nums pr-1.5 ml-auto flex-shrink-0 leading-none opacity-70"
+                                  style={{ color: clipStyle.label }}
+                                >
+                                  {el.duration.toFixed(1)}s
+                                </span>
+                              )}
+                            </>
+                          )}
+                        </div>
+                      </TimelineClip>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
 
-        {/* Playhead */}
-        <div
-          ref={playheadRef}
-          className="absolute top-0 bottom-0 z-20 pointer-events-none"
-          style={{ left: `${GUTTER}px` }}
-        >
-          <div className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-px bg-white/90" />
-          <div className="absolute left-1/2 -translate-x-1/2" style={{ top: 0 }}>
+          {/* Range selection highlight */}
+          {rangeSelection && (
+            <div
+              className="absolute pointer-events-none"
+              style={{
+                left: GUTTER + Math.min(rangeSelection.start, rangeSelection.end) * pps,
+                width: Math.abs(rangeSelection.end - rangeSelection.start) * pps,
+                top: RULER_H,
+                bottom: 0,
+                backgroundColor: "rgba(59, 130, 246, 0.12)",
+                borderLeft: "1px solid rgba(59, 130, 246, 0.4)",
+                borderRight: "1px solid rgba(59, 130, 246, 0.4)",
+                zIndex: 50,
+              }}
+            />
+          )}
+
+          {/* Playhead — z-[100] to stay above all clips (which use z-1 to z-10) */}
+          <div
+            ref={playheadRef}
+            className="absolute top-0 bottom-0 pointer-events-none"
+            style={{ left: `${GUTTER}px`, zIndex: 100 }}
+          >
             <div
+              className="absolute top-0 bottom-0"
               style={{
-                width: 0,
-                height: 0,
-                borderLeft: "5px solid transparent",
-                borderRight: "5px solid transparent",
-                borderTop: "7px solid rgba(255,255,255,0.95)",
+                left: "50%",
+                width: 2,
+                marginLeft: -1,
+                background: "var(--hf-accent, #3CE6AC)",
+                boxShadow: "0 0 8px rgba(60,230,172,0.5)",
               }}
             />
+            <div
+              className="absolute"
+              style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}
+            >
+              <div
+                style={{
+                  width: 0,
+                  height: 0,
+                  borderLeft: "6px solid transparent",
+                  borderRight: "6px solid transparent",
+                  borderTop: "8px solid var(--hf-accent, #3CE6AC)",
+                  filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
+                }}
+              />
+            </div>
           </div>
         </div>
       </div>
+
+      {/* Keyboard shortcut hint — always visible */}
+      {!showPopover && !rangeSelection && (
+        <div className="absolute bottom-2 right-3 pointer-events-none">
+          <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-neutral-800/50 border border-neutral-700/20">
+            <kbd className="text-[9px] font-mono text-neutral-500 bg-neutral-700/40 px-1 py-0.5 rounded">
+              Shift
+            </kbd>
+            <span className="text-[9px] text-neutral-600">+ drag to edit range</span>
+          </div>
+        </div>
+      )}
+
+      {/* Edit range popover */}
+      {showPopover && rangeSelection && (
+        <EditPopover
+          rangeStart={rangeSelection.start}
+          rangeEnd={rangeSelection.end}
+          anchorX={rangeSelection.anchorX}
+          anchorY={rangeSelection.anchorY}
+          onClose={() => {
+            setShowPopover(false);
+            setRangeSelection(null);
+          }}
+        />
+      )}
     </div>
   );
 });