@remotion/studio 4.0.169 → 4.0.170

package/dist/esm/internals.mjs

@@ -856,7 +856,7 @@ var useZIndex = () => {
 };
 
 // src/components/EditorContent.tsx
-import {useContext as useContext62} from "react";
+import {useContext as useContext63} from "react";
 import {Internals as Internals51} from "remotion";
 
 // src/helpers/is-current-selected-still.ts
@@ -7213,10 +7213,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import {useCallback as useCallback83, useContext as useContext51, useEffect as useEffect54} from "react";
+import {useCallback as useCallback83, useContext as useContext52, useEffect as useEffect54} from "react";
 
 // src/components/TopPanel.tsx
-import {useCallback as useCallback82, useContext as useContext50, useEffect as useEffect53, useMemo as useMemo87} from "react";
+import {useCallback as useCallback82, useContext as useContext51, useEffect as useEffect53, useMemo as useMemo87} from "react";
 
 // src/helpers/use-breakpoint.ts
 import {useEffect as useEffect24, useState as useState29} from "react";
@@ -10145,7 +10145,7 @@ function MobilePanel({
 import {
 createRef as createRef8,
 useCallback as useCallback73,
-useContext as useContext40,
+useContext as useContext41,
 useEffect as useEffect45,
 useImperativeHandle as useImperativeHandle11,
 useMemo as useMemo81,
@@ -10154,7 +10154,7 @@ useState as useState47
 import {Internals as Internals34} from "remotion";
 
 // src/components/GlobalPropsEditorUpdateButton.tsx
-import React59, {useCallback as useCallback41} from "react";
+import React59, {useCallback as useCallback41, useContext as useContext29} from "react";
 import {Internals as Internals27} from "remotion";
 
 // src/components/RenderModal/SchemaEditor/extract-enum-json-paths.ts
@@ -10387,9 +10387,11 @@ var container22 = {
   flexDirection: "row"
 };
 var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) => {
+  const { fastRefreshes } = useContext29(Internals27.NonceContext);
   const [disabled, setDisabled] = React59.useState(false);
   const onClicked = useCallback41(() => {
     setDisabled(true);
+    window.remotion_ignoreFastRefreshUpdate = fastRefreshes + 1;
     saveDefaultProps({
       compositionId,
       defaultProps: () => currentDefaultProps
@@ -10398,7 +10400,7 @@ var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =>
     }).finally(() => {
       setDisabled(true);
     });
-  }, [compositionId, currentDefaultProps]);
+  }, [compositionId, currentDefaultProps, fastRefreshes]);
   const onReset = useCallback41(() => {
     window.remotion_ignoreFastRefreshUpdate = null;
     window.dispatchEvent(new CustomEvent(Internals27.PROPS_UPDATED_EXTERNALLY));
@@ -10420,7 +10422,7 @@ var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =>
 // src/components/RenderModal/DataEditor.tsx
 import React88, {
 useCallback as useCallback63,
-useContext as useContext32,
+useContext as useContext33,
 useEffect as useEffect42,
 useMemo as useMemo72,
 useState as useState45
@@ -10565,7 +10567,7 @@ var Item = ({ selected, onClick, children }) => {
 // src/components/get-zod-if-possible.tsx
 import {
 createContext as createContext14,
-useContext as useContext29,
+useContext as useContext30,
 useEffect as useEffect36,
 useMemo as useMemo51,
 useState as useState36
@@ -10590,11 +10592,11 @@ var getZTypesIfPossible = async () => {
   }
 };
 var useZodIfPossible = () => {
-  const context3 = useContext29(ZodContext);
+  const context3 = useContext30(ZodContext);
   return context3?.zod ?? null;
 };
 var useZodTypesIfPossible = () => {
-  const context3 = useContext29(ZodContext);
+  const context3 = useContext30(ZodContext);
   return context3?.zodTypes ?? null;
 };
 var ZodContext = createContext14(null);
@@ -11213,14 +11215,14 @@ var fieldsetLabel = {
 };
 
 // src/components/RenderModal/SchemaEditor/Fieldset.tsx
-import {createContext as createContext15, useContext as useContext30, useMemo as useMemo54} from "react";
+import {createContext as createContext15, useContext as useContext31, useMemo as useMemo54} from "react";
 import {
 jsx as jsx98
 } from "react/jsx-runtime";
 var SCHEMA_EDITOR_FIELDSET_PADDING = 10;
 var AlreadyPaddedRightContext = createContext15(false);
 var Fieldset = ({ children, shouldPad }) => {
-  const alreadyPadded = useContext30(AlreadyPaddedRightContext);
+  const alreadyPadded = useContext31(AlreadyPaddedRightContext);
   const style8 = useMemo54(() => {
     if (shouldPad) {
       return {
@@ -12037,7 +12039,7 @@ var ZodFieldValidation = ({ localValue, path }) => {
 import {
 createContext as createContext16,
 useCallback as useCallback49,
-useContext as useContext31,
+useContext as useContext32,
 useEffect as useEffect39,
 useMemo as useMemo61,
 useRef as useRef24,
@@ -12056,7 +12058,7 @@ var useLocalState = ({
   setValue,
   savedValue
 }) => {
-  const parentRevision = useContext31(RevisionContext).childResetRevision;
+  const parentRevision = useContext32(RevisionContext).childResetRevision;
   const [resetRevision, setResetRevision] = useState40(0);
   const [localValueOrNull, setLocalValue] = useState40(() => {
     return {
@@ -14470,7 +14472,7 @@ var DataEditor = ({
 }) => {
   const [mode, setMode] = useState45("schema");
   const [showWarning, setShowWarningWithoutPersistance] = useState45(() => getPersistedShowWarningState());
-  const { updateCompositionDefaultProps } = useContext32(Internals30.CompositionManager);
+  const { updateCompositionDefaultProps } = useContext33(Internals30.CompositionManager);
   const inJSONEditor = mode === "json";
   const serializedJSON = useMemo72(() => {
     if (!inJSONEditor) {
@@ -14523,7 +14525,7 @@ var DataEditor = ({
     return canSaveDefaultPropsObjectState[unresolvedComposition.id] ? canSaveDefaultPropsObjectState[unresolvedComposition.id] : defaultTypeCanSaveState;
   }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
   const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
-  const { fastRefreshes } = useContext32(Internals30.NonceContext);
+  const { fastRefreshes } = useContext33(Internals30.NonceContext);
   const checkIfCanSaveDefaultProps = useCallback63(async () => {
     try {
       const can = await canUpdateDefaultProps(unresolvedComposition.id, readOnlyStudio);
@@ -14558,7 +14560,7 @@ var DataEditor = ({
   useEffect42(() => {
     checkIfCanSaveDefaultProps();
   }, [checkIfCanSaveDefaultProps]);
-  const { previewServerState, subscribeToEvent } = useContext32(StudioServerConnectionCtx);
+  const { previewServerState, subscribeToEvent } = useContext33(StudioServerConnectionCtx);
   useEffect42(() => {
     const unsub = subscribeToEvent("root-file-changed", checkIfCanSaveDefaultProps);
     return () => {
@@ -14743,13 +14745,13 @@ var DataEditor = ({
 };
 
 // src/components/RenderQueue/index.tsx
-import React98, {useContext as useContext38, useEffect as useEffect44, useMemo as useMemo79} from "react";
+import React98, {useContext as useContext39, useEffect as useEffect44, useMemo as useMemo79} from "react";
 import {Internals as Internals32} from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
 useCallback as useCallback72,
-useContext as useContext37,
+useContext as useContext38,
 useEffect as useEffect43,
 useMemo as useMemo78,
 useState as useState46
@@ -14806,7 +14808,7 @@ var RenderQueueCopyToClipboard = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueError.tsx
-import {useCallback as useCallback65, useContext as useContext33} from "react";
+import {useCallback as useCallback65, useContext as useContext34} from "react";
 
 // src/components/RenderQueue/item-style.ts
 var renderQueueItemSubtitleStyle = {
@@ -14833,7 +14835,7 @@ var outputLocation = {
   ...renderQueueItemSubtitleStyle
 };
 var RenderQueueError = ({ job }) => {
-  const { setSelectedModal } = useContext33(ModalsContext);
+  const { setSelectedModal } = useContext34(ModalsContext);
   const { tabIndex } = useZIndex();
   const onClick = useCallback65(() => {
     setSelectedModal({
@@ -14890,7 +14892,7 @@ var RenderQueueCancelButton = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemStatus.tsx
-import React91, {useCallback as useCallback67, useContext as useContext34} from "react";
+import React91, {useCallback as useCallback67, useContext as useContext35} from "react";
 
 // src/components/RenderQueue/CircularProgress.tsx
 import {
@@ -14939,7 +14941,7 @@ var invisibleStyle = {
   display: "flex"
 };
 var RenderQueueItemStatus = ({ job }) => {
-  const { setSelectedModal } = useContext34(ModalsContext);
+  const { setSelectedModal } = useContext35(ModalsContext);
   const [hovered, setHovered] = React91.useState(false);
   const onPointerEnter = useCallback67(() => {
     setHovered(true);
@@ -15058,7 +15060,7 @@ var RenderQueueOutputName = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
-import {useCallback as useCallback69, useContext as useContext35} from "react";
+import {useCallback as useCallback69, useContext as useContext36} from "react";
 import {
 jsx as jsx140
 } from "react/jsx-runtime";
@@ -15069,7 +15071,7 @@ var RenderQueueProgressMessage = ({ job }) => {
   if (job.status !== "running") {
     throw new Error("should not have rendered this component");
   }
-  const { setSelectedModal } = useContext35(ModalsContext);
+  const { setSelectedModal } = useContext36(ModalsContext);
   const { tabIndex } = useZIndex();
   const onClick = useCallback69(() => {
     setSelectedModal({
@@ -15125,7 +15127,7 @@ var RenderQueueRemoveItem = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRepeat.tsx
-import {useCallback as useCallback71, useContext as useContext36, useMemo as useMemo77} from "react";
+import {useCallback as useCallback71, useContext as useContext37, useMemo as useMemo77} from "react";
 
 // src/helpers/retry-payload.ts
 import {NoReactInternals as NoReactInternals11} from "remotion/no-react";
@@ -15277,9 +15279,9 @@ import {
 jsx as jsx142
 } from "react/jsx-runtime";
 var RenderQueueRepeatItem = ({ job }) => {
-  const { setSelectedModal } = useContext36(ModalsContext);
+  const { setSelectedModal } = useContext37(ModalsContext);
   const isMobileLayout = useMobileLayout();
-  const { setSidebarCollapsedState } = useContext36(SidebarContext);
+  const { setSidebarCollapsedState } = useContext37(SidebarContext);
   const onClick = useCallback71((e) => {
     e.stopPropagation();
     const retryPayload = makeRetryPayload(job);
@@ -15341,7 +15343,7 @@ var subtitle2 = {
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
   const [hovered, setHovered] = useState46(false);
-  const { setCanvasContent } = useContext37(Internals31.CompositionManager);
+  const { setCanvasContent } = useContext38(Internals31.CompositionManager);
   const onPointerEnter = useCallback72(() => {
     setHovered(true);
   }, []);
@@ -15471,9 +15473,9 @@ var renderQueue = {
   overflowY: "auto"
 };
 var RenderQueue = () => {
-  const connectionStatus = useContext38(StudioServerConnectionCtx).previewServerState.type;
-  const { jobs } = useContext38(RenderQueueContext);
-  const { canvasContent } = useContext38(Internals32.CompositionManager);
+  const connectionStatus = useContext39(StudioServerConnectionCtx).previewServerState.type;
+  const { jobs } = useContext39(RenderQueueContext);
+  const { canvasContent } = useContext39(Internals32.CompositionManager);
   const previousJobCount = React98.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React98.useRef(null);
@@ -15552,7 +15554,7 @@ var RenderQueue = () => {
 };
 
 // src/components/RendersTab.tsx
-import {useContext as useContext39, useMemo as useMemo80} from "react";
+import {useContext as useContext40, useMemo as useMemo80} from "react";
 import {Internals as Internals33} from "remotion";
 import {
 jsx as jsx145,
@@ -15577,8 +15579,8 @@ var badge = {
   alignItems: "center"
 };
 var RendersTab = ({ selected, onClick }) => {
-  const { jobs } = useContext39(RenderQueueContext);
-  const { canvasContent } = useContext39(Internals33.CompositionManager);
+  const { jobs } = useContext40(RenderQueueContext);
+  const { canvasContent } = useContext40(Internals33.CompositionManager);
   const failedJobs = jobs.filter((j) => j.status === "failed").length;
   const jobCount = jobs.length;
   const isActuallySelected = useMemo80(() => {
@@ -15642,7 +15644,7 @@ var persistSelectedOptionsSidebarPanel2 = (panel) => {
 };
 var optionsSidebarTabs = createRef8();
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps, resetUnsaved } = useContext40(Internals34.EditorPropsContext);
+  const { props, updateProps, resetUnsaved } = useContext41(Internals34.EditorPropsContext);
   const [saving, setSaving] = useState47(false);
   const isMobileLayout = useMobileLayout();
   const container30 = useMemo81(() => ({
@@ -15670,7 +15672,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext40(Internals34.CompositionManager);
+  const { compositions, canvasContent } = useContext41(Internals34.CompositionManager);
   const composition = useMemo81(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -15756,7 +15758,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import {useContext as useContext47, useState as useState50} from "react";
+import {useContext as useContext48, useState as useState50} from "react";
 import {Internals as Internals42} from "remotion";
 
 // src/state/loop.ts
@@ -15770,7 +15772,7 @@ var loadLoopOption = () => {
 };
 
 // src/components/CheckboardToggle.tsx
-import {useCallback as useCallback74, useContext as useContext41} from "react";
+import {useCallback as useCallback74, useContext as useContext42} from "react";
 import {NoReactInternals as NoReactInternals12} from "remotion/no-react";
 import {
 jsx as jsx147
@@ -15780,7 +15782,7 @@ var accessibilityLabel2 = [
   areKeyboardShortcutsDisabled() ? null : "(T)"
 ].filter(NoReactInternals12.truthy).join(" ");
 var CheckboardToggle = () => {
-  const { checkerboard: checkerboard4, setCheckerboard } = useContext41(CheckerboardContext);
+  const { checkerboard: checkerboard4, setCheckerboard } = useContext42(CheckerboardContext);
   const onClick = useCallback74(() => {
     setCheckerboard((c) => {
       return !c;
@@ -15893,7 +15895,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import {useCallback as useCallback75, useContext as useContext42, useEffect as useEffect47} from "react";
+import {useCallback as useCallback75, useContext as useContext43, useEffect as useEffect47} from "react";
 import {Internals as Internals36} from "remotion";
 import {NoReactInternals as NoReactInternals13} from "remotion/no-react";
 import {
@@ -15905,7 +15907,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals13.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings2 = useKeybinding();
-  const { setSize } = useContext42(Internals36.PreviewSizeContext);
+  const { setSize } = useContext43(Internals36.PreviewSizeContext);
   const onClick = useCallback75(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -16483,7 +16485,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 };
 
 // src/components/PlaybackRatePersistor.tsx
-import {useContext as useContext43, useEffect as useEffect50} from "react";
+import {useContext as useContext44, useEffect as useEffect50} from "react";
 import {Internals as Internals38} from "remotion";
 
 // src/state/playbackrate.ts
@@ -16504,7 +16506,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = useContext43(Internals38.Timeline.TimelineContext);
+  const { setPlaybackRate, playbackRate } = useContext44(Internals38.Timeline.TimelineContext);
   useEffect50(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -16515,7 +16517,7 @@ var PlaybackRatePersistor = () => {
 };
 
 // src/components/PlaybackRateSelector.tsx
-import {useContext as useContext44, useMemo as useMemo83} from "react";
+import {useContext as useContext45, useMemo as useMemo83} from "react";
 import {Internals as Internals39} from "remotion";
 import {
 jsx as jsx158
@@ -16539,7 +16541,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle2 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext44(Internals39.CompositionManager);
+  const { canvasContent } = useContext45(Internals39.CompositionManager);
   const isStill = useIsStill();
   const style9 = useMemo83(() => {
     return {
@@ -16588,7 +16590,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 };
 
 // src/components/RenderButton.tsx
-import {useCallback as useCallback80, useContext as useContext45, useMemo as useMemo84} from "react";
+import {useCallback as useCallback80, useContext as useContext46, useMemo as useMemo84} from "react";
 import {Internals as Internals40, useCurrentFrame as useCurrentFrame2} from "remotion";
 import {
 jsx as jsx159,
@@ -16605,8 +16607,8 @@ var label7 = {
 };
 var RenderButton = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const { setSelectedModal } = useContext45(ModalsContext);
-  const connectionStatus = useContext45(StudioServerConnectionCtx).previewServerState.type;
+  const { setSelectedModal } = useContext46(ModalsContext);
+  const connectionStatus = useContext46(StudioServerConnectionCtx).previewServerState.type;
   const shortcut = areKeyboardShortcutsDisabled() ? "" : "(R)";
   const tooltip = connectionStatus === "connected" ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
   const iconStyle4 = useMemo84(() => {
@@ -16619,7 +16621,7 @@ var RenderButton = () => {
   }, []);
   const video2 = Internals40.useVideo();
   const frame2 = useCurrentFrame2();
-  const { props } = useContext45(Internals40.EditorPropsContext);
+  const { props } = useContext46(Internals40.EditorPropsContext);
   const onClick = useCallback80(() => {
     if (!video2) {
       return null;
@@ -16700,7 +16702,7 @@ var RenderButton = () => {
 };
 
 // src/components/Timeline/TimelineZoomControls.tsx
-import {useCallback as useCallback81, useContext as useContext46} from "react";
+import {useCallback as useCallback81, useContext as useContext47} from "react";
 import {Internals as Internals41} from "remotion";
 
 // src/icons/minus.tsx
@@ -16738,8 +16740,8 @@ var iconStyle4 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext46(Internals41.CompositionManager);
-  const { setZoom, zoom: zoomMap } = useContext46(TimelineZoomCtx);
+  const { canvasContent } = useContext47(Internals41.CompositionManager);
+  const { setZoom, zoom: zoomMap } = useContext47(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback81(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
@@ -16839,9 +16841,9 @@ var padding = {
   width: TIMELINE_PADDING
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = useContext47(Internals42.Timeline.TimelineContext);
-  const { mediaMuted } = useContext47(Internals42.MediaVolumeContext);
-  const { setMediaMuted } = useContext47(Internals42.SetMediaVolumeContext);
+  const { playbackRate, setPlaybackRate } = useContext48(Internals42.Timeline.TimelineContext);
+  const { mediaMuted } = useContext48(Internals42.MediaVolumeContext);
+  const { setMediaMuted } = useContext48(Internals42.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
   const isStill = useIsStill();
   const [loop3, setLoop] = useState50(loadLoopOption());
@@ -17036,7 +17038,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
 };
 
 // src/components/Splitter/SplitterElement.tsx
-import {useContext as useContext48, useMemo as useMemo86} from "react";
+import {useContext as useContext49, useMemo as useMemo86} from "react";
 import {interpolateColors, random} from "remotion";
 import {
 jsx as jsx164,
@@ -17044,7 +17046,7 @@ jsxs as jsxs77,
 Fragment as Fragment23
 } from "react/jsx-runtime";
 var SplitterElement = ({ children, type, sticky }) => {
-  const context5 = useContext48(SplitterContext);
+  const context5 = useContext49(SplitterContext);
   const style9 = useMemo86(() => {
     return {
       flex: (type === "flexer" ? context5.flexValue : 1 - context5.flexValue) * 1000,
@@ -17078,7 +17080,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import {PlayerInternals as PlayerInternals14} from "@remotion/player";
-import {useContext as useContext49, useEffect as useEffect52, useRef as useRef28, useState as useState52} from "react";
+import {useContext as useContext50, useEffect as useEffect52, useRef as useRef28, useState as useState52} from "react";
 import {
 jsx as jsx165
 } from "react/jsx-runtime";
@@ -17092,7 +17094,7 @@ var containerColumn2 = {
   cursor: "col-resize"
 };
 var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
-  const context5 = useContext49(SplitterContext);
+  const context5 = useContext50(SplitterContext);
   if (!context5) {
     throw new Error("Cannot find splitter context");
   }
@@ -17220,7 +17222,7 @@ var row4 = {
   minHeight: 0
 };
 var useResponsiveSidebarStatus = () => {
-  const { sidebarCollapsedStateLeft } = useContext50(SidebarContext);
+  const { sidebarCollapsedStateLeft } = useContext51(SidebarContext);
   const responsiveLeftStatus = useBreakpoint(1200) ? "collapsed" : "expanded";
   const actualStateLeft = useMemo87(() => {
     if (sidebarCollapsedStateLeft === "collapsed") {
@@ -17240,7 +17242,7 @@ var TopPanel = ({
   drawRef: drawRef2,
   bufferStateDelayInMilliseconds
 }) => {
-  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext50(SidebarContext);
+  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext51(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
   const actualStateLeft = useResponsiveSidebarStatus();
   const actualStateRight = useMemo87(() => {
@@ -17365,7 +17367,7 @@ var style9 = {
   position: "relative"
 };
 var SidebarCollapserControls = () => {
-  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext51(SidebarContext);
+  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext52(SidebarContext);
   const keybindings2 = useKeybinding();
   const leftSidebarStatus = useResponsiveSidebarStatus();
   const leftIcon = useCallback83((color) => {
@@ -17503,7 +17505,7 @@ var SidebarCollapserControls = () => {
 // src/components/UpdateCheck.tsx
 import {
 useCallback as useCallback84,
-useContext as useContext52,
+useContext as useContext53,
 useEffect as useEffect55,
 useMemo as useMemo88,
 useState as useState53
@@ -17525,7 +17527,7 @@ var buttonStyle4 = {
 };
 var UpdateCheck = () => {
   const [info, setInfo] = useState53(null);
-  const { setSelectedModal } = useContext52(ModalsContext);
+  const { setSelectedModal } = useContext53(ModalsContext);
   const { tabIndex } = useZIndex();
   const [knownBugs, setKnownBugs] = useState53(null);
   const hasKnownBugs = useMemo88(() => {
@@ -17729,7 +17731,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import {useContext as useContext61, useMemo as useMemo100} from "react";
+import {useContext as useContext62, useMemo as useMemo100} from "react";
 import {Internals as Internals50} from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -17926,7 +17928,7 @@ var MaxTimelineTracksReached = () => {
 import {PlayerInternals as PlayerInternals15} from "@remotion/player";
 import {
 useCallback as useCallback86,
-useContext as useContext55,
+useContext as useContext56,
 useEffect as useEffect56,
 useMemo as useMemo91,
 useRef as useRef29,
@@ -17935,7 +17937,7 @@ useState as useState55
 import {Internals as Internals44, useVideoConfig as useVideoConfig4} from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
-import {createRef as createRef9, useContext as useContext53} from "react";
+import {createRef as createRef9, useContext as useContext54} from "react";
 import {Internals as Internals43} from "remotion";
 import {
 jsx as jsx170,
@@ -17954,7 +17956,7 @@ var outMarkerAreaRef = createRef9();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals43.useUnsafeVideoConfig();
-  const timelineWidth = useContext53(TimelineWidthContext);
+  const timelineWidth = useContext54(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
   }
@@ -17981,7 +17983,7 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import {createRef as createRef10, useContext as useContext54, useMemo as useMemo90} from "react";
+import {createRef as createRef10, useContext as useContext55, useMemo as useMemo90} from "react";
 import {useVideoConfig as useVideoConfig3} from "remotion";
 import {
 jsx as jsx171
@@ -18016,7 +18018,7 @@ var TimelineInOutPointerHandle = ({
   type,
   atFrame
 }) => {
-  const timelineWidth = useContext54(TimelineWidthContext);
+  const timelineWidth = useContext55(TimelineWidthContext);
   if (timelineWidth === null) {
     return null;
   }
@@ -18052,8 +18054,8 @@ var getClientXWithScroll = (x) => {
 };
 var TimelineDragHandler = () => {
   const video2 = Internals44.useUnsafeVideoConfig();
-  const { zoom: zoomMap } = useContext55(TimelineZoomCtx);
-  const { canvasContent } = useContext55(Internals44.CompositionManager);
+  const { zoom: zoomMap } = useContext56(TimelineZoomCtx);
+  const { canvasContent } = useContext56(Internals44.CompositionManager);
   const containerStyle2 = useMemo91(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
@@ -18084,7 +18086,7 @@ var Inner2 = () => {
   const [inOutDragging, setInOutDragging] = useState55({
     dragging: false
   });
-  const timelineWidth = useContext55(TimelineWidthContext);
+  const timelineWidth = useContext56(TimelineWidthContext);
   const get = useCallback86((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
@@ -18469,7 +18471,7 @@ import {PlayerInternals as PlayerInternals16} from "@remotion/player";
 import {useRef as useRef31} from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
-import {useCallback as useCallback89, useContext as useContext57, useMemo as useMemo93} from "react";
+import {useCallback as useCallback89, useContext as useContext58, useMemo as useMemo93} from "react";
 import {Internals as Internals45} from "remotion";
 
 // src/components/Timeline/TimelineLayerEye.tsx
@@ -18551,7 +18553,7 @@ var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
 import {SOURCE_MAP_ENDPOINT} from "@remotion/studio-shared";
 import {
 useCallback as useCallback88,
-useContext as useContext56,
+useContext as useContext57,
 useEffect as useEffect57,
 useMemo as useMemo92,
 useState as useState56
@@ -18654,7 +18656,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
   const [titleHovered, setTitleHovered] = useState56(false);
   const [opening, setOpening] = useState56(false);
   const selectAsset = useSelectAsset();
-  const connectionStatus = useContext56(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext57(StudioServerConnectionCtx).previewServerState.type;
   const assetPath = useMemo92(() => {
     if (sequence.type !== "video" && sequence.type !== "audio") {
       return null;
@@ -18839,7 +18841,7 @@ var space = {
   flexShrink: 0
 };
 var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-  const { hidden, setHidden } = useContext57(Internals45.SequenceVisibilityToggleContext);
+  const { hidden, setHidden } = useContext58(Internals45.SequenceVisibilityToggleContext);
   const padder = useMemo93(() => {
     return {
       width: Number(SPACING * 1.5) * nestedDepth,
@@ -18880,7 +18882,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import {useContext as useContext58, useEffect as useEffect58, useMemo as useMemo94, useRef as useRef30} from "react";
+import {useContext as useContext59, useEffect as useEffect58, useMemo as useMemo94, useRef as useRef30} from "react";
 import {Internals as Internals46} from "remotion";
 import {
 jsx as jsx176
@@ -18934,7 +18936,7 @@ var TimelineTimePadding = () => {
   });
 };
 var TimelineTimeIndicators = () => {
-  const sliderTrack = useContext58(TimelineWidthContext);
+  const sliderTrack = useContext59(TimelineWidthContext);
   const video2 = Internals46.useVideo();
   if (sliderTrack === null) {
     return null;
@@ -19060,15 +19062,15 @@ var TimelineList = ({ timeline: timeline2 }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import {useContext as useContext59, useEffect as useEffect59} from "react";
+import {useContext as useContext60, useEffect as useEffect59} from "react";
 import {Internals as Internals47} from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
   const video2 = Internals47.useVideo();
-  const timelineContext = useContext59(Internals47.Timeline.TimelineContext);
+  const timelineContext = useContext60(Internals47.Timeline.TimelineContext);
   const timelinePosition = Internals47.Timeline.useTimelinePosition();
-  const { canvasContent } = useContext59(Internals47.CompositionManager);
-  const { zoom: zoomMap } = useContext59(TimelineZoomCtx);
+  const { canvasContent } = useContext60(Internals47.CompositionManager);
+  const { zoom: zoomMap } = useContext60(TimelineZoomCtx);
   const compositionId = canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const zoom = compositionId ? zoomMap[compositionId] ?? TIMELINE_MIN_ZOOM : null;
   if (zoom && video2) {
@@ -19159,7 +19161,7 @@ var TimelineScrollable = ({ children }) => {
 import {useMemo as useMemo99} from "react";
 
 // src/components/Timeline/TimelineSequence.tsx
-import {useContext as useContext60, useMemo as useMemo98, useState as useState59} from "react";
+import {useContext as useContext61, useMemo as useMemo98, useState as useState59} from "react";
 import {Internals as Internals49, useCurrentFrame as useCurrentFrame3} from "remotion";
 
 // src/helpers/get-timeline-sequence-layout.ts
@@ -19570,7 +19572,7 @@ jsxs as jsxs90
 var AUDIO_GRADIENT = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
 var VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
 var TimelineSequence = ({ s }) => {
-  const windowWidth = useContext60(TimelineWidthContext);
+  const windowWidth = useContext61(TimelineWidthContext);
   if (windowWidth === null) {
     return null;
   }
@@ -19742,7 +19744,7 @@ var noop7 = () => {
   return;
 };
 var Timeline = () => {
-  const { sequences } = useContext61(Internals50.SequenceManager);
+  const { sequences } = useContext62(Internals50.SequenceManager);
   const videoConfig = Internals50.useUnsafeVideoConfig();
   const timeline2 = useMemo100(() => {
     if (!videoConfig) {
@@ -19843,7 +19845,7 @@ var EditorContent = ({
   bufferStateDelayInMilliseconds
 }) => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext62(Internals51.CompositionManager);
+  const { canvasContent } = useContext63(Internals51.CompositionManager);
   const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== "composition";
   return jsxs93("div", {
     style: container41,
@@ -19895,11 +19897,11 @@ var EditorContent = ({
 };
 
 // src/components/GlobalKeybindings.tsx
-import {useContext as useContext63, useEffect as useEffect62} from "react";
+import {useContext as useContext64, useEffect as useEffect62} from "react";
 var GlobalKeybindings = () => {
   const keybindings2 = useKeybinding();
-  const { setSelectedModal } = useContext63(ModalsContext);
-  const { setCheckerboard } = useContext63(CheckerboardContext);
+  const { setSelectedModal } = useContext64(ModalsContext);
+  const { setCheckerboard } = useContext64(CheckerboardContext);
   useEffect62(() => {
     const nKey = keybindings2.registerKeybinding({
       event: "keypress",
@@ -19964,13 +19966,13 @@ var GlobalKeybindings = () => {
 };
 
 // src/components/Modals.tsx
-import {useContext as useContext75} from "react";
+import {useContext as useContext76} from "react";
 
 // src/components/NewComposition/DeleteComposition.tsx
-import {useCallback as useCallback93, useContext as useContext68, useMemo as useMemo102} from "react";
+import {useCallback as useCallback93, useContext as useContext69, useMemo as useMemo102} from "react";
 
 // src/components/ModalHeader.tsx
-import {useCallback as useCallback90, useContext as useContext64} from "react";
+import {useCallback as useCallback90, useContext as useContext65} from "react";
 import {
 jsx as jsx189,
 jsxs as jsxs94
@@ -19992,7 +19994,7 @@ var icon5 = {
   width: 20
 };
 var NewCompHeader = ({ title: title4 }) => {
-  const { setSelectedModal } = useContext64(ModalsContext);
+  const { setSelectedModal } = useContext65(ModalsContext);
   const onPress = useCallback90(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -20013,7 +20015,7 @@ var NewCompHeader = ({ title: title4 }) => {
 };
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React134, {useContext as useContext65, useEffect as useEffect63, useMemo as useMemo101} from "react";
+import React134, {useContext as useContext66, useEffect as useEffect63, useMemo as useMemo101} from "react";
 import {Internals as Internals52} from "remotion";
 import {
 jsx as jsx190,
@@ -20038,7 +20040,7 @@ var loaderLabel2 = {
 var ResolvedCompositionContext = React134.createContext(null);
 var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals52.useResolvedVideoConfig(compositionId);
-  const unresolvedContext = useContext65(Internals52.CompositionManager);
+  const unresolvedContext = useContext66(Internals52.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
   useEffect63(() => {
     const { current } = Internals52.resolveCompositionsRef;
@@ -20098,7 +20100,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import {useCallback as useCallback91, useContext as useContext66, useEffect as useEffect64, useState as useState60} from "react";
+import {useCallback as useCallback91, useContext as useContext67, useEffect as useEffect64, useState as useState60} from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import {
@@ -20168,7 +20170,7 @@ var CodemodFooter = ({
   submitLabel
 }) => {
   const [submitting, setSubmitting] = useState60(false);
-  const { setSelectedModal } = useContext66(ModalsContext);
+  const { setSelectedModal } = useContext67(ModalsContext);
   const [codemodStatus, setCanApplyCodemod] = useState60({
     type: "loading"
   });
@@ -20287,7 +20289,7 @@ var CodemodFooter = ({
 };
 
 // src/components/NewComposition/DismissableModal.tsx
-import {useCallback as useCallback92, useContext as useContext67} from "react";
+import {useCallback as useCallback92, useContext as useContext68} from "react";
 
 // src/components/ModalContainer.tsx
 import {
@@ -20337,7 +20339,7 @@ import {
 jsx as jsx194
 } from "react/jsx-runtime";
 var DismissableModal = ({ children }) => {
-  const { setSelectedModal } = useContext67(ModalsContext);
+  const { setSelectedModal } = useContext68(ModalsContext);
   const onQuit = useCallback92(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -20361,7 +20363,7 @@ var content2 = {
   minWidth: 500
 };
 var DeleteCompositionLoaded = ({ compositionId }) => {
-  const context5 = useContext68(ResolvedCompositionContext);
+  const context5 = useContext69(ResolvedCompositionContext);
   if (!context5) {
     throw new Error("Resolved composition context");
   }
@@ -20436,7 +20438,7 @@ var DeleteComposition = ({ compositionId }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import {useCallback as useCallback95, useContext as useContext69, useMemo as useMemo103, useState as useState61} from "react";
+import {useCallback as useCallback95, useContext as useContext70, useMemo as useMemo103, useState as useState61} from "react";
 import {Internals as Internals54} from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -20550,7 +20552,7 @@ var comboBoxStyle = {
   width: 190
 };
 var DuplicateCompositionLoaded = ({ initialType }) => {
-  const context5 = useContext69(ResolvedCompositionContext);
+  const context5 = useContext70(ResolvedCompositionContext);
   if (!context5) {
     throw new Error("Resolved composition context");
   }
@@ -20560,7 +20562,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
   const [selectedFrameRate, setFrameRate] = useState61(resolved.result.fps);
-  const { compositions } = useContext69(Internals54.CompositionManager);
+  const { compositions } = useContext70(Internals54.CompositionManager);
   const [type, setType] = useState61(initialCompType);
   const [newId, setName] = useState61(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
@@ -20904,7 +20906,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 };
 
 // src/components/NewComposition/RenameComposition.tsx
-import {useCallback as useCallback96, useContext as useContext70, useMemo as useMemo104, useState as useState62} from "react";
+import {useCallback as useCallback96, useContext as useContext71, useMemo as useMemo104, useState as useState62} from "react";
 import {Internals as Internals55} from "remotion";
 import {
 jsx as jsx198,
@@ -20919,12 +20921,12 @@ var content4 = {
   minWidth: 500
 };
 var RenameCompositionLoaded = () => {
-  const context5 = useContext70(ResolvedCompositionContext);
+  const context5 = useContext71(ResolvedCompositionContext);
   if (!context5) {
     throw new Error("Resolved composition context");
   }
   const { resolved } = context5;
-  const { compositions } = useContext70(Internals55.CompositionManager);
+  const { compositions } = useContext71(Internals55.CompositionManager);
   const [newId, setName] = useState62(() => {
     return resolved.result.id;
   });
@@ -21021,7 +21023,7 @@ var RenameComposition = ({ compositionId }) => {
 // src/components/QuickSwitcher/QuickSwitcherContent.tsx
 import {
 useCallback as useCallback97,
-useContext as useContext71,
+useContext as useContext72,
 useEffect as useEffect66,
 useMemo as useMemo106,
 useRef as useRef35,
@@ -22061,7 +22063,7 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext71(Internals56.CompositionManager);
+  const { compositions } = useContext72(Internals56.CompositionManager);
   const [state, setState] = useState64(() => {
     return {
       query: mapModeToQuery(initialMode),
@@ -22081,7 +22083,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
   }, []);
   const actions10 = useMenuStructure(closeMenu, readOnlyStudio);
   const [docResults, setDocResults] = useState64({ type: "initial" });
-  const { setSelectedModal } = useContext71(ModalsContext);
+  const { setSelectedModal } = useContext72(ModalsContext);
   const keybindings2 = useKeybinding();
   const mode = mapQueryToMode(state.query);
   const actualQuery = useMemo106(() => {
@@ -22334,7 +22336,7 @@ import {BrowserSafeApis as BrowserSafeApis10} from "@remotion/renderer/client.js
 import {getDefaultOutLocation} from "@remotion/studio-shared";
 import {
 useCallback as useCallback115,
-useContext as useContext73,
+useContext as useContext74,
 useEffect as useEffect69,
 useMemo as useMemo115,
 useReducer as useReducer2,
@@ -23717,10 +23719,10 @@ import {BrowserSafeApis as BrowserSafeApis4} from "@remotion/renderer/client.js"
 import {useCallback as useCallback107, useMemo as useMemo111} from "react";
 
 // src/helpers/use-file-existence.ts
-import {useContext as useContext72, useEffect as useEffect68, useRef as useRef36, useState as useState69} from "react";
+import {useContext as useContext73, useEffect as useEffect68, useRef as useRef36, useState as useState69} from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState69(false);
-  const { previewServerState: state, subscribeToEvent } = useContext72(StudioServerConnectionCtx);
+  const { previewServerState: state, subscribeToEvent } = useContext73(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef36("");
   currentOutName.current = outName;
@@ -25214,8 +25216,8 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender
 }) => {
-  const { setSelectedModal } = useContext73(ModalsContext);
-  const context5 = useContext73(ResolvedCompositionContext);
+  const { setSelectedModal } = useContext74(ModalsContext);
+  const context5 = useContext74(ResolvedCompositionContext);
   if (!context5) {
     throw new Error("Should not be able to render without resolving comp first");
   }
@@ -25473,7 +25475,7 @@ var RenderModal = ({
     setStillImageFormat(format);
     setDefaultOutName({ type: "still", imageFormat: format });
   }, [setDefaultOutName]);
-  const { setSidebarCollapsedState } = useContext73(SidebarContext);
+  const { setSidebarCollapsedState } = useContext74(SidebarContext);
   const onClickStill = useCallback115(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel2("renders");
@@ -26142,7 +26144,7 @@ var RenderModalWithLoader = (props) => {
 };
 
 // src/components/RenderModal/RenderStatusModal.tsx
-import {useCallback as useCallback117, useContext as useContext74} from "react";
+import {useCallback as useCallback117, useContext as useContext75} from "react";
 
 // src/components/RenderModal/GuiRenderStatus.tsx
 import {useCallback as useCallback116, useMemo as useMemo116} from "react";
@@ -26385,8 +26387,8 @@ var buttonRow = {
   justifyContent: "flex-end"
 };
 var RenderStatusModal = ({ jobId }) => {
-  const { setSelectedModal } = useContext74(ModalsContext);
-  const { jobs } = useContext74(RenderQueueContext);
+  const { setSelectedModal } = useContext75(ModalsContext);
+  const { jobs } = useContext75(RenderQueueContext);
   const job = jobs.find((j) => j.id === jobId);
   if (!job) {
     throw new Error("job not found");
@@ -26769,8 +26771,8 @@ jsxs as jsxs128,
 Fragment as Fragment41
 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
-  const { selectedModal: modalContextType } = useContext75(ModalsContext);
-  const canRender = useContext75(StudioServerConnectionCtx).previewServerState.type === "connected";
+  const { selectedModal: modalContextType } = useContext76(ModalsContext);
+  const canRender = useContext76(StudioServerConnectionCtx).previewServerState.type === "connected";
   return jsxs128(Fragment41, {
     children: [
       modalContextType && modalContextType.type === "duplicate-comp" && jsx242(DuplicateComposition, {
@@ -26930,7 +26932,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import {PlayerInternals as PlayerInternals18} from "@remotion/player";
 
 // src/state/preview-size.tsx
-import {useCallback as useCallback122, useContext as useContext76, useMemo as useMemo120, useState as useState73} from "react";
+import {useCallback as useCallback122, useContext as useContext77, useMemo as useMemo120, useState as useState73} from "react";
 import {Internals as Internals58} from "remotion";
 import {
 jsx as jsx244
@@ -26960,7 +26962,7 @@ var PreviewSizeProvider = ({ children }) => {
       y: 0
     };
   });
-  const { editorZoomGestures } = useContext76(EditorZoomGesturesContext);
+  const { editorZoomGestures } = useContext77(EditorZoomGesturesContext);
   const setSize = useCallback122((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
@@ -27242,7 +27244,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 };
 
 // src/components/Notifications/ServerDisconnected.tsx
-import {useContext as useContext77} from "react";
+import {useContext as useContext78} from "react";
 import {
 jsx as jsx253,
 jsxs as jsxs130
@@ -27280,7 +27282,7 @@ window.addEventListener("beforeunload", () => {
   pageIsGoingToReload = true;
 });
 var ServerDisconnected = () => {
-  const { previewServerState: ctx } = useContext77(StudioServerConnectionCtx);
+  const { previewServerState: ctx } = useContext78(StudioServerConnectionCtx);
   const fav = document.getElementById("__remotion_favicon");
   if (ctx.type !== "disconnected") {
     fav.setAttribute("href", "/favicon.ico");