@remotion/studio 4.0.436 → 4.0.438

package/dist/esm/previewEntry.mjs

@@ -10108,15 +10108,20 @@ var MenuBuildIndicator = () => {
 import { useCallback as useCallback94, useContext as useContext61, useEffect as useEffect64 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback93, useContext as useContext60, useEffect as useEffect63, useMemo as useMemo98 } from "react";
+import React126, { useCallback as useCallback93, useContext as useContext60, useEffect as useEffect63, useMemo as useMemo98 } from "react";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect33, useState as useState38 } from "react";
+import { useEffect as useEffect33, useRef as useRef22, useState as useState38 } from "react";
 function useBreakpoint(breakpoint2) {
   const [compactUI, setCompactUI] = useState38(window.innerWidth < breakpoint2);
+  const compactUIRef = useRef22(compactUI);
   useEffect33(() => {
     function handleResize() {
-      setCompactUI(window.innerWidth < breakpoint2);
+      const newValue = window.innerWidth < breakpoint2;
+      if (newValue !== compactUIRef.current) {
+        setCompactUI(newValue);
+      }
+      compactUIRef.current = newValue;
     }
     window.addEventListener("resize", handleResize);
     handleResize();
@@ -10414,7 +10419,7 @@ import {
   useContext as useContext28,
   useEffect as useEffect35,
   useMemo as useMemo50,
-  useRef as useRef23
+  useRef as useRef24
 } from "react";
 
 // src/helpers/editor-ruler.ts
@@ -10629,7 +10634,7 @@ import {
   useContext as useContext27,
   useEffect as useEffect34,
   useMemo as useMemo49,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState39
 } from "react";
 import { Internals as Internals22 } from "remotion";
@@ -10646,7 +10651,7 @@ var Ruler = ({
   markingGaps,
   orientation
 }) => {
-  const rulerCanvasRef = useRef22(null);
+  const rulerCanvasRef = useRef23(null);
   const isVerticalRuler = orientation === "vertical";
   const {
     shouldCreateGuideRef,
@@ -10810,7 +10815,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     rulerMarkingGaps,
     scale
   }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
-  const requestAnimationFrameRef = useRef23(null);
+  const requestAnimationFrameRef = useRef24(null);
   const onMouseMove = useCallback40((e) => {
     if (requestAnimationFrameRef.current) {
       cancelAnimationFrame(requestAnimationFrameRef.current);
@@ -11634,7 +11639,7 @@ import {
   useEffect as useEffect41,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo54,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState42
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
@@ -11749,7 +11754,7 @@ var SetVisualControlsContext = createContext17({
   }
 });
 var VisualControlsProvider = ({ children }) => {
-  const imperativeHandles = useRef24({});
+  const imperativeHandles = useRef25({});
   const [handles, setHandles] = useState42({});
   const state = useMemo54(() => {
     return {
@@ -11778,7 +11783,7 @@ var VisualControlsProvider = ({ children }) => {
     };
   }, []);
   const z = useZodIfPossible();
-  const changedRef = useRef24(false);
+  const changedRef = useRef25(false);
   const env = useRemotionEnvironment2();
   const visualControl = useCallback43(function(key, value, schema) {
     if (handles && false) {}
@@ -12857,7 +12862,7 @@ import {
   useContext as useContext36,
   useEffect as useEffect43,
   useMemo as useMemo59,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState44
 } from "react";
 import { Internals as Internals31 } from "remotion";
@@ -12909,7 +12914,7 @@ var useLocalState = ({
       zodValidation: zodSafeParse(schema, savedValue)
     };
   }, [localUnsavedValue, savedValue, schema]);
-  const stateRef = useRef25(currentLocalValue);
+  const stateRef = useRef26(currentLocalValue);
   stateRef.current = currentLocalValue;
   const onChange = useCallback49((updater, forceApply, increment) => {
     const newValue = updater(stateRef.current.value);
@@ -13842,7 +13847,7 @@ var ZodArrayItemEditor = ({
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback54, useEffect as useEffect44, useMemo as useMemo66, useRef as useRef26, useState as useState47 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect44, useMemo as useMemo66, useRef as useRef27, useState as useState47 } from "react";
 import ReactDOM8 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -13927,7 +13932,7 @@ var container29 = {
 var InfoBubble = ({ title: title4, children }) => {
   const [hovered, setIsHovered] = useState47(false);
   const [opened, setOpened] = useState47(false);
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -14220,7 +14225,7 @@ var ZodArrayEditor = ({
 import { useCallback as useCallback55 } from "react";
 
 // src/components/Checkbox.tsx
-import { useEffect as useEffect45, useMemo as useMemo68, useRef as useRef27 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo68, useRef as useRef28 } from "react";
 import { jsx as jsx120, jsxs as jsxs57 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -14247,7 +14252,7 @@ var box = {
   color: "white"
 };
 var Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const input2 = useMemo68(() => {
     return {
       appearance: "none",
@@ -14361,7 +14366,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React83, { useCallback as useCallback56, useEffect as useEffect46, useMemo as useMemo69, useRef as useRef28, useState as useState49 } from "react";
+import React83, { useCallback as useCallback56, useEffect as useEffect46, useMemo as useMemo69, useRef as useRef29, useState as useState49 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -14383,8 +14388,8 @@ var InputDraggerForwardRefFn = ({
 }, ref) => {
   const [inputFallback, setInputFallback] = useState49(false);
   const [dragging, setDragging] = useState49(false);
-  const fallbackRef = useRef28(null);
-  const pointerDownRef = useRef28(false);
+  const fallbackRef = useRef29(null);
+  const pointerDownRef = useRef29(false);
   const style8 = useMemo69(() => {
     return {
       ...inputBaseStyle,
@@ -14549,7 +14554,7 @@ import {
   useEffect as useEffect47,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo70,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState50
 } from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
@@ -14561,7 +14566,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState50(false);
   const [isHovered, setIsHovered] = useState50(false);
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo70(() => {
     return {
@@ -18897,7 +18902,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext57, useEffect as useEffect61, useRef as useRef32, useState as useState64 } from "react";
+import { useContext as useContext57, useEffect as useEffect61, useRef as useRef33, useState as useState64 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/state/loop.ts
@@ -18952,7 +18957,7 @@ import {
   useEffect as useEffect56,
   useLayoutEffect,
   useMemo as useMemo93,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState61
 } from "react";
 import { Internals as Internals38 } from "remotion";
@@ -18973,9 +18978,9 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals38.Timeline.useTimelinePosition();
   const [marker, rerender] = useState61({});
   const [fps, setFps] = useState61(0);
-  const previousUpdates = useRef30([]);
-  const fpsRef = useRef30(0);
-  const playingRef = useRef30(playing);
+  const previousUpdates = useRef31([]);
+  const fpsRef = useRef31(0);
+  const playingRef = useRef31(playing);
   useLayoutEffect(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
@@ -19706,7 +19711,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback91, useContext as useContext55, useMemo as useMemo95, useRef as useRef31, useState as useState63 } from "react";
+import { useCallback as useCallback91, useContext as useContext55, useMemo as useMemo95, useRef as useRef32, useState as useState63 } from "react";
 import ReactDOM9 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs83, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -19780,8 +19785,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext55(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState63(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState63(false);
-  const dropdownRef = useRef31(null);
-  const containerRef = useRef31(null);
+  const dropdownRef = useRef32(null);
+  const containerRef = useRef32(null);
   const { currentZIndex } = useZIndex();
   const size4 = PlayerInternals14.useElementSize(dropdownRef, {
     triggerOnWindowResize: true,
@@ -20330,9 +20335,9 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { setMediaMuted } = useContext57(Internals45.SetMediaVolumeContext);
   const { canvasContent } = useContext57(Internals45.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
-  const previewToolbarRef = useRef32(null);
-  const leftScrollIndicatorRef = useRef32(null);
-  const rightScrollIndicatorRef = useRef32(null);
+  const previewToolbarRef = useRef33(null);
+  const leftScrollIndicatorRef = useRef33(null);
+  const rightScrollIndicatorRef = useRef33(null);
   const isStill = useIsStill();
   const [loop, setLoop] = useState64(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
@@ -20488,7 +20493,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo96, useRef as useRef33, useState as useState65 } from "react";
+import { useMemo as useMemo96, useRef as useRef34, useState as useState65 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -20543,8 +20548,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState65(initialTimelineFlex ?? defaultFlex);
-  const ref = useRef33(null);
-  const isDragging = useRef33(false);
+  const ref = useRef34(null);
+  const isDragging = useRef34(false);
   const value = useMemo96(() => {
     return {
       flexValue,
@@ -20617,7 +20622,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext59, useEffect as useEffect62, useRef as useRef34, useState as useState66 } from "react";
+import { useContext as useContext59, useEffect as useEffect62, useRef as useRef35, useState as useState66 } from "react";
 import { jsx as jsx186 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -20632,7 +20637,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState66(() => Date.now());
-  const ref = useRef34(null);
+  const ref = useRef35(null);
   useEffect62(() => {
     if (context.isDragging.current) {
       return;
@@ -20793,7 +20798,7 @@ var useResponsiveSidebarStatus = () => {
   }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
   return actualStateLeft;
 };
-var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
+var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
   const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext60(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
   const actualStateLeft = useResponsiveSidebarStatus();
@@ -20899,6 +20904,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     ]
   });
 };
+var TopPanel = React126.memo(TopPanelInner);
 
 // src/components/SidebarCollapserControls.tsx
 import { jsx as jsx188, jsxs as jsxs88, Fragment as Fragment26 } from "react/jsx-runtime";
@@ -21271,7 +21277,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import { useContext as useContext75, useMemo as useMemo118 } from "react";
+import React152, { useContext as useContext75, useMemo as useMemo118 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -21443,6 +21449,33 @@ var calculateTimeline = ({
   });
 };
 
+// src/components/ExpandedTracksProvider.tsx
+import { createContext as createContext21, useCallback as useCallback97, useMemo as useMemo101, useState as useState69 } from "react";
+import { jsx as jsx191 } from "react/jsx-runtime";
+var ExpandedTracksContext = createContext21({
+  expandedTracks: {},
+  toggleTrack: () => {
+    throw new Error("ExpandedTracksContext not initialized");
+  }
+});
+var ExpandedTracksProvider = ({ children }) => {
+  const [expandedTracks, setExpandedTracks] = useState69({});
+  const toggleTrack = useCallback97((id) => {
+    setExpandedTracks((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+  const value = useMemo101(() => ({
+    expandedTracks,
+    toggleTrack
+  }), [expandedTracks, toggleTrack]);
+  return /* @__PURE__ */ jsx191(ExpandedTracksContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/components/Timeline/is-collapsed.ts
 var isTrackHidden = (track) => {
   if (!track.sequence.parent) {
@@ -21482,19 +21515,19 @@ var MaxTimelineTracksReached = () => {
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
-  useCallback as useCallback97,
+  useCallback as useCallback98,
   useContext as useContext65,
   useEffect as useEffect66,
-  useMemo as useMemo102,
-  useRef as useRef35,
-  useState as useState69
+  useMemo as useMemo103,
+  useRef as useRef36,
+  useState as useState70
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef11, useContext as useContext63 } from "react";
 import { Internals as Internals46 } from "remotion";
-import { jsx as jsx191, jsxs as jsxs91, Fragment as Fragment27 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs91, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -21513,7 +21546,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs91(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx191("div", {
+      inFrame !== null && /* @__PURE__ */ jsx192("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -21521,7 +21554,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx191("div", {
+      outFrame !== null && /* @__PURE__ */ jsx192("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -21534,9 +21567,9 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef12, useContext as useContext64, useMemo as useMemo101 } from "react";
+import { createRef as createRef12, useContext as useContext64, useMemo as useMemo102 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
 var line3 = {
   height: "100%",
   width: 1,
@@ -21550,14 +21583,14 @@ var inPointerHandle = createRef12();
 var outPointerHandle = createRef12();
 var InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
   const videoConfig = useVideoConfig3();
-  const style10 = useMemo101(() => {
+  const style10 = useMemo102(() => {
     return {
       ...line3,
       backgroundColor: dragging ? LIGHT_TRANSPARENT : "rgba(255, 255, 255, 0.1)",
       transform: `translateX(${getXPositionOfItemInTimelineImperatively(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`
     };
   }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-  return /* @__PURE__ */ jsx192("div", {
+  return /* @__PURE__ */ jsx193("div", {
     ref: type === "in" ? inPointerHandle : outPointerHandle,
     style: style10
   });
@@ -21571,7 +21604,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx192(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx193(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -21580,7 +21613,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineDragHandler.tsx
-import { jsx as jsx193, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx194, jsxs as jsxs92 } from "react/jsx-runtime";
 var inner = {
   overflowY: "auto",
   overflowX: "hidden"
@@ -21605,7 +21638,7 @@ var TimelineDragHandler = () => {
   const video = Internals47.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
   const { canvasContent } = useContext65(Internals47.CompositionManager);
-  const containerStyle3 = useMemo102(() => {
+  const containerStyle3 = useMemo103(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
     }
@@ -21618,10 +21651,10 @@ var TimelineDragHandler = () => {
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
-  return /* @__PURE__ */ jsx193("div", {
+  return /* @__PURE__ */ jsx194("div", {
     ref: sliderAreaRef,
     style: containerStyle3,
-    children: video ? /* @__PURE__ */ jsx193(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx194(Inner2, {}) : null
   });
 };
 var Inner2 = () => {
@@ -21632,11 +21665,11 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState69({
+  const [inOutDragging, setInOutDragging] = useState70({
     dragging: false
   });
   const timelineWidth = useContext65(TimelineWidthContext);
-  const get = useCallback97((frame2) => {
+  const get = useCallback98((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
     }
@@ -21646,18 +21679,18 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState69({
+  const [dragging, setDragging] = useState70({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
-  const scroller = useRef35(null);
+  const scroller = useRef36(null);
   const stopInterval = () => {
     if (scroller.current) {
       clearInterval(scroller.current);
       scroller.current = null;
     }
   };
-  const onPointerDown = useCallback97((e) => {
+  const onPointerDown = useCallback98((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -21723,7 +21756,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback97((e) => {
+  const onPointerMoveScrubbing = useCallback98((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21793,7 +21826,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback97((e) => {
+  const onPointerMoveInOut = useCallback98((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21829,7 +21862,7 @@ var Inner2 = () => {
       outMarkerAreaRef.current.style.width = String(width - get(outFrame) - offset) + "px";
     }
   }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
-  const onPointerUpScrubbing = useCallback97((e) => {
+  const onPointerUpScrubbing = useCallback98((e) => {
     stopInterval();
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -21857,7 +21890,7 @@ var Inner2 = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  const onPointerUpInOut = useCallback97((e) => {
+  const onPointerUpInOut = useCallback98((e) => {
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
     if (!videoConfig) {
@@ -21943,7 +21976,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21968,7 +22001,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -21997,21 +22030,21 @@ var Inner2 = () => {
     style: style10,
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx193("div", {
+      /* @__PURE__ */ jsx194("div", {
         style: inner,
         className: VERTICAL_SCROLLBAR_CLASSNAME
       }),
-      inFrame !== null && /* @__PURE__ */ jsx193(ContextMenu, {
+      inFrame !== null && /* @__PURE__ */ jsx194(ContextMenu, {
         values: inContextMenu,
-        children: /* @__PURE__ */ jsx193(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx194(TimelineInOutPointerHandle, {
           type: "in",
           atFrame: inFrame,
           dragging: inOutDragging.dragging === "in"
         })
       }),
-      outFrame !== null && /* @__PURE__ */ jsx193(ContextMenu, {
+      outFrame !== null && /* @__PURE__ */ jsx194(ContextMenu, {
         values: outContextMenu,
-        children: /* @__PURE__ */ jsx193(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx194(TimelineInOutPointerHandle, {
           type: "out",
           dragging: inOutDragging.dragging === "out",
           atFrame: outFrame
@@ -22023,39 +22056,12 @@ var Inner2 = () => {
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useRef as useRef39 } from "react";
+import { useRef as useRef40 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import { useCallback as useCallback107, useContext as useContext70, useMemo as useMemo111 } from "react";
 import { Internals as Internals51 } from "remotion";
 
-// src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback98, useMemo as useMemo103, useState as useState70 } from "react";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var ExpandedTracksContext = createContext21({
-  expandedTracks: {},
-  toggleTrack: () => {
-    throw new Error("ExpandedTracksContext not initialized");
-  }
-});
-var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState70({});
-  const toggleTrack = useCallback98((id) => {
-    setExpandedTracks((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  }, []);
-  const value = useMemo103(() => ({
-    expandedTracks,
-    toggleTrack
-  }), [expandedTracks, toggleTrack]);
-  return /* @__PURE__ */ jsx194(ExpandedTracksContext.Provider, {
-    value,
-    children
-  });
-};
-
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React139, { useMemo as useMemo108 } from "react";
 
@@ -22935,7 +22941,7 @@ var useResolvedStack = (stack2) => {
 };
 
 // src/components/Timeline/use-sequence-props-subscription.ts
-import { useCallback as useCallback106, useContext as useContext69, useEffect as useEffect71, useMemo as useMemo110, useRef as useRef36 } from "react";
+import { useCallback as useCallback106, useContext as useContext69, useEffect as useEffect71, useMemo as useMemo110, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 var useSequencePropsSubscription = (sequence, originalLocation) => {
   const { setCodeValues } = useContext69(Internals50.VisualModeOverridesContext);
@@ -22963,14 +22969,14 @@ var useSequencePropsSubscription = (sequence, originalLocation) => {
   const locationSource = validatedLocation?.source ?? null;
   const locationLine = validatedLocation?.line ?? null;
   const locationColumn = validatedLocation?.column ?? null;
-  const currentLocationSource = useRef36(locationSource);
+  const currentLocationSource = useRef37(locationSource);
   currentLocationSource.current = locationSource;
-  const currentLocationLine = useRef36(locationLine);
+  const currentLocationLine = useRef37(locationLine);
   currentLocationLine.current = locationLine;
-  const currentLocationColumn = useRef36(locationColumn);
+  const currentLocationColumn = useRef37(locationColumn);
   currentLocationColumn.current = locationColumn;
-  const nodePathRef = useRef36(null);
-  const isMountedRef = useRef36(true);
+  const nodePathRef = useRef37(null);
+  const isMountedRef = useRef37(true);
   useEffect71(() => {
     isMountedRef.current = true;
     return () => {
@@ -23184,7 +23190,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext71, useEffect as useEffect73, useMemo as useMemo112, useRef as useRef38 } from "react";
+import { useContext as useContext71, useEffect as useEffect73, useMemo as useMemo112, useRef as useRef39 } from "react";
 import { Internals as Internals53 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -23193,7 +23199,7 @@ import {
   useCallback as useCallback108,
   useEffect as useEffect72,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef37
+  useRef as useRef38
 } from "react";
 import { Internals as Internals52, useCurrentFrame } from "remotion";
 import { jsx as jsx205, jsxs as jsxs98 } from "react/jsx-runtime";
@@ -23226,7 +23232,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref = useRef37(null);
+  const ref = useRef38(null);
   const onTextChange = useCallback108((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -23354,7 +23360,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect73(() => {
     const currentRef = ref.current;
     if (!currentRef) {
@@ -23437,7 +23443,7 @@ var container43 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -23678,7 +23684,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect76, useMemo as useMemo115, useRef as useRef40, useState as useState77 } from "react";
+import { useEffect as useEffect76, useMemo as useMemo115, useRef as useRef41, useState as useState77 } from "react";
 import { Internals as Internals55 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -23737,12 +23743,12 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState77(null);
   const [error, setError] = useState77(null);
-  const mountState = useRef40({ isMounted: true });
+  const mountState = useRef41({ isMounted: true });
   const vidConf = Internals55.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const canvas = useRef40(null);
+  const canvas = useRef41(null);
   useEffect76(() => {
     const { current } = mountState;
     current.isMounted = true;
@@ -23953,7 +23959,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect77, useRef as useRef41, useState as useState78 } from "react";
+import { useEffect as useEffect77, useRef as useRef42, useState as useState78 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -24289,9 +24295,9 @@ var TimelineVideoInfo = ({
   playbackRate
 }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const [error, setError] = useState78(null);
-  const aspectRatio = useRef41(getAspectRatioFromCache(src));
+  const aspectRatio = useRef42(getAspectRatioFromCache(src));
   useEffect77(() => {
     return () => {
       clearFramesForSrc(src);
@@ -24644,8 +24650,11 @@ var container46 = {
 var noop3 = () => {
   return;
 };
-var Timeline = () => {
+var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
+  const { expandedTracks } = useContext75(ExpandedTracksContext);
+  const { previewServerState } = useContext75(StudioServerConnectionCtx);
+  const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
     if (!videoConfig) {
@@ -24669,14 +24678,15 @@ var Timeline = () => {
   const inner2 = useMemo118(() => {
     return {
       height: shown.reduce((acc, track) => {
-        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM);
+        const isExpanded = visualModeEnabled && (expandedTracks[track.sequence.id] ?? false);
+        return acc + getTimelineLayerHeight(track.sequence.type === "video" ? "video" : "other") + Number(TIMELINE_ITEM_BORDER_BOTTOM) + (isExpanded ? getExpandedTrackHeight(track.sequence.controls) + TIMELINE_ITEM_BORDER_BOTTOM : 0);
       }, 0) + TIMELINE_ITEM_BORDER_BOTTOM + (hasBeenCut ? MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) + TIMELINE_TIME_INDICATOR_HEIGHT,
       display: "flex",
       flex: 1,
       minHeight: "100%",
       overflowX: "hidden"
     };
-  }, [hasBeenCut, shown]);
+  }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
   return /* @__PURE__ */ jsx217("div", {
     ref: timelineVerticalScroll,
     style: container46,
@@ -24725,6 +24735,7 @@ var Timeline = () => {
     })
   });
 };
+var Timeline = React152.memo(TimelineInner);
 
 // src/components/Timeline/TimelineEmptyState.tsx
 import { jsx as jsx218 } from "react/jsx-runtime";
@@ -26239,7 +26250,7 @@ import {
   useContext as useContext86,
   useEffect as useEffect83,
   useMemo as useMemo126,
-  useRef as useRef43,
+  useRef as useRef44,
   useState as useState84
 } from "react";
 import { Internals as Internals64 } from "remotion";
@@ -27112,7 +27123,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect82, useMemo as useMemo125, useRef as useRef42, useState as useState83 } from "react";
+import { useEffect as useEffect82, useMemo as useMemo125, useRef as useRef43, useState as useState83 } from "react";
 import { jsx as jsx236, jsxs as jsxs119, Fragment as Fragment35 } from "react/jsx-runtime";
 var container52 = {
   paddingLeft: 16,
@@ -27142,7 +27153,7 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState83(false);
-  const ref = useRef42(null);
+  const ref = useRef43(null);
   const keybindings = useKeybinding();
   useEffect82(() => {
     const { current } = ref;
@@ -27320,7 +27331,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef43(null);
+  const inputRef = useRef44(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback117(() => {
     return;
@@ -28096,7 +28107,7 @@ import {
   useEffect as useEffect86,
   useMemo as useMemo137,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState90
 } from "react";
 
@@ -30085,12 +30096,12 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext88, useEffect as useEffect85, useRef as useRef44, useState as useState89 } from "react";
+import { useContext as useContext88, useEffect as useEffect85, useRef as useRef45, useState as useState89 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState89(false);
   const { previewServerState: state, subscribeToEvent } = useContext88(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef44("");
+  const currentOutName = useRef45("");
   currentOutName.current = outName;
   useEffect85(() => {
     if (!clientId) {
@@ -31480,7 +31491,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef45(true);
+  const isMounted = useRef46(true);
   const [isVideo] = useState90(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -32623,9 +32634,9 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect87, useRef as useRef46, useState as useState91 } from "react";
+import { useEffect as useEffect87, useRef as useRef47, useState as useState91 } from "react";
 var useEncodableAudioCodecs = (container63) => {
-  const cacheRef = useRef46({});
+  const cacheRef = useRef47({});
   const [codecsByContainer, setCodecsByContainer] = useState91(() => {
     return {
       [container63]: getSupportedAudioCodecsForContainer(container63)
@@ -32665,9 +32676,9 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect88, useRef as useRef47, useState as useState92 } from "react";
+import { useEffect as useEffect88, useRef as useRef48, useState as useState92 } from "react";
 var useEncodableVideoCodecs = (container63) => {
-  const cacheRef = useRef47({});
+  const cacheRef = useRef48({});
   const [codecsByContainer, setCodecsByContainer] = useState92(() => {
     return {
       [container63]: getSupportedVideoCodecsForContainer(container63)
@@ -35048,15 +35059,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback148, useMemo as useMemo151, useRef as useRef48, useState as useState102 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo151, useRef as useRef49, useState as useState102 } from "react";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState102(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState102(null);
   const [hoveredGuideId, setHoveredGuideId] = useState102(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState102(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef48(false);
-  const shouldDeleteGuideRef = useRef48(false);
+  const shouldCreateGuideRef = useRef49(false);
+  const shouldDeleteGuideRef = useRef49(false);
   const setEditorShowGuides = useCallback148((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);