feat(studio): timeline hidden by default with toggle in header + player controls

Adds timelineVisible state (defaults false) with synced toggle buttons in both the
header toolbar and the PlayerControls bar. Toggle icon turns teal when timeline is visible.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: miguel-heygen

packages/studio/src/App.tsx

@@ -535,6 +535,7 @@ export function StudioApp() {
   const [rightWidth, setRightWidth] = useState(400);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
+  const [timelineVisible, setTimelineVisible] = useState(false);
   const panelDragRef = useRef<{
     side: "left" | "right";
     startX: number;
@@ -829,6 +830,29 @@ export function StudioApp() {
               <path d="M9 3v18" />
             </svg>
           </button>
+          <button
+            onClick={() => setTimelineVisible((v) => !v)}
+            className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
+              timelineVisible
+                ? "text-[#3CE6AC] bg-[#3CE6AC]/10 border-[#3CE6AC]/30"
+                : "bg-transparent border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800"
+            }`}
+            title={timelineVisible ? "Hide timeline" : "Show timeline"}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              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>
           <button
             onClick={() => setRightCollapsed((v) => !v)}
             className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors ${
@@ -927,6 +951,8 @@ export function StudioApp() {
             onIframeRef={(iframe) => {
               previewIframeRef.current = iframe;
             }}
+            timelineVisible={timelineVisible}
+            onToggleTimeline={() => setTimelineVisible((v) => !v)}
           />
         </div>
 

packages/studio/src/components/nle/NLELayout.tsx

@@ -29,6 +29,10 @@ interface NLELayoutProps {
   ) => ReactNode;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
+  /** Whether the timeline panel is visible (default: true) */
+  timelineVisible?: boolean;
+  /** Callback to toggle timeline visibility */
+  onToggleTimeline?: () => void;
 }
 
 const MIN_TIMELINE_H = 100;
@@ -47,6 +51,8 @@ export const NLELayout = memo(function NLELayout({
   onCompositionChange,
   renderClipContent,
   onCompIdToSrcChange,
+  timelineVisible,
+  onToggleTimeline,
 }: NLELayoutProps) {
   const {
     iframeRef,
@@ -324,47 +330,56 @@ export const NLELayout = memo(function NLELayout({
         {previewOverlay}
       </div>
 
-      {/* Resize divider */}
-      <div
-        className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-blue-500 cursor-row-resize transition-colors active:bg-blue-400 z-10"
-        style={{ touchAction: "none" }}
-        onPointerDown={handleDividerPointerDown}
-        onPointerMove={handleDividerPointerMove}
-        onPointerUp={handleDividerPointerUp}
-      />
+      {(timelineVisible ?? true) && (
+        <>
+          {/* Resize divider */}
+          <div
+            className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-blue-500 cursor-row-resize transition-colors active:bg-blue-400 z-10"
+            style={{ touchAction: "none" }}
+            onPointerDown={handleDividerPointerDown}
+            onPointerMove={handleDividerPointerMove}
+            onPointerUp={handleDividerPointerUp}
+          />
 
-      {/* Timeline section — fixed height, resizable */}
-      <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
-        {/* Breadcrumb + Player controls */}
-        <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
-          {compositionStack.length > 1 && (
-            <CompositionBreadcrumb
-              stack={compositionStack}
-              onNavigate={handleNavigateComposition}
-            />
-          )}
-          <PlayerControls onTogglePlay={togglePlay} onSeek={seek} />
-        </div>
+          {/* Timeline section — fixed height, resizable */}
+          <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
+            {/* Breadcrumb + Player controls */}
+            <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
+              {compositionStack.length > 1 && (
+                <CompositionBreadcrumb
+                  stack={compositionStack}
+                  onNavigate={handleNavigateComposition}
+                />
+              )}
+              <PlayerControls
+                onTogglePlay={togglePlay}
+                onSeek={seek}
+                timelineVisible={timelineVisible ?? true}
+                onToggleTimeline={onToggleTimeline}
+              />
+            </div>
 
-        {/* Timeline tracks */}
-        <div
-          className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
-          onDoubleClick={(e) => {
-            if ((e.target as HTMLElement).closest("[data-clip]")) return;
-            if (compositionStack.length > 1) {
-              updateCompositionStack((prev) => prev.slice(0, -1));
-            }
-          }}
-        >
-          {timelineToolbar}
-          <Timeline
-            onSeek={seek}
-            onDrillDown={handleDrillDown}
-            renderClipContent={renderClipContent}
-          />
-          {timelineFooter}
-        </div>
-      </div>
+            {/* Timeline tracks */}
+            <div
+              className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
+              onDoubleClick={(e) => {
+                if ((e.target as HTMLElement).closest("[data-clip]")) return;
+                if (compositionStack.length > 1) {
+                  updateCompositionStack((prev) => prev.slice(0, -1));
+                }
+              }}
+            >
+              {timelineToolbar}
+              <Timeline
+                onSeek={seek}
+                onDrillDown={handleDrillDown}
+                renderClipContent={renderClipContent}
+              />
+              {timelineFooter}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 });

packages/studio/src/player/components/PlayerControls.tsx

@@ -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);
@@ -224,6 +228,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-[#3CE6AC] bg-[#3CE6AC]/10 border-[#3CE6AC]/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>
   );
 });