@remotion/studio 4.0.451 → 4.0.453

package/dist/esm/{chunk-v2r2309d.js → chunk-hn4803e7.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-6jf1natv.js";
 
 // src/Studio.tsx
-import { useLayoutEffect as useLayoutEffect6 } from "react";
+import { useLayoutEffect as useLayoutEffect5 } from "react";
 import { createPortal } from "react-dom";
 import { Internals as Internals70 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React187, { useCallback as useCallback149, useMemo as useMemo151, useState as useState98 } from "react";
+import React187, { useCallback as useCallback149, useMemo as useMemo151, useState as useState97 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/colors.ts
@@ -65,7 +65,7 @@ var canvasRef = createRef();
 var drawRef = createRef();
 
 // src/state/timeline-zoom.tsx
-import { createContext as createContext2, useCallback, useMemo, useState as useState2 } from "react";
+import { createContext as createContext2, useCallback, useMemo, useState } from "react";
 
 // src/components/Timeline/imperative-state.ts
 var currentFrame = 0;
@@ -161,10 +161,10 @@ var timelineVerticalScroll = React.createRef();
 // src/components/Timeline/TimelineSlider.tsx
 import {
   createRef as createRef2,
-  useContext as useContext2,
+  useContext,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect,
   useRef
 } from "react";
 import { Internals, useVideoConfig } from "remotion";
@@ -199,7 +199,7 @@ var TimelineSliderHandle = () => {
 
 // src/components/Timeline/TimelineWidthProvider.tsx
 import { PlayerInternals } from "@remotion/player";
-import { createContext, useContext, useLayoutEffect, useState } from "react";
+import { createContext } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TimelineWidthContext = createContext(null);
 var TimelineWidthProvider = ({ children }) => {
@@ -207,19 +207,8 @@ var TimelineWidthProvider = ({ children }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  const { zoom: zoomMap } = useContext(TimelineZoomCtx);
-  const [widthOverride, setWidthOverride] = useState(null);
-  const observedWidth = size?.width ?? null;
-  useLayoutEffect(() => {
-    const actual = sliderAreaRef.current?.clientWidth ?? null;
-    if (actual !== null && actual !== observedWidth) {
-      setWidthOverride(actual);
-    } else {
-      setWidthOverride(null);
-    }
-  }, [observedWidth, zoomMap]);
   return /* @__PURE__ */ jsx2(TimelineWidthContext.Provider, {
-    value: widthOverride ?? observedWidth,
+    value: size?.width ?? null,
     children
   });
 };
@@ -241,7 +230,7 @@ var line = {
 var redrawTimelineSliderFast = createRef2();
 var TimelineSlider = () => {
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const timelineWidth = useContext2(TimelineWidthContext);
+  const timelineWidth = useContext(TimelineWidthContext);
   if (videoConfig === null || timelineWidth === null) {
     return null;
   }
@@ -251,14 +240,14 @@ var Inner = () => {
   const videoConfig = useVideoConfig();
   const timelinePosition = Internals.Timeline.useTimelinePosition();
   const ref = useRef(null);
-  const timelineWidth = useContext2(TimelineWidthContext);
-  const { zoom: zoomMap } = useContext2(TimelineZoomCtx);
-  const { canvasContent } = useContext2(Internals.CompositionManager);
+  const timelineWidth = useContext(TimelineWidthContext);
+  const { zoom: zoomMap } = useContext(TimelineZoomCtx);
+  const { canvasContent } = useContext(Internals.CompositionManager);
   if (timelineWidth === null) {
     throw new Error("Unexpectedly did not have timeline width");
   }
   const zoomLevel = canvasContent?.type === "composition" ? zoomMap[canvasContent.compositionId] ?? TIMELINE_MIN_ZOOM : TIMELINE_MIN_ZOOM;
-  useLayoutEffect2(() => {
+  useLayoutEffect(() => {
     const el = ref.current;
     const measuredWidth = sliderAreaRef.current?.clientWidth;
     if (!el || measuredWidth === undefined || measuredWidth === 0) {
@@ -533,7 +522,7 @@ var zoomAndPreserveCursor = ({
 };
 
 // src/components/ZoomPersistor.tsx
-import { useContext as useContext3, useEffect as useEffect2 } from "react";
+import { useContext as useContext2, useEffect as useEffect2 } from "react";
 import { Internals as Internals2 } from "remotion";
 
 // src/helpers/url-state.ts
@@ -602,8 +591,8 @@ var getZoomFromLocalStorage = () => {
 };
 var ZoomPersistor = () => {
   const [playing] = Internals2.Timeline.usePlayingState();
-  const { zoom } = useContext3(TimelineZoomCtx);
-  const { canvasContent } = useContext3(Internals2.CompositionManager);
+  const { zoom } = useContext2(TimelineZoomCtx);
+  const { canvasContent } = useContext2(Internals2.CompositionManager);
   const urlState = deriveCanvasContentFromUrl();
   const isActive = urlState && urlState.type === "composition" && canvasContent && canvasContent.type === "composition" && urlState.compositionId === canvasContent.compositionId;
   useEffect2(() => {
@@ -626,7 +615,7 @@ var TimelineZoomCtx = createContext2({
   }
 });
 var TimelineZoomContext = ({ children }) => {
-  const [zoom, setZoomState] = useState2(() => getZoomFromLocalStorage());
+  const [zoom, setZoomState] = useState(() => getZoomFromLocalStorage());
   const setZoom = useCallback((compositionId, callback, options) => {
     setZoomState((prevZoomMap) => {
       const newZoomWithFloatingPointErrors = Math.min(TIMELINE_MAX_ZOOM, Math.max(TIMELINE_MIN_ZOOM, callback(prevZoomMap[compositionId] ?? TIMELINE_MIN_ZOOM)));
@@ -659,14 +648,14 @@ var TimelineZoomContext = ({ children }) => {
 // src/state/z-index.tsx
 import {
   createContext as createContext5,
-  useContext as useContext5,
+  useContext as useContext4,
   useEffect as useEffect4,
   useMemo as useMemo5,
   useRef as useRef3
 } from "react";
 
 // src/helpers/use-keybinding.ts
-import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/state/keybindings.tsx
 import { createContext as createContext3, useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2 } from "react";
@@ -724,8 +713,8 @@ var areKeyboardShortcutsDisabled = () => {
   return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
 };
 var useKeybinding = () => {
-  const [paneId] = useState3(() => String(Math.random()));
-  const context = useContext4(KeybindingContext);
+  const [paneId] = useState2(() => String(Math.random()));
+  const context = useContext3(KeybindingContext);
   const { isHighestContext } = useZIndex();
   const registerKeybinding = useCallback3((options) => {
     if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
@@ -784,7 +773,7 @@ var useKeybinding = () => {
 };
 
 // src/state/highest-z-index.tsx
-import { createContext as createContext4, useCallback as useCallback4, useMemo as useMemo4, useState as useState4 } from "react";
+import { createContext as createContext4, useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var HighestZIndexContext = createContext4({
   highestIndex: 0,
@@ -796,7 +785,7 @@ var HighestZIndexContext = createContext4({
   }
 });
 var HighestZIndexProvider = ({ children }) => {
-  const [zIndexes, setZIndexes] = useState4([]);
+  const [zIndexes, setZIndexes] = useState3([]);
   const registerZIndex = useCallback4((newIndex) => {
     setZIndexes((prev) => [...prev, newIndex]);
   }, []);
@@ -857,8 +846,8 @@ var EscapeHook = ({ onEscape }) => {
   return null;
 };
 var HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
-  const context = useContext5(ZIndexContext);
-  const highestContext = useContext5(HighestZIndexContext);
+  const context = useContext4(ZIndexContext);
+  const highestContext = useContext4(HighestZIndexContext);
   const containerRef = useRef3(null);
   const currentIndex = disabled ? context.currentIndex : context.currentIndex + 1;
   useEffect4(() => {
@@ -917,8 +906,8 @@ var HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
   });
 };
 var useZIndex = () => {
-  const context = useContext5(ZIndexContext);
-  const highestContext = useContext5(HighestZIndexContext);
+  const context = useContext4(ZIndexContext);
+  const highestContext = useContext4(HighestZIndexContext);
   const isHighestContext = highestContext.highestIndex === context.currentIndex;
   return useMemo5(() => ({
     currentZIndex: context.currentIndex,
@@ -929,11 +918,11 @@ var useZIndex = () => {
 };
 
 // src/components/EditorContent.tsx
-import { useContext as useContext81 } from "react";
+import { useContext as useContext80 } from "react";
 import { Internals as Internals58 } from "remotion";
 
 // src/helpers/is-current-selected-still.ts
-import { useContext as useContext6 } from "react";
+import { useContext as useContext5 } from "react";
 import { Internals as Internals3 } from "remotion";
 
 // src/helpers/is-composition-still.ts
@@ -954,7 +943,7 @@ var useIsStill = () => {
 };
 var useIsVideoComposition = () => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext6(Internals3.CompositionManager);
+  const { canvasContent } = useContext5(Internals3.CompositionManager);
   if (canvasContent === null) {
     return false;
   }
@@ -965,17 +954,17 @@ var useIsVideoComposition = () => {
 };
 
 // src/components/InitialCompositionLoader.tsx
-import { useCallback as useCallback24, useContext as useContext16, useEffect as useEffect15 } from "react";
+import { useCallback as useCallback24, useContext as useContext15, useEffect as useEffect15 } from "react";
 import { Internals as Internals12 } from "remotion";
 
 // src/helpers/mobile-layout.ts
-import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState4 } from "react";
 var breakpoint = 900;
 function getIsMobile() {
   return window.innerWidth < breakpoint;
 }
 var useMobileLayout = () => {
-  const [isMobile, setIsMobile] = useState5(getIsMobile());
+  const [isMobile, setIsMobile] = useState4(getIsMobile());
   const isMobileRef = useRef4(isMobile);
   useEffect5(() => {
     function handleResize() {
@@ -993,7 +982,7 @@ var useMobileLayout = () => {
 };
 
 // src/state/folders.tsx
-import { createContext as createContext7, useMemo as useMemo6, useState as useState6 } from "react";
+import { createContext as createContext7, useMemo as useMemo6, useState as useState5 } from "react";
 
 // src/helpers/persist-open-folders.tsx
 import { createContext as createContext6 } from "react";
@@ -1033,8 +1022,8 @@ var FolderContext = createContext7({
   }
 });
 var FolderContextProvider = ({ children }) => {
-  const [compositionFoldersExpanded, setCompositionFoldersExpanded] = useState6(() => loadExpandedFolders("compositions"));
-  const [assetFoldersExpanded, setAssetFoldersExpanded] = useState6(() => loadExpandedFolders("assets"));
+  const [compositionFoldersExpanded, setCompositionFoldersExpanded] = useState5(() => loadExpandedFolders("compositions"));
+  const [assetFoldersExpanded, setAssetFoldersExpanded] = useState5(() => loadExpandedFolders("assets"));
   const value = useMemo6(() => {
     return {
       compositionFoldersExpanded,
@@ -1050,7 +1039,7 @@ var FolderContextProvider = ({ children }) => {
 };
 
 // src/state/sidebar.tsx
-import { createContext as createContext8, useMemo as useMemo7, useState as useState7 } from "react";
+import { createContext as createContext8, useMemo as useMemo7, useState as useState6 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var storageKey = (sidebar) => {
   if (sidebar === "right") {
@@ -1093,7 +1082,7 @@ var SidebarContext = createContext8({
 });
 var SidebarContextProvider = ({ children }) => {
   const isMobileLayout = useMobileLayout();
-  const [sidebarCollapsedState, setSidebarCollapsedState] = useState7(() => ({
+  const [sidebarCollapsedState, setSidebarCollapsedState] = useState6(() => ({
     left: getSavedCollapsedStateLeft(isMobileLayout),
     right: getSavedCollapsedStateRight(isMobileLayout)
   }));
@@ -1127,7 +1116,7 @@ var SidebarContextProvider = ({ children }) => {
 };
 
 // src/components/CompositionSelector.tsx
-import { useCallback as useCallback17, useContext as useContext10, useMemo as useMemo21 } from "react";
+import { useCallback as useCallback17, useContext as useContext9, useMemo as useMemo21 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/error-overlay/remotion-overlay/ShortcutHint.tsx
@@ -1360,11 +1349,11 @@ var ModalsContext = createContext9({
 // src/components/CompositionSelectorItem.tsx
 import {
   useCallback as useCallback16,
-  useContext as useContext9,
-  useLayoutEffect as useLayoutEffect3,
+  useContext as useContext8,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo20,
   useRef as useRef11,
-  useState as useState15
+  useState as useState14
 } from "react";
 
 // src/helpers/sidebar-scroll-into-view.ts
@@ -1510,7 +1499,7 @@ var FilmIcon = ({ color, ...props }) => {
 };
 
 // src/components/CompositionContextButton.tsx
-import { useCallback as useCallback13, useContext as useContext7, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback13, useContext as useContext6, useMemo as useMemo17 } from "react";
 
 // src/helpers/client-id.tsx
 import React13, { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo10, useRef as useRef6 } from "react";
@@ -1521,7 +1510,7 @@ import {
   createRef as createRef3,
   useCallback as useCallback5,
   useImperativeHandle as useImperativeHandle2,
-  useState as useState8
+  useState as useState7
 } from "react";
 
 // src/components/Notifications/Notification.tsx
@@ -1583,7 +1572,7 @@ var showNotification = (content, durationInMs) => {
   });
 };
 var NotificationCenter = () => {
-  const [notifications, setNotifications] = useState8([]);
+  const [notifications, setNotifications] = useState7([]);
   const onRemove = useCallback5((id) => {
     setNotifications((not) => {
       return not.filter((n) => n.id !== id);
@@ -1655,7 +1644,7 @@ import React12, {
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo9,
   useRef as useRef5,
-  useState as useState9
+  useState as useState8
 } from "react";
 
 // src/components/RenderQueue/client-render-queue.ts
@@ -1725,9 +1714,9 @@ var RenderQueueContext = React12.createContext({
 });
 var renderJobsRef = createRef4();
 var RenderQueueContextProvider = ({ children }) => {
-  const [serverJobs, setServerJobs] = useState9(window.remotion_initialRenderQueue ?? []);
-  const [clientJobs, setClientJobs] = useState9(restorePersistedClientRenders);
-  const [currentlyProcessing, setCurrentlyProcessing] = useState9(null);
+  const [serverJobs, setServerJobs] = useState8(window.remotion_initialRenderQueue ?? []);
+  const [clientJobs, setClientJobs] = useState8(restorePersistedClientRenders);
+  const [currentlyProcessing, setCurrentlyProcessing] = useState8(null);
   const processJobCallbackRef = useRef5(null);
   useEffect7(() => {
     if (currentlyProcessing) {
@@ -2012,11 +2001,11 @@ var EllipsisIcon = (props) => {
 
 // src/components/InlineDropdown.tsx
 import { PlayerInternals as PlayerInternals3 } from "@remotion/player";
-import { useCallback as useCallback12, useMemo as useMemo16, useRef as useRef9, useState as useState13 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo16, useRef as useRef9, useState as useState12 } from "react";
 import ReactDOM2 from "react-dom";
 
 // src/components/InlineAction.tsx
-import { useCallback as useCallback8, useMemo as useMemo11, useState as useState10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo11, useState as useState9 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var InlineAction = ({
   renderAction,
@@ -2025,7 +2014,7 @@ var InlineAction = ({
   title
 }) => {
   const { tabIndex } = useZIndex();
-  const [hovered, setHovered] = useState10(false);
+  const [hovered, setHovered] = useState9(false);
   const onPointerEnter = useCallback8(() => {
     setHovered(true);
   }, []);
@@ -2109,7 +2098,7 @@ var inlineCodeSnippet = {
 };
 
 // src/components/NewComposition/MenuContent.tsx
-import { useCallback as useCallback11, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef8, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/Menu/is-menu-item.tsx
 var MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
@@ -2136,7 +2125,7 @@ var MenuDivider = () => {
 
 // src/components/Menu/MenuSubItem.tsx
 import { PlayerInternals as PlayerInternals2 } from "@remotion/player";
-import { useCallback as useCallback10, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef7, useState as useState10 } from "react";
 import ReactDOM from "react-dom";
 
 // src/icons/caret.tsx
@@ -2325,7 +2314,7 @@ var MenuSubItem = ({
   setSubMenuActivated,
   disabled
 }) => {
-  const [hovered, setHovered] = useState11(false);
+  const [hovered, setHovered] = useState10(false);
   const ref = useRef7(null);
   const size = PlayerInternals2.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -2494,13 +2483,13 @@ var MenuContent = ({
   const keybindings = useKeybinding();
   const containerRef = useRef8(null);
   const isMobileLayout = useMobileLayout();
-  const [subMenuActivated, setSubMenuActivated] = useState12(false);
+  const [subMenuActivated, setSubMenuActivated] = useState11(false);
   const typeaheadQueryRef = useRef8("");
   const typeaheadTimeoutRef = useRef8(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
-  const [selectedItem, setSelectedItem] = useState12(typeof preselectIndex === "number" && preselectIndex >= 0 ? values[preselectIndex].id : null);
+  const [selectedItem, setSelectedItem] = useState11(typeof preselectIndex === "number" && preselectIndex >= 0 ? values[preselectIndex].id : null);
   const onEscape = useCallback11(() => {
     onHide();
   }, [onHide]);
@@ -2798,7 +2787,7 @@ var InlineDropdown = ({
   ...props
 }) => {
   const ref = useRef9(null);
-  const [opened, setOpened] = useState13({ type: "not-open" });
+  const [opened, setOpened] = useState12({ type: "not-open" });
   const { currentZIndex } = useZIndex();
   const size = PlayerInternals3.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -2900,7 +2889,7 @@ var CompositionContextButton = ({ visible, values }) => {
       }
     };
   }, []);
-  const connectionStatus = useContext7(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext6(StudioServerConnectionCtx).previewServerState.type;
   const renderAction = useCallback13((color) => {
     return /* @__PURE__ */ jsx27(EllipsisIcon, {
       fill: color,
@@ -2918,12 +2907,12 @@ var CompositionContextButton = ({ visible, values }) => {
 
 // src/components/ContextMenu.tsx
 import { PlayerInternals as PlayerInternals4 } from "@remotion/player";
-import { useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo18, useRef as useRef10, useState as useState14 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo18, useRef as useRef10, useState as useState13 } from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx28, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
 var ContextMenu = ({ children, values }) => {
   const ref = useRef10(null);
-  const [opened, setOpened] = useState14({ type: "not-open" });
+  const [opened, setOpened] = useState13({ type: "not-open" });
   const { currentZIndex } = useZIndex();
   const style = useMemo18(() => {
     return {};
@@ -3029,7 +3018,7 @@ var ContextMenu = ({ children, values }) => {
 };
 
 // src/components/SidebarRenderButton.tsx
-import { useCallback as useCallback15, useContext as useContext8, useMemo as useMemo19 } from "react";
+import { useCallback as useCallback15, useContext as useContext7, useMemo as useMemo19 } from "react";
 import { Internals as Internals5 } from "remotion";
 
 // src/icons/render.tsx
@@ -3049,8 +3038,8 @@ var ThinRenderIcon = (props) => {
 // src/components/SidebarRenderButton.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
 var SidebarRenderButton = ({ composition, visible }) => {
-  const { setSelectedModal } = useContext8(ModalsContext);
-  const { setSidebarCollapsedState } = useContext8(SidebarContext);
+  const { setSelectedModal } = useContext7(ModalsContext);
+  const { setSidebarCollapsedState } = useContext7(SidebarContext);
   const isMobileLayout = useMobileLayout();
   const iconStyle = useMemo19(() => {
     return {
@@ -3059,8 +3048,8 @@ var SidebarRenderButton = ({ composition, visible }) => {
       }
     };
   }, []);
-  const connectionStatus = useContext8(StudioServerConnectionCtx).previewServerState.type;
-  const { props } = useContext8(Internals5.EditorPropsContext);
+  const connectionStatus = useContext7(StudioServerConnectionCtx).previewServerState.type;
+  const { props } = useContext7(Internals5.EditorPropsContext);
   const onClick = useCallback15((e) => {
     const defaults = window.remotion_renderDefaults;
     if (!defaults) {
@@ -3194,7 +3183,7 @@ var CompositionSelectorItem = ({
     }
     return false;
   }, [item, currentComposition]);
-  const [hovered, setHovered] = useState15(false);
+  const [hovered, setHovered] = useState14(false);
   const onPointerEnter = useCallback16(() => {
     setHovered(true);
   }, []);
@@ -3203,7 +3192,7 @@ var CompositionSelectorItem = ({
   }, []);
   const compositionRowRef = useRef11(null);
   const compositionId = item.type === "composition" ? item.composition.id : null;
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     if (compositionId === null) {
       return;
     }
@@ -3240,7 +3229,7 @@ var CompositionSelectorItem = ({
       onClick(evt);
     }
   }, [onClick]);
-  const { setSelectedModal } = useContext9(ModalsContext);
+  const { setSelectedModal } = useContext8(ModalsContext);
   const contextMenu = useMemo20(() => {
     if (item.type === "composition") {
       return [
@@ -3498,7 +3487,7 @@ var CurrentComposition = () => {
 // src/components/CompositionSelector.tsx
 import { jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
 var useCompositionNavigation = () => {
-  const { compositions, canvasContent } = useContext10(Internals7.CompositionManager);
+  const { compositions, canvasContent } = useContext9(Internals7.CompositionManager);
   const selectComposition = useSelectComposition();
   const navigateToNextComposition = useCallback17(() => {
     if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
@@ -3571,9 +3560,9 @@ var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
   return getKeysToExpand(name, parent, initial);
 };
 var CompositionSelector = () => {
-  const { compositions, canvasContent, folders } = useContext10(Internals7.CompositionManager);
-  const { foldersExpanded } = useContext10(ExpandedFoldersContext);
-  const { setSelectedModal } = useContext10(ModalsContext);
+  const { compositions, canvasContent, folders } = useContext9(Internals7.CompositionManager);
+  const { foldersExpanded } = useContext9(ExpandedFoldersContext);
+  const { setSelectedModal } = useContext9(ModalsContext);
   const { tabIndex } = useZIndex();
   const selectComposition = useSelectComposition();
   const sortedCompositions = useMemo21(() => {
@@ -3643,10 +3632,10 @@ var CompositionSelector = () => {
 };
 
 // src/components/ExplorerPanel.tsx
-import { createRef as createRef5, useCallback as useCallback23, useImperativeHandle as useImperativeHandle5, useState as useState22 } from "react";
+import { createRef as createRef5, useCallback as useCallback23, useImperativeHandle as useImperativeHandle5, useState as useState21 } from "react";
 
 // src/components/AssetSelector.tsx
-import { useCallback as useCallback20, useContext as useContext14, useMemo as useMemo25, useState as useState19 } from "react";
+import { useCallback as useCallback20, useContext as useContext13, useMemo as useMemo25, useState as useState18 } from "react";
 import { Internals as Internals10 } from "remotion";
 
 // src/api/write-static-file.ts
@@ -3718,11 +3707,11 @@ var use_asset_drag_events_default = useAssetDragEvents;
 // src/components/AssetSelectorItem.tsx
 import React25, {
   useCallback as useCallback19,
-  useContext as useContext11,
-  useLayoutEffect as useLayoutEffect4,
+  useContext as useContext10,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo23,
   useRef as useRef13,
-  useState as useState16
+  useState as useState15
 } from "react";
 import { Internals as Internals8 } from "remotion";
 import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
@@ -4108,7 +4097,7 @@ var AssetFolderItem = ({
   setDropLocation,
   readOnlyStudio
 }) => {
-  const [hovered, setHovered] = useState16(false);
+  const [hovered, setHovered] = useState15(false);
   const openFolderTimerRef = useRef13(null);
   const { isDropDiv, onDragEnter, onDragLeave } = use_asset_drag_events_default({
     name: item.name,
@@ -4237,13 +4226,13 @@ var AssetFolderTree = ({
 };
 var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
   const isMobileLayout = useMobileLayout();
-  const [hovered, setHovered] = useState16(false);
-  const { setSidebarCollapsedState } = useContext11(SidebarContext);
+  const [hovered, setHovered] = useState15(false);
+  const { setSidebarCollapsedState } = useContext10(SidebarContext);
   const onPointerEnter = useCallback19(() => {
     setHovered(true);
   }, []);
-  const { setCanvasContent } = useContext11(Internals8.CompositionSetters);
-  const { canvasContent } = useContext11(Internals8.CompositionManager);
+  const { setCanvasContent } = useContext10(Internals8.CompositionSetters);
+  const { canvasContent } = useContext10(Internals8.CompositionManager);
   const relativePath = useMemo23(() => {
     return parentFolder ? parentFolder + "/" + item.name : item.name;
   }, [parentFolder, item.name]);
@@ -4257,7 +4246,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     setHovered(false);
   }, []);
   const rowRef = useRef13(null);
-  useLayoutEffect4(() => {
+  useLayoutEffect3(() => {
     maybeScrollAssetSidebarRowIntoView({
       element: rowRef.current,
       assetPath: relativePath,
@@ -4374,11 +4363,11 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
 // src/components/CurrentAsset.tsx
 import { formatBytes } from "@remotion/studio-shared";
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
-import { useContext as useContext13, useEffect as useEffect14, useMemo as useMemo24, useState as useState18 } from "react";
+import { useContext as useContext12, useEffect as useEffect14, useMemo as useMemo24, useState as useState17 } from "react";
 import { Internals as Internals9, staticFile } from "remotion";
 
 // src/components/use-static-files.ts
-import React26, { createContext as createContext10, useContext as useContext12, useEffect as useEffect13, useState as useState17 } from "react";
+import React26, { createContext as createContext10, useContext as useContext11, useEffect as useEffect13, useState as useState16 } from "react";
 import { useRemotionEnvironment } from "remotion";
 
 // src/api/get-static-files.ts
@@ -4436,7 +4425,7 @@ var watchPublicFolder = (callback) => {
 // src/components/use-static-files.ts
 var StaticFilesContext = createContext10([]);
 var StaticFilesProvider = ({ children }) => {
-  const [files, setFiles] = useState17(() => getStaticFiles());
+  const [files, setFiles] = useState16(() => getStaticFiles());
   const env = useRemotionEnvironment();
   useEffect13(() => {
     if (!env.isStudio) {
@@ -4453,7 +4442,7 @@ var StaticFilesProvider = ({ children }) => {
   return React26.createElement(StaticFilesContext.Provider, { value: files }, children);
 };
 var useStaticFiles = () => {
-  return useContext12(StaticFilesContext);
+  return useContext11(StaticFilesContext);
 };
 
 // src/components/CurrentAsset.tsx
@@ -4498,7 +4487,7 @@ var formatDuration = (seconds) => {
   return `${String(m).padStart(2, "0")}:${sFixed}`;
 };
 var CurrentAsset = () => {
-  const { canvasContent } = useContext13(Internals9.CompositionManager);
+  const { canvasContent } = useContext12(Internals9.CompositionManager);
   const assetName = canvasContent?.type === "asset" ? canvasContent.asset : null;
   const staticFiles = useStaticFiles();
   const sizeInBytes = useMemo24(() => {
@@ -4508,7 +4497,7 @@ var CurrentAsset = () => {
     const file = staticFiles.find((f) => f.name === assetName);
     return file?.sizeInBytes ?? null;
   }, [assetName, staticFiles]);
-  const [mediaMetadata, setMediaMetadata] = useState18(null);
+  const [mediaMetadata, setMediaMetadata] = useState17(null);
   useEffect14(() => {
     setMediaMetadata(null);
     if (!assetName) {
@@ -4602,10 +4591,10 @@ var baseList = {
 };
 var AssetSelector = ({ readOnlyStudio }) => {
   const { tabIndex } = useZIndex();
-  const { canvasContent } = useContext14(Internals10.CompositionManager);
-  const { assetFoldersExpanded, setAssetFoldersExpanded } = useContext14(FolderContext);
-  const [dropLocation, setDropLocation] = useState19(null);
-  const connectionStatus = useContext14(StudioServerConnectionCtx).previewServerState.type;
+  const { canvasContent } = useContext13(Internals10.CompositionManager);
+  const { assetFoldersExpanded, setAssetFoldersExpanded } = useContext13(FolderContext);
+  const [dropLocation, setDropLocation] = useState18(null);
+  const connectionStatus = useContext13(StudioServerConnectionCtx).previewServerState.type;
   const shouldAllowUpload = connectionStatus === "connected" && !readOnlyStudio;
   const showCurrentAsset = canvasContent?.type === "asset";
   const list = useMemo25(() => {
@@ -4728,16 +4717,16 @@ var AssetSelector = ({ readOnlyStudio }) => {
 // src/components/CompSelectorRef.tsx
 import {
   useCallback as useCallback21,
-  useContext as useContext15,
+  useContext as useContext14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo26,
-  useState as useState20
+  useState as useState19
 } from "react";
 import { Internals as Internals11 } from "remotion";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var CompSelectorRef = ({ children }) => {
-  const { compositions } = useContext15(Internals11.CompositionManager);
-  const [foldersExpanded, setFoldersExpanded] = useState20(loadExpandedFolders("compositions"));
+  const { compositions } = useContext14(Internals11.CompositionManager);
+  const [foldersExpanded, setFoldersExpanded] = useState19(loadExpandedFolders("compositions"));
   const selectComposition = useSelectComposition();
   const toggleFolder = useCallback21((folderName, parentName) => {
     setFoldersExpanded((p) => {
@@ -4810,7 +4799,7 @@ var CompSelectorRef = ({ children }) => {
 };
 
 // src/components/Tabs/index.tsx
-import { useCallback as useCallback22, useMemo as useMemo27, useState as useState21 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo27, useState as useState20 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var tabsContainer = {
   display: "flex",
@@ -4844,7 +4833,7 @@ var selectorButton = {
   WebkitUserSelect: "none"
 };
 var Tab = ({ children, onClick, style, selected }) => {
-  const [hovered, setHovered] = useState21(false);
+  const [hovered, setHovered] = useState20(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback22(() => {
     setHovered(true);
@@ -4897,7 +4886,7 @@ var persistSelectedOptionsSidebarPanel = (panel) => {
 };
 var explorerSidebarTabs = createRef5();
 var ExplorerPanel = ({ readOnlyStudio }) => {
-  const [panel, setPanel] = useState22(() => getSelectedPanel());
+  const [panel, setPanel] = useState21(() => getSelectedPanel());
   const onCompositionsSelected = useCallback23(() => {
     setPanel("compositions");
     persistSelectedOptionsSidebarPanel("compositions");
@@ -4950,8 +4939,8 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
 
 // src/components/InitialCompositionLoader.tsx
 var useSelectAsset = () => {
-  const { setCanvasContent } = useContext16(Internals12.CompositionSetters);
-  const { setAssetFoldersExpanded } = useContext16(FolderContext);
+  const { setCanvasContent } = useContext15(Internals12.CompositionSetters);
+  const { setAssetFoldersExpanded } = useContext15(FolderContext);
   return useCallback24((asset) => {
     setCanvasContent({ type: "asset", asset });
     explorerSidebarTabs.current?.selectAssetsPanel();
@@ -4971,10 +4960,10 @@ var useSelectAsset = () => {
   }, [setAssetFoldersExpanded, setCanvasContent]);
 };
 var useSelectComposition = () => {
-  const { setCompositionFoldersExpanded } = useContext16(FolderContext);
-  const { setCanvasContent } = useContext16(Internals12.CompositionSetters);
+  const { setCompositionFoldersExpanded } = useContext15(FolderContext);
+  const { setCanvasContent } = useContext15(Internals12.CompositionSetters);
   const isMobileLayout = useMobileLayout();
-  const { setSidebarCollapsedState } = useContext16(SidebarContext);
+  const { setSidebarCollapsedState } = useContext15(SidebarContext);
   return useCallback24((c, push) => {
     if (push) {
       pushUrl(`/${c.id}`);
@@ -5005,8 +4994,8 @@ var useSelectComposition = () => {
   ]);
 };
 var InitialCompositionLoader = () => {
-  const { compositions, canvasContent } = useContext16(Internals12.CompositionManager);
-  const { setCanvasContent } = useContext16(Internals12.CompositionSetters);
+  const { compositions, canvasContent } = useContext15(Internals12.CompositionManager);
+  const { setCanvasContent } = useContext15(Internals12.CompositionSetters);
   const selectComposition = useSelectComposition();
   const selectAsset = useSelectAsset();
   const staticFiles = useStaticFiles();
@@ -5081,10 +5070,10 @@ var InitialCompositionLoader = () => {
 };
 
 // src/components/MenuToolbar.tsx
-import { useCallback as useCallback99, useMemo as useMemo105, useState as useState69 } from "react";
+import { useCallback as useCallback99, useMemo as useMemo105, useState as useState68 } from "react";
 
 // src/helpers/use-menu-structure.tsx
-import { useContext as useContext23, useMemo as useMemo42 } from "react";
+import { useContext as useContext22, useMemo as useMemo42 } from "react";
 import { Internals as Internals19 } from "remotion";
 import { NoReactInternals as NoReactInternals5 } from "remotion/no-react";
 
@@ -5107,7 +5096,7 @@ import {
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
   useRef as useRef14,
-  useState as useState23
+  useState as useState22
 } from "react";
 import { AbsoluteFill } from "remotion";
 
@@ -5154,7 +5143,7 @@ var ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
 };
 
 // src/components/ModalHeader.tsx
-import { useCallback as useCallback25, useContext as useContext17 } from "react";
+import { useCallback as useCallback25, useContext as useContext16 } from "react";
 
 // src/components/NewComposition/CancelButton.tsx
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -5205,7 +5194,7 @@ var icon = {
   width: 20
 };
 var ModalHeader = ({ title: title3, onClose }) => {
-  const { setSelectedModal } = useContext17(ModalsContext);
+  const { setSelectedModal } = useContext16(ModalsContext);
   const onPress = useCallback25(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -5236,7 +5225,7 @@ var container13 = {
 };
 var askAiModalRef = createRef6();
 var AskAiModal = () => {
-  const [state, setState] = useState23("never-opened");
+  const [state, setState] = useState22("never-opened");
   const iframe = useRef14(null);
   useImperativeHandle6(askAiModalRef, () => ({
     toggle: () => {
@@ -5303,7 +5292,7 @@ var AskAiModal = () => {
 };
 
 // src/components/SizeSelector.tsx
-import { useContext as useContext21, useMemo as useMemo39 } from "react";
+import { useContext as useContext20, useMemo as useMemo39 } from "react";
 import { Internals as Internals16 } from "remotion";
 
 // src/icons/Checkmark.tsx
@@ -5348,7 +5337,7 @@ var ControlButton = (props) => {
 
 // src/components/NewComposition/ComboBox.tsx
 import { PlayerInternals as PlayerInternals5 } from "@remotion/player";
-import { useCallback as useCallback27, useEffect as useEffect17, useMemo as useMemo29, useRef as useRef15, useState as useState24 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect17, useMemo as useMemo29, useRef as useRef15, useState as useState23 } from "react";
 import ReactDOM4 from "react-dom";
 import { jsx as jsx48, jsxs as jsxs16, Fragment as Fragment6 } from "react/jsx-runtime";
 var container14 = {
@@ -5367,8 +5356,8 @@ var label2 = {
   textAlign: "left"
 };
 var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
-  const [hovered, setIsHovered] = useState24(false);
-  const [opened, setOpened] = useState24(false);
+  const [hovered, setIsHovered] = useState23(false);
+  const [opened, setOpened] = useState23(false);
   const ref = useRef15(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size = PlayerInternals5.useElementSize(ref, {
@@ -5535,11 +5524,11 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
 
 // src/components/Preview.tsx
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
-import { useContext as useContext20, useEffect as useEffect30, useMemo as useMemo38, useRef as useRef20 } from "react";
+import { useContext as useContext19, useEffect as useEffect30, useMemo as useMemo38, useRef as useRef20 } from "react";
 import { Internals as Internals15 } from "remotion";
 
 // src/error-overlay/remotion-overlay/ErrorLoader.tsx
-import { useEffect as useEffect24, useState as useState29 } from "react";
+import { useEffect as useEffect24, useState as useState28 } from "react";
 
 // src/error-overlay/react-overlay/utils/parser.ts
 import { getLocationFromBuildError } from "@remotion/studio-shared";
@@ -5949,10 +5938,10 @@ var style3 = {
 };
 
 // src/error-overlay/remotion-overlay/CopyStackTrace.tsx
-import { useCallback as useCallback29, useEffect as useEffect19, useMemo as useMemo31, useState as useState25 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect19, useMemo as useMemo31, useState as useState24 } from "react";
 import { jsx as jsx52, jsxs as jsxs19 } from "react/jsx-runtime";
 var CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
-  const [copyState, setCopyState] = useState25("idle");
+  const [copyState, setCopyState] = useState24("idle");
   const handleCopyToClipboard = useCallback29(() => {
     navigator.clipboard.writeText(errorText).then(() => {
       setCopyState("copied");
@@ -6044,7 +6033,7 @@ var DismissButton = () => {
 
 // src/error-overlay/remotion-overlay/ErrorMessage.tsx
 import { PlayerInternals as PlayerInternals6 } from "@remotion/player";
-import { useCallback as useCallback31, useMemo as useMemo32, useRef as useRef16, useState as useState26 } from "react";
+import { useCallback as useCallback31, useMemo as useMemo32, useRef as useRef16, useState as useState25 } from "react";
 
 // src/error-overlay/remotion-overlay/carets.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
@@ -6117,7 +6106,7 @@ var moreButton = {
   color: "white"
 };
 var ErrorMessage = ({ message }) => {
-  const [expanded, setExpanded] = useState26(false);
+  const [expanded, setExpanded] = useState25(false);
   const ref = useRef16(null);
   const size2 = PlayerInternals6.useElementSize(ref, {
     shouldApplyCssTransforms: false,
@@ -6439,7 +6428,7 @@ var HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
 };
 
 // src/error-overlay/remotion-overlay/MediaPlaybackErrorExplainer.tsx
-import { useEffect as useEffect21, useState as useState27 } from "react";
+import { useEffect as useEffect21, useState as useState26 } from "react";
 import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var container16 = {
   borderRadius: 3,
@@ -6461,7 +6450,7 @@ var linkStyle = {
   color: "#58a6ff"
 };
 var MediaPlaybackErrorExplainer = ({ src }) => {
-  const [result, setResult] = useState27({ type: "loading" });
+  const [result, setResult] = useState26({ type: "loading" });
   useEffect21(() => {
     fetch(src, { method: "HEAD" }).then((res) => {
       if (res.status === 404) {
@@ -6789,7 +6778,7 @@ var SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
 };
 
 // src/error-overlay/remotion-overlay/StackFrame.tsx
-import { useCallback as useCallback35, useState as useState28 } from "react";
+import { useCallback as useCallback35, useState as useState27 } from "react";
 
 // src/error-overlay/remotion-overlay/CodeFrame.tsx
 import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -6887,7 +6876,7 @@ var fnName = {
   marginBottom: 3
 };
 var StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
-  const [showCodeFrame, setShowCodeFrame] = useState28(() => !s.originalFileName?.includes("node_modules") && !s.originalFileName?.startsWith("webpack/") || isFirst);
+  const [showCodeFrame, setShowCodeFrame] = useState27(() => !s.originalFileName?.includes("node_modules") && !s.originalFileName?.startsWith("webpack/") || isFirst);
   const toggleCodeFrame = useCallback35(() => {
     setShowCodeFrame((f) => !f);
   }, []);
@@ -7089,7 +7078,7 @@ var ErrorLoader = ({
   canHaveDismissButton,
   calculateMetadata
 }) => {
-  const [state, setState] = useState29({
+  const [state, setState] = useState28({
     type: "loading"
   });
   useEffect24(() => {
@@ -7218,7 +7207,7 @@ var CheckerboardContext = createContext11({
 });
 
 // src/components/RenderPreview.tsx
-import { useContext as useContext18, useEffect as useEffect29, useState as useState34 } from "react";
+import { useContext as useContext17, useEffect as useEffect29, useState as useState33 } from "react";
 
 // src/helpers/get-asset-metadata.ts
 import { getVideoMetadata } from "@remotion/media-utils";
@@ -7305,7 +7294,7 @@ var getAssetMetadata = async (canvasContent, addTime) => {
 import { formatBytes as formatBytes2 } from "@remotion/studio-shared";
 
 // src/components/JSONViewer.tsx
-import { useEffect as useEffect27, useState as useState32 } from "react";
+import { useEffect as useEffect27, useState as useState31 } from "react";
 
 // src/components/NewComposition/RemTextarea.tsx
 import {
@@ -7314,7 +7303,7 @@ import {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo36,
   useRef as useRef19,
-  useState as useState31
+  useState as useState30
 } from "react";
 
 // src/components/NewComposition/RemInput.tsx
@@ -7324,7 +7313,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo35,
   useRef as useRef18,
-  useState as useState30
+  useState as useState29
 } from "react";
 import { jsx as jsx67 } from "react/jsx-runtime";
 var INPUT_HORIZONTAL_PADDING = 8;
@@ -7350,8 +7339,8 @@ var getInputBorderColor = ({
   isHovered
 }) => status === "warning" ? WARNING_COLOR : status === "error" ? FAIL_COLOR : isFocused ? SELECTED_BACKGROUND : isHovered ? INPUT_BORDER_COLOR_HOVERED : INPUT_BORDER_COLOR_UNHOVERED;
 var RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
-  const [isFocused, setIsFocused] = useState30(false);
-  const [isHovered, setIsHovered] = useState30(false);
+  const [isFocused, setIsFocused] = useState29(false);
+  const [isHovered, setIsHovered] = useState29(false);
   const inputRef = useRef18(null);
   const { tabIndex } = useZIndex();
   const style5 = useMemo35(() => {
@@ -7408,8 +7397,8 @@ var inputBaseStyle2 = {
   overflowX: "hidden"
 };
 var RemTextareaFRFunction = ({ status, ...props }, ref) => {
-  const [isFocused, setIsFocused] = useState31(false);
-  const [isHovered, setIsHovered] = useState31(false);
+  const [isFocused, setIsFocused] = useState30(false);
+  const [isHovered, setIsHovered] = useState30(false);
   const inputRef = useRef19(null);
   const { tabIndex } = useZIndex();
   useImperativeHandle8(ref, () => {
@@ -7501,7 +7490,7 @@ var jsonStyle = {
   flex: 1
 };
 var JSONViewer = ({ src }) => {
-  const [json, setJson] = useState32(null);
+  const [json, setJson] = useState31(null);
   useEffect27(() => {
     fetch(src).then((res) => res.json()).then((jsonRes) => {
       setJson(JSON.stringify(jsonRes, null, 2));
@@ -7518,7 +7507,7 @@ var JSONViewer = ({ src }) => {
 };
 
 // src/components/TextViewer.tsx
-import { useEffect as useEffect28, useState as useState33 } from "react";
+import { useEffect as useEffect28, useState as useState32 } from "react";
 import { jsxs as jsxs31 } from "react/jsx-runtime";
 var textStyle = {
   margin: 14,
@@ -7528,7 +7517,7 @@ var textStyle = {
   whiteSpace: "pre-wrap"
 };
 var TextViewer = ({ src }) => {
-  const [txt, setTxt] = useState33("");
+  const [txt, setTxt] = useState32("");
   useEffect28(() => {
     fetch(src).then(async (res) => {
       if (!res.ok || !res.body) {
@@ -7629,9 +7618,9 @@ var errMsgStyle = {
 };
 var RenderPreview = ({ path, assetMetadata, getBlob }) => {
   const fileType = getPreviewFileType(path);
-  const connectionStatus = useContext18(StudioServerConnectionCtx).previewServerState.type;
-  const [blobUrl, setBlobUrl] = useState34(null);
-  const [blobError, setBlobError] = useState34(null);
+  const connectionStatus = useContext17(StudioServerConnectionCtx).previewServerState.type;
+  const [blobUrl, setBlobUrl] = useState33(null);
+  const [blobError, setBlobError] = useState33(null);
   useEffect29(() => {
     if (!getBlob) {
       setBlobUrl(null);
@@ -7747,7 +7736,7 @@ var Spinner = ({ size: size2, duration }) => {
 };
 
 // src/components/StaticFilePreview.tsx
-import { useContext as useContext19 } from "react";
+import { useContext as useContext18 } from "react";
 import { staticFile as staticFile3 } from "remotion";
 import { jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
 var msgStyle3 = {
@@ -7765,7 +7754,7 @@ var StaticFilePreview = ({ currentAsset, assetMetadata }) => {
   const fileType = getPreviewFileType(currentAsset);
   const staticFileSrc = staticFile3(currentAsset);
   const staticFiles = useStaticFiles();
-  const connectionStatus = useContext19(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext18(StudioServerConnectionCtx).previewServerState.type;
   const exists = staticFiles.find((file) => file.name === currentAsset);
   if (connectionStatus === "disconnected") {
     return /* @__PURE__ */ jsx73("div", {
@@ -7904,7 +7893,7 @@ var VideoPreview = ({
   });
 };
 var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
-  const { size: previewSize } = useContext20(Internals15.PreviewSizeContext);
+  const { size: previewSize } = useContext19(Internals15.PreviewSizeContext);
   const { centerX, centerY, yCorrection, xCorrection, scale } = useMemo38(() => {
     if (contentDimensions === "none") {
       return {
@@ -7983,7 +7972,7 @@ var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, a
   });
 };
 var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
-  const { checkerboard } = useContext20(CheckerboardContext);
+  const { checkerboard } = useContext19(CheckerboardContext);
   const style5 = useMemo38(() => {
     return containerStyle({
       checkerboard,
@@ -8075,8 +8064,8 @@ var getUniqueSizes = (size2) => {
 };
 var zoomableFileTypes = ["video", "image"];
 var SizeSelector = () => {
-  const { size: size2, setSize } = useContext21(Internals16.PreviewSizeContext);
-  const { canvasContent } = useContext21(Internals16.CompositionManager);
+  const { size: size2, setSize } = useContext20(Internals16.PreviewSizeContext);
+  const { canvasContent } = useContext20(Internals16.CompositionManager);
   const style5 = useMemo39(() => {
     return {
       padding: CONTROL_BUTTON_PADDING
@@ -8174,7 +8163,7 @@ var TimelineOutPointer = (props) => {
 };
 
 // src/state/in-out.ts
-import { createContext as createContext12, useContext as useContext22, useMemo as useMemo40 } from "react";
+import { createContext as createContext12, useContext as useContext21, useMemo as useMemo40 } from "react";
 import { Internals as Internals17 } from "remotion";
 var TimelineInOutContext = createContext12({});
 var SetTimelineInOutContext = createContext12({
@@ -8184,7 +8173,7 @@ var SetTimelineInOutContext = createContext12({
 });
 var useTimelineInOutFramePosition = () => {
   const videoConfig = Internals17.useUnsafeVideoConfig();
-  const state = useContext22(TimelineInOutContext);
+  const state = useContext21(TimelineInOutContext);
   const id = videoConfig?.id;
   const durationInFrames = videoConfig?.durationInFrames;
   return useMemo40(() => {
@@ -8201,7 +8190,7 @@ var useTimelineInOutFramePosition = () => {
   }, [durationInFrames, id, state]);
 };
 var useTimelineSetInOutFramePosition = () => {
-  const { setInAndOutFrames } = useContext22(SetTimelineInOutContext);
+  const { setInAndOutFrames } = useContext21(SetTimelineInOutContext);
   return { setInAndOutFrames };
 };
 
@@ -8745,18 +8734,18 @@ var getFileMenu = ({
   };
 };
 var useMenuStructure = (closeMenu, readOnlyStudio) => {
-  const { setSelectedModal } = useContext23(ModalsContext);
-  const { checkerboard, setCheckerboard } = useContext23(CheckerboardContext);
-  const { editorZoomGestures, setEditorZoomGestures } = useContext23(EditorZoomGesturesContext);
-  const { editorShowRulers, setEditorShowRulers } = useContext23(EditorShowRulersContext);
-  const { editorShowGuides, setEditorShowGuides } = useContext23(EditorShowGuidesContext);
-  const { size: size2, setSize } = useContext23(Internals19.PreviewSizeContext);
-  const { type } = useContext23(StudioServerConnectionCtx).previewServerState;
+  const { setSelectedModal } = useContext22(ModalsContext);
+  const { checkerboard, setCheckerboard } = useContext22(CheckerboardContext);
+  const { editorZoomGestures, setEditorZoomGestures } = useContext22(EditorZoomGesturesContext);
+  const { editorShowRulers, setEditorShowRulers } = useContext22(EditorShowRulersContext);
+  const { editorShowGuides, setEditorShowGuides } = useContext22(EditorShowGuidesContext);
+  const { size: size2, setSize } = useContext22(Internals19.PreviewSizeContext);
+  const { type } = useContext22(StudioServerConnectionCtx).previewServerState;
   const {
     setSidebarCollapsedState,
     sidebarCollapsedStateLeft,
     sidebarCollapsedStateRight
-  } = useContext23(SidebarContext);
+  } = useContext22(SidebarContext);
   const sizes = useMemo42(() => getUniqueSizes(size2), [size2]);
   const isFullscreenSupported = checkFullscreenSupport();
   const { remotion_packageManager } = window;
@@ -9503,7 +9492,7 @@ var makeSearchResults = (actions, setSelectedModal) => {
 
 // src/components/Menu/MenuItem.tsx
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
-import { useCallback as useCallback37, useMemo as useMemo43, useRef as useRef21, useState as useState35 } from "react";
+import { useCallback as useCallback37, useMemo as useMemo43, useRef as useRef21, useState as useState34 } from "react";
 import ReactDOM5 from "react-dom";
 import { jsx as jsx81, jsxs as jsxs38, Fragment as Fragment13 } from "react/jsx-runtime";
 var container20 = {
@@ -9529,7 +9518,7 @@ var MenuItem = ({
   onNextMenu,
   menu
 }) => {
-  const [hovered, setHovered] = useState35(false);
+  const [hovered, setHovered] = useState34(false);
   const ref = useRef21(null);
   const size2 = PlayerInternals9.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -9634,18 +9623,18 @@ var MenuItem = ({
 // src/components/MenuBuildIndicator.tsx
 import {
   useCallback as useCallback39,
-  useContext as useContext26,
+  useContext as useContext25,
   useEffect as useEffect33,
   useMemo as useMemo45,
-  useState as useState38
+  useState as useState37
 } from "react";
 
 // src/components/MenuCompositionName.tsx
-import { useCallback as useCallback38, useContext as useContext25, useMemo as useMemo44, useState as useState37 } from "react";
+import { useCallback as useCallback38, useContext as useContext24, useMemo as useMemo44, useState as useState36 } from "react";
 import { Internals as Internals21 } from "remotion";
 
 // src/components/Timeline/use-resolved-stack.ts
-import { useContext as useContext24, useEffect as useEffect32, useState as useState36 } from "react";
+import { useContext as useContext23, useEffect as useEffect32, useState as useState35 } from "react";
 import { Internals as Internals20 } from "remotion";
 
 // src/components/Timeline/TimelineStack/get-stack.ts
@@ -9738,8 +9727,8 @@ var resolvedCache = new Map;
 var inFlight = new Set;
 var subscribers = new Map;
 var useResolvedStack = (stack2) => {
-  const updateResolvedStackTrace = useContext24(Internals20.SequenceStackTracesUpdateContext);
-  const [value, setValue] = useState36(() => {
+  const updateResolvedStackTrace = useContext23(Internals20.SequenceStackTracesUpdateContext);
+  const [value, setValue] = useState35(() => {
     if (!stack2) {
       return null;
     }
@@ -9804,10 +9793,10 @@ var slashStyle = {
   top: 1
 };
 var MenuCompositionName = () => {
-  const { canvasContent, compositions } = useContext25(Internals21.CompositionManager);
-  const connectionStatus = useContext25(StudioServerConnectionCtx).previewServerState.type;
-  const [opening, setOpening] = useState37(false);
-  const [hovered, setHovered] = useState37(false);
+  const { canvasContent, compositions } = useContext24(Internals21.CompositionManager);
+  const connectionStatus = useContext24(StudioServerConnectionCtx).previewServerState.type;
+  const [opening, setOpening] = useState36(false);
+  const [hovered, setHovered] = useState36(false);
   const composition = useMemo44(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -9885,9 +9874,9 @@ var projectNameLinkHovered = {
   textDecoration: "underline"
 };
 var MenuBuildIndicator = () => {
-  const [isBuilding, setIsBuilding] = useState38(false);
-  const [projectNameHovered, setProjectNameHovered] = useState38(false);
-  const ctx = useContext26(StudioServerConnectionCtx).previewServerState;
+  const [isBuilding, setIsBuilding] = useState37(false);
+  const [projectNameHovered, setProjectNameHovered] = useState37(false);
+  const ctx = useContext25(StudioServerConnectionCtx).previewServerState;
   const showEditorLink = window.remotion_editorName && ctx.type === "connected";
   const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
   const handleProjectNameClick = useCallback39(async () => {
@@ -9965,16 +9954,16 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback96, useContext as useContext65, useEffect as useEffect62 } from "react";
+import { useCallback as useCallback96, useContext as useContext64, useEffect as useEffect62 } from "react";
 
 // src/components/TopPanel.tsx
-import React123, { useCallback as useCallback95, useContext as useContext64, useEffect as useEffect61, useMemo as useMemo103 } from "react";
+import React123, { useCallback as useCallback95, useContext as useContext63, useEffect as useEffect61, useMemo as useMemo103 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect34, useRef as useRef22, useState as useState39 } from "react";
+import { useEffect as useEffect34, useRef as useRef22, useState as useState38 } from "react";
 function useBreakpoint(breakpoint2) {
-  const [compactUI, setCompactUI] = useState39(window.innerWidth < breakpoint2);
+  const [compactUI, setCompactUI] = useState38(window.innerWidth < breakpoint2);
   const compactUIRef = useRef22(compactUI);
   useEffect34(() => {
     function handleResize() {
@@ -9992,21 +9981,21 @@ function useBreakpoint(breakpoint2) {
 }
 
 // src/components/CanvasIfSizeIsAvailable.tsx
-import { useContext as useContext35, useMemo as useMemo53 } from "react";
+import { useContext as useContext34, useMemo as useMemo53 } from "react";
 import { Internals as Internals30 } from "remotion";
 
 // src/components/CanvasOrLoading.tsx
-import { useContext as useContext34, useEffect as useEffect39 } from "react";
+import { useContext as useContext33, useEffect as useEffect39 } from "react";
 import { Internals as Internals29 } from "remotion";
 
 // src/components/Canvas.tsx
 import {
   useCallback as useCallback43,
-  useContext as useContext33,
+  useContext as useContext32,
   useEffect as useEffect37,
   useMemo as useMemo52,
   useRef as useRef25,
-  useState as useState41
+  useState as useState40
 } from "react";
 import { Internals as Internals27, watchStaticFile } from "remotion";
 
@@ -10141,19 +10130,19 @@ var applyZoomAroundFocalPoint = ({
 };
 
 // src/components/EditorGuides/index.tsx
-import { useContext as useContext29, useMemo as useMemo49 } from "react";
+import { useContext as useContext28, useMemo as useMemo49 } from "react";
 import { Internals as Internals24 } from "remotion";
 
 // src/helpers/use-studio-canvas-dimensions.ts
 import { PlayerInternals as PlayerInternals10 } from "@remotion/player";
-import { useContext as useContext27, useMemo as useMemo46 } from "react";
+import { useContext as useContext26, useMemo as useMemo46 } from "react";
 import { Internals as Internals23 } from "remotion";
 var useStudioCanvasDimensions = ({
   canvasSize,
   contentDimensions,
   assetMetadata
 }) => {
-  const { size: previewSize } = useContext27(Internals23.PreviewSizeContext);
+  const { size: previewSize } = useContext26(Internals23.PreviewSizeContext);
   const { centerX, centerY, scale } = useMemo46(() => {
     if (contentDimensions === "none" || contentDimensions === null || assetMetadata && (assetMetadata.type === "not-found" || assetMetadata.type === "metadata-error") || !canvasSize) {
       return {
@@ -10199,7 +10188,7 @@ var useStudioCanvasDimensions = ({
 };
 
 // src/components/EditorGuides/Guide.tsx
-import { memo, useCallback as useCallback40, useContext as useContext28, useMemo as useMemo48 } from "react";
+import { memo, useCallback as useCallback40, useContext as useContext27, useMemo as useMemo48 } from "react";
 import { NoReactInternals as NoReactInternals6 } from "remotion/no-react";
 
 // src/components/ForceSpecificCursor.tsx
@@ -10247,7 +10236,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
     selectedGuideId,
     setHoveredGuideId,
     hoveredGuideId
-  } = useContext28(EditorShowGuidesContext);
+  } = useContext27(EditorShowGuidesContext);
   const onPointerEnter = useCallback40(() => {
     setHoveredGuideId(() => guide.id);
   }, [guide.id, setHoveredGuideId]);
@@ -10339,11 +10328,11 @@ var EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
     contentDimensions,
     assetMetadata
   });
-  const { canvasContent } = useContext29(Internals24.CompositionManager);
+  const { canvasContent } = useContext28(Internals24.CompositionManager);
   if (canvasContent === null || canvasContent.type !== "composition") {
     throw new Error("Expected to be in a composition");
   }
-  const { guidesList } = useContext29(EditorShowGuidesContext);
+  const { guidesList } = useContext28(EditorShowGuidesContext);
   const guidesForThisComposition = useMemo49(() => {
     return guidesList.filter((guide) => {
       return guide.compositionId === canvasContent.compositionId;
@@ -10364,7 +10353,7 @@ var EditorGuides_default = EditorGuides;
 // src/components/EditorRuler/index.tsx
 import {
   useCallback as useCallback42,
-  useContext as useContext31,
+  useContext as useContext30,
   useEffect as useEffect36,
   useMemo as useMemo51,
   useRef as useRef24
@@ -10579,11 +10568,11 @@ var getRulerScaleRange = ({
 // src/components/EditorRuler/Ruler.tsx
 import {
   useCallback as useCallback41,
-  useContext as useContext30,
+  useContext as useContext29,
   useEffect as useEffect35,
   useMemo as useMemo50,
   useRef as useRef23,
-  useState as useState40
+  useState as useState39
 } from "react";
 import { Internals as Internals25 } from "remotion";
 import { jsx as jsx87 } from "react/jsx-runtime";
@@ -10609,12 +10598,12 @@ var Ruler = ({
     setSelectedGuideId,
     guidesList,
     setEditorShowGuides
-  } = useContext30(EditorShowGuidesContext);
+  } = useContext29(EditorShowGuidesContext);
   const unsafeVideoConfig = Internals25.useUnsafeVideoConfig();
   if (!unsafeVideoConfig) {
     throw new Error("Video config not set");
   }
-  const [cursor, setCursor] = useState40(isVerticalRuler ? "ew-resize" : "ns-resize");
+  const [cursor, setCursor] = useState39(isVerticalRuler ? "ew-resize" : "ns-resize");
   const selectedOrHoveredGuide = useMemo50(() => {
     return guidesList.find((guide) => guide.id === selectedGuideId) ?? guidesList.find((guide) => guide.id === hoveredGuideId) ?? null;
   }, [guidesList, hoveredGuideId, selectedGuideId]);
@@ -10734,7 +10723,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     setGuidesList,
     selectedGuideId,
     setSelectedGuideId
-  } = useContext31(EditorShowGuidesContext);
+  } = useContext30(EditorShowGuidesContext);
   const rulerMarkingGaps = useMemo51(() => {
     const minimumGap = MINIMUM_RULER_MARKING_GAP_PX;
     const predefinedGap = PREDEFINED_RULER_SCALE_GAPS.find((gap) => gap * scale > minimumGap);
@@ -10890,11 +10879,11 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
 };
 
 // src/components/EditorRuler/use-is-ruler-visible.ts
-import { useContext as useContext32 } from "react";
+import { useContext as useContext31 } from "react";
 import { Internals as Internals26 } from "remotion";
 var useIsRulerVisible = () => {
-  const { canvasContent } = useContext32(Internals26.CompositionManager);
-  const { editorShowRulers } = useContext32(EditorShowRulersContext);
+  const { canvasContent } = useContext31(Internals26.CompositionManager);
+  const { editorShowRulers } = useContext31(EditorShowRulersContext);
   return editorShowRulers && canvasContent && canvasContent.type === "composition";
 };
 
@@ -10924,8 +10913,8 @@ var resetZoom = {
 };
 var ZOOM_PX_FACTOR = 0.003;
 var Canvas = ({ canvasContent, size: size2 }) => {
-  const { setSize, size: previewSize } = useContext33(Internals27.PreviewSizeContext);
-  const { editorZoomGestures } = useContext33(EditorZoomGesturesContext);
+  const { setSize, size: previewSize } = useContext32(Internals27.PreviewSizeContext);
+  const { editorZoomGestures } = useContext32(EditorZoomGesturesContext);
   const previewSnapshotRef = useRef25({
     previewSize,
     canvasSize: size2,
@@ -10937,8 +10926,8 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const keybindings = useKeybinding();
   const config = Internals27.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
-  const { editorShowGuides } = useContext33(EditorShowGuidesContext);
-  const [assetResolution, setAssetResolution] = useState41(null);
+  const { editorShowGuides } = useContext32(EditorShowGuidesContext);
+  const [assetResolution, setAssetResolution] = useState40(null);
   const contentDimensions = useMemo52(() => {
     if ((canvasContent.type === "asset" || canvasContent.type === "output" || canvasContent.type === "output-blob") && assetResolution && assetResolution.type === "found") {
       return assetResolution.dimensions;
@@ -11436,9 +11425,9 @@ var container23 = {
 };
 var CanvasOrLoading = ({ size: size2 }) => {
   const resolved = Internals29.useResolvedVideoConfig(null);
-  const { setZoom } = useContext34(TimelineZoomCtx);
-  const { canvasContent } = useContext34(Internals29.CompositionManager);
-  const { error: renderError } = useContext34(RenderErrorContext);
+  const { setZoom } = useContext33(TimelineZoomCtx);
+  const { canvasContent } = useContext33(Internals29.CompositionManager);
+  const { error: renderError } = useContext33(RenderErrorContext);
   useEffect39(() => {
     if (resolved?.type !== "success" && resolved?.type !== "success-and-refreshing") {
       return;
@@ -11536,7 +11525,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
 import { jsx as jsx94 } from "react/jsx-runtime";
 var CanvasIfSizeIsAvailable = () => {
   const rulersAreVisible = useIsRulerVisible();
-  const context = useContext35(Internals30.CurrentScaleContext);
+  const context = useContext34(Internals30.CurrentScaleContext);
   const sizeWithRulersApplied = useMemo53(() => {
     const size2 = context && context.type === "canvas-size" ? context.canvasSize : null;
     if (!rulersAreVisible) {
@@ -11560,7 +11549,7 @@ var CanvasIfSizeIsAvailable = () => {
 };
 
 // src/components/CurrentCompositionSideEffects.tsx
-import { useCallback as useCallback44, useContext as useContext36, useEffect as useEffect40 } from "react";
+import { useCallback as useCallback44, useContext as useContext35, useEffect as useEffect40 } from "react";
 import { Internals as Internals31 } from "remotion";
 
 // src/helpers/document-title.ts
@@ -11615,8 +11604,8 @@ var getProgressInBrackets = (selectedCompositionId, jobs) => {
 
 // src/components/CurrentCompositionSideEffects.tsx
 var TitleUpdater = () => {
-  const renderQueue = useContext36(RenderQueueContext);
-  const { canvasContent } = useContext36(Internals31.CompositionManager);
+  const renderQueue = useContext35(RenderQueueContext);
+  const { canvasContent } = useContext35(Internals31.CompositionManager);
   const { jobs } = renderQueue;
   useEffect40(() => {
     if (!canvasContent) {
@@ -11645,7 +11634,7 @@ var TitleUpdater = () => {
 var CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
   const keybindings = useKeybinding();
   const video = Internals31.useVideo();
-  const { type } = useContext36(StudioServerConnectionCtx).previewServerState;
+  const { type } = useContext35(StudioServerConnectionCtx).previewServerState;
   const openRenderModal = useCallback44(() => {
     if (!video) {
       return;
@@ -11720,18 +11709,18 @@ function MobilePanel({
 // src/components/ObserveDefaultPropsContext.tsx
 import React63, {
   useCallback as useCallback45,
-  useContext as useContext37,
+  useContext as useContext36,
   useEffect as useEffect41,
   useMemo as useMemo54,
-  useState as useState42
+  useState as useState41
 } from "react";
 import { Internals as Internals32 } from "remotion";
 import { jsx as jsx96 } from "react/jsx-runtime";
 var ObserveDefaultPropsContext = React63.createContext(null);
 var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
-  const { previewServerState, subscribeToEvent } = useContext37(StudioServerConnectionCtx);
-  const { updateProps } = useContext37(Internals32.EditorPropsContext);
-  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState42({});
+  const { previewServerState, subscribeToEvent } = useContext36(StudioServerConnectionCtx);
+  const { updateProps } = useContext36(Internals32.EditorPropsContext);
+  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState41({});
   const canSaveDefaultProps = useMemo54(() => {
     if (compositionId === null) {
       return null;
@@ -11805,10 +11794,10 @@ var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
 import {
   createRef as createRef9,
   useCallback as useCallback86,
-  useContext as useContext55,
+  useContext as useContext54,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo97,
-  useState as useState60
+  useState as useState59
 } from "react";
 import { Internals as Internals36 } from "remotion";
 
@@ -11821,7 +11810,7 @@ import {
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo56,
   useRef as useRef26,
-  useState as useState44
+  useState as useState43
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
@@ -11843,10 +11832,10 @@ function getZodSchemaFromPrimitive(value, z) {
 // src/components/get-zod-if-possible.tsx
 import {
   createContext as createContext17,
-  useContext as useContext38,
+  useContext as useContext37,
   useEffect as useEffect42,
   useMemo as useMemo55,
-  useState as useState43
+  useState as useState42
 } from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 async function getZodIfPossible() {
@@ -11874,18 +11863,18 @@ var getZTypesIfPossible = async () => {
   }
 };
 function useZodIfPossible() {
-  const context = useContext38(ZodContext);
+  const context = useContext37(ZodContext);
   return context?.zod ?? null;
 }
 var useZodTypesIfPossible = () => {
-  const context = useContext38(ZodContext);
+  const context = useContext37(ZodContext);
   return context?.zodTypes ?? null;
 };
 var ZodContext = createContext17(null);
 var ZodProvider = ({ children }) => {
-  const [zod, setZod] = useState43(null);
-  const [zodV3, setZodV3] = useState43(null);
-  const [zodTypes, setZodTypes] = useState43(null);
+  const [zod, setZod] = useState42(null);
+  const [zodV3, setZodV3] = useState42(null);
+  const [zodTypes, setZodTypes] = useState42(null);
   useEffect42(() => {
     getZodIfPossible().then((z) => setZod(z));
   }, []);
@@ -11961,7 +11950,7 @@ var SetVisualControlsContext = createContext18({
 });
 var VisualControlsProvider = ({ children }) => {
   const imperativeHandles = useRef26({});
-  const [handles, setHandles] = useState44({});
+  const [handles, setHandles] = useState43({});
   const state = useMemo56(() => {
     return {
       handles
@@ -12063,10 +12052,10 @@ var VisualControlsProvider = ({ children }) => {
 };
 
 // src/components/DefaultPropsEditor.tsx
-import { useContext as useContext42 } from "react";
+import { useContext as useContext41 } from "react";
 
 // src/components/RenderModal/DataEditor.tsx
-import React94, { useCallback as useCallback71, useContext as useContext41, useMemo as useMemo86, useState as useState55 } from "react";
+import React94, { useCallback as useCallback71, useContext as useContext40, useMemo as useMemo86, useState as useState54 } from "react";
 import { getInputProps } from "remotion";
 import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
 
@@ -12124,7 +12113,7 @@ var ValidationMessage = ({ message, align, type }) => {
 };
 
 // src/components/SegmentedControl.tsx
-import { useCallback as useCallback47, useMemo as useMemo58, useState as useState45 } from "react";
+import { useCallback as useCallback47, useMemo as useMemo58, useState as useState44 } from "react";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var container26 = {
   display: "flex",
@@ -12173,7 +12162,7 @@ var SegmentedControl = ({ items, needsWrapping }) => {
   });
 };
 var Item = ({ selected, onClick, children }) => {
-  const [hovered, setHovered] = useState45(false);
+  const [hovered, setHovered] = useState44(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback47(() => {
     setHovered(true);
@@ -12268,7 +12257,7 @@ var getRenderModalWarnings = ({
 
 // src/components/RenderModal/RenderModalJSONPropsEditor.tsx
 import React69, { useCallback as useCallback48, useEffect as useEffect44, useMemo as useMemo60 } from "react";
-import { useContext as useContext39 } from "react";
+import { useContext as useContext38 } from "react";
 import { NoReactInternals as NoReactInternals9 } from "remotion/no-react";
 
 // src/components/RenderModal/SchemaEditor/deep-equal.ts
@@ -12596,7 +12585,7 @@ var RenderModalJSONPropsEditor = ({
   if (serializedJSON === null) {
     throw new Error("expecting serializedJSON to be defined");
   }
-  const { subscribeToEvent } = useContext39(StudioServerConnectionCtx);
+  const { subscribeToEvent } = useContext38(StudioServerConnectionCtx);
   const [localValue, setLocalValue] = React69.useState(() => {
     return parseJSON(serializedJSON.serializedString, schema);
   });
@@ -13070,12 +13059,12 @@ var createZodValues = (schema, zodRuntime, zodTypes) => {
 };
 
 // src/components/RenderModal/SchemaEditor/Fieldset.tsx
-import { createContext as createContext19, useContext as useContext40, useMemo as useMemo61 } from "react";
+import { createContext as createContext19, useContext as useContext39, useMemo as useMemo61 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var SCHEMA_EDITOR_FIELDSET_PADDING = 10;
 var AlreadyPaddedRightContext = createContext19(false);
 var Fieldset = ({ children, shouldPad }) => {
-  const alreadyPadded = useContext40(AlreadyPaddedRightContext);
+  const alreadyPadded = useContext39(AlreadyPaddedRightContext);
   const style8 = useMemo61(() => {
     if (shouldPad) {
       return {
@@ -13100,7 +13089,7 @@ var Fieldset = ({ children, shouldPad }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaLabel.tsx
-import { useCallback as useCallback50, useMemo as useMemo62, useState as useState46 } from "react";
+import { useCallback as useCallback50, useMemo as useMemo62, useState as useState45 } from "react";
 
 // src/components/RenderModal/InlineRemoveButton.tsx
 import { useCallback as useCallback49 } from "react";
@@ -13152,7 +13141,7 @@ var compactStyles = {
   flex: 1
 };
 var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick }) => {
-  const [clickableButtonHovered, setClickableButtonHovered] = useState46(false);
+  const [clickableButtonHovered, setClickableButtonHovered] = useState45(false);
   const labelStyle4 = useMemo62(() => {
     return {
       fontFamily: "monospace",
@@ -13198,7 +13187,7 @@ var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick })
 
 // src/components/RenderModal/SchemaEditor/ZodObjectEditor.tsx
 import { useCallback as useCallback69 } from "react";
-import React92, { useMemo as useMemo83, useState as useState54 } from "react";
+import React92, { useMemo as useMemo83, useState as useState53 } from "react";
 
 // src/components/RenderModal/layout.ts
 var optionRow = {
@@ -13244,7 +13233,7 @@ var fieldsetLabel = {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaSeparationLine.tsx
-import { useCallback as useCallback51, useMemo as useMemo63, useState as useState47 } from "react";
+import { useCallback as useCallback51, useMemo as useMemo63, useState as useState46 } from "react";
 
 // src/icons/plus.tsx
 import { jsx as jsx107 } from "react/jsx-runtime";
@@ -13279,8 +13268,8 @@ var arraySeparationLine = {
   flexBasis: "100%"
 };
 var SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAddButton }) => {
-  const [outerHovered, setOuterHovered] = useState47(false);
-  const [innerHovered, setInnerHovered] = useState47(false);
+  const [outerHovered, setOuterHovered] = useState46(false);
+  const [innerHovered, setInnerHovered] = useState46(false);
   const zodTypes = useZodTypesIfPossible();
   const z = useZodIfPossible();
   if (!z) {
@@ -13420,7 +13409,7 @@ var SchemaVerticalGuide = ({ isRoot, children }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodArrayEditor.tsx
-import React77, { useCallback as useCallback54, useMemo as useMemo68, useState as useState49 } from "react";
+import React77, { useCallback as useCallback54, useMemo as useMemo68, useState as useState48 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodArrayItemEditor.tsx
 import { useCallback as useCallback52, useMemo as useMemo65 } from "react";
@@ -13457,7 +13446,7 @@ var ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, may
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback53, useEffect as useEffect45, useMemo as useMemo67, useRef as useRef27, useState as useState48 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect45, useMemo as useMemo67, useRef as useRef27, useState as useState47 } from "react";
 import ReactDOM7 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -13540,8 +13529,8 @@ var container27 = {
   verticalAlign: "text-bottom"
 };
 var InfoBubble = ({ title: title4, children }) => {
-  const [hovered, setIsHovered] = useState48(false);
-  const [opened, setOpened] = useState48(false);
+  const [hovered, setIsHovered] = useState47(false);
+  const [opened, setOpened] = useState47(false);
   const ref2 = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref2, {
@@ -13728,7 +13717,7 @@ var ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
   const onChange = useCallback54((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
-  const [expanded, setExpanded] = useState49(true);
+  const [expanded, setExpanded] = useState48(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo68(() => {
     return expanded ? " [" : " [...] ";
@@ -13913,7 +13902,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React80, { useCallback as useCallback56, useEffect as useEffect47, useMemo as useMemo70, useRef as useRef29, useState as useState50 } from "react";
+import React80, { useCallback as useCallback56, useEffect as useEffect47, useMemo as useMemo70, useRef as useRef29, useState as useState49 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx117 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -13933,8 +13922,8 @@ var InputDraggerForwardRefFn = ({
   small,
   ...props
 }, ref2) => {
-  const [inputFallback, setInputFallback] = useState50(false);
-  const [dragging, setDragging] = useState50(false);
+  const [inputFallback, setInputFallback] = useState49(false);
+  const [dragging, setDragging] = useState49(false);
   const fallbackRef = useRef29(null);
   const pointerDownRef = useRef29(false);
   const style8 = useMemo70(() => {
@@ -14104,7 +14093,7 @@ import {
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo71,
   useRef as useRef30,
-  useState as useState51
+  useState as useState50
 } from "react";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var inputBaseStyle3 = {
@@ -14113,8 +14102,8 @@ var inputBaseStyle3 = {
   borderWidth: 1
 };
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref2) => {
-  const [isFocused, setIsFocused] = useState51(false);
-  const [isHovered, setIsHovered] = useState51(false);
+  const [isFocused, setIsFocused] = useState50(false);
+  const [isHovered, setIsHovered] = useState50(false);
   const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo71(() => {
@@ -14465,7 +14454,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodMatrixEditor.tsx
-import React86, { useMemo as useMemo76, useState as useState52 } from "react";
+import React86, { useMemo as useMemo76, useState as useState51 } from "react";
 import { useCallback as useCallback61 } from "react";
 import { jsx as jsx124, jsxs as jsxs63 } from "react/jsx-runtime";
 var rowStyle = {
@@ -14478,7 +14467,7 @@ var ZodMatrixEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo76(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState52(true);
+  const [expanded, setExpanded] = useState51(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo76(() => {
     return expanded ? " [" : " [...] ";
@@ -14974,7 +14963,7 @@ var ZodTextareaEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }
 };
 
 // src/components/RenderModal/SchemaEditor/ZodTupleEditor.tsx
-import React91, { useCallback as useCallback68, useMemo as useMemo82, useState as useState53 } from "react";
+import React91, { useCallback as useCallback68, useMemo as useMemo82, useState as useState52 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodTupleItemEditor.tsx
 import { useCallback as useCallback67, useMemo as useMemo81 } from "react";
@@ -15011,7 +15000,7 @@ var ZodTupleEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo82(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState53(true);
+  const [expanded, setExpanded] = useState52(true);
   const tupleItems = getTupleItems(schema);
   const suffix2 = useMemo82(() => {
     return expanded ? " [" : " [...] ";
@@ -15400,7 +15389,7 @@ var ZodObjectEditor = ({
   mayPad,
   discriminatedUnionReplacement
 }) => {
-  const [expanded, setExpanded] = useState54(true);
+  const [expanded, setExpanded] = useState53(true);
   const onChange = useCallback69((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
@@ -15709,8 +15698,8 @@ var DataEditor = ({
   propsEditType,
   canSaveDefaultProps
 }) => {
-  const [mode, setMode] = useState55("schema");
-  const [showWarning, setShowWarningWithoutPersistance] = useState55(() => getPersistedShowWarningState());
+  const [mode, setMode] = useState54("schema");
+  const [showWarning, setShowWarningWithoutPersistance] = useState54(() => getPersistedShowWarningState());
   const jsonEditorSetValue = useCallback71((newProps) => {
     setDefaultProps(typeof newProps === "function" ? newProps : () => newProps, { shouldSave: false });
   }, [setDefaultProps]);
@@ -15762,7 +15751,7 @@ var DataEditor = ({
       return val(prevVal);
     });
   }, []);
-  const { previewServerState } = useContext41(StudioServerConnectionCtx);
+  const { previewServerState } = useContext40(StudioServerConnectionCtx);
   const modeItems = useMemo86(() => {
     return [
       {
@@ -15902,7 +15891,7 @@ var DefaultPropsEditor = ({
   setDefaultProps,
   propsEditType
 }) => {
-  const canSaveDefaultProps = useContext42(ObserveDefaultPropsContext);
+  const canSaveDefaultProps = useContext41(ObserveDefaultPropsContext);
   if (canSaveDefaultProps === null) {
     throw new Error("ObserveDefaultPropsContext is not set");
   }
@@ -16115,16 +16104,16 @@ var SchemaResetButton = ({ onClick }) => {
 };
 
 // src/components/RenderQueue/index.tsx
-import React106, { useContext as useContext51, useEffect as useEffect51, useMemo as useMemo94 } from "react";
+import React106, { useContext as useContext50, useEffect as useEffect51, useMemo as useMemo94 } from "react";
 import { Internals as Internals35 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
   useCallback as useCallback83,
-  useContext as useContext50,
+  useContext as useContext49,
   useEffect as useEffect50,
   useMemo as useMemo93,
-  useState as useState56
+  useState as useState55
 } from "react";
 import { Internals as Internals34 } from "remotion";
 
@@ -16225,7 +16214,7 @@ import { useCallback as useCallback75, useMemo as useMemo87 } from "react";
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback74, useContext as useContext43, useEffect as useEffect49 } from "react";
+import { useCallback as useCallback74, useContext as useContext42, useEffect as useEffect49 } from "react";
 
 // src/api/save-render-output.ts
 var throwIfNotOk = async (response) => {
@@ -16290,7 +16279,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled,
     setProcessJobCallback
-  } = useContext43(RenderQueueContext);
+  } = useContext42(RenderQueueContext);
   const processStillJob = useCallback74(async (job, signal) => {
     const compositionRef = getCompositionForJob2(job.id);
     if (!compositionRef) {
@@ -16481,13 +16470,13 @@ var RenderQueueDownloadItem = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueError.tsx
-import { useCallback as useCallback76, useContext as useContext44 } from "react";
+import { useCallback as useCallback76, useContext as useContext43 } from "react";
 import { jsx as jsx147 } from "react/jsx-runtime";
 var outputLocation = {
   ...renderQueueItemSubtitleStyle
 };
 var RenderQueueError = ({ job }) => {
-  const { setSelectedModal } = useContext44(ModalsContext);
+  const { setSelectedModal } = useContext43(ModalsContext);
   const { tabIndex } = useZIndex();
   const onClick = useCallback76(() => {
     setSelectedModal({
@@ -16509,11 +16498,11 @@ var RenderQueueError = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemCancelButton.tsx
-import { useCallback as useCallback77, useContext as useContext45, useMemo as useMemo88 } from "react";
+import { useCallback as useCallback77, useContext as useContext44, useMemo as useMemo88 } from "react";
 import { jsx as jsx148 } from "react/jsx-runtime";
 var RenderQueueCancelButton = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
-  const { cancelClientJob } = useContext45(RenderQueueContext);
+  const { cancelClientJob } = useContext44(RenderQueueContext);
   const onClick = useCallback77((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -16548,7 +16537,7 @@ var RenderQueueCancelButton = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemStatus.tsx
-import React99, { useCallback as useCallback78, useContext as useContext46 } from "react";
+import React99, { useCallback as useCallback78, useContext as useContext45 } from "react";
 
 // src/components/RenderQueue/CircularProgress.tsx
 import { jsx as jsx149 } from "react/jsx-runtime";
@@ -16593,7 +16582,7 @@ var invisibleStyle = {
   display: "flex"
 };
 var RenderQueueItemStatus = ({ job }) => {
-  const { setSelectedModal } = useContext46(ModalsContext);
+  const { setSelectedModal } = useContext45(ModalsContext);
   const [hovered, setHovered] = React99.useState(false);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback78(() => {
@@ -16745,7 +16734,7 @@ var RenderQueueOutputName = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
-import { useCallback as useCallback80, useContext as useContext47 } from "react";
+import { useCallback as useCallback80, useContext as useContext46 } from "react";
 
 // src/components/RenderQueue/client-render-progress.ts
 var formatEtaString = (timeRemainingInMilliseconds) => {
@@ -16782,7 +16771,7 @@ var RenderQueueProgressMessage = ({ job }) => {
   if (job.status !== "running") {
     throw new Error("should not have rendered this component");
   }
-  const { setSelectedModal } = useContext47(ModalsContext);
+  const { setSelectedModal } = useContext46(ModalsContext);
   const { tabIndex } = useZIndex();
   const isClientJob = isClientRenderJob(job);
   const onClick = useCallback80(() => {
@@ -16803,14 +16792,14 @@ var RenderQueueProgressMessage = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
-import { useCallback as useCallback81, useContext as useContext48, useMemo as useMemo91 } from "react";
+import { useCallback as useCallback81, useContext as useContext47, useMemo as useMemo91 } from "react";
 import { Internals as Internals33 } from "remotion";
 import { jsx as jsx154 } from "react/jsx-runtime";
 var RenderQueueRemoveItem = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
-  const { removeClientJob } = useContext48(RenderQueueContext);
-  const { canvasContent } = useContext48(Internals33.CompositionManager);
-  const { setCanvasContent } = useContext48(Internals33.CompositionSetters);
+  const { removeClientJob } = useContext47(RenderQueueContext);
+  const { canvasContent } = useContext47(Internals33.CompositionManager);
+  const { setCanvasContent } = useContext47(Internals33.CompositionSetters);
   const onClick = useCallback81((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -16852,7 +16841,7 @@ var RenderQueueRemoveItem = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRepeat.tsx
-import { useCallback as useCallback82, useContext as useContext49, useMemo as useMemo92 } from "react";
+import { useCallback as useCallback82, useContext as useContext48, useMemo as useMemo92 } from "react";
 
 // src/helpers/retry-payload.ts
 import { NoReactInternals as NoReactInternals11 } from "remotion/no-react";
@@ -17056,9 +17045,9 @@ var makeClientRetryPayload = (job) => {
 // src/components/RenderQueue/RenderQueueRepeat.tsx
 import { jsx as jsx155 } from "react/jsx-runtime";
 var RenderQueueRepeatItem = ({ job }) => {
-  const { setSelectedModal } = useContext49(ModalsContext);
+  const { setSelectedModal } = useContext48(ModalsContext);
   const isMobileLayout = useMobileLayout();
-  const { setSidebarCollapsedState } = useContext49(SidebarContext);
+  const { setSidebarCollapsedState } = useContext48(SidebarContext);
   const isClientJob = isClientRenderJob(job);
   const onClick = useCallback82((e) => {
     e.stopPropagation();
@@ -17141,8 +17130,8 @@ var subtitle3 = {
 };
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState56(false);
-  const { setCanvasContent } = useContext50(Internals34.CompositionSetters);
+  const [hovered, setHovered] = useState55(false);
+  const { setCanvasContent } = useContext49(Internals34.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback83(() => {
     setHovered(true);
@@ -17308,9 +17297,9 @@ var renderQueue = {
   overflowY: "auto"
 };
 var RenderQueue = () => {
-  const connectionStatus = useContext51(StudioServerConnectionCtx).previewServerState.type;
-  const { jobs } = useContext51(RenderQueueContext);
-  const { canvasContent } = useContext51(Internals35.CompositionManager);
+  const connectionStatus = useContext50(StudioServerConnectionCtx).previewServerState.type;
+  const { jobs } = useContext50(RenderQueueContext);
+  const { canvasContent } = useContext50(Internals35.CompositionManager);
   const previousJobCount = React106.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React106.useRef(null);
@@ -17393,7 +17382,7 @@ var RenderQueue = () => {
 };
 
 // src/components/RendersTab.tsx
-import { useContext as useContext52, useMemo as useMemo95 } from "react";
+import { useContext as useContext51, useMemo as useMemo95 } from "react";
 import { jsx as jsx159, jsxs as jsxs77, Fragment as Fragment21 } from "react/jsx-runtime";
 var row4 = {
   display: "flex",
@@ -17413,7 +17402,7 @@ var badge = {
   alignItems: "center"
 };
 var RendersTab = ({ selected, onClick }) => {
-  const { jobs } = useContext52(RenderQueueContext);
+  const { jobs } = useContext51(RenderQueueContext);
   const failedJobs = jobs.filter((j) => j.status === "failed").length;
   const jobCount = jobs.length;
   const badgeStyle = useMemo95(() => {
@@ -17448,10 +17437,10 @@ var RendersTab = ({ selected, onClick }) => {
 };
 
 // src/components/VisualControls/VisualControlsContent.tsx
-import React109, { useContext as useContext54 } from "react";
+import React109, { useContext as useContext53 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
-import { useCallback as useCallback85, useContext as useContext53, useEffect as useEffect53, useState as useState59 } from "react";
+import { useCallback as useCallback85, useContext as useContext52, useEffect as useEffect53, useState as useState58 } from "react";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
 // src/fast-refresh-context.ts
@@ -17463,9 +17452,9 @@ var FastRefreshContext = createContext20({
 });
 
 // src/components/VisualControls/get-original-stack-trace.ts
-import { useEffect as useEffect52, useState as useState57 } from "react";
+import { useEffect as useEffect52, useState as useState56 } from "react";
 var useOriginalFileName = (stack2) => {
-  const [originalFileName, setOriginalFileName] = useState57({ type: "loading" });
+  const [originalFileName, setOriginalFileName] = useState56({ type: "loading" });
   useEffect52(() => {
     if (!stack2) {
       return;
@@ -17487,7 +17476,7 @@ var useOriginalFileName = (stack2) => {
 };
 
 // src/components/VisualControls/ClickableFileName.tsx
-import { useCallback as useCallback84, useMemo as useMemo96, useState as useState58 } from "react";
+import { useCallback as useCallback84, useMemo as useMemo96, useState as useState57 } from "react";
 
 // src/components/Timeline/TimelineStack/source-attribution.ts
 var getOriginalSourceAttribution = (originalLocation) => {
@@ -17512,7 +17501,7 @@ var container32 = {
 var ClickableFileName = ({
   originalFileName
 }) => {
-  const [titleHovered, setTitleHovered] = useState58(false);
+  const [titleHovered, setTitleHovered] = useState57(false);
   const hoverEffect = titleHovered && originalFileName.type === "loaded";
   const onTitlePointerEnter = useCallback84(() => {
     setTitleHovered(true);
@@ -17562,10 +17551,10 @@ var VisualControlHandle = ({ value, keyName }) => {
     throw new Error("expected zod");
   }
   const zodTypes = useZodTypesIfPossible();
-  const state = useContext53(VisualControlsContext);
-  const { updateValue } = useContext53(SetVisualControlsContext);
-  const { fastRefreshes, increaseManualRefreshes } = useContext53(FastRefreshContext);
-  const [_saving, setSaving] = useState59(false);
+  const state = useContext52(VisualControlsContext);
+  const { updateValue } = useContext52(SetVisualControlsContext);
+  const { fastRefreshes, increaseManualRefreshes } = useContext52(FastRefreshContext);
+  const [_saving, setSaving] = useState58(false);
   const currentValue = getVisualControlEditedValue({
     handles: state.handles,
     key: keyName
@@ -17654,7 +17643,7 @@ var container33 = {
   overflowY: "auto"
 };
 var VisualControlsContent = () => {
-  const { handles } = useContext54(VisualControlsContext);
+  const { handles } = useContext53(VisualControlsContext);
   const entries = Object.entries(handles);
   return /* @__PURE__ */ jsx163("div", {
     style: container33,
@@ -17697,10 +17686,10 @@ var persistSelectedOptionsSidebarPanel2 = (panel2) => {
 };
 var optionsSidebarTabs = createRef9();
 var OptionsPanel = ({ readOnlyStudio }) => {
-  const { props, updateProps } = useContext55(Internals36.EditorPropsContext);
+  const { props, updateProps } = useContext54(Internals36.EditorPropsContext);
   const renderingAvailable = !readOnlyStudio || SHOW_BROWSER_RENDERING;
   const isMobileLayout = useMobileLayout();
-  const visualControlsTabActivated = useContext55(VisualControlsTabActivatedContext);
+  const visualControlsTabActivated = useContext54(VisualControlsTabActivatedContext);
   const container34 = useMemo97(() => ({
     height: "100%",
     width: "100%",
@@ -17709,7 +17698,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     flexDirection: "column",
     flex: 1
   }), [isMobileLayout]);
-  const [panel2, setPanel] = useState60(() => getSelectedPanel2(renderingAvailable));
+  const [panel2, setPanel] = useState59(() => getSelectedPanel2(renderingAvailable));
   const onPropsSelected = useCallback86(() => {
     setPanel("input-props");
     persistSelectedOptionsSidebarPanel2("input-props");
@@ -17730,7 +17719,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  const { compositions, canvasContent } = useContext55(Internals36.CompositionManager);
+  const { compositions, canvasContent } = useContext54(Internals36.CompositionManager);
   const composition = useMemo97(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -17867,7 +17856,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext61, useEffect as useEffect59, useRef as useRef33, useState as useState64 } from "react";
+import { useContext as useContext60, useEffect as useEffect59, useRef as useRef33, useState as useState63 } from "react";
 import { Internals as Internals44 } from "remotion";
 
 // src/state/loop.ts
@@ -17881,7 +17870,7 @@ var loadLoopOption = () => {
 };
 
 // src/components/CheckboardToggle.tsx
-import { useCallback as useCallback87, useContext as useContext56 } from "react";
+import { useCallback as useCallback87, useContext as useContext55 } from "react";
 import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
 import { jsx as jsx165 } from "react/jsx-runtime";
 var accessibilityLabel2 = [
@@ -17889,7 +17878,7 @@ var accessibilityLabel2 = [
   areKeyboardShortcutsDisabled() ? null : "(T)"
 ].filter(NoReactInternals13.truthy).join(" ");
 var CheckboardToggle = () => {
-  const { checkerboard, setCheckerboard } = useContext56(CheckerboardContext);
+  const { checkerboard, setCheckerboard } = useContext55(CheckerboardContext);
   const onClick = useCallback87(() => {
     setCheckerboard((c) => {
       return !c;
@@ -17920,10 +17909,10 @@ var CheckboardToggle = () => {
 // src/components/FpsCounter.tsx
 import {
   useEffect as useEffect54,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo98,
   useRef as useRef31,
-  useState as useState61
+  useState as useState60
 } from "react";
 import { Internals as Internals37 } from "remotion";
 import { jsxs as jsxs81 } from "react/jsx-runtime";
@@ -17941,17 +17930,17 @@ var FpsCounter = ({ playbackSpeed }) => {
   const videoConfig = Internals37.useUnsafeVideoConfig();
   const [playing] = Internals37.Timeline.usePlayingState();
   const frame2 = Internals37.Timeline.useTimelinePosition();
-  const [marker, rerender] = useState61({});
-  const [fps, setFps] = useState61(0);
+  const [marker, rerender] = useState60({});
+  const [fps, setFps] = useState60(0);
   const previousUpdates = useRef31([]);
   const fpsRef = useRef31(0);
   const playingRef = useRef31(playing);
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
     playingRef.current = playing;
   }, [playing]);
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     if (playingRef.current === false)
       return;
     previousUpdates.current = pushWithMaxSize(previousUpdates.current, performance.now(), 15);
@@ -18001,7 +17990,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import { useCallback as useCallback88, useContext as useContext57, useEffect as useEffect55 } from "react";
+import { useCallback as useCallback88, useContext as useContext56, useEffect as useEffect55 } from "react";
 import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx166 } from "react/jsx-runtime";
@@ -18011,7 +18000,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals14.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
-  const { setSize } = useContext57(Internals38.PreviewSizeContext);
+  const { setSize } = useContext56(Internals38.PreviewSizeContext);
   const onClick = useCallback88(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -18245,7 +18234,7 @@ var PlaybackRatePersistor = () => {
 };
 
 // src/components/PlaybackRateSelector.tsx
-import { useContext as useContext58, useMemo as useMemo99 } from "react";
+import { useContext as useContext57, useMemo as useMemo99 } from "react";
 import { Internals as Internals40 } from "remotion";
 import { jsx as jsx170 } from "react/jsx-runtime";
 var commonPlaybackRates = [
@@ -18267,7 +18256,7 @@ var getPlaybackRateLabel = (playbackRate) => {
 var accessibilityLabel5 = "Change the playback rate";
 var comboStyle2 = { width: 80 };
 var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-  const { canvasContent } = useContext58(Internals40.CompositionManager);
+  const { canvasContent } = useContext57(Internals40.CompositionManager);
   const isStill = useIsStill();
   const style9 = useMemo99(() => {
     return {
@@ -18317,7 +18306,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals13 } from "@remotion/player";
-import { useCallback as useCallback92, useEffect as useEffect58, useState as useState62 } from "react";
+import { useCallback as useCallback92, useEffect as useEffect58, useState as useState61 } from "react";
 import { Internals as Internals41 } from "remotion";
 
 // src/icons/jump-to-start.tsx
@@ -18414,7 +18403,7 @@ var iconButton = {
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals41.useUnsafeVideoConfig();
-  const [showBufferIndicator, setShowBufferState] = useState62(false);
+  const [showBufferIndicator, setShowBufferState] = useState61(false);
   const {
     playing,
     play,
@@ -18676,7 +18665,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback93, useContext as useContext59, useMemo as useMemo100, useRef as useRef32, useState as useState63 } from "react";
+import { useCallback as useCallback93, useContext as useContext58, useMemo as useMemo100, useRef as useRef32, useState as useState62 } from "react";
 import ReactDOM8 from "react-dom";
 import { Internals as Internals42 } from "remotion";
 import { jsx as jsx177, jsxs as jsxs83, Fragment as Fragment24 } from "react/jsx-runtime";
@@ -18747,9 +18736,9 @@ var RenderButton = ({
   readOnlyStudio
 }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const { setSelectedModal } = useContext59(ModalsContext);
-  const [preferredRenderType, setPreferredRenderType] = useState63(() => getInitialRenderType(readOnlyStudio));
-  const [dropdownOpened, setDropdownOpened] = useState63(false);
+  const { setSelectedModal } = useContext58(ModalsContext);
+  const [preferredRenderType, setPreferredRenderType] = useState62(() => getInitialRenderType(readOnlyStudio));
+  const [dropdownOpened, setDropdownOpened] = useState62(false);
   const dropdownRef = useRef32(null);
   const containerRef = useRef32(null);
   const { currentZIndex } = useZIndex();
@@ -18786,7 +18775,7 @@ var RenderButton = ({
       return !o;
     });
   }, [refresh]);
-  const connectionStatus = useContext59(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext58(StudioServerConnectionCtx).previewServerState.type;
   const canServerRender = connectionStatus === "connected";
   const canRender = canServerRender || SHOW_BROWSER_RENDERING || readOnlyStudio;
   const renderType = useMemo100(() => {
@@ -18816,7 +18805,7 @@ var RenderButton = ({
   }, []);
   const video = Internals42.useVideo();
   const getCurrentFrame2 = PlayerInternals14.useFrameImperative();
-  const { props } = useContext59(Internals42.EditorPropsContext);
+  const { props } = useContext58(Internals42.EditorPropsContext);
   const openServerRenderModal = useCallback93((copyCommandOnly) => {
     if (!video) {
       return null;
@@ -19139,7 +19128,7 @@ var RenderButton = ({
 };
 
 // src/components/Timeline/TimelineZoomControls.tsx
-import { useCallback as useCallback94, useContext as useContext60 } from "react";
+import { useCallback as useCallback94, useContext as useContext59 } from "react";
 import { Internals as Internals43 } from "remotion";
 
 // src/icons/minus.tsx
@@ -19172,8 +19161,8 @@ var iconStyle4 = {
   width: 14
 };
 var TimelineZoomControls = () => {
-  const { canvasContent } = useContext60(Internals43.CompositionManager);
-  const { setZoom, zoom: zoomMap } = useContext60(TimelineZoomCtx);
+  const { canvasContent } = useContext59(Internals43.CompositionManager);
+  const { setZoom, zoom: zoomMap } = useContext59(TimelineZoomCtx);
   const { tabIndex } = useZIndex();
   const onMinusClicked = useCallback94(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
@@ -19301,15 +19290,15 @@ var padding2 = {
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { playbackRate, setPlaybackRate } = Internals44.useTimelineContext();
-  const { mediaMuted } = useContext61(Internals44.MediaVolumeContext);
-  const { setMediaMuted } = useContext61(Internals44.SetMediaVolumeContext);
-  const { canvasContent } = useContext61(Internals44.CompositionManager);
+  const { mediaMuted } = useContext60(Internals44.MediaVolumeContext);
+  const { setMediaMuted } = useContext60(Internals44.SetMediaVolumeContext);
+  const { canvasContent } = useContext60(Internals44.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
   const previewToolbarRef = useRef33(null);
   const leftScrollIndicatorRef = useRef33(null);
   const rightScrollIndicatorRef = useRef33(null);
   const isStill = useIsStill();
-  const [loop, setLoop] = useState64(loadLoopOption());
+  const [loop, setLoop] = useState63(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
   useEffect59(() => {
@@ -19463,7 +19452,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo101, useRef as useRef34, useState as useState65 } from "react";
+import { useMemo as useMemo101, useRef as useRef34, useState as useState64 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -19517,7 +19506,7 @@ var containerColumn = {
 };
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
-  const [flexValue, setFlexValue] = useState65(initialTimelineFlex ?? defaultFlex);
+  const [flexValue, setFlexValue] = useState64(initialTimelineFlex ?? defaultFlex);
   const ref2 = useRef34(null);
   const isDragging = useRef34(false);
   const value = useMemo101(() => {
@@ -19554,11 +19543,11 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
 };
 
 // src/components/Splitter/SplitterElement.tsx
-import { useContext as useContext62, useMemo as useMemo102 } from "react";
+import { useContext as useContext61, useMemo as useMemo102 } from "react";
 import { interpolateColors, random } from "remotion";
 import { jsx as jsx182, jsxs as jsxs86, Fragment as Fragment26 } from "react/jsx-runtime";
 var SplitterElement = ({ children, type, sticky }) => {
-  const context = useContext62(SplitterContext);
+  const context = useContext61(SplitterContext);
   const style9 = useMemo102(() => {
     return {
       flex: (type === "flexer" ? context.flexValue : 1 - context.flexValue) * 1000,
@@ -19592,7 +19581,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext63, useEffect as useEffect60, useRef as useRef35, useState as useState66 } from "react";
+import { useContext as useContext62, useEffect as useEffect60, useRef as useRef35, useState as useState65 } from "react";
 import { jsx as jsx183 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19602,11 +19591,11 @@ var containerColumn2 = {
   width: SPLITTER_HANDLE_SIZE
 };
 var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
-  const context = useContext63(SplitterContext);
+  const context = useContext62(SplitterContext);
   if (!context) {
     throw new Error("Cannot find splitter context");
   }
-  const [lastPointerUp, setLastPointerUp] = useState66(() => Date.now());
+  const [lastPointerUp, setLastPointerUp] = useState65(() => Date.now());
   const ref2 = useRef35(null);
   useEffect60(() => {
     if (context.isDragging.current) {
@@ -19757,7 +19746,7 @@ var row5 = {
   minHeight: 0
 };
 var useResponsiveSidebarStatus = () => {
-  const { sidebarCollapsedStateLeft } = useContext64(SidebarContext);
+  const { sidebarCollapsedStateLeft } = useContext63(SidebarContext);
   const responsiveLeftStatus = useBreakpoint(1200) ? "collapsed" : "expanded";
   const actualStateLeft = useMemo103(() => {
     if (sidebarCollapsedStateLeft === "collapsed") {
@@ -19771,9 +19760,9 @@ var useResponsiveSidebarStatus = () => {
   return actualStateLeft;
 };
 var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelayInMilliseconds }) => {
-  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext64(SidebarContext);
+  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext63(SidebarContext);
   const rulersAreVisible = useIsRulerVisible();
-  const { canvasContent } = useContext64(Internals45.CompositionManager);
+  const { canvasContent } = useContext63(Internals45.CompositionManager);
   const actualStateLeft = useResponsiveSidebarStatus();
   const actualStateRight = useMemo103(() => {
     if (sidebarCollapsedStateRight === "collapsed") {
@@ -19895,7 +19884,7 @@ var style9 = {
   position: "relative"
 };
 var SidebarCollapserControls = () => {
-  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext65(SidebarContext);
+  const { setSidebarCollapsedState, sidebarCollapsedStateRight } = useContext64(SidebarContext);
   const keybindings = useKeybinding();
   const leftSidebarStatus = useResponsiveSidebarStatus();
   const leftIcon = useCallback96((color) => {
@@ -20033,10 +20022,10 @@ var SidebarCollapserControls = () => {
 // src/components/UndoRedoButtons.tsx
 import {
   useCallback as useCallback97,
-  useContext as useContext66,
+  useContext as useContext65,
   useEffect as useEffect63,
   useRef as useRef36,
-  useState as useState67
+  useState as useState66
 } from "react";
 
 // src/icons/redo.tsx
@@ -20072,9 +20061,9 @@ var iconStyle5 = {
   height: 16
 };
 var UndoRedoButtons = () => {
-  const [undoFile, setUndoFile] = useState67(null);
-  const [redoFile, setRedoFile] = useState67(null);
-  const { subscribeToEvent } = useContext66(StudioServerConnectionCtx);
+  const [undoFile, setUndoFile] = useState66(null);
+  const [redoFile, setRedoFile] = useState66(null);
+  const { subscribeToEvent } = useContext65(StudioServerConnectionCtx);
   const keybindings = useKeybinding();
   const undoInFlight = useRef36(false);
   const redoInFlight = useRef36(false);
@@ -20179,10 +20168,10 @@ var UndoRedoButtons = () => {
 // src/components/UpdateCheck.tsx
 import {
   useCallback as useCallback98,
-  useContext as useContext67,
+  useContext as useContext66,
   useEffect as useEffect64,
   useMemo as useMemo104,
-  useState as useState68
+  useState as useState67
 } from "react";
 import { VERSION } from "remotion";
 import { jsx as jsx189 } from "react/jsx-runtime";
@@ -20198,10 +20187,10 @@ var buttonStyle3 = {
   justifyContent: "center"
 };
 var UpdateCheck = () => {
-  const [info, setInfo] = useState68(null);
-  const { setSelectedModal } = useContext67(ModalsContext);
+  const [info, setInfo] = useState67(null);
+  const { setSelectedModal } = useContext66(ModalsContext);
   const { tabIndex } = useZIndex();
-  const [knownBugs, setKnownBugs] = useState68(null);
+  const [knownBugs, setKnownBugs] = useState67(null);
   const hasKnownBugs = useMemo104(() => {
     return knownBugs && knownBugs.length > 0;
   }, [knownBugs]);
@@ -20297,7 +20286,7 @@ var flex2 = {
   flex: 1
 };
 var MenuToolbar = ({ readOnlyStudio }) => {
-  const [selected, setSelected] = useState69(null);
+  const [selected, setSelected] = useState68(null);
   const mobileLayout = useMobileLayout();
   const fixedWidthRight = useMemo105(() => {
     return {
@@ -20403,7 +20392,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import React150, { useContext as useContext80, useMemo as useMemo123 } from "react";
+import React150, { useContext as useContext79, useMemo as useMemo123 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -20450,7 +20439,8 @@ var getTimelineNestedLevel = (sequence, allSequences, depth) => {
   if (!parentSequence) {
     throw new Error("has parentId but no parent");
   }
-  return getTimelineNestedLevel(parentSequence, allSequences, depth + 1);
+  const parentContributes = parentSequence.showInTimeline;
+  return getTimelineNestedLevel(parentSequence, allSequences, parentContributes ? depth + 1 : depth);
 };
 
 // src/helpers/get-timeline-sequence-hash.ts
@@ -20499,6 +20489,19 @@ var getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}, nonceR
 };
 
 // src/helpers/calculate-timeline.ts
+var getInheritedLoopDisplay = (sequence, sequences) => {
+  if (sequence.loopDisplay) {
+    return sequence.loopDisplay;
+  }
+  if (!sequence.parent) {
+    return;
+  }
+  const parent = sequences.find((s) => s.id === sequence.parent);
+  if (!parent) {
+    return;
+  }
+  return getInheritedLoopDisplay(parent, sequences);
+};
 var calculateTimeline = ({
   sequences
 }) => {
@@ -20527,7 +20530,8 @@ var calculateTimeline = ({
       sequence: {
         ...sequence,
         from: visibleStart,
-        duration: visibleDuration
+        duration: visibleDuration,
+        loopDisplay: sequence.type === "audio" || sequence.type === "video" ? getInheritedLoopDisplay(sequence, sortedSequences) : sequence.loopDisplay
       },
       depth: getTimelineNestedLevel(sequence, sortedSequences, 0),
       hash: actualHash,
@@ -20554,7 +20558,7 @@ var calculateTimeline = ({
 };
 
 // src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback100, useMemo as useMemo106, useState as useState70 } from "react";
+import { createContext as createContext21, useCallback as useCallback100, useMemo as useMemo106, useState as useState69 } from "react";
 import { jsx as jsx191 } from "react/jsx-runtime";
 var ExpandedTracksContext = createContext21({
   expandedTracks: {},
@@ -20563,7 +20567,7 @@ var ExpandedTracksContext = createContext21({
   }
 });
 var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState70({});
+  const [expandedTracks, setExpandedTracks] = useState69({});
   const toggleTrack = useCallback100((id) => {
     setExpandedTracks((prev) => ({
       ...prev,
@@ -20620,16 +20624,16 @@ var MaxTimelineTracksReached = () => {
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback101,
-  useContext as useContext70,
+  useContext as useContext69,
   useEffect as useEffect65,
   useMemo as useMemo108,
   useRef as useRef37,
-  useState as useState71
+  useState as useState70
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
-import { createRef as createRef10, useContext as useContext68 } from "react";
+import { createRef as createRef10, useContext as useContext67 } from "react";
 import { Internals as Internals46 } from "remotion";
 import { jsx as jsx192, jsxs as jsxs92, Fragment as Fragment29 } from "react/jsx-runtime";
 var areaHighlight = {
@@ -20644,7 +20648,7 @@ var outMarkerAreaRef = createRef10();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals46.useUnsafeVideoConfig();
-  const timelineWidth = useContext68(TimelineWidthContext);
+  const timelineWidth = useContext67(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
   }
@@ -20671,7 +20675,7 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef11, useContext as useContext69, useMemo as useMemo107 } from "react";
+import { createRef as createRef11, useContext as useContext68, useMemo as useMemo107 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
 import { jsx as jsx193 } from "react/jsx-runtime";
 var line3 = {
@@ -20704,7 +20708,7 @@ var TimelineInOutPointerHandle = ({
   type,
   atFrame
 }) => {
-  const timelineWidth = useContext69(TimelineWidthContext);
+  const timelineWidth = useContext68(TimelineWidthContext);
   if (timelineWidth === null) {
     return null;
   }
@@ -20740,8 +20744,8 @@ var getClientXWithScroll = (x) => {
 };
 var TimelineDragHandler = () => {
   const video = Internals47.useUnsafeVideoConfig();
-  const { zoom: zoomMap } = useContext70(TimelineZoomCtx);
-  const { canvasContent } = useContext70(Internals47.CompositionManager);
+  const { zoom: zoomMap } = useContext69(TimelineZoomCtx);
+  const { canvasContent } = useContext69(Internals47.CompositionManager);
   const containerStyle2 = useMemo108(() => {
     if (!canvasContent || canvasContent.type !== "composition") {
       return {};
@@ -20769,10 +20773,10 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState71({
+  const [inOutDragging, setInOutDragging] = useState70({
     dragging: false
   });
-  const timelineWidth = useContext70(TimelineWidthContext);
+  const timelineWidth = useContext69(TimelineWidthContext);
   const get = useCallback101((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
@@ -20783,7 +20787,7 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState71({
+  const [dragging, setDragging] = useState70({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
@@ -21166,14 +21170,14 @@ import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
 import { useRef as useRef41 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
-import { useCallback as useCallback110, useContext as useContext74, useMemo as useMemo116 } from "react";
+import { useCallback as useCallback110, useContext as useContext73, useMemo as useMemo116 } from "react";
 import { Internals as Internals50 } from "remotion";
 
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React137, { useMemo as useMemo113 } from "react";
 
 // src/components/Timeline/TimelineFieldRow.tsx
-import { useCallback as useCallback106, useContext as useContext71, useMemo as useMemo112 } from "react";
+import { useCallback as useCallback106, useContext as useContext70, useMemo as useMemo112 } from "react";
 import { Internals as Internals48 } from "remotion";
 
 // src/components/Timeline/TimelineBooleanField.tsx
@@ -21202,7 +21206,7 @@ var TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSav
 };
 
 // src/components/Timeline/TimelineNumberField.tsx
-import { useCallback as useCallback103, useMemo as useMemo109, useState as useState72 } from "react";
+import { useCallback as useCallback103, useMemo as useMemo109, useState as useState71 } from "react";
 
 // src/components/Timeline/timeline-field-utils.ts
 var getDecimalPlaces = (num) => {
@@ -21225,7 +21229,7 @@ var TimelineNumberField = ({
   onDragEnd,
   codeValue
 }) => {
-  const [dragValue, setDragValue] = useState72(null);
+  const [dragValue, setDragValue] = useState71(null);
   const onValueChange = useCallback103((newVal) => {
     setDragValue(newVal);
     onDragValueChange(field.key, newVal);
@@ -21277,7 +21281,7 @@ var TimelineNumberField = ({
 };
 
 // src/components/Timeline/TimelineRotationField.tsx
-import { useCallback as useCallback104, useMemo as useMemo110, useState as useState73 } from "react";
+import { useCallback as useCallback104, useMemo as useMemo110, useState as useState72 } from "react";
 import { jsx as jsx197 } from "react/jsx-runtime";
 var unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
 var unitToDegrees = {
@@ -21307,7 +21311,7 @@ var TimelineRotationField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragValue, setDragValue] = useState73(null);
+  const [dragValue, setDragValue] = useState72(null);
   const degrees = useMemo110(() => parseCssRotationToDegrees(String(effectiveValue ?? "0deg")), [effectiveValue]);
   const onValueChange = useCallback104((newVal) => {
     setDragValue(newVal);
@@ -21365,7 +21369,7 @@ var TimelineRotationField = ({
 };
 
 // src/components/Timeline/TimelineTranslateField.tsx
-import { useCallback as useCallback105, useMemo as useMemo111, useState as useState74 } from "react";
+import { useCallback as useCallback105, useMemo as useMemo111, useState as useState73 } from "react";
 import { jsx as jsx198, jsxs as jsxs94 } from "react/jsx-runtime";
 var leftDraggerStyle = {
   paddingLeft: 0
@@ -21394,8 +21398,8 @@ var TimelineTranslateField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragX, setDragX] = useState74(null);
-  const [dragY, setDragY] = useState74(null);
+  const [dragX, setDragX] = useState73(null);
+  const [dragY, setDragY] = useState73(null);
   const [codeX, codeY] = useMemo111(() => parseTranslate(String(effectiveValue ?? "0px 0px")), [effectiveValue]);
   const makeString = useCallback105((x, y) => `${x}px ${y}px`, []);
   const step = field.fieldSchema.type === "translate" ? field.fieldSchema.step ?? 1 : 1;
@@ -21669,7 +21673,7 @@ var TimelineFieldRow = ({
     clearDragOverrides,
     dragOverrides,
     codeValues: allPropStatuses
-  } = useContext71(Internals48.VisualModeOverridesContext);
+  } = useContext70(Internals48.VisualModeOverridesContext);
   const propStatuses = allPropStatuses[overrideId] ?? null;
   const propStatus = propStatuses?.[field.key] ?? null;
   const dragOverrideValue = useMemo112(() => {
@@ -21682,7 +21686,7 @@ var TimelineFieldRow = ({
     defaultValue: field.fieldSchema.default,
     shouldResortToDefaultValueIfUndefined: true
   });
-  const { setCodeValues } = useContext71(Internals48.VisualModeOverridesContext);
+  const { setCodeValues } = useContext70(Internals48.VisualModeOverridesContext);
   const onSave = useCallback106((key4, value) => {
     if (!propStatuses || !validatedLocation || !nodePath) {
       return Promise.reject(new Error("Cannot save"));
@@ -21896,7 +21900,7 @@ var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
 
 // src/components/Timeline/TimelineStack/index.tsx
 import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
-import { useCallback as useCallback108, useContext as useContext72, useMemo as useMemo114, useState as useState75 } from "react";
+import { useCallback as useCallback108, useContext as useContext71, useMemo as useMemo114, useState as useState74 } from "react";
 import { SourceMapConsumer as SourceMapConsumer3 } from "source-map";
 import { jsx as jsx203, jsxs as jsxs97, Fragment as Fragment30 } from "react/jsx-runtime";
 var publicPath = window.remotion_publicPath === "/" ? "" : window.remotion_publicPath;
@@ -21905,11 +21909,11 @@ SourceMapConsumer3.initialize({
   "lib/mappings.wasm": withoutSlashInTheEnd + SOURCE_MAP_ENDPOINT
 });
 var TimelineStack = ({ isCompact, sequence, originalLocation }) => {
-  const [stackHovered, setStackHovered] = useState75(false);
-  const [titleHovered, setTitleHovered] = useState75(false);
-  const [opening, setOpening] = useState75(false);
+  const [stackHovered, setStackHovered] = useState74(false);
+  const [titleHovered, setTitleHovered] = useState74(false);
+  const [opening, setOpening] = useState74(false);
   const selectAsset = useSelectAsset();
-  const connectionStatus = useContext72(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext71(StudioServerConnectionCtx).previewServerState.type;
   const assetPath = useMemo114(() => {
     if (sequence.type !== "video" && sequence.type !== "audio" && sequence.type !== "image") {
       return null;
@@ -22060,15 +22064,15 @@ var TimelineStack = ({ isCompact, sequence, originalLocation }) => {
 // src/components/Timeline/use-sequence-props-subscription.ts
 import {
   useCallback as useCallback109,
-  useContext as useContext73,
+  useContext as useContext72,
   useEffect as useEffect66,
   useMemo as useMemo115,
   useRef as useRef38,
-  useState as useState76
+  useState as useState75
 } from "react";
 import { Internals as Internals49 } from "remotion";
 var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnabled) => {
-  const { setCodeValues } = useContext73(Internals49.VisualModeOverridesContext);
+  const { setCodeValues } = useContext72(Internals49.VisualModeOverridesContext);
   const overrideId = sequence.controls?.overrideId ?? null;
   const setPropStatusesForSequence = useCallback109((statuses) => {
     if (!overrideId) {
@@ -22076,7 +22080,7 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
     }
     setCodeValues(overrideId, statuses);
   }, [overrideId, setCodeValues]);
-  const { previewServerState: state, subscribeToEvent } = useContext73(StudioServerConnectionCtx);
+  const { previewServerState: state, subscribeToEvent } = useContext72(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const schemaFields = useMemo115(() => getSchemaFields(sequence.controls), [sequence.controls]);
   const schemaKeysString = useMemo115(() => schemaFields ? schemaFields.map((f) => f.key).join(",") : null, [schemaFields]);
@@ -22100,8 +22104,8 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
   const currentLocationColumn = useRef38(locationColumn);
   currentLocationColumn.current = locationColumn;
   const nodePathRef = useRef38(null);
-  const [nodePath, setNodePath] = useState76(null);
-  const [jsxInMapCallback, setJsxInMapCallback] = useState76(false);
+  const [nodePath, setNodePath] = useState75(null);
+  const [jsxInMapCallback, setJsxInMapCallback] = useState75(false);
   const isMountedRef = useRef38(true);
   const setNodePathBoth = useCallback109((next) => {
     nodePathRef.current = next;
@@ -22242,12 +22246,12 @@ var arrowButton = {
   lineHeight: 1
 };
 var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-  const { previewServerState } = useContext74(StudioServerConnectionCtx);
+  const { previewServerState } = useContext73(StudioServerConnectionCtx);
   const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
   const previewConnected = previewServerState.type === "connected";
   const visualModeActive = visualModeEnvEnabled && previewConnected;
-  const { hidden, setHidden } = useContext74(Internals50.SequenceVisibilityToggleContext);
-  const { expandedTracks, toggleTrack } = useContext74(ExpandedTracksContext);
+  const { hidden, setHidden } = useContext73(Internals50.SequenceVisibilityToggleContext);
+  const { expandedTracks, toggleTrack } = useContext73(ExpandedTracksContext);
   const originalLocation = useResolvedStack(sequence.stack ?? null);
   const { nodePath, jsxInMapCallback } = useSequencePropsSubscription(sequence, originalLocation, visualModeActive);
   const validatedLocation = useMemo116(() => {
@@ -22450,7 +22454,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext75, useEffect as useEffect68, useMemo as useMemo117, useRef as useRef40 } from "react";
+import { useContext as useContext74, useEffect as useEffect68, useMemo as useMemo117, useRef as useRef40 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -22605,7 +22609,7 @@ var TimelineTimePadding = () => {
   });
 };
 var TimelineTimeIndicators = () => {
-  const sliderTrack = useContext75(TimelineWidthContext);
+  const sliderTrack = useContext74(TimelineWidthContext);
   const video = Internals52.useVideo();
   if (sliderTrack === null) {
     return null;
@@ -22728,15 +22732,15 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePinchZoom.tsx
-import { useCallback as useCallback112, useContext as useContext76, useEffect as useEffect69, useRef as useRef42 } from "react";
+import { useCallback as useCallback112, useContext as useContext75, useEffect as useEffect69, useRef as useRef42 } from "react";
 import { Internals as Internals53 } from "remotion";
 var ZOOM_WHEEL_DELTA = 0.06;
 var TimelinePinchZoom = () => {
   const isVideoComposition = useIsVideoComposition();
   const videoConfig = Internals53.useUnsafeVideoConfig();
-  const { canvasContent } = useContext76(Internals53.CompositionManager);
-  const { zoom, setZoom } = useContext76(TimelineZoomCtx);
-  const { editorZoomGestures } = useContext76(EditorZoomGesturesContext);
+  const { canvasContent } = useContext75(Internals53.CompositionManager);
+  const { zoom, setZoom } = useContext75(TimelineZoomCtx);
+  const { editorZoomGestures } = useContext75(EditorZoomGesturesContext);
   const zoomRef = useRef42(zoom);
   zoomRef.current = zoom;
   const pinchBaseZoomRef = useRef42(null);
@@ -22945,15 +22949,15 @@ var TimelinePinchZoom = () => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext77, useEffect as useEffect70 } from "react";
+import { useContext as useContext76, useEffect as useEffect70 } from "react";
 import { Internals as Internals54 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
   const video = Internals54.useVideo();
   const timelineContext = Internals54.useTimelineContext();
   const timelinePosition = Internals54.Timeline.useTimelinePosition();
-  const { canvasContent } = useContext77(Internals54.CompositionManager);
-  const { zoom: zoomMap } = useContext77(TimelineZoomCtx);
+  const { canvasContent } = useContext76(Internals54.CompositionManager);
+  const { zoom: zoomMap } = useContext76(TimelineZoomCtx);
   const compositionId = canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const zoom = compositionId ? zoomMap[compositionId] ?? TIMELINE_MIN_ZOOM : null;
   if (zoom && video) {
@@ -23039,10 +23043,10 @@ var TimelineScrollable = ({ children }) => {
 };
 
 // src/components/Timeline/TimelineTracks.tsx
-import { useContext as useContext79, useMemo as useMemo122 } from "react";
+import { useContext as useContext78, useMemo as useMemo122 } from "react";
 
 // src/components/Timeline/TimelineSequence.tsx
-import { useContext as useContext78, useMemo as useMemo121 } from "react";
+import { useContext as useContext77, useMemo as useMemo121 } from "react";
 import { Internals as Internals56, useCurrentFrame as useCurrentFrame2 } from "remotion";
 
 // src/helpers/get-timeline-sequence-layout.ts
@@ -23114,7 +23118,7 @@ var getTimelineSequenceLayout = ({
 // src/helpers/use-max-media-duration.ts
 import { getVideoMetadata as getVideoMetadata2 } from "@remotion/media-utils";
 import { ALL_FORMATS as ALL_FORMATS2, Input as Input2, InputDisposedError, UrlSource as UrlSource2 } from "mediabunny";
-import { useEffect as useEffect71, useState as useState77 } from "react";
+import { useEffect as useEffect71, useState as useState76 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -23127,7 +23131,7 @@ var getSrc = (s) => {
 };
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
-  const [maxMediaDuration, setMaxMediaDuration] = useState77(src ? cache.get(src) ?? null : Infinity);
+  const [maxMediaDuration, setMaxMediaDuration] = useState76(src ? cache.get(src) ?? null : Infinity);
   useEffect71(() => {
     if (!src) {
       return;
@@ -23160,9 +23164,16 @@ var useMaxMediaDuration = (s, fps) => {
 };
 
 // src/components/AudioWaveform.tsx
-import { useEffect as useEffect72, useMemo as useMemo119, useRef as useRef43, useState as useState78 } from "react";
+import { useEffect as useEffect72, useMemo as useMemo119, useRef as useRef43, useState as useState77 } from "react";
 import { Internals as Internals55 } from "remotion";
 
+// src/make-audio-waveform-worker.ts
+var makeAudioWaveformWorker = () => {
+  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
+    type: "module"
+  });
+};
+
 // src/components/parse-color.ts
 var colorCache = new Map;
 var parseColor = (color) => {
@@ -23238,12 +23249,107 @@ var drawBars = (canvas, peaks, color, volume, width) => {
 
 // src/components/load-waveform-peaks.ts
 import { ALL_FORMATS as ALL_FORMATS3, AudioSampleSink, Input as Input3, UrlSource as UrlSource3 } from "mediabunny";
+
+// src/components/waveform-peak-processor.ts
+var emitWaveformProgress = ({
+  completedPeaks,
+  final,
+  onProgress,
+  peaks,
+  totalPeaks
+}) => {
+  onProgress?.({
+    peaks,
+    completedPeaks,
+    totalPeaks,
+    final
+  });
+};
+var createWaveformPeakProcessor = ({
+  totalPeaks,
+  samplesPerPeak,
+  onProgress,
+  progressIntervalInMs,
+  now
+}) => {
+  const peaks = new Float32Array(totalPeaks);
+  let peakIndex = 0;
+  let peakMax = 0;
+  let sampleInPeak = 0;
+  let lastProgressAt = 0;
+  let lastProgressPeak = 0;
+  const emitProgress = (force) => {
+    const timestamp = now();
+    if (!force && peakIndex === lastProgressPeak && sampleInPeak === 0) {
+      return;
+    }
+    if (!force && timestamp - lastProgressAt < progressIntervalInMs) {
+      return;
+    }
+    lastProgressAt = timestamp;
+    lastProgressPeak = peakIndex;
+    emitWaveformProgress({
+      peaks,
+      completedPeaks: peakIndex,
+      totalPeaks,
+      final: force,
+      onProgress
+    });
+  };
+  return {
+    peaks,
+    processSampleChunk: (floats, channels) => {
+      const frameCount = Math.floor(floats.length / Math.max(1, channels));
+      for (let frame2 = 0;frame2 < frameCount; frame2++) {
+        let framePeak = 0;
+        for (let channel = 0;channel < channels; channel++) {
+          const sampleIndex = frame2 * channels + channel;
+          const abs = Math.abs(floats[sampleIndex] ?? 0);
+          if (abs > framePeak) {
+            framePeak = abs;
+          }
+        }
+        if (framePeak > peakMax) {
+          peakMax = framePeak;
+        }
+        sampleInPeak++;
+        if (sampleInPeak >= samplesPerPeak) {
+          if (peakIndex < totalPeaks) {
+            peaks[peakIndex] = peakMax;
+          }
+          peakIndex++;
+          peakMax = 0;
+          sampleInPeak = 0;
+        }
+      }
+      emitProgress(false);
+    },
+    finalize: () => {
+      if (sampleInPeak > 0 && peakIndex < totalPeaks) {
+        peaks[peakIndex] = peakMax;
+        peakIndex++;
+      }
+      emitProgress(true);
+    }
+  };
+};
+
+// src/components/load-waveform-peaks.ts
 var TARGET_SAMPLE_RATE = 100;
+var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 var peaksCache = new Map;
-async function loadWaveformPeaks(url, signal) {
+async function loadWaveformPeaks(url, signal, options) {
   const cached = peaksCache.get(url);
-  if (cached)
+  if (cached) {
+    emitWaveformProgress({
+      peaks: cached,
+      completedPeaks: cached.length,
+      totalPeaks: cached.length,
+      final: true,
+      onProgress: options?.onProgress
+    });
     return cached;
+  }
   const input2 = new Input3({
     formats: ALL_FORMATS3,
     source: new UrlSource3(url)
@@ -23256,12 +23362,15 @@ async function loadWaveformPeaks(url, signal) {
     const { sampleRate } = audioTrack;
     const durationInSeconds = await audioTrack.computeDuration();
     const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
-    const samplesPerPeak = Math.floor(sampleRate / TARGET_SAMPLE_RATE);
-    const peaks = new Float32Array(totalPeaks);
-    let peakIndex = 0;
-    let peakMax = 0;
-    let sampleInPeak = 0;
+    const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
     const sink = new AudioSampleSink(audioTrack);
+    const processor = createWaveformPeakProcessor({
+      totalPeaks,
+      samplesPerPeak,
+      onProgress: options?.onProgress,
+      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
+      now: () => Date.now()
+    });
     for await (const sample of sink.samples()) {
       if (signal.aborted) {
         sample.close();
@@ -23273,25 +23382,12 @@ async function loadWaveformPeaks(url, signal) {
       });
       const floats = new Float32Array(bytesNeeded / 4);
       sample.copyTo(floats, { format: "f32", planeIndex: 0 });
+      const channels = Math.max(1, sample.numberOfChannels);
       sample.close();
-      for (let i = 0;i < floats.length; i++) {
-        const abs = Math.abs(floats[i]);
-        if (abs > peakMax)
-          peakMax = abs;
-        sampleInPeak++;
-        if (sampleInPeak >= samplesPerPeak) {
-          if (peakIndex < totalPeaks) {
-            peaks[peakIndex] = peakMax;
-          }
-          peakIndex++;
-          peakMax = 0;
-          sampleInPeak = 0;
-        }
-      }
-    }
-    if (sampleInPeak > 0 && peakIndex < totalPeaks) {
-      peaks[peakIndex] = peakMax;
+      processor.processSampleChunk(floats, channels);
     }
+    processor.finalize();
+    const { peaks } = processor;
     peaksCache.set(url, peaks);
     return peaks;
   } finally {
@@ -23299,8 +23395,50 @@ async function loadWaveformPeaks(url, signal) {
   }
 }
 
+// src/components/looped-media-timeline.ts
+var shouldTileLoopDisplay = (loopDisplay) => {
+  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+var getLoopDisplayWidth = ({
+  visualizationWidth,
+  loopDisplay
+}) => {
+  if (!shouldTileLoopDisplay(loopDisplay)) {
+    return visualizationWidth;
+  }
+  return visualizationWidth / loopDisplay.numberOfTimes;
+};
+
+// src/components/slice-waveform-peaks.ts
+var sliceWaveformPeaks = ({
+  durationInFrames,
+  fps,
+  peaks,
+  playbackRate,
+  startFrom
+}) => {
+  if (peaks.length === 0) {
+    return peaks;
+  }
+  const startTimeInSeconds = startFrom / fps;
+  const durationInSeconds = durationInFrames / fps * playbackRate;
+  const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
+  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
+  return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
+};
+
 // src/components/AudioWaveform.tsx
 import { jsx as jsx209, jsxs as jsxs101 } from "react/jsx-runtime";
+var EMPTY_PEAKS = new Float32Array(0);
+var canRetryCanvasTransfer = (err) => {
+  return err instanceof DOMException && err.name === "InvalidStateError";
+};
+var canUseAudioWaveformWorker = () => {
+  if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof HTMLCanvasElement === "undefined") {
+    return false;
+  }
+  return "transferControlToOffscreen" in HTMLCanvasElement.prototype;
+};
 var container42 = {
   display: "flex",
   flexDirection: "row",
@@ -23319,11 +23457,41 @@ var errorMessage = {
   opacity: 0.75
 };
 var waveformCanvasStyle = {
-  pointerEvents: "none"
+  pointerEvents: "none",
+  width: "100%",
+  height: "100%"
 };
 var volumeCanvasStyle = {
   position: "absolute"
 };
+var drawLoopedWaveform = ({
+  canvas,
+  peaks,
+  volume,
+  visualizationWidth,
+  loopWidth
+}) => {
+  const h = canvas.height;
+  const w = Math.ceil(visualizationWidth);
+  const targetCanvas = document.createElement("canvas");
+  targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
+  targetCanvas.height = h;
+  drawBars(targetCanvas, peaks, "rgba(255, 255, 255, 0.6)", volume, targetCanvas.width);
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+  const pattern = ctx.createPattern(targetCanvas, "repeat-x");
+  if (!pattern) {
+    return;
+  }
+  pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+  ctx.clearRect(0, 0, w, h);
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, 0, w, h);
+};
 var AudioWaveform = ({
   src,
   startFrom,
@@ -23331,10 +23499,13 @@ var AudioWaveform = ({
   visualizationWidth,
   volume,
   doesVolumeChange,
-  playbackRate
+  playbackRate,
+  loopDisplay
 }) => {
-  const [peaks, setPeaks] = useState78(null);
-  const [error, setError] = useState78(null);
+  const [peaks, setPeaks] = useState77(null);
+  const [error, setError] = useState77(null);
+  const [waveformCanvasKey, setWaveformCanvasKey] = useState77(0);
+  const canUseWorkerPath = useMemo119(() => canUseAudioWaveformWorker(), []);
   const vidConf = Internals55.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
@@ -23342,8 +23513,15 @@ var AudioWaveform = ({
   const containerRef = useRef43(null);
   const waveformCanvas = useRef43(null);
   const volumeCanvas = useRef43(null);
+  const waveformWorker = useRef43(null);
+  const hasTransferredCanvas = useRef43(false);
+  const latestRequestId = useRef43(0);
   useEffect72(() => {
+    if (canUseWorkerPath) {
+      return;
+    }
     const controller = new AbortController;
+    setPeaks(null);
     setError(null);
     loadWaveformPeaks(src, controller.signal).then((p) => {
       if (!controller.signal.aborted) {
@@ -23355,30 +23533,127 @@ var AudioWaveform = ({
       }
     });
     return () => controller.abort();
-  }, [src]);
+  }, [canUseWorkerPath, src]);
+  useEffect72(() => {
+    if (!canUseWorkerPath) {
+      return;
+    }
+    const canvasElement = waveformCanvas.current;
+    if (!canvasElement || hasTransferredCanvas.current) {
+      return;
+    }
+    const worker = makeAudioWaveformWorker();
+    waveformWorker.current = worker;
+    worker.addEventListener("message", (event) => {
+      if (event.data.type === "error") {
+        if (event.data.requestId !== latestRequestId.current) {
+          return;
+        }
+        setError(new Error(event.data.message));
+      }
+    });
+    let offscreen;
+    try {
+      offscreen = canvasElement.transferControlToOffscreen();
+    } catch (err) {
+      worker.terminate();
+      waveformWorker.current = null;
+      if (canRetryCanvasTransfer(err)) {
+        setWaveformCanvasKey((key4) => key4 + 1);
+        return;
+      }
+      throw err;
+    }
+    hasTransferredCanvas.current = true;
+    worker.postMessage({ type: "init", canvas: offscreen }, [offscreen]);
+    return () => {
+      worker.postMessage({ type: "dispose" });
+      worker.terminate();
+      waveformWorker.current = null;
+      hasTransferredCanvas.current = false;
+    };
+  }, [canUseWorkerPath, waveformCanvasKey]);
   const portionPeaks = useMemo119(() => {
-    if (!peaks || peaks.length === 0) {
+    if (canUseWorkerPath || !peaks) {
       return null;
     }
-    const startTimeInSeconds = startFrom / vidConf.fps;
-    const durationInSeconds = durationInFrames / vidConf.fps * playbackRate;
-    const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
-    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
-    return peaks.slice(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-  }, [peaks, startFrom, durationInFrames, vidConf.fps, playbackRate]);
+    return sliceWaveformPeaks({
+      durationInFrames: shouldTileLoopDisplay(loopDisplay) ? loopDisplay.durationInFrames : durationInFrames,
+      fps: vidConf.fps,
+      peaks,
+      playbackRate,
+      startFrom
+    });
+  }, [
+    canUseWorkerPath,
+    durationInFrames,
+    loopDisplay,
+    peaks,
+    playbackRate,
+    startFrom,
+    vidConf.fps
+  ]);
   useEffect72(() => {
     const { current: canvasElement } = waveformCanvas;
     const { current: containerElement } = containerRef;
-    if (!canvasElement || !containerElement || !portionPeaks || portionPeaks.length === 0) {
+    if (!canvasElement || !containerElement) {
       return;
     }
     const h = containerElement.clientHeight;
     const w = Math.ceil(visualizationWidth);
+    const vol = typeof volume === "number" ? volume : 1;
+    if (canUseWorkerPath) {
+      const worker = waveformWorker.current;
+      if (!worker || !hasTransferredCanvas.current) {
+        return;
+      }
+      latestRequestId.current += 1;
+      setError(null);
+      const message = {
+        type: "render",
+        requestId: latestRequestId.current,
+        src,
+        width: w,
+        height: h,
+        volume: vol,
+        startFrom,
+        durationInFrames,
+        fps: vidConf.fps,
+        playbackRate,
+        loopDisplay
+      };
+      worker.postMessage(message);
+      return;
+    }
     canvasElement.width = w;
     canvasElement.height = h;
-    const vol = typeof volume === "number" ? volume : 1;
-    drawBars(canvasElement, portionPeaks, "rgba(255, 255, 255, 0.6)", vol, w);
-  }, [portionPeaks, visualizationWidth, volume]);
+    if (shouldTileLoopDisplay(loopDisplay)) {
+      drawLoopedWaveform({
+        canvas: canvasElement,
+        peaks: portionPeaks ?? EMPTY_PEAKS,
+        volume: vol,
+        visualizationWidth,
+        loopWidth: getLoopDisplayWidth({
+          visualizationWidth,
+          loopDisplay
+        })
+      });
+    } else {
+      drawBars(canvasElement, portionPeaks ?? EMPTY_PEAKS, "rgba(255, 255, 255, 0.6)", vol, w);
+    }
+  }, [
+    canUseWorkerPath,
+    durationInFrames,
+    loopDisplay,
+    playbackRate,
+    portionPeaks,
+    src,
+    startFrom,
+    vidConf.fps,
+    visualizationWidth,
+    volume,
+    waveformCanvasKey
+  ]);
   useEffect72(() => {
     const { current: volumeCanvasElement } = volumeCanvas;
     const { current: containerElement } = containerRef;
@@ -23420,7 +23695,7 @@ var AudioWaveform = ({
       })
     });
   }
-  if (!peaks) {
+  if (!canUseWorkerPath && !peaks) {
     return null;
   }
   return /* @__PURE__ */ jsxs101("div", {
@@ -23430,7 +23705,7 @@ var AudioWaveform = ({
       /* @__PURE__ */ jsx209("canvas", {
         ref: waveformCanvas,
         style: waveformCanvasStyle
-      }),
+      }, waveformCanvasKey),
       /* @__PURE__ */ jsx209("canvas", {
         ref: volumeCanvas,
         style: volumeCanvasStyle
@@ -23453,7 +23728,8 @@ var width = {
   position: "relative"
 };
 var icon4 = {
-  height: 12
+  height: 12,
+  filter: "drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))"
 };
 var Icon = () => /* @__PURE__ */ jsx210("svg", {
   viewBox: "0 0 512 512",
@@ -23463,44 +23739,23 @@ var Icon = () => /* @__PURE__ */ jsx210("svg", {
     d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z"
   })
 });
-var topLine = {
-  top: 0,
-  height: 2,
-  width: 1,
-  background: LIGHT_COLOR
-};
-var bottomLine = {
-  top: 0,
-  height: 2,
+var verticalLine = {
+  height: "100%",
   width: 1,
-  background: LIGHT_COLOR
-};
-var topContainer = {
-  justifyContent: "flex-start",
-  alignItems: "center"
+  background: "rgb(255,255,255, 0.5)"
 };
 var centerContainer = {
   justifyContent: "center",
   alignItems: "center"
 };
-var bottomContainer = {
-  justifyContent: "flex-end",
-  alignItems: "center"
-};
 var LoopedIndicator = () => {
   return /* @__PURE__ */ jsxs102("div", {
     style: width,
     children: [
       /* @__PURE__ */ jsx210(AbsoluteFill3, {
-        style: topContainer,
-        children: /* @__PURE__ */ jsx210("div", {
-          style: topLine
-        })
-      }),
-      /* @__PURE__ */ jsx210(AbsoluteFill3, {
-        style: bottomContainer,
+        style: centerContainer,
         children: /* @__PURE__ */ jsx210("div", {
-          style: bottomLine
+          style: verticalLine
         })
       }),
       /* @__PURE__ */ jsx210(AbsoluteFill3, {
@@ -23614,7 +23869,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect74, useMemo as useMemo120, useRef as useRef45, useState as useState79 } from "react";
+import { useEffect as useEffect74, useMemo as useMemo120, useRef as useRef45, useState as useState78 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -23972,11 +24227,12 @@ var TimelineVideoInfo = ({
   volume,
   doesVolumeChange,
   premountWidth,
-  postmountWidth
+  postmountWidth,
+  loopDisplay
 }) => {
   const { fps } = useVideoConfig5();
   const ref2 = useRef45(null);
-  const [error, setError] = useState79(null);
+  const [error, setError] = useState78(null);
   const aspectRatio = useRef45(getAspectRatioFromCache(src));
   useEffect74(() => {
     if (error) {
@@ -23995,25 +24251,54 @@ var TimelineVideoInfo = ({
       return;
     }
     current.appendChild(canvas);
+    const loopWidth = getLoopDisplayWidth({
+      visualizationWidth: naturalWidth,
+      loopDisplay
+    });
+    const shouldRepeatVideo = shouldTileLoopDisplay(loopDisplay);
+    const targetCanvas = shouldRepeatVideo ? document.createElement("canvas") : canvas;
+    targetCanvas.width = shouldRepeatVideo ? Math.max(1, Math.ceil(loopWidth)) : canvas.width;
+    targetCanvas.height = canvas.height;
+    const targetCtx = shouldRepeatVideo ? targetCanvas.getContext("2d") : ctx;
+    if (!targetCtx) {
+      current.removeChild(canvas);
+      return;
+    }
+    const repeatTarget = () => {
+      if (!shouldRepeatVideo) {
+        return;
+      }
+      const pattern = ctx.createPattern(targetCanvas, "repeat-x");
+      if (!pattern) {
+        return;
+      }
+      pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = pattern;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
     const filledSlots = new Map;
     const fromSeconds = trimBefore / fps;
-    const toSeconds = fromSeconds + durationInFrames * playbackRate / fps;
+    const visibleDurationInFrames = shouldRepeatVideo && loopDisplay ? loopDisplay.durationInFrames : durationInFrames;
+    const toSeconds = fromSeconds + visibleDurationInFrames * playbackRate / fps;
+    const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
-        naturalWidth,
+        naturalWidth: targetWidth,
         fromSeconds,
         toSeconds,
         aspectRatio: aspectRatio.current
       });
       fillWithCachedFrames({
-        ctx,
-        naturalWidth,
+        ctx: targetCtx,
+        naturalWidth: targetWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
         fromSeconds
       });
+      repeatTarget();
       const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
       if (unfilled.length === 0) {
         return () => {
@@ -24031,7 +24316,7 @@ var TimelineVideoInfo = ({
           filledSlots,
           fromSeconds,
           toSeconds,
-          naturalWidth,
+          naturalWidth: targetWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -24059,17 +24344,18 @@ var TimelineVideoInfo = ({
             filledSlots,
             fromSeconds,
             toSeconds,
-            naturalWidth,
+            naturalWidth: targetWidth,
             aspectRatio: aspectRatio.current
           });
           fillFrameWhereItFits({
-            ctx,
+            ctx: targetCtx,
             filledSlots,
-            visualizationWidth: naturalWidth,
+            visualizationWidth: targetWidth,
             frame: transformed,
             segmentDuration: toSeconds - fromSeconds,
             fromSeconds
           });
+          repeatTarget();
         } catch (e) {
           if (frame2) {
             frame2.close();
@@ -24085,13 +24371,14 @@ var TimelineVideoInfo = ({
         return;
       }
       fillWithCachedFrames({
-        ctx,
-        naturalWidth,
+        ctx: targetCtx,
+        naturalWidth: targetWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
         fromSeconds
       });
+      repeatTarget();
     }).catch((e) => {
       setError(e);
     });
@@ -24103,6 +24390,7 @@ var TimelineVideoInfo = ({
     durationInFrames,
     error,
     fps,
+    loopDisplay,
     naturalWidth,
     playbackRate,
     src,
@@ -24134,7 +24422,8 @@ var TimelineVideoInfo = ({
           durationInFrames,
           volume,
           doesVolumeChange,
-          playbackRate
+          playbackRate,
+          loopDisplay
         })
       })
     ]
@@ -24147,7 +24436,7 @@ var AUDIO_GRADIENT = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
 var VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
 var IMAGE_GRADIENT = "linear-gradient(to top, #2980b9, #3498db)";
 var TimelineSequence = ({ s }) => {
-  const windowWidth = useContext78(TimelineWidthContext);
+  const windowWidth = useContext77(TimelineWidthContext);
   if (windowWidth === null) {
     return null;
   }
@@ -24159,29 +24448,37 @@ var TimelineSequence = ({ s }) => {
 var Inner4 = ({ s, windowWidth }) => {
   const video = Internals56.useVideo();
   const maxMediaDuration = useMaxMediaDuration(s, video?.fps ?? 30);
+  const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
   if (!video) {
     throw new TypeError("Expected video config");
   }
   const frame2 = useCurrentFrame2();
   const relativeFrame = frame2 - s.from;
+  const displayDurationInFrames = s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration;
   const relativeFrameWithPremount = relativeFrame + (s.premountDisplay ?? 0);
-  const relativeFrameWithPostmount = relativeFrame - s.duration;
+  const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
   const roundedFrame = Math.round(relativeFrame * 100) / 100;
-  const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
-  const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < s.duration && !isInRange;
+  const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
+  const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < displayDurationInFrames && !isInRange;
   const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
   const { marginLeft, width: width2, naturalWidth, premountWidth, postmountWidth } = useMemo121(() => {
     return getTimelineSequenceLayout({
-      durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
+      durationInFrames: displayDurationInFrames,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
       startFromMedia: s.type === "sequence" || s.type === "image" ? 0 : s.startMediaFrom,
-      maxMediaDuration,
+      maxMediaDuration: effectiveMaxMediaDuration,
       video,
       windowWidth,
       premountDisplay: s.premountDisplay,
       postmountDisplay: s.postmountDisplay
     });
-  }, [maxMediaDuration, s, video, windowWidth]);
+  }, [
+    displayDurationInFrames,
+    effectiveMaxMediaDuration,
+    s,
+    video,
+    windowWidth
+  ]);
   const style11 = useMemo121(() => {
     return {
       background: s.type === "audio" ? AUDIO_GRADIENT : s.type === "video" ? VIDEO_GRADIENT : s.type === "image" ? IMAGE_GRADIENT : BLUE,
@@ -24196,7 +24493,7 @@ var Inner4 = ({ s, windowWidth }) => {
       opacity: isInRange ? 1 : 0.5
     };
   }, [isInRange, marginLeft, s.type, width2]);
-  if (maxMediaDuration === null) {
+  if (maxMediaDuration === null && !s.loopDisplay) {
     return null;
   }
   return /* @__PURE__ */ jsxs105("div", {
@@ -24239,7 +24536,8 @@ var Inner4 = ({ s, windowWidth }) => {
         startFrom: s.startMediaFrom,
         durationInFrames: s.duration,
         volume: s.volume,
-        playbackRate: s.playbackRate
+        playbackRate: s.playbackRate,
+        loopDisplay: s.loopDisplay
       }) : null,
       s.type === "video" ? /* @__PURE__ */ jsx215(TimelineVideoInfo, {
         src: s.src,
@@ -24251,7 +24549,8 @@ var Inner4 = ({ s, windowWidth }) => {
         volume: s.volume,
         doesVolumeChange: s.doesVolumeChange,
         premountWidth: premountWidth ?? 0,
-        postmountWidth: postmountWidth ?? 0
+        postmountWidth: postmountWidth ?? 0,
+        loopDisplay: s.loopDisplay
       }) : null,
       s.type === "image" ? /* @__PURE__ */ jsx215(TimelineImageInfo, {
         src: s.src,
@@ -24291,8 +24590,8 @@ var getExpandedPlaceholderStyle = (controls) => ({
   height: getExpandedTrackHeight(controls) + TIMELINE_ITEM_BORDER_BOTTOM
 });
 var TimelineTracks = ({ timeline, hasBeenCut }) => {
-  const { expandedTracks } = useContext79(ExpandedTracksContext);
-  const { previewServerState } = useContext79(StudioServerConnectionCtx);
+  const { expandedTracks } = useContext78(ExpandedTracksContext);
+  const { previewServerState } = useContext78(StudioServerConnectionCtx);
   const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const timelineStyle = useMemo122(() => {
     return {
@@ -24350,9 +24649,9 @@ var noop3 = () => {
   return;
 };
 var TimelineInner = () => {
-  const { sequences } = useContext80(Internals57.SequenceManager);
-  const { expandedTracks } = useContext80(ExpandedTracksContext);
-  const { previewServerState } = useContext80(StudioServerConnectionCtx);
+  const { sequences } = useContext79(Internals57.SequenceManager);
+  const { expandedTracks } = useContext79(ExpandedTracksContext);
+  const { previewServerState } = useContext79(StudioServerConnectionCtx);
   const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) && previewServerState.type === "connected";
   const videoConfig = Internals57.useUnsafeVideoConfig();
   const videoConfigIsNull = videoConfig === null;
@@ -24466,7 +24765,7 @@ var container45 = {
 };
 var EditorContent = ({ readOnlyStudio, children }) => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext81(Internals58.CompositionManager);
+  const { canvasContent } = useContext80(Internals58.CompositionManager);
   const showTimeline = canvasContent !== null && !isStill && canvasContent.type === "composition";
   return /* @__PURE__ */ jsxs108("div", {
     style: container45,
@@ -24503,11 +24802,11 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext82, useEffect as useEffect75 } from "react";
+import { useContext as useContext81, useEffect as useEffect75 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
-  const { setSelectedModal } = useContext82(ModalsContext);
-  const { setCheckerboard } = useContext82(CheckerboardContext);
+  const { setSelectedModal } = useContext81(ModalsContext);
+  const { setCheckerboard } = useContext81(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
   useEffect75(() => {
     const nKey = keybindings.registerKeybinding({
@@ -24611,7 +24910,7 @@ var GlobalKeybindings = () => {
 };
 
 // src/components/Modals.tsx
-import { useContext as useContext96 } from "react";
+import { useContext as useContext95 } from "react";
 
 // src/components/InstallPackage.tsx
 import {
@@ -24620,7 +24919,7 @@ import {
   extraPackages,
   installableMap
 } from "@remotion/studio-shared";
-import React154, { useCallback as useCallback114, useContext as useContext84, useEffect as useEffect76 } from "react";
+import React154, { useCallback as useCallback114, useContext as useContext83, useEffect as useEffect76 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -24708,10 +25007,10 @@ var ModalFooterContainer = ({ children }) => {
 };
 
 // src/components/NewComposition/DismissableModal.tsx
-import { useCallback as useCallback113, useContext as useContext83 } from "react";
+import { useCallback as useCallback113, useContext as useContext82 } from "react";
 import { jsx as jsx223 } from "react/jsx-runtime";
 var DismissableModal = ({ children }) => {
-  const { setSelectedModal } = useContext83(ModalsContext);
+  const { setSelectedModal } = useContext82(ModalsContext);
   const onQuit = useCallback113(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -24735,7 +25034,7 @@ var text2 = {
 var InstallPackageModal = ({ packageManager }) => {
   const [state, setState] = React154.useState({ type: "idle" });
   const [map, setMap] = React154.useState({});
-  const { previewServerState: ctx } = useContext84(StudioServerConnectionCtx);
+  const { previewServerState: ctx } = useContext83(StudioServerConnectionCtx);
   const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);
   const onClick = useCallback114(async () => {
     if (state.type === "done") {
@@ -24905,10 +25204,10 @@ var InstallPackageModal = ({ packageManager }) => {
 };
 
 // src/components/NewComposition/DeleteComposition.tsx
-import { useCallback as useCallback116, useContext as useContext87, useMemo as useMemo126 } from "react";
+import { useCallback as useCallback116, useContext as useContext86, useMemo as useMemo126 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React155, { useContext as useContext85, useEffect as useEffect77, useMemo as useMemo125 } from "react";
+import React155, { useContext as useContext84, useEffect as useEffect77, useMemo as useMemo125 } from "react";
 import { Internals as Internals59 } from "remotion";
 import { jsx as jsx225, jsxs as jsxs111 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -24930,7 +25229,7 @@ var loaderLabel2 = {
 var ResolvedCompositionContext = React155.createContext(null);
 var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals59.useResolvedVideoConfig(compositionId);
-  const unresolvedContext = useContext85(Internals59.CompositionManager);
+  const unresolvedContext = useContext84(Internals59.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
   useEffect77(() => {
     const { current } = Internals59.resolveCompositionsRef;
@@ -24990,7 +25289,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback115, useContext as useContext86, useEffect as useEffect78, useState as useState80 } from "react";
+import { useCallback as useCallback115, useContext as useContext85, useEffect as useEffect78, useState as useState79 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx226, jsxs as jsxs112 } from "react/jsx-runtime";
@@ -25050,12 +25349,12 @@ var CodemodFooter = ({
   submitLabel,
   onSuccess
 }) => {
-  const [submitting, setSubmitting] = useState80(false);
-  const { setSelectedModal } = useContext86(ModalsContext);
-  const [codemodStatus, setCanApplyCodemod] = useState80({
+  const [submitting, setSubmitting] = useState79(false);
+  const { setSelectedModal } = useContext85(ModalsContext);
+  const [codemodStatus, setCanApplyCodemod] = useState79({
     type: "loading"
   });
-  const [projectInfo, setProjectInfo] = useState80(null);
+  const [projectInfo, setProjectInfo] = useState79(null);
   useEffect78(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
@@ -25176,7 +25475,7 @@ var content3 = {
   minWidth: 500
 };
 var DeleteCompositionLoaded = ({ compositionId }) => {
-  const context = useContext87(ResolvedCompositionContext);
+  const context = useContext86(ResolvedCompositionContext);
   if (!context) {
     throw new Error("Resolved composition context");
   }
@@ -25251,7 +25550,7 @@ var DeleteComposition = ({ compositionId }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { useCallback as useCallback118, useContext as useContext88, useMemo as useMemo127, useState as useState81 } from "react";
+import { useCallback as useCallback118, useContext as useContext87, useMemo as useMemo127, useState as useState80 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -25357,19 +25656,19 @@ var comboBoxStyle = {
   width: 190
 };
 var DuplicateCompositionLoaded = ({ initialType }) => {
-  const context = useContext88(ResolvedCompositionContext);
+  const context = useContext87(ResolvedCompositionContext);
   if (!context) {
     throw new Error("Resolved composition context");
   }
   const { resolved, unresolved } = context;
-  const [initialCompType] = useState81(initialType);
+  const [initialCompType] = useState80(initialType);
   const hadDimensionsDefined = unresolved.width && unresolved.height;
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
-  const [selectedFrameRate, setFrameRate] = useState81(resolved.result.fps);
-  const { compositions } = useContext88(Internals61.CompositionManager);
-  const [type, setType] = useState81(initialCompType);
-  const [newId, setName] = useState81(() => {
+  const [selectedFrameRate, setFrameRate] = useState80(resolved.result.fps);
+  const { compositions } = useContext87(Internals61.CompositionManager);
+  const [type, setType] = useState80(initialCompType);
+  const [newId, setName] = useState80(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
     let prefix = numberAtEnd ? Number(numberAtEnd) : 1;
     const initialName = resolved.result.id.replace(/([0-9]+)$/, "");
@@ -25384,11 +25683,11 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     }
     return currentName;
   });
-  const [size4, setSize] = useState81(() => ({
+  const [size4, setSize] = useState80(() => ({
     width: resolved.result.width,
     height: resolved.result.height
   }));
-  const [durationInFrames, setDurationInFrames] = useState81(resolved.result.durationInFrames);
+  const [durationInFrames, setDurationInFrames] = useState80(resolved.result.durationInFrames);
   const onTypeChanged = useCallback118((newType) => {
     setType(newType);
   }, []);
@@ -25714,7 +26013,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 };
 
 // src/components/NewComposition/RenameComposition.tsx
-import { useCallback as useCallback119, useContext as useContext89, useMemo as useMemo128, useState as useState82 } from "react";
+import { useCallback as useCallback119, useContext as useContext88, useMemo as useMemo128, useState as useState81 } from "react";
 import { Internals as Internals62 } from "remotion";
 import { jsx as jsx231, jsxs as jsxs117, Fragment as Fragment35 } from "react/jsx-runtime";
 var content5 = {
@@ -25725,13 +26024,13 @@ var content5 = {
   minWidth: 500
 };
 var RenameCompositionLoaded = () => {
-  const context = useContext89(ResolvedCompositionContext);
+  const context = useContext88(ResolvedCompositionContext);
   if (!context) {
     throw new Error("Resolved composition context");
   }
   const { resolved } = context;
-  const { compositions } = useContext89(Internals62.CompositionManager);
-  const [newId, setName] = useState82(() => {
+  const { compositions } = useContext88(Internals62.CompositionManager);
+  const [newId, setName] = useState81(() => {
     return resolved.result.id;
   });
   const onNameChange = useCallback119((e) => {
@@ -25825,7 +26124,7 @@ var RenameComposition = ({ compositionId }) => {
 };
 
 // src/components/OverrideInputProps.tsx
-import { useCallback as useCallback120, useContext as useContext90, useMemo as useMemo129, useState as useState83 } from "react";
+import { useCallback as useCallback120, useContext as useContext89, useMemo as useMemo129, useState as useState82 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx232, jsxs as jsxs118 } from "react/jsx-runtime";
 var style11 = {
@@ -25861,14 +26160,14 @@ var isValidJSON = (value) => {
   }
 };
 var Inner5 = () => {
-  const [value, setValue] = useState83(() => {
+  const [value, setValue] = useState82(() => {
     const override = Internals63.getInputPropsOverride();
     if (override) {
       return JSON.stringify(override, null, 2);
     }
     return null;
   });
-  const { setSelectedModal } = useContext90(ModalsContext);
+  const { setSelectedModal } = useContext89(ModalsContext);
   const valid = useMemo129(() => {
     if (!value)
       return true;
@@ -25949,11 +26248,11 @@ var OverrideInputPropsModal = () => {
 // src/components/QuickSwitcher/QuickSwitcherContent.tsx
 import {
   useCallback as useCallback121,
-  useContext as useContext91,
+  useContext as useContext90,
   useEffect as useEffect80,
   useMemo as useMemo131,
   useRef as useRef47,
-  useState as useState85
+  useState as useState84
 } from "react";
 import { Internals as Internals64 } from "remotion";
 
@@ -26850,7 +27149,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect79, useMemo as useMemo130, useRef as useRef46, useState as useState84 } from "react";
+import { useEffect as useEffect79, useMemo as useMemo130, useRef as useRef46, useState as useState83 } from "react";
 import { jsx as jsx236, jsxs as jsxs121, Fragment as Fragment37 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -26879,7 +27178,7 @@ var labelContainer = {
   paddingBottom: 5
 };
 var QuickSwitcherResult = ({ result, selected }) => {
-  const [hovered, setIsHovered] = useState84(false);
+  const [hovered, setIsHovered] = useState83(false);
   const ref2 = useRef46(null);
   const keybindings = useKeybinding();
   useEffect79(() => {
@@ -27045,8 +27344,8 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext91(Internals64.CompositionManager);
-  const [state, setState] = useState85(() => {
+  const { compositions } = useContext90(Internals64.CompositionManager);
+  const [state, setState] = useState84(() => {
     return {
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -27064,8 +27363,8 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
     return;
   }, []);
   const actions = useMenuStructure(closeMenu, readOnlyStudio);
-  const [docResults, setDocResults] = useState85({ type: "initial" });
-  const { setSelectedModal } = useContext91(ModalsContext);
+  const [docResults, setDocResults] = useState84({ type: "initial" });
+  const { setSelectedModal } = useContext90(ModalsContext);
   const keybindings = useKeybinding();
   const mode = mapQueryToMode(state.query);
   const actualQuery = useMemo131(() => {
@@ -27330,7 +27629,7 @@ var QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
 var QuickSwitcher_default = QuickSwitcher;
 
 // src/components/RenderModal/RenderStatusModal.tsx
-import { useCallback as useCallback123, useContext as useContext92 } from "react";
+import { useCallback as useCallback123, useContext as useContext91 } from "react";
 
 // src/components/RenderModal/ClientRenderProgress.tsx
 import { formatBytes as formatBytes3 } from "@remotion/studio-shared";
@@ -27720,8 +28019,8 @@ var buttonRow = {
 var RenderStatusModal = ({
   jobId
 }) => {
-  const { setSelectedModal } = useContext92(ModalsContext);
-  const { jobs, removeClientJob, cancelClientJob } = useContext92(RenderQueueContext);
+  const { setSelectedModal } = useContext91(ModalsContext);
+  const { jobs, removeClientJob, cancelClientJob } = useContext91(RenderQueueContext);
   const job = jobs.find((j) => j.id === jobId);
   if (!job) {
     throw new Error("job not found");
@@ -27830,12 +28129,12 @@ import { BrowserSafeApis as BrowserSafeApis11 } from "@remotion/renderer/client"
 import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback141,
-  useContext as useContext94,
+  useContext as useContext93,
   useEffect as useEffect83,
   useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
-  useState as useState91
+  useState as useState90
 } from "react";
 
 // src/helpers/convert-env-variables.ts
@@ -28103,9 +28402,9 @@ var makeReadOnlyStudioRenderCommand = ({
 };
 
 // src/helpers/render-modal-sections.ts
-import { useMemo as useMemo133, useState as useState86 } from "react";
+import { useMemo as useMemo133, useState as useState85 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
-  const [selectedTab, setTab] = useState86("general");
+  const [selectedTab, setTab] = useState85("general");
   const shownTabs = useMemo133(() => {
     if (renderMode === "audio") {
       return ["general", "data", "audio", "advanced"];
@@ -28198,7 +28497,7 @@ var GifIcon = (props) => /* @__PURE__ */ jsx247("svg", {
 });
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback124, useMemo as useMemo134, useState as useState87 } from "react";
+import { useCallback as useCallback124, useMemo as useMemo134, useState as useState86 } from "react";
 import { jsx as jsx248 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
@@ -28214,7 +28513,7 @@ var selectorButton2 = {
   WebkitUserSelect: "none"
 };
 var VerticalTab = ({ children, onClick, style: style12, selected }) => {
-  const [hovered, setHovered] = useState87(false);
+  const [hovered, setHovered] = useState86(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback124(() => {
     setHovered(true);
@@ -28244,7 +28543,7 @@ var VerticalTab = ({ children, onClick, style: style12, selected }) => {
 
 // src/components/RenderModal/CrfSetting.tsx
 import { BrowserSafeApis as BrowserSafeApis3 } from "@remotion/renderer/client";
-import { useState as useState89 } from "react";
+import { useState as useState88 } from "react";
 
 // src/components/RenderModal/NumberSetting.tsx
 import { useCallback as useCallback126 } from "react";
@@ -28253,7 +28552,7 @@ import { useCallback as useCallback126 } from "react";
 import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback125, useEffect as useEffect81, useMemo as useMemo135, useState as useState88 } from "react";
+import { useCallback as useCallback125, useEffect as useEffect81, useMemo as useMemo135, useState as useState87 } from "react";
 import { jsx as jsx249 } from "react/jsx-runtime";
 var svgStyle = {
   width: 16,
@@ -28280,8 +28579,8 @@ var buttonStyle5 = {
 var CliCopyButton = ({
   valueToCopy
 }) => {
-  const [copied, setCopied] = useState88(false);
-  const [hovered, setHovered] = useState88(false);
+  const [copied, setCopied] = useState87(false);
+  const [hovered, setHovered] = useState87(false);
   const fillColor = useMemo135(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
@@ -28569,7 +28868,7 @@ var getDefaultCrfState = () => {
   }, {});
 };
 var useCrfState = (codec) => {
-  const [state, setState] = useState89(() => getDefaultCrfState());
+  const [state, setState] = useState88(() => getDefaultCrfState());
   const range = BrowserSafeApis3.getValidCrfRanges(codec);
   const setCrf = (updater) => {
     setState((q) => {
@@ -29841,10 +30140,10 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback133, useMemo as useMemo137 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext93, useEffect as useEffect82, useRef as useRef48, useState as useState90 } from "react";
+import { useContext as useContext92, useEffect as useEffect82, useRef as useRef48, useState as useState89 } from "react";
 var useFileExistence = (outName) => {
-  const [exists, setExists] = useState90(false);
-  const { previewServerState: state, subscribeToEvent } = useContext93(StudioServerConnectionCtx);
+  const [exists, setExists] = useState89(false);
+  const { previewServerState: state, subscribeToEvent } = useContext92(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef48("");
   currentOutName.current = outName;
@@ -31273,8 +31572,8 @@ var RenderModal = ({
   initialChromeMode,
   renderDefaults
 }) => {
-  const { setSelectedModal } = useContext94(ModalsContext);
-  const context = useContext94(ResolvedCompositionContext);
+  const { setSelectedModal } = useContext93(ModalsContext);
+  const context = useContext93(ResolvedCompositionContext);
   if (!context) {
     throw new Error("Should not be able to render without resolving comp first");
   }
@@ -31283,7 +31582,7 @@ var RenderModal = ({
     unresolved: unresolvedComposition
   } = context;
   const isMounted = useRef49(true);
-  const [isVideo] = useState91(() => {
+  const [isVideo] = useState90(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
   const [
@@ -31294,7 +31593,7 @@ var RenderModal = ({
       initialVideoCodecForAudioTab,
       initialVideoCodecForVideoTab
     }
-  ] = useState91(() => {
+  ] = useState90(() => {
     return getDefaultCodecs({
       defaultConfigurationVideoCodec,
       compositionDefaultVideoCodec: resolvedComposition.defaultCodec,
@@ -31303,16 +31602,16 @@ var RenderModal = ({
     });
   });
   const [state, dispatch] = useReducer2(reducer2, initialState2);
-  const [unclampedFrame, setFrame] = useState91(() => initialFrame);
-  const [stillImageFormat, setStillImageFormat] = useState91(() => initialStillImageFormat);
-  const [videoImageFormat, setVideoImageFormat] = useState91(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
-  const [sequenceImageFormat, setSequenceImageFormat] = useState91(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
-  const [concurrency, setConcurrency] = useState91(() => initialConcurrency);
-  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState91(() => initialVideoCodecForVideoTab);
-  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState91(() => initialAudioCodec);
-  const [separateAudioTo, setSeparateAudioTo] = useState91(null);
-  const [envVariables, setEnvVariables] = useState91(() => envVariablesObjectToArray(initialEnvVariables).filter(([key5]) => key5 !== "NODE_ENV"));
-  const [initialOutName] = useState91(() => {
+  const [unclampedFrame, setFrame] = useState90(() => initialFrame);
+  const [stillImageFormat, setStillImageFormat] = useState90(() => initialStillImageFormat);
+  const [videoImageFormat, setVideoImageFormat] = useState90(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
+  const [sequenceImageFormat, setSequenceImageFormat] = useState90(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
+  const [concurrency, setConcurrency] = useState90(() => initialConcurrency);
+  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState90(() => initialVideoCodecForVideoTab);
+  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState90(() => initialAudioCodec);
+  const [separateAudioTo, setSeparateAudioTo] = useState90(null);
+  const [envVariables, setEnvVariables] = useState90(() => envVariablesObjectToArray(initialEnvVariables).filter(([key5]) => key5 !== "NODE_ENV"));
+  const [initialOutName] = useState90(() => {
     return getDefaultOutLocation({
       compositionName: resolvedComposition.id,
       defaultExtension: initialRenderType === "still" ? initialStillImageFormat : isVideo ? BrowserSafeApis11.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec) : initialStillImageFormat,
@@ -31321,26 +31620,26 @@ var RenderModal = ({
       outputLocation: renderDefaults.outputLocation
     });
   });
-  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState91(() => initialVideoCodecForAudioTab);
-  const [mutedState, setMuted] = useState91(() => initialMuted);
-  const [repro, setRepro] = useState91(() => initialRepro);
-  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState91(() => initialEnforceAudioTrack);
-  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState91(() => initialForSeamlessAacConcatenation);
-  const [sampleRate, setSampleRate] = useState91(() => initialSampleRate);
-  const [renderMode, setRenderModeState] = useState91(initialRenderType);
-  const [jpegQuality, setJpegQuality] = useState91(() => initialJpegQuality);
-  const [scale, setScale] = useState91(() => initialScale);
-  const [logLevel, setLogLevel] = useState91(() => initialLogLevel);
-  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState91(false);
-  const [disableWebSecurity, setDisableWebSecurity] = useState91(() => initialDisableWebSecurity);
-  const [headless, setHeadless] = useState91(() => initialHeadless);
-  const [beepOnFinish, setBeepOnFinish] = useState91(() => initialBeep);
-  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState91(() => initialIgnoreCertificateErrors);
-  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState91(() => initialMultiProcessOnLinux);
-  const [darkMode, setDarkMode] = useState91(() => initialDarkMode);
-  const [openGlOption, setOpenGlOption] = useState91(() => initialGl ?? "default");
-  const [colorSpace, setColorSpace] = useState91(() => initialColorSpace);
-  const [userAgent, setUserAgent] = useState91(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
+  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState90(() => initialVideoCodecForAudioTab);
+  const [mutedState, setMuted] = useState90(() => initialMuted);
+  const [repro, setRepro] = useState90(() => initialRepro);
+  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState90(() => initialEnforceAudioTrack);
+  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState90(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState90(() => initialSampleRate);
+  const [renderMode, setRenderModeState] = useState90(initialRenderType);
+  const [jpegQuality, setJpegQuality] = useState90(() => initialJpegQuality);
+  const [scale, setScale] = useState90(() => initialScale);
+  const [logLevel, setLogLevel] = useState90(() => initialLogLevel);
+  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState90(false);
+  const [disableWebSecurity, setDisableWebSecurity] = useState90(() => initialDisableWebSecurity);
+  const [headless, setHeadless] = useState90(() => initialHeadless);
+  const [beepOnFinish, setBeepOnFinish] = useState90(() => initialBeep);
+  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState90(() => initialIgnoreCertificateErrors);
+  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState90(() => initialMultiProcessOnLinux);
+  const [darkMode, setDarkMode] = useState90(() => initialDarkMode);
+  const [openGlOption, setOpenGlOption] = useState90(() => initialGl ?? "default");
+  const [colorSpace, setColorSpace] = useState90(() => initialColorSpace);
+  const [userAgent, setUserAgent] = useState90(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
   const chromiumOptions = useMemo143(() => {
     return {
       headless,
@@ -31360,29 +31659,29 @@ var RenderModal = ({
     multiProcessOnLinux,
     darkMode
   ]);
-  const [outName, setOutName] = useState91(() => initialOutName);
-  const [endFrameOrNull, setEndFrame] = useState91(() => outFrameMark ?? null);
-  const [startFrameOrNull, setStartFrame] = useState91(() => inFrameMark ?? null);
-  const [proResProfileSetting, setProResProfile] = useState91(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
-  const [x264PresetSetting, setx264Preset] = useState91(() => initialx264Preset);
-  const [hardwareAcceleration, setHardwareAcceleration] = useState91(() => initialHardwareAcceleration);
-  const [userPreferredPixelFormat, setPixelFormat] = useState91(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
-  const [preferredQualityControlType, setQualityControl] = useState91(() => initialVideoBitrate === null ? "crf" : "bitrate");
+  const [outName, setOutName] = useState90(() => initialOutName);
+  const [endFrameOrNull, setEndFrame] = useState90(() => outFrameMark ?? null);
+  const [startFrameOrNull, setStartFrame] = useState90(() => inFrameMark ?? null);
+  const [proResProfileSetting, setProResProfile] = useState90(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
+  const [x264PresetSetting, setx264Preset] = useState90(() => initialx264Preset);
+  const [hardwareAcceleration, setHardwareAcceleration] = useState90(() => initialHardwareAcceleration);
+  const [userPreferredPixelFormat, setPixelFormat] = useState90(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
+  const [preferredQualityControlType, setQualityControl] = useState90(() => initialVideoBitrate === null ? "crf" : "bitrate");
   const [
     shouldHaveCustomTargetAudioBitrate,
     setShouldHaveCustomTargetAudioBitrate
-  ] = useState91(() => initialAudioBitrate !== null);
-  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState91(() => initialAudioBitrate ?? "320K");
-  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState91(() => initialVideoBitrate ?? "1M");
-  const [encodingMaxRate, setEncodingMaxRate] = useState91(() => initialEncodingMaxRate ?? null);
-  const [encodingBufferSize, setEncodingBufferSize] = useState91(() => initialEncodingBufferSize ?? null);
-  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState91(() => initialNumberOfGifLoops !== null);
-  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState91(() => initialNumberOfGifLoops ?? 0);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState91(() => initialDelayRenderTimeout);
-  const [chromeMode, setChromeMode] = useState91(() => initialChromeMode);
-  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState91(initialOffthreadVideoCacheSizeInBytes);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState91(initialMediaCacheSizeInBytes);
-  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState91(() => initialOffthreadVideoThreads);
+  ] = useState90(() => initialAudioBitrate !== null);
+  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState90(() => initialAudioBitrate ?? "320K");
+  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState90(() => initialVideoBitrate ?? "1M");
+  const [encodingMaxRate, setEncodingMaxRate] = useState90(() => initialEncodingMaxRate ?? null);
+  const [encodingBufferSize, setEncodingBufferSize] = useState90(() => initialEncodingBufferSize ?? null);
+  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState90(() => initialNumberOfGifLoops !== null);
+  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState90(() => initialNumberOfGifLoops ?? 0);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState90(() => initialDelayRenderTimeout);
+  const [chromeMode, setChromeMode] = useState90(() => initialChromeMode);
+  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState90(initialOffthreadVideoCacheSizeInBytes);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState90(initialMediaCacheSizeInBytes);
+  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState90(() => initialOffthreadVideoThreads);
   const codec = useMemo143(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
@@ -31469,11 +31768,11 @@ var RenderModal = ({
     }
     return null;
   }, [codec, x264PresetSetting, renderMode]);
-  const [inputProps, _setInputProps] = useState91(() => defaultProps);
+  const [inputProps, _setInputProps] = useState90(() => defaultProps);
   const setInputProps = useCallback141((updater) => {
     _setInputProps(updater);
   }, []);
-  const [metadata] = useState91(() => defaultMetadata);
+  const [metadata] = useState90(() => defaultMetadata);
   const endFrame = useMemo143(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
@@ -31552,7 +31851,7 @@ var RenderModal = ({
     setStillImageFormat(format);
     setDefaultOutName({ type: "still", imageFormat: format });
   }, [setDefaultOutName]);
-  const { setSidebarCollapsedState } = useContext94(SidebarContext);
+  const { setSidebarCollapsedState } = useContext93(SidebarContext);
   const onClickStill = useCallback141(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel2("renders");
@@ -31606,7 +31905,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState91(() => initialEveryNthFrame);
+  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState90(() => initialEveryNthFrame);
   const everyNthFrame = useMemo143(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
@@ -32060,7 +32359,7 @@ var RenderModal = ({
     videoBitrate,
     x264Preset
   ]);
-  const [commandCopiedAt, setCommandCopiedAt] = useState91(null);
+  const [commandCopiedAt, setCommandCopiedAt] = useState90(null);
   const renderDisabled = readOnlyStudio ? false : !outnameValidation.valid || state.type === "load";
   const trigger = useCallback141(() => {
     if (readOnlyStudio) {
@@ -32416,7 +32715,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback145, useContext as useContext95, useMemo as useMemo148, useState as useState95 } from "react";
+import { useCallback as useCallback145, useContext as useContext94, useMemo as useMemo148, useState as useState94 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx273 } from "react/jsx-runtime";
@@ -32435,10 +32734,10 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect84, useRef as useRef50, useState as useState92 } from "react";
+import { useEffect as useEffect84, useRef as useRef50, useState as useState91 } from "react";
 var useEncodableAudioCodecs = (container60) => {
   const cacheRef = useRef50({});
-  const [codecsByContainer, setCodecsByContainer] = useState92(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState91(() => {
     return {
       [container60]: getSupportedAudioCodecsForContainer(container60)
     };
@@ -32477,10 +32776,10 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect85, useRef as useRef51, useState as useState93 } from "react";
+import { useEffect as useEffect85, useRef as useRef51, useState as useState92 } from "react";
 var useEncodableVideoCodecs = (container60) => {
   const cacheRef = useRef51({});
-  const [codecsByContainer, setCodecsByContainer] = useState93(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState92(() => {
     return {
       [container60]: getSupportedVideoCodecsForContainer(container60)
     };
@@ -33173,7 +33472,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback143, useEffect as useEffect86, useState as useState94 } from "react";
+import { useCallback as useCallback143, useEffect as useEffect86, useState as useState93 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx279 } from "react/jsx-runtime";
@@ -33393,8 +33692,8 @@ var WebRenderModalLicense = ({
   setLicenseKey,
   initialPublicLicenseKey
 }) => {
-  const [licenseValidation, setLicenseValidation] = useState94({ valid: true, message: null, details: null });
-  const [isLoading, setIsLoading] = useState94(false);
+  const [licenseValidation, setLicenseValidation] = useState93({ valid: true, message: null, details: null });
+  const [isLoading, setIsLoading] = useState93(false);
   useEffect86(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
@@ -33761,10 +34060,10 @@ var WebRenderModal = ({
   initialMuted,
   initialAllowHtmlInCanvas
 }) => {
-  const context = useContext95(ResolvedCompositionContext);
-  const { setSelectedModal } = useContext95(ModalsContext);
-  const { setSidebarCollapsedState } = useContext95(SidebarContext);
-  const { addClientStillJob, addClientVideoJob } = useContext95(RenderQueueContext);
+  const context = useContext94(ResolvedCompositionContext);
+  const { setSelectedModal } = useContext94(ModalsContext);
+  const { setSidebarCollapsedState } = useContext94(SidebarContext);
+  const { addClientStillJob, addClientVideoJob } = useContext94(RenderQueueContext);
   if (!context) {
     throw new Error("Should not be able to render without resolving comp first");
   }
@@ -33772,34 +34071,34 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [isVideo] = useState95(() => {
+  const [isVideo] = useState94(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
-  const [renderMode, setRenderMode] = useState95(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
-  const [tab, setTab] = useState95("general");
-  const [imageFormat, setImageFormat] = useState95(() => initialStillImageFormat ?? "png");
-  const [frame2, setFrame] = useState95(() => initialFrame);
-  const [logLevel, setLogLevel] = useState95(() => initialLogLevel);
-  const [inputProps, _setInputProps] = useState95(() => defaultProps);
+  const [renderMode, setRenderMode] = useState94(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
+  const [tab, setTab] = useState94("general");
+  const [imageFormat, setImageFormat] = useState94(() => initialStillImageFormat ?? "png");
+  const [frame2, setFrame] = useState94(() => initialFrame);
+  const [logLevel, setLogLevel] = useState94(() => initialLogLevel);
+  const [inputProps, _setInputProps] = useState94(() => defaultProps);
   const setInputProps = useCallback145((updater) => {
     _setInputProps(updater);
   }, []);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState95(initialDelayRenderTimeout ?? 30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState95(initialMediaCacheSizeInBytes);
-  const [codec, setCodec] = useState95(initialVideoCodec ?? "h264");
-  const [container61, setContainer] = useState95(initialContainer ?? "mp4");
-  const [audioCodec, setAudioCodec] = useState95(initialAudioCodec ?? "aac");
-  const [audioBitrate, setAudioBitrate] = useState95(initialAudioBitrate ?? "medium");
-  const [videoBitrate, setVideoBitrate] = useState95(initialVideoBitrate ?? "high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState95(initialHardwareAcceleration ?? "no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState95(initialKeyframeIntervalInSeconds ?? 5);
-  const [startFrame, setStartFrame] = useState95(() => inFrameMark);
-  const [endFrame, setEndFrame] = useState95(() => outFrameMark);
-  const [transparent, setTransparent] = useState95(initialTransparent ?? false);
-  const [muted, setMuted] = useState95(initialMuted ?? false);
-  const [scale, setScale] = useState95(initialScale ?? 1);
-  const [licenseKey, setLicenseKey] = useState95(initialLicenseKey);
-  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState94(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState94(initialMediaCacheSizeInBytes);
+  const [codec, setCodec] = useState94(initialVideoCodec ?? "h264");
+  const [container61, setContainer] = useState94(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState94(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState94(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState94(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState94(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState94(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState94(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState94(() => outFrameMark);
+  const [transparent, setTransparent] = useState94(initialTransparent ?? false);
+  const [muted, setMuted] = useState94(initialMuted ?? false);
+  const [scale, setScale] = useState94(initialScale ?? 1);
+  const [licenseKey, setLicenseKey] = useState94(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState94(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
   const effectiveAudioCodec = useMemo148(() => {
@@ -33826,7 +34125,7 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutNameState] = useState95(() => {
+  const [initialOutNameState] = useState94(() => {
     if (initialDefaultOutName) {
       return initialDefaultOutName;
     }
@@ -33842,7 +34141,7 @@ var WebRenderModal = ({
     }
     return defaultOut;
   });
-  const [outName, setOutName] = useState95(() => initialOutNameState);
+  const [outName, setOutName] = useState94(() => initialOutNameState);
   const updateOutNameExtension = useCallback145((extension) => {
     setOutName((prev) => getStringBeforeSuffix(prev) + "." + extension);
   }, []);
@@ -34282,7 +34581,7 @@ var WebRenderModalWithLoader = (props) => {
 import { useCallback as useCallback148, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback146, useEffect as useEffect87, useState as useState96 } from "react";
+import { useCallback as useCallback146, useEffect as useEffect87, useState as useState95 } from "react";
 import { jsx as jsx284, jsxs as jsxs152 } from "react/jsx-runtime";
 var iconStyle9 = {
   width: 16,
@@ -34312,7 +34611,7 @@ var labelStyle5 = {
   fontSize: 14
 };
 var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
-  const [copied, setCopied] = useState96(false);
+  const [copied, setCopied] = useState95(false);
   const onClick = useCallback146(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
@@ -34345,7 +34644,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback147, useMemo as useMemo149, useState as useState97 } from "react";
+import { useCallback as useCallback147, useMemo as useMemo149, useState as useState96 } from "react";
 import { jsx as jsx285 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34360,7 +34659,7 @@ var buttonStyle7 = {
   alignItems: "center"
 };
 var OpenIssueButton = ({ link: link4 }) => {
-  const [hovered, setHovered] = useState97(false);
+  const [hovered, setHovered] = useState96(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
   const handleClick = useCallback147(() => {
     window.open(link4, "_blank");
@@ -34561,8 +34860,8 @@ var UpdateModal = ({ info, knownBugs }) => {
 // src/components/Modals.tsx
 import { jsx as jsx288, jsxs as jsxs155, Fragment as Fragment53 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
-  const { selectedModal: modalContextType } = useContext96(ModalsContext);
-  const canRender = useContext96(StudioServerConnectionCtx).previewServerState.type === "connected";
+  const { selectedModal: modalContextType } = useContext95(ModalsContext);
+  const canRender = useContext95(StudioServerConnectionCtx).previewServerState.type === "connected";
   return /* @__PURE__ */ jsxs155(Fragment53, {
     children: [
       modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx288(DuplicateComposition, {
@@ -34683,7 +34982,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const MemoRoot = useMemo151(() => {
     return React187.memo(Root);
   }, [Root]);
-  const [renderError, setRenderError] = useState98(null);
+  const [renderError, setRenderError] = useState97(null);
   const clearError = useCallback149(() => {
     setRenderError(null);
   }, []);
@@ -34739,7 +35038,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback150, useContext as useContext97, useMemo as useMemo152, useState as useState99 } from "react";
+import { useCallback as useCallback150, useContext as useContext96, useMemo as useMemo152, useState as useState98 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx290 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -34760,14 +35059,14 @@ var loadPreviewSizeOption = () => {
   return JSON.parse(item2);
 };
 var PreviewSizeProvider = ({ children }) => {
-  const [size4, setSizeState] = useState99(() => loadPreviewSizeOption());
-  const [translation, setTranslation] = useState99(() => {
+  const [size4, setSizeState] = useState98(() => loadPreviewSizeOption());
+  const [translation, setTranslation] = useState98(() => {
     return {
       x: 0,
       y: 0
     };
   });
-  const { editorZoomGestures } = useContext97(EditorZoomGesturesContext);
+  const { editorZoomGestures } = useContext96(EditorZoomGesturesContext);
   const setSize = useCallback150((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
@@ -34796,10 +35095,10 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback151, useMemo as useMemo153, useState as useState100 } from "react";
+import { useCallback as useCallback151, useMemo as useMemo153, useState as useState99 } from "react";
 import { jsx as jsx291 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
-  const [checkerboard, setCheckerboardState] = useState100(() => loadCheckerboardOption());
+  const [checkerboard, setCheckerboardState] = useState99(() => loadCheckerboardOption());
   const setCheckerboard = useCallback151((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
@@ -34820,12 +35119,12 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo154, useState as useState101 } from "react";
+import { useMemo as useMemo154, useState as useState100 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx292 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
-  const [mediaMuted, setMediaMuted] = useState101(() => loadMuteOption());
-  const [mediaVolume, setMediaVolume] = useState101(1);
+  const [mediaMuted, setMediaMuted] = useState100(() => loadMuteOption());
+  const [mediaVolume, setMediaVolume] = useState100(1);
   const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
@@ -34848,10 +35147,10 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo155, useState as useState102 } from "react";
+import { useMemo as useMemo155, useState as useState101 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
-  const [modalContextType, setModalContextType] = useState102(null);
+  const [modalContextType, setModalContextType] = useState101(null);
   const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
@@ -34865,7 +35164,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect88, useMemo as useMemo156, useState as useState103 } from "react";
+import { useEffect as useEffect88, useMemo as useMemo156, useState as useState102 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -34883,7 +35182,7 @@ var loadMarks = () => {
 // src/components/SetTimelineInOutProvider.tsx
 import { jsx as jsx294 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
-  const [inAndOutFrames, setInAndOutFrames] = useState103(() => loadMarks());
+  const [inAndOutFrames, setInAndOutFrames] = useState102(() => loadMarks());
   const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
@@ -34902,13 +35201,13 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo157, useRef as useRef52, useState as useState104 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo157, useRef as useRef52, useState as useState103 } from "react";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
-  const [guidesList, setGuidesList] = useState104(() => loadGuidesList());
-  const [selectedGuideId, setSelectedGuideId] = useState104(null);
-  const [hoveredGuideId, setHoveredGuideId] = useState104(null);
-  const [editorShowGuides, setEditorShowGuidesState] = useState104(() => loadEditorShowGuidesOption());
+  const [guidesList, setGuidesList] = useState103(() => loadGuidesList());
+  const [selectedGuideId, setSelectedGuideId] = useState103(null);
+  const [hoveredGuideId, setHoveredGuideId] = useState103(null);
+  const [editorShowGuides, setEditorShowGuidesState] = useState103(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef52(false);
   const shouldDeleteGuideRef = useRef52(false);
   const setEditorShowGuides = useCallback152((newValue) => {
@@ -34945,10 +35244,10 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo158, useState as useState105 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo158, useState as useState104 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
-  const [editorShowRulers, setEditorShowRulersState] = useState105(() => loadEditorShowRulersOption());
+  const [editorShowRulers, setEditorShowRulersState] = useState104(() => loadEditorShowRulersOption());
   const setEditorShowRulers = useCallback153((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
@@ -34969,10 +35268,10 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/VisualControls/VisualControlsUndoSync.tsx
-import { useContext as useContext98, useEffect as useEffect89 } from "react";
+import { useContext as useContext97, useEffect as useEffect89 } from "react";
 var VisualControlsUndoSync = () => {
-  const { subscribeToEvent } = useContext98(StudioServerConnectionCtx);
-  const { updateValue } = useContext98(SetVisualControlsContext);
+  const { subscribeToEvent } = useContext97(StudioServerConnectionCtx);
+  const { updateValue } = useContext97(SetVisualControlsContext);
   useEffect89(() => {
     const unsub = subscribeToEvent("visual-control-values-changed", (event) => {
       if (event.type !== "visual-control-values-changed") {
@@ -34988,10 +35287,10 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo159, useState as useState106 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo159, useState as useState105 } from "react";
 import { jsx as jsx297 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
-  const [editorZoomGestures, setEditorZoomGesturesState] = useState106(() => loadEditorZoomGesturesOption());
+  const [editorZoomGestures, setEditorZoomGesturesState] = useState105(() => loadEditorZoomGesturesOption());
   const setEditorZoomGestures = useCallback154((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
@@ -35062,7 +35361,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 };
 
 // src/components/Notifications/ServerDisconnected.tsx
-import { useContext as useContext99 } from "react";
+import { useContext as useContext98 } from "react";
 import { jsx as jsx299, jsxs as jsxs158 } from "react/jsx-runtime";
 var container63 = {
   position: "fixed",
@@ -35097,7 +35396,7 @@ window.addEventListener("beforeunload", () => {
   pageIsGoingToReload = true;
 });
 var ServerDisconnected = () => {
-  const { previewServerState: ctx } = useContext99(StudioServerConnectionCtx);
+  const { previewServerState: ctx } = useContext98(StudioServerConnectionCtx);
   const fav = document.getElementById("__remotion_favicon");
   if (ctx.type !== "disconnected") {
     fav.setAttribute("href", "/favicon.ico");
@@ -35136,11 +35435,11 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo160, useState as useState107 } from "react";
+import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo160, useState as useState106 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
-  const [fastRefreshes, setFastRefreshes] = useState107(0);
-  const [manualRefreshes, setManualRefreshes] = useState107(0);
+  const [fastRefreshes, setFastRefreshes] = useState106(0);
+  const [manualRefreshes, setManualRefreshes] = useState106(0);
   const increaseManualRefreshes = useCallback155(() => {
     setManualRefreshes((i) => i + 1);
   }, []);
@@ -35327,29 +35626,29 @@ var injectCSS = () => {
 // src/ResolveCompositionConfigInStudio.tsx
 import {
   useCallback as useCallback156,
-  useContext as useContext100,
+  useContext as useContext99,
   useEffect as useEffect91,
   useImperativeHandle as useImperativeHandle14,
   useMemo as useMemo161,
-  useState as useState108
+  useState as useState107
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
 import { jsx as jsx301 } from "react/jsx-runtime";
 var ResolveCompositionConfigInStudio = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState108(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext100(Internals69.CompositionManager);
-  const { fastRefreshes, manualRefreshes } = useContext100(FastRefreshContext);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState107(null);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext99(Internals69.CompositionManager);
+  const { fastRefreshes, manualRefreshes } = useContext99(FastRefreshContext);
   if (manualRefreshes) {}
   const selectedComposition = useMemo161(() => {
     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 } = useContext100(Internals69.EditorPropsContext);
+  const { props: allEditorProps } = useContext99(Internals69.EditorPropsContext);
   const env = Internals69.getRemotionEnvironment();
   const inputProps = useMemo161(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
-  const [resolvedConfigs, setResolvedConfigs] = useState108({});
+  const [resolvedConfigs, setResolvedConfigs] = useState107({});
   const selectedEditorProps = useMemo161(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -35606,7 +35905,7 @@ var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel ?? "info",
       numberOfAudioTags: window.remotion_numberOfAudioTags,
-      audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
+      audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
       children: /* @__PURE__ */ jsx302(StaticFilesProvider, {
         children: /* @__PURE__ */ jsx302(ResolveCompositionConfigInStudio, {
           children: /* @__PURE__ */ jsxs159(EditorContexts, {
@@ -35625,7 +35924,7 @@ var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
   });
 };
 var Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     injectCSS();
   }, []);
   return /* @__PURE__ */ jsx302(FastRefreshProvider, {