@remotion/studio 4.0.436 → 4.0.437

package/dist/esm/{chunk-x88z6n54.js → chunk-5dvr7831.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
@@ -20810,7 +20816,7 @@ import {
   useContext as useContext65,
   useEffect as useEffect65,
   useMemo as useMemo102,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState67
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
@@ -20974,7 +20980,7 @@ var Inner2 = () => {
     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);
@@ -21347,7 +21353,7 @@ 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";
@@ -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,7 +23974,7 @@ var container45 = {
 var noop3 = () => {
   return;
 };
-var Timeline = () => {
+var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
@@ -24049,6 +24055,7 @@ var Timeline = () => {
     })
   });
 };
+var Timeline = React150.memo(TimelineInner);
 
 // src/components/Timeline/TimelineEmptyState.tsx
 import { jsx as jsx215 } from "react/jsx-runtime";
@@ -25563,7 +25570,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 +26443,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 +26473,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 +26651,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 +27427,7 @@ import {
   useEffect as useEffect85,
   useMemo as useMemo137,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState88
 } from "react";
 
@@ -29409,12 +29416,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 +30811,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 +31954,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 +31996,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 +34379,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);