@remotion/studio 4.0.464 → 4.0.465

package/dist/esm/internals.mjs

@@ -29,7 +29,7 @@ import { Internals as Internals79 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React201, { useCallback as useCallback159, useMemo as useMemo166, useState as useState99 } from "react";
+import React201, { useCallback as useCallback159, useMemo as useMemo167, useState as useState99 } from "react";
 import { Internals as Internals74 } from "remotion";
 
 // src/helpers/colors.ts
@@ -2531,11 +2531,13 @@ var openInFileExplorer = ({ directory }) => {
 var applyCodemod = ({
   codemod,
   dryRun,
+  symbolicatedStack,
   signal
 }) => {
   const body = {
     codemod,
-    dryRun
+    dryRun,
+    symbolicatedStack
   };
   return callApi("/api/apply-codemod", body, signal);
 };
@@ -2552,9 +2554,6 @@ var cancelRenderJob = (job) => {
 var updateAvailable = (signal) => {
   return callApi("/api/update-available", {}, signal);
 };
-var getProjectInfo = (signal) => {
-  return callApi("/api/project-info", {}, signal);
-};
 var callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
   return callApi("/api/update-default-props", {
     compositionId,
@@ -9943,6 +9942,12 @@ var getOriginalLocationFromStack = async (stack2, type) => {
 
 // src/components/Timeline/use-resolved-stack.ts
 var resolvedCache = new Map;
+var hasResolvedStack = (stack2) => {
+  if (!stack2) {
+    return true;
+  }
+  return resolvedCache.has(stack2);
+};
 var inFlight = new Set;
 var subscribers = new Map;
 var useResolvedStack = (stack2) => {
@@ -9974,6 +9979,8 @@ var useResolvedStack = (stack2) => {
         subs.forEach((fn) => fn(frame2));
       }).catch((err) => {
         console.error("Could not get original location of Sequence", err);
+        resolvedCache.set(stack2, null);
+        subs.forEach((fn) => fn(null));
       }).finally(() => {
         inFlight.delete(stack2);
       });
@@ -22748,7 +22755,7 @@ var TimeValue = () => {
 import { jsx as jsx202 } from "react/jsx-runtime";
 var TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 var container39 = {
-  height: TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+  height: TIMELINE_TIME_INDICATOR_HEIGHT,
   boxShadow: `0 0 4px ${TIMELINE_BACKGROUND}`,
   position: "absolute",
   backgroundColor: TIMELINE_BACKGROUND,
@@ -22834,9 +22841,8 @@ var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
   const style10 = useMemo115(() => {
     return {
       ...container39,
-      width: windowWidth - SPLITTER_HANDLE_SIZE / 2,
+      width: windowWidth,
       overflow: "hidden",
-      marginLeft: SPLITTER_HANDLE_SIZE / 2,
       pointerEvents: "none"
     };
   }, [windowWidth]);
@@ -22853,7 +22859,7 @@ var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
         frame: index * fps,
         style: {
           ...secondTick,
-          left: frameInterval * index * fps + TIMELINE_PADDING - SPLITTER_HANDLE_SIZE / 2
+          left: frameInterval * index * fps + TIMELINE_PADDING
         },
         showTime: index > 0
       };
@@ -22863,7 +22869,7 @@ var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
         frame: index,
         style: {
           ...tick,
-          left: frameInterval * index + TIMELINE_PADDING - SPLITTER_HANDLE_SIZE / 2,
+          left: frameInterval * index + TIMELINE_PADDING,
           height: index % fps === 0 ? 10 : index / frameMarkerEveryNth % 2 === 0 ? 5 : 2
         },
         showTime: false
@@ -24084,6 +24090,50 @@ var TimelineEffectGroupRow = ({
     return false;
   }, [disabledStatus]);
   const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
+  const deleteDisabled = !previewConnected || effectStatus.type !== "can-update-effect" || !validatedLocation.source;
+  const onDeleteEffectFromSource = useCallback117(async () => {
+    if (deleteDisabled) {
+      return;
+    }
+    try {
+      const result = await callApi("/api/delete-effect", {
+        fileName: validatedLocation.source,
+        sequenceNodePath: nodePath,
+        effectIndex
+      });
+      if (result.success) {
+        showNotification("Removed effect from source file", 2000);
+      } else {
+        showNotification(result.reason, 4000);
+      }
+    } catch (err) {
+      showNotification(err.message, 4000);
+    }
+  }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
+  const contextMenuValues = useMemo127(() => {
+    if (!previewConnected) {
+      return [];
+    }
+    return [
+      {
+        type: "item",
+        id: "delete-effect",
+        keyHint: null,
+        label: "Delete",
+        leftItem: null,
+        disabled: deleteDisabled,
+        onClick: () => {
+          if (deleteDisabled) {
+            return;
+          }
+          onDeleteEffectFromSource();
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value: "delete-effect"
+      }
+    ];
+  }, [deleteDisabled, onDeleteEffectFromSource, previewConnected]);
   const onToggle = useCallback117((type) => {
     if (!canToggle || previewServerState.type !== "connected") {
       return;
@@ -24116,7 +24166,7 @@ var TimelineEffectGroupRow = ({
     height: TREE_GROUP_ROW_HEIGHT,
     paddingRight: EXPANDED_SECTION_PADDING_RIGHT
   }), []);
-  return /* @__PURE__ */ jsx216(TimelineRowChrome, {
+  const row7 = /* @__PURE__ */ jsx216(TimelineRowChrome, {
     depth: rowDepth,
     eye: canToggle ? /* @__PURE__ */ jsx216(TimelineLayerEye, {
       type: "effect",
@@ -24135,6 +24185,10 @@ var TimelineEffectGroupRow = ({
       children: label8
     })
   });
+  return previewConnected ? /* @__PURE__ */ jsx216(ContextMenu, {
+    values: contextMenuValues,
+    children: row7
+  }) : row7;
 };
 
 // src/components/Timeline/TimelineFieldRow.tsx
@@ -25727,6 +25781,22 @@ import {
 } from "@remotion/timeline-utils";
 import { useEffect as useEffect76, useMemo as useMemo134, useRef as useRef50, useState as useState79 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
+
+// src/components/Timeline/get-timeline-video-info-widths.ts
+var getTimelineVideoInfoWidths = ({
+  visualizationWidth,
+  naturalWidth,
+  premountWidth,
+  postmountWidth
+}) => {
+  const mountWidth = premountWidth + postmountWidth;
+  return {
+    mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
+    mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth)
+  };
+};
+
+// src/components/Timeline/TimelineVideoInfo.tsx
 import { jsx as jsx229, jsxs as jsxs109 } from "react/jsx-runtime";
 var FILMSTRIP_HEIGHT = TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 var outerStyle = {
@@ -25737,7 +25807,6 @@ var outerStyle = {
 };
 var filmstripContainerStyle = {
   height: FILMSTRIP_HEIGHT,
-  width: "100%",
   backgroundColor: "rgba(0, 0, 0, 0.3)",
   display: "flex",
   borderTopLeftRadius: 2,
@@ -25761,6 +25830,14 @@ var TimelineVideoInfo = ({
   const ref2 = useRef50(null);
   const [error, setError] = useState79(null);
   const aspectRatio = useRef50(getAspectRatioFromCache(src));
+  const { mediaVisualizationWidth, mediaNaturalWidth } = useMemo134(() => {
+    return getTimelineVideoInfoWidths({
+      visualizationWidth,
+      naturalWidth,
+      premountWidth,
+      postmountWidth
+    });
+  }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
   useEffect76(() => {
     if (error) {
       return;
@@ -25771,7 +25848,7 @@ var TimelineVideoInfo = ({
     }
     const controller = new AbortController;
     const canvas = document.createElement("canvas");
-    canvas.width = visualizationWidth;
+    canvas.width = mediaVisualizationWidth;
     canvas.height = FILMSTRIP_HEIGHT;
     const ctx = canvas.getContext("2d");
     if (!ctx) {
@@ -25779,7 +25856,7 @@ var TimelineVideoInfo = ({
     }
     current.appendChild(canvas);
     const loopWidth = getLoopDisplayWidth2({
-      visualizationWidth: naturalWidth,
+      visualizationWidth: mediaNaturalWidth,
       loopDisplay
     });
     const shouldRepeatVideo = shouldTileLoopDisplay2(loopDisplay);
@@ -25808,7 +25885,7 @@ var TimelineVideoInfo = ({
     const fromSeconds = trimBefore / fps;
     const visibleDurationInFrames = shouldRepeatVideo && loopDisplay ? loopDisplay.durationInFrames : durationInFrames;
     const toSeconds = fromSeconds + visibleDurationInFrames * playbackRate / fps;
-    const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
+    const targetWidth = shouldRepeatVideo ? targetCanvas.width : mediaNaturalWidth;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
@@ -25927,13 +26004,20 @@ var TimelineVideoInfo = ({
     error,
     fps,
     loopDisplay,
-    naturalWidth,
+    mediaNaturalWidth,
+    mediaVisualizationWidth,
     playbackRate,
     src,
-    trimBefore,
-    visualizationWidth
+    trimBefore
   ]);
-  const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+  const audioWidth = mediaVisualizationWidth;
+  const filmstripStyle = useMemo134(() => {
+    return {
+      ...filmstripContainerStyle,
+      width: mediaVisualizationWidth,
+      marginLeft: premountWidth
+    };
+  }, [mediaVisualizationWidth, premountWidth]);
   const audioStyle = useMemo134(() => {
     return {
       height: TIMELINE_LAYER_HEIGHT_AUDIO,
@@ -25947,7 +26031,7 @@ var TimelineVideoInfo = ({
     children: [
       /* @__PURE__ */ jsx229("div", {
         ref: ref2,
-        style: filmstripContainerStyle
+        style: filmstripStyle
       }),
       /* @__PURE__ */ jsx229("div", {
         style: audioStyle,
@@ -26781,7 +26865,7 @@ var InstallPackageModal = ({ packageManager }) => {
 };
 
 // src/components/NewComposition/DeleteComposition.tsx
-import { useCallback as useCallback125, useContext as useContext92, useMemo as useMemo140 } from "react";
+import { useCallback as useCallback125, useContext as useContext92, useMemo as useMemo141 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
 import React169, { useContext as useContext90, useEffect as useEffect79, useMemo as useMemo139 } from "react";
@@ -26866,7 +26950,27 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback124, useContext as useContext91, useEffect as useEffect80, useState as useState80 } from "react";
+import {
+  useCallback as useCallback124,
+  useContext as useContext91,
+  useEffect as useEffect80,
+  useMemo as useMemo140,
+  useState as useState80
+} from "react";
+
+// src/helpers/resolved-stack-to-symbolicated.ts
+var resolvedStackToSymbolicated = (location2) => {
+  if (!location2?.source) {
+    return null;
+  }
+  return {
+    originalFileName: location2.source,
+    originalLineNumber: location2.line,
+    originalColumnNumber: location2.column,
+    originalFunctionName: null,
+    originalScriptCode: null
+  };
+};
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx241, jsxs as jsxs117 } from "react/jsx-runtime";
@@ -26885,7 +26989,7 @@ var CodemodDiffPreview = ({ status }) => {
     children: [
       /* @__PURE__ */ jsx241("span", {
         style: { color: LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 },
-        children: "This will edit your Root file."
+        children: "This will edit your codebase."
       }),
       /* @__PURE__ */ jsx241("br", {}),
       /* @__PURE__ */ jsxs117("span", {
@@ -26918,6 +27022,7 @@ var CodemodDiffPreview = ({ status }) => {
 import { jsx as jsx242, jsxs as jsxs118 } from "react/jsx-runtime";
 var CodemodFooter = ({
   codemod,
+  stack: stack2,
   valid,
   loadingNotification,
   successNotification,
@@ -26931,18 +27036,9 @@ var CodemodFooter = ({
   const [codemodStatus, setCanApplyCodemod] = useState80({
     type: "loading"
   });
-  const [projectInfo, setProjectInfo] = useState80(null);
-  useEffect80(() => {
-    const controller = new AbortController;
-    getProjectInfo(controller.signal).then((info) => {
-      setProjectInfo(info.projectInfo);
-    }).catch((err) => {
-      showNotification(`Could not get project info: ${err.message}. Unable to duplicate composition`, 3000);
-    });
-    return () => {
-      controller.abort();
-    };
-  }, []);
+  const resolvedLocation = useResolvedStack(stack2);
+  const symbolicatedStack = useMemo140(() => resolvedStackToSymbolicated(resolvedLocation), [resolvedLocation]);
+  const relativeFilePath = symbolicatedStack?.originalFileName ?? null;
   const trigger = useCallback124(() => {
     setSubmitting(true);
     setSelectedModal(null);
@@ -26950,6 +27046,7 @@ var CodemodFooter = ({
     applyCodemod({
       codemod,
       dryRun: false,
+      symbolicatedStack,
       signal: new AbortController().signal
     }).then(() => {
       notification2.replaceContent(successNotification, 2000);
@@ -26963,12 +27060,14 @@ var CodemodFooter = ({
     loadingNotification,
     onSuccess,
     setSelectedModal,
-    successNotification
+    successNotification,
+    symbolicatedStack
   ]);
   const getCanApplyCodemod = useCallback124(async (signal) => {
     const res = await applyCodemod({
       codemod,
       dryRun: true,
+      symbolicatedStack,
       signal
     });
     if (res.success) {
@@ -26979,8 +27078,25 @@ var CodemodFooter = ({
         error: res.reason
       });
     }
-  }, [codemod]);
+  }, [codemod, symbolicatedStack]);
   useEffect80(() => {
+    if (!stack2) {
+      setCanApplyCodemod({
+        type: "fail",
+        error: "Could not determine where this composition is defined"
+      });
+      return;
+    }
+    if (!hasResolvedStack(stack2)) {
+      return;
+    }
+    if (!symbolicatedStack) {
+      setCanApplyCodemod({
+        type: "fail",
+        error: "Could not resolve the source location of this composition"
+      });
+      return;
+    }
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -26989,14 +27105,14 @@ var CodemodFooter = ({
       if (aborted) {
         return;
       }
-      showNotification(`Cannot duplicate composition: ${err.message}`, 3000);
+      showNotification(`${errorNotification}: ${err.message}`, 3000);
     });
     return () => {
       aborted = true;
       abortController.abort();
     };
-  }, [getCanApplyCodemod]);
-  const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
+  }, [errorNotification, getCanApplyCodemod, stack2, symbolicatedStack]);
+  const disabled = !valid || submitting || symbolicatedStack === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
   useEffect80(() => {
     if (disabled) {
@@ -27006,7 +27122,7 @@ var CodemodFooter = ({
       callback() {
         trigger();
       },
-      commandCtrlKey: true,
+      commandCtrlKey: false,
       key: "Enter",
       event: "keydown",
       preventDefault: true,
@@ -27032,10 +27148,10 @@ var CodemodFooter = ({
         onClick: trigger,
         disabled,
         children: [
-          projectInfo && projectInfo.relativeRootFile ? submitLabel({ relativeRootPath: projectInfo.relativeRootFile }) : genericSubmitLabel,
+          relativeFilePath ? submitLabel({ relativeRootPath: relativeFilePath }) : genericSubmitLabel,
           /* @__PURE__ */ jsx242(ShortcutHint, {
             keyToPress: "↵",
-            cmdOrCtrl: true
+            cmdOrCtrl: false
           })
         ]
       })
@@ -27057,7 +27173,8 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
     throw new Error("Resolved composition context");
   }
   const { unresolved } = context;
-  const codemod = useMemo140(() => {
+  const compositionStack = unresolved.stack ?? null;
+  const codemod = useMemo141(() => {
     return {
       type: "delete-composition",
       idToDelete: compositionId
@@ -27106,6 +27223,7 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
               genericSubmitLabel: `Delete`,
               submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid: true,
               onSuccess: null
             })
@@ -27127,7 +27245,7 @@ var DeleteComposition = ({ compositionId }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { useCallback as useCallback127, useContext as useContext93, useMemo as useMemo141, useState as useState81 } from "react";
+import { useCallback as useCallback127, useContext as useContext93, useMemo as useMemo142, useState as useState81 } from "react";
 import { Internals as Internals69 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -27238,6 +27356,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     throw new Error("Resolved composition context");
   }
   const { resolved, unresolved } = context;
+  const compositionStack = unresolved.stack ?? null;
   const [initialCompType] = useState81(initialType);
   const hadDimensionsDefined = unresolved.width && unresolved.height;
   const hadFpsDefined = unresolved.fps !== undefined;
@@ -27318,7 +27437,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const compNameErrMessage = validateCompositionName(newId, compositions);
   const compWidthErrMessage = validateCompositionDimension("Width", size3.width);
   const compHeightErrMessage = validateCompositionDimension("Height", size3.height);
-  const typeValues = useMemo141(() => {
+  const typeValues = useMemo142(() => {
     return [
       {
         id: "composition",
@@ -27345,7 +27464,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     ];
   }, [onTypeChanged]);
   const valid = compNameErrMessage === null && compWidthErrMessage === null && compHeightErrMessage === null;
-  const codemod = useMemo141(() => {
+  const codemod = useMemo142(() => {
     return {
       type: "duplicate-composition",
       idToDuplicate: resolved.result.id,
@@ -27569,6 +27688,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
               genericSubmitLabel: "Duplicate",
               submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid,
               onSuccess: onDuplicateSuccess
             })
@@ -27590,7 +27710,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 };
 
 // src/components/NewComposition/RenameComposition.tsx
-import { useCallback as useCallback128, useContext as useContext94, useMemo as useMemo142, useState as useState82 } from "react";
+import { useCallback as useCallback128, useContext as useContext94, useMemo as useMemo143, useState as useState82 } from "react";
 import { Internals as Internals70 } from "remotion";
 import { jsx as jsx246, jsxs as jsxs122, Fragment as Fragment37 } from "react/jsx-runtime";
 var content5 = {
@@ -27605,7 +27725,8 @@ var RenameCompositionLoaded = () => {
   if (!context) {
     throw new Error("Resolved composition context");
   }
-  const { resolved } = context;
+  const { resolved, unresolved } = context;
+  const compositionStack = unresolved.stack ?? null;
   const { compositions } = useContext94(Internals70.CompositionManager);
   const [newId, setName] = useState82(() => {
     return resolved.result.id;
@@ -27615,7 +27736,7 @@ var RenameCompositionLoaded = () => {
   }, []);
   const compNameErrMessage = newId === resolved.result.id ? null : validateCompositionName(newId, compositions);
   const valid = compNameErrMessage === null && resolved.result.id !== newId;
-  const codemod = useMemo142(() => {
+  const codemod = useMemo143(() => {
     return {
       type: "rename-composition",
       idToRename: resolved.result.id,
@@ -27682,6 +27803,7 @@ var RenameCompositionLoaded = () => {
               genericSubmitLabel: "Rename",
               submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid,
               onSuccess: null
             })
@@ -27701,7 +27823,7 @@ var RenameComposition = ({ compositionId }) => {
 };
 
 // src/components/OverrideInputProps.tsx
-import { useCallback as useCallback129, useContext as useContext95, useMemo as useMemo143, useState as useState83 } from "react";
+import { useCallback as useCallback129, useContext as useContext95, useMemo as useMemo144, useState as useState83 } from "react";
 import { Internals as Internals71 } from "remotion";
 import { jsx as jsx247, jsxs as jsxs123 } from "react/jsx-runtime";
 var style10 = {
@@ -27745,7 +27867,7 @@ var Inner = () => {
     return null;
   });
   const { setSelectedModal } = useContext95(ModalsContext);
-  const valid = useMemo143(() => {
+  const valid = useMemo144(() => {
     if (!value)
       return true;
     return isValidJSON(value);
@@ -27827,7 +27949,7 @@ import {
   useCallback as useCallback130,
   useContext as useContext96,
   useEffect as useEffect82,
-  useMemo as useMemo145,
+  useMemo as useMemo146,
   useRef as useRef52,
   useState as useState85
 } from "react";
@@ -28726,7 +28848,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect81, useMemo as useMemo144, useRef as useRef51, useState as useState84 } from "react";
+import { useEffect as useEffect81, useMemo as useMemo145, useRef as useRef51, useState as useState84 } from "react";
 import { jsx as jsx251, jsxs as jsxs126, Fragment as Fragment39 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -28797,7 +28919,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       });
     }
   }, [selected]);
-  const style11 = useMemo144(() => {
+  const style11 = useMemo145(() => {
     return {
       ...container49,
       backgroundColor: getBackgroundFromHoverState({
@@ -28806,7 +28928,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       })
     };
   }, [hovered, selected]);
-  const labelStyle6 = useMemo144(() => {
+  const labelStyle6 = useMemo145(() => {
     return {
       ...result.type === "search-result" ? searchLabel : label9,
       color: result.type === "search-result" ? LIGHT_TEXT : selected || hovered ? "white" : LIGHT_TEXT,
@@ -28944,16 +29066,16 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
   const { setSelectedModal } = useContext96(ModalsContext);
   const keybindings = useKeybinding();
   const mode = mapQueryToMode(state.query);
-  const actualQuery = useMemo145(() => {
+  const actualQuery = useMemo146(() => {
     return stripQuery(state.query);
   }, [state.query]);
-  const menuActions = useMemo145(() => {
+  const menuActions = useMemo146(() => {
     if (mode !== "commands") {
       return [];
     }
     return makeSearchResults(actions, setSelectedModal);
   }, [actions, mode, setSelectedModal]);
-  const resultsArray = useMemo145(() => {
+  const resultsArray = useMemo146(() => {
     if (mode === "commands") {
       return fuzzySearch(actualQuery, menuActions);
     }
@@ -29083,12 +29205,12 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
   }, []);
   const showKeyboardShortcuts = mode === "docs" && actualQuery.trim() === "";
   const showSearchLoadingState = mode === "docs" && docResults.type === "loading";
-  const container50 = useMemo145(() => {
+  const container50 = useMemo146(() => {
     return {
       width: showKeyboardShortcuts ? 800 : 500
     };
   }, [showKeyboardShortcuts]);
-  const results = useMemo145(() => {
+  const results = useMemo146(() => {
     if (showKeyboardShortcuts) {
       return {
         maxHeight: 600,
@@ -29354,7 +29476,7 @@ var ClientRenderProgress = ({ job }) => {
 };
 
 // src/components/RenderModal/GuiRenderStatus.tsx
-import { useCallback as useCallback131, useMemo as useMemo146 } from "react";
+import { useCallback as useCallback131, useMemo as useMemo147 } from "react";
 import { jsx as jsx256, jsxs as jsxs129 } from "react/jsx-runtime";
 var progressItem2 = {
   padding: 10,
@@ -29496,7 +29618,7 @@ var DownloadsProgress = ({ downloads }) => {
   });
 };
 var OpenFile = ({ job }) => {
-  const labelStyle6 = useMemo146(() => {
+  const labelStyle6 = useMemo147(() => {
     return {
       ...label11,
       textAlign: "left",
@@ -29708,7 +29830,7 @@ import {
   useCallback as useCallback150,
   useContext as useContext99,
   useEffect as useEffect85,
-  useMemo as useMemo157,
+  useMemo as useMemo158,
   useReducer as useReducer2,
   useRef as useRef54,
   useState as useState91
@@ -29979,10 +30101,10 @@ var makeReadOnlyStudioRenderCommand = ({
 };
 
 // src/helpers/render-modal-sections.ts
-import { useMemo as useMemo147, useState as useState86 } from "react";
+import { useMemo as useMemo148, useState as useState86 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
   const [selectedTab, setTab] = useState86("general");
-  const shownTabs = useMemo147(() => {
+  const shownTabs = useMemo148(() => {
     if (renderMode === "audio") {
       return ["general", "data", "audio", "advanced"];
     }
@@ -30000,13 +30122,13 @@ var useRenderModalSections = (renderMode, codec) => {
     }
     throw new TypeError("Unknown render mode");
   }, [codec, renderMode]);
-  const tab = useMemo147(() => {
+  const tab = useMemo148(() => {
     if (!shownTabs.includes(selectedTab)) {
       return shownTabs[0];
     }
     return selectedTab;
   }, [selectedTab, shownTabs]);
-  return useMemo147(() => {
+  return useMemo148(() => {
     return { tab, setTab, shownTabs };
   }, [tab, shownTabs]);
 };
@@ -30074,7 +30196,7 @@ var GifIcon = (props) => /* @__PURE__ */ jsx262("svg", {
 });
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback133, useMemo as useMemo148, useState as useState87 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo149, useState as useState87 } from "react";
 import { jsx as jsx263 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
@@ -30098,7 +30220,7 @@ var VerticalTab = ({ children, onClick, style: style11, selected }) => {
   const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
-  const definiteStyle = useMemo148(() => {
+  const definiteStyle = useMemo149(() => {
     return {
       ...selectorButton2,
       backgroundColor: selected ? SELECTED_BACKGROUND : hovered ? CLEAR_HOVER : "transparent",
@@ -30129,7 +30251,7 @@ import { useCallback as useCallback135 } from "react";
 import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback134, useEffect as useEffect83, useMemo as useMemo149, useState as useState88 } from "react";
+import { useCallback as useCallback134, useEffect as useEffect83, useMemo as useMemo150, useState as useState88 } from "react";
 import { jsx as jsx264 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -30158,7 +30280,7 @@ var CliCopyButton = ({
 }) => {
   const [copied, setCopied] = useState88(false);
   const [hovered, setHovered] = useState88(false);
-  const fillColor = useMemo149(() => {
+  const fillColor = useMemo150(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const clipboardIcon = /* @__PURE__ */ jsx264(ClipboardIcon, {
@@ -30665,7 +30787,7 @@ var flexer = {
 
 // src/components/RenderModal/RenderModalAdvanced.tsx
 import { BrowserSafeApis as BrowserSafeApis6 } from "@remotion/renderer/client";
-import { useCallback as useCallback139, useMemo as useMemo150 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo151 } from "react";
 
 // src/helpers/presets-labels.ts
 var labelx264Preset = (profile) => {
@@ -31010,7 +31132,7 @@ var RenderModalAdvanced = ({
   darkMode,
   setDarkMode
 }) => {
-  const extendedOpenGlOptions = useMemo150(() => {
+  const extendedOpenGlOptions = useMemo151(() => {
     return [
       "angle",
       "egl",
@@ -31080,7 +31202,7 @@ var RenderModalAdvanced = ({
   const onReproToggle = useCallback139((e) => {
     setRepro(e.target.checked);
   }, [setRepro]);
-  const openGlOptions = useMemo150(() => {
+  const openGlOptions = useMemo151(() => {
     return extendedOpenGlOptions.map((option) => {
       return {
         label: option === "default" ? "Default" : option,
@@ -31096,7 +31218,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
-  const chromeModeOptions = useMemo150(() => {
+  const chromeModeOptions = useMemo151(() => {
     return BrowserSafeApis6.validChromeModeOptions.map((option) => {
       return {
         label: option,
@@ -31112,7 +31234,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [chromeModeOption, setChromeModeOption]);
-  const x264PresetOptions = useMemo150(() => {
+  const x264PresetOptions = useMemo151(() => {
     return BrowserSafeApis6.x264PresetOptions.map((option) => {
       return {
         label: labelx264Preset(option),
@@ -31128,7 +31250,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [setx264Preset, x264Preset]);
-  const hardwareAccelerationValues = useMemo150(() => {
+  const hardwareAccelerationValues = useMemo151(() => {
     return BrowserSafeApis6.hardwareAccelerationOptions.map((option) => {
       return {
         label: option,
@@ -31621,7 +31743,7 @@ var RenderModalAdvanced = ({
 
 // src/components/RenderModal/RenderModalAudio.tsx
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
-import { useCallback as useCallback143, useMemo as useMemo152 } from "react";
+import { useCallback as useCallback143, useMemo as useMemo153 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
 import { useCallback as useCallback140 } from "react";
@@ -31714,7 +31836,7 @@ var MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
 
 // src/components/RenderModal/SeparateAudioOption.tsx
 import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
-import { useCallback as useCallback142, useMemo as useMemo151 } from "react";
+import { useCallback as useCallback142, useMemo as useMemo152 } from "react";
 
 // src/helpers/use-file-existence.ts
 import { useContext as useContext98, useEffect as useEffect84, useRef as useRef53, useState as useState90 } from "react";
@@ -31847,7 +31969,7 @@ var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCode
   const onValueChange = useCallback142((e) => {
     setSeparateAudioTo(e.target.value);
   }, [setSeparateAudioTo]);
-  const validationMessage = useMemo151(() => {
+  const validationMessage = useMemo152(() => {
     const expectedExtension = BrowserSafeApis7.getExtensionFromAudioCodec(audioCodec);
     const actualExtension = separateAudioTo.split(".").pop();
     if (actualExtension !== expectedExtension) {
@@ -31947,7 +32069,7 @@ var RenderModalAudio = ({
   const onSeamlessAacConcatenationChanges = useCallback143((e) => {
     setForSeamlessAacConcatenation(e.target.checked);
   }, [setForSeamlessAacConcatenation]);
-  const sampleRateOptions = useMemo152(() => {
+  const sampleRateOptions = useMemo153(() => {
     return commonSampleRates.map((rate) => ({
       label: rate === 48000 ? `${rate} Hz (default)` : `${rate} Hz`,
       onClick: () => setSampleRate(rate),
@@ -32134,7 +32256,7 @@ var RenderModalAudio = ({
 // src/components/RenderModal/RenderModalBasic.tsx
 import { BrowserSafeApis as BrowserSafeApis9 } from "@remotion/renderer/client";
 import { NoReactAPIs as NoReactAPIs2 } from "@remotion/renderer/pure";
-import { useCallback as useCallback146, useMemo as useMemo154 } from "react";
+import { useCallback as useCallback146, useMemo as useMemo155 } from "react";
 
 // src/helpers/prores-labels.ts
 var labelProResProfile = (profile) => {
@@ -32163,7 +32285,7 @@ var labelProResProfile = (profile) => {
 import { useCallback as useCallback145 } from "react";
 
 // src/components/RenderModal/MultiRangeSlider.tsx
-import { useCallback as useCallback144, useMemo as useMemo153 } from "react";
+import { useCallback as useCallback144, useMemo as useMemo154 } from "react";
 import { jsx as jsx279, jsxs as jsxs141 } from "react/jsx-runtime";
 var container56 = {
   borderColor: "black",
@@ -32193,7 +32315,7 @@ var MultiRangeSlider = ({
   onRightThumbDrag
 }) => {
   const getPercent = useCallback144((value) => Math.round((value - min) / (max - min) * 100), [min, max]);
-  const rangeStyle = useMemo153(() => {
+  const rangeStyle = useMemo154(() => {
     const minPercent = getPercent(start);
     const maxPercent = getPercent(end);
     return {
@@ -32400,7 +32522,7 @@ var RenderModalBasic = ({
   showOutputName
 }) => {
   const existence = useFileExistence(outName);
-  const videoCodecOptions = useMemo154(() => {
+  const videoCodecOptions = useMemo155(() => {
     return BrowserSafeApis9.validCodecs.filter((c) => {
       return NoReactAPIs2.isAudioCodec(c) === (renderMode === "audio");
     }).map((codecOption) => {
@@ -32418,7 +32540,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo154(() => {
+  const proResProfileOptions = useMemo155(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -32450,7 +32572,7 @@ var RenderModalBasic = ({
   const onValueChange = useCallback146((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const logLevelOptions = useMemo154(() => {
+  const logLevelOptions = useMemo155(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -32704,7 +32826,7 @@ var RenderModalGif = ({
 
 // src/components/RenderModal/RenderModalPicture.tsx
 import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
-import { useCallback as useCallback149, useMemo as useMemo156 } from "react";
+import { useCallback as useCallback149, useMemo as useMemo157 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
 import { jsx as jsx284 } from "react/jsx-runtime";
@@ -32723,7 +32845,7 @@ var JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
 };
 
 // src/components/RenderModal/ScaleSetting.tsx
-import { useMemo as useMemo155 } from "react";
+import { useMemo as useMemo156 } from "react";
 import { jsx as jsx285, jsxs as jsxs146, Fragment as Fragment48 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -32737,7 +32859,7 @@ var outputDimensionsStyle = {
   marginTop: -10
 };
 var ScaleSetting = ({ scale, setScale, compositionWidth, compositionHeight }) => {
-  const outputDimensions = useMemo155(() => {
+  const outputDimensions = useMemo156(() => {
     const outputWidth = Math.round(compositionWidth * scale);
     const outputHeight = Math.round(compositionHeight * scale);
     return `${outputWidth}×${outputHeight}`;
@@ -32806,7 +32928,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo156(() => {
+  const colorSpaceOptions = useMemo157(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -32822,7 +32944,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo156(() => {
+  const qualityControlOptions = useMemo157(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -33217,7 +33339,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState91(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState91(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState91(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo157(() => {
+  const chromiumOptions = useMemo158(() => {
     return {
       headless,
       disableWebSecurity,
@@ -33259,19 +33381,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState91(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState91(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState91(() => initialOffthreadVideoThreads);
-  const codec = useMemo157(() => {
+  const codec = useMemo158(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
     }
     return videoCodecForVideoTab;
   }, [videoCodecForAudioTab, renderMode, videoCodecForVideoTab]);
-  const numberOfGifLoops = useMemo157(() => {
+  const numberOfGifLoops = useMemo158(() => {
     if (codec === "gif" && limitNumberOfGifLoops) {
       return numberOfGifLoopsSetting;
     }
     return null;
   }, [codec, limitNumberOfGifLoops, numberOfGifLoopsSetting]);
-  const audioBitrate = useMemo157(() => {
+  const audioBitrate = useMemo158(() => {
     if (shouldHaveCustomTargetAudioBitrate) {
       return customTargetAudioBitrate;
     }
@@ -33279,10 +33401,10 @@ var RenderModal = ({
   }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
   const supportsCrf = BrowserSafeApis11.codecSupportsCrf(codec);
   const supportsVideoBitrate = BrowserSafeApis11.codecSupportsVideoBitrate(codec);
-  const supportsBothQualityControls = useMemo157(() => {
+  const supportsBothQualityControls = useMemo158(() => {
     return supportsCrf && supportsVideoBitrate && hardwareAcceleration !== "if-possible" && hardwareAcceleration !== "required";
   }, [hardwareAcceleration, supportsCrf, supportsVideoBitrate]);
-  const qualityControlType = useMemo157(() => {
+  const qualityControlType = useMemo158(() => {
     if (hardwareAcceleration === "if-possible" || hardwareAcceleration === "required") {
       if (supportsVideoBitrate) {
         return "bitrate";
@@ -33306,7 +33428,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo157(() => {
+  const videoBitrate = useMemo158(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -33318,13 +33440,13 @@ var RenderModal = ({
       return;
     dispatch2(payload);
   }, []);
-  const muted = useMemo157(() => {
+  const muted = useMemo158(() => {
     if (renderMode === "video") {
       return mutedState;
     }
     return false;
   }, [mutedState, renderMode]);
-  const enforceAudioTrack = useMemo157(() => {
+  const enforceAudioTrack = useMemo158(() => {
     if (renderMode === "video") {
       return enforceAudioTrackState;
     }
@@ -33333,13 +33455,13 @@ var RenderModal = ({
     }
     return false;
   }, [enforceAudioTrackState, renderMode]);
-  const proResProfile = useMemo157(() => {
+  const proResProfile = useMemo158(() => {
     if (renderMode === "video" && codec === "prores") {
       return proResProfileSetting;
     }
     return null;
   }, [codec, proResProfileSetting, renderMode]);
-  const x264Preset = useMemo157(() => {
+  const x264Preset = useMemo158(() => {
     if (renderMode === "video" && codec === "h264") {
       return x264PresetSetting;
     }
@@ -33350,19 +33472,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState91(() => defaultMetadata);
-  const endFrame = useMemo157(() => {
+  const endFrame = useMemo158(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrameOrNull));
   }, [resolvedComposition.durationInFrames, endFrameOrNull]);
-  const startFrame = useMemo157(() => {
+  const startFrame = useMemo158(() => {
     if (startFrameOrNull === null) {
       return 0;
     }
     return Math.max(0, Math.min(endFrame - 1, startFrameOrNull));
   }, [endFrame, startFrameOrNull]);
-  const frame2 = useMemo157(() => {
+  const frame2 = useMemo158(() => {
     const parsed = Math.floor(unclampedFrame);
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
   }, [resolvedComposition.durationInFrames, unclampedFrame]);
@@ -33483,17 +33605,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState91(() => initialEveryNthFrame);
-  const everyNthFrame = useMemo157(() => {
+  const everyNthFrame = useMemo158(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
     }
     return 1;
   }, [codec, everyNthFrameSetting]);
   const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
-  const availablePixelFormats = useMemo157(() => {
+  const availablePixelFormats = useMemo158(() => {
     return BrowserSafeApis11.validPixelFormatsForCodec(codec);
   }, [codec]);
-  const pixelFormat = useMemo157(() => {
+  const pixelFormat = useMemo158(() => {
     if (availablePixelFormats.includes(userPreferredPixelFormat)) {
       return userPreferredPixelFormat;
     }
@@ -33666,7 +33788,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo157(() => {
+  const imageFormatOptions = useMemo158(() => {
     if (renderMode === "still") {
       return [
         {
@@ -33762,7 +33884,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo157(() => {
+  const renderTabOptions = useMemo158(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -33820,7 +33942,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo157(() => {
+  const readOnlyRenderCommand = useMemo158(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -33993,7 +34115,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo157(() => {
+  const pixelFormatOptions = useMemo158(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -34292,7 +34414,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback154, useContext as useContext100, useMemo as useMemo162, useState as useState95 } from "react";
+import { useCallback as useCallback154, useContext as useContext100, useMemo as useMemo163, useState as useState95 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx288 } from "react/jsx-runtime";
@@ -34454,7 +34576,7 @@ var WebRendererExperimentalBadge = () => {
 };
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
-import { useCallback as useCallback151, useMemo as useMemo158 } from "react";
+import { useCallback as useCallback151, useMemo as useMemo159 } from "react";
 import { jsx as jsx290, jsxs as jsxs150 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -34492,7 +34614,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo158(() => {
+  const hardwareAccelerationOptions = useMemo159(() => {
     return [
       {
         label: "No Preference",
@@ -34624,7 +34746,7 @@ var WebRenderModalAdvanced = ({
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
 import { getSupportedAudioCodecsForContainer as getSupportedAudioCodecsForContainer2 } from "@remotion/web-renderer";
-import { useMemo as useMemo159 } from "react";
+import { useMemo as useMemo160 } from "react";
 
 // src/components/RenderModal/quality-options.tsx
 import { jsx as jsx291 } from "react/jsx-runtime";
@@ -34697,8 +34819,8 @@ var WebRenderModalAudio = ({
   encodableCodecs,
   effectiveAudioCodec
 }) => {
-  const containerSupported = useMemo159(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
-  const audioCodecOptions = useMemo159(() => {
+  const containerSupported = useMemo160(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
+  const audioCodecOptions = useMemo160(() => {
     return containerSupported.map((codec) => {
       const isEncodable = encodableCodecs.includes(codec);
       return {
@@ -34715,7 +34837,7 @@ var WebRenderModalAudio = ({
       };
     });
   }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
-  const audioBitrateOptions = useMemo159(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+  const audioBitrateOptions = useMemo160(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
   const isAudioOnly = renderMode === "audio";
   const showAudioSettings = isAudioOnly || !muted;
   const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
@@ -34792,7 +34914,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo160 } from "react";
+import { useMemo as useMemo161 } from "react";
 import { jsx as jsx293, jsxs as jsxs152, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -34846,7 +34968,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo160(() => {
+  const imageFormatOptions = useMemo161(() => {
     return [
       {
         label: "PNG",
@@ -34868,7 +34990,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo160(() => {
+  const logLevelOptions = useMemo161(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -34883,7 +35005,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo160(() => {
+  const containerOptions = useMemo161(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -34897,7 +35019,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container61, setContainerFormat, renderMode]);
-  const codecOptions = useMemo160(() => {
+  const codecOptions = useMemo161(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -35487,7 +35609,7 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback153, useMemo as useMemo161 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo162 } from "react";
 import { jsx as jsx297, jsxs as jsxs155, Fragment as Fragment53 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -35505,7 +35627,7 @@ var WebRenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const qualityOptions = useMemo161(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo162(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback153((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
@@ -35678,25 +35800,25 @@ var WebRenderModal = ({
   const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
-  const effectiveAudioCodec = useMemo162(() => {
+  const effectiveAudioCodec = useMemo163(() => {
     if (encodableAudioCodecs.includes(audioCodec)) {
       return audioCodec;
     }
     return encodableAudioCodecs[0] ?? audioCodec;
   }, [audioCodec, encodableAudioCodecs]);
-  const effectiveVideoCodec = useMemo162(() => {
+  const effectiveVideoCodec = useMemo163(() => {
     if (encodableVideoCodecs.includes(codec)) {
       return codec;
     }
     return encodableVideoCodecs[0] ?? codec;
   }, [codec, encodableVideoCodecs]);
-  const finalEndFrame = useMemo162(() => {
+  const finalEndFrame = useMemo163(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo162(() => {
+  const finalStartFrame = useMemo163(() => {
     if (startFrame === null) {
       return 0;
     }
@@ -35761,7 +35883,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container61, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo162(() => {
+  const renderTabOptions = useMemo163(() => {
     const options = [
       {
         label: "Still",
@@ -35807,7 +35929,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback154((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo162(() => {
+  const outnameValidation = useMemo163(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -36155,7 +36277,7 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback157, useMemo as useMemo164 } from "react";
+import { useCallback as useCallback157, useMemo as useMemo165 } from "react";
 
 // src/components/CopyButton.tsx
 import { useCallback as useCallback155, useEffect as useEffect89, useState as useState96 } from "react";
@@ -36221,7 +36343,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback156, useMemo as useMemo163, useState as useState97 } from "react";
+import { useCallback as useCallback156, useMemo as useMemo164, useState as useState97 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -36241,7 +36363,7 @@ var OpenIssueButton = ({ link: link4 }) => {
   const handleClick = useCallback156(() => {
     window.open(link4, "_blank");
   }, [link4]);
-  const svgFillColor = useMemo163(() => {
+  const svgFillColor = useMemo164(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx300("svg", {
@@ -36338,7 +36460,7 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo164(() => {
+  const hasKnownBugs = useMemo165(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
@@ -36527,7 +36649,7 @@ var Modals = ({ readOnlyStudio }) => {
 };
 
 // src/components/SequencePropsSubscriptionProvider.tsx
-import { useState as useState98, useCallback as useCallback158, useMemo as useMemo165 } from "react";
+import { useState as useState98, useCallback as useCallback158, useMemo as useMemo166 } from "react";
 import { Internals as Internals73 } from "remotion";
 import { jsx as jsx304 } from "react/jsx-runtime";
 var SequencePropsSubscriptionProvider = ({ children }) => {
@@ -36541,10 +36663,10 @@ var SequencePropsSubscriptionProvider = ({ children }) => {
       return { ...prev, [overrideId]: state };
     });
   }, []);
-  const getters = useMemo165(() => {
+  const getters = useMemo166(() => {
     return { overrideIdToNodePathMappings: overrideToNodePathMap };
   }, [overrideToNodePathMap]);
-  const setters = useMemo165(() => {
+  const setters = useMemo166(() => {
     return { setOverrideIdToNodePath };
   }, [setOverrideIdToNodePath]);
   return /* @__PURE__ */ jsx304(Internals73.OverrideIdsToNodePathsGettersContext.Provider, {
@@ -36577,7 +36699,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback159(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo166(() => {
+  const value = useMemo167(() => {
     if (!size3) {
       return null;
     }
@@ -36586,15 +36708,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size3
     };
   }, [size3]);
-  const MemoRoot = useMemo166(() => {
+  const MemoRoot = useMemo167(() => {
     return React201.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState99(null);
   const clearError = useCallback159(() => {
     setRenderError(null);
   }, []);
-  const compositionRenderErrorContextValue = useMemo166(() => ({ setError: setRenderError, clearError }), [clearError]);
-  const renderErrorContextValue = useMemo166(() => ({ error: renderError }), [renderError]);
+  const compositionRenderErrorContextValue = useMemo167(() => ({ setError: setRenderError, clearError }), [clearError]);
+  const renderErrorContextValue = useMemo167(() => ({ error: renderError }), [renderError]);
   return /* @__PURE__ */ jsx305(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -36647,7 +36769,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback160, useContext as useContext102, useMemo as useMemo167, useState as useState100 } from "react";
+import { useCallback as useCallback160, useContext as useContext102, useMemo as useMemo168, useState as useState100 } from "react";
 import { Internals as Internals75 } from "remotion";
 import { jsx as jsx306 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -36683,7 +36805,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo167(() => {
+  const previewSizeCtx = useMemo168(() => {
     return {
       size: editorZoomGestures ? size3 : {
         size: size3.size,
@@ -36704,7 +36826,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback161, useMemo as useMemo168, useState as useState101 } from "react";
+import { useCallback as useCallback161, useMemo as useMemo169, useState as useState101 } from "react";
 import { jsx as jsx307 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState101(() => loadCheckerboardOption());
@@ -36715,7 +36837,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo168(() => {
+  const checkerboardCtx = useMemo169(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -36728,19 +36850,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo169, useState as useState102 } from "react";
+import { useMemo as useMemo170, useState as useState102 } from "react";
 import { Internals as Internals76 } from "remotion";
 import { jsx as jsx308 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState102(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState102(1);
-  const mediaVolumeContextValue = useMemo169(() => {
+  const mediaVolumeContextValue = useMemo170(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo169(() => {
+  const setMediaVolumeContextValue = useMemo170(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -36756,11 +36878,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo170, useState as useState103 } from "react";
+import { useMemo as useMemo171, useState as useState103 } from "react";
 import { jsx as jsx309 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState103(null);
-  const modalsContext = useMemo170(() => {
+  const modalsContext = useMemo171(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -36773,7 +36895,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect90, useMemo as useMemo171, useState as useState104 } from "react";
+import { useEffect as useEffect90, useMemo as useMemo172, useState as useState104 } from "react";
 
 // src/state/marks.ts
 var localStorageKey4 = () => `remotion.editor.marksv2`;
@@ -36792,7 +36914,7 @@ var loadMarks = () => {
 import { jsx as jsx310 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState104(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo171(() => {
+  const setTimelineInOutContextValue = useMemo172(() => {
     return {
       setInAndOutFrames
     };
@@ -36810,7 +36932,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback162, useMemo as useMemo172, useRef as useRef57, useState as useState105 } from "react";
+import { useCallback as useCallback162, useMemo as useMemo173, useRef as useRef57, useState as useState105 } from "react";
 import { jsx as jsx311 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState105(() => loadGuidesList());
@@ -36826,7 +36948,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo172(() => {
+  const editorShowGuidesCtx = useMemo173(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -36853,7 +36975,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback163, useMemo as useMemo173, useState as useState106 } from "react";
+import { useCallback as useCallback163, useMemo as useMemo174, useState as useState106 } from "react";
 import { jsx as jsx312 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState106(() => loadEditorShowRulersOption());
@@ -36864,7 +36986,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo173(() => {
+  const editorShowRulersCtx = useMemo174(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -36896,7 +37018,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback164, useMemo as useMemo174, useState as useState107 } from "react";
+import { useCallback as useCallback164, useMemo as useMemo175, useState as useState107 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState107(() => loadEditorZoomGesturesOption());
@@ -36907,7 +37029,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo174(() => {
+  const editorZoomGesturesCtx = useMemo175(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -37044,7 +37166,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback165, useEffect as useEffect92, useMemo as useMemo175, useState as useState108 } from "react";
+import { useCallback as useCallback165, useEffect as useEffect92, useMemo as useMemo176, useState as useState108 } from "react";
 import { jsx as jsx316 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState108(0);
@@ -37063,7 +37185,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo175(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo176(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx316(FastRefreshContext.Provider, {
     value,
     children
@@ -37235,7 +37357,7 @@ import {
   useContext as useContext105,
   useEffect as useEffect93,
   useImperativeHandle as useImperativeHandle14,
-  useMemo as useMemo176,
+  useMemo as useMemo177,
   useState as useState109
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals78 } from "remotion";
@@ -37245,20 +37367,20 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
   const { compositions, canvasContent, currentCompositionMetadata } = useContext105(Internals78.CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext105(FastRefreshContext);
   if (manualRefreshes) {}
-  const selectedComposition = useMemo176(() => {
+  const selectedComposition = useMemo177(() => {
     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 } = useContext105(Internals78.EditorPropsContext);
   const env = Internals78.getRemotionEnvironment();
-  const inputProps = useMemo176(() => {
+  const inputProps = useMemo177(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
   const [resolvedConfigs, setResolvedConfigs] = useState109({});
-  const selectedEditorProps = useMemo176(() => {
+  const selectedEditorProps = useMemo177(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
-  const renderModalProps = useMemo176(() => {
+  const renderModalProps = useMemo177(() => {
     return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
   }, [allEditorProps, renderModalComposition]);
   const hasResolution = Boolean(currentCompositionMetadata);
@@ -37395,13 +37517,13 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     inputProps
   ]);
   const isTheSame = selectedComposition?.id === renderModalComposition?.id;
-  const currentDefaultProps = useMemo176(() => {
+  const currentDefaultProps = useMemo177(() => {
     return {
       ...selectedComposition?.defaultProps ?? {},
       ...selectedEditorProps ?? {}
     };
   }, [selectedComposition?.defaultProps, selectedEditorProps]);
-  const originalProps = useMemo176(() => {
+  const originalProps = useMemo177(() => {
     return {
       ...currentDefaultProps,
       ...inputProps ?? {}
@@ -37470,7 +37592,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo176(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo177(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });