@remotion/studio 4.0.408 → 4.0.410

package/dist/esm/{chunk-yhf0gvmn.js → chunk-nqxpz7r0.js}

@@ -10,7 +10,7 @@ import { Internals as Internals66 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React177, { useCallback as useCallback135, useEffect as useEffect85, useMemo as useMemo136 } from "react";
+import React177, { useCallback as useCallback135, useEffect as useEffect84, useMemo as useMemo136 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/helpers/colors.ts
@@ -3246,7 +3246,7 @@ var writeStaticFile = async ({
   if (window.remotion_isReadOnlyStudio) {
     throw new Error("writeStaticFile() is not available in read-only Studio");
   }
-  const url = new URL("/api/add-asset", window.location.origin);
+  const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
   if (filePath.includes("\\")) {
     return Promise.reject(new Error("File path cannot contain backslashes"));
   }
@@ -7525,10 +7525,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback91, useContext as useContext59, useEffect as useEffect62 } from "react";
+import { useCallback as useCallback91, useContext as useContext59, useEffect as useEffect61 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback90, useContext as useContext58, useEffect as useEffect61, useMemo as useMemo96 } from "react";
+import { useCallback as useCallback90, useContext as useContext58, useEffect as useEffect60, useMemo as useMemo96 } from "react";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect25, useState as useState30 } from "react";
@@ -17309,7 +17309,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext55, useEffect as useEffect59, useRef as useRef32, useState as useState60 } from "react";
+import { useContext as useContext55, useEffect as useEffect58, useRef as useRef32, useState as useState60 } from "react";
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
@@ -18126,14 +18126,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import {
-  useCallback as useCallback88,
-  useContext as useContext53,
-  useEffect as useEffect58,
-  useMemo as useMemo93,
-  useRef as useRef31,
-  useState as useState59
-} from "react";
+import { useCallback as useCallback88, useContext as useContext53, useMemo as useMemo93, useRef as useRef31, useState as useState59 } from "react";
 import ReactDOM8 from "react-dom";
 import { Internals as Internals43 } from "remotion";
 import { jsx as jsx174, jsxs as jsxs81, Fragment as Fragment23 } from "react/jsx-runtime";
@@ -18215,6 +18208,34 @@ var RenderButton = ({
     shouldApplyCssTransforms: true
   });
   const refresh = size4?.refresh;
+  const onPointerDown = useCallback88(() => {
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+      }
+      return !o;
+    });
+  }, [refresh]);
+  const onClickDropdown = useCallback88((e) => {
+    e.stopPropagation();
+    const isKeyboardInitiated = e.detail === 0;
+    if (!isKeyboardInitiated) {
+      return;
+    }
+    setDropdownOpened((o) => {
+      if (!o) {
+        refresh?.();
+        window.addEventListener("pointerup", (evt) => {
+          if (!isMenuItem(evt.target)) {
+            setDropdownOpened(false);
+          }
+        }, {
+          once: true
+        });
+      }
+      return !o;
+    });
+  }, [refresh]);
   const connectionStatus = useContext53(StudioServerConnectionCtx).previewServerState.type;
   const shortcut = areKeyboardShortcutsDisabled() ? "" : "(R)";
   const tooltip = connectionStatus === "connected" ? "Export the current composition " + shortcut : "Connect to the Studio server to render";
@@ -18355,46 +18376,6 @@ var RenderButton = ({
       }
     ];
   }, [handleRenderTypeChange]);
