@remotion/studio 4.0.435 → 4.0.437

package/dist/esm/previewEntry.mjs

@@ -10108,15 +10108,20 @@ var MenuBuildIndicator = () => {
 import { useCallback as useCallback94, useContext as useContext61, useEffect as useEffect64 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback93, useContext as useContext60, useEffect as useEffect63, useMemo as useMemo98 } from "react";
+import React126, { useCallback as useCallback93, useContext as useContext60, useEffect as useEffect63, useMemo as useMemo98 } from "react";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect33, useState as useState38 } from "react";
+import { useEffect as useEffect33, useRef as useRef22, useState as useState38 } from "react";
 function useBreakpoint(breakpoint2) {
   const [compactUI, setCompactUI] = useState38(window.innerWidth < breakpoint2);
+  const compactUIRef = useRef22(compactUI);
   useEffect33(() => {
     function handleResize() {
-      setCompactUI(window.innerWidth < breakpoint2);
+      const newValue = window.innerWidth < breakpoint2;
+      if (newValue !== compactUIRef.current) {
+        setCompactUI(newValue);
+      }
+      compactUIRef.current = newValue;
     }
     window.addEventListener("resize", handleResize);
     handleResize();
@@ -10414,7 +10419,7 @@ import {
   useContext as useContext28,
   useEffect as useEffect35,
   useMemo as useMemo50,
-  useRef as useRef23
+  useRef as useRef24
 } from "react";
 
 // src/helpers/editor-ruler.ts
@@ -10629,7 +10634,7 @@ import {
   useContext as useContext27,
   useEffect as useEffect34,
   useMemo as useMemo49,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState39
 } from "react";
 import { Internals as Internals22 } from "remotion";
@@ -10646,7 +10651,7 @@ var Ruler = ({
   markingGaps,
   orientation
 }) => {
-  const rulerCanvasRef = useRef22(null);
+  const rulerCanvasRef = useRef23(null);
   const isVerticalRuler = orientation === "vertical";
   const {
     shouldCreateGuideRef,
@@ -10810,7 +10815,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     rulerMarkingGaps,
     scale
   }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
-  const requestAnimationFrameRef = useRef23(null);
+  const requestAnimationFrameRef = useRef24(null);
   const onMouseMove = useCallback40((e) => {
     if (requestAnimationFrameRef.current) {
       cancelAnimationFrame(requestAnimationFrameRef.current);
@@ -11634,7 +11639,7 @@ import {
   useEffect as useEffect41,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo54,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState42
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
@@ -11749,7 +11754,7 @@ var SetVisualControlsContext = createContext17({
   }
 });
 var VisualControlsProvider = ({ children }) => {
-  const imperativeHandles = useRef24({});
+  const imperativeHandles = useRef25({});
   const [handles, setHandles] = useState42({});
   const state = useMemo54(() => {
     return {
@@ -11778,7 +11783,7 @@ var VisualControlsProvider = ({ children }) => {
     };
   }, []);
   const z = useZodIfPossible();
-  const changedRef = useRef24(false);
+  const changedRef = useRef25(false);
   const env = useRemotionEnvironment2();
   const visualControl = useCallback43(function(key, value, schema) {
     if (handles && false) {}
@@ -12857,7 +12862,7 @@ import {
   useContext as useContext36,
   useEffect as useEffect43,
   useMemo as useMemo59,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState44
 } from "react";
 import { Internals as Internals31 } from "remotion";
@@ -12909,7 +12914,7 @@ var useLocalState = ({
       zodValidation: zodSafeParse(schema, savedValue)
     };
   }, [localUnsavedValue, savedValue, schema]);
-  const stateRef = useRef25(currentLocalValue);
+  const stateRef = useRef26(currentLocalValue);
   stateRef.current = currentLocalValue;
   const onChange = useCallback49((updater, forceApply, increment) => {
     const newValue = updater(stateRef.current.value);
@@ -13842,7 +13847,7 @@ var ZodArrayItemEditor = ({
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback54, useEffect as useEffect44, useMemo as useMemo66, useRef as useRef26, useState as useState47 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect44, useMemo as useMemo66, useRef as useRef27, useState as useState47 } from "react";
 import ReactDOM8 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -13927,7 +13932,7 @@ var container29 = {
 var InfoBubble = ({ title: title4, children }) => {
   const [hovered, setIsHovered] = useState47(false);
   const [opened, setOpened] = useState47(false);
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -14220,7 +14225,7 @@ var ZodArrayEditor = ({
 import { useCallback as useCallback55 } from "react";
 
 // src/components/Checkbox.tsx
-import { useEffect as useEffect45, useMemo as useMemo68, useRef as useRef27 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo68, useRef as useRef28 } from "react";
 import { jsx as jsx120, jsxs as jsxs57 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -14247,7 +14252,7 @@ var box = {
   color: "white"
 };
 var Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const input2 = useMemo68(() => {
     return {
       appearance: "none",
@@ -14361,7 +14366,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React83, { useCallback as useCallback56, useEffect as useEffect46, useMemo as useMemo69, useRef as useRef28, useState as useState49 } from "react";
+import React83, { useCallback as useCallback56, useEffect as useEffect46, useMemo as useMemo69, useRef as useRef29, useState as useState49 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -14383,8 +14388,8 @@ var InputDraggerForwardRefFn = ({
 }, ref) => {
   const [inputFallback, setInputFallback] = useState49(false);
   const [dragging, setDragging] = useState49(false);
-  const fallbackRef = useRef28(null);
-  const pointerDownRef = useRef28(false);
+  const fallbackRef = useRef29(null);
+  const pointerDownRef = useRef29(false);
   const style8 = useMemo69(() => {
     return {
       ...inputBaseStyle,
@@ -14549,7 +14554,7 @@ import {
   useEffect as useEffect47,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo70,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState50
 } from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
@@ -14561,7 +14566,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState50(false);
   const [isHovered, setIsHovered] = useState50(false);
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo70(() => {
     return {
@@ -18897,7 +18902,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext57, useEffect as useEffect61, useRef as useRef32, useState as useState64 } from "react";
+import { useContext as useContext57, useEffect as useEffect61, useRef as useRef33, useState as useState64 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/state/loop.ts
@@ -18952,7 +18957,7 @@ import {
   useEffect as useEffect56,
   useLayoutEffect,
   useMemo as useMemo93,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState61
 } from "react";
 import { Internals as Internals38 } from "remotion";
@@ -18973,9 +18978,9 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals38.Timeline.useTimelinePosition();
   const [marker, rerender] = useState61({});
   const [fps, setFps] = useState61(0);
-  const previousUpdates = useRef30([]);
-  const fpsRef = useRef30(0);
-  const playingRef = useRef30(playing);
+  const previousUpdates = useRef31([]);
+  const fpsRef = useRef31(0);
+  const playingRef = useRef31(playing);
   useLayoutEffect(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
@@ -19706,7 +19711,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback91, useContext as useContext55, useMemo as useMemo95, useRef as useRef31, useState as useState63 } from "react";
+import { useCallback as useCallback91, useContext as useContext55, useMemo as useMemo95, useRef as useRef32, useState as useState63 } from "react";
 import ReactDOM9 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs83, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -19780,8 +19785,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext55(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState63(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState63(false);
-  const dropdownRef = useRef31(null);
-  const containerRef = useRef31(null);
+  const dropdownRef = useRef32(null);
+  const containerRef = useRef32(null);
   const { currentZIndex } = useZIndex();
   const size4 = PlayerInternals14.useElementSize(dropdownRef, {
     triggerOnWindowResize: true,
@@ -20330,9 +20335,9 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { setMediaMuted } = useContext57(Internals45.SetMediaVolumeContext);
   const { canvasContent } = useContext57(Internals45.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
-  const previewToolbarRef = useRef32(null);
-  const leftScrollIndicatorRef = useRef32(null);
-  const rightScrollIndicatorRef = useRef32(null);
+  const previewToolbarRef = useRef33(null);
+  const leftScrollIndicatorRef = useRef33(null);
+  const rightScrollIndicatorRef = useRef33(null);
   const isStill = useIsStill();
   const [loop, setLoop] = useState64(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
@@ -20488,7 +20493,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo96, useRef as useRef33, useState as useState65 } from "react";
+import { useMemo as useMemo96, useRef as useRef34, useState as useState65 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -20543,8 +20548,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState65(initialTimelineFlex ?? defaultFlex);
-  const ref = useRef33(null);
-  const isDragging = useRef33(false);
+  const ref = useRef34(null);
+  const isDragging = useRef34(false);
   const value = useMemo96(() => {
     return {
       flexValue,
@@ -20617,7 +20622,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext59, useEffect as useEffect62, useRef as useRef34, useState as useState66 } from "react";
+import { useContext as useContext59, useEffect as useEffect62, useRef as useRef35, useState as useState66 } from "react";
 import { jsx as jsx186 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -20632,7 +20637,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState66(() => Date.now());
-  const ref = useRef34(null);
+  const ref = useRef35(null);
   useEffect62(() => {
     if (context.isDragging.current) {
       return;
@@ -20793,7 +20798,7 @@ var useResponsiveSidebarStatus = () => {
   }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
   return actualStateLeft;
 };
-var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
+var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
   const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext60(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
   const actualStateLeft = useResponsiveSidebarStatus();
@@ -20899,6 +20904,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     ]
   });
 };
+var TopPanel = React126.memo(TopPanelInner);
 
 // src/components/SidebarCollapserControls.tsx
 import { jsx as jsx188, jsxs as jsxs88, Fragment as Fragment26 } from "react/jsx-runtime";
@@ -21271,7 +21277,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import { useContext as useContext75, useMemo as useMemo118 } from "react";
+import React152, { useContext as useContext75, useMemo as useMemo118 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -21486,7 +21492,7 @@ import {
   useContext as useContext65,
   useEffect as useEffect66,
   useMemo as useMemo102,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState69
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
@@ -21650,7 +21656,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);
@@ -22023,7 +22029,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 useCallback107, useContext as useContext70, useMemo as useMemo111 } from "react";
@@ -22935,7 +22941,7 @@ var useResolvedStack = (stack2) => {
 };
 
 // src/components/Timeline/use-sequence-props-subscription.ts
-import { useCallback as useCallback106, useContext as useContext69, useEffect as useEffect71, useMemo as useMemo110, useRef as useRef36 } from "react";
+import { useCallback as useCallback106, useContext as useContext69, useEffect as useEffect71, useMemo as useMemo110, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 var useSequencePropsSubscription = (sequence, originalLocation) => {
   const { setCodeValues } = useContext69(Internals50.VisualModeOverridesContext);
@@ -22963,14 +22969,14 @@ var useSequencePropsSubscription = (sequence, originalLocation) => {
   const locationSource = validatedLocation?.source ?? null;
   const locationLine = validatedLocation?.line ?? null;
   const locationColumn = validatedLocation?.column ?? null;
-  const currentLocationSource = useRef36(locationSource);
+  const currentLocationSource = useRef37(locationSource);
   currentLocationSource.current = locationSource;
-  const currentLocationLine = useRef36(locationLine);
+  const currentLocationLine = useRef37(locationLine);
   currentLocationLine.current = locationLine;
-  const currentLocationColumn = useRef36(locationColumn);
+  const currentLocationColumn = useRef37(locationColumn);
   currentLocationColumn.current = locationColumn;
-  const nodePathRef = useRef36(null);
-  const isMountedRef = useRef36(true);
+  const nodePathRef = useRef37(null);
+  const isMountedRef = useRef37(true);
   useEffect71(() => {
     isMountedRef.current = true;
     return () => {
@@ -23184,7 +23190,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext71, useEffect as useEffect73, useMemo as useMemo112, useRef as useRef38 } from "react";
+import { useContext as useContext71, useEffect as useEffect73, useMemo as useMemo112, useRef as useRef39 } from "react";
 import { Internals as Internals53 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -23193,7 +23199,7 @@ import {
   useCallback as useCallback108,
   useEffect as useEffect72,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef37
+  useRef as useRef38
 } from "react";
 import { Internals as Internals52, useCurrentFrame } from "remotion";
 import { jsx as jsx205, jsxs as jsxs98 } from "react/jsx-runtime";
@@ -23226,7 +23232,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref = useRef37(null);
+  const ref = useRef38(null);
   const onTextChange = useCallback108((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -23354,7 +23360,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect73(() => {
     const currentRef = ref.current;
     if (!currentRef) {
@@ -23437,7 +23443,7 @@ var container43 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -23678,7 +23684,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect76, useMemo as useMemo115, useRef as useRef40, useState as useState77 } from "react";
+import { useEffect as useEffect76, useMemo as useMemo115, useRef as useRef41, useState as useState77 } from "react";
 import { Internals as Internals55 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -23737,12 +23743,12 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState77(null);
   const [error, setError] = useState77(null);
-  const mountState = useRef40({ isMounted: true });
+  const mountState = useRef41({ isMounted: true });
   const vidConf = Internals55.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const canvas = useRef40(null);
+  const canvas = useRef41(null);
   useEffect76(() => {
     const { current } = mountState;
     current.isMounted = true;
@@ -23953,7 +23959,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect77, useRef as useRef41, useState as useState78 } from "react";
+import { useEffect as useEffect77, useRef as useRef42, useState as useState78 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -24289,9 +24295,9 @@ var TimelineVideoInfo = ({
   playbackRate
 }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const [error, setError] = useState78(null);
-  const aspectRatio = useRef41(getAspectRatioFromCache(src));
+  const aspectRatio = useRef42(getAspectRatioFromCache(src));
   useEffect77(() => {
     return () => {
       clearFramesForSrc(src);
@@ -24644,7 +24650,7 @@ var container46 = {
 var noop3 = () => {
   return;
 };
-var Timeline = () => {
+var TimelineInner = () => {
   const { sequences } = useContext75(Internals57.SequenceManager);
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const timeline = useMemo118(() => {
@@ -24725,6 +24731,7 @@ var Timeline = () => {
     })
   });
 };
+var Timeline = React152.memo(TimelineInner);
 
 // src/components/Timeline/TimelineEmptyState.tsx
 import { jsx as jsx218 } from "react/jsx-runtime";
@@ -26239,7 +26246,7 @@ import {
   useContext as useContext86,
   useEffect as useEffect83,
   useMemo as useMemo126,
-  useRef as useRef43,
+  useRef as useRef44,
   useState as useState84
 } from "react";
 import { Internals as Internals64 } from "remotion";
@@ -27112,7 +27119,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect82, useMemo as useMemo125, useRef as useRef42, useState as useState83 } from "react";
+import { useEffect as useEffect82, useMemo as useMemo125, useRef as useRef43, useState as useState83 } from "react";
 import { jsx as jsx236, jsxs as jsxs119, Fragment as Fragment35 } from "react/jsx-runtime";
 var container52 = {
   paddingLeft: 16,
@@ -27142,7 +27149,7 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState83(false);
-  const ref = useRef42(null);
+  const ref = useRef43(null);
   const keybindings = useKeybinding();
   useEffect82(() => {
     const { current } = ref;
@@ -27320,7 +27327,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef43(null);
+  const inputRef = useRef44(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback117(() => {
     return;
@@ -28096,7 +28103,7 @@ import {
   useEffect as useEffect86,
   useMemo as useMemo137,
   useReducer as useReducer2,
-  useRef as useRef45,
+  useRef as useRef46,
   useState as useState90
 } from "react";
 
@@ -30085,12 +30092,12 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext88, useEffect as useEffect85, useRef as useRef44, useState as useState89 } from "react";
+import { useContext as useContext88, useEffect as useEffect85, useRef as useRef45, useState as useState89 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState89(false);
   const { previewServerState: state, subscribeToEvent } = useContext88(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef44("");
+  const currentOutName = useRef45("");
   currentOutName.current = outName;
   useEffect85(() => {
     if (!clientId) {
@@ -31480,7 +31487,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef45(true);
+  const isMounted = useRef46(true);
   const [isVideo] = useState90(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -32623,9 +32630,9 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect87, useRef as useRef46, useState as useState91 } from "react";
+import { useEffect as useEffect87, useRef as useRef47, useState as useState91 } from "react";
 var useEncodableAudioCodecs = (container63) => {
-  const cacheRef = useRef46({});
+  const cacheRef = useRef47({});
   const [codecsByContainer, setCodecsByContainer] = useState91(() => {
     return {
       [container63]: getSupportedAudioCodecsForContainer(container63)
@@ -32665,9 +32672,9 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect88, useRef as useRef47, useState as useState92 } from "react";
+import { useEffect as useEffect88, useRef as useRef48, useState as useState92 } from "react";
 var useEncodableVideoCodecs = (container63) => {
-  const cacheRef = useRef47({});
+  const cacheRef = useRef48({});
   const [codecsByContainer, setCodecsByContainer] = useState92(() => {
     return {
       [container63]: getSupportedVideoCodecsForContainer(container63)
@@ -35048,15 +35055,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback148, useMemo as useMemo151, useRef as useRef48, useState as useState102 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo151, useRef as useRef49, useState as useState102 } from "react";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState102(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState102(null);
   const [hoveredGuideId, setHoveredGuideId] = useState102(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState102(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef48(false);
-  const shouldDeleteGuideRef = useRef48(false);
+  const shouldCreateGuideRef = useRef49(false);
+  const shouldDeleteGuideRef = useRef49(false);
   const setEditorShowGuides = useCallback148((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-x88z6n54.js").then(({ StudioInternals }) => {
+    import("./chunk-5dvr7831.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/use-breakpoint.js

@@ -4,9 +4,14 @@ exports.useBreakpoint = useBreakpoint;
 const react_1 = require("react");
 function useBreakpoint(breakpoint) {
     const [compactUI, setCompactUI] = (0, react_1.useState)(window.innerWidth < breakpoint);
+    const compactUIRef = (0, react_1.useRef)(compactUI);
     (0, react_1.useEffect)(() => {
         function handleResize() {
-            setCompactUI(window.innerWidth < breakpoint);
+            const newValue = window.innerWidth < breakpoint;
+            if (newValue !== compactUIRef.current) {
+                setCompactUI(newValue);
+            }
+            compactUIRef.current = newValue;
         }
         window.addEventListener('resize', handleResize);
         handleResize();

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.435",
+	"version": "4.0.437",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,14 +26,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.435",
-		"@remotion/player": "4.0.435",
-		"@remotion/media-utils": "4.0.435",
-		"@remotion/renderer": "4.0.435",
-		"@remotion/web-renderer": "4.0.435",
-		"@remotion/studio-shared": "4.0.435",
-		"@remotion/zod-types": "4.0.435",
-		"mediabunny": "1.37.0",
+		"remotion": "4.0.437",
+		"@remotion/player": "4.0.437",
+		"@remotion/media-utils": "4.0.437",
+		"@remotion/renderer": "4.0.437",
+		"@remotion/web-renderer": "4.0.437",
+		"@remotion/studio-shared": "4.0.437",
+		"@remotion/zod-types": "4.0.437",
+		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.435",
+		"@remotion/eslint-config-internal": "4.0.437",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},