@remotion/studio 4.0.436 → 4.0.438

package/dist/esm/{chunk-x88z6n54.js → chunk-ba0scebn.js}

@@ -7881,15 +7881,20 @@ var MenuBuildIndicator = () => {
 import { useCallback as useCallback93, useContext as useContext61, useEffect as useEffect63 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback92, useContext as useContext60, useEffect as useEffect62, useMemo as useMemo98 } from "react";
+import React124, { useCallback as useCallback92, useContext as useContext60, useEffect as useEffect62, useMemo as useMemo98 } from "react";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect26, useState as useState32 } from "react";
+import { useEffect as useEffect26, useRef as useRef19, useState as useState32 } from "react";
 function useBreakpoint(breakpoint2) {
   const [compactUI, setCompactUI] = useState32(window.innerWidth < breakpoint2);
+  const compactUIRef = useRef19(compactUI);
   useEffect26(() => {
     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();
@@ -8316,7 +8321,7 @@ var style4 = {
 };
 
 // src/error-overlay/remotion-overlay/CompositionIdsDropdown.tsx
-import { useEffect as useEffect28, useMemo as useMemo42, useRef as useRef19, useState as useState33 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo42, useRef as useRef20, useState as useState33 } from "react";
 
 // src/error-overlay/remotion-overlay/carets.tsx
 import { jsx as jsx69 } from "react/jsx-runtime";
@@ -8420,7 +8425,7 @@ var searchStyle = {
 var CompositionIdsDropdown = ({ compositionIds, currentId }) => {
   const [open, setOpen] = useState33(false);
   const [query, setQuery] = useState33("");
-  const containerRef = useRef19(null);
+  const containerRef = useRef20(null);
   const filtered = useMemo42(() => {
     const q = query.trim().toLowerCase();
     if (!q) {
@@ -8562,7 +8567,7 @@ var DismissButton = () => {
 
 // src/error-overlay/remotion-overlay/ErrorMessage.tsx
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
-import { useCallback as useCallback32, useMemo as useMemo43, useRef as useRef20, useState as useState34 } from "react";
+import { useCallback as useCallback32, useMemo as useMemo43, useRef as useRef21, useState as useState34 } from "react";
 import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
 var fontSize = 24;
 var lineHeight = 1.5;
@@ -8604,7 +8609,7 @@ var moreButton = {
 };
 var ErrorMessage = ({ message }) => {
   const [expanded, setExpanded] = useState34(false);
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const size2 = PlayerInternals9.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: true
@@ -8930,7 +8935,7 @@ import {
   useEffect as useEffect30,
   useMemo as useMemo44,
   useReducer,
-  useRef as useRef21
+  useRef as useRef22
 } from "react";
 import { jsx as jsx77, jsxs as jsxs33 } from "react/jsx-runtime";
 var initialState = { type: "idle" };
@@ -8958,7 +8963,7 @@ var reducer = (state, action) => {
   return state;
 };
 var OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
-  const isMounted = useRef21(true);
+  const isMounted = useRef22(true);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { registerKeybinding } = useKeybinding();
   const dispatchIfMounted = useCallback34((payload) => {
@@ -9738,7 +9743,7 @@ import {
   useContext as useContext28,
   useEffect as useEffect34,
   useMemo as useMemo50,
-  useRef as useRef23
+  useRef as useRef24
 } from "react";
 
 // src/helpers/editor-ruler.ts
@@ -9953,7 +9958,7 @@ import {
   useContext as useContext27,
   useEffect as useEffect33,
   useMemo as useMemo49,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState37
 } from "react";
 import { Internals as Internals22 } from "remotion";
@@ -9970,7 +9975,7 @@ var Ruler = ({
   markingGaps,
   orientation
 }) => {
-  const rulerCanvasRef = useRef22(null);
+  const rulerCanvasRef = useRef23(null);
   const isVerticalRuler = orientation === "vertical";
   const {
     shouldCreateGuideRef,
@@ -10134,7 +10139,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     rulerMarkingGaps,
     scale
   }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
-  const requestAnimationFrameRef = useRef23(null);
+  const requestAnimationFrameRef = useRef24(null);
   const onMouseMove = useCallback39((e) => {
     if (requestAnimationFrameRef.current) {
       cancelAnimationFrame(requestAnimationFrameRef.current);
@@ -10958,7 +10963,7 @@ import {
   useEffect as useEffect40,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo54,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState40
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
@@ -11073,7 +11078,7 @@ var SetVisualControlsContext = createContext17({
   }
 });
 var VisualControlsProvider = ({ children }) => {
-  const imperativeHandles = useRef24({});
+  const imperativeHandles = useRef25({});
   const [handles, setHandles] = useState40({});
   const state = useMemo54(() => {
     return {
@@ -11102,7 +11107,7 @@ var VisualControlsProvider = ({ children }) => {
     };
   }, []);
   const z = useZodIfPossible();
-  const changedRef = useRef24(false);
+  const changedRef = useRef25(false);
   const env = useRemotionEnvironment2();
   const visualControl = useCallback42(function(key, value, schema) {
     if (handles && false) {}
@@ -12181,7 +12186,7 @@ import {
   useContext as useContext36,
   useEffect as useEffect42,
   useMemo as useMemo59,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState42
 } from "react";
 import { Internals as Internals31 } from "remotion";
@@ -12233,7 +12238,7 @@ var useLocalState = ({
       zodValidation: zodSafeParse(schema, savedValue)
     };
   }, [localUnsavedValue, savedValue, schema]);
-  const stateRef = useRef25(currentLocalValue);
+  const stateRef = useRef26(currentLocalValue);
   stateRef.current = currentLocalValue;
   const onChange = useCallback48((updater, forceApply, increment) => {
     const newValue = updater(stateRef.current.value);
@@ -13166,7 +13171,7 @@ var ZodArrayItemEditor = ({
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback53, useEffect as useEffect43, useMemo as useMemo66, useRef as useRef26, useState as useState45 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect43, useMemo as useMemo66, useRef as useRef27, useState as useState45 } from "react";
 import ReactDOM7 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -13251,7 +13256,7 @@ var container28 = {
 var InfoBubble = ({ title: title4, children }) => {
   const [hovered, setIsHovered] = useState45(false);
   const [opened, setOpened] = useState45(false);
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -13544,7 +13549,7 @@ var ZodArrayEditor = ({
 import { useCallback as useCallback54 } from "react";
 
 // src/components/Checkbox.tsx
-import { useEffect as useEffect44, useMemo as useMemo68, useRef as useRef27 } from "react";
+import { useEffect as useEffect44, useMemo as useMemo68, useRef as useRef28 } from "react";
 import { jsx as jsx117, jsxs as jsxs56 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -13571,7 +13576,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",
@@ -13685,7 +13690,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React81, { useCallback as useCallback55, useEffect as useEffect45, useMemo as useMemo69, useRef as useRef28, useState as useState47 } from "react";
+import React81, { useCallback as useCallback55, useEffect as useEffect45, useMemo as useMemo69, useRef as useRef29, useState as useState47 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx119 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -13707,8 +13712,8 @@ var InputDraggerForwardRefFn = ({
 }, ref) => {
   const [inputFallback, setInputFallback] = useState47(false);
   const [dragging, setDragging] = useState47(false);
-  const fallbackRef = useRef28(null);
-  const pointerDownRef = useRef28(false);
+  const fallbackRef = useRef29(null);
+  const pointerDownRef = useRef29(false);
   const style8 = useMemo69(() => {
     return {
       ...inputBaseStyle,
@@ -13873,7 +13878,7 @@ import {
   useEffect as useEffect46,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo70,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState48
 } from "react";
 import { jsx as jsx120 } from "react/jsx-runtime";
@@ -13885,7 +13890,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState48(false);
   const [isHovered, setIsHovered] = useState48(false);
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo70(() => {
     return {
@@ -18221,7 +18226,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext57, useEffect as useEffect60, useRef as useRef32, useState as useState62 } from "react";
+import { useContext as useContext57, useEffect as useEffect60, useRef as useRef33, useState as useState62 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/state/loop.ts
@@ -18276,7 +18281,7 @@ import {
   useEffect as useEffect55,
   useLayoutEffect,
   useMemo as useMemo93,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState59
 } from "react";
 import { Internals as Internals38 } from "remotion";
@@ -18297,9 +18302,9 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals38.Timeline.useTimelinePosition();
   const [marker, rerender] = useState59({});
   const [fps, setFps] = useState59(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 = [];
@@ -19030,7 +19035,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback90, useContext as useContext55, useMemo as useMemo95, useRef as useRef31, useState as useState61 } from "react";
+import { useCallback as useCallback90, useContext as useContext55, useMemo as useMemo95, useRef as useRef32, useState as useState61 } from "react";
 import ReactDOM8 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx177, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -19104,8 +19109,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext55(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState61(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState61(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,
@@ -19654,9 +19659,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] = useState62(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
@@ -19812,7 +19817,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo96, useRef as useRef33, useState as useState63 } from "react";
+import { useMemo as useMemo96, useRef as useRef34, useState as useState63 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -19867,8 +19872,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState63(initialTimelineFlex ?? defaultFlex);
-  const ref = useRef33(null);
-  const isDragging = useRef33(false);
+  const ref = useRef34(null);
+  const isDragging = useRef34(false);
   const value = useMemo96(() => {
     return {
       flexValue,
@@ -19941,7 +19946,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext59, useEffect as useEffect61, useRef as useRef34, useState as useState64 } from "react";
+import { useContext as useContext59, useEffect as useEffect61, useRef as useRef35, useState as useState64 } from "react";
 import { jsx as jsx183 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19956,7 +19961,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState64(() => Date.now());
-  const ref = useRef34(null);
+  const ref = useRef35(null);
   useEffect61(() => {
     if (context.isDragging.current) {
       return;
@@ -20117,7 +20122,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();
@@ -20223,6 +20228,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     ]
   });
 };
+var TopPanel = React124.memo(TopPanelInner);
 
 // src/components/SidebarCollapserControls.tsx
 import { jsx as jsx185, jsxs as jsxs87, Fragment as Fragment26 } from "react/jsx-runtime";
@@ -20595,7 +20601,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import { useContext as useContext75, useMemo as useMemo118 } from "react";
+import React150, { useContext as useContext75, useMemo as useMemo118 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -20767,6 +20773,33 @@ var calculateTimeline = ({
   });
 };
 
+// src/components/ExpandedTracksProvider.tsx
+import { createContext as createContext21, useCallback as useCallback96, useMemo as useMemo101, useState as useState67 } from "react";
+import { jsx as jsx188 } from "react/jsx-runtime";
+var ExpandedTracksContext = createContext21({
+  expandedTracks: {},
+  toggleTrack: () => {
+    throw new Error("ExpandedTracksContext not initialized");
+  }
+});
+var ExpandedTracksProvider = ({ children }) => {
+  const [expandedTracks, setExpandedTracks] = useState67({});
+  const toggleTrack = useCallback96((id) => {
+    setExpandedTracks((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+  const value = useMemo101(() => ({
+    expandedTracks,
+    toggleTrack
+  }), [expandedTracks, toggleTrack]);
+  return /* @__PURE__ */ jsx188(ExpandedTracksContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/components/Timeline/is-collapsed.ts
 var isTrackHidden = (track) => {
   if (!track.sequence.parent) {
@@ -20806,19 +20839,19 @@ var MaxTimelineTracksReached = () => {
 // src/components/Timeline/TimelineDragHandler.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
-  useCallback as useCallback96,
+  useCallback as useCallback97,
   useContext as useContext65,
   useEffect as useEffect65,
-  useMemo as useMemo102,
-  useRef as useRef35,
-  useState as useState67
+  useMemo as useMemo103,
+  useRef as useRef36,
+  useState as useState68
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef10, useContext as useContext63 } from "react";
 import { Internals as Internals46 } from "remotion";
-import { jsx as jsx188, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs90, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -20837,7 +20870,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs90(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx188("div", {
+      inFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20845,7 +20878,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx188("div", {
+      outFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20858,9 +20891,9 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef11, useContext as useContext64, useMemo as useMemo101 } from "react";
+import { createRef as createRef11, useContext as useContext64, useMemo as useMemo102 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var line3 = {
   height: "100%",
   width: 1,
@@ -20874,14 +20907,14 @@ var inPointerHandle = createRef11();
 var outPointerHandle = createRef11();
 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__ */ jsx189("div", {
+  return /* @__PURE__ */ jsx190("div", {
     ref: type === "in" ? inPointerHandle : outPointerHandle,
     style: style10
   });
@@ -20895,7 +20928,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx189(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx190(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -20904,7 +20937,7 @@ var TimelineInOutPointerHandle = ({
 };
 
 // src/components/Timeline/TimelineDragHandler.tsx
-import { jsx as jsx190, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs91 } from "react/jsx-runtime";
 var inner = {
   overflowY: "auto",
   overflowX: "hidden"
@@ -20929,7 +20962,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 {};
     }
@@ -20942,10 +20975,10 @@ var TimelineDragHandler = () => {
   if (!canvasContent || canvasContent.type !== "composition") {
     return null;
   }
-  return /* @__PURE__ */ jsx190("div", {
+  return /* @__PURE__ */ jsx191("div", {
     ref: sliderAreaRef,
     style: containerStyle3,
-    children: video ? /* @__PURE__ */ jsx190(Inner2, {}) : null
+    children: video ? /* @__PURE__ */ jsx191(Inner2, {}) : null
   });
 };
 var Inner2 = () => {
@@ -20956,11 +20989,11 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState67({
+  const [inOutDragging, setInOutDragging] = useState68({
     dragging: false
   });
   const timelineWidth = useContext65(TimelineWidthContext);
-  const get = useCallback96((frame2) => {
+  const get = useCallback97((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
     }
@@ -20970,18 +21003,18 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState67({
+  const [dragging, setDragging] = useState68({
     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 = useCallback96((e) => {
+  const onPointerDown = useCallback97((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -21047,7 +21080,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback96((e) => {
+  const onPointerMoveScrubbing = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21117,7 +21150,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback96((e) => {
+  const onPointerMoveInOut = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21153,7 +21186,7 @@ var Inner2 = () => {
       outMarkerAreaRef.current.style.width = String(width - get(outFrame) - offset) + "px";
     }
   }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
-  const onPointerUpScrubbing = useCallback96((e) => {
+  const onPointerUpScrubbing = useCallback97((e) => {
     stopInterval();
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -21181,7 +21214,7 @@ var Inner2 = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  const onPointerUpInOut = useCallback96((e) => {
+  const onPointerUpInOut = useCallback97((e) => {
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
     if (!videoConfig) {
@@ -21267,7 +21300,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21292,7 +21325,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -21321,21 +21354,21 @@ var Inner2 = () => {
     style: style10,
     onPointerDown,
     children: [
-      /* @__PURE__ */ jsx190("div", {
+      /* @__PURE__ */ jsx191("div", {
         style: inner,
         className: VERTICAL_SCROLLBAR_CLASSNAME
       }),
-      inFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      inFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: inContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "in",
           atFrame: inFrame,
           dragging: inOutDragging.dragging === "in"
         })
       }),
-      outFrame !== null && /* @__PURE__ */ jsx190(ContextMenu, {
+      outFrame !== null && /* @__PURE__ */ jsx191(ContextMenu, {
         values: outContextMenu,
-        children: /* @__PURE__ */ jsx190(TimelineInOutPointerHandle, {
+        children: /* @__PURE__ */ jsx191(TimelineInOutPointerHandle, {
           type: "out",
           dragging: inOutDragging.dragging === "out",
           atFrame: outFrame
@@ -21347,39 +21380,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 useCallback106, useContext as useContext70, useMemo as useMemo111 } from "react";
 import { Internals as Internals51 } from "remotion";
 
-// src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback97, useMemo as useMemo103, useState as useState68 } 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] = useState68({});
-  const toggleTrack = useCallback97((id) => {
-    setExpandedTracks((prev) => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  }, []);
-  const value = useMemo103(() => ({
-    expandedTracks,
-    toggleTrack
-  }), [expandedTracks, toggleTrack]);
-  return /* @__PURE__ */ jsx191(ExpandedTracksContext.Provider, {
-    value,
-    children
-  });
-};
-
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React137, { useMemo as useMemo108 } from "react";
 
@@ -22259,7 +22265,7 @@ var useResolvedStack = (stack2) => {
 };
 
 // src/components/Timeline/use-sequence-props-subscription.ts
-import { useCallback as useCallback105, useContext as useContext69, useEffect as useEffect70, useMemo as useMemo110, useRef as useRef36 } from "react";
+import { useCallback as useCallback105, useContext as useContext69, useEffect as useEffect70, useMemo as useMemo110, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 var useSequencePropsSubscription = (sequence, originalLocation) => {
   const { setCodeValues } = useContext69(Internals50.VisualModeOverridesContext);
@@ -22287,14 +22293,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);
   useEffect70(() => {
     isMountedRef.current = true;
     return () => {
@@ -22508,7 +22514,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext71, useEffect as useEffect72, useMemo as useMemo112, useRef as useRef38 } from "react";
+import { useContext as useContext71, useEffect as useEffect72, useMemo as useMemo112, useRef as useRef39 } from "react";
 import { Internals as Internals53 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -22517,7 +22523,7 @@ import {
   useCallback as useCallback107,
   useEffect as useEffect71,
   useImperativeHandle as useImperativeHandle13,
-  useRef as useRef37
+  useRef as useRef38
 } from "react";
 import { Internals as Internals52, useCurrentFrame } from "remotion";
 import { jsx as jsx202, jsxs as jsxs97 } from "react/jsx-runtime";
@@ -22550,7 +22556,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 = useCallback107((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -22678,7 +22684,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect72(() => {
     const currentRef = ref.current;
     if (!currentRef) {
@@ -22761,7 +22767,7 @@ var container42 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -23002,7 +23008,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect75, useMemo as useMemo115, useRef as useRef40, useState as useState75 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo115, useRef as useRef41, useState as useState75 } from "react";
 import { Internals as Internals55 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -23061,12 +23067,12 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState75(null);
   const [error, setError] = useState75(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);
   useEffect75(() => {
     const { current } = mountState;
     current.isMounted = true;
@@ -23277,7 +23283,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect76, useRef as useRef41, useState as useState76 } from "react";
+import { useEffect as useEffect76, useRef as useRef42, useState as useState76 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -23613,9 +23619,9 @@ var TimelineVideoInfo = ({
   playbackRate
 }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const [error, setError] = useState76(null);
-  const aspectRatio = useRef41(getAspectRatioFromCache(src));
+  const aspectRatio = useRef42(getAspectRatioFromCache(src));
   useEffect76(() => {
     return () => {
       clearFramesForSrc(src);
@@ -23968,8 +23974,11 @@ var container45 = {
 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) {
@@ -23993,14 +24002,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__ */ jsx214("div", {
     ref: timelineVerticalScroll,
     style: container45,
@@ -24049,6 +24059,7 @@ var Timeline = () => {
     })
   });
 };
+var Timeline = React150.memo(TimelineInner);
 
 // src/components/Timeline/TimelineEmptyState.tsx
 import { jsx as jsx215 } from "react/jsx-runtime";
@@ -25563,7 +25574,7 @@ import {
   useContext as useContext86,
   useEffect as useEffect82,
   useMemo as useMemo126,
-  useRef as useRef43,
+  useRef as useRef44,
   useState as useState82
 } from "react";
 import { Internals as Internals64 } from "remotion";
@@ -26436,7 +26447,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect81, useMemo as useMemo125, useRef as useRef42, useState as useState81 } from "react";
+import { useEffect as useEffect81, useMemo as useMemo125, useRef as useRef43, useState as useState81 } from "react";
 import { jsx as jsx233, jsxs as jsxs118, Fragment as Fragment35 } from "react/jsx-runtime";
 var container51 = {
   paddingLeft: 16,
@@ -26466,7 +26477,7 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState81(false);
-  const ref = useRef42(null);
+  const ref = useRef43(null);
   const keybindings = useKeybinding();
   useEffect81(() => {
     const { current } = ref;
@@ -26644,7 +26655,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef43(null);
+  const inputRef = useRef44(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback116(() => {
     return;
@@ -27420,7 +27431,7 @@ import {
   useEffect as useEffect85,
   useMemo as useMemo137,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState88
 } from "react";
 
@@ -29409,12 +29420,12 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback128, useMemo as useMemo132 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext88, useEffect as useEffect84, useRef as useRef44, useState as useState87 } from "react";
+import { useContext as useContext88, useEffect as useEffect84, useRef as useRef45, useState as useState87 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState87(false);
   const { previewServerState: state, subscribeToEvent } = useContext88(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef44("");
+  const currentOutName = useRef45("");
   currentOutName.current = outName;
   useEffect84(() => {
     if (!clientId) {
@@ -30804,7 +30815,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef45(true);
+  const isMounted = useRef46(true);
   const [isVideo] = useState88(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -31947,9 +31958,9 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect86, useRef as useRef46, useState as useState89 } from "react";
+import { useEffect as useEffect86, useRef as useRef47, useState as useState89 } from "react";
 var useEncodableAudioCodecs = (container62) => {
-  const cacheRef = useRef46({});
+  const cacheRef = useRef47({});
   const [codecsByContainer, setCodecsByContainer] = useState89(() => {
     return {
       [container62]: getSupportedAudioCodecsForContainer(container62)
@@ -31989,9 +32000,9 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect87, useRef as useRef47, useState as useState90 } from "react";
+import { useEffect as useEffect87, useRef as useRef48, useState as useState90 } from "react";
 var useEncodableVideoCodecs = (container62) => {
-  const cacheRef = useRef47({});
+  const cacheRef = useRef48({});
   const [codecsByContainer, setCodecsByContainer] = useState90(() => {
     return {
       [container62]: getSupportedVideoCodecsForContainer(container62)
@@ -34372,15 +34383,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback147, useMemo as useMemo151, useRef as useRef48, useState as useState100 } from "react";
+import { useCallback as useCallback147, useMemo as useMemo151, useRef as useRef49, useState as useState100 } from "react";
 import { jsx as jsx292 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState100(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState100(null);
   const [hoveredGuideId, setHoveredGuideId] = useState100(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState100(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef48(false);
-  const shouldDeleteGuideRef = useRef48(false);
+  const shouldCreateGuideRef = useRef49(false);
+  const shouldDeleteGuideRef = useRef49(false);
   const setEditorShowGuides = useCallback147((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);