-  useEffect58(() => {
-    const { current } = dropdownRef;
-    if (!current) {
-      return;
-    }
-    const onPointerDown = () => {
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-        }
-        return !o;
-      });
-    };
-    const onClickDropdown = (e) => {
-      e.stopPropagation();
-      const isKeyboardInitiated = e.detail === 0;
-      if (!isKeyboardInitiated) {
-        return;
-      }
-      return setDropdownOpened((o) => {
-        if (!o) {
-          refresh?.();
-          window.addEventListener("pointerup", (evt) => {
-            if (!isMenuItem(evt.target)) {
-              setDropdownOpened(false);
-            }
-          }, {
-            once: true
-          });
-        }
-        return !o;
-      });
-    };
-    current.addEventListener("pointerdown", onPointerDown);
-    current.addEventListener("click", onClickDropdown);
-    return () => {
-      current.removeEventListener("pointerdown", onPointerDown);
-      current.removeEventListener("click", onClickDropdown);
-    };
-  }, [refresh]);
   const spaceToBottom = useMemo93(() => {
     const margin2 = 10;
     if (size4 && dropdownOpened) {
@@ -18462,7 +18443,6 @@ var RenderButton = ({
       /* @__PURE__ */ jsx174("button", {
         style: { display: "none" },
         id: "render-modal-button-client",
-        disabled: connectionStatus !== "connected" && renderType === "server-render",
         onClick: openClientRenderModal,
         type: "button"
       }),
@@ -18506,6 +18486,8 @@ var RenderButton = ({
                 style: dropdownTriggerStyle,
                 disabled: connectionStatus !== "connected",
                 className: MENU_INITIATOR_CLASSNAME,
+                onPointerDown,
+                onClick: onClickDropdown,
                 children: /* @__PURE__ */ jsx174(CaretDown, {})
               })
             ]
@@ -18708,7 +18690,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const [loop, setLoop] = useState60(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect59(() => {
+  useEffect58(() => {
     if (isMobileLayout && previewToolbarRef.current) {
       const updateScrollableIndicatorProps = (target) => {
         const boundingBox = target.getBoundingClientRect();
@@ -18988,7 +18970,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext57, useEffect as useEffect60, useRef as useRef34, useState as useState62 } from "react";
+import { useContext as useContext57, useEffect as useEffect59, useRef as useRef34, useState as useState62 } from "react";
 import { jsx as jsx180 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19004,7 +18986,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   }
   const [lastPointerUp, setLastPointerUp] = useState62(() => Date.now());
   const ref = useRef34(null);
-  useEffect60(() => {
+  useEffect59(() => {
     if (context.isDragging.current) {
       return;
     }
@@ -19087,7 +19069,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
-  useEffect60(() => {
+  useEffect59(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -19174,7 +19156,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect61(() => {
+  useEffect60(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo96(() => ({
@@ -19344,7 +19326,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect62(() => {
+  useEffect61(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -19422,7 +19404,7 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback92,
   useContext as useContext60,
-  useEffect as useEffect63,
+  useEffect as useEffect62,
   useMemo as useMemo97,
   useState as useState63
 } from "react";
@@ -19474,7 +19456,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect63(() => {
+  useEffect62(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -19839,7 +19821,7 @@ import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback94,
   useContext as useContext63,
-  useEffect as useEffect64,
+  useEffect as useEffect63,
   useMemo as useMemo100,
   useRef as useRef35,
   useState as useState65
@@ -20270,7 +20252,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -20281,7 +20263,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -20457,7 +20439,7 @@ import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import {
   useCallback as useCallback96,
   useContext as useContext64,
-  useEffect as useEffect65,
+  useEffect as useEffect64,
   useMemo as useMemo101,
   useState as useState66
 } from "react";
@@ -20546,7 +20528,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect65(() => {
+  useEffect64(() => {
     if (!sequence.stack) {
       return;
     }
@@ -20694,14 +20676,14 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext66, useEffect as useEffect67, useMemo as useMemo103, useRef as useRef37 } from "react";
+import { useContext as useContext66, useEffect as useEffect66, useMemo as useMemo103, useRef as useRef37 } from "react";
 import { Internals as Internals50 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import {
   useCallback as useCallback98,
-  useEffect as useEffect66,
+  useEffect as useEffect65,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef36
 } from "react";
@@ -20754,7 +20736,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect66(() => {
+  useEffect65(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -20867,7 +20849,7 @@ var TimelineTimeIndicators = () => {
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
   const ref = useRef37(null);
-  useEffect67(() => {
+  useEffect66(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -20974,7 +20956,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext67, useEffect as useEffect68 } from "react";
+import { useContext as useContext67, useEffect as useEffect67 } from "react";
 import { Internals as Internals51 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -20992,7 +20974,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect68(() => {
+  useEffect67(() => {
     if (!video) {
       return;
     }
@@ -21005,7 +20987,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video]);
-  useEffect68(() => {
+  useEffect67(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -36008,7 +35990,7 @@ var readAscii = (slice, length) => {
  */
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect69, useState as useState67 } from "react";
+import { useEffect as useEffect68, useState as useState67 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -36022,7 +36004,7 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const [maxMediaDuration, setMaxMediaDuration] = useState67(src ? cache.get(src) ?? null : Infinity);
-  useEffect69(() => {
+  useEffect68(() => {
     if (!src) {
       return;
     }
@@ -36052,7 +36034,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect70, useMemo as useMemo106, useRef as useRef39, useState as useState68 } from "react";
+import { useEffect as useEffect69, useMemo as useMemo106, useRef as useRef39, useState as useState68 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -36117,14 +36099,14 @@ var AudioWaveform = ({
     throw new Error("Expected video config");
   }
   const canvas = useRef39(null);
-  useEffect70(() => {
+  useEffect69(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect70(() => {
+  useEffect69(() => {
     if (!canvas.current) {
       return;
     }
@@ -36151,7 +36133,7 @@ var AudioWaveform = ({
     context.strokeStyle = LIGHT_TRANSPARENT;
     context.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect70(() => {
+  useEffect69(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -36326,7 +36308,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect71, useRef as useRef40, useState as useState69 } from "react";
+import { useEffect as useEffect70, useRef as useRef40, useState as useState69 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -36644,12 +36626,12 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
   const ref = useRef40(null);
   const [error, setError] = useState69(null);
   const aspectRatio = useRef40(getAspectRatioFromCache(src));
-  useEffect71(() => {
+  useEffect70(() => {
     return () => {
       clearFramesForSrc(src);
     };
   }, [src]);
-  useEffect71(() => {
+  useEffect70(() => {
     if (error) {
       return;
     }
@@ -37102,13 +37084,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext71, useEffect as useEffect72 } from "react";
+import { useContext as useContext71, useEffect as useEffect71 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext71(ModalsContext);
   const { setCheckerboard } = useContext71(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect72(() => {
+  useEffect71(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -37213,8 +37195,13 @@ var GlobalKeybindings = () => {
 import { useContext as useContext85 } from "react";
 
 // src/components/InstallPackage.tsx
-import { apiDocs, descriptions, installableMap } from "@remotion/studio-shared";
-import React144, { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect73 } from "react";
+import {
+  apiDocs,
+  descriptions,
+  extraPackages,
+  installableMap
+} from "@remotion/studio-shared";
+import React144, { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect72 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -37348,7 +37335,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect73(() => {
+  useEffect72(() => {
     if (disabled) {
       return;
     }
@@ -37393,42 +37380,72 @@ var InstallPackageModal = ({ packageManager }) => {
             selectedPackages.length === 1 ? "" : "s",
             ". Check your terminal for progress."
           ]
-        }) : /* @__PURE__ */ jsx209("div", {
+        }) : /* @__PURE__ */ jsxs103("div", {
           style: text2,
-          children: Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
-            const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
-            const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
-            const link = apiDocs[pkgShort];
-            const description = descriptions[pkgShort];
-            if (!link) {
-              throw new Error("No link for " + pkg);
-            }
-            if (!description) {
-              throw new Error("No description for " + pkg);
-            }
-            return /* @__PURE__ */ jsxs103(Row, {
-              align: "center",
-              children: [
-                /* @__PURE__ */ jsx209(Checkbox, {
-                  checked: map[pkg],
-                  name: pkg,
-                  onChange: () => {
-                    setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
-                  },
-                  disabled: !canSelectPackages || isInstalled
-                }),
-                /* @__PURE__ */ jsx209(Spacing, {
-                  x: 1.5
-                }),
-                /* @__PURE__ */ jsx209(InstallablePackageComp, {
-                  description,
-                  isInstalled,
-                  link,
-                  pkg
-                })
-              ]
-            }, pkg);
-          })
+          children: [
+            Object.entries(installableMap).filter(([, install]) => install).map(([pkgShort]) => {
+              const pkg = pkgShort === "core" ? "remotion" : `@remotion/${pkgShort}`;
+              const isInstalled = window.remotion_installedPackages?.includes(pkg) ?? false;
+              const link = apiDocs[pkgShort];
+              const description = descriptions[pkgShort];
+              if (!link) {
+                throw new Error("No link for " + pkg);
+              }
+              if (!description) {
+                throw new Error("No description for " + pkg);
+              }
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx209(Checkbox, {
+                    checked: map[pkg],
+                    name: pkg,
+                    onChange: () => {
+                      setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx209(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx209(InstallablePackageComp, {
+                    description,
+                    isInstalled,
+                    link,
+                    pkg
+                  })
+                ]
+              }, pkg);
+            }),
+            extraPackages.map((extraPkg) => {
+              const isInstalled = window.remotion_installedPackages?.includes(extraPkg.name) ?? false;
+              return /* @__PURE__ */ jsxs103(Row, {
+                align: "center",
+                children: [
+                  /* @__PURE__ */ jsx209(Checkbox, {
+                    checked: map[extraPkg.name],
+                    name: extraPkg.name,
+                    onChange: () => {
+                      setMap((prev) => ({
+                        ...prev,
+                        [extraPkg.name]: !prev[extraPkg.name]
+                      }));
+                    },
+                    disabled: !canSelectPackages || isInstalled
+                  }),
+                  /* @__PURE__ */ jsx209(Spacing, {
+                    x: 1.5
+                  }),
+                  /* @__PURE__ */ jsx209(InstallablePackageComp, {
+                    description: extraPkg.description,
+                    isInstalled,
+                    link: extraPkg.docsUrl,
+                    pkg: `${extraPkg.name}@${extraPkg.version}`
+                  })
+                ]
+              }, extraPkg.name);
+            })
+          ]
         })
       }),
       /* @__PURE__ */ jsx209(ModalFooterContainer, {
@@ -37472,7 +37489,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback102, useContext as useContext76, useMemo as useMemo112 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React145, { useContext as useContext74, useEffect as useEffect74, useMemo as useMemo111 } from "react";
+import React145, { useContext as useContext74, useEffect as useEffect73, useMemo as useMemo111 } from "react";
 import { Internals as Internals56 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs104 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -37496,7 +37513,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals56.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext74(Internals56.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect74(() => {
+  useEffect73(() => {
     const { current } = Internals56.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -37554,7 +37571,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback101, useContext as useContext75, useEffect as useEffect75, useState as useState70 } from "react";
+import { useCallback as useCallback101, useContext as useContext75, useEffect as useEffect74, useState as useState70 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx211, jsxs as jsxs105 } from "react/jsx-runtime";
@@ -37619,7 +37636,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState70(null);
-  useEffect75(() => {
+  useEffect74(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -37665,7 +37682,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect75(() => {
+  useEffect74(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -37683,7 +37700,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect75(() => {
+  useEffect74(() => {
     if (disabled) {
       return;
     }
@@ -38505,7 +38522,7 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback107,
   useContext as useContext80,
-  useEffect as useEffect77,
+  useEffect as useEffect76,
   useMemo as useMemo117,
   useRef as useRef42,
   useState as useState75
@@ -39305,7 +39322,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect76, useMemo as useMemo116, useRef as useRef41, useState as useState74 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo116, useRef as useRef41, useState as useState74 } from "react";
 import { jsx as jsx221, jsxs as jsxs114, Fragment as Fragment35 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -39337,7 +39354,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState74(false);
   const ref = useRef41(null);
   const keybindings = useKeybinding();
-  useEffect76(() => {
+  useEffect75(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -39351,7 +39368,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect76(() => {
+  useEffect75(() => {
     if (!selected) {
       return;
     }
@@ -39368,7 +39385,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect76(() => {
+  useEffect75(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -39582,7 +39599,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     };
   });
-  useEffect77(() => {
+  useEffect76(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -39656,7 +39673,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -39670,7 +39687,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (mode !== "docs") {
       return;
     }
@@ -39695,7 +39712,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect77(() => {
+  useEffect76(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -40349,7 +40366,7 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback127,
   useContext as useContext83,
-  useEffect as useEffect80,
+  useEffect as useEffect79,
   useMemo as useMemo128,
   useReducer as useReducer2,
   useRef as useRef44,
@@ -40519,7 +40536,7 @@ import { useCallback as useCallback112 } from "react";
 import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback111, useEffect as useEffect78, useMemo as useMemo121, useState as useState78 } from "react";
+import { useCallback as useCallback111, useEffect as useEffect77, useMemo as useMemo121, useState as useState78 } from "react";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -40570,7 +40587,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback111(() => {
     setHovered(false);
   }, []);
-  useEffect78(() => {
+  useEffect77(() => {
     if (!copied) {
       return;
     }
@@ -41892,14 +41909,14 @@ import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { useCallback as useCallback119, useMemo as useMemo123 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext82, useEffect as useEffect79, useRef as useRef43, useState as useState80 } from "react";
+import { useContext as useContext82, useEffect as useEffect78, useRef as useRef43, useState as useState80 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState80(false);
   const { previewServerState: state, subscribeToEvent } = useContext82(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef43("");
   currentOutName.current = outName;
-  useEffect79(() => {
+  useEffect78(() => {
     if (!clientId) {
       return;
     }
@@ -41915,7 +41932,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -41932,7 +41949,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect79(() => {
+  useEffect78(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -43984,7 +44001,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect80(() => {
+  useEffect79(() => {
     return () => {
       isMounted.current = false;
     };
@@ -44153,7 +44170,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect80(() => {
+  useEffect79(() => {
     if (renderDisabled) {
       return;
     }
@@ -44481,7 +44498,7 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect81, useRef as useRef45, useState as useState82 } from "react";
+import { useEffect as useEffect80, useRef as useRef45, useState as useState82 } from "react";
 var useEncodableAudioCodecs = (container60) => {
   const cacheRef = useRef45({});
   const [codecsByContainer, setCodecsByContainer] = useState82(() => {
@@ -44489,7 +44506,7 @@ var useEncodableAudioCodecs = (container60) => {
       [container60]: getSupportedAudioCodecsForContainer(container60)
     };
   });
-  useEffect81(() => {
+  useEffect80(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -44523,7 +44540,7 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect82, useRef as useRef46, useState as useState83 } from "react";
+import { useEffect as useEffect81, useRef as useRef46, useState as useState83 } from "react";
 var useEncodableVideoCodecs = (container60) => {
   const cacheRef = useRef46({});
   const [codecsByContainer, setCodecsByContainer] = useState83(() => {
@@ -44531,7 +44548,7 @@ var useEncodableVideoCodecs = (container60) => {
       [container60]: getSupportedVideoCodecsForContainer(container60)
     };
   });
-  useEffect82(() => {
+  useEffect81(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -45170,7 +45187,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback129, useEffect as useEffect83, useState as useState84 } from "react";
+import { useCallback as useCallback129, useEffect as useEffect82, useState as useState84 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx264 } from "react/jsx-runtime";
@@ -45392,7 +45409,7 @@ var WebRenderModalLicense = ({
 }) => {
   const [licenseValidation, setLicenseValidation] = useState84({ valid: true, message: null, details: null });
   const [isLoading, setIsLoading] = useState84(false);
-  useEffect83(() => {
+  useEffect82(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
         valid: true,
@@ -46226,7 +46243,7 @@ var WebRenderModalWithLoader = (props) => {
 import { useCallback as useCallback134, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect84, useState as useState86 } from "react";
+import { useCallback as useCallback132, useEffect as useEffect83, useState as useState86 } from "react";
 import { jsx as jsx269, jsxs as jsxs145 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
@@ -46264,7 +46281,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect84(() => {
+  useEffect83(() => {
     if (!copied) {
       return;
     }
@@ -46616,7 +46633,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect85(() => {
+  useEffect84(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -46814,7 +46831,7 @@ var ModalsProvider = ({ children }) => {
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback138, useContext as useContext87, useEffect as useEffect86 } from "react";
+import { useCallback as useCallback138, useContext as useContext87, useEffect as useEffect85 } from "react";
 var downloadBlob = (blob, filename) => {
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
@@ -46950,7 +46967,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled
   ]);
-  useEffect86(() => {
+  useEffect85(() => {
     setProcessJobCallback(processJob);
     return () => setProcessJobCallback(null);
   }, [processJob, setProcessJobCallback]);
@@ -46958,7 +46975,7 @@ var ClientRenderQueueProcessor = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect87, useMemo as useMemo141, useState as useState92 } from "react";
+import { useEffect as useEffect86, useMemo as useMemo141, useState as useState92 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -46982,7 +46999,7 @@ var SetTimelineInOutProvider = ({ children }) => {
       setInAndOutFrames
     };
   }, []);
-  useEffect87(() => {
+  useEffect86(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
   return /* @__PURE__ */ jsx279(TimelineInOutContext.Provider, {