@remotion/studio 4.0.413 → 4.0.415

package/dist/esm/{chunk-t3rf3vkq.js → chunk-wg48cezw.js}

@@ -4,14 +4,14 @@ import {
 } from "./chunk-6jf1natv.js";
 
 // src/Studio.tsx
-import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { useContext as useContext90, useLayoutEffect as useLayoutEffect2 } from "react";
 import { createPortal } from "react-dom";
 import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
 import React177, { useCallback as useCallback135, useEffect as useEffect84, useMemo as useMemo136 } from "react";
-import { Internals as Internals62 } from "remotion";
+import { Internals as Internals61 } from "remotion";
 
 // src/helpers/colors.ts
 var BACKGROUND = "rgb(31,36,40)";
@@ -856,7 +856,7 @@ var useZIndex = () => {
 
 // src/components/EditorContent.tsx
 import { useContext as useContext70 } from "react";
-import { Internals as Internals55 } from "remotion";
+import { Internals as Internals54 } from "remotion";
 
 // src/helpers/is-current-selected-still.ts
 import { useContext as useContext5 } from "react";
@@ -10598,7 +10598,7 @@ import {
   useMemo as useMemo90,
   useState as useState56
 } from "react";
-import { Internals as Internals37 } from "remotion";
+import { Internals as Internals36 } from "remotion";
 
 // src/visual-controls/VisualControls.tsx
 import {
@@ -11077,6 +11077,14 @@ var saveDefaultProps = async ({
   return Promise.reject(err);
 };
 
+// src/fast-refresh-context.ts
+import { createContext as createContext17 } from "react";
+var FastRefreshContext = createContext17({
+  fastRefreshes: 0,
+  manualRefreshes: 0,
+  increaseManualRefreshes: () => {}
+});
+
 // src/components/RenderModal/SchemaEditor/SchemaResetButton.tsx
 import { useCallback as useCallback43 } from "react";
 import { jsx as jsx96 } from "react/jsx-runtime";
@@ -11133,7 +11141,7 @@ var container24 = {
   flexDirection: "row"
 };
 var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) => {
-  const { fastRefreshes } = useContext33(Internals28.NonceContext);
+  const { fastRefreshes } = useContext33(FastRefreshContext);
   const [disabled, setDisabled] = React63.useState(false);
   const onClicked = useCallback45(() => {
     setDisabled(true);
@@ -11895,10 +11903,10 @@ var fieldsetLabel = {
 };
 
 // src/components/RenderModal/SchemaEditor/Fieldset.tsx
-import { createContext as createContext17, useContext as useContext34, useMemo as useMemo58 } from "react";
+import { createContext as createContext18, useContext as useContext34, useMemo as useMemo58 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var SCHEMA_EDITOR_FIELDSET_PADDING = 10;
-var AlreadyPaddedRightContext = createContext17(false);
+var AlreadyPaddedRightContext = createContext18(false);
 var Fieldset = ({ children, shouldPad }) => {
   const alreadyPadded = useContext34(AlreadyPaddedRightContext);
   const style8 = useMemo58(() => {
@@ -12720,7 +12728,7 @@ var ZodFieldValidation = ({ localValue, path }) => {
 
 // src/components/RenderModal/SchemaEditor/local-state.tsx
 import {
-  createContext as createContext18,
+  createContext as createContext19,
   useCallback as useCallback53,
   useContext as useContext35,
   useEffect as useEffect42,
@@ -12730,7 +12738,7 @@ import {
 } from "react";
 import { Internals as Internals29 } from "remotion";
 import { jsx as jsx114 } from "react/jsx-runtime";
-var RevisionContext = createContext18({
+var RevisionContext = createContext19({
   childResetRevision: 0
 });
 var useLocalState = ({
@@ -15628,7 +15636,7 @@ var DataEditor = ({
     return canSaveDefaultPropsObjectState[unresolvedComposition.id] ? canSaveDefaultPropsObjectState[unresolvedComposition.id] : defaultTypeCanSaveState;
   }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
   const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
-  const { fastRefreshes } = useContext36(Internals31.NonceContext);
+  const { fastRefreshes } = useContext36(FastRefreshContext);
   const checkIfCanSaveDefaultProps = useCallback69(async () => {
     try {
       const can = await canUpdateDefaultProps(unresolvedComposition.id, readOnlyStudio);
@@ -16863,7 +16871,6 @@ import React107, { useContext as useContext47 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
 import { useCallback as useCallback80, useContext as useContext46, useEffect as useEffect51, useState as useState55 } from "react";
-import { Internals as Internals36 } from "remotion";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
 // src/components/VisualControls/ClickableFileName.tsx
@@ -17055,8 +17062,7 @@ var VisualControlHandle = ({ value, keyName }) => {
   const zodTypes = useZodTypesIfPossible();
   const state = useContext46(VisualControlsContext);
   const { updateValue } = useContext46(SetVisualControlsContext);
-  const { fastRefreshes } = useContext46(Internals36.NonceContext);
-  const { increaseManualRefreshes } = useContext46(Internals36.SetNonceContext);
+  const { fastRefreshes, increaseManualRefreshes } = useContext46(FastRefreshContext);
   const [saving, setSaving] = useState55(false);
   const currentValue = getVisualControlEditedValue({
     handles: state.handles,
@@ -17197,7 +17203,7 @@ var persistSelectedOptionsSidebarPanel2 = (panel2) => {
 };
 var optionsSidebarTabs = createRef9();
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps, resetUnsaved } = useContext48(Internals37.EditorPropsContext);
+  const { props, updateProps, resetUnsaved } = useContext48(Internals36.EditorPropsContext);
   const [saving, setSaving] = useState56(false);
   const isMobileLayout = useMobileLayout();
   const visualControlsTabActivated = useContext48(VisualControlsTabActivatedContext);
@@ -17230,7 +17236,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext48(Internals37.CompositionManager);
+  const { compositions, canvasContent } = useContext48(Internals36.CompositionManager);
   const composition = useMemo90(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -17271,9 +17277,9 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     }
   }, [resetUnsaved]);
   useEffect52(() => {
-    window.addEventListener(Internals37.PROPS_UPDATED_EXTERNALLY, reset);
+    window.addEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
     return () => {
-      window.removeEventListener(Internals37.PROPS_UPDATED_EXTERNALLY, reset);
+      window.removeEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
     };
   }, [reset]);
   return /* @__PURE__ */ jsxs78("div", {
@@ -17324,7 +17330,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 
 // src/components/PreviewToolbar.tsx
 import { useContext as useContext55, useEffect as useEffect58, useRef as useRef32, useState as useState60 } from "react";
-import { Internals as Internals45 } from "remotion";
+import { Internals as Internals44 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
 var shouldShowRenderButton = (readOnlyStudio) => {
@@ -17389,7 +17395,7 @@ import {
   useRef as useRef30,
   useState as useState57
 } from "react";
-import { Internals as Internals38 } from "remotion";
+import { Internals as Internals37 } from "remotion";
 import { jsxs as jsxs79 } from "react/jsx-runtime";
 var label6 = {
   color: "white",
@@ -17402,9 +17408,9 @@ var pushWithMaxSize = (arr, value, maxSize) => {
   return arr.slice(-maxSize);
 };
 var FpsCounter = ({ playbackSpeed }) => {
-  const videoConfig = Internals38.useUnsafeVideoConfig();
-  const [playing] = Internals38.Timeline.usePlayingState();
-  const frame2 = Internals38.Timeline.useTimelinePosition();
+  const videoConfig = Internals37.useUnsafeVideoConfig();
+  const [playing] = Internals37.Timeline.usePlayingState();
+  const frame2 = Internals37.Timeline.useTimelinePosition();
   const [marker, rerender] = useState57({});
   const [fps, setFps] = useState57(0);
   const previousUpdates = useRef30([]);
@@ -17466,7 +17472,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 
 // src/components/FullscreenToggle.tsx
 import { useCallback as useCallback83, useContext as useContext50, useEffect as useEffect54 } from "react";
-import { Internals as Internals39 } from "remotion";
+import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx163 } from "react/jsx-runtime";
 var accessibilityLabel3 = [
@@ -17475,7 +17481,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals14.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
-  const { setSize } = useContext50(Internals39.PreviewSizeContext);
+  const { setSize } = useContext50(Internals38.PreviewSizeContext);
   const onClick = useCallback83(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -17602,7 +17608,7 @@ var MuteToggle = ({ muted, setMuted }) => {
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals12 } from "@remotion/player";
 import { useCallback as useCallback86, useEffect as useEffect55, useState as useState58 } from "react";
-import { Internals as Internals40 } from "remotion";
+import { Internals as Internals39 } from "remotion";
 
 // src/icons/jump-to-start.tsx
 import { jsx as jsx167 } from "react/jsx-runtime";
@@ -17697,7 +17703,7 @@ var iconButton = {
 };
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals40.useUnsafeVideoConfig();
+  const videoConfig = Internals39.useUnsafeVideoConfig();
   const [showBufferIndicator, setShowBufferState] = useState58(false);
   const {
     playing,
@@ -18037,7 +18043,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 
 // src/components/PlaybackRatePersistor.tsx
 import { useContext as useContext51, useEffect as useEffect57 } from "react";
-import { Internals as Internals41 } from "remotion";
+import { Internals as Internals40 } from "remotion";
 
 // src/state/playbackrate.ts
 var key3 = "remotion.playbackrate";
@@ -18057,7 +18063,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = useContext51(Internals41.TimelineContext);
+  const { setPlaybackRate, playbackRate } = useContext51(Internals40.TimelineContext);
   useEffect57(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -18069,7 +18075,7 @@ var PlaybackRatePersistor = () => {
 
 // src/components/PlaybackRateSelector.tsx
 import { useContext as useContext52, useMemo as useMemo92 } from "react";
-import { Internals as Internals42 } from "remotion";
+import { Internals as Internals41 } from "remotion";
 import { jsx as jsx173 } from "react/jsx-runtime";
 var commonPlaybackRates = [
   -4,
@@ -18090,7 +18096,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle2 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext52(Internals42.CompositionManager);
+  const { canvasContent } = useContext52(Internals41.CompositionManager);
   const isStill = useIsStill();
   const style9 = useMemo92(() => {
     return {
@@ -18142,7 +18148,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
 import { useCallback as useCallback88, useContext as useContext53, useMemo as useMemo93, useRef as useRef31, useState as useState59 } from "react";
 import ReactDOM8 from "react-dom";
-import { Internals as Internals43 } from "remotion";
+import { Internals as Internals42 } from "remotion";
 import { jsx as jsx174, jsxs as jsxs81, Fragment as Fragment23 } from "react/jsx-runtime";
 var splitButtonContainer = {
   display: "inline-flex",
@@ -18261,9 +18267,9 @@ var RenderButton = ({
       }
     };
   }, []);
-  const video = Internals43.useVideo();
+  const video = Internals42.useVideo();
   const getCurrentFrame2 = PlayerInternals14.useFrameImperative();
-  const { props } = useContext53(Internals43.EditorPropsContext);
+  const { props } = useContext53(Internals42.EditorPropsContext);
   const openServerRenderModal = useCallback88(() => {
     if (!video) {
       return null;
@@ -18552,7 +18558,7 @@ var RenderButton = ({
 
 // src/components/Timeline/TimelineZoomControls.tsx
 import { useCallback as useCallback89, useContext as useContext54 } from "react";
-import { Internals as Internals44 } from "remotion";
+import { Internals as Internals43 } from "remotion";
 
 // src/icons/minus.tsx
 import { jsx as jsx175 } from "react/jsx-runtime";
@@ -18584,7 +18590,7 @@ var iconStyle4 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext54(Internals44.CompositionManager);
+  const { canvasContent } = useContext54(Internals43.CompositionManager);
   const { setZoom, zoom: zoomMap } = useContext54(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback89(() => {
@@ -18707,9 +18713,9 @@ var padding2 = {
   width: TIMELINE_PADDING
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = useContext55(Internals45.TimelineContext);
-  const { mediaMuted } = useContext55(Internals45.MediaVolumeContext);
-  const { setMediaMuted } = useContext55(Internals45.SetMediaVolumeContext);
+  const { playbackRate, setPlaybackRate } = useContext55(Internals44.TimelineContext);
+  const { mediaMuted } = useContext55(Internals44.MediaVolumeContext);
+  const { setMediaMuted } = useContext55(Internals44.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
   const previewToolbarRef = useRef32(null);
   const leftScrollIndicatorRef = useRef32(null);
@@ -19653,7 +19659,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 
 // src/components/Timeline/Timeline.tsx
 import { useContext as useContext69, useMemo as useMemo109 } from "react";
-import { Internals as Internals54 } from "remotion";
+import { Internals as Internals53 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
 var getCascadedStart = (sequence, sequences) => {
@@ -19854,11 +19860,11 @@ import {
   useRef as useRef35,
   useState as useState65
 } from "react";
-import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
+import { Internals as Internals46, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
 import { createRef as createRef10, useContext as useContext61 } from "react";
-import { Internals as Internals46 } from "remotion";
+import { Internals as Internals45 } from "remotion";
 import { jsx as jsx185, jsxs as jsxs89, Fragment as Fragment27 } from "react/jsx-runtime";
 var areaHighlight = {
   position: "absolute",
@@ -19871,7 +19877,7 @@ var inMarkerAreaRef = createRef10();
 var outMarkerAreaRef = createRef10();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const videoConfig = Internals46.useUnsafeVideoConfig();
+  const videoConfig = Internals45.useUnsafeVideoConfig();
   const timelineWidth = useContext61(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
@@ -19967,9 +19973,9 @@ var getClientXWithScroll = (x) => {
   return x + scrollableRef.current?.scrollLeft;
 };
 var TimelineDragHandler = () => {
-  const video = Internals47.useUnsafeVideoConfig();
+  const video = Internals46.useUnsafeVideoConfig();
   const { zoom: zoomMap } = useContext63(TimelineZoomCtx);
-  const { canvasContent } = useContext63(Internals47.CompositionManager);
+  const { canvasContent } = useContext63(Internals46.CompositionManager);
   const containerStyle3 = useMemo100(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
@@ -19996,7 +20002,7 @@ var Inner2 = () => {
     shouldApplyCssTransforms: true
   });
   const { isHighestContext } = useZIndex();
-  const setFrame = Internals47.useTimelineSetFrame();
+  const setFrame = Internals46.useTimelineSetFrame();
   const [inOutDragging, setInOutDragging] = useState65({
     dragging: false
   });
@@ -20211,7 +20217,7 @@ var Inner2 = () => {
     });
     setFrame((c) => {
       const newObj = { ...c, [videoConfig.id]: frame2 };
-      Internals47.persistCurrentFrame(newObj);
+      Internals46.persistCurrentFrame(newObj);
       return newObj;
     });
     if (dragging.wasPlaying) {
@@ -20386,7 +20392,7 @@ import { useRef as useRef38 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import { useCallback as useCallback97, useContext as useContext65, useMemo as useMemo102 } from "react";
-import { Internals as Internals48 } from "remotion";
+import { Internals as Internals47 } from "remotion";
 
 // src/components/Timeline/TimelineLayerEye.tsx
 import { useCallback as useCallback95 } from "react";
@@ -20649,7 +20655,7 @@ var space = {
   flexShrink: 0
 };
 var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-  const { hidden, setHidden } = useContext65(Internals48.SequenceVisibilityToggleContext);
+  const { hidden, setHidden } = useContext65(Internals47.SequenceVisibilityToggleContext);
   const padder = useMemo102(() => {
     return {
       width: Number(SPACING * 1.5) * nestedDepth,
@@ -20705,7 +20711,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
 import { useContext as useContext66, useEffect as useEffect66, useMemo as useMemo103, useRef as useRef37 } from "react";
-import { Internals as Internals50 } from "remotion";
+import { Internals as Internals49 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
@@ -20715,7 +20721,7 @@ import {
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef36
 } from "react";
-import { Internals as Internals49, useCurrentFrame } from "remotion";
+import { Internals as Internals48, useCurrentFrame } from "remotion";
 import { jsx as jsx191, jsxs as jsxs93 } from "react/jsx-runtime";
 var text = {
   color: "white",
@@ -20744,7 +20750,7 @@ var frameStyle = {
 };
 var TimeValue = () => {
   const frame2 = useCurrentFrame();
-  const config = Internals49.useUnsafeVideoConfig();
+  const config = Internals48.useUnsafeVideoConfig();
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
@@ -20755,7 +20761,7 @@ var TimeValue = () => {
   const onValueChange = useCallback98((val) => {
     seek(val);
   }, [seek]);
-  useImperativeHandle13(Internals49.timeValueRef, () => ({
+  useImperativeHandle13(Internals48.timeValueRef, () => ({
     goToFrame: () => {
       ref.current?.click();
     },
@@ -20862,7 +20868,7 @@ var TimelineTimePadding = () => {
 };
 var TimelineTimeIndicators = () => {
   const sliderTrack = useContext66(TimelineWidthContext);
-  const video = Internals50.useVideo();
+  const video = Internals49.useVideo();
   if (sliderTrack === null) {
     return null;
   }
@@ -20985,13 +20991,13 @@ var TimelineList = ({ timeline }) => {
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
 import { useContext as useContext67, useEffect as useEffect67 } from "react";
-import { Internals as Internals51 } from "remotion";
+import { Internals as Internals50 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
-  const video = Internals51.useVideo();
-  const timelineContext = useContext67(Internals51.TimelineContext);
-  const timelinePosition = Internals51.Timeline.useTimelinePosition();
-  const { canvasContent } = useContext67(Internals51.CompositionManager);
+  const video = Internals50.useVideo();
+  const timelineContext = useContext67(Internals50.TimelineContext);
+  const timelinePosition = Internals50.Timeline.useTimelinePosition();
+  const { canvasContent } = useContext67(Internals50.CompositionManager);
   const { zoom: zoomMap } = useContext67(TimelineZoomCtx);
   const compositionId = canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const zoom = compositionId ? zoomMap[compositionId] ?? TIMELINE_MIN_ZOOM : null;
@@ -21082,7 +21088,7 @@ import { useMemo as useMemo108 } from "react";
 
 // src/components/Timeline/TimelineSequence.tsx
 import { useContext as useContext68, useMemo as useMemo107 } from "react";
-import { Internals as Internals53, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { Internals as Internals52, useCurrentFrame as useCurrentFrame2 } from "remotion";
 
 // src/helpers/get-timeline-sequence-layout.ts
 var SEQUENCE_BORDER_WIDTH = 1;
@@ -36063,7 +36069,7 @@ var useMaxMediaDuration = (s, fps) => {
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
 import { useEffect as useEffect69, useMemo as useMemo106, useRef as useRef39, useState as useState68 } from "react";
-import { Internals as Internals52 } from "remotion";
+import { Internals as Internals51 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
 import { useMemo as useMemo105 } from "react";
@@ -36122,7 +36128,7 @@ var AudioWaveform = ({
   const [metadata, setMetadata] = useState68(null);
   const [error, setError] = useState68(null);
   const mountState = useRef39({ isMounted: true });
-  const vidConf = Internals52.useUnsafeVideoConfig();
+  const vidConf = Internals51.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
@@ -36800,7 +36806,7 @@ var TimelineSequence = ({ s }) => {
   });
 };
 var Inner4 = ({ s, windowWidth }) => {
-  const video = Internals53.useVideo();
+  const video = Internals52.useVideo();
   const maxMediaDuration = useMaxMediaDuration(s, video?.fps ?? 30);
   if (!video) {
     throw new TypeError("Expected video config");
@@ -36977,8 +36983,8 @@ var noop3 = () => {
   return;
 };
 var Timeline = () => {
-  const { sequences } = useContext69(Internals54.SequenceManager);
-  const videoConfig = Internals54.useUnsafeVideoConfig();
+  const { sequences } = useContext69(Internals53.SequenceManager);
+  const videoConfig = Internals53.useUnsafeVideoConfig();
   const timeline = useMemo109(() => {
     if (!videoConfig) {
       return [];
@@ -37071,7 +37077,7 @@ var container45 = {
 };
 var EditorContent = ({ readOnlyStudio, children }) => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext70(Internals55.CompositionManager);
+  const { canvasContent } = useContext70(Internals54.CompositionManager);
   const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== "composition";
   return /* @__PURE__ */ jsxs101("div", {
     style: container45,
@@ -37518,7 +37524,7 @@ import { useCallback as useCallback102, useContext as useContext76, useMemo as u
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
 import React145, { useContext as useContext74, useEffect as useEffect73, useMemo as useMemo111 } from "react";
-import { Internals as Internals56 } from "remotion";
+import { Internals as Internals55 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs104 } from "react/jsx-runtime";
 var loaderContainer2 = {
   paddingTop: 40,
@@ -37538,11 +37544,11 @@ var loaderLabel2 = {
 };
 var ResolvedCompositionContext = React145.createContext(null);
 var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
-  const resolved = Internals56.useResolvedVideoConfig(compositionId);
-  const unresolvedContext = useContext74(Internals56.CompositionManager);
+  const resolved = Internals55.useResolvedVideoConfig(compositionId);
+  const unresolvedContext = useContext74(Internals55.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
   useEffect73(() => {
-    const { current } = Internals56.resolveCompositionsRef;
+    const { current } = Internals55.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
     }
@@ -37857,13 +37863,13 @@ var DeleteComposition = ({ compositionId }) => {
 
 // src/components/NewComposition/DuplicateComposition.tsx
 import { useCallback as useCallback104, useContext as useContext77, useMemo as useMemo113, useState as useState71 } from "react";
-import { Internals as Internals58 } from "remotion";
+import { Internals as Internals57 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
-import { Internals as Internals57 } from "remotion";
+import { Internals as Internals56 } from "remotion";
 var validateCompositionName = (compName, compositions) => {
-  if (!Internals57.isCompositionIdValid(compName)) {
-    return Internals57.invalidCompositionErrorMessage;
+  if (!Internals56.isCompositionIdValid(compName)) {
+    return Internals56.invalidCompositionErrorMessage;
   }
   if (compositions.find((c) => c.id === compName)) {
     return `A composition with that name already exists.`;
@@ -37972,7 +37978,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
   const [selectedFrameRate, setFrameRate] = useState71(resolved.result.fps);
-  const { compositions } = useContext77(Internals58.CompositionManager);
+  const { compositions } = useContext77(Internals57.CompositionManager);
   const [type, setType] = useState71(initialCompType);
   const [newId, setName] = useState71(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
@@ -38316,7 +38322,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 
 // src/components/NewComposition/RenameComposition.tsx
 import { useCallback as useCallback105, useContext as useContext78, useMemo as useMemo114, useState as useState72 } from "react";
-import { Internals as Internals59 } from "remotion";
+import { Internals as Internals58 } from "remotion";
 import { jsx as jsx216, jsxs as jsxs110, Fragment as Fragment33 } from "react/jsx-runtime";
 var content5 = {
   padding: 12,
@@ -38331,7 +38337,7 @@ var RenameCompositionLoaded = () => {
     throw new Error("Resolved composition context");
   }
   const { resolved } = context;
-  const { compositions } = useContext78(Internals59.CompositionManager);
+  const { compositions } = useContext78(Internals58.CompositionManager);
   const [newId, setName] = useState72(() => {
     return resolved.result.id;
   });
@@ -38426,7 +38432,7 @@ var RenameComposition = ({ compositionId }) => {
 
 // src/components/OverrideInputProps.tsx
 import { useCallback as useCallback106, useContext as useContext79, useMemo as useMemo115, useState as useState73 } from "react";
-import { Internals as Internals60 } from "remotion";
+import { Internals as Internals59 } from "remotion";
 import { jsx as jsx217, jsxs as jsxs111 } from "react/jsx-runtime";
 var style11 = {
   padding: 12,
@@ -38462,7 +38468,7 @@ var isValidJSON = (value) => {
 };
 var Inner5 = () => {
   const [value, setValue] = useState73(() => {
-    const override = Internals60.getInputPropsOverride();
+    const override = Internals59.getInputPropsOverride();
     if (override) {
       return JSON.stringify(override, null, 2);
     }
@@ -38477,14 +38483,14 @@ var Inner5 = () => {
   const onChange = useCallback106((newValue) => {
     if (newValue.trim() === "") {
       setValue(null);
-      Internals60.setInputPropsOverride(null);
+      Internals59.setInputPropsOverride(null);
       return;
     }
     setValue(newValue);
     if (!isValidJSON(newValue)) {
       return;
     }
-    Internals60.setInputPropsOverride(JSON.parse(newValue));
+    Internals59.setInputPropsOverride(JSON.parse(newValue));
   }, [setValue]);
   const onReset = useCallback106(() => {
     onChange("");
@@ -38555,7 +38561,7 @@ import {
   useRef as useRef42,
   useState as useState75
 } from "react";
-import { Internals as Internals61 } from "remotion";
+import { Internals as Internals60 } from "remotion";
 
 // src/icons/keys.tsx
 import { jsx as jsx218 } from "react/jsx-runtime";
@@ -39620,7 +39626,7 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext80(Internals61.CompositionManager);
+  const { compositions } = useContext80(Internals60.CompositionManager);
   const [state, setState] = useState75(() => {
     return {
       query: mapModeToQuery(initialMode),
@@ -39668,7 +39674,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
           selectComposition(c, true);
           setSelectedModal(null);
           const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-          Internals61.compositionSelectorRef.current?.expandComposition(c.id);
+          Internals60.compositionSelectorRef.current?.expandComposition(c.id);
           waitForElm(selector).then(() => {
             document.querySelector(selector)?.scrollIntoView({ block: "center" });
           });
@@ -46706,13 +46712,13 @@ var Editor = ({ Root, readOnlyStudio }) => {
     onOutsideClick: noop,
     children: /* @__PURE__ */ jsxs149(TimelineZoomContext, {
       children: [
-        /* @__PURE__ */ jsx274(Internals62.CurrentScaleContext.Provider, {
+        /* @__PURE__ */ jsx274(Internals61.CurrentScaleContext.Provider, {
           value,
           children: /* @__PURE__ */ jsxs149("div", {
             style: background2,
             children: [
               canvasMounted ? /* @__PURE__ */ jsx274(MemoRoot, {}) : null,
-              /* @__PURE__ */ jsxs149(Internals62.CanUseRemotionHooksProvider, {
+              /* @__PURE__ */ jsxs149(Internals61.CanUseRemotionHooksProvider, {
                 children: [
                   /* @__PURE__ */ jsx274(EditorContent, {
                     readOnlyStudio,
@@ -46743,7 +46749,7 @@ import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
 import { useCallback as useCallback136, useContext as useContext86, useMemo as useMemo137, useState as useState88 } from "react";
-import { Internals as Internals63 } from "remotion";
+import { Internals as Internals62 } from "remotion";
 import { jsx as jsx275 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
@@ -46792,7 +46798,7 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return /* @__PURE__ */ jsx275(Internals63.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx275(Internals62.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
@@ -46824,7 +46830,7 @@ var CheckerboardProvider = ({ children }) => {
 
 // src/components/MediaVolumeProvider.tsx
 import { useMemo as useMemo139, useState as useState90 } from "react";
-import { Internals as Internals64 } from "remotion";
+import { Internals as Internals63 } from "remotion";
 import { jsx as jsx277 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState90(() => loadMuteOption());
@@ -46841,9 +46847,9 @@ var MediaVolumeProvider = ({ children }) => {
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx277(Internals64.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx277(Internals63.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx277(Internals64.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx277(Internals63.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -47259,8 +47265,35 @@ var ServerDisconnected = () => {
   });
 };
 
+// src/FastRefreshProvider.tsx
+import { useCallback as useCallback142, useEffect as useEffect87, useMemo as useMemo145, useState as useState96 } from "react";
+import { jsx as jsx285 } from "react/jsx-runtime";
+var FastRefreshProvider = ({ children }) => {
+  const [fastRefreshes, setFastRefreshes] = useState96(0);
+  const [manualRefreshes, setManualRefreshes] = useState96(0);
+  const increaseManualRefreshes = useCallback142(() => {
+    setManualRefreshes((i) => i + 1);
+  }, []);
+  useEffect87(() => {
+    if (typeof __webpack_module__ !== "undefined") {
+      if (__webpack_module__.hot) {
+        __webpack_module__.hot.addStatusHandler((status) => {
+          if (status === "idle") {
+            setFastRefreshes((i) => i + 1);
+          }
+        });
+      }
+    }
+  }, []);
+  const value = useMemo145(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  return /* @__PURE__ */ jsx285(FastRefreshContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/helpers/inject-css.ts
-import { Internals as Internals65 } from "remotion";
+import { Internals as Internals64 } from "remotion";
 var makeDefaultGlobalCSS = () => {
   const unhoveredDragAreaFactor = 2;
   const fromMiddle = 50 / unhoveredDragAreaFactor;
@@ -47411,46 +47444,320 @@ var injectCSS = () => {
   if (injected) {
     return;
   }
-  Internals65.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+  Internals64.CSSUtils.injectCSS(makeDefaultGlobalCSS());
   injected = true;
 };
 
+// src/ResolveCompositionConfigInStudio.tsx
+import {
+  useCallback as useCallback143,
+  useContext as useContext89,
+  useEffect as useEffect88,
+  useImperativeHandle as useImperativeHandle14,
+  useMemo as useMemo146,
+  useState as useState97
+} from "react";
+import { getInputProps as getInputProps2, Internals as Internals65 } from "remotion";
+import { jsx as jsx286 } from "react/jsx-runtime";
+var ResolveCompositionConfigInStudio = ({ children }) => {
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState97(null);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext89(Internals65.CompositionManager);
+  const { fastRefreshes, manualRefreshes } = useContext89(FastRefreshContext);
+  if (manualRefreshes) {}
+  const selectedComposition = useMemo146(() => {
+    return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
+  }, [canvasContent, compositions]);
+  const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
+  const { props: allEditorProps } = useContext89(Internals65.EditorPropsContext);
+  const env = Internals65.getRemotionEnvironment();
+  const inputProps = useMemo146(() => {
+    return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
+  }, [env.isPlayer]);
+  const [resolvedConfigs, setResolvedConfigs] = useState97({});
+  const selectedEditorProps = useMemo146(() => {
+    return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
+  }, [allEditorProps, selectedComposition]);
+  const renderModalProps = useMemo146(() => {
+    return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
+  }, [allEditorProps, renderModalComposition]);
+  const hasResolution = Boolean(currentCompositionMetadata);
+  const doResolution = useCallback143(({
+    calculateMetadata,
+    combinedProps,
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionId,
+    compositionWidth,
+    defaultProps
+  }) => {
+    const controller = new AbortController;
+    if (hasResolution) {
+      return controller;
+    }
+    const { signal } = controller;
+    const result = Internals65.resolveVideoConfigOrCatch({
+      compositionId,
+      calculateMetadata,
+      inputProps: combinedProps,
+      signal,
+      defaultProps,
+      compositionDurationInFrames,
+      compositionFps,
+      compositionHeight,
+      compositionWidth
+    });
+    if (result.type === "error") {
+      setResolvedConfigs((r) => ({
+        ...r,
+        [compositionId]: {
+          type: "error",
+          error: result.error
+        }
+      }));
+      return controller;
+    }
+    const promOrNot = result.result;
+    if (typeof promOrNot === "object" && "then" in promOrNot) {
+      setResolvedConfigs((r) => {
+        const prev = r[compositionId];
+        if (prev?.type === "success" || prev?.type === "success-and-refreshing") {
+          return {
+            ...r,
+            [compositionId]: {
+              type: "success-and-refreshing",
+              result: prev.result
+            }
+          };
+        }
+        return {
+          ...r,
+          [compositionId]: {
+            type: "loading"
+          }
+        };
+      });
+      promOrNot.then((c) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setResolvedConfigs((r) => ({
+          ...r,
+          [compositionId]: {
+            type: "success",
+            result: c
+          }
+        }));
+      }).catch((err) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setResolvedConfigs((r) => ({
+          ...r,
+          [compositionId]: {
+            type: "error",
+            error: err
+          }
+        }));
+      });
+    } else {
+      setResolvedConfigs((r) => ({
+        ...r,
+        [compositionId]: {
+          type: "success",
+          result: promOrNot
+        }
+      }));
+    }
+    return controller;
+  }, [hasResolution]);
+  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
+  useImperativeHandle14(Internals65.resolveCompositionsRef, () => {
+    return {
+      setCurrentRenderModalComposition: (id) => {
+        setCurrentRenderModalComposition(id);
+      },
+      reloadCurrentlySelectedComposition: () => {
+        if (!currentComposition) {
+          return;
+        }
+        const composition = compositions.find((c) => c.id === currentComposition);
+        if (!composition) {
+          throw new Error(`Could not find composition with id ${currentComposition}`);
+        }
+        const editorProps = allEditorProps[currentComposition] ?? {};
+        const defaultProps = {
+          ...composition.defaultProps ?? {},
+          ...editorProps ?? {}
+        };
+        const props = {
+          ...defaultProps,
+          ...inputProps ?? {}
+        };
+        doResolution({
+          defaultProps,
+          calculateMetadata: composition.calculateMetadata,
+          combinedProps: props,
+          compositionDurationInFrames: composition.durationInFrames ?? null,
+          compositionFps: composition.fps ?? null,
+          compositionHeight: composition.height ?? null,
+          compositionWidth: composition.width ?? null,
+          compositionId: composition.id
+        });
+      }
+    };
+  }, [
+    allEditorProps,
+    compositions,
+    currentComposition,
+    doResolution,
+    inputProps
+  ]);
+  const isTheSame = selectedComposition?.id === renderModalComposition?.id;
+  const currentDefaultProps = useMemo146(() => {
+    return {
+      ...selectedComposition?.defaultProps ?? {},
+      ...selectedEditorProps ?? {}
+    };
+  }, [selectedComposition?.defaultProps, selectedEditorProps]);
+  const originalProps = useMemo146(() => {
+    return {
+      ...currentDefaultProps,
+      ...inputProps ?? {}
+    };
+  }, [currentDefaultProps, inputProps]);
+  const canResolve = selectedComposition && Boolean(selectedComposition.calculateMetadata);
+  const shouldIgnoreUpdate = typeof window !== "undefined" && window.remotion_ignoreFastRefreshUpdate && fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
+  useEffect88(() => {
+    if (shouldIgnoreUpdate) {
+      return;
+    }
+    if (canResolve) {
+      const controller = doResolution({
+        calculateMetadata: selectedComposition.calculateMetadata,
+        combinedProps: originalProps,
+        compositionDurationInFrames: selectedComposition.durationInFrames ?? null,
+        compositionFps: selectedComposition.fps ?? null,
+        compositionHeight: selectedComposition.height ?? null,
+        compositionWidth: selectedComposition.width ?? null,
+        defaultProps: currentDefaultProps,
+        compositionId: selectedComposition.id
+      });
+      return () => {
+        controller.abort();
+      };
+    }
+  }, [
+    canResolve,
+    currentDefaultProps,
+    doResolution,
+    originalProps,
+    selectedComposition?.calculateMetadata,
+    selectedComposition?.durationInFrames,
+    selectedComposition?.fps,
+    selectedComposition?.height,
+    selectedComposition?.id,
+    selectedComposition?.width,
+    shouldIgnoreUpdate
+  ]);
+  useEffect88(() => {
+    if (renderModalComposition && !isTheSame) {
+      const combinedProps = {
+        ...renderModalComposition.defaultProps ?? {},
+        ...renderModalProps ?? {},
+        ...inputProps ?? {}
+      };
+      const controller = doResolution({
+        calculateMetadata: renderModalComposition.calculateMetadata,
+        compositionDurationInFrames: renderModalComposition.durationInFrames ?? null,
+        compositionFps: renderModalComposition.fps ?? null,
+        compositionHeight: renderModalComposition.height ?? null,
+        compositionId: renderModalComposition.id,
+        compositionWidth: renderModalComposition.width ?? null,
+        defaultProps: currentDefaultProps,
+        combinedProps
+      });
+      return () => {
+        controller.abort();
+      };
+    }
+  }, [
+    currentDefaultProps,
+    doResolution,
+    inputProps,
+    isTheSame,
+    renderModalComposition,
+    renderModalProps
+  ]);
+  const resolvedConfigsIncludingStaticOnes = useMemo146(() => {
+    const staticComps = compositions.filter((c) => {
+      return c.calculateMetadata === null;
+    });
+    return {
+      ...resolvedConfigs,
+      ...staticComps.reduce((acc, curr) => {
+        return {
+          ...acc,
+          [curr.id]: {
+            type: "success",
+            result: { ...curr, defaultProps: curr.defaultProps ?? {} }
+          }
+        };
+      }, {})
+    };
+  }, [compositions, resolvedConfigs]);
+  return /* @__PURE__ */ jsx286(Internals65.ResolveCompositionContext.Provider, {
+    value: resolvedConfigsIncludingStaticOnes,
+    children
+  });
+};
+
 // src/Studio.tsx
-import { jsx as jsx285, jsxs as jsxs152 } from "react/jsx-runtime";
+import { jsx as jsx287, jsxs as jsxs152 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
-var Studio = ({ rootComponent, readOnly }) => {
-  useLayoutEffect2(() => {
-    injectCSS();
-  }, []);
-  return /* @__PURE__ */ jsx285(Internals66.CompositionManagerProvider, {
+var StudioInner = ({ rootComponent, readOnly }) => {
+  const { fastRefreshes, manualRefreshes } = useContext90(FastRefreshContext);
+  return /* @__PURE__ */ jsx287(Internals66.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx285(Internals66.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx287(Internals66.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel,
       numberOfAudioTags: window.remotion_numberOfAudioTags,
       audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-      children: /* @__PURE__ */ jsx285(Internals66.ResolveCompositionConfigInStudio, {
+      nonceContextSeed: fastRefreshes + manualRefreshes,
+      children: /* @__PURE__ */ jsx287(ResolveCompositionConfigInStudio, {
         children: /* @__PURE__ */ jsxs152(EditorContexts, {
           readOnlyStudio: readOnly,
           children: [
-            /* @__PURE__ */ jsx285(Editor, {
+            /* @__PURE__ */ jsx287(Editor, {
               readOnlyStudio: readOnly,
               Root: rootComponent
             }),
-            readOnly ? null : createPortal(/* @__PURE__ */ jsx285(ServerDisconnected, {}), getServerDisconnectedDomElement())
+            readOnly ? null : createPortal(/* @__PURE__ */ jsx287(ServerDisconnected, {}), getServerDisconnectedDomElement())
           ]
         })
       })
     })
   });
 };
+var Studio = ({ rootComponent, readOnly }) => {
+  useLayoutEffect2(() => {
+    injectCSS();
+  }, []);
+  return /* @__PURE__ */ jsx287(FastRefreshProvider, {
+    children: /* @__PURE__ */ jsx287(StudioInner, {
+      rootComponent,
+      readOnly
+    })
+  });
+};
 
 // src/internals.ts
 var StudioInternals = {