@remotion/studio 4.0.436 → 4.0.438

package/dist/esm/internals.mjs

@@ -7900,15 +7900,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();
@@ -8335,7 +8340,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";
@@ -8439,7 +8444,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) {
@@ -8581,7 +8586,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;
@@ -8623,7 +8628,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
@@ -8949,7 +8954,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" };
@@ -8977,7 +8982,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) => {
@@ -9757,7 +9762,7 @@ import {
   useContext as useContext28,
   useEffect as useEffect34,
   useMemo as useMemo50,
-  useRef as useRef23
+  useRef as useRef24
 } from "react";
 
 // src/helpers/editor-ruler.ts
@@ -9972,7 +9977,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";
@@ -9989,7 +9994,7 @@ var Ruler = ({
   markingGaps,
   orientation
 }) => {
-  const rulerCanvasRef = useRef22(null);
+  const rulerCanvasRef = useRef23(null);
   const isVerticalRuler = orientation === "vertical";
   const {
     shouldCreateGuideRef,
@@ -10153,7 +10158,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);
@@ -10977,7 +10982,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";
@@ -11092,7 +11097,7 @@ var SetVisualControlsContext = createContext17({
   }
 });
 var VisualControlsProvider = ({ children }) => {
-  const imperativeHandles = useRef24({});
+  const imperativeHandles = useRef25({});
   const [handles, setHandles] = useState40({});
   const state = useMemo54(() => {
     return {
@@ -11121,7 +11126,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) {}
@@ -12200,7 +12205,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";
@@ -12252,7 +12257,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);
@@ -13185,7 +13190,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
@@ -13270,7 +13275,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,
@@ -13563,7 +13568,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 = {
@@ -13590,7 +13595,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",
@@ -13704,7 +13709,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) => {
@@ -13726,8 +13731,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,
@@ -13892,7 +13897,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";
@@ -13904,7 +13909,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 {
@@ -18240,7 +18245,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
@@ -18295,7 +18300,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";
@@ -18316,9 +18321,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 = [];
@@ -19049,7 +19054,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";
@@ -19123,8 +19128,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,
@@ -19673,9 +19678,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();
@@ -19831,7 +19836,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}`;
@@ -19886,8 +19891,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,
@@ -19960,7 +19965,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 = {
@@ -19975,7 +19980,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;
@@ -20136,7 +20141,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();
@@ -20242,6 +20247,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";
@@ -20614,7 +20620,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
@@ -20786,6 +20792,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) {
@@ -20825,19 +20858,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)",
@@ -20856,7 +20889,7 @@ var TimelineInOutPointer = () => {
   }
   return /* @__PURE__ */ jsxs90(Fragment27, {
     children: [
-      inFrame !== null && /* @__PURE__ */ jsx188("div", {
+      inFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: inMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20864,7 +20897,7 @@ var TimelineInOutPointer = () => {
           width: getXPositionOfItemInTimelineImperatively(inFrame, videoConfig.durationInFrames, timelineWidth)
         }
       }),
-      outFrame !== null && /* @__PURE__ */ jsx188("div", {
+      outFrame !== null && /* @__PURE__ */ jsx189("div", {
         ref: outMarkerAreaRef,
         style: {
           ...areaHighlight,
@@ -20877,9 +20910,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,
@@ -20893,14 +20926,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
   });
@@ -20914,7 +20947,7 @@ var TimelineInOutPointerHandle = ({
   if (timelineWidth === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx189(InnerTimelineInOutPointerHandle, {
+  return /* @__PURE__ */ jsx190(InnerTimelineInOutPointerHandle, {
     atFrame,
     dragging,
     timelineWidth,
@@ -20923,7 +20956,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"
@@ -20948,7 +20981,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 {};
     }
@@ -20961,10 +20994,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 = () => {
@@ -20975,11 +21008,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");
     }
@@ -20989,18 +21022,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;
     }
@@ -21066,7 +21099,7 @@ var Inner2 = () => {
     get,
     outFrame
   ]);
-  const onPointerMoveScrubbing = useCallback96((e) => {
+  const onPointerMoveScrubbing = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21136,7 +21169,7 @@ var Inner2 = () => {
       seek(frame2);
     }
   }, [videoConfig, dragging.dragging, left3, width, seek]);
-  const onPointerMoveInOut = useCallback96((e) => {
+  const onPointerMoveInOut = useCallback97((e) => {
     if (!videoConfig) {
       return;
     }
@@ -21172,7 +21205,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 = "";
@@ -21200,7 +21233,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) {
@@ -21286,7 +21319,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpInOut);
     };
   }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-  const inContextMenu = useMemo102(() => {
+  const inContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-in",
@@ -21311,7 +21344,7 @@ var Inner2 = () => {
       }
     ];
   }, [setInAndOutFrames, videoConfig.id]);
-  const outContextMenu = useMemo102(() => {
+  const outContextMenu = useMemo103(() => {
     return [
       {
         id: "hide-out",
@@ -21340,21 +21373,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
@@ -21366,39 +21399,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";
 
@@ -22278,7 +22284,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);
@@ -22306,14 +22312,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 () => {
@@ -22527,7 +22533,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
@@ -22536,7 +22542,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";
@@ -22569,7 +22575,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]);
@@ -22697,7 +22703,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect72(() => {
     const currentRef = ref.current;
     if (!currentRef) {
@@ -22780,7 +22786,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
@@ -23021,7 +23027,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
@@ -23080,12 +23086,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;
@@ -23296,7 +23302,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
@@ -23632,9 +23638,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);
@@ -23987,8 +23993,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) {
@@ -24012,14 +24021,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,
@@ -24068,6 +24078,7 @@ var Timeline = () => {
     })
   });
 };
+var Timeline = React150.memo(TimelineInner);
 
 // src/components/Timeline/TimelineEmptyState.tsx
 import { jsx as jsx215 } from "react/jsx-runtime";
@@ -25582,7 +25593,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";
@@ -26455,7 +26466,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,
@@ -26485,7 +26496,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;
@@ -26663,7 +26674,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;
@@ -27439,7 +27450,7 @@ import {
   useEffect as useEffect85,
   useMemo as useMemo137,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState88
 } from "react";
 
@@ -29428,12 +29439,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) {
@@ -30823,7 +30834,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;
   });
@@ -31966,9 +31977,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)
@@ -32008,9 +32019,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)
@@ -34391,15 +34402,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);