@remotion/studio 4.0.155 → 4.0.159

package/dist/esm/internals.mjs

@@ -9,12 +9,12 @@ var __require = ((x) => typeof require !== "undefined" ? require : typeof Proxy
 // src/Studio.tsx
 import {useLayoutEffect as useLayoutEffect2} from "react";
 import {createPortal} from "react-dom";
-import {Internals as Internals58} from "remotion";
+import {Internals as Internals59} from "remotion";
 
 // src/components/Editor.tsx
 import {PlayerInternals as PlayerInternals16} from "@remotion/player";
-import React161, {useCallback as useCallback118, useEffect as useEffect70, useMemo as useMemo117} from "react";
-import {Internals as Internals54} from "remotion";
+import React161, {useCallback as useCallback118, useEffect as useEffect71, useMemo as useMemo117} from "react";
+import {Internals as Internals55} from "remotion";
 
 // src/helpers/colors.ts
 var BACKGROUND = "rgb(31,36,40)";
@@ -857,7 +857,7 @@ var useZIndex = () => {
 
 // src/components/EditorContent.tsx
 import {useContext as useContext61} from "react";
-import {Internals as Internals48} from "remotion";
+import {Internals as Internals49} from "remotion";
 
 // src/helpers/is-current-selected-still.ts
 import {useContext as useContext5} from "react";
@@ -7043,10 +7043,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import {useCallback as useCallback80, useContext as useContext50, useEffect as useEffect53} from "react";
+import {useCallback as useCallback80, useContext as useContext50, useEffect as useEffect54} from "react";
 
 // src/components/TopPanel.tsx
-import {useCallback as useCallback79, useContext as useContext49, useEffect as useEffect52, useMemo as useMemo85} from "react";
+import {useCallback as useCallback79, useContext as useContext49, useEffect as useEffect53, useMemo as useMemo85} from "react";
 
 // src/helpers/use-breakpoint.ts
 import {useEffect as useEffect24, useState as useState28} from "react";
@@ -9976,11 +9976,12 @@ import {
 createRef as createRef8,
 useCallback as useCallback70,
 useContext as useContext39,
+useEffect as useEffect45,
 useImperativeHandle as useImperativeHandle11,
 useMemo as useMemo79,
 useState as useState46
 } from "react";
-import {Internals as Internals31} from "remotion";
+import {Internals as Internals32} from "remotion";
 
 // src/components/RenderModal/DataEditor.tsx
 import React85, {
@@ -9990,7 +9991,7 @@ useEffect as useEffect42,
 useMemo as useMemo70,
 useState as useState44
 } from "react";
-import {Internals as Internals27, getInputProps} from "remotion";
+import {Internals as Internals28, getInputProps} from "remotion";
 import {NoReactInternals as NoReactInternals10} from "remotion/no-react";
 
 // src/components/NewComposition/ValidationMessage.tsx
@@ -10450,10 +10451,7 @@ var RenderModalJSONPropsEditor = ({
 
 // src/components/RenderModal/SchemaEditor/SchemaEditor.tsx
 import {useCallback as useCallback58, useEffect as useEffect41, useMemo as useMemo68, useState as useState43} from "react";
-
-// src/api/update-default-props.ts
-import {Internals as Internals26} from "remotion";
-var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
+import {Internals as Internals27} from "remotion";
 
 // src/components/RenderModal/SchemaEditor/SchemaErrorMessages.tsx
 import {
@@ -11656,6 +11654,7 @@ useMemo as useMemo59,
 useRef as useRef23,
 useState as useState39
 } from "react";
+import {Internals as Internals26} from "remotion";
 import {
 jsx as jsx104
 } from "react/jsx-runtime";
@@ -11679,35 +11678,33 @@ var useLocalState = ({
       }
     };
   });
-  const localValue = useMemo59(() => {
-    if (localValueOrNull === null) {
+  const localUnsavedValue = useMemo59(() => {
+    if (localValueOrNull[parentRevision] === null) {
       return {
-        [parentRevision]: {
-          value: unsavedValue,
-          keyStabilityRevision: 0,
-          zodValidation: schema.safeParse(unsavedValue)
-        }
+        value: unsavedValue,
+        keyStabilityRevision: 0,
+        zodValidation: schema.safeParse(unsavedValue)
       };
     }
-    return localValueOrNull;
+    return localValueOrNull[parentRevision];
   }, [localValueOrNull, parentRevision, schema, unsavedValue]);
   useEffect39(() => {
     const checkFile = () => {
       setResetRevision((old) => old + 1);
-      setLocalValue(null);
+      setLocalValue({});
     };
-    window.addEventListener(PROPS_UPDATED_EXTERNALLY, checkFile);
+    window.addEventListener(Internals26.PROPS_UPDATED_EXTERNALLY, checkFile);
     return () => {
-      window.removeEventListener(PROPS_UPDATED_EXTERNALLY, checkFile);
+      window.removeEventListener(Internals26.PROPS_UPDATED_EXTERNALLY, checkFile);
     };
   }, []);
   const currentLocalValue = useMemo59(() => {
-    return localValue[parentRevision] ?? {
+    return localUnsavedValue ?? {
       value: savedValue,
       keyStabilityRevision: 0,
       zodValidation: schema.safeParse(savedValue)
     };
-  }, [savedValue, localValue, parentRevision, schema]);
+  }, [localUnsavedValue, savedValue, schema]);
   const stateRef = useRef23(currentLocalValue);
   stateRef.current = currentLocalValue;
   const onChange = useCallback46((updater, forceApply, increment) => {
@@ -11728,13 +11725,13 @@ var useLocalState = ({
       };
       stateRef.current = newState;
       return {
-        ...localValue,
+        ...localUnsavedValue,
         [parentRevision]: newState
       };
     });
   }, [
     currentLocalValue.keyStabilityRevision,
-    localValue,
+    localUnsavedValue,
     parentRevision,
     schema,
     setValue
@@ -13801,9 +13798,9 @@ var SchemaEditor = ({
     const bumpRevision = () => {
       setRevision((old) => old + 1);
     };
-    window.addEventListener(PROPS_UPDATED_EXTERNALLY, bumpRevision);
+    window.addEventListener(Internals27.PROPS_UPDATED_EXTERNALLY, bumpRevision);
     return () => {
-      window.removeEventListener(PROPS_UPDATED_EXTERNALLY, bumpRevision);
+      window.removeEventListener(Internals27.PROPS_UPDATED_EXTERNALLY, bumpRevision);
     };
   }, []);
   const z = useZodIfPossible();
@@ -14196,6 +14193,7 @@ var DataEditor = ({
 }) => {
   const [mode, setMode] = useState44("schema");
   const [showWarning, setShowWarningWithoutPersistance] = useState44(() => getPersistedShowWarningState());
+  const { updateCompositionDefaultProps } = useContext31(Internals28.CompositionManager);
   const inJSONEditor = mode === "json";
   const serializedJSON = useMemo70(() => {
     if (!inJSONEditor) {
@@ -14248,7 +14246,7 @@ var DataEditor = ({
     return canSaveDefaultPropsObjectState[unresolvedComposition.id] ? canSaveDefaultPropsObjectState[unresolvedComposition.id] : defaultTypeCanSaveState;
   }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
   const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
-  const { fastRefreshes } = useContext31(Internals27.NonceContext);
+  const { fastRefreshes } = useContext31(Internals28.NonceContext);
   const checkIfCanSaveDefaultProps = useCallback60(async () => {
     try {
       const can = await canUpdateDefaultProps(unresolvedComposition.id, readOnlyStudio);
@@ -14321,30 +14319,33 @@ var DataEditor = ({
       }
     });
   }, [unresolvedComposition.id, defaultProps, schema, z]);
-  useEffect42(() => {
-    setSaving(false);
-  }, [fastRefreshes, setSaving]);
   const onSave = useCallback60((updater) => {
     if (schema === "no-zod" || schema === "no-schema" || z === null) {
       showNotification("Cannot update default props: No Zod schema", 2000);
       return;
     }
+    window.remotion_ignoreFastRefreshUpdate = fastRefreshes + 1;
     setSaving(true);
-    callUpdateDefaultPropsApi(unresolvedComposition.id, updater(unresolvedComposition.defaultProps ?? {}), extractEnumJsonPaths(schema, z, [])).then((response) => {
+    const newDefaultProps = updater(unresolvedComposition.defaultProps ?? {});
+    callUpdateDefaultPropsApi(unresolvedComposition.id, newDefaultProps, extractEnumJsonPaths(schema, z, [])).then((response) => {
       if (!response.success) {
         console.log(response.stack);
         showNotification(`Cannot update default props: ${response.reason}. See console for more information.`, 2000);
       }
+      updateCompositionDefaultProps(unresolvedComposition.id, newDefaultProps);
     }).catch((err) => {
       showNotification(`Cannot update default props: ${err.message}`, 2000);
+    }).finally(() => {
       setSaving(false);
     });
   }, [
     schema,
     z,
+    fastRefreshes,
     setSaving,
+    unresolvedComposition.defaultProps,
     unresolvedComposition.id,
-    unresolvedComposition.defaultProps
+    updateCompositionDefaultProps
   ]);
   const connectionStatus = previewServerState.type;
   const warnings = useMemo70(() => {
@@ -14466,7 +14467,7 @@ var DataEditor = ({
 
 // src/components/RenderQueue/index.tsx
 import React95, {useContext as useContext37, useEffect as useEffect44, useMemo as useMemo77} from "react";
-import {Internals as Internals29} from "remotion";
+import {Internals as Internals30} from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
@@ -14476,7 +14477,7 @@ useEffect as useEffect43,
 useMemo as useMemo76,
 useState as useState45
 } from "react";
-import {Internals as Internals28} from "remotion";
+import {Internals as Internals29} from "remotion";
 
 // src/components/RenderQueue/RenderQueueCopyToClipboard.tsx
 import {useCallback as useCallback61} from "react";
@@ -15063,7 +15064,7 @@ var subtitle2 = {
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
   const [hovered, setHovered] = useState45(false);
-  const { setCanvasContent } = useContext36(Internals28.CompositionManager);
+  const { setCanvasContent } = useContext36(Internals29.CompositionManager);
   const onPointerEnter = useCallback69(() => {
     setHovered(true);
   }, []);
@@ -15195,7 +15196,7 @@ var renderQueue = {
 var RenderQueue = () => {
   const connectionStatus = useContext37(StudioServerConnectionCtx).previewServerState.type;
   const { jobs } = useContext37(RenderQueueContext);
-  const { canvasContent } = useContext37(Internals29.CompositionManager);
+  const { canvasContent } = useContext37(Internals30.CompositionManager);
   const previousJobCount = React95.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React95.useRef(null);
@@ -15275,7 +15276,7 @@ var RenderQueue = () => {
 
 // src/components/RendersTab.tsx
 import {useContext as useContext38, useMemo as useMemo78} from "react";
-import {Internals as Internals30} from "remotion";
+import {Internals as Internals31} from "remotion";
 import {
 jsx as jsx141,
 jsxs as jsxs68,
@@ -15300,7 +15301,7 @@ var badge = {
 };
 var RendersTab = ({ selected, onClick }) => {
   const { jobs } = useContext38(RenderQueueContext);
-  const { canvasContent } = useContext38(Internals30.CompositionManager);
+  const { canvasContent } = useContext38(Internals31.CompositionManager);
   const failedJobs = jobs.filter((j) => j.status === "failed").length;
   const jobCount = jobs.length;
   const isActuallySelected = useMemo78(() => {
@@ -15369,7 +15370,7 @@ var persistSelectedOptionsSidebarPanel2 = (panel) => {
 };
 var optionsSidebarTabs = createRef8();
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps } = useContext39(Internals31.EditorPropsContext);
+  const { props, updateProps, resetUnsaved } = useContext39(Internals32.EditorPropsContext);
   const [saving, setSaving] = useState46(false);
   const isMobileLayout = useMobileLayout();
   const container29 = useMemo79(() => ({
@@ -15397,7 +15398,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext39(Internals31.CompositionManager);
+  const { compositions, canvasContent } = useContext39(Internals32.CompositionManager);
   const circleStyle = useMemo79(() => {
     const onTabColor = saving ? LIGHT_TEXT : "white";
     return {
@@ -15442,6 +15443,15 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     }
     return !deepEqual(composition.defaultProps, currentDefaultProps);
   }, [currentDefaultProps, composition]);
+  const reset = useCallback70(() => {
+    resetUnsaved();
+  }, [resetUnsaved]);
+  useEffect45(() => {
+    window.addEventListener(Internals32.PROPS_UPDATED_EXTERNALLY, reset);
+    return () => {
+      window.removeEventListener(Internals32.PROPS_UPDATED_EXTERNALLY, reset);
+    };
+  }, [reset]);
   return jsxs69("div", {
     style: container29,
     className: "css-reset",
@@ -15485,7 +15495,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 
 // src/components/PreviewToolbar.tsx
 import {useContext as useContext46, useState as useState49} from "react";
-import {Internals as Internals39} from "remotion";
+import {Internals as Internals40} from "remotion";
 
 // src/state/loop.ts
 var key = "remotion.loop";
@@ -15538,13 +15548,13 @@ var CheckboardToggle = () => {
 
 // src/components/FpsCounter.tsx
 import {
-useEffect as useEffect45,
+useEffect as useEffect46,
 useLayoutEffect,
 useMemo as useMemo80,
 useRef as useRef25,
 useState as useState47
 } from "react";
-import {Internals as Internals32} from "remotion";
+import {Internals as Internals33} from "remotion";
 import {
 jsxs as jsxs70
 } from "react/jsx-runtime";
@@ -15558,9 +15568,9 @@ var pushWithMaxSize = (arr, value, maxSize) => {
   return arr.slice(-maxSize);
 };
 var FpsCounter = ({ playbackSpeed }) => {
-  const videoConfig = Internals32.useUnsafeVideoConfig();
-  const [playing] = Internals32.Timeline.usePlayingState();
-  const frame2 = Internals32.Timeline.useTimelinePosition();
+  const videoConfig = Internals33.useUnsafeVideoConfig();
+  const [playing] = Internals33.Timeline.usePlayingState();
+  const frame2 = Internals33.Timeline.useTimelinePosition();
   const [marker, rerender] = useState47({});
   const [fps, setFps] = useState47(0);
   const previousUpdates = useRef25([]);
@@ -15583,7 +15593,7 @@ var FpsCounter = ({ playbackSpeed }) => {
     if (previousUpdates.current.length === 2)
       setFps(fpsRef.current);
   }, [frame2]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (playing) {
       const t = setTimeout(() => {
         rerender({});
@@ -15621,8 +15631,8 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import {useCallback as useCallback72, useContext as useContext41, useEffect as useEffect46} from "react";
-import {Internals as Internals33} from "remotion";
+import {useCallback as useCallback72, useContext as useContext41, useEffect as useEffect47} from "react";
+import {Internals as Internals34} from "remotion";
 import {NoReactInternals as NoReactInternals13} from "remotion/no-react";
 import {
 jsx as jsx144
@@ -15633,7 +15643,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals13.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings2 = useKeybinding();
-  const { setSize } = useContext41(Internals33.PreviewSizeContext);
+  const { setSize } = useContext41(Internals34.PreviewSizeContext);
   const onClick = useCallback72(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -15645,7 +15655,7 @@ var FullScreenToggle = () => {
         }
       }));
   }, [setSize]);
-  useEffect46(() => {
+  useEffect47(() => {
     const f = keybindings2.registerKeybinding({
       event: "keydown",
       key: "f",
@@ -15765,8 +15775,8 @@ var MuteToggle = ({ muted, setMuted }) => {
 
 // src/components/PlayPause.tsx
 import {PlayerInternals as PlayerInternals11} from "@remotion/player";
-import {useCallback as useCallback75, useEffect as useEffect47, useState as useState48} from "react";
-import {Internals as Internals34} from "remotion";
+import {useCallback as useCallback75, useEffect as useEffect48, useState as useState48} from "react";
+import {Internals as Internals35} from "remotion";
 
 // src/icons/jump-to-start.tsx
 import {
@@ -15875,7 +15885,7 @@ var iconButton = {
 };
 var PlayPause = ({ playbackRate, loop: loop2, bufferStateDelayInMilliseconds }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals34.useUnsafeVideoConfig();
+  const videoConfig = Internals35.useUnsafeVideoConfig();
   const [showBufferIndicator, setShowBufferState] = useState48(false);
   const {
     playing,
@@ -15899,7 +15909,7 @@ var PlayPause = ({ playbackRate, loop: loop2, bufferStateDelayInMilliseconds })
     frameRef: remotionInternal_currentFrameRef
   });
   const isStill = useIsStill();
-  useEffect47(() => {
+  useEffect48(() => {
     if (isStill) {
       pause2();
     }
@@ -15981,7 +15991,7 @@ var PlayPause = ({ playbackRate, loop: loop2, bufferStateDelayInMilliseconds })
     seek(outFrame ?? getCurrentDuration() - 1);
   }, [seek, outFrame]);
   const keybindings2 = useKeybinding();
-  useEffect47(() => {
+  useEffect48(() => {
     const arrowLeft = keybindings2.registerKeybinding({
       event: "keydown",
       key: "ArrowLeft",
@@ -16053,7 +16063,7 @@ var PlayPause = ({ playbackRate, loop: loop2, bufferStateDelayInMilliseconds })
     onEnter,
     onSpace
   ]);
-  useEffect47(() => {
+  useEffect48(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -16135,7 +16145,7 @@ var PlayPause = ({ playbackRate, loop: loop2, bufferStateDelayInMilliseconds })
 
 // src/components/PlaybackKeyboardShortcutsManager.tsx
 import {PlayerInternals as PlayerInternals12} from "@remotion/player";
-import {useCallback as useCallback76, useEffect as useEffect48} from "react";
+import {useCallback as useCallback76, useEffect as useEffect49} from "react";
 var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
   const keybindings2 = useKeybinding();
   const { play: play2, pause: pause2, playing } = PlayerInternals12.usePlayer();
@@ -16173,7 +16183,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     });
     play2();
   }, [play2, playing, setPlaybackRate]);
-  useEffect48(() => {
+  useEffect49(() => {
     const jKey = keybindings2.registerKeybinding({
       event: "keydown",
       key: "j",
@@ -16211,8 +16221,8 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 };
 
 // src/components/PlaybackRatePersistor.tsx
-import {useContext as useContext42, useEffect as useEffect49} from "react";
-import {Internals as Internals35} from "remotion";
+import {useContext as useContext42, useEffect as useEffect50} from "react";
+import {Internals as Internals36} from "remotion";
 
 // src/state/playbackrate.ts
 var key3 = "remotion.playbackrate";
@@ -16232,11 +16242,11 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = useContext42(Internals35.Timeline.TimelineContext);
-  useEffect49(() => {
+  const { setPlaybackRate, playbackRate } = useContext42(Internals36.Timeline.TimelineContext);
+  useEffect50(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
-  useEffect49(() => {
+  useEffect50(() => {
     persistPlaybackRate(playbackRate);
   }, [playbackRate]);
   return null;
@@ -16244,7 +16254,7 @@ var PlaybackRatePersistor = () => {
 
 // src/components/PlaybackRateSelector.tsx
 import {useContext as useContext43, useMemo as useMemo81} from "react";
-import {Internals as Internals36} from "remotion";
+import {Internals as Internals37} from "remotion";
 import {
 jsx as jsx154
 } from "react/jsx-runtime";
@@ -16267,7 +16277,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle2 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext43(Internals36.CompositionManager);
+  const { canvasContent } = useContext43(Internals37.CompositionManager);
   const isStill = useIsStill();
   const style9 = useMemo81(() => {
     return {
@@ -16317,7 +16327,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/RenderButton.tsx
 import {useCallback as useCallback77, useContext as useContext44, useMemo as useMemo82} from "react";
-import {Internals as Internals37, useCurrentFrame as useCurrentFrame2} from "remotion";
+import {Internals as Internals38, useCurrentFrame as useCurrentFrame2} from "remotion";
 import {
 jsx as jsx155,
 jsxs as jsxs72
@@ -16345,9 +16355,9 @@ var RenderButton = () => {
       }
     };
   }, []);
-  const video2 = Internals37.useVideo();
+  const video2 = Internals38.useVideo();
   const frame2 = useCurrentFrame2();
-  const { props } = useContext44(Internals37.EditorPropsContext);
+  const { props } = useContext44(Internals38.EditorPropsContext);
   const onClick = useCallback77(() => {
     if (!video2) {
       return null;
@@ -16429,7 +16439,7 @@ var RenderButton = () => {
 
 // src/components/Timeline/TimelineZoomControls.tsx
 import {useCallback as useCallback78, useContext as useContext45} from "react";
-import {Internals as Internals38} from "remotion";
+import {Internals as Internals39} from "remotion";
 
 // src/icons/minus.tsx
 import {
@@ -16466,7 +16476,7 @@ var iconStyle4 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext45(Internals38.CompositionManager);
+  const { canvasContent } = useContext45(Internals39.CompositionManager);
   const { setZoom, zoom: zoomMap } = useContext45(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback78(() => {
@@ -16567,9 +16577,9 @@ var padding = {
   width: TIMELINE_PADDING
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = useContext46(Internals39.Timeline.TimelineContext);
-  const { mediaMuted } = useContext46(Internals39.MediaVolumeContext);
-  const { setMediaMuted } = useContext46(Internals39.SetMediaVolumeContext);
+  const { playbackRate, setPlaybackRate } = useContext46(Internals40.Timeline.TimelineContext);
+  const { mediaMuted } = useContext46(Internals40.MediaVolumeContext);
+  const { setMediaMuted } = useContext46(Internals40.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
   const isStill = useIsStill();
   const [loop3, setLoop] = useState49(loadLoopOption());
@@ -16654,7 +16664,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import {useEffect as useEffect50, useMemo as useMemo83, useRef as useRef26, useState as useState50} from "react";
+import {useEffect as useEffect51, useMemo as useMemo83, useRef as useRef26, useState as useState50} from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -16719,7 +16729,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
       setDomRect(entries[0].contentRect);
     });
   });
-  useEffect50(() => {
+  useEffect51(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -16727,7 +16737,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
     resizeObserver.observe(current);
     return () => resizeObserver.unobserve(current);
   }, [resizeObserver]);
-  useEffect50(() => {
+  useEffect51(() => {
     setDomRect(ref.current?.getBoundingClientRect() ?? null);
   }, []);
   const value = useMemo83(() => {
@@ -16806,7 +16816,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import {PlayerInternals as PlayerInternals13} from "@remotion/player";
-import {useContext as useContext48, useEffect as useEffect51, useRef as useRef27, useState as useState51} from "react";
+import {useContext as useContext48, useEffect as useEffect52, useRef as useRef27, useState as useState51} from "react";
 import {
 jsx as jsx161
 } from "react/jsx-runtime";
@@ -16826,7 +16836,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   }
   const [lastPointerUp, setLastPointerUp] = useState51(() => Date.now());
   const ref = useRef27(null);
-  useEffect51(() => {
+  useEffect52(() => {
     if (context5.isDragging.current) {
       return;
     }
@@ -16978,7 +16988,7 @@ var TopPanel = ({
     return "expanded";
   }, [sidebarCollapsedStateRight]);
   const hasSize = size4 !== null;
-  useEffect52(() => {
+  useEffect53(() => {
     onMounted();
   }, [hasSize, onMounted]);
   const canvasContainerStyle = useMemo85(() => ({
@@ -17154,7 +17164,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect53(() => {
+  useEffect54(() => {
     const left3 = keybindings2.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -17232,7 +17242,7 @@ var SidebarCollapserControls = () => {
 import {
 useCallback as useCallback81,
 useContext as useContext51,
-useEffect as useEffect54,
+useEffect as useEffect55,
 useMemo as useMemo86,
 useState as useState52
 } from "react";
@@ -17286,7 +17296,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect54(() => {
+  useEffect55(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -17458,7 +17468,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 
 // src/components/Timeline/Timeline.tsx
 import {useContext as useContext60, useMemo as useMemo98} from "react";
-import {Internals as Internals47} from "remotion";
+import {Internals as Internals48} from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
 var getCascadedStart = (sequence, sequences) => {
@@ -17655,16 +17665,16 @@ import {PlayerInternals as PlayerInternals14} from "@remotion/player";
 import {
 useCallback as useCallback83,
 useContext as useContext54,
-useEffect as useEffect55,
+useEffect as useEffect56,
 useMemo as useMemo89,
 useRef as useRef28,
 useState as useState54
 } from "react";
-import {Internals as Internals41, useVideoConfig as useVideoConfig4} from "remotion";
+import {Internals as Internals42, useVideoConfig as useVideoConfig4} from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import {createRef as createRef9, useContext as useContext52} from "react";
-import {Internals as Internals40} from "remotion";
+import {Internals as Internals41} from "remotion";
 import {
 jsx as jsx166,
 jsxs as jsxs80,
@@ -17681,7 +17691,7 @@ var inMarkerAreaRef = createRef9();
 var outMarkerAreaRef = createRef9();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals40.useUnsafeVideoConfig();
+  const videoConfig = Internals41.useUnsafeVideoConfig();
   const timelineWidth = useContext52(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
@@ -17779,9 +17789,9 @@ var getClientXWithScroll = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
 var TimelineDragHandler = () => {
-  const video2 = Internals41.useUnsafeVideoConfig();
+  const video2 = Internals42.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext54(TimelineZoomCtx);
-  const { canvasContent } = useContext54(Internals41.CompositionManager);
+  const { canvasContent } = useContext54(Internals42.CompositionManager);
   const containerStyle2 = useMemo89(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
@@ -17808,7 +17818,7 @@ var Inner2 = () => {
     shouldApplyCssTransforms: true
   });
   const { isHighestContext } = useZIndex();
-  const setFrame = Internals41.useTimelineSetFrame();
+  const setFrame = Internals42.useTimelineSetFrame();
   const [inOutDragging, setInOutDragging] = useState54({
     dragging: false
   });
@@ -18023,7 +18033,7 @@ var Inner2 = () => {
     });
     setFrame((c) => {
       const newObj = { ...c, [videoConfig.id]: frame2 };
-      Internals41.persistCurrentFrame(newObj);
+      Internals42.persistCurrentFrame(newObj);
       return newObj;
     });
     if (dragging.wasPlaying) {
@@ -18092,7 +18102,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -18103,7 +18113,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -18198,7 +18208,7 @@ import {useRef as useRef30} from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import {useCallback as useCallback86, useContext as useContext56, useMemo as useMemo91} from "react";
-import {Internals as Internals42} from "remotion";
+import {Internals as Internals43} from "remotion";
 
 // src/components/Timeline/TimelineLayerEye.tsx
 import {useCallback as useCallback84} from "react";
@@ -18280,7 +18290,7 @@ import {SOURCE_MAP_ENDPOINT} from "@remotion/studio-shared";
 import {
 useCallback as useCallback85,
 useContext as useContext55,
-useEffect as useEffect56,
+useEffect as useEffect57,
 useMemo as useMemo90,
 useState as useState55
 } from "react";
@@ -18460,7 +18470,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!sequence.stack) {
       return;
     }
@@ -18567,7 +18577,7 @@ var space = {
   flexShrink: 0
 };
 var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-  const { hidden, setHidden } = useContext56(Internals42.SequenceVisibilityToggleContext);
+  const { hidden, setHidden } = useContext56(Internals43.SequenceVisibilityToggleContext);
   const padder = useMemo91(() => {
     return {
       width: Number(SPACING * 1.5) * nestedDepth,
@@ -18608,8 +18618,8 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import {useContext as useContext57, useEffect as useEffect57, useMemo as useMemo92, useRef as useRef29} from "react";
-import {Internals as Internals43} from "remotion";
+import {useContext as useContext57, useEffect as useEffect58, useMemo as useMemo92, useRef as useRef29} from "react";
+import {Internals as Internals44} from "remotion";
 import {
 jsx as jsx172
 } from "react/jsx-runtime";
@@ -18663,7 +18673,7 @@ var TimelineTimePadding = () => {
 };
 var TimelineTimeIndicators = () => {
   const sliderTrack = useContext57(TimelineWidthContext);
-  const video2 = Internals43.useVideo();
+  const video2 = Internals44.useVideo();
   if (sliderTrack === null) {
     return null;
   }
@@ -18678,7 +18688,7 @@ var TimelineTimeIndicators = () => {
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
   const ref = useRef29(null);
-  useEffect57(() => {
+  useEffect58(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -18788,14 +18798,14 @@ var TimelineList = ({ timeline: timeline2 }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import {useContext as useContext58, useEffect as useEffect58} from "react";
-import {Internals as Internals44} from "remotion";
+import {useContext as useContext58, useEffect as useEffect59} from "react";
+import {Internals as Internals45} from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
-  const video2 = Internals44.useVideo();
-  const timelineContext = useContext58(Internals44.Timeline.TimelineContext);
-  const timelinePosition = Internals44.Timeline.useTimelinePosition();
-  const { canvasContent } = useContext58(Internals44.CompositionManager);
+  const video2 = Internals45.useVideo();
+  const timelineContext = useContext58(Internals45.Timeline.TimelineContext);
+  const timelinePosition = Internals45.Timeline.useTimelinePosition();
+  const { canvasContent } = useContext58(Internals45.CompositionManager);
   const { zoom: zoomMap } = useContext58(TimelineZoomCtx);
   const compositionId = canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const zoom = compositionId ? zoomMap[compositionId] ?? TIMELINE_MIN_ZOOM : null;
@@ -18806,7 +18816,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video2.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect58(() => {
+  useEffect59(() => {
     if (!video2) {
       return;
     }
@@ -18819,7 +18829,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video2]);
-  useEffect58(() => {
+  useEffect59(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -18888,7 +18898,7 @@ import {useMemo as useMemo97} from "react";
 
 // src/components/Timeline/TimelineSequence.tsx
 import {useContext as useContext59, useMemo as useMemo96, useState as useState58} from "react";
-import {Internals as Internals46, useCurrentFrame as useCurrentFrame3} from "remotion";
+import {Internals as Internals47, useCurrentFrame as useCurrentFrame3} from "remotion";
 
 // src/helpers/get-timeline-sequence-layout.ts
 var SEQUENCE_BORDER_WIDTH = 1;
@@ -18949,8 +18959,8 @@ var getTimelineSequenceLayout = ({
 
 // src/components/AudioWaveform.tsx
 import {getAudioData, getWaveformPortion} from "@remotion/media-utils";
-import {useEffect as useEffect59, useMemo as useMemo95, useRef as useRef31, useState as useState56} from "react";
-import {Internals as Internals45} from "remotion";
+import {useEffect as useEffect60, useMemo as useMemo95, useRef as useRef31, useState as useState56} from "react";
+import {Internals as Internals46} from "remotion";
 
 // src/components/AudioWaveformBar.tsx
 import {useMemo as useMemo94} from "react";
@@ -19015,19 +19025,19 @@ var AudioWaveform = ({
   const [metadata, setMetadata] = useState56(null);
   const [error, setError] = useState56(null);
   const mountState = useRef31({ isMounted: true });
-  const vidConf = Internals45.useUnsafeVideoConfig();
+  const vidConf = Internals46.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
   const canvas = useRef31(null);
-  useEffect59(() => {
+  useEffect60(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect59(() => {
+  useEffect60(() => {
     if (!canvas.current) {
       return;
     }
@@ -19054,7 +19064,7 @@ var AudioWaveform = ({
     context5.strokeStyle = LIGHT_TRANSPARENT;
     context5.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect59(() => {
+  useEffect60(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -19232,7 +19242,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted }) => {
 
 // src/components/Timeline/TimelineVideoInfo.tsx
 import {getVideoMetadata as getVideoMetadata2} from "@remotion/media-utils";
-import {useEffect as useEffect60, useRef as useRef32, useState as useState57} from "react";
+import {useEffect as useEffect61, useRef as useRef32, useState as useState57} from "react";
 import {
 jsx as jsx180
 } from "react/jsx-runtime";
@@ -19258,14 +19268,14 @@ var pathStyle = {
 var TimelineVideoInfo = ({ src }) => {
   const mountState = useRef32({ isMounted: true });
   const [videoMetadata, setVideoMetadata] = useState57(null);
-  useEffect60(() => {
+  useEffect61(() => {
     getVideoMetadata2(src).then((data) => {
       setVideoMetadata(data);
     }).catch((err) => {
       console.log("Could not get video metadata", err);
     });
   }, [src]);
-  useEffect60(() => {
+  useEffect61(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
@@ -19309,7 +19319,7 @@ var TimelineSequence = ({ s }) => {
 };
 var Inner4 = ({ s, windowWidth }) => {
   const [maxMediaDuration, setMaxMediaDuration] = useState58(Infinity);
-  const video2 = Internals46.useVideo();
+  const video2 = Internals47.useVideo();
   if (!video2) {
     throw new TypeError("Expected video config");
   }
@@ -19470,8 +19480,8 @@ var noop6 = () => {
   return;
 };
 var Timeline = () => {
-  const { sequences } = useContext60(Internals47.SequenceManager);
-  const videoConfig = Internals47.useUnsafeVideoConfig();
+  const { sequences } = useContext60(Internals48.SequenceManager);
+  const videoConfig = Internals48.useUnsafeVideoConfig();
   const timeline2 = useMemo98(() => {
     if (!videoConfig) {
       return [];
@@ -19571,7 +19581,7 @@ var EditorContent = ({
   bufferStateDelayInMilliseconds
 }) => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext61(Internals48.CompositionManager);
+  const { canvasContent } = useContext61(Internals49.CompositionManager);
   const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== "composition";
   return jsxs91("div", {
     style: container40,
@@ -19623,12 +19633,12 @@ var EditorContent = ({
 };
 
 // src/components/GlobalKeybindings.tsx
-import {useContext as useContext62, useEffect as useEffect61} from "react";
+import {useContext as useContext62, useEffect as useEffect62} from "react";
 var GlobalKeybindings = () => {
   const keybindings2 = useKeybinding();
   const { setSelectedModal } = useContext62(ModalsContext);
   const { setCheckerboard } = useContext62(CheckerboardContext);
-  useEffect61(() => {
+  useEffect62(() => {
     const nKey = keybindings2.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -19741,8 +19751,8 @@ var NewCompHeader = ({ title: title4 }) => {
 };
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React131, {useContext as useContext64, useEffect as useEffect62, useMemo as useMemo99} from "react";
-import {Internals as Internals49} from "remotion";
+import React131, {useContext as useContext64, useEffect as useEffect63, useMemo as useMemo99} from "react";
+import {Internals as Internals50} from "remotion";
 import {
 jsx as jsx186,
 jsxs as jsxs93
@@ -19765,11 +19775,11 @@ var loaderLabel2 = {
 };
 var ResolvedCompositionContext = React131.createContext(null);
 var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
-  const resolved = Internals49.useResolvedVideoConfig(compositionId);
-  const unresolvedContext = useContext64(Internals49.CompositionManager);
+  const resolved = Internals50.useResolvedVideoConfig(compositionId);
+  const unresolvedContext = useContext64(Internals50.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect62(() => {
-    const { current } = Internals49.resolveCompositionsRef;
+  useEffect63(() => {
+    const { current } = Internals50.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
     }
@@ -19826,7 +19836,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import {useCallback as useCallback88, useContext as useContext65, useEffect as useEffect63, useState as useState59} from "react";
+import {useCallback as useCallback88, useContext as useContext65, useEffect as useEffect64, useState as useState59} from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import {
@@ -19901,7 +19911,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState59(null);
-  useEffect63(() => {
+  useEffect64(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -19947,7 +19957,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect63(() => {
+  useEffect64(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -19965,7 +19975,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect63(() => {
+  useEffect64(() => {
     if (disabled) {
       return;
     }
@@ -20165,13 +20175,13 @@ var DeleteComposition = ({ compositionId }) => {
 
 // src/components/NewComposition/DuplicateComposition.tsx
 import {useCallback as useCallback92, useContext as useContext68, useMemo as useMemo101, useState as useState60} from "react";
-import {Internals as Internals51} from "remotion";
+import {Internals as Internals52} from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
-import {Internals as Internals50} from "remotion";
+import {Internals as Internals51} from "remotion";
 var validateCompositionName = (compName, compositions) => {
-  if (!Internals50.isCompositionIdValid(compName)) {
-    return Internals50.invalidCompositionErrorMessage;
+  if (!Internals51.isCompositionIdValid(compName)) {
+    return Internals51.invalidCompositionErrorMessage;
   }
   if (compositions.find((c) => c.id === compName)) {
     return `A composition with that name already exists.`;
@@ -20288,7 +20298,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
   const [selectedFrameRate, setFrameRate] = useState60(resolved.result.fps);
-  const { compositions } = useContext68(Internals51.CompositionManager);
+  const { compositions } = useContext68(Internals52.CompositionManager);
   const [type, setType] = useState60(initialCompType);
   const [newId, setName] = useState60(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
@@ -20633,7 +20643,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 
 // src/components/NewComposition/RenameComposition.tsx
 import {useCallback as useCallback93, useContext as useContext69, useMemo as useMemo102, useState as useState61} from "react";
-import {Internals as Internals52} from "remotion";
+import {Internals as Internals53} from "remotion";
 import {
 jsx as jsx194,
 jsxs as jsxs99,
@@ -20652,7 +20662,7 @@ var RenameCompositionLoaded = () => {
     throw new Error("Resolved composition context");
   }
   const { resolved } = context5;
-  const { compositions } = useContext69(Internals52.CompositionManager);
+  const { compositions } = useContext69(Internals53.CompositionManager);
   const [newId, setName] = useState61(() => {
     return resolved.result.id;
   });
@@ -20750,12 +20760,12 @@ var RenameComposition = ({ compositionId }) => {
 import {
 useCallback as useCallback94,
 useContext as useContext70,
-useEffect as useEffect65,
+useEffect as useEffect66,
 useMemo as useMemo104,
 useRef as useRef34,
 useState as useState63
 } from "react";
-import {Internals as Internals53} from "remotion";
+import {Internals as Internals54} from "remotion";
 
 // src/icons/keys.tsx
 import {
@@ -21493,7 +21503,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import {useEffect as useEffect64, useMemo as useMemo103, useRef as useRef33, useState as useState62} from "react";
+import {useEffect as useEffect65, useMemo as useMemo103, useRef as useRef33, useState as useState62} from "react";
 import {
 jsx as jsx198,
 jsxs as jsxs102,
@@ -21529,7 +21539,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState62(false);
   const ref = useRef33(null);
   const keybindings2 = useKeybinding();
-  useEffect64(() => {
+  useEffect65(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -21543,7 +21553,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!selected) {
       return;
     }
@@ -21560,7 +21570,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings2, result.onSelected, selected]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -21789,14 +21799,14 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext70(Internals53.CompositionManager);
+  const { compositions } = useContext70(Internals54.CompositionManager);
   const [state, setState] = useState63(() => {
     return {
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
     };
   });
-  useEffect65(() => {
+  useEffect66(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -21870,7 +21880,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect65(() => {
+  useEffect66(() => {
     const binding = keybindings2.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -21884,7 +21894,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings2, onArrowDown, onArrowUp]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (mode !== "docs") {
       return;
     }
@@ -21909,7 +21919,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect65(() => {
+  useEffect66(() => {
     const binding = keybindings2.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -22063,7 +22073,7 @@ import {getDefaultOutLocation} from "@remotion/studio-shared";
 import {
 useCallback as useCallback112,
 useContext as useContext72,
-useEffect as useEffect68,
+useEffect as useEffect69,
 useMemo as useMemo113,
 useReducer as useReducer2,
 useRef as useRef36,
@@ -22245,7 +22255,7 @@ import {useCallback as useCallback97} from "react";
 import {BrowserSafeApis} from "@remotion/renderer/client.js";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import {useCallback as useCallback96, useEffect as useEffect66, useMemo as useMemo107, useState as useState66} from "react";
+import {useCallback as useCallback96, useEffect as useEffect67, useMemo as useMemo107, useState as useState66} from "react";
 import {
 jsx as jsx207
 } from "react/jsx-runtime";
@@ -22298,7 +22308,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback96(() => {
     setHovered(false);
   }, []);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!copied) {
       return;
     }
@@ -23445,14 +23455,14 @@ import {BrowserSafeApis as BrowserSafeApis4} from "@remotion/renderer/client.js"
 import {useCallback as useCallback104, useMemo as useMemo109} from "react";
 
 // src/helpers/use-file-existence.ts
-import {useContext as useContext71, useEffect as useEffect67, useRef as useRef35, useState as useState68} from "react";
+import {useContext as useContext71, useEffect as useEffect68, useRef as useRef35, useState as useState68} from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState68(false);
   const { previewServerState: state, subscribeToEvent } = useContext71(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef35("");
   currentOutName.current = outName;
-  useEffect67(() => {
+  useEffect68(() => {
     if (!clientId) {
       return;
     }
@@ -23468,7 +23478,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect67(() => {
+  useEffect68(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -23485,7 +23495,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect67(() => {
+  useEffect68(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -25406,7 +25416,7 @@ var RenderModal = ({
     repro,
     setSelectedModal
   ]);
-  useEffect68(() => {
+  useEffect69(() => {
     return () => {
       isMounted.current = false;
     };
@@ -25575,7 +25585,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect68(() => {
+  useEffect69(() => {
     if (renderDisabled) {
       return;
     }
@@ -26202,7 +26212,7 @@ var RenderStatusModal = ({ jobId }) => {
 import {useCallback as useCallback117, useMemo as useMemo116} from "react";
 
 // src/components/CopyButton.tsx
-import {useCallback as useCallback115, useEffect as useEffect69, useState as useState70} from "react";
+import {useCallback as useCallback115, useEffect as useEffect70, useState as useState70} from "react";
 import {
 jsx as jsx234,
 jsxs as jsxs123
@@ -26243,7 +26253,7 @@ var CopyButton = ({ textToCopy, label: label10, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!copied) {
       return;
     }
@@ -26589,7 +26599,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect70(() => {
+  useEffect71(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -26624,13 +26634,13 @@ var Editor = ({ Root, readOnlyStudio }) => {
     onOutsideClick: noop,
     children: jsxs127(TimelineZoomContext, {
       children: [
-        jsx239(Internals54.CurrentScaleContext.Provider, {
+        jsx239(Internals55.CurrentScaleContext.Provider, {
           value,
           children: jsxs127("div", {
             style: background2,
             children: [
               canvasMounted ? jsx239(MemoRoot, {}) : null,
-              jsxs127(Internals54.CanUseRemotionHooksProvider, {
+              jsxs127(Internals55.CanUseRemotionHooksProvider, {
                 children: [
                   jsx239(EditorContent, {
                     drawRef,
@@ -26659,7 +26669,7 @@ import {PlayerInternals as PlayerInternals17} from "@remotion/player";
 
 // src/state/preview-size.tsx
 import {useCallback as useCallback119, useContext as useContext75, useMemo as useMemo118, useState as useState72} from "react";
-import {Internals as Internals55} from "remotion";
+import {Internals as Internals56} from "remotion";
 import {
 jsx as jsx240
 } from "react/jsx-runtime";
@@ -26710,7 +26720,7 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return jsx240(Internals55.PreviewSizeContext.Provider, {
+  return jsx240(Internals56.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
@@ -26744,7 +26754,7 @@ var CheckerboardProvider = ({ children }) => {
 
 // src/components/MediaVolumeProvider.tsx
 import {useMemo as useMemo120, useState as useState74} from "react";
-import {Internals as Internals56} from "remotion";
+import {Internals as Internals57} from "remotion";
 import {
 jsx as jsx242
 } from "react/jsx-runtime";
@@ -26763,9 +26773,9 @@ var MediaVolumeProvider = ({ children }) => {
       setMediaVolume
     };
   }, []);
-  return jsx242(Internals56.MediaVolumeContext.Provider, {
+  return jsx242(Internals57.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: jsx242(Internals56.SetMediaVolumeContext.Provider, {
+    children: jsx242(Internals57.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -26792,7 +26802,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import {useEffect as useEffect71, useMemo as useMemo122, useState as useState76} from "react";
+import {useEffect as useEffect72, useMemo as useMemo122, useState as useState76} from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -26818,7 +26828,7 @@ var SetTimelineInOutProvider = ({ children }) => {
       setInAndOutFrames
     };
   }, []);
-  useEffect71(() => {
+  useEffect72(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
   return jsx244(TimelineInOutContext.Provider, {
@@ -27047,7 +27057,7 @@ var ServerDisconnected = () => {
 };
 
 // src/helpers/inject-css.ts
-import {Internals as Internals57} from "remotion";
+import {Internals as Internals58} from "remotion";
 var makeDefaultGlobalCSS = () => {
   return `
   html {
@@ -27180,7 +27190,7 @@ var injectCSS = () => {
   if (injected) {
     return;
   }
-  Internals57.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+  Internals58.CSSUtils.injectCSS(makeDefaultGlobalCSS());
   injected = true;
 };
 
@@ -27195,12 +27205,12 @@ var getServerDisconnectedDomElement = () => {
 var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     window.remotion_isStudio = true;
-    Internals58.enableSequenceStackTraces();
+    Internals59.enableSequenceStackTraces();
   }, []);
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return jsx250(Internals58.RemotionRoot, {
+  return jsx250(Internals59.RemotionRoot, {
     numberOfAudioTags: window.remotion_numberOfAudioTags,
     children: jsxs129(EditorContexts, {
       readOnlyStudio: readOnly,