@hyperframes/studio 0.1.12 → 0.1.14

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,15 +1,18 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, type ReactNode } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
+import { FileTree } from "../editor/FileTree";
 
-type SidebarTab = "compositions" | "assets";
+type SidebarTab = "compositions" | "assets" | "code";
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
 
 function getPersistedTab(): SidebarTab {
   const stored = localStorage.getItem(STORAGE_KEY);
-  return stored === "assets" ? "assets" : "compositions";
+  if (stored === "assets") return "assets";
+  if (stored === "code") return "code";
+  return "compositions";
 }
 
 interface LeftSidebarProps {
@@ -20,6 +23,12 @@ interface LeftSidebarProps {
   activeComposition: string | null;
   onSelectComposition: (comp: string) => void;
   onImportFiles?: (files: FileList) => void;
+  fileTree?: string[];
+  editingFile?: { path: string; content: string | null } | null;
+  onSelectFile?: (path: string) => void;
+  codeChildren?: ReactNode;
+  onLint?: () => void;
+  linting?: boolean;
 }
 
 export const LeftSidebar = memo(function LeftSidebar({
@@ -30,6 +39,12 @@ export const LeftSidebar = memo(function LeftSidebar({
   activeComposition,
   onSelectComposition,
   onImportFiles,
+  fileTree: fileProp,
+  editingFile,
+  onSelectFile,
+  codeChildren,
+  onLint,
+  linting,
 }: LeftSidebarProps) {
   const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
 
@@ -60,14 +75,25 @@ export const LeftSidebar = memo(function LeftSidebar({
       className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
       style={{ width }}
     >
-      {/* Tabs */}
+      {/* Tabs — Code first */}
       <div className="flex border-b border-neutral-800/50 flex-shrink-0">
+        <button
+          type="button"
+          onClick={() => selectTab("code")}
+          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
+            tab === "code"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
+              : "text-neutral-500 hover:text-neutral-400"
+          }`}
+        >
+          Code
+        </button>
         <button
           type="button"
           onClick={() => selectTab("compositions")}
           className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
             tab === "compositions"
-              ? "text-neutral-200 border-b-2 border-blue-500"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
               : "text-neutral-500 hover:text-neutral-400"
           }`}
         >
@@ -78,7 +104,7 @@ export const LeftSidebar = memo(function LeftSidebar({
           onClick={() => selectTab("assets")}
           className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
             tab === "assets"
-              ? "text-neutral-200 border-b-2 border-blue-500"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
               : "text-neutral-500 hover:text-neutral-400"
           }`}
         >
@@ -87,16 +113,61 @@ export const LeftSidebar = memo(function LeftSidebar({
       </div>
 
       {/* Tab content */}
-      {tab === "compositions" ? (
+      {tab === "compositions" && (
         <CompositionsTab
           projectId={projectId}
           compositions={compositions}
           activeComposition={activeComposition}
           onSelect={onSelectComposition}
         />
-      ) : (
+      )}
+      {tab === "assets" && (
         <AssetsTab projectId={projectId} assets={assets} onImport={onImportFiles} />
       )}
+      {tab === "code" && (
+        <div className="flex flex-1 min-h-0">
+          {(fileProp?.length ?? 0) > 0 && (
+            <div className="w-[140px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
+              <FileTree
+                files={fileProp ?? []}
+                activeFile={editingFile?.path ?? null}
+                onSelectFile={onSelectFile ?? (() => {})}
+              />
+            </div>
+          )}
+          <div className="flex-1 overflow-hidden min-w-0">
+            {codeChildren ?? (
+              <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+                Select a file to edit
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Lint button pinned at the bottom */}
+      {onLint && (
+        <div className="border-t border-neutral-800 p-2 flex-shrink-0">
+          <button
+            onClick={onLint}
+            disabled={linting}
+            className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 hover:text-amber-300 hover:bg-neutral-800 transition-colors disabled:opacity-40"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M9 11l3 3L22 4" />
+              <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
+            </svg>
+            {linting ? "Linting…" : "Lint"}
+          </button>
+        </div>
+      )}
     </div>
   );
 });

package/src/components/ui/VideoFrameThumbnail.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Extracts a representative JPEG frame from a video URL using a hidden
+ * video + canvas. Seeks to ~10% of duration to avoid black opening frames.
+ * Used by AssetThumbnail (assets tab) and RenderQueueItem (renders tab).
+ */
+export function VideoFrameThumbnail({ src }: { src: string }) {
+  const [frame, setFrame] = useState<string | null>(null);
+
+  useEffect(() => {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.preload = "metadata";
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    const cleanup = () => {
+      video.src = "";
+      video.load();
+    };
+
+    video.addEventListener("loadedmetadata", () => {
+      video.currentTime = Math.min(2, video.duration * 0.1 || 2);
+    });
+
+    video.addEventListener("seeked", () => {
+      if (!ctx) return;
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      ctx.drawImage(video, 0, 0);
+      setFrame(canvas.toDataURL("image/jpeg", 0.7));
+      cleanup();
+    });
+
+    video.addEventListener("error", cleanup);
+    video.src = src;
+    video.load();
+
+    return cleanup;
+  }, [src]);
+
+  if (!frame) {
+    return <div className="w-full h-full bg-neutral-800 animate-pulse" />;
+  }
+
+  return <img src={frame} alt="" draggable={false} className="w-full h-full object-contain" />;
+}

package/src/index.ts

@@ -9,7 +9,6 @@ export {
   Player,
   PlayerControls,
   Timeline,
-  PreviewPanel,
   VideoThumbnail,
   CompositionThumbnail,
   useTimelinePlayer,
@@ -28,8 +27,6 @@ export { FileTree } from "./components/editor/FileTree";
 export { StudioApp } from "./App";
 
 // Hooks
-export { useCodeEditor } from "./hooks/useCodeEditor";
-export type { OpenFile, UseCodeEditorReturn } from "./hooks/useCodeEditor";
 export { useElementPicker } from "./hooks/useElementPicker";
 export type { PickedElement } from "./hooks/useElementPicker";
 

package/src/player/components/CompositionThumbnail.tsx

@@ -1,18 +1,12 @@
 /**
- * CompositionThumbnail — Film-strip of server-rendered JPEG thumbnails.
+ * CompositionThumbnail — Single server-rendered JPEG stretched across the clip.
  *
- * Requests multiple thumbnails at different timestamps across the clip duration
- * and tiles them horizontally — like VideoThumbnail does for video clips.
- * Each frame is a separate <img> from /api/projects/:id/thumbnail/:path?t=X.
- *
- * Uses ResizeObserver to adapt frame count when the clip width changes (zoom).
+ * Takes one screenshot at the midpoint of the clip and covers the full width —
+ * same approach as After Effects for precomps. This avoids the 1-2s per-frame
+ * Puppeteer cost of rendering multiple filmstrip frames.
  */
 
-import { memo, useRef, useState, useCallback } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
-
-const CLIP_HEIGHT = 66;
-const MAX_UNIQUE_FRAMES = 6;
+import { memo } from "react";
 
 interface CompositionThumbnailProps {
   previewUrl: string;
@@ -28,97 +22,29 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
   labelColor,
-  seekTime = 0.4,
+  seekTime = 2,
   duration = 5,
-  width = 1920,
-  height = 1080,
 }: CompositionThumbnailProps) {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const roRef = useRef<ResizeObserver | null>(null);
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    roRef.current?.disconnect();
-    if (!el) return;
-
-    // Walk up to data-clip parent for accurate width
-    let target: HTMLElement = el;
-    let parent = el.parentElement;
-    let depth = 0;
-    while (parent && !parent.hasAttribute("data-clip") && depth < 5) {
-      parent = parent.parentElement;
-      depth++;
-    }
-    if (parent?.hasAttribute("data-clip")) target = parent;
-
-    requestAnimationFrame(() => {
-      const w = target.clientWidth || target.getBoundingClientRect().width;
-      if (w > 0) setContainerWidth(w);
-    });
-
-    roRef.current = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));
-    roRef.current.observe(target);
-  }, []);
-
-  useMountEffect(() => () => {
-    roRef.current?.disconnect();
-  });
-
-  // Convert preview URL to thumbnail base URL
+  // Single screenshot at the midpoint of the clip
   const thumbnailBase = previewUrl
     .replace("/preview/comp/", "/thumbnail/")
     .replace(/\/preview$/, "/thumbnail/index.html");
-
-  // Calculate frame layout
-  const aspect = width / height;
-  const frameW = Math.round(CLIP_HEIGHT * aspect);
-  const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
-  const uniqueFrames = Math.min(frameCount, MAX_UNIQUE_FRAMES);
-
-  // Each frame tile represents a real position in the clip.
-  // Offset slightly (0.5s) into each segment to avoid landing on transition
-  // points where content is invisible due to fade-in/fade-out animations.
-  const timestamps: number[] = [];
-  const pad = Math.min(0.5, duration * 0.05);
-  for (let i = 0; i < uniqueFrames; i++) {
-    const frac = uniqueFrames === 1 ? 0.5 : i / (uniqueFrames - 1);
-    const raw = seekTime + frac * duration;
-    // Clamp to [pad, duration - pad] to stay inside visible content
-    timestamps.push(seekTime + Math.max(pad, Math.min(duration - pad, raw - seekTime)));
-  }
+  const midTime = seekTime + duration / 2;
+  const url = `${thumbnailBase}?t=${midTime.toFixed(2)}`;
 
   return (
-    <div ref={setRef} className="absolute inset-0 overflow-hidden bg-neutral-950">
-      {/* Film strip — each tile maps to its real timeline position */}
-      <div className="absolute inset-0 flex">
-        {Array.from({ length: frameCount }).map((_, i) => {
-          // Map this tile's visual position to a timestamp
-          const tileFrac = frameCount === 1 ? 0.5 : i / (frameCount - 1);
-          const t = seekTime + tileFrac * duration;
-          // Use the nearest cached unique frame
-          const uniqueIdx = Math.min(Math.round(tileFrac * (uniqueFrames - 1)), uniqueFrames - 1);
-          const cachedT = timestamps[uniqueIdx];
-          const url = `${thumbnailBase}?t=${(cachedT ?? t).toFixed(2)}`;
-          return (
-            <div
-              key={i}
-              className="flex-shrink-0 h-full relative overflow-hidden bg-neutral-900"
-              style={{ width: frameW }}
-            >
-              <img
-                src={url}
-                alt=""
-                draggable={false}
-                loading="lazy"
-                onLoad={(e) => {
-                  (e.target as HTMLImageElement).style.opacity = "1";
-                }}
-                className="absolute inset-0 w-full h-full object-cover"
-                style={{ opacity: 0, transition: "opacity 200ms ease-out" }}
-              />
-            </div>
-          );
-        })}
-      </div>
+    <div className="absolute inset-0 overflow-hidden bg-neutral-950">
+      <img
+        src={url}
+        alt=""
+        draggable={false}
+        loading="lazy"
+        onLoad={(e) => {
+          (e.target as HTMLImageElement).style.opacity = "1";
+        }}
+        className="absolute inset-0 w-full h-full object-cover"
+        style={{ opacity: 0, transition: "opacity 200ms ease-out" }}
+      />
 
       {/* Label */}
       <div

package/src/player/components/EditModal.tsx

@@ -105,7 +105,7 @@ Preserve all other elements and timing outside this range.`;
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-2.5 border-b border-neutral-800/60">
           <div className="flex items-center gap-2">
-            <div className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+            <div className="w-1.5 h-1.5 rounded-full bg-studio-accent" />
             <span className="text-[11px] font-medium text-neutral-300">
               {formatTime(start)} — {formatTime(end)}
             </span>
@@ -120,7 +120,7 @@ Preserve all other elements and timing outside this range.`;
           <div className="px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto">
             {elementsInRange.map((el) => (
               <div key={el.id} className="flex items-center justify-between py-0.5">
-                <span className="text-[10px] font-mono text-blue-400/80">#{el.id}</span>
+                <span className="text-[10px] font-mono text-studio-accent/80">#{el.id}</span>
                 <span className="text-[10px] text-neutral-600">{el.tag}</span>
               </div>
             ))}
@@ -141,7 +141,7 @@ Preserve all other elements and timing outside this range.`;
             }}
             placeholder="What should change?"
             rows={2}
-            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-blue-500/40 transition-colors"
+            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-studio-accent/40 transition-colors"
           />
         </div>
 
@@ -152,11 +152,11 @@ Preserve all other elements and timing outside this range.`;
             className={`w-full py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               copied
                 ? "bg-green-500/20 text-green-400 border border-green-500/30"
-                : "bg-blue-500/15 text-blue-400 border border-blue-500/25 hover:bg-blue-500/25"
+                : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"
             }`}
           >
             {copied ? "Copied!" : "Copy to Agent"}
-            {!copied && <span className="text-[9px] text-blue-400/50 ml-1.5">Cmd+Enter</span>}
+            {!copied && <span className="text-[9px] text-studio-accent/50 ml-1.5">Cmd+Enter</span>}
           </button>
         </div>
       </div>

package/src/player/components/Player.tsx

@@ -117,7 +117,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
             width: dims.w,
             height: dims.h,
             border: "none",
-            outline: "1px solid black",
             transform: `scale(${scale})`,
             transformOrigin: "center center",
             flexShrink: 0,

package/src/player/components/PlayerControls.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, memo } from "react";
+import { useRef, useState, useCallback, useEffect, memo } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { formatTime } from "../lib/time";
 import { usePlayerStore, liveTime } from "../store/playerStore";
@@ -8,11 +8,15 @@ const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
 interface PlayerControlsProps {
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
+  timelineVisible?: boolean;
+  onToggleTimeline?: () => void;
 }
 
 export const PlayerControls = memo(function PlayerControls({
   onTogglePlay,
   onSeek,
+  timelineVisible,
+  onToggleTimeline,
 }: PlayerControlsProps) {
   // Subscribe to only the fields we render — each selector prevents cascading re-renders
   const isPlaying = usePlayerStore((s) => s.isPlaying);
@@ -26,6 +30,8 @@ export const PlayerControls = memo(function PlayerControls({
   const progressThumbRef = useRef<HTMLDivElement>(null);
   const timeDisplayRef = useRef<HTMLSpanElement>(null);
   const seekBarRef = useRef<HTMLDivElement>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const speedMenuContainerRef = useRef<HTMLDivElement>(null);
   const isDraggingRef = useRef(false);
   const currentTimeRef = useRef(0);
 
@@ -39,6 +45,7 @@ export const PlayerControls = memo(function PlayerControls({
       if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
       if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
       if (timeDisplayRef.current) timeDisplayRef.current.textContent = formatTime(t);
+      if (sliderRef.current) sliderRef.current.setAttribute("aria-valuenow", String(Math.round(t)));
     };
     const unsub = liveTime.subscribe(updateProgress);
     updateProgress(usePlayerStore.getState().currentTime);
@@ -60,6 +67,22 @@ export const PlayerControls = memo(function PlayerControls({
     };
   });
 
+  useEffect(() => {
+    if (!showSpeedMenu) return;
+    const handleMouseDown = (e: MouseEvent) => {
+      if (
+        speedMenuContainerRef.current &&
+        !speedMenuContainerRef.current.contains(e.target as Node)
+      ) {
+        setShowSpeedMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [showSpeedMenu]);
+
   const seekFromClientX = useCallback(
     (clientX: number) => {
       const bar = seekBarRef.current;
@@ -149,7 +172,10 @@ export const PlayerControls = memo(function PlayerControls({
 
       {/* Seek bar — teal progress fill */}
       <div
-        ref={seekBarRef}
+        ref={(el) => {
+          (seekBarRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+          (sliderRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+        }}
         role="slider"
         tabIndex={0}
         aria-label="Seek"
@@ -184,7 +210,7 @@ export const PlayerControls = memo(function PlayerControls({
       </div>
 
       {/* Speed control */}
-      <div className="relative flex-shrink-0">
+      <div ref={speedMenuContainerRef} className="relative flex-shrink-0">
         <button
           type="button"
           onClick={() => setShowSpeedMenu((v) => !v)}
@@ -224,6 +250,33 @@ export const PlayerControls = memo(function PlayerControls({
           </div>
         )}
       </div>
+
+      {/* Timeline toggle */}
+      {onToggleTimeline !== undefined && (
+        <button
+          onClick={onToggleTimeline}
+          className={`w-7 h-7 flex items-center justify-center rounded-md border transition-colors ${
+            timelineVisible
+              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+              : "border-neutral-700 text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800"
+          }`}
+          title={timelineVisible ? "Hide timeline" : "Show timeline"}
+        >
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
+            <rect x="3" y="13" width="18" height="8" rx="1" />
+            <line x1="3" y1="9" x2="21" y2="9" />
+            <line x1="3" y1="5" x2="21" y2="5" />
+          </svg>
+        </button>
+      )}
     </div>
   );
 });

package/src/player/components/Timeline.tsx

@@ -152,9 +152,6 @@ export function generateTicks(duration: number): { major: number[]; minor: numbe
   return { major, minor };
 }
 
-/** @deprecated Use formatTime from '../lib/time' instead */
-export const formatTick = formatTime;
-
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -170,11 +167,6 @@ interface TimelineProps {
   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({
@@ -346,12 +338,11 @@ export const Timeline = memo(function Timeline({
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
-      if ((e.target as HTMLElement).closest("[data-clip]")) return;
       if (e.button !== 0) return;
-      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
 
-      // Shift+click starts range selection
+      // Shift+click starts range selection — even on clips
       if (e.shiftKey) {
+        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
         isRangeSelecting.current = true;
         setShowPopover(false);
         const rect = scrollRef.current?.getBoundingClientRect();
@@ -364,6 +355,10 @@ export const Timeline = memo(function Timeline({
         return;
       }
 
+      // Normal click on a clip — let the clip handle it
+      if ((e.target as HTMLElement).closest("[data-clip]")) return;
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+
       isDragging.current = true;
       setRangeSelection(null);
       setShowPopover(false);
@@ -434,7 +429,7 @@ export const Timeline = memo(function Timeline({
     return (
       <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"
+          isDragOver ? "border-studio-accent/50 bg-studio-accent/[0.03]" : "border-neutral-800/50"
         }`}
         onDragOver={(e) => {
           e.preventDefault();
@@ -471,7 +466,9 @@ export const Timeline = memo(function Timeline({
         <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
+                ? "border-studio-accent/60 bg-studio-accent/[0.06]"
+                : "border-neutral-700/50"
             }`}
           >
             {isDragOver ? (
@@ -485,13 +482,13 @@ export const Timeline = memo(function Timeline({
                   strokeWidth="1.5"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="text-blue-400 flex-shrink-0"
+                  className="text-studio-accent 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>
+                <span className="text-[13px] text-studio-accent">Drop media files to import</span>
               </>
             ) : (
               <>
@@ -573,7 +570,7 @@ export const Timeline = memo(function Timeline({
             {/* 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">
+                <span className="text-[9px] text-studio-accent/60 font-medium">
                   Drag to select range
                 </span>
               </div>
@@ -642,7 +639,6 @@ export const Timeline = memo(function Timeline({
                         key={clipKey}
                         el={el}
                         pps={pps}
-                        trackH={TRACK_H}
                         clipY={CLIP_Y}
                         isSelected={isSelected}
                         isHovered={isHovered}
@@ -749,7 +745,7 @@ export const Timeline = memo(function Timeline({
 
       {/* Keyboard shortcut hint — always visible */}
       {!showPopover && !rangeSelection && (
-        <div className="absolute bottom-2 right-3 pointer-events-none">
+        <div className="absolute bottom-2 right-3 pointer-events-none z-20">
           <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

package/src/player/components/TimelineClip.tsx

@@ -6,7 +6,6 @@ import type { TimelineElement } from "../store/playerStore";
 interface TimelineClipProps {
   el: TimelineElement;
   pps: number;
-  trackH: number;
   clipY: number;
   isSelected: boolean;
   isHovered: boolean;

package/src/player/index.ts

@@ -2,7 +2,6 @@
 export { Player } from "./components/Player";
 export { PlayerControls } from "./components/PlayerControls";
 export { Timeline } from "./components/Timeline";
-export { PreviewPanel } from "./components/PreviewPanel";
 export { VideoThumbnail } from "./components/VideoThumbnail";
 export { CompositionThumbnail } from "./components/CompositionThumbnail";