@remotion/studio 4.0.451 → 4.0.453

package/dist/esm/previewEntry.mjs

@@ -2734,13 +2734,13 @@ var enableHotMiddleware = () => {
 };
 
 // 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 React189, { useCallback as useCallback150, useMemo as useMemo151, useState as useState100 } from "react";
+import React189, { useCallback as useCallback150, useMemo as useMemo151, useState as useState99 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/noop.ts
@@ -2754,7 +2754,7 @@ var canvasRef = createRef2();
 var drawRef = createRef2();
 
 // src/state/timeline-zoom.tsx
-import { createContext as createContext5, useCallback as useCallback13, useMemo as useMemo12, useState as useState11 } from "react";
+import { createContext as createContext5, useCallback as useCallback13, useMemo as useMemo12, useState as useState10 } from "react";
 
 // src/components/Timeline/imperative-state.ts
 var currentFrame = 0;
@@ -2850,10 +2850,10 @@ var timelineVerticalScroll = React20.createRef();
 // src/components/Timeline/TimelineSlider.tsx
 import {
   createRef as createRef3,
-  useContext as useContext4,
+  useContext as useContext3,
   useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect,
   useRef as useRef5
 } from "react";
 import { Internals as Internals3, useVideoConfig } from "remotion";
@@ -2888,7 +2888,7 @@ var TimelineSliderHandle = () => {
 
 // src/components/Timeline/TimelineWidthProvider.tsx
 import { PlayerInternals as PlayerInternals2 } from "@remotion/player";
-import { createContext as createContext4, useContext as useContext3, useLayoutEffect, useState as useState10 } from "react";
+import { createContext as createContext4 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var TimelineWidthContext = createContext4(null);
 var TimelineWidthProvider = ({ children }) => {
@@ -2896,19 +2896,8 @@ var TimelineWidthProvider = ({ children }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  const { zoom: zoomMap } = useContext3(TimelineZoomCtx);
-  const [widthOverride, setWidthOverride] = useState10(null);
-  const observedWidth = size2?.width ?? null;
-  useLayoutEffect(() => {
-    const actual = sliderAreaRef.current?.clientWidth ?? null;
-    if (actual !== null && actual !== observedWidth) {
-      setWidthOverride(actual);
-    } else {
-      setWidthOverride(null);
-    }
-  }, [observedWidth, zoomMap]);
   return /* @__PURE__ */ jsx28(TimelineWidthContext.Provider, {
-    value: widthOverride ?? observedWidth,
+    value: size2?.width ?? null,
     children
   });
 };
@@ -2930,7 +2919,7 @@ var line = {
 var redrawTimelineSliderFast = createRef3();
 var TimelineSlider = () => {
   const videoConfig = Internals3.useUnsafeVideoConfig();
-  const timelineWidth = useContext4(TimelineWidthContext);
+  const timelineWidth = useContext3(TimelineWidthContext);
   if (videoConfig === null || timelineWidth === null) {
     return null;
   }
@@ -2940,14 +2929,14 @@ var Inner = () => {
   const videoConfig = useVideoConfig();
   const timelinePosition = Internals3.Timeline.useTimelinePosition();
   const ref = useRef5(null);
-  const timelineWidth = useContext4(TimelineWidthContext);
-  const { zoom: zoomMap } = useContext4(TimelineZoomCtx);
-  const { canvasContent } = useContext4(Internals3.CompositionManager);
+  const timelineWidth = useContext3(TimelineWidthContext);
+  const { zoom: zoomMap } = useContext3(TimelineZoomCtx);
+  const { canvasContent } = useContext3(Internals3.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) {
@@ -3222,7 +3211,7 @@ var zoomAndPreserveCursor = ({
 };
 
 // src/components/ZoomPersistor.tsx
-import { useContext as useContext5, useEffect as useEffect12 } from "react";
+import { useContext as useContext4, useEffect as useEffect12 } from "react";
 import { Internals as Internals4 } from "remotion";
 
 // src/components/load-canvas-content-from-url.ts
@@ -3264,8 +3253,8 @@ var getZoomFromLocalStorage = () => {
 };
 var ZoomPersistor = () => {
   const [playing] = Internals4.Timeline.usePlayingState();
-  const { zoom } = useContext5(TimelineZoomCtx);
-  const { canvasContent } = useContext5(Internals4.CompositionManager);
+  const { zoom } = useContext4(TimelineZoomCtx);
+  const { canvasContent } = useContext4(Internals4.CompositionManager);
   const urlState = deriveCanvasContentFromUrl();
   const isActive = urlState && urlState.type === "composition" && canvasContent && canvasContent.type === "composition" && urlState.compositionId === canvasContent.compositionId;
   useEffect12(() => {
@@ -3288,7 +3277,7 @@ var TimelineZoomCtx = createContext5({
   }
 });
 var TimelineZoomContext = ({ children }) => {
-  const [zoom, setZoomState] = useState11(() => getZoomFromLocalStorage());
+  const [zoom, setZoomState] = useState10(() => getZoomFromLocalStorage());
   const setZoom = useCallback13((compositionId, callback, options) => {
     setZoomState((prevZoomMap) => {
       const newZoomWithFloatingPointErrors = Math.min(TIMELINE_MAX_ZOOM, Math.max(TIMELINE_MIN_ZOOM, callback(prevZoomMap[compositionId] ?? TIMELINE_MIN_ZOOM)));
@@ -3319,11 +3308,11 @@ var TimelineZoomContext = ({ children }) => {
 };
 
 // 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 Internals5 } from "remotion";
 
 // src/helpers/is-composition-still.ts
@@ -3344,7 +3333,7 @@ var useIsStill = () => {
 };
 var useIsVideoComposition = () => {
   const isStill = useIsStill();
-  const { canvasContent } = useContext6(Internals5.CompositionManager);
+  const { canvasContent } = useContext5(Internals5.CompositionManager);
   if (canvasContent === null) {
     return false;
   }
@@ -3355,17 +3344,17 @@ var useIsVideoComposition = () => {
 };
 
 // src/components/InitialCompositionLoader.tsx
-import { useCallback as useCallback33, useContext as useContext16, useEffect as useEffect23 } from "react";
+import { useCallback as useCallback33, useContext as useContext15, useEffect as useEffect23 } from "react";
 import { Internals as Internals14 } from "remotion";
 
 // src/helpers/mobile-layout.ts
-import { useEffect as useEffect13, useRef as useRef6, useState as useState12 } from "react";
+import { useEffect as useEffect13, useRef as useRef6, useState as useState11 } from "react";
 var breakpoint = 900;
 function getIsMobile() {
   return window.innerWidth < breakpoint;
 }
 var useMobileLayout = () => {
-  const [isMobile, setIsMobile] = useState12(getIsMobile());
+  const [isMobile, setIsMobile] = useState11(getIsMobile());
   const isMobileRef = useRef6(isMobile);
   useEffect13(() => {
     function handleResize() {
@@ -3383,7 +3372,7 @@ var useMobileLayout = () => {
 };
 
 // src/state/folders.tsx
-import { createContext as createContext7, useMemo as useMemo13, useState as useState13 } from "react";
+import { createContext as createContext7, useMemo as useMemo13, useState as useState12 } from "react";
 
 // src/helpers/persist-open-folders.tsx
 import { createContext as createContext6 } from "react";
@@ -3423,8 +3412,8 @@ var FolderContext = createContext7({
   }
 });
 var FolderContextProvider = ({ children }) => {
-  const [compositionFoldersExpanded, setCompositionFoldersExpanded] = useState13(() => loadExpandedFolders("compositions"));
-  const [assetFoldersExpanded, setAssetFoldersExpanded] = useState13(() => loadExpandedFolders("assets"));
+  const [compositionFoldersExpanded, setCompositionFoldersExpanded] = useState12(() => loadExpandedFolders("compositions"));
+  const [assetFoldersExpanded, setAssetFoldersExpanded] = useState12(() => loadExpandedFolders("assets"));
   const value = useMemo13(() => {
     return {
       compositionFoldersExpanded,
@@ -3440,7 +3429,7 @@ var FolderContextProvider = ({ children }) => {
 };
 
 // src/state/sidebar.tsx
-import { createContext as createContext8, useMemo as useMemo14, useState as useState14 } from "react";
+import { createContext as createContext8, useMemo as useMemo14, useState as useState13 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var storageKey = (sidebar) => {
   if (sidebar === "right") {
@@ -3483,7 +3472,7 @@ var SidebarContext = createContext8({
 });
 var SidebarContextProvider = ({ children }) => {
   const isMobileLayout = useMobileLayout();
-  const [sidebarCollapsedState, setSidebarCollapsedState] = useState14(() => ({
+  const [sidebarCollapsedState, setSidebarCollapsedState] = useState13(() => ({
     left: getSavedCollapsedStateLeft(isMobileLayout),
     right: getSavedCollapsedStateRight(isMobileLayout)
   }));
@@ -3517,7 +3506,7 @@ var SidebarContextProvider = ({ children }) => {
 };
 
 // src/components/CompositionSelector.tsx
-import { useCallback as useCallback26, useContext as useContext10, useMemo as useMemo26 } from "react";
+import { useCallback as useCallback26, useContext as useContext9, useMemo as useMemo26 } from "react";
 import { Internals as Internals9 } from "remotion";
 
 // src/helpers/create-folder-tree.ts
@@ -3713,11 +3702,11 @@ var ModalsContext = createContext9({
 // src/components/CompositionSelectorItem.tsx
 import {
   useCallback as useCallback25,
-  useContext as useContext9,
-  useLayoutEffect as useLayoutEffect3,
+  useContext as useContext8,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo25,
   useRef as useRef13,
-  useState as useState22
+  useState as useState21
 } from "react";
 
 // src/helpers/sidebar-scroll-into-view.ts
@@ -3863,7 +3852,7 @@ var FilmIcon = ({ color, ...props }) => {
 };
 
 // src/components/CompositionContextButton.tsx
-import { useCallback as useCallback22, useContext as useContext7, useMemo as useMemo22 } from "react";
+import { useCallback as useCallback22, useContext as useContext6, useMemo as useMemo22 } from "react";
 
 // src/helpers/client-id.tsx
 import React28, { useCallback as useCallback16, useEffect as useEffect16, useMemo as useMemo16, useRef as useRef8 } from "react";
@@ -3874,7 +3863,7 @@ import {
   createRef as createRef4,
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle3,
-  useState as useState15
+  useState as useState14
 } from "react";
 
 // src/components/Notifications/Notification.tsx
@@ -3936,7 +3925,7 @@ var showNotification = (content, durationInMs) => {
   });
 };
 var NotificationCenter = () => {
-  const [notifications, setNotifications] = useState15([]);
+  const [notifications, setNotifications] = useState14([]);
   const onRemove = useCallback14((id) => {
     setNotifications((not) => {
       return not.filter((n) => n.id !== id);
@@ -4008,7 +3997,7 @@ import React27, {
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo15,
   useRef as useRef7,
-  useState as useState16
+  useState as useState15
 } from "react";
 
 // src/components/RenderQueue/client-render-queue.ts
@@ -4078,9 +4067,9 @@ var RenderQueueContext = React27.createContext({
 });
 var renderJobsRef = createRef5();
 var RenderQueueContextProvider = ({ children }) => {
-  const [serverJobs, setServerJobs] = useState16(window.remotion_initialRenderQueue ?? []);
-  const [clientJobs, setClientJobs] = useState16(restorePersistedClientRenders);
-  const [currentlyProcessing, setCurrentlyProcessing] = useState16(null);
+  const [serverJobs, setServerJobs] = useState15(window.remotion_initialRenderQueue ?? []);
+  const [clientJobs, setClientJobs] = useState15(restorePersistedClientRenders);
+  const [currentlyProcessing, setCurrentlyProcessing] = useState15(null);
   const processJobCallbackRef = useRef7(null);
   useEffect15(() => {
     if (currentlyProcessing) {
@@ -4365,11 +4354,11 @@ var EllipsisIcon = (props) => {
 
 // src/components/InlineDropdown.tsx
 import { PlayerInternals as PlayerInternals4 } from "@remotion/player";
-import { useCallback as useCallback21, useMemo as useMemo21, useRef as useRef11, useState as useState20 } from "react";
+import { useCallback as useCallback21, useMemo as useMemo21, useRef as useRef11, useState as useState19 } from "react";
 import ReactDOM3 from "react-dom";
 
 // src/components/InlineAction.tsx
-import { useCallback as useCallback17, useMemo as useMemo17, useState as useState17 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo17, useState as useState16 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var InlineAction = ({
   renderAction,
@@ -4378,7 +4367,7 @@ var InlineAction = ({
   title: title2
 }) => {
   const { tabIndex } = useZIndex();
-  const [hovered, setHovered] = useState17(false);
+  const [hovered, setHovered] = useState16(false);
   const onPointerEnter = useCallback17(() => {
     setHovered(true);
   }, []);
@@ -4424,7 +4413,7 @@ var getPortal = (i) => {
 };
 
 // src/components/NewComposition/MenuContent.tsx
-import { useCallback as useCallback20, useEffect as useEffect18, useMemo as useMemo20, useRef as useRef10, useState as useState19 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect18, useMemo as useMemo20, useRef as useRef10, useState as useState18 } from "react";
 
 // src/components/Menu/MenuDivider.tsx
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -4442,7 +4431,7 @@ var MenuDivider = () => {
 
 // src/components/Menu/MenuSubItem.tsx
 import { PlayerInternals as PlayerInternals3 } from "@remotion/player";
-import { useCallback as useCallback19, useEffect as useEffect17, useMemo as useMemo19, useRef as useRef9, useState as useState18 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect17, useMemo as useMemo19, useRef as useRef9, useState as useState17 } from "react";
 import ReactDOM2 from "react-dom";
 
 // src/icons/caret.tsx
@@ -4574,7 +4563,7 @@ var MenuSubItem = ({
   setSubMenuActivated,
   disabled
 }) => {
-  const [hovered, setHovered] = useState18(false);
+  const [hovered, setHovered] = useState17(false);
   const ref = useRef9(null);
   const size2 = PlayerInternals3.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -4743,13 +4732,13 @@ var MenuContent = ({
   const keybindings = useKeybinding();
   const containerRef = useRef10(null);
   const isMobileLayout = useMobileLayout();
-  const [subMenuActivated, setSubMenuActivated] = useState19(false);
+  const [subMenuActivated, setSubMenuActivated] = useState18(false);
   const typeaheadQueryRef = useRef10("");
   const typeaheadTimeoutRef = useRef10(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
-  const [selectedItem, setSelectedItem] = useState19(typeof preselectIndex === "number" && preselectIndex >= 0 ? values[preselectIndex].id : null);
+  const [selectedItem, setSelectedItem] = useState18(typeof preselectIndex === "number" && preselectIndex >= 0 ? values[preselectIndex].id : null);
   const onEscape = useCallback20(() => {
     onHide();
   }, [onHide]);
@@ -5047,7 +5036,7 @@ var InlineDropdown = ({
   ...props
 }) => {
   const ref = useRef11(null);
-  const [opened, setOpened] = useState20({ type: "not-open" });
+  const [opened, setOpened] = useState19({ type: "not-open" });
   const { currentZIndex } = useZIndex();
   const size2 = PlayerInternals4.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -5149,7 +5138,7 @@ var CompositionContextButton = ({ visible, values }) => {
       }
     };
   }, []);
-  const connectionStatus = useContext7(StudioServerConnectionCtx).previewServerState.type;
+  const connectionStatus = useContext6(StudioServerConnectionCtx).previewServerState.type;
   const renderAction = useCallback22((color) => {
     return /* @__PURE__ */ jsx48(EllipsisIcon, {
       fill: color,
@@ -5167,12 +5156,12 @@ var CompositionContextButton = ({ visible, values }) => {
 
 // src/components/ContextMenu.tsx
 import { PlayerInternals as PlayerInternals5 } from "@remotion/player";
-import { useCallback as useCallback23, useEffect as useEffect19, useMemo as useMemo23, useRef as useRef12, useState as useState21 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect19, useMemo as useMemo23, useRef as useRef12, useState as useState20 } from "react";
 import ReactDOM4 from "react-dom";
 import { jsx as jsx49, jsxs as jsxs21, Fragment as Fragment5 } from "react/jsx-runtime";
 var ContextMenu = ({ children, values }) => {
   const ref = useRef12(null);
-  const [opened, setOpened] = useState21({ type: "not-open" });
+  const [opened, setOpened] = useState20({ type: "not-open" });
   const { currentZIndex } = useZIndex();
   const style3 = useMemo23(() => {
     return {};
@@ -5278,7 +5267,7 @@ var ContextMenu = ({ children, values }) => {
 };
 
 // src/components/SidebarRenderButton.tsx
-import { useCallback as useCallback24, useContext as useContext8, useMemo as useMemo24 } from "react";
+import { useCallback as useCallback24, useContext as useContext7, useMemo as useMemo24 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/icons/render.tsx
@@ -5298,8 +5287,8 @@ var ThinRenderIcon = (props) => {
 // src/components/SidebarRenderButton.tsx
 import { jsx as jsx51 } 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 = useMemo24(() => {
     return {
@@ -5308,8 +5297,8 @@ var SidebarRenderButton = ({ composition, visible }) => {
       }
     };
   }, []);
-  const connectionStatus = useContext8(StudioServerConnectionCtx).previewServerState.type;
-  const { props } = useContext8(Internals7.EditorPropsContext);
+  const connectionStatus = useContext7(StudioServerConnectionCtx).previewServerState.type;
+  const { props } = useContext7(Internals7.EditorPropsContext);
   const onClick = useCallback24((e) => {
     const defaults = window.remotion_renderDefaults;
     if (!defaults) {
@@ -5443,7 +5432,7 @@ var CompositionSelectorItem = ({
     }
     return false;
   }, [item, currentComposition]);
-  const [hovered, setHovered] = useState22(false);
+  const [hovered, setHovered] = useState21(false);
   const onPointerEnter = useCallback25(() => {
     setHovered(true);
   }, []);
@@ -5452,7 +5441,7 @@ var CompositionSelectorItem = ({
   }, []);
   const compositionRowRef = useRef13(null);
   const compositionId = item.type === "composition" ? item.composition.id : null;
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     if (compositionId === null) {
       return;
     }
@@ -5489,7 +5478,7 @@ var CompositionSelectorItem = ({
       onClick(evt);
     }
   }, [onClick]);
-  const { setSelectedModal } = useContext9(ModalsContext);
+  const { setSelectedModal } = useContext8(ModalsContext);
   const contextMenu = useMemo25(() => {
     if (item.type === "composition") {
       return [
@@ -5747,7 +5736,7 @@ var CurrentComposition = () => {
 // src/components/CompositionSelector.tsx
 import { jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
 var useCompositionNavigation = () => {
-  const { compositions, canvasContent } = useContext10(Internals9.CompositionManager);
+  const { compositions, canvasContent } = useContext9(Internals9.CompositionManager);
   const selectComposition = useSelectComposition();
   const navigateToNextComposition = useCallback26(() => {
     if (!canvasContent || canvasContent.type !== "composition" || compositions.length <= 1) {
@@ -5820,9 +5809,9 @@ var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
   return getKeysToExpand(name, parent, initial);
 };
 var CompositionSelector = () => {
-  const { compositions, canvasContent, folders } = useContext10(Internals9.CompositionManager);
-  const { foldersExpanded } = useContext10(ExpandedFoldersContext);
-  const { setSelectedModal } = useContext10(ModalsContext);
+  const { compositions, canvasContent, folders } = useContext9(Internals9.CompositionManager);
+  const { foldersExpanded } = useContext9(ExpandedFoldersContext);
+  const { setSelectedModal } = useContext9(ModalsContext);
   const { tabIndex } = useZIndex();
   const selectComposition = useSelectComposition();
   const sortedCompositions = useMemo26(() => {
@@ -5892,10 +5881,10 @@ var CompositionSelector = () => {
 };
 
 // src/components/ExplorerPanel.tsx
-import { createRef as createRef6, useCallback as useCallback32, useImperativeHandle as useImperativeHandle6, useState as useState29 } from "react";
+import { createRef as createRef6, useCallback as useCallback32, useImperativeHandle as useImperativeHandle6, useState as useState28 } from "react";
 
 // src/components/AssetSelector.tsx
-import { useCallback as useCallback29, useContext as useContext14, useMemo as useMemo30, useState as useState26 } from "react";
+import { useCallback as useCallback29, useContext as useContext13, useMemo as useMemo30, useState as useState25 } from "react";
 import { Internals as Internals12 } from "remotion";
 
 // src/api/write-static-file.ts
@@ -5967,11 +5956,11 @@ var use_asset_drag_events_default = useAssetDragEvents;
 // src/components/AssetSelectorItem.tsx
 import React39, {
   useCallback as useCallback28,
-  useContext as useContext11,
-  useLayoutEffect as useLayoutEffect4,
+  useContext as useContext10,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo28,
   useRef as useRef15,
-  useState as useState23
+  useState as useState22
 } from "react";
 import { Internals as Internals10 } from "remotion";
 import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
@@ -6357,7 +6346,7 @@ var AssetFolderItem = ({
   setDropLocation,
   readOnlyStudio
 }) => {
-  const [hovered, setHovered] = useState23(false);
+  const [hovered, setHovered] = useState22(false);
   const openFolderTimerRef = useRef15(null);
   const { isDropDiv, onDragEnter, onDragLeave } = use_asset_drag_events_default({
     name: item.name,
@@ -6486,13 +6475,13 @@ var AssetFolderTree = ({
 };
 var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
   const isMobileLayout = useMobileLayout();
-  const [hovered, setHovered] = useState23(false);
-  const { setSidebarCollapsedState } = useContext11(SidebarContext);
+  const [hovered, setHovered] = useState22(false);
+  const { setSidebarCollapsedState } = useContext10(SidebarContext);
   const onPointerEnter = useCallback28(() => {
     setHovered(true);
   }, []);
-  const { setCanvasContent } = useContext11(Internals10.CompositionSetters);
-  const { canvasContent } = useContext11(Internals10.CompositionManager);
+  const { setCanvasContent } = useContext10(Internals10.CompositionSetters);
+  const { canvasContent } = useContext10(Internals10.CompositionManager);
   const relativePath = useMemo28(() => {
     return parentFolder ? parentFolder + "/" + item.name : item.name;
   }, [parentFolder, item.name]);
@@ -6506,7 +6495,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     setHovered(false);
   }, []);
   const rowRef = useRef15(null);
-  useLayoutEffect4(() => {
+  useLayoutEffect3(() => {
     maybeScrollAssetSidebarRowIntoView({
       element: rowRef.current,
       assetPath: relativePath,
@@ -6623,11 +6612,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 useEffect22, useMemo as useMemo29, useState as useState25 } from "react";
+import { useContext as useContext12, useEffect as useEffect22, useMemo as useMemo29, useState as useState24 } from "react";
 import { Internals as Internals11, staticFile } from "remotion";
 
 // src/components/use-static-files.ts
-import React40, { createContext as createContext10, useContext as useContext12, useEffect as useEffect21, useState as useState24 } from "react";
+import React40, { createContext as createContext10, useContext as useContext11, useEffect as useEffect21, useState as useState23 } from "react";
 import { useRemotionEnvironment } from "remotion";
 
 // src/api/get-static-files.ts
@@ -6685,7 +6674,7 @@ var watchPublicFolder = (callback) => {
 // src/components/use-static-files.ts
 var StaticFilesContext = createContext10([]);
 var StaticFilesProvider = ({ children }) => {
-  const [files, setFiles] = useState24(() => getStaticFiles());
+  const [files, setFiles] = useState23(() => getStaticFiles());
   const env = useRemotionEnvironment();
   useEffect21(() => {
     if (!env.isStudio) {
@@ -6702,7 +6691,7 @@ var StaticFilesProvider = ({ children }) => {
   return React40.createElement(StaticFilesContext.Provider, { value: files }, children);
 };
 var useStaticFiles = () => {
-  return useContext12(StaticFilesContext);
+  return useContext11(StaticFilesContext);
 };
 
 // src/components/CurrentAsset.tsx
@@ -6747,7 +6736,7 @@ var formatDuration = (seconds) => {
   return `${String(m).padStart(2, "0")}:${sFixed}`;
 };
 var CurrentAsset = () => {
-  const { canvasContent } = useContext13(Internals11.CompositionManager);
+  const { canvasContent } = useContext12(Internals11.CompositionManager);
   const assetName = canvasContent?.type === "asset" ? canvasContent.asset : null;
   const staticFiles = useStaticFiles();
   const sizeInBytes = useMemo29(() => {
@@ -6757,7 +6746,7 @@ var CurrentAsset = () => {
     const file = staticFiles.find((f) => f.name === assetName);
     return file?.sizeInBytes ?? null;
   }, [assetName, staticFiles]);
-  const [mediaMetadata, setMediaMetadata] = useState25(null);
+  const [mediaMetadata, setMediaMetadata] = useState24(null);
   useEffect22(() => {
     setMediaMetadata(null);
     if (!assetName) {
@@ -6851,10 +6840,10 @@ var baseList = {
 };
 var AssetSelector = ({ readOnlyStudio }) => {
   const { tabIndex } = useZIndex();
-  const { canvasContent } = useContext14(Internals12.CompositionManager);
-  const { assetFoldersExpanded, setAssetFoldersExpanded } = useContext14(FolderContext);
-  const [dropLocation, setDropLocation] = useState26(null);
-  const connectionStatus = useContext14(StudioServerConnectionCtx).previewServerState.type;
+  const { canvasContent } = useContext13(Internals12.CompositionManager);
+  const { assetFoldersExpanded, setAssetFoldersExpanded } = useContext13(FolderContext);
+  const [dropLocation, setDropLocation] = useState25(null);
+  const connectionStatus = useContext13(StudioServerConnectionCtx).previewServerState.type;
   const shouldAllowUpload = connectionStatus === "connected" && !readOnlyStudio;
   const showCurrentAsset = canvasContent?.type === "asset";
   const list = useMemo30(() => {
@@ -6977,16 +6966,16 @@ var AssetSelector = ({ readOnlyStudio }) => {
 // src/components/CompSelectorRef.tsx
 import {
   useCallback as useCallback30,
-  useContext as useContext15,
+  useContext as useContext14,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo31,
-  useState as useState27
+  useState as useState26
 } from "react";
 import { Internals as Internals13 } from "remotion";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var CompSelectorRef = ({ children }) => {
-  const { compositions } = useContext15(Internals13.CompositionManager);
-  const [foldersExpanded, setFoldersExpanded] = useState27(loadExpandedFolders("compositions"));
+  const { compositions } = useContext14(Internals13.CompositionManager);
+  const [foldersExpanded, setFoldersExpanded] = useState26(loadExpandedFolders("compositions"));
   const selectComposition = useSelectComposition();
   const toggleFolder = useCallback30((folderName, parentName) => {
     setFoldersExpanded((p) => {
@@ -7059,7 +7048,7 @@ var CompSelectorRef = ({ children }) => {
 };
 
 // src/components/Tabs/index.tsx
-import { useCallback as useCallback31, useMemo as useMemo32, useState as useState28 } from "react";
+import { useCallback as useCallback31, useMemo as useMemo32, useState as useState27 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var tabsContainer = {
   display: "flex",
@@ -7093,7 +7082,7 @@ var selectorButton = {
   WebkitUserSelect: "none"
 };
 var Tab = ({ children, onClick, style: style3, selected }) => {
-  const [hovered, setHovered] = useState28(false);
+  const [hovered, setHovered] = useState27(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback31(() => {
     setHovered(true);
@@ -7146,7 +7135,7 @@ var persistSelectedOptionsSidebarPanel = (panel) => {
 };
 var explorerSidebarTabs = createRef6();
 var ExplorerPanel = ({ readOnlyStudio }) => {
-  const [panel, setPanel] = useState29(() => getSelectedPanel());
+  const [panel, setPanel] = useState28(() => getSelectedPanel());
   const onCompositionsSelected = useCallback32(() => {
     setPanel("compositions");
     persistSelectedOptionsSidebarPanel("compositions");
@@ -7199,8 +7188,8 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
 
 // src/components/InitialCompositionLoader.tsx
 var useSelectAsset = () => {
-  const { setCanvasContent } = useContext16(Internals14.CompositionSetters);
-  const { setAssetFoldersExpanded } = useContext16(FolderContext);
+  const { setCanvasContent } = useContext15(Internals14.CompositionSetters);
+  const { setAssetFoldersExpanded } = useContext15(FolderContext);
   return useCallback33((asset) => {
     setCanvasContent({ type: "asset", asset });
     explorerSidebarTabs.current?.selectAssetsPanel();
@@ -7220,10 +7209,10 @@ var useSelectAsset = () => {
   }, [setAssetFoldersExpanded, setCanvasContent]);
 };
 var useSelectComposition = () => {
-  const { setCompositionFoldersExpanded } = useContext16(FolderContext);
-  const { setCanvasContent } = useContext16(Internals14.CompositionSetters);
+  const { setCompositionFoldersExpanded } = useContext15(FolderContext);
+  const { setCanvasContent } = useContext15(Internals14.CompositionSetters);
   const isMobileLayout = useMobileLayout();
-  const { setSidebarCollapsedState } = useContext16(SidebarContext);
+  const { setSidebarCollapsedState } = useContext15(SidebarContext);
   return useCallback33((c, push) => {
     if (push) {
       pushUrl(`/${c.id}`);
@@ -7254,8 +7243,8 @@ var useSelectComposition = () => {
   ]);
 };
 var InitialCompositionLoader = () => {
-  const { compositions, canvasContent } = useContext16(Internals14.CompositionManager);
-  const { setCanvasContent } = useContext16(Internals14.CompositionSetters);
+  const { compositions, canvasContent } = useContext15(Internals14.CompositionManager);
+  const { setCanvasContent } = useContext15(Internals14.CompositionSetters);
   const selectComposition = useSelectComposition();
   const selectAsset = useSelectAsset();
   const staticFiles = useStaticFiles();
@@ -7330,10 +7319,10 @@ var InitialCompositionLoader = () => {
 };
 
 // src/components/MenuToolbar.tsx
-import { useCallback as useCallback100, useMemo as useMemo105, useState as useState71 } from "react";
+import { useCallback as useCallback100, useMemo as useMemo105, useState as useState70 } 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";
 
@@ -7356,7 +7345,7 @@ import {
   useEffect as useEffect24,
   useImperativeHandle as useImperativeHandle7,
   useRef as useRef16,
-  useState as useState30
+  useState as useState29
 } from "react";
 import { AbsoluteFill as AbsoluteFill3 } from "remotion";
 
@@ -7403,7 +7392,7 @@ var ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
 };
 
 // src/components/ModalHeader.tsx
-import { useCallback as useCallback34, useContext as useContext17 } from "react";
+import { useCallback as useCallback34, useContext as useContext16 } from "react";
 
 // src/components/NewComposition/CancelButton.tsx
 import { jsx as jsx64 } from "react/jsx-runtime";
@@ -7454,7 +7443,7 @@ var icon = {
   width: 20
 };
 var ModalHeader = ({ title: title4, onClose }) => {
-  const { setSelectedModal } = useContext17(ModalsContext);
+  const { setSelectedModal } = useContext16(ModalsContext);
   const onPress = useCallback34(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -7485,7 +7474,7 @@ var container18 = {
 };
 var askAiModalRef = createRef7();
 var AskAiModal = () => {
-  const [state, setState] = useState30("never-opened");
+  const [state, setState] = useState29("never-opened");
   const iframe = useRef16(null);
   useImperativeHandle7(askAiModalRef, () => ({
     toggle: () => {
@@ -7552,7 +7541,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
@@ -7597,7 +7586,7 @@ var ControlButton = (props) => {
 
 // src/components/NewComposition/ComboBox.tsx
 import { PlayerInternals as PlayerInternals6 } from "@remotion/player";
-import { useCallback as useCallback36, useEffect as useEffect25, useMemo as useMemo34, useRef as useRef17, useState as useState31 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect25, useMemo as useMemo34, useRef as useRef17, useState as useState30 } from "react";
 import ReactDOM5 from "react-dom";
 import { jsx as jsx69, jsxs as jsxs31, Fragment as Fragment8 } from "react/jsx-runtime";
 var container19 = {
@@ -7616,8 +7605,8 @@ var label3 = {
   textAlign: "left"
 };
 var Combobox = ({ values, selectedId, style: customStyle, title: title4 }) => {
-  const [hovered, setIsHovered] = useState31(false);
-  const [opened, setOpened] = useState31(false);
+  const [hovered, setIsHovered] = useState30(false);
+  const [opened, setOpened] = useState30(false);
   const ref = useRef17(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals6.useElementSize(ref, {
@@ -7784,7 +7773,7 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title4 }) => {
 
 // src/components/Preview.tsx
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
-import { useContext as useContext20, useEffect as useEffect31, useMemo as useMemo38, useRef as useRef20 } from "react";
+import { useContext as useContext19, useEffect as useEffect31, useMemo as useMemo38, useRef as useRef20 } from "react";
 import { Internals as Internals15 } from "remotion";
 
 // src/helpers/checkerboard-background.ts
@@ -7829,7 +7818,7 @@ var CheckerboardContext = createContext11({
 });
 
 // src/components/RenderPreview.tsx
-import { useContext as useContext18, useEffect as useEffect30, useState as useState36 } from "react";
+import { useContext as useContext17, useEffect as useEffect30, useState as useState35 } from "react";
 
 // src/helpers/get-asset-metadata.ts
 import { getVideoMetadata } from "@remotion/media-utils";
@@ -7916,7 +7905,7 @@ var getAssetMetadata = async (canvasContent, addTime) => {
 import { formatBytes as formatBytes2 } from "@remotion/studio-shared";
 
 // src/components/JSONViewer.tsx
-import { useEffect as useEffect28, useState as useState34 } from "react";
+import { useEffect as useEffect28, useState as useState33 } from "react";
 
 // src/components/NewComposition/RemTextarea.tsx
 import {
@@ -7925,7 +7914,7 @@ import {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef19,
-  useState as useState33
+  useState as useState32
 } from "react";
 
 // src/components/NewComposition/RemInput.tsx
@@ -7935,7 +7924,7 @@ import {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
   useRef as useRef18,
-  useState as useState32
+  useState as useState31
 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var INPUT_HORIZONTAL_PADDING = 8;
@@ -7961,8 +7950,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] = useState32(false);
-  const [isHovered, setIsHovered] = useState32(false);
+  const [isFocused, setIsFocused] = useState31(false);
+  const [isHovered, setIsHovered] = useState31(false);
   const inputRef = useRef18(null);
   const { tabIndex } = useZIndex();
   const style5 = useMemo35(() => {
@@ -8019,8 +8008,8 @@ var inputBaseStyle2 = {
   overflowX: "hidden"
 };
 var RemTextareaFRFunction = ({ status, ...props }, ref) => {
-  const [isFocused, setIsFocused] = useState33(false);
-  const [isHovered, setIsHovered] = useState33(false);
+  const [isFocused, setIsFocused] = useState32(false);
+  const [isHovered, setIsHovered] = useState32(false);
   const inputRef = useRef19(null);
   const { tabIndex } = useZIndex();
   useImperativeHandle9(ref, () => {
@@ -8112,7 +8101,7 @@ var jsonStyle = {
   flex: 1
 };
 var JSONViewer = ({ src }) => {
-  const [json, setJson] = useState34(null);
+  const [json, setJson] = useState33(null);
   useEffect28(() => {
     fetch(src).then((res) => res.json()).then((jsonRes) => {
       setJson(JSON.stringify(jsonRes, null, 2));
@@ -8129,7 +8118,7 @@ var JSONViewer = ({ src }) => {
 };
 
 // src/components/TextViewer.tsx
-import { useEffect as useEffect29, useState as useState35 } from "react";
+import { useEffect as useEffect29, useState as useState34 } from "react";
 import { jsxs as jsxs32 } from "react/jsx-runtime";
 var textStyle = {
   margin: 14,
@@ -8139,7 +8128,7 @@ var textStyle = {
   whiteSpace: "pre-wrap"
 };
 var TextViewer = ({ src }) => {
-  const [txt, setTxt] = useState35("");
+  const [txt, setTxt] = useState34("");
   useEffect29(() => {
     fetch(src).then(async (res) => {
       if (!res.ok || !res.body) {
@@ -8240,9 +8229,9 @@ var errMsgStyle = {
 };
 var RenderPreview = ({ path, assetMetadata, getBlob }) => {
   const fileType = getPreviewFileType(path);
-  const connectionStatus = useContext18(StudioServerConnectionCtx).previewServerState.type;
-  const [blobUrl, setBlobUrl] = useState36(null);
-  const [blobError, setBlobError] = useState36(null);
+  const connectionStatus = useContext17(StudioServerConnectionCtx).previewServerState.type;
+  const [blobUrl, setBlobUrl] = useState35(null);
+  const [blobError, setBlobError] = useState35(null);
   useEffect30(() => {
     if (!getBlob) {
       setBlobUrl(null);
@@ -8358,7 +8347,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 jsx76, jsxs as jsxs36 } from "react/jsx-runtime";
 var msgStyle3 = {
@@ -8376,7 +8365,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__ */ jsx76("div", {
@@ -8515,7 +8504,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 {
@@ -8594,7 +8583,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,
@@ -8686,8 +8675,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
@@ -8785,7 +8774,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({
@@ -8795,7 +8784,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(() => {
@@ -8812,7 +8801,7 @@ var useTimelineInOutFramePosition = () => {
   }, [durationInFrames, id, state]);
 };
 var useTimelineSetInOutFramePosition = () => {
-  const { setInAndOutFrames } = useContext22(SetTimelineInOutContext);
+  const { setInAndOutFrames } = useContext21(SetTimelineInOutContext);
   return { setInAndOutFrames };
 };
 
@@ -9356,18 +9345,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;
@@ -10114,7 +10103,7 @@ var makeSearchResults = (actions, setSelectedModal) => {
 
 // src/components/Menu/MenuItem.tsx
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
-import { useCallback as useCallback38, useMemo as useMemo43, useRef as useRef21, useState as useState37 } from "react";
+import { useCallback as useCallback38, useMemo as useMemo43, useRef as useRef21, useState as useState36 } from "react";
 import ReactDOM6 from "react-dom";
 import { jsx as jsx84, jsxs as jsxs39, Fragment as Fragment13 } from "react/jsx-runtime";
 var container21 = {
@@ -10140,7 +10129,7 @@ var MenuItem = ({
   onNextMenu,
   menu
 }) => {
-  const [hovered, setHovered] = useState37(false);
+  const [hovered, setHovered] = useState36(false);
   const ref = useRef21(null);
   const size2 = PlayerInternals9.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -10245,18 +10234,18 @@ var MenuItem = ({
 // src/components/MenuBuildIndicator.tsx
 import {
   useCallback as useCallback40,
-  useContext as useContext26,
+  useContext as useContext25,
   useEffect as useEffect34,
   useMemo as useMemo45,
-  useState as useState40
+  useState as useState39
 } from "react";
 
 // src/components/MenuCompositionName.tsx
-import { useCallback as useCallback39, useContext as useContext25, useMemo as useMemo44, useState as useState39 } from "react";
+import { useCallback as useCallback39, useContext as useContext24, useMemo as useMemo44, useState as useState38 } from "react";
 import { Internals as Internals21 } from "remotion";
 
 // src/components/Timeline/use-resolved-stack.ts
-import { useContext as useContext24, useEffect as useEffect33, useState as useState38 } from "react";
+import { useContext as useContext23, useEffect as useEffect33, useState as useState37 } from "react";
 import { Internals as Internals20 } from "remotion";
 
 // src/components/Timeline/TimelineStack/get-stack.ts
@@ -10349,8 +10338,8 @@ var resolvedCache = new Map;
 var inFlight = new Set;
 var subscribers = new Map;
 var useResolvedStack = (stack2) => {
-  const updateResolvedStackTrace = useContext24(Internals20.SequenceStackTracesUpdateContext);
-  const [value, setValue] = useState38(() => {
+  const updateResolvedStackTrace = useContext23(Internals20.SequenceStackTracesUpdateContext);
+  const [value, setValue] = useState37(() => {
     if (!stack2) {
       return null;
     }
@@ -10415,10 +10404,10 @@ var slashStyle = {
   top: 1
 };
 var MenuCompositionName = () => {
-  const { canvasContent, compositions } = useContext25(Internals21.CompositionManager);
-  const connectionStatus = useContext25(StudioServerConnectionCtx).previewServerState.type;
-  const [opening, setOpening] = useState39(false);
-  const [hovered, setHovered] = useState39(false);
+  const { canvasContent, compositions } = useContext24(Internals21.CompositionManager);
+  const connectionStatus = useContext24(StudioServerConnectionCtx).previewServerState.type;
+  const [opening, setOpening] = useState38(false);
+  const [hovered, setHovered] = useState38(false);
   const composition = useMemo44(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
       return null;
@@ -10496,9 +10485,9 @@ var projectNameLinkHovered = {
   textDecoration: "underline"
 };
 var MenuBuildIndicator = () => {
-  const [isBuilding, setIsBuilding] = useState40(false);
-  const [projectNameHovered, setProjectNameHovered] = useState40(false);
-  const ctx = useContext26(StudioServerConnectionCtx).previewServerState;
+  const [isBuilding, setIsBuilding] = useState39(false);
+  const [projectNameHovered, setProjectNameHovered] = useState39(false);
+  const ctx = useContext25(StudioServerConnectionCtx).previewServerState;
   const showEditorLink = window.remotion_editorName && ctx.type === "connected";
   const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
   const handleProjectNameClick = useCallback40(async () => {
@@ -10576,16 +10565,16 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback97, useContext as useContext65, useEffect as useEffect63 } from "react";
+import { useCallback as useCallback97, useContext as useContext64, useEffect as useEffect63 } from "react";
 
 // src/components/TopPanel.tsx
-import React125, { useCallback as useCallback96, useContext as useContext64, useEffect as useEffect62, useMemo as useMemo103 } from "react";
+import React125, { useCallback as useCallback96, useContext as useContext63, useEffect as useEffect62, useMemo as useMemo103 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect35, useRef as useRef22, useState as useState41 } from "react";
+import { useEffect as useEffect35, useRef as useRef22, useState as useState40 } from "react";
 function useBreakpoint(breakpoint2) {
-  const [compactUI, setCompactUI] = useState41(window.innerWidth < breakpoint2);
+  const [compactUI, setCompactUI] = useState40(window.innerWidth < breakpoint2);
   const compactUIRef = useRef22(compactUI);
   useEffect35(() => {
     function handleResize() {
@@ -10603,21 +10592,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 useEffect40 } from "react";
+import { useContext as useContext33, useEffect as useEffect40 } from "react";
 import { Internals as Internals29 } from "remotion";
 
 // src/components/Canvas.tsx
 import {
   useCallback as useCallback44,
-  useContext as useContext33,
+  useContext as useContext32,
   useEffect as useEffect38,
   useMemo as useMemo52,
   useRef as useRef25,
-  useState as useState43
+  useState as useState42
 } from "react";
 import { Internals as Internals27, watchStaticFile } from "remotion";
 
@@ -10752,19 +10741,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 {
@@ -10810,7 +10799,7 @@ var useStudioCanvasDimensions = ({
 };
 
 // src/components/EditorGuides/Guide.tsx
-import { memo, useCallback as useCallback41, useContext as useContext28, useMemo as useMemo48 } from "react";
+import { memo, useCallback as useCallback41, useContext as useContext27, useMemo as useMemo48 } from "react";
 import { NoReactInternals as NoReactInternals6 } from "remotion/no-react";
 
 // src/components/ForceSpecificCursor.tsx
@@ -10858,7 +10847,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
     selectedGuideId,
     setHoveredGuideId,
     hoveredGuideId
-  } = useContext28(EditorShowGuidesContext);
+  } = useContext27(EditorShowGuidesContext);
   const onPointerEnter = useCallback41(() => {
     setHoveredGuideId(() => guide.id);
   }, [guide.id, setHoveredGuideId]);
@@ -10950,11 +10939,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;
@@ -10975,7 +10964,7 @@ var EditorGuides_default = EditorGuides;
 // src/components/EditorRuler/index.tsx
 import {
   useCallback as useCallback43,
-  useContext as useContext31,
+  useContext as useContext30,
   useEffect as useEffect37,
   useMemo as useMemo51,
   useRef as useRef24
@@ -11190,11 +11179,11 @@ var getRulerScaleRange = ({
 // src/components/EditorRuler/Ruler.tsx
 import {
   useCallback as useCallback42,
-  useContext as useContext30,
+  useContext as useContext29,
   useEffect as useEffect36,
   useMemo as useMemo50,
   useRef as useRef23,
-  useState as useState42
+  useState as useState41
 } from "react";
 import { Internals as Internals25 } from "remotion";
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -11220,12 +11209,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] = useState42(isVerticalRuler ? "ew-resize" : "ns-resize");
+  const [cursor, setCursor] = useState41(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]);
@@ -11345,7 +11334,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);
@@ -11501,11 +11490,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";
 };
 
@@ -11535,8 +11524,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,
@@ -11548,8 +11537,8 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const keybindings = useKeybinding();
   const config = Internals27.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
-  const { editorShowGuides } = useContext33(EditorShowGuidesContext);
-  const [assetResolution, setAssetResolution] = useState43(null);
+  const { editorShowGuides } = useContext32(EditorShowGuidesContext);
+  const [assetResolution, setAssetResolution] = useState42(null);
   const contentDimensions = useMemo52(() => {
     if ((canvasContent.type === "asset" || canvasContent.type === "output" || canvasContent.type === "output-blob") && assetResolution && assetResolution.type === "found") {
       return assetResolution.dimensions;
@@ -12047,9 +12036,9 @@ var container24 = {
 };
 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);
   useEffect40(() => {
     if (resolved?.type !== "success" && resolved?.type !== "success-and-refreshing") {
       return;
@@ -12147,7 +12136,7 @@ var ErrorLoading = ({ error, calculateMetadataContext }) => {
 import { jsx as jsx97 } 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) {
@@ -12171,7 +12160,7 @@ var CanvasIfSizeIsAvailable = () => {
 };
 
 // src/components/CurrentCompositionSideEffects.tsx
-import { useCallback as useCallback45, useContext as useContext36, useEffect as useEffect41 } from "react";
+import { useCallback as useCallback45, useContext as useContext35, useEffect as useEffect41 } from "react";
 import { Internals as Internals31 } from "remotion";
 
 // src/helpers/document-title.ts
@@ -12226,8 +12215,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;
   useEffect41(() => {
     if (!canvasContent) {
@@ -12256,7 +12245,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 = useCallback45(() => {
     if (!video) {
       return;
@@ -12331,18 +12320,18 @@ function MobilePanel({
 // src/components/ObserveDefaultPropsContext.tsx
 import React65, {
   useCallback as useCallback46,
-  useContext as useContext37,
+  useContext as useContext36,
   useEffect as useEffect42,
   useMemo as useMemo54,
-  useState as useState44
+  useState as useState43
 } from "react";
 import { Internals as Internals32 } from "remotion";
 import { jsx as jsx99 } from "react/jsx-runtime";
 var ObserveDefaultPropsContext = React65.createContext(null);
 var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
-  const { previewServerState, subscribeToEvent } = useContext37(StudioServerConnectionCtx);
-  const { updateProps } = useContext37(Internals32.EditorPropsContext);
-  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState44({});
+  const { previewServerState, subscribeToEvent } = useContext36(StudioServerConnectionCtx);
+  const { updateProps } = useContext36(Internals32.EditorPropsContext);
+  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState43({});
   const canSaveDefaultProps = useMemo54(() => {
     if (compositionId === null) {
       return null;
@@ -12416,10 +12405,10 @@ var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
 import {
   createRef as createRef10,
   useCallback as useCallback87,
-  useContext as useContext55,
+  useContext as useContext54,
   useImperativeHandle as useImperativeHandle13,
   useMemo as useMemo97,
-  useState as useState62
+  useState as useState61
 } from "react";
 import { Internals as Internals36 } from "remotion";
 
@@ -12432,7 +12421,7 @@ import {
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo56,
   useRef as useRef26,
-  useState as useState46
+  useState as useState45
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
@@ -12454,10 +12443,10 @@ function getZodSchemaFromPrimitive(value, z) {
 // src/components/get-zod-if-possible.tsx
 import {
   createContext as createContext17,
-  useContext as useContext38,
+  useContext as useContext37,
   useEffect as useEffect43,
   useMemo as useMemo55,
-  useState as useState45
+  useState as useState44
 } from "react";
 import { jsx as jsx100 } from "react/jsx-runtime";
 async function getZodIfPossible() {
@@ -12485,18 +12474,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] = useState45(null);
-  const [zodV3, setZodV3] = useState45(null);
-  const [zodTypes, setZodTypes] = useState45(null);
+  const [zod, setZod] = useState44(null);
+  const [zodV3, setZodV3] = useState44(null);
+  const [zodTypes, setZodTypes] = useState44(null);
   useEffect43(() => {
     getZodIfPossible().then((z) => setZod(z));
   }, []);
@@ -12572,7 +12561,7 @@ var SetVisualControlsContext = createContext18({
 });
 var VisualControlsProvider = ({ children }) => {
   const imperativeHandles = useRef26({});
-  const [handles, setHandles] = useState46({});
+  const [handles, setHandles] = useState45({});
   const state = useMemo56(() => {
     return {
       handles
@@ -12674,10 +12663,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 React96, { useCallback as useCallback72, useContext as useContext41, useMemo as useMemo86, useState as useState57 } from "react";
+import React96, { useCallback as useCallback72, useContext as useContext40, useMemo as useMemo86, useState as useState56 } from "react";
 import { getInputProps } from "remotion";
 import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
 
@@ -12735,7 +12724,7 @@ var ValidationMessage = ({ message, align, type }) => {
 };
 
 // src/components/SegmentedControl.tsx
-import { useCallback as useCallback48, useMemo as useMemo58, useState as useState47 } from "react";
+import { useCallback as useCallback48, useMemo as useMemo58, useState as useState46 } from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 var container27 = {
   display: "flex",
@@ -12784,7 +12773,7 @@ var SegmentedControl = ({ items, needsWrapping }) => {
   });
 };
 var Item = ({ selected, onClick, children }) => {
-  const [hovered, setHovered] = useState47(false);
+  const [hovered, setHovered] = useState46(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback48(() => {
     setHovered(true);
@@ -12879,7 +12868,7 @@ var getRenderModalWarnings = ({
 
 // src/components/RenderModal/RenderModalJSONPropsEditor.tsx
 import React71, { useCallback as useCallback49, useEffect as useEffect45, 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
@@ -13207,7 +13196,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] = React71.useState(() => {
     return parseJSON(serializedJSON.serializedString, schema);
   });
@@ -13681,12 +13670,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 jsx107 } 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 {
@@ -13711,7 +13700,7 @@ var Fieldset = ({ children, shouldPad }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaLabel.tsx
-import { useCallback as useCallback51, useMemo as useMemo62, useState as useState48 } from "react";
+import { useCallback as useCallback51, useMemo as useMemo62, useState as useState47 } from "react";
 
 // src/components/RenderModal/InlineRemoveButton.tsx
 import { useCallback as useCallback50 } from "react";
@@ -13763,7 +13752,7 @@ var compactStyles = {
   flex: 1
 };
 var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick }) => {
-  const [clickableButtonHovered, setClickableButtonHovered] = useState48(false);
+  const [clickableButtonHovered, setClickableButtonHovered] = useState47(false);
   const labelStyle4 = useMemo62(() => {
     return {
       fontFamily: "monospace",
@@ -13809,7 +13798,7 @@ var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick })
 
 // src/components/RenderModal/SchemaEditor/ZodObjectEditor.tsx
 import { useCallback as useCallback70 } from "react";
-import React94, { useMemo as useMemo83, useState as useState56 } from "react";
+import React94, { useMemo as useMemo83, useState as useState55 } from "react";
 
 // src/components/RenderModal/layout.ts
 var optionRow = {
@@ -13855,7 +13844,7 @@ var fieldsetLabel = {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaSeparationLine.tsx
-import { useCallback as useCallback52, useMemo as useMemo63, useState as useState49 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo63, useState as useState48 } from "react";
 
 // src/icons/plus.tsx
 import { jsx as jsx110 } from "react/jsx-runtime";
@@ -13890,8 +13879,8 @@ var arraySeparationLine = {
   flexBasis: "100%"
 };
 var SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAddButton }) => {
-  const [outerHovered, setOuterHovered] = useState49(false);
-  const [innerHovered, setInnerHovered] = useState49(false);
+  const [outerHovered, setOuterHovered] = useState48(false);
+  const [innerHovered, setInnerHovered] = useState48(false);
   const zodTypes = useZodTypesIfPossible();
   const z = useZodIfPossible();
   if (!z) {
@@ -14031,7 +14020,7 @@ var SchemaVerticalGuide = ({ isRoot, children }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodArrayEditor.tsx
-import React79, { useCallback as useCallback55, useMemo as useMemo68, useState as useState51 } from "react";
+import React79, { useCallback as useCallback55, useMemo as useMemo68, useState as useState50 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodArrayItemEditor.tsx
 import { useCallback as useCallback53, useMemo as useMemo65 } from "react";
@@ -14068,7 +14057,7 @@ var ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, may
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback54, useEffect as useEffect46, useMemo as useMemo67, useRef as useRef27, useState as useState50 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect46, useMemo as useMemo67, useRef as useRef27, useState as useState49 } from "react";
 import ReactDOM8 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -14151,8 +14140,8 @@ var container28 = {
   verticalAlign: "text-bottom"
 };
 var InfoBubble = ({ title: title4, children }) => {
-  const [hovered, setIsHovered] = useState50(false);
-  const [opened, setOpened] = useState50(false);
+  const [hovered, setIsHovered] = useState49(false);
+  const [opened, setOpened] = useState49(false);
   const ref2 = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref2, {
@@ -14339,7 +14328,7 @@ var ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
   const onChange = useCallback55((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
-  const [expanded, setExpanded] = useState51(true);
+  const [expanded, setExpanded] = useState50(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo68(() => {
     return expanded ? " [" : " [...] ";
@@ -14524,7 +14513,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React82, { useCallback as useCallback57, useEffect as useEffect48, useMemo as useMemo70, useRef as useRef29, useState as useState52 } from "react";
+import React82, { useCallback as useCallback57, useEffect as useEffect48, useMemo as useMemo70, useRef as useRef29, useState as useState51 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx120 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -14544,8 +14533,8 @@ var InputDraggerForwardRefFn = ({
   small,
   ...props
 }, ref2) => {
-  const [inputFallback, setInputFallback] = useState52(false);
-  const [dragging, setDragging] = useState52(false);
+  const [inputFallback, setInputFallback] = useState51(false);
+  const [dragging, setDragging] = useState51(false);
   const fallbackRef = useRef29(null);
   const pointerDownRef = useRef29(false);
   const style8 = useMemo70(() => {
@@ -14715,7 +14704,7 @@ import {
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo71,
   useRef as useRef30,
-  useState as useState53
+  useState as useState52
 } from "react";
 import { jsx as jsx121 } from "react/jsx-runtime";
 var inputBaseStyle3 = {
@@ -14724,8 +14713,8 @@ var inputBaseStyle3 = {
   borderWidth: 1
 };
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref2) => {
-  const [isFocused, setIsFocused] = useState53(false);
-  const [isHovered, setIsHovered] = useState53(false);
+  const [isFocused, setIsFocused] = useState52(false);
+  const [isHovered, setIsHovered] = useState52(false);
   const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo71(() => {
@@ -15076,7 +15065,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodMatrixEditor.tsx
-import React88, { useMemo as useMemo76, useState as useState54 } from "react";
+import React88, { useMemo as useMemo76, useState as useState53 } from "react";
 import { useCallback as useCallback62 } from "react";
 import { jsx as jsx127, jsxs as jsxs64 } from "react/jsx-runtime";
 var rowStyle = {
@@ -15089,7 +15078,7 @@ var ZodMatrixEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo76(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState54(true);
+  const [expanded, setExpanded] = useState53(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo76(() => {
     return expanded ? " [" : " [...] ";
@@ -15585,7 +15574,7 @@ var ZodTextareaEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }
 };
 
 // src/components/RenderModal/SchemaEditor/ZodTupleEditor.tsx
-import React93, { useCallback as useCallback69, useMemo as useMemo82, useState as useState55 } from "react";
+import React93, { useCallback as useCallback69, useMemo as useMemo82, useState as useState54 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodTupleItemEditor.tsx
 import { useCallback as useCallback68, useMemo as useMemo81 } from "react";
@@ -15622,7 +15611,7 @@ var ZodTupleEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo82(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState55(true);
+  const [expanded, setExpanded] = useState54(true);
   const tupleItems = getTupleItems(schema);
   const suffix2 = useMemo82(() => {
     return expanded ? " [" : " [...] ";
@@ -16011,7 +16000,7 @@ var ZodObjectEditor = ({
   mayPad,
   discriminatedUnionReplacement
 }) => {
-  const [expanded, setExpanded] = useState56(true);
+  const [expanded, setExpanded] = useState55(true);
   const onChange = useCallback70((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
@@ -16320,8 +16309,8 @@ var DataEditor = ({
   propsEditType,
   canSaveDefaultProps
 }) => {
-  const [mode, setMode] = useState57("schema");
-  const [showWarning, setShowWarningWithoutPersistance] = useState57(() => getPersistedShowWarningState());
+  const [mode, setMode] = useState56("schema");
+  const [showWarning, setShowWarningWithoutPersistance] = useState56(() => getPersistedShowWarningState());
   const jsonEditorSetValue = useCallback72((newProps) => {
     setDefaultProps(typeof newProps === "function" ? newProps : () => newProps, { shouldSave: false });
   }, [setDefaultProps]);
@@ -16373,7 +16362,7 @@ var DataEditor = ({
       return val(prevVal);
     });
   }, []);
-  const { previewServerState } = useContext41(StudioServerConnectionCtx);
+  const { previewServerState } = useContext40(StudioServerConnectionCtx);
   const modeItems = useMemo86(() => {
     return [
       {
@@ -16513,7 +16502,7 @@ var DefaultPropsEditor = ({
   setDefaultProps,
   propsEditType
 }) => {
-  const canSaveDefaultProps = useContext42(ObserveDefaultPropsContext);
+  const canSaveDefaultProps = useContext41(ObserveDefaultPropsContext);
   if (canSaveDefaultProps === null) {
     throw new Error("ObserveDefaultPropsContext is not set");
   }
@@ -16726,16 +16715,16 @@ var SchemaResetButton = ({ onClick }) => {
 };
 
 // src/components/RenderQueue/index.tsx
-import React108, { useContext as useContext51, useEffect as useEffect52, useMemo as useMemo94 } from "react";
+import React108, { useContext as useContext50, useEffect as useEffect52, useMemo as useMemo94 } from "react";
 import { Internals as Internals35 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
   useCallback as useCallback84,
-  useContext as useContext50,
+  useContext as useContext49,
   useEffect as useEffect51,
   useMemo as useMemo93,
-  useState as useState58
+  useState as useState57
 } from "react";
 import { Internals as Internals34 } from "remotion";
 
@@ -16836,7 +16825,7 @@ import { useCallback as useCallback76, useMemo as useMemo87 } from "react";
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback75, useContext as useContext43, useEffect as useEffect50 } from "react";
+import { useCallback as useCallback75, useContext as useContext42, useEffect as useEffect50 } from "react";
 
 // src/api/save-render-output.ts
 var throwIfNotOk = async (response) => {
@@ -16901,7 +16890,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled,
     setProcessJobCallback
-  } = useContext43(RenderQueueContext);
+  } = useContext42(RenderQueueContext);
   const processStillJob = useCallback75(async (job, signal) => {
     const compositionRef = getCompositionForJob2(job.id);
     if (!compositionRef) {
@@ -17092,13 +17081,13 @@ var RenderQueueDownloadItem = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueError.tsx
-import { useCallback as useCallback77, useContext as useContext44 } from "react";
+import { useCallback as useCallback77, useContext as useContext43 } from "react";
 import { jsx as jsx150 } from "react/jsx-runtime";
 var outputLocation = {
   ...renderQueueItemSubtitleStyle
 };
 var RenderQueueError = ({ job }) => {
-  const { setSelectedModal } = useContext44(ModalsContext);
+  const { setSelectedModal } = useContext43(ModalsContext);
   const { tabIndex } = useZIndex();
   const onClick = useCallback77(() => {
     setSelectedModal({
@@ -17120,11 +17109,11 @@ var RenderQueueError = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemCancelButton.tsx
-import { useCallback as useCallback78, useContext as useContext45, useMemo as useMemo88 } from "react";
+import { useCallback as useCallback78, useContext as useContext44, useMemo as useMemo88 } from "react";
 import { jsx as jsx151 } from "react/jsx-runtime";
 var RenderQueueCancelButton = ({ job }) => {
   const isClientJob = isClientRenderJob(job);
-  const { cancelClientJob } = useContext45(RenderQueueContext);
+  const { cancelClientJob } = useContext44(RenderQueueContext);
   const onClick = useCallback78((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -17159,7 +17148,7 @@ var RenderQueueCancelButton = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueItemStatus.tsx
-import React101, { useCallback as useCallback79, useContext as useContext46 } from "react";
+import React101, { useCallback as useCallback79, useContext as useContext45 } from "react";
 
 // src/components/RenderQueue/CircularProgress.tsx
 import { jsx as jsx152 } from "react/jsx-runtime";
@@ -17204,7 +17193,7 @@ var invisibleStyle = {
   display: "flex"
 };
 var RenderQueueItemStatus = ({ job }) => {
-  const { setSelectedModal } = useContext46(ModalsContext);
+  const { setSelectedModal } = useContext45(ModalsContext);
   const [hovered, setHovered] = React101.useState(false);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback79(() => {
@@ -17356,7 +17345,7 @@ var RenderQueueOutputName = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
-import { useCallback as useCallback81, useContext as useContext47 } from "react";
+import { useCallback as useCallback81, useContext as useContext46 } from "react";
 
 // src/components/RenderQueue/client-render-progress.ts
 var formatEtaString = (timeRemainingInMilliseconds) => {
@@ -17393,7 +17382,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 = useCallback81(() => {
@@ -17414,14 +17403,14 @@ var RenderQueueProgressMessage = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRemoveItem.tsx
-import { useCallback as useCallback82, useContext as useContext48, useMemo as useMemo91 } from "react";
+import { useCallback as useCallback82, useContext as useContext47, useMemo as useMemo91 } from "react";
 import { Internals as Internals33 } from "remotion";
 import { jsx as jsx157 } 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 = useCallback82((e) => {
     e.stopPropagation();
     if (isClientJob) {
@@ -17463,7 +17452,7 @@ var RenderQueueRemoveItem = ({ job }) => {
 };
 
 // src/components/RenderQueue/RenderQueueRepeat.tsx
-import { useCallback as useCallback83, useContext as useContext49, useMemo as useMemo92 } from "react";
+import { useCallback as useCallback83, useContext as useContext48, useMemo as useMemo92 } from "react";
 
 // src/helpers/retry-payload.ts
 import { NoReactInternals as NoReactInternals11 } from "remotion/no-react";
@@ -17667,9 +17656,9 @@ var makeClientRetryPayload = (job) => {
 // src/components/RenderQueue/RenderQueueRepeat.tsx
 import { jsx as jsx158 } 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 = useCallback83((e) => {
     e.stopPropagation();
@@ -17752,8 +17741,8 @@ var subtitle3 = {
 };
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState58(false);
-  const { setCanvasContent } = useContext50(Internals34.CompositionSetters);
+  const [hovered, setHovered] = useState57(false);
+  const { setCanvasContent } = useContext49(Internals34.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback84(() => {
     setHovered(true);
@@ -17919,9 +17908,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 = React108.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React108.useRef(null);
@@ -18004,7 +17993,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 jsx162, jsxs as jsxs78, Fragment as Fragment21 } from "react/jsx-runtime";
 var row4 = {
   display: "flex",
@@ -18024,7 +18013,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(() => {
@@ -18059,10 +18048,10 @@ var RendersTab = ({ selected, onClick }) => {
 };
 
 // src/components/VisualControls/VisualControlsContent.tsx
-import React111, { useContext as useContext54 } from "react";
+import React111, { useContext as useContext53 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
-import { useCallback as useCallback86, useContext as useContext53, useEffect as useEffect54, useState as useState61 } from "react";
+import { useCallback as useCallback86, useContext as useContext52, useEffect as useEffect54, useState as useState60 } from "react";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
 // src/fast-refresh-context.ts
@@ -18074,9 +18063,9 @@ var FastRefreshContext = createContext20({
 });
 
 // src/components/VisualControls/get-original-stack-trace.ts
-import { useEffect as useEffect53, useState as useState59 } from "react";
+import { useEffect as useEffect53, useState as useState58 } from "react";
 var useOriginalFileName = (stack2) => {
-  const [originalFileName, setOriginalFileName] = useState59({ type: "loading" });
+  const [originalFileName, setOriginalFileName] = useState58({ type: "loading" });
   useEffect53(() => {
     if (!stack2) {
       return;
@@ -18098,7 +18087,7 @@ var useOriginalFileName = (stack2) => {
 };
 
 // src/components/VisualControls/ClickableFileName.tsx
-import { useCallback as useCallback85, useMemo as useMemo96, useState as useState60 } from "react";
+import { useCallback as useCallback85, useMemo as useMemo96, useState as useState59 } from "react";
 
 // src/components/Timeline/TimelineStack/source-attribution.ts
 var getOriginalSourceAttribution = (originalLocation) => {
@@ -18123,7 +18112,7 @@ var container33 = {
 var ClickableFileName = ({
   originalFileName
 }) => {
-  const [titleHovered, setTitleHovered] = useState60(false);
+  const [titleHovered, setTitleHovered] = useState59(false);
   const hoverEffect = titleHovered && originalFileName.type === "loaded";
   const onTitlePointerEnter = useCallback85(() => {
     setTitleHovered(true);
@@ -18173,10 +18162,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] = useState61(false);
+  const state = useContext52(VisualControlsContext);
+  const { updateValue } = useContext52(SetVisualControlsContext);
+  const { fastRefreshes, increaseManualRefreshes } = useContext52(FastRefreshContext);
+  const [_saving, setSaving] = useState60(false);
   const currentValue = getVisualControlEditedValue({
     handles: state.handles,
     key: keyName
@@ -18265,7 +18254,7 @@ var container34 = {
   overflowY: "auto"
 };
 var VisualControlsContent = () => {
-  const { handles } = useContext54(VisualControlsContext);
+  const { handles } = useContext53(VisualControlsContext);
   const entries = Object.entries(handles);
   return /* @__PURE__ */ jsx166("div", {
     style: container34,
@@ -18308,10 +18297,10 @@ var persistSelectedOptionsSidebarPanel2 = (panel2) => {
 };
 var optionsSidebarTabs = createRef10();
 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 container35 = useMemo97(() => ({
     height: "100%",
     width: "100%",
@@ -18320,7 +18309,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     flexDirection: "column",
     flex: 1
   }), [isMobileLayout]);
-  const [panel2, setPanel] = useState62(() => getSelectedPanel2(renderingAvailable));
+  const [panel2, setPanel] = useState61(() => getSelectedPanel2(renderingAvailable));
   const onPropsSelected = useCallback87(() => {
     setPanel("input-props");
     persistSelectedOptionsSidebarPanel2("input-props");
@@ -18341,7 +18330,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;
@@ -18478,7 +18467,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext61, useEffect as useEffect60, useRef as useRef33, useState as useState66 } from "react";
+import { useContext as useContext60, useEffect as useEffect60, useRef as useRef33, useState as useState65 } from "react";
 import { Internals as Internals44 } from "remotion";
 
 // src/state/loop.ts
@@ -18492,7 +18481,7 @@ var loadLoopOption = () => {
 };
 
 // src/components/CheckboardToggle.tsx
-import { useCallback as useCallback88, useContext as useContext56 } from "react";
+import { useCallback as useCallback88, useContext as useContext55 } from "react";
 import { NoReactInternals as NoReactInternals13 } from "remotion/no-react";
 import { jsx as jsx168 } from "react/jsx-runtime";
 var accessibilityLabel2 = [
@@ -18500,7 +18489,7 @@ var accessibilityLabel2 = [
   areKeyboardShortcutsDisabled() ? null : "(T)"
 ].filter(NoReactInternals13.truthy).join(" ");
 var CheckboardToggle = () => {
-  const { checkerboard, setCheckerboard } = useContext56(CheckerboardContext);
+  const { checkerboard, setCheckerboard } = useContext55(CheckerboardContext);
   const onClick = useCallback88(() => {
     setCheckerboard((c) => {
       return !c;
@@ -18531,10 +18520,10 @@ var CheckboardToggle = () => {
 // src/components/FpsCounter.tsx
 import {
   useEffect as useEffect55,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo98,
   useRef as useRef31,
-  useState as useState63
+  useState as useState62
 } from "react";
 import { Internals as Internals37 } from "remotion";
 import { jsxs as jsxs82 } from "react/jsx-runtime";
@@ -18552,17 +18541,17 @@ var FpsCounter = ({ playbackSpeed }) => {
   const videoConfig = Internals37.useUnsafeVideoConfig();
   const [playing] = Internals37.Timeline.usePlayingState();
   const frame2 = Internals37.Timeline.useTimelinePosition();
-  const [marker, rerender] = useState63({});
-  const [fps, setFps] = useState63(0);
+  const [marker, rerender] = useState62({});
+  const [fps, setFps] = useState62(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);
@@ -18612,7 +18601,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import { useCallback as useCallback89, useContext as useContext57, useEffect as useEffect56 } from "react";
+import { useCallback as useCallback89, useContext as useContext56, useEffect as useEffect56 } from "react";
 import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx169 } from "react/jsx-runtime";
@@ -18622,7 +18611,7 @@ var accessibilityLabel3 = [
 ].filter(NoReactInternals14.truthy).join(" ");
 var FullScreenToggle = () => {
   const keybindings = useKeybinding();
-  const { setSize } = useContext57(Internals38.PreviewSizeContext);
+  const { setSize } = useContext56(Internals38.PreviewSizeContext);
   const onClick = useCallback89(() => {
     drawRef.current?.requestFullscreen();
     if (document.fullscreenElement)
@@ -18856,7 +18845,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 jsx173 } from "react/jsx-runtime";
 var commonPlaybackRates = [
@@ -18878,7 +18867,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 {
@@ -18928,7 +18917,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals13 } from "@remotion/player";
-import { useCallback as useCallback93, useEffect as useEffect59, useState as useState64 } from "react";
+import { useCallback as useCallback93, useEffect as useEffect59, useState as useState63 } from "react";
 import { Internals as Internals41 } from "remotion";
 
 // src/icons/jump-to-start.tsx
@@ -19025,7 +19014,7 @@ var iconButton = {
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals41.useUnsafeVideoConfig();
-  const [showBufferIndicator, setShowBufferState] = useState64(false);
+  const [showBufferIndicator, setShowBufferState] = useState63(false);
   const {
     playing,
     play,
@@ -19287,7 +19276,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback94, useContext as useContext59, useMemo as useMemo100, useRef as useRef32, useState as useState65 } from "react";
+import { useCallback as useCallback94, useContext as useContext58, useMemo as useMemo100, useRef as useRef32, useState as useState64 } from "react";
 import ReactDOM9 from "react-dom";
 import { Internals as Internals42 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs84, Fragment as Fragment24 } from "react/jsx-runtime";
@@ -19358,9 +19347,9 @@ var RenderButton = ({
   readOnlyStudio
 }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
-  const { setSelectedModal } = useContext59(ModalsContext);
-  const [preferredRenderType, setPreferredRenderType] = useState65(() => getInitialRenderType(readOnlyStudio));
-  const [dropdownOpened, setDropdownOpened] = useState65(false);
+  const { setSelectedModal } = useContext58(ModalsContext);
+  const [preferredRenderType, setPreferredRenderType] = useState64(() => getInitialRenderType(readOnlyStudio));
+  const [dropdownOpened, setDropdownOpened] = useState64(false);
   const dropdownRef = useRef32(null);
   const containerRef = useRef32(null);
   const { currentZIndex } = useZIndex();
@@ -19397,7 +19386,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(() => {
@@ -19427,7 +19416,7 @@ var RenderButton = ({
   }, []);
   const video = Internals42.useVideo();
   const getCurrentFrame2 = PlayerInternals14.useFrameImperative();
-  const { props } = useContext59(Internals42.EditorPropsContext);
+  const { props } = useContext58(Internals42.EditorPropsContext);
   const openServerRenderModal = useCallback94((copyCommandOnly) => {
     if (!video) {
       return null;
@@ -19750,7 +19739,7 @@ var RenderButton = ({
 };
 
 // src/components/Timeline/TimelineZoomControls.tsx
-import { useCallback as useCallback95, useContext as useContext60 } from "react";
+import { useCallback as useCallback95, useContext as useContext59 } from "react";
 import { Internals as Internals43 } from "remotion";
 
 // src/icons/minus.tsx
@@ -19783,8 +19772,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 = useCallback95(() => {
     if (canvasContent === null || canvasContent.type !== "composition") {
@@ -19912,15 +19901,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] = useState66(loadLoopOption());
+  const [loop, setLoop] = useState65(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
   useEffect60(() => {
@@ -20074,7 +20063,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo101, useRef as useRef34, useState as useState67 } from "react";
+import { useMemo as useMemo101, useRef as useRef34, useState as useState66 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -20128,7 +20117,7 @@ var containerColumn = {
 };
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
-  const [flexValue, setFlexValue] = useState67(initialTimelineFlex ?? defaultFlex);
+  const [flexValue, setFlexValue] = useState66(initialTimelineFlex ?? defaultFlex);
   const ref2 = useRef34(null);
   const isDragging = useRef34(false);
   const value = useMemo101(() => {
@@ -20165,11 +20154,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 jsx185, jsxs as jsxs87, 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,
@@ -20203,7 +20192,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext63, useEffect as useEffect61, useRef as useRef35, useState as useState68 } from "react";
+import { useContext as useContext62, useEffect as useEffect61, useRef as useRef35, useState as useState67 } from "react";
 import { jsx as jsx186 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -20213,11 +20202,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] = useState68(() => Date.now());
+  const [lastPointerUp, setLastPointerUp] = useState67(() => Date.now());
   const ref2 = useRef35(null);
   useEffect61(() => {
     if (context.isDragging.current) {
@@ -20368,7 +20357,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") {
@@ -20382,9 +20371,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") {
@@ -20506,7 +20495,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 = useCallback97((color) => {
@@ -20644,10 +20633,10 @@ var SidebarCollapserControls = () => {
 // src/components/UndoRedoButtons.tsx
 import {
   useCallback as useCallback98,
-  useContext as useContext66,
+  useContext as useContext65,
   useEffect as useEffect64,
   useRef as useRef36,
-  useState as useState69
+  useState as useState68
 } from "react";
 
 // src/icons/redo.tsx
@@ -20683,9 +20672,9 @@ var iconStyle5 = {
   height: 16
 };
 var UndoRedoButtons = () => {
-  const [undoFile, setUndoFile] = useState69(null);
-  const [redoFile, setRedoFile] = useState69(null);
-  const { subscribeToEvent } = useContext66(StudioServerConnectionCtx);
+  const [undoFile, setUndoFile] = useState68(null);
+  const [redoFile, setRedoFile] = useState68(null);
+  const { subscribeToEvent } = useContext65(StudioServerConnectionCtx);
   const keybindings = useKeybinding();
   const undoInFlight = useRef36(false);
   const redoInFlight = useRef36(false);
@@ -20790,10 +20779,10 @@ var UndoRedoButtons = () => {
 // src/components/UpdateCheck.tsx
 import {
   useCallback as useCallback99,
-  useContext as useContext67,
+  useContext as useContext66,
   useEffect as useEffect65,
   useMemo as useMemo104,
-  useState as useState70
+  useState as useState69
 } from "react";
 import { VERSION } from "remotion";
 import { jsx as jsx192 } from "react/jsx-runtime";
@@ -20809,10 +20798,10 @@ var buttonStyle3 = {
   justifyContent: "center"
 };
 var UpdateCheck = () => {
-  const [info, setInfo] = useState70(null);
-  const { setSelectedModal } = useContext67(ModalsContext);
+  const [info, setInfo] = useState69(null);
+  const { setSelectedModal } = useContext66(ModalsContext);
   const { tabIndex } = useZIndex();
-  const [knownBugs, setKnownBugs] = useState70(null);
+  const [knownBugs, setKnownBugs] = useState69(null);
   const hasKnownBugs = useMemo104(() => {
     return knownBugs && knownBugs.length > 0;
   }, [knownBugs]);
@@ -20908,7 +20897,7 @@ var flex2 = {
   flex: 1
 };
 var MenuToolbar = ({ readOnlyStudio }) => {
-  const [selected, setSelected] = useState71(null);
+  const [selected, setSelected] = useState70(null);
   const mobileLayout = useMobileLayout();
   const fixedWidthRight = useMemo105(() => {
     return {
@@ -21014,7 +21003,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import React152, { useContext as useContext80, useMemo as useMemo123 } from "react";
+import React152, { useContext as useContext79, useMemo as useMemo123 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/get-sequence-visible-range.ts
@@ -21061,7 +21050,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
@@ -21110,6 +21100,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
 }) => {
@@ -21138,7 +21141,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,
@@ -21165,7 +21169,7 @@ var calculateTimeline = ({
 };
 
 // src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext21, useCallback as useCallback101, useMemo as useMemo106, useState as useState72 } from "react";
+import { createContext as createContext21, useCallback as useCallback101, useMemo as useMemo106, useState as useState71 } from "react";
 import { jsx as jsx194 } from "react/jsx-runtime";
 var ExpandedTracksContext = createContext21({
   expandedTracks: {},
@@ -21174,7 +21178,7 @@ var ExpandedTracksContext = createContext21({
   }
 });
 var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState72({});
+  const [expandedTracks, setExpandedTracks] = useState71({});
   const toggleTrack = useCallback101((id) => {
     setExpandedTracks((prev) => ({
       ...prev,
@@ -21231,16 +21235,16 @@ var MaxTimelineTracksReached = () => {
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback102,
-  useContext as useContext70,
+  useContext as useContext69,
   useEffect as useEffect66,
   useMemo as useMemo108,
   useRef as useRef37,
-  useState as useState73
+  useState as useState72
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
 
 // src/components/Timeline/TimelineInOutPointer.tsx
-import { createRef as createRef11, useContext as useContext68 } from "react";
+import { createRef as createRef11, useContext as useContext67 } from "react";
 import { Internals as Internals46 } from "remotion";
 import { jsx as jsx195, jsxs as jsxs93, Fragment as Fragment29 } from "react/jsx-runtime";
 var areaHighlight = {
@@ -21255,7 +21259,7 @@ var outMarkerAreaRef = createRef11();
 var TimelineInOutPointer = () => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals46.useUnsafeVideoConfig();
-  const timelineWidth = useContext68(TimelineWidthContext);
+  const timelineWidth = useContext67(TimelineWidthContext);
   if (!videoConfig || timelineWidth === null) {
     return null;
   }
@@ -21282,7 +21286,7 @@ var TimelineInOutPointer = () => {
 };
 
 // src/components/Timeline/TimelineInOutPointerHandle.tsx
-import { createRef as createRef12, useContext as useContext69, useMemo as useMemo107 } from "react";
+import { createRef as createRef12, useContext as useContext68, useMemo as useMemo107 } from "react";
 import { useVideoConfig as useVideoConfig3 } from "remotion";
 import { jsx as jsx196 } from "react/jsx-runtime";
 var line3 = {
@@ -21315,7 +21319,7 @@ var TimelineInOutPointerHandle = ({
   type,
   atFrame
 }) => {
-  const timelineWidth = useContext69(TimelineWidthContext);
+  const timelineWidth = useContext68(TimelineWidthContext);
   if (timelineWidth === null) {
     return null;
   }
@@ -21351,8 +21355,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 {};
@@ -21380,10 +21384,10 @@ var Inner2 = () => {
   });
   const { isHighestContext } = useZIndex();
   const setFrame = Internals47.useTimelineSetFrame();
-  const [inOutDragging, setInOutDragging] = useState73({
+  const [inOutDragging, setInOutDragging] = useState72({
     dragging: false
   });
-  const timelineWidth = useContext70(TimelineWidthContext);
+  const timelineWidth = useContext69(TimelineWidthContext);
   const get = useCallback102((frame2) => {
     if (timelineWidth === null) {
       throw new Error("timeline width is not yet determined");
@@ -21394,7 +21398,7 @@ var Inner2 = () => {
   const left3 = size4?.left ?? 0;
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setInAndOutFrames } = useTimelineSetInOutFramePosition();
-  const [dragging, setDragging] = useState73({
+  const [dragging, setDragging] = useState72({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
@@ -21777,14 +21781,14 @@ import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
 import { useRef as useRef41 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
-import { useCallback as useCallback111, useContext as useContext74, useMemo as useMemo116 } from "react";
+import { useCallback as useCallback111, useContext as useContext73, useMemo as useMemo116 } from "react";
 import { Internals as Internals50 } from "remotion";
 
 // src/components/Timeline/TimelineExpandedSection.tsx
 import React139, { useMemo as useMemo113 } from "react";
 
 // src/components/Timeline/TimelineFieldRow.tsx
-import { useCallback as useCallback107, useContext as useContext71, useMemo as useMemo112 } from "react";
+import { useCallback as useCallback107, useContext as useContext70, useMemo as useMemo112 } from "react";
 import { Internals as Internals48 } from "remotion";
 
 // src/components/Timeline/TimelineBooleanField.tsx
@@ -21813,7 +21817,7 @@ var TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSav
 };
 
 // src/components/Timeline/TimelineNumberField.tsx
-import { useCallback as useCallback104, useMemo as useMemo109, useState as useState74 } from "react";
+import { useCallback as useCallback104, useMemo as useMemo109, useState as useState73 } from "react";
 
 // src/components/Timeline/timeline-field-utils.ts
 var getDecimalPlaces = (num) => {
@@ -21836,7 +21840,7 @@ var TimelineNumberField = ({
   onDragEnd,
   codeValue
 }) => {
-  const [dragValue, setDragValue] = useState74(null);
+  const [dragValue, setDragValue] = useState73(null);
   const onValueChange = useCallback104((newVal) => {
     setDragValue(newVal);
     onDragValueChange(field.key, newVal);
@@ -21888,7 +21892,7 @@ var TimelineNumberField = ({
 };
 
 // src/components/Timeline/TimelineRotationField.tsx
-import { useCallback as useCallback105, useMemo as useMemo110, useState as useState75 } from "react";
+import { useCallback as useCallback105, useMemo as useMemo110, useState as useState74 } from "react";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
 var unitToDegrees = {
@@ -21918,7 +21922,7 @@ var TimelineRotationField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragValue, setDragValue] = useState75(null);
+  const [dragValue, setDragValue] = useState74(null);
   const degrees = useMemo110(() => parseCssRotationToDegrees(String(effectiveValue ?? "0deg")), [effectiveValue]);
   const onValueChange = useCallback105((newVal) => {
     setDragValue(newVal);
@@ -21976,7 +21980,7 @@ var TimelineRotationField = ({
 };
 
 // src/components/Timeline/TimelineTranslateField.tsx
-import { useCallback as useCallback106, useMemo as useMemo111, useState as useState76 } from "react";
+import { useCallback as useCallback106, useMemo as useMemo111, useState as useState75 } from "react";
 import { jsx as jsx201, jsxs as jsxs95 } from "react/jsx-runtime";
 var leftDraggerStyle = {
   paddingLeft: 0
@@ -22005,8 +22009,8 @@ var TimelineTranslateField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragX, setDragX] = useState76(null);
-  const [dragY, setDragY] = useState76(null);
+  const [dragX, setDragX] = useState75(null);
+  const [dragY, setDragY] = useState75(null);
   const [codeX, codeY] = useMemo111(() => parseTranslate(String(effectiveValue ?? "0px 0px")), [effectiveValue]);
   const makeString = useCallback106((x, y) => `${x}px ${y}px`, []);
   const step = field.fieldSchema.type === "translate" ? field.fieldSchema.step ?? 1 : 1;
@@ -22280,7 +22284,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(() => {
@@ -22293,7 +22297,7 @@ var TimelineFieldRow = ({
     defaultValue: field.fieldSchema.default,
     shouldResortToDefaultValueIfUndefined: true
   });
-  const { setCodeValues } = useContext71(Internals48.VisualModeOverridesContext);
+  const { setCodeValues } = useContext70(Internals48.VisualModeOverridesContext);
   const onSave = useCallback107((key4, value) => {
     if (!propStatuses || !validatedLocation || !nodePath) {
       return Promise.reject(new Error("Cannot save"));
@@ -22507,7 +22511,7 @@ var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
 
 // src/components/Timeline/TimelineStack/index.tsx
 import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
-import { useCallback as useCallback109, useContext as useContext72, useMemo as useMemo114, useState as useState77 } from "react";
+import { useCallback as useCallback109, useContext as useContext71, useMemo as useMemo114, useState as useState76 } from "react";
 import { SourceMapConsumer as SourceMapConsumer3 } from "source-map";
 import { jsx as jsx206, jsxs as jsxs98, Fragment as Fragment30 } from "react/jsx-runtime";
 var publicPath = window.remotion_publicPath === "/" ? "" : window.remotion_publicPath;
@@ -22516,11 +22520,11 @@ SourceMapConsumer3.initialize({
   "lib/mappings.wasm": withoutSlashInTheEnd + SOURCE_MAP_ENDPOINT
 });
 var TimelineStack = ({ isCompact, sequence, originalLocation }) => {
-  const [stackHovered, setStackHovered] = useState77(false);
-  const [titleHovered, setTitleHovered] = useState77(false);
-  const [opening, setOpening] = useState77(false);
+  const [stackHovered, setStackHovered] = useState76(false);
+  const [titleHovered, setTitleHovered] = useState76(false);
+  const [opening, setOpening] = useState76(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;
@@ -22671,15 +22675,15 @@ var TimelineStack = ({ isCompact, sequence, originalLocation }) => {
 // src/components/Timeline/use-sequence-props-subscription.ts
 import {
   useCallback as useCallback110,
-  useContext as useContext73,
+  useContext as useContext72,
   useEffect as useEffect67,
   useMemo as useMemo115,
   useRef as useRef38,
-  useState as useState78
+  useState as useState77
 } 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 = useCallback110((statuses) => {
     if (!overrideId) {
@@ -22687,7 +22691,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]);
@@ -22711,8 +22715,8 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
   const currentLocationColumn = useRef38(locationColumn);
   currentLocationColumn.current = locationColumn;
   const nodePathRef = useRef38(null);
-  const [nodePath, setNodePath] = useState78(null);
-  const [jsxInMapCallback, setJsxInMapCallback] = useState78(false);
+  const [nodePath, setNodePath] = useState77(null);
+  const [jsxInMapCallback, setJsxInMapCallback] = useState77(false);
   const isMountedRef = useRef38(true);
   const setNodePathBoth = useCallback110((next) => {
     nodePathRef.current = next;
@@ -22853,12 +22857,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(() => {
@@ -23061,7 +23065,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext75, useEffect as useEffect69, useMemo as useMemo117, useRef as useRef40 } from "react";
+import { useContext as useContext74, useEffect as useEffect69, useMemo as useMemo117, useRef as useRef40 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -23216,7 +23220,7 @@ var TimelineTimePadding = () => {
   });
 };
 var TimelineTimeIndicators = () => {
-  const sliderTrack = useContext75(TimelineWidthContext);
+  const sliderTrack = useContext74(TimelineWidthContext);
   const video = Internals52.useVideo();
   if (sliderTrack === null) {
     return null;
@@ -23339,15 +23343,15 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePinchZoom.tsx
-import { useCallback as useCallback113, useContext as useContext76, useEffect as useEffect70, useRef as useRef42 } from "react";
+import { useCallback as useCallback113, useContext as useContext75, useEffect as useEffect70, 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);
@@ -23556,15 +23560,15 @@ var TimelinePinchZoom = () => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext77, useEffect as useEffect71 } from "react";
+import { useContext as useContext76, useEffect as useEffect71 } 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) {
@@ -23650,10 +23654,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
@@ -23725,7 +23729,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 useEffect72, useState as useState79 } from "react";
+import { useEffect as useEffect72, useState as useState78 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -23738,7 +23742,7 @@ var getSrc = (s) => {
 };
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
-  const [maxMediaDuration, setMaxMediaDuration] = useState79(src ? cache.get(src) ?? null : Infinity);
+  const [maxMediaDuration, setMaxMediaDuration] = useState78(src ? cache.get(src) ?? null : Infinity);
   useEffect72(() => {
     if (!src) {
       return;
@@ -23771,9 +23775,16 @@ var useMaxMediaDuration = (s, fps) => {
 };
 
 // src/components/AudioWaveform.tsx
-import { useEffect as useEffect73, useMemo as useMemo119, useRef as useRef43, useState as useState80 } from "react";
+import { useEffect as useEffect73, useMemo as useMemo119, useRef as useRef43, useState as useState79 } 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) => {
@@ -23849,12 +23860,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)
@@ -23867,12 +23973,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();
@@ -23884,25 +23993,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 {
@@ -23910,8 +24006,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 jsx212, jsxs as jsxs102 } 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 container43 = {
   display: "flex",
   flexDirection: "row",
@@ -23930,11 +24068,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,
@@ -23942,10 +24110,13 @@ var AudioWaveform = ({
   visualizationWidth,
   volume,
   doesVolumeChange,
-  playbackRate
+  playbackRate,
+  loopDisplay
 }) => {
-  const [peaks, setPeaks] = useState80(null);
-  const [error, setError] = useState80(null);
+  const [peaks, setPeaks] = useState79(null);
+  const [error, setError] = useState79(null);
+  const [waveformCanvasKey, setWaveformCanvasKey] = useState79(0);
+  const canUseWorkerPath = useMemo119(() => canUseAudioWaveformWorker(), []);
   const vidConf = Internals55.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
@@ -23953,8 +24124,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);
   useEffect73(() => {
+    if (canUseWorkerPath) {
+      return;
+    }
     const controller = new AbortController;
+    setPeaks(null);
     setError(null);
     loadWaveformPeaks(src, controller.signal).then((p) => {
       if (!controller.signal.aborted) {
@@ -23966,30 +24144,127 @@ var AudioWaveform = ({
       }
     });
     return () => controller.abort();
-  }, [src]);
+  }, [canUseWorkerPath, src]);
+  useEffect73(() => {
+    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
+  ]);
   useEffect73(() => {
     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
+  ]);
   useEffect73(() => {
     const { current: volumeCanvasElement } = volumeCanvas;
     const { current: containerElement } = containerRef;
@@ -24031,7 +24306,7 @@ var AudioWaveform = ({
       })
     });
   }
-  if (!peaks) {
+  if (!canUseWorkerPath && !peaks) {
     return null;
   }
   return /* @__PURE__ */ jsxs102("div", {
@@ -24041,7 +24316,7 @@ var AudioWaveform = ({
       /* @__PURE__ */ jsx212("canvas", {
         ref: waveformCanvas,
         style: waveformCanvasStyle
-      }),
+      }, waveformCanvasKey),
       /* @__PURE__ */ jsx212("canvas", {
         ref: volumeCanvas,
         style: volumeCanvasStyle
@@ -24064,7 +24339,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__ */ jsx213("svg", {
   viewBox: "0 0 512 512",
@@ -24074,44 +24350,23 @@ var Icon = () => /* @__PURE__ */ jsx213("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__ */ jsxs103("div", {
     style: width,
     children: [
       /* @__PURE__ */ jsx213(AbsoluteFill5, {
-        style: topContainer,
-        children: /* @__PURE__ */ jsx213("div", {
-          style: topLine
-        })
-      }),
-      /* @__PURE__ */ jsx213(AbsoluteFill5, {
-        style: bottomContainer,
+        style: centerContainer,
         children: /* @__PURE__ */ jsx213("div", {
-          style: bottomLine
+          style: verticalLine
         })
       }),
       /* @__PURE__ */ jsx213(AbsoluteFill5, {
@@ -24225,7 +24480,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect75, useMemo as useMemo120, useRef as useRef45, useState as useState81 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo120, useRef as useRef45, useState as useState80 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -24583,11 +24838,12 @@ var TimelineVideoInfo = ({
   volume,
   doesVolumeChange,
   premountWidth,
-  postmountWidth
+  postmountWidth,
+  loopDisplay
 }) => {
   const { fps } = useVideoConfig5();
   const ref2 = useRef45(null);
-  const [error, setError] = useState81(null);
+  const [error, setError] = useState80(null);
   const aspectRatio = useRef45(getAspectRatioFromCache(src));
   useEffect75(() => {
     if (error) {
@@ -24606,25 +24862,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 () => {
@@ -24642,7 +24927,7 @@ var TimelineVideoInfo = ({
           filledSlots,
           fromSeconds,
           toSeconds,
-          naturalWidth,
+          naturalWidth: targetWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -24670,17 +24955,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();
@@ -24696,13 +24982,14 @@ var TimelineVideoInfo = ({
         return;
       }
       fillWithCachedFrames({
-        ctx,
-        naturalWidth,
+        ctx: targetCtx,
+        naturalWidth: targetWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
         fromSeconds
       });
+      repeatTarget();
     }).catch((e) => {
       setError(e);
     });
@@ -24714,6 +25001,7 @@ var TimelineVideoInfo = ({
     durationInFrames,
     error,
     fps,
+    loopDisplay,
     naturalWidth,
     playbackRate,
     src,
@@ -24745,7 +25033,8 @@ var TimelineVideoInfo = ({
           durationInFrames,
           volume,
           doesVolumeChange,
-          playbackRate
+          playbackRate,
+          loopDisplay
         })
       })
     ]
@@ -24758,7 +25047,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;
   }
@@ -24770,29 +25059,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,
@@ -24807,7 +25104,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__ */ jsxs106("div", {
@@ -24850,7 +25147,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__ */ jsx218(TimelineVideoInfo, {
         src: s.src,
@@ -24862,7 +25160,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__ */ jsx218(TimelineImageInfo, {
         src: s.src,
@@ -24902,8 +25201,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 {
@@ -24961,9 +25260,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;
@@ -25077,7 +25376,7 @@ var container46 = {
 };
 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__ */ jsxs109("div", {
     style: container46,
@@ -25114,11 +25413,11 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext82, useEffect as useEffect76 } from "react";
+import { useContext as useContext81, useEffect as useEffect76 } 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();
   useEffect76(() => {
     const nKey = keybindings.registerKeybinding({
@@ -25222,7 +25521,7 @@ var GlobalKeybindings = () => {
 };
 
 // src/components/Modals.tsx
-import { useContext as useContext96 } from "react";
+import { useContext as useContext95 } from "react";
 
 // src/components/InstallPackage.tsx
 import {
@@ -25231,7 +25530,7 @@ import {
   extraPackages,
   installableMap
 } from "@remotion/studio-shared";
-import React156, { useCallback as useCallback115, useContext as useContext84, useEffect as useEffect77 } from "react";
+import React156, { useCallback as useCallback115, useContext as useContext83, useEffect as useEffect77 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -25319,10 +25618,10 @@ var ModalFooterContainer = ({ children }) => {
 };
 
 // src/components/NewComposition/DismissableModal.tsx
-import { useCallback as useCallback114, useContext as useContext83 } from "react";
+import { useCallback as useCallback114, useContext as useContext82 } from "react";
 import { jsx as jsx226 } from "react/jsx-runtime";
 var DismissableModal = ({ children }) => {
-  const { setSelectedModal } = useContext83(ModalsContext);
+  const { setSelectedModal } = useContext82(ModalsContext);
   const onQuit = useCallback114(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -25346,7 +25645,7 @@ var text2 = {
 var InstallPackageModal = ({ packageManager }) => {
   const [state, setState] = React156.useState({ type: "idle" });
   const [map, setMap] = React156.useState({});
-  const { previewServerState: ctx } = useContext84(StudioServerConnectionCtx);
+  const { previewServerState: ctx } = useContext83(StudioServerConnectionCtx);
   const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);
   const onClick = useCallback115(async () => {
     if (state.type === "done") {
@@ -25516,10 +25815,10 @@ var InstallPackageModal = ({ packageManager }) => {
 };
 
 // src/components/NewComposition/DeleteComposition.tsx
-import { useCallback as useCallback117, useContext as useContext87, useMemo as useMemo126 } from "react";
+import { useCallback as useCallback117, useContext as useContext86, useMemo as useMemo126 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React157, { useContext as useContext85, useEffect as useEffect78, useMemo as useMemo125 } from "react";
+import React157, { useContext as useContext84, useEffect as useEffect78, useMemo as useMemo125 } from "react";
 import { Internals as Internals59 } from "remotion";
 import { jsx as jsx228, jsxs as jsxs112 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -25541,7 +25840,7 @@ var loaderLabel2 = {
 var ResolvedCompositionContext = React157.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);
   useEffect78(() => {
     const { current } = Internals59.resolveCompositionsRef;
@@ -25601,7 +25900,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback116, useContext as useContext86, useEffect as useEffect79, useState as useState82 } from "react";
+import { useCallback as useCallback116, useContext as useContext85, useEffect as useEffect79, useState as useState81 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx229, jsxs as jsxs113 } from "react/jsx-runtime";
@@ -25661,12 +25960,12 @@ var CodemodFooter = ({
   submitLabel,
   onSuccess
 }) => {
-  const [submitting, setSubmitting] = useState82(false);
-  const { setSelectedModal } = useContext86(ModalsContext);
-  const [codemodStatus, setCanApplyCodemod] = useState82({
+  const [submitting, setSubmitting] = useState81(false);
+  const { setSelectedModal } = useContext85(ModalsContext);
+  const [codemodStatus, setCanApplyCodemod] = useState81({
     type: "loading"
   });
-  const [projectInfo, setProjectInfo] = useState82(null);
+  const [projectInfo, setProjectInfo] = useState81(null);
   useEffect79(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
@@ -25787,7 +26086,7 @@ var content3 = {
   minWidth: 500
 };
 var DeleteCompositionLoaded = ({ compositionId }) => {
-  const context = useContext87(ResolvedCompositionContext);
+  const context = useContext86(ResolvedCompositionContext);
   if (!context) {
     throw new Error("Resolved composition context");
   }
@@ -25862,7 +26161,7 @@ var DeleteComposition = ({ compositionId }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { useCallback as useCallback119, useContext as useContext88, useMemo as useMemo127, useState as useState83 } from "react";
+import { useCallback as useCallback119, useContext as useContext87, useMemo as useMemo127, useState as useState82 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -25968,19 +26267,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] = useState83(initialType);
+  const [initialCompType] = useState82(initialType);
   const hadDimensionsDefined = unresolved.width && unresolved.height;
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
-  const [selectedFrameRate, setFrameRate] = useState83(resolved.result.fps);
-  const { compositions } = useContext88(Internals61.CompositionManager);
-  const [type, setType] = useState83(initialCompType);
-  const [newId, setName] = useState83(() => {
+  const [selectedFrameRate, setFrameRate] = useState82(resolved.result.fps);
+  const { compositions } = useContext87(Internals61.CompositionManager);
+  const [type, setType] = useState82(initialCompType);
+  const [newId, setName] = useState82(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
     let prefix = numberAtEnd ? Number(numberAtEnd) : 1;
     const initialName = resolved.result.id.replace(/([0-9]+)$/, "");
@@ -25995,11 +26294,11 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     }
     return currentName;
   });
-  const [size4, setSize] = useState83(() => ({
+  const [size4, setSize] = useState82(() => ({
     width: resolved.result.width,
     height: resolved.result.height
   }));
-  const [durationInFrames, setDurationInFrames] = useState83(resolved.result.durationInFrames);
+  const [durationInFrames, setDurationInFrames] = useState82(resolved.result.durationInFrames);
   const onTypeChanged = useCallback119((newType) => {
     setType(newType);
   }, []);
@@ -26325,7 +26624,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 };
 
 // src/components/NewComposition/RenameComposition.tsx
-import { useCallback as useCallback120, useContext as useContext89, useMemo as useMemo128, useState as useState84 } from "react";
+import { useCallback as useCallback120, useContext as useContext88, useMemo as useMemo128, useState as useState83 } from "react";
 import { Internals as Internals62 } from "remotion";
 import { jsx as jsx234, jsxs as jsxs118, Fragment as Fragment35 } from "react/jsx-runtime";
 var content5 = {
@@ -26336,13 +26635,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] = useState84(() => {
+  const { compositions } = useContext88(Internals62.CompositionManager);
+  const [newId, setName] = useState83(() => {
     return resolved.result.id;
   });
   const onNameChange = useCallback120((e) => {
@@ -26436,7 +26735,7 @@ var RenameComposition = ({ compositionId }) => {
 };
 
 // src/components/OverrideInputProps.tsx
-import { useCallback as useCallback121, useContext as useContext90, useMemo as useMemo129, useState as useState85 } from "react";
+import { useCallback as useCallback121, useContext as useContext89, useMemo as useMemo129, useState as useState84 } from "react";
 import { Internals as Internals63 } from "remotion";
 import { jsx as jsx235, jsxs as jsxs119 } from "react/jsx-runtime";
 var style11 = {
@@ -26472,14 +26771,14 @@ var isValidJSON = (value) => {
   }
 };
 var Inner5 = () => {
-  const [value, setValue] = useState85(() => {
+  const [value, setValue] = useState84(() => {
     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;
@@ -26560,11 +26859,11 @@ var OverrideInputPropsModal = () => {
 // src/components/QuickSwitcher/QuickSwitcherContent.tsx
 import {
   useCallback as useCallback122,
-  useContext as useContext91,
+  useContext as useContext90,
   useEffect as useEffect81,
   useMemo as useMemo131,
   useRef as useRef47,
-  useState as useState87
+  useState as useState86
 } from "react";
 import { Internals as Internals64 } from "remotion";
 
@@ -27461,7 +27760,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect80, useMemo as useMemo130, useRef as useRef46, useState as useState86 } from "react";
+import { useEffect as useEffect80, useMemo as useMemo130, useRef as useRef46, useState as useState85 } from "react";
 import { jsx as jsx239, jsxs as jsxs122, Fragment as Fragment37 } from "react/jsx-runtime";
 var container50 = {
   paddingLeft: 16,
@@ -27490,7 +27789,7 @@ var labelContainer = {
   paddingBottom: 5
 };
 var QuickSwitcherResult = ({ result, selected }) => {
-  const [hovered, setIsHovered] = useState86(false);
+  const [hovered, setIsHovered] = useState85(false);
   const ref2 = useRef46(null);
   const keybindings = useKeybinding();
   useEffect80(() => {
@@ -27656,8 +27955,8 @@ var mapModeToQuery = (mode) => {
   throw new Error("no mode" + mode);
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-  const { compositions } = useContext91(Internals64.CompositionManager);
-  const [state, setState] = useState87(() => {
+  const { compositions } = useContext90(Internals64.CompositionManager);
+  const [state, setState] = useState86(() => {
     return {
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -27675,8 +27974,8 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
     return;
   }, []);
   const actions = useMenuStructure(closeMenu, readOnlyStudio);
-  const [docResults, setDocResults] = useState87({ type: "initial" });
-  const { setSelectedModal } = useContext91(ModalsContext);
+  const [docResults, setDocResults] = useState86({ type: "initial" });
+  const { setSelectedModal } = useContext90(ModalsContext);
   const keybindings = useKeybinding();
   const mode = mapQueryToMode(state.query);
   const actualQuery = useMemo131(() => {
@@ -27941,7 +28240,7 @@ var QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
 var QuickSwitcher_default = QuickSwitcher;
 
 // src/components/RenderModal/RenderStatusModal.tsx
-import { useCallback as useCallback124, useContext as useContext92 } from "react";
+import { useCallback as useCallback124, useContext as useContext91 } from "react";
 
 // src/components/RenderModal/ClientRenderProgress.tsx
 import { formatBytes as formatBytes3 } from "@remotion/studio-shared";
@@ -28331,8 +28630,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");
@@ -28441,12 +28740,12 @@ import { BrowserSafeApis as BrowserSafeApis11 } from "@remotion/renderer/client"
 import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback142,
-  useContext as useContext94,
+  useContext as useContext93,
   useEffect as useEffect84,
   useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
-  useState as useState93
+  useState as useState92
 } from "react";
 
 // src/helpers/convert-env-variables.ts
@@ -28714,9 +29013,9 @@ var makeReadOnlyStudioRenderCommand = ({
 };
 
 // src/helpers/render-modal-sections.ts
-import { useMemo as useMemo133, useState as useState88 } from "react";
+import { useMemo as useMemo133, useState as useState87 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
-  const [selectedTab, setTab] = useState88("general");
+  const [selectedTab, setTab] = useState87("general");
   const shownTabs = useMemo133(() => {
     if (renderMode === "audio") {
       return ["general", "data", "audio", "advanced"];
@@ -28809,7 +29108,7 @@ var GifIcon = (props) => /* @__PURE__ */ jsx250("svg", {
 });
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback125, useMemo as useMemo134, useState as useState89 } from "react";
+import { useCallback as useCallback125, useMemo as useMemo134, useState as useState88 } from "react";
 import { jsx as jsx251 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
@@ -28825,7 +29124,7 @@ var selectorButton2 = {
   WebkitUserSelect: "none"
 };
 var VerticalTab = ({ children, onClick, style: style12, selected }) => {
-  const [hovered, setHovered] = useState89(false);
+  const [hovered, setHovered] = useState88(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback125(() => {
     setHovered(true);
@@ -28855,7 +29154,7 @@ var VerticalTab = ({ children, onClick, style: style12, selected }) => {
 
 // src/components/RenderModal/CrfSetting.tsx
 import { BrowserSafeApis as BrowserSafeApis3 } from "@remotion/renderer/client";
-import { useState as useState91 } from "react";
+import { useState as useState90 } from "react";
 
 // src/components/RenderModal/NumberSetting.tsx
 import { useCallback as useCallback127 } from "react";
@@ -28864,7 +29163,7 @@ import { useCallback as useCallback127 } from "react";
 import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback126, useEffect as useEffect82, useMemo as useMemo135, useState as useState90 } from "react";
+import { useCallback as useCallback126, useEffect as useEffect82, useMemo as useMemo135, useState as useState89 } from "react";
 import { jsx as jsx252 } from "react/jsx-runtime";
 var svgStyle = {
   width: 16,
@@ -28891,8 +29190,8 @@ var buttonStyle5 = {
 var CliCopyButton = ({
   valueToCopy
 }) => {
-  const [copied, setCopied] = useState90(false);
-  const [hovered, setHovered] = useState90(false);
+  const [copied, setCopied] = useState89(false);
+  const [hovered, setHovered] = useState89(false);
   const fillColor = useMemo135(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
@@ -29180,7 +29479,7 @@ var getDefaultCrfState = () => {
   }, {});
 };
 var useCrfState = (codec) => {
-  const [state, setState] = useState91(() => getDefaultCrfState());
+  const [state, setState] = useState90(() => getDefaultCrfState());
   const range = BrowserSafeApis3.getValidCrfRanges(codec);
   const setCrf = (updater) => {
     setState((q) => {
@@ -30452,10 +30751,10 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback134, useMemo as useMemo137 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext93, useEffect as useEffect83, useRef as useRef48, useState as useState92 } from "react";
+import { useContext as useContext92, useEffect as useEffect83, useRef as useRef48, useState as useState91 } from "react";
 var useFileExistence = (outName) => {
-  const [exists, setExists] = useState92(false);
-  const { previewServerState: state, subscribeToEvent } = useContext93(StudioServerConnectionCtx);
+  const [exists, setExists] = useState91(false);
+  const { previewServerState: state, subscribeToEvent } = useContext92(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef48("");
   currentOutName.current = outName;
@@ -31884,8 +32183,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");
   }
@@ -31894,7 +32193,7 @@ var RenderModal = ({
     unresolved: unresolvedComposition
   } = context;
   const isMounted = useRef49(true);
-  const [isVideo] = useState93(() => {
+  const [isVideo] = useState92(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
   const [
@@ -31905,7 +32204,7 @@ var RenderModal = ({
       initialVideoCodecForAudioTab,
       initialVideoCodecForVideoTab
     }
-  ] = useState93(() => {
+  ] = useState92(() => {
     return getDefaultCodecs({
       defaultConfigurationVideoCodec,
       compositionDefaultVideoCodec: resolvedComposition.defaultCodec,
@@ -31914,16 +32213,16 @@ var RenderModal = ({
     });
   });
   const [state, dispatch] = useReducer2(reducer2, initialState2);
-  const [unclampedFrame, setFrame] = useState93(() => initialFrame);
-  const [stillImageFormat, setStillImageFormat] = useState93(() => initialStillImageFormat);
-  const [videoImageFormat, setVideoImageFormat] = useState93(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
-  const [sequenceImageFormat, setSequenceImageFormat] = useState93(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
-  const [concurrency, setConcurrency] = useState93(() => initialConcurrency);
-  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState93(() => initialVideoCodecForVideoTab);
-  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState93(() => initialAudioCodec);
-  const [separateAudioTo, setSeparateAudioTo] = useState93(null);
-  const [envVariables, setEnvVariables] = useState93(() => envVariablesObjectToArray(initialEnvVariables).filter(([key5]) => key5 !== "NODE_ENV"));
-  const [initialOutName] = useState93(() => {
+  const [unclampedFrame, setFrame] = useState92(() => initialFrame);
+  const [stillImageFormat, setStillImageFormat] = useState92(() => initialStillImageFormat);
+  const [videoImageFormat, setVideoImageFormat] = useState92(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
+  const [sequenceImageFormat, setSequenceImageFormat] = useState92(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
+  const [concurrency, setConcurrency] = useState92(() => initialConcurrency);
+  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState92(() => initialVideoCodecForVideoTab);
+  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState92(() => initialAudioCodec);
+  const [separateAudioTo, setSeparateAudioTo] = useState92(null);
+  const [envVariables, setEnvVariables] = useState92(() => envVariablesObjectToArray(initialEnvVariables).filter(([key5]) => key5 !== "NODE_ENV"));
+  const [initialOutName] = useState92(() => {
     return getDefaultOutLocation({
       compositionName: resolvedComposition.id,
       defaultExtension: initialRenderType === "still" ? initialStillImageFormat : isVideo ? BrowserSafeApis11.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec) : initialStillImageFormat,
@@ -31932,26 +32231,26 @@ var RenderModal = ({
       outputLocation: renderDefaults.outputLocation
     });
   });
-  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState93(() => initialVideoCodecForAudioTab);
-  const [mutedState, setMuted] = useState93(() => initialMuted);
-  const [repro, setRepro] = useState93(() => initialRepro);
-  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState93(() => initialEnforceAudioTrack);
-  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState93(() => initialForSeamlessAacConcatenation);
-  const [sampleRate, setSampleRate] = useState93(() => initialSampleRate);
-  const [renderMode, setRenderModeState] = useState93(initialRenderType);
-  const [jpegQuality, setJpegQuality] = useState93(() => initialJpegQuality);
-  const [scale, setScale] = useState93(() => initialScale);
-  const [logLevel, setLogLevel] = useState93(() => initialLogLevel);
-  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState93(false);
-  const [disableWebSecurity, setDisableWebSecurity] = useState93(() => initialDisableWebSecurity);
-  const [headless, setHeadless] = useState93(() => initialHeadless);
-  const [beepOnFinish, setBeepOnFinish] = useState93(() => initialBeep);
-  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState93(() => initialIgnoreCertificateErrors);
-  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState93(() => initialMultiProcessOnLinux);
-  const [darkMode, setDarkMode] = useState93(() => initialDarkMode);
-  const [openGlOption, setOpenGlOption] = useState93(() => initialGl ?? "default");
-  const [colorSpace, setColorSpace] = useState93(() => initialColorSpace);
-  const [userAgent, setUserAgent] = useState93(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
+  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState92(() => initialVideoCodecForAudioTab);
+  const [mutedState, setMuted] = useState92(() => initialMuted);
+  const [repro, setRepro] = useState92(() => initialRepro);
+  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState92(() => initialEnforceAudioTrack);
+  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState92(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState92(() => initialSampleRate);
+  const [renderMode, setRenderModeState] = useState92(initialRenderType);
+  const [jpegQuality, setJpegQuality] = useState92(() => initialJpegQuality);
+  const [scale, setScale] = useState92(() => initialScale);
+  const [logLevel, setLogLevel] = useState92(() => initialLogLevel);
+  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState92(false);
+  const [disableWebSecurity, setDisableWebSecurity] = useState92(() => initialDisableWebSecurity);
+  const [headless, setHeadless] = useState92(() => initialHeadless);
+  const [beepOnFinish, setBeepOnFinish] = useState92(() => initialBeep);
+  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState92(() => initialIgnoreCertificateErrors);
+  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState92(() => initialMultiProcessOnLinux);
+  const [darkMode, setDarkMode] = useState92(() => initialDarkMode);
+  const [openGlOption, setOpenGlOption] = useState92(() => initialGl ?? "default");
+  const [colorSpace, setColorSpace] = useState92(() => initialColorSpace);
+  const [userAgent, setUserAgent] = useState92(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
   const chromiumOptions = useMemo143(() => {
     return {
       headless,
@@ -31971,29 +32270,29 @@ var RenderModal = ({
     multiProcessOnLinux,
     darkMode
   ]);
-  const [outName, setOutName] = useState93(() => initialOutName);
-  const [endFrameOrNull, setEndFrame] = useState93(() => outFrameMark ?? null);
-  const [startFrameOrNull, setStartFrame] = useState93(() => inFrameMark ?? null);
-  const [proResProfileSetting, setProResProfile] = useState93(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
-  const [x264PresetSetting, setx264Preset] = useState93(() => initialx264Preset);
-  const [hardwareAcceleration, setHardwareAcceleration] = useState93(() => initialHardwareAcceleration);
-  const [userPreferredPixelFormat, setPixelFormat] = useState93(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
-  const [preferredQualityControlType, setQualityControl] = useState93(() => initialVideoBitrate === null ? "crf" : "bitrate");
+  const [outName, setOutName] = useState92(() => initialOutName);
+  const [endFrameOrNull, setEndFrame] = useState92(() => outFrameMark ?? null);
+  const [startFrameOrNull, setStartFrame] = useState92(() => inFrameMark ?? null);
+  const [proResProfileSetting, setProResProfile] = useState92(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
+  const [x264PresetSetting, setx264Preset] = useState92(() => initialx264Preset);
+  const [hardwareAcceleration, setHardwareAcceleration] = useState92(() => initialHardwareAcceleration);
+  const [userPreferredPixelFormat, setPixelFormat] = useState92(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
+  const [preferredQualityControlType, setQualityControl] = useState92(() => initialVideoBitrate === null ? "crf" : "bitrate");
   const [
     shouldHaveCustomTargetAudioBitrate,
     setShouldHaveCustomTargetAudioBitrate
-  ] = useState93(() => initialAudioBitrate !== null);
-  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState93(() => initialAudioBitrate ?? "320K");
-  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState93(() => initialVideoBitrate ?? "1M");
-  const [encodingMaxRate, setEncodingMaxRate] = useState93(() => initialEncodingMaxRate ?? null);
-  const [encodingBufferSize, setEncodingBufferSize] = useState93(() => initialEncodingBufferSize ?? null);
-  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState93(() => initialNumberOfGifLoops !== null);
-  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState93(() => initialNumberOfGifLoops ?? 0);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState93(() => initialDelayRenderTimeout);
-  const [chromeMode, setChromeMode] = useState93(() => initialChromeMode);
-  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState93(initialOffthreadVideoCacheSizeInBytes);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState93(initialMediaCacheSizeInBytes);
-  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState93(() => initialOffthreadVideoThreads);
+  ] = useState92(() => initialAudioBitrate !== null);
+  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState92(() => initialAudioBitrate ?? "320K");
+  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState92(() => initialVideoBitrate ?? "1M");
+  const [encodingMaxRate, setEncodingMaxRate] = useState92(() => initialEncodingMaxRate ?? null);
+  const [encodingBufferSize, setEncodingBufferSize] = useState92(() => initialEncodingBufferSize ?? null);
+  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState92(() => initialNumberOfGifLoops !== null);
+  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState92(() => initialNumberOfGifLoops ?? 0);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState92(() => initialDelayRenderTimeout);
+  const [chromeMode, setChromeMode] = useState92(() => initialChromeMode);
+  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState92(initialOffthreadVideoCacheSizeInBytes);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState92(initialMediaCacheSizeInBytes);
+  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState92(() => initialOffthreadVideoThreads);
   const codec = useMemo143(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
@@ -32080,11 +32379,11 @@ var RenderModal = ({
     }
     return null;
   }, [codec, x264PresetSetting, renderMode]);
-  const [inputProps, _setInputProps] = useState93(() => defaultProps);
+  const [inputProps, _setInputProps] = useState92(() => defaultProps);
   const setInputProps = useCallback142((updater) => {
     _setInputProps(updater);
   }, []);
-  const [metadata] = useState93(() => defaultMetadata);
+  const [metadata] = useState92(() => defaultMetadata);
   const endFrame = useMemo143(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
@@ -32163,7 +32462,7 @@ var RenderModal = ({
     setStillImageFormat(format);
     setDefaultOutName({ type: "still", imageFormat: format });
   }, [setDefaultOutName]);
-  const { setSidebarCollapsedState } = useContext94(SidebarContext);
+  const { setSidebarCollapsedState } = useContext93(SidebarContext);
   const onClickStill = useCallback142(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel2("renders");
@@ -32217,7 +32516,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState93(() => initialEveryNthFrame);
+  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState92(() => initialEveryNthFrame);
   const everyNthFrame = useMemo143(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
@@ -32671,7 +32970,7 @@ var RenderModal = ({
     videoBitrate,
     x264Preset
   ]);
-  const [commandCopiedAt, setCommandCopiedAt] = useState93(null);
+  const [commandCopiedAt, setCommandCopiedAt] = useState92(null);
   const renderDisabled = readOnlyStudio ? false : !outnameValidation.valid || state.type === "load";
   const trigger = useCallback142(() => {
     if (readOnlyStudio) {
@@ -33027,7 +33326,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback146, useContext as useContext95, useMemo as useMemo148, useState as useState97 } from "react";
+import { useCallback as useCallback146, useContext as useContext94, useMemo as useMemo148, useState as useState96 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx276 } from "react/jsx-runtime";
@@ -33046,10 +33345,10 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect85, useRef as useRef50, useState as useState94 } from "react";
+import { useEffect as useEffect85, useRef as useRef50, useState as useState93 } from "react";
 var useEncodableAudioCodecs = (container61) => {
   const cacheRef = useRef50({});
-  const [codecsByContainer, setCodecsByContainer] = useState94(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState93(() => {
     return {
       [container61]: getSupportedAudioCodecsForContainer(container61)
     };
@@ -33088,10 +33387,10 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect86, useRef as useRef51, useState as useState95 } from "react";
+import { useEffect as useEffect86, useRef as useRef51, useState as useState94 } from "react";
 var useEncodableVideoCodecs = (container61) => {
   const cacheRef = useRef51({});
-  const [codecsByContainer, setCodecsByContainer] = useState95(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState94(() => {
     return {
       [container61]: getSupportedVideoCodecsForContainer(container61)
     };
@@ -33784,7 +34083,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback144, useEffect as useEffect87, useState as useState96 } from "react";
+import { useCallback as useCallback144, useEffect as useEffect87, useState as useState95 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx282 } from "react/jsx-runtime";
@@ -34004,8 +34303,8 @@ var WebRenderModalLicense = ({
   setLicenseKey,
   initialPublicLicenseKey
 }) => {
-  const [licenseValidation, setLicenseValidation] = useState96({ valid: true, message: null, details: null });
-  const [isLoading, setIsLoading] = useState96(false);
+  const [licenseValidation, setLicenseValidation] = useState95({ valid: true, message: null, details: null });
+  const [isLoading, setIsLoading] = useState95(false);
   useEffect87(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
@@ -34372,10 +34671,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");
   }
@@ -34383,34 +34682,34 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [isVideo] = useState97(() => {
+  const [isVideo] = useState96(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
-  const [renderMode, setRenderMode] = useState97(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
-  const [tab, setTab] = useState97("general");
-  const [imageFormat, setImageFormat] = useState97(() => initialStillImageFormat ?? "png");
-  const [frame2, setFrame] = useState97(() => initialFrame);
-  const [logLevel, setLogLevel] = useState97(() => initialLogLevel);
-  const [inputProps, _setInputProps] = useState97(() => defaultProps);
+  const [renderMode, setRenderMode] = useState96(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
+  const [tab, setTab] = useState96("general");
+  const [imageFormat, setImageFormat] = useState96(() => initialStillImageFormat ?? "png");
+  const [frame2, setFrame] = useState96(() => initialFrame);
+  const [logLevel, setLogLevel] = useState96(() => initialLogLevel);
+  const [inputProps, _setInputProps] = useState96(() => defaultProps);
   const setInputProps = useCallback146((updater) => {
     _setInputProps(updater);
   }, []);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState97(initialDelayRenderTimeout ?? 30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState97(initialMediaCacheSizeInBytes);
-  const [codec, setCodec] = useState97(initialVideoCodec ?? "h264");
-  const [container62, setContainer] = useState97(initialContainer ?? "mp4");
-  const [audioCodec, setAudioCodec] = useState97(initialAudioCodec ?? "aac");
-  const [audioBitrate, setAudioBitrate] = useState97(initialAudioBitrate ?? "medium");
-  const [videoBitrate, setVideoBitrate] = useState97(initialVideoBitrate ?? "high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState97(initialHardwareAcceleration ?? "no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState97(initialKeyframeIntervalInSeconds ?? 5);
-  const [startFrame, setStartFrame] = useState97(() => inFrameMark);
-  const [endFrame, setEndFrame] = useState97(() => outFrameMark);
-  const [transparent, setTransparent] = useState97(initialTransparent ?? false);
-  const [muted, setMuted] = useState97(initialMuted ?? false);
-  const [scale, setScale] = useState97(initialScale ?? 1);
-  const [licenseKey, setLicenseKey] = useState97(initialLicenseKey);
-  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState97(initialAllowHtmlInCanvas ?? false);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState96(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState96(initialMediaCacheSizeInBytes);
+  const [codec, setCodec] = useState96(initialVideoCodec ?? "h264");
+  const [container62, setContainer] = useState96(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState96(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState96(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState96(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState96(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState96(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState96(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState96(() => outFrameMark);
+  const [transparent, setTransparent] = useState96(initialTransparent ?? false);
+  const [muted, setMuted] = useState96(initialMuted ?? false);
+  const [scale, setScale] = useState96(initialScale ?? 1);
+  const [licenseKey, setLicenseKey] = useState96(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState96(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
   const effectiveAudioCodec = useMemo148(() => {
@@ -34437,7 +34736,7 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutNameState] = useState97(() => {
+  const [initialOutNameState] = useState96(() => {
     if (initialDefaultOutName) {
       return initialDefaultOutName;
     }
@@ -34453,7 +34752,7 @@ var WebRenderModal = ({
     }
     return defaultOut;
   });
-  const [outName, setOutName] = useState97(() => initialOutNameState);
+  const [outName, setOutName] = useState96(() => initialOutNameState);
   const updateOutNameExtension = useCallback146((extension) => {
     setOutName((prev) => getStringBeforeSuffix(prev) + "." + extension);
   }, []);
@@ -34893,7 +35192,7 @@ var WebRenderModalWithLoader = (props) => {
 import { useCallback as useCallback149, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback147, useEffect as useEffect88, useState as useState98 } from "react";
+import { useCallback as useCallback147, useEffect as useEffect88, useState as useState97 } from "react";
 import { jsx as jsx287, jsxs as jsxs153 } from "react/jsx-runtime";
 var iconStyle9 = {
   width: 16,
@@ -34923,7 +35222,7 @@ var labelStyle5 = {
   fontSize: 14
 };
 var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
-  const [copied, setCopied] = useState98(false);
+  const [copied, setCopied] = useState97(false);
   const onClick = useCallback147(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
@@ -34956,7 +35255,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback148, useMemo as useMemo149, useState as useState99 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo149, useState as useState98 } from "react";
 import { jsx as jsx288 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34971,7 +35270,7 @@ var buttonStyle7 = {
   alignItems: "center"
 };
 var OpenIssueButton = ({ link: link5 }) => {
-  const [hovered, setHovered] = useState99(false);
+  const [hovered, setHovered] = useState98(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
   const handleClick = useCallback148(() => {
     window.open(link5, "_blank");
@@ -35172,8 +35471,8 @@ var UpdateModal = ({ info, knownBugs }) => {
 // src/components/Modals.tsx
 import { jsx as jsx291, jsxs as jsxs156, 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__ */ jsxs156(Fragment53, {
     children: [
       modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx291(DuplicateComposition, {
@@ -35294,7 +35593,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const MemoRoot = useMemo151(() => {
     return React189.memo(Root);
   }, [Root]);
-  const [renderError, setRenderError] = useState100(null);
+  const [renderError, setRenderError] = useState99(null);
   const clearError = useCallback150(() => {
     setRenderError(null);
   }, []);
@@ -35350,7 +35649,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo152, useState as useState101 } from "react";
+import { useCallback as useCallback151, useContext as useContext96, useMemo as useMemo152, useState as useState100 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -35371,14 +35670,14 @@ var loadPreviewSizeOption = () => {
   return JSON.parse(item2);
 };
 var PreviewSizeProvider = ({ children }) => {
-  const [size4, setSizeState] = useState101(() => loadPreviewSizeOption());
-  const [translation, setTranslation] = useState101(() => {
+  const [size4, setSizeState] = useState100(() => loadPreviewSizeOption());
+  const [translation, setTranslation] = useState100(() => {
     return {
       x: 0,
       y: 0
     };
   });
-  const { editorZoomGestures } = useContext97(EditorZoomGesturesContext);
+  const { editorZoomGestures } = useContext96(EditorZoomGesturesContext);
   const setSize = useCallback151((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
@@ -35407,10 +35706,10 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo153, useState as useState102 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo153, useState as useState101 } from "react";
 import { jsx as jsx294 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
-  const [checkerboard, setCheckerboardState] = useState102(() => loadCheckerboardOption());
+  const [checkerboard, setCheckerboardState] = useState101(() => loadCheckerboardOption());
   const setCheckerboard = useCallback152((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
@@ -35431,12 +35730,12 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo154, useState as useState103 } from "react";
+import { useMemo as useMemo154, useState as useState102 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
-  const [mediaMuted, setMediaMuted] = useState103(() => loadMuteOption());
-  const [mediaVolume, setMediaVolume] = useState103(1);
+  const [mediaMuted, setMediaMuted] = useState102(() => loadMuteOption());
+  const [mediaVolume, setMediaVolume] = useState102(1);
   const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
@@ -35459,10 +35758,10 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo155, useState as useState104 } from "react";
+import { useMemo as useMemo155, useState as useState103 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
-  const [modalContextType, setModalContextType] = useState104(null);
+  const [modalContextType, setModalContextType] = useState103(null);
   const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
@@ -35476,7 +35775,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect89, useMemo as useMemo156, useState as useState105 } from "react";
+import { useEffect as useEffect89, useMemo as useMemo156, useState as useState104 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -35494,7 +35793,7 @@ var loadMarks = () => {
 // src/components/SetTimelineInOutProvider.tsx
 import { jsx as jsx297 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
-  const [inAndOutFrames, setInAndOutFrames] = useState105(() => loadMarks());
+  const [inAndOutFrames, setInAndOutFrames] = useState104(() => loadMarks());
   const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
@@ -35513,13 +35812,13 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo157, useRef as useRef52, useState as useState106 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo157, useRef as useRef52, useState as useState105 } from "react";
 import { jsx as jsx298 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
-  const [guidesList, setGuidesList] = useState106(() => loadGuidesList());
-  const [selectedGuideId, setSelectedGuideId] = useState106(null);
-  const [hoveredGuideId, setHoveredGuideId] = useState106(null);
-  const [editorShowGuides, setEditorShowGuidesState] = useState106(() => loadEditorShowGuidesOption());
+  const [guidesList, setGuidesList] = useState105(() => loadGuidesList());
+  const [selectedGuideId, setSelectedGuideId] = useState105(null);
+  const [hoveredGuideId, setHoveredGuideId] = useState105(null);
+  const [editorShowGuides, setEditorShowGuidesState] = useState105(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef52(false);
   const shouldDeleteGuideRef = useRef52(false);
   const setEditorShowGuides = useCallback153((newValue) => {
@@ -35556,10 +35855,10 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo158, useState as useState107 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo158, useState as useState106 } from "react";
 import { jsx as jsx299 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
-  const [editorShowRulers, setEditorShowRulersState] = useState107(() => loadEditorShowRulersOption());
+  const [editorShowRulers, setEditorShowRulersState] = useState106(() => loadEditorShowRulersOption());
   const setEditorShowRulers = useCallback154((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
@@ -35580,10 +35879,10 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/VisualControls/VisualControlsUndoSync.tsx
-import { useContext as useContext98, useEffect as useEffect90 } from "react";
+import { useContext as useContext97, useEffect as useEffect90 } from "react";
 var VisualControlsUndoSync = () => {
-  const { subscribeToEvent } = useContext98(StudioServerConnectionCtx);
-  const { updateValue } = useContext98(SetVisualControlsContext);
+  const { subscribeToEvent } = useContext97(StudioServerConnectionCtx);
+  const { updateValue } = useContext97(SetVisualControlsContext);
   useEffect90(() => {
     const unsub = subscribeToEvent("visual-control-values-changed", (event) => {
       if (event.type !== "visual-control-values-changed") {
@@ -35599,10 +35898,10 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback155, useMemo as useMemo159, useState as useState108 } from "react";
+import { useCallback as useCallback155, useMemo as useMemo159, useState as useState107 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
-  const [editorZoomGestures, setEditorZoomGesturesState] = useState108(() => loadEditorZoomGesturesOption());
+  const [editorZoomGestures, setEditorZoomGesturesState] = useState107(() => loadEditorZoomGesturesOption());
   const setEditorZoomGestures = useCallback155((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
@@ -35673,7 +35972,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 jsx302, jsxs as jsxs159 } from "react/jsx-runtime";
 var container64 = {
   position: "fixed",
@@ -35708,7 +36007,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");
@@ -35747,11 +36046,11 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo160, useState as useState109 } from "react";
+import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo160, useState as useState108 } from "react";
 import { jsx as jsx303 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
-  const [fastRefreshes, setFastRefreshes] = useState109(0);
-  const [manualRefreshes, setManualRefreshes] = useState109(0);
+  const [fastRefreshes, setFastRefreshes] = useState108(0);
+  const [manualRefreshes, setManualRefreshes] = useState108(0);
   const increaseManualRefreshes = useCallback156(() => {
     setManualRefreshes((i) => i + 1);
   }, []);
@@ -35938,29 +36237,29 @@ var injectCSS = () => {
 // src/ResolveCompositionConfigInStudio.tsx
 import {
   useCallback as useCallback157,
-  useContext as useContext100,
+  useContext as useContext99,
   useEffect as useEffect92,
   useImperativeHandle as useImperativeHandle15,
   useMemo as useMemo161,
-  useState as useState110
+  useState as useState109
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
 import { jsx as jsx304 } from "react/jsx-runtime";
 var ResolveCompositionConfigInStudio = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState110(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext100(Internals69.CompositionManager);
-  const { fastRefreshes, manualRefreshes } = useContext100(FastRefreshContext);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState109(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] = useState110({});
+  const [resolvedConfigs, setResolvedConfigs] = useState109({});
   const selectedEditorProps = useMemo161(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -36217,7 +36516,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__ */ jsx305(StaticFilesProvider, {
         children: /* @__PURE__ */ jsx305(ResolveCompositionConfigInStudio, {
           children: /* @__PURE__ */ jsxs160(EditorContexts, {
@@ -36236,7 +36535,7 @@ var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
   });
 };
 var Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     injectCSS();
   }, []);
   return /* @__PURE__ */ jsx305(FastRefreshProvider, {