@remotion/studio 4.0.464 → 4.0.465

package/dist/esm/previewEntry.mjs

@@ -2821,7 +2821,7 @@ import { Internals as Internals79 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
-import React202, { useCallback as useCallback159, useMemo as useMemo166, useState as useState100 } from "react";
+import React202, { useCallback as useCallback159, useMemo as useMemo167, useState as useState100 } from "react";
 import { Internals as Internals74 } from "remotion";
 
 // src/helpers/noop.ts
@@ -4854,11 +4854,13 @@ var openInFileExplorer = ({ directory }) => {
 var applyCodemod = ({
   codemod,
   dryRun,
+  symbolicatedStack,
   signal
 }) => {
   const body = {
     codemod,
-    dryRun
+    dryRun,
+    symbolicatedStack
   };
   return callApi("/api/apply-codemod", body, signal);
 };
@@ -4875,9 +4877,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,
@@ -10523,6 +10522,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) => {
@@ -10554,6 +10559,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);
       });
@@ -23328,7 +23335,7 @@ var TimeValue = () => {
 import { jsx as jsx204 } from "react/jsx-runtime";
 var TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 var container40 = {
-  height: TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+  height: TIMELINE_TIME_INDICATOR_HEIGHT,
   boxShadow: `0 0 4px ${TIMELINE_BACKGROUND}`,
   position: "absolute",
   backgroundColor: TIMELINE_BACKGROUND,
@@ -23414,9 +23421,8 @@ var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
   const style10 = useMemo115(() => {
     return {
       ...container40,
-      width: windowWidth - SPLITTER_HANDLE_SIZE / 2,
+      width: windowWidth,
       overflow: "hidden",
-      marginLeft: SPLITTER_HANDLE_SIZE / 2,
       pointerEvents: "none"
     };
   }, [windowWidth]);
@@ -23433,7 +23439,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
       };
@@ -23443,7 +23449,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
@@ -24664,6 +24670,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;
@@ -24696,7 +24746,7 @@ var TimelineEffectGroupRow = ({
     height: TREE_GROUP_ROW_HEIGHT,
     paddingRight: EXPANDED_SECTION_PADDING_RIGHT
   }), []);
-  return /* @__PURE__ */ jsx218(TimelineRowChrome, {
+  const row7 = /* @__PURE__ */ jsx218(TimelineRowChrome, {
     depth: rowDepth,
     eye: canToggle ? /* @__PURE__ */ jsx218(TimelineLayerEye, {
       type: "effect",
@@ -24715,6 +24765,10 @@ var TimelineEffectGroupRow = ({
       children: label9
     })
   });
+  return previewConnected ? /* @__PURE__ */ jsx218(ContextMenu, {
+    values: contextMenuValues,
+    children: row7
+  }) : row7;
 };
 
 // src/components/Timeline/TimelineFieldRow.tsx
@@ -26307,6 +26361,22 @@ import {
 } from "@remotion/timeline-utils";
 import { useEffect as useEffect77, useMemo as useMemo134, useRef as useRef50, useState as useState80 } 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 jsx231, jsxs as jsxs110 } from "react/jsx-runtime";
 var FILMSTRIP_HEIGHT = TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 var outerStyle = {
@@ -26317,7 +26387,6 @@ var outerStyle = {
 };
 var filmstripContainerStyle = {
   height: FILMSTRIP_HEIGHT,
-  width: "100%",
   backgroundColor: "rgba(0, 0, 0, 0.3)",
   display: "flex",
   borderTopLeftRadius: 2,
@@ -26341,6 +26410,14 @@ var TimelineVideoInfo = ({
   const ref2 = useRef50(null);
   const [error, setError] = useState80(null);
   const aspectRatio = useRef50(getAspectRatioFromCache(src));
+  const { mediaVisualizationWidth, mediaNaturalWidth } = useMemo134(() => {
+    return getTimelineVideoInfoWidths({
+      visualizationWidth,
+      naturalWidth,
+      premountWidth,
+      postmountWidth
+    });
+  }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
   useEffect77(() => {
     if (error) {
       return;
@@ -26351,7 +26428,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) {
@@ -26359,7 +26436,7 @@ var TimelineVideoInfo = ({
     }
     current.appendChild(canvas);
     const loopWidth = getLoopDisplayWidth2({
-      visualizationWidth: naturalWidth,
+      visualizationWidth: mediaNaturalWidth,
       loopDisplay
     });
     const shouldRepeatVideo = shouldTileLoopDisplay2(loopDisplay);
@@ -26388,7 +26465,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,
@@ -26507,13 +26584,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,
@@ -26527,7 +26611,7 @@ var TimelineVideoInfo = ({
     children: [
       /* @__PURE__ */ jsx231("div", {
         ref: ref2,
-        style: filmstripContainerStyle
+        style: filmstripStyle
       }),
       /* @__PURE__ */ jsx231("div", {
         style: audioStyle,
@@ -27361,7 +27445,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 React170, { useContext as useContext90, useEffect as useEffect80, useMemo as useMemo139 } from "react";
@@ -27446,7 +27530,27 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback124, useContext as useContext91, useEffect as useEffect81, useState as useState81 } from "react";
+import {
+  useCallback as useCallback124,
+  useContext as useContext91,
+  useEffect as useEffect81,
+  useMemo as useMemo140,
+  useState as useState81
+} 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 jsx243, jsxs as jsxs118 } from "react/jsx-runtime";
@@ -27465,7 +27569,7 @@ var CodemodDiffPreview = ({ status }) => {
     children: [
       /* @__PURE__ */ jsx243("span", {
         style: { color: LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 },
-        children: "This will edit your Root file."
+        children: "This will edit your codebase."
       }),
       /* @__PURE__ */ jsx243("br", {}),
       /* @__PURE__ */ jsxs118("span", {
@@ -27498,6 +27602,7 @@ var CodemodDiffPreview = ({ status }) => {
 import { jsx as jsx244, jsxs as jsxs119 } from "react/jsx-runtime";
 var CodemodFooter = ({
   codemod,
+  stack: stack2,
   valid,
   loadingNotification,
   successNotification,
@@ -27511,18 +27616,9 @@ var CodemodFooter = ({
   const [codemodStatus, setCanApplyCodemod] = useState81({
     type: "loading"
   });
-  const [projectInfo, setProjectInfo] = useState81(null);
-  useEffect81(() => {
-    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);
@@ -27530,6 +27626,7 @@ var CodemodFooter = ({
     applyCodemod({
       codemod,
       dryRun: false,
+      symbolicatedStack,
       signal: new AbortController().signal
     }).then(() => {
       notification2.replaceContent(successNotification, 2000);
@@ -27543,12 +27640,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) {
@@ -27559,8 +27658,25 @@ var CodemodFooter = ({
         error: res.reason
       });
     }
-  }, [codemod]);
+  }, [codemod, symbolicatedStack]);
   useEffect81(() => {
+    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(() => {
@@ -27569,14 +27685,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();
   useEffect81(() => {
     if (disabled) {
@@ -27586,7 +27702,7 @@ var CodemodFooter = ({
       callback() {
         trigger();
       },
-      commandCtrlKey: true,
+      commandCtrlKey: false,
       key: "Enter",
       event: "keydown",
       preventDefault: true,
@@ -27612,10 +27728,10 @@ var CodemodFooter = ({
         onClick: trigger,
         disabled,
         children: [
-          projectInfo && projectInfo.relativeRootFile ? submitLabel({ relativeRootPath: projectInfo.relativeRootFile }) : genericSubmitLabel,
+          relativeFilePath ? submitLabel({ relativeRootPath: relativeFilePath }) : genericSubmitLabel,
           /* @__PURE__ */ jsx244(ShortcutHint, {
             keyToPress: "↵",
-            cmdOrCtrl: true
+            cmdOrCtrl: false
           })
         ]
       })
@@ -27637,7 +27753,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
@@ -27686,6 +27803,7 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
               genericSubmitLabel: `Delete`,
               submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid: true,
               onSuccess: null
             })
@@ -27707,7 +27825,7 @@ var DeleteComposition = ({ compositionId }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { useCallback as useCallback127, useContext as useContext93, useMemo as useMemo141, useState as useState82 } from "react";
+import { useCallback as useCallback127, useContext as useContext93, useMemo as useMemo142, useState as useState82 } from "react";
 import { Internals as Internals69 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -27818,6 +27936,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     throw new Error("Resolved composition context");
   }
   const { resolved, unresolved } = context;
+  const compositionStack = unresolved.stack ?? null;
   const [initialCompType] = useState82(initialType);
   const hadDimensionsDefined = unresolved.width && unresolved.height;
   const hadFpsDefined = unresolved.fps !== undefined;
@@ -27898,7 +28017,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",
@@ -27925,7 +28044,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,
@@ -28149,6 +28268,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
               genericSubmitLabel: "Duplicate",
               submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid,
               onSuccess: onDuplicateSuccess
             })
@@ -28170,7 +28290,7 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 };
 
 // src/components/NewComposition/RenameComposition.tsx
-import { useCallback as useCallback128, useContext as useContext94, useMemo as useMemo142, useState as useState83 } from "react";
+import { useCallback as useCallback128, useContext as useContext94, useMemo as useMemo143, useState as useState83 } from "react";
 import { Internals as Internals70 } from "remotion";
 import { jsx as jsx248, jsxs as jsxs123, Fragment as Fragment37 } from "react/jsx-runtime";
 var content5 = {
@@ -28185,7 +28305,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] = useState83(() => {
     return resolved.result.id;
@@ -28195,7 +28316,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,
@@ -28262,6 +28383,7 @@ var RenameCompositionLoaded = () => {
               genericSubmitLabel: "Rename",
               submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`,
               codemod,
+              stack: compositionStack,
               valid,
               onSuccess: null
             })
@@ -28281,7 +28403,7 @@ var RenameComposition = ({ compositionId }) => {
 };
 
 // src/components/OverrideInputProps.tsx
-import { useCallback as useCallback129, useContext as useContext95, useMemo as useMemo143, useState as useState84 } from "react";
+import { useCallback as useCallback129, useContext as useContext95, useMemo as useMemo144, useState as useState84 } from "react";
 import { Internals as Internals71 } from "remotion";
 import { jsx as jsx249, jsxs as jsxs124 } from "react/jsx-runtime";
 var style10 = {
@@ -28325,7 +28447,7 @@ var Inner = () => {
     return null;
   });
   const { setSelectedModal } = useContext95(ModalsContext);
-  const valid = useMemo143(() => {
+  const valid = useMemo144(() => {
     if (!value)
       return true;
     return isValidJSON(value);
@@ -28407,7 +28529,7 @@ import {
   useCallback as useCallback130,
   useContext as useContext96,
   useEffect as useEffect83,
-  useMemo as useMemo145,
+  useMemo as useMemo146,
   useRef as useRef52,
   useState as useState86
 } from "react";
@@ -29306,7 +29428,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect82, useMemo as useMemo144, useRef as useRef51, useState as useState85 } from "react";
+import { useEffect as useEffect82, useMemo as useMemo145, useRef as useRef51, useState as useState85 } from "react";
 import { jsx as jsx253, jsxs as jsxs127, Fragment as Fragment39 } from "react/jsx-runtime";
 var container50 = {
   paddingLeft: 16,
@@ -29377,7 +29499,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       });
     }
   }, [selected]);
-  const style11 = useMemo144(() => {
+  const style11 = useMemo145(() => {
     return {
       ...container50,
       backgroundColor: getBackgroundFromHoverState({
@@ -29386,7 +29508,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       })
     };
   }, [hovered, selected]);
-  const labelStyle6 = useMemo144(() => {
+  const labelStyle6 = useMemo145(() => {
     return {
       ...result.type === "search-result" ? searchLabel : label10,
       color: result.type === "search-result" ? LIGHT_TEXT : selected || hovered ? "white" : LIGHT_TEXT,
@@ -29524,16 +29646,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);
     }
@@ -29663,12 +29785,12 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
   }, []);
   const showKeyboardShortcuts = mode === "docs" && actualQuery.trim() === "";
   const showSearchLoadingState = mode === "docs" && docResults.type === "loading";
-  const container51 = useMemo145(() => {
+  const container51 = useMemo146(() => {
     return {
       width: showKeyboardShortcuts ? 800 : 500
     };
   }, [showKeyboardShortcuts]);
-  const results = useMemo145(() => {
+  const results = useMemo146(() => {
     if (showKeyboardShortcuts) {
       return {
         maxHeight: 600,
@@ -29934,7 +30056,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 jsx258, jsxs as jsxs130 } from "react/jsx-runtime";
 var progressItem2 = {
   padding: 10,
@@ -30076,7 +30198,7 @@ var DownloadsProgress = ({ downloads }) => {
   });
 };
 var OpenFile = ({ job }) => {
-  const labelStyle6 = useMemo146(() => {
+  const labelStyle6 = useMemo147(() => {
     return {
       ...label12,
       textAlign: "left",
@@ -30288,7 +30410,7 @@ import {
   useCallback as useCallback150,
   useContext as useContext99,
   useEffect as useEffect86,
-  useMemo as useMemo157,
+  useMemo as useMemo158,
   useReducer as useReducer2,
   useRef as useRef54,
   useState as useState92
@@ -30559,10 +30681,10 @@ var makeReadOnlyStudioRenderCommand = ({
 };
 
 // src/helpers/render-modal-sections.ts
-import { useMemo as useMemo147, useState as useState87 } from "react";
+import { useMemo as useMemo148, useState as useState87 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
   const [selectedTab, setTab] = useState87("general");
-  const shownTabs = useMemo147(() => {
+  const shownTabs = useMemo148(() => {
     if (renderMode === "audio") {
       return ["general", "data", "audio", "advanced"];
     }
@@ -30580,13 +30702,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]);
 };
@@ -30654,7 +30776,7 @@ var GifIcon = (props) => /* @__PURE__ */ jsx264("svg", {
 });
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback133, useMemo as useMemo148, useState as useState88 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo149, useState as useState88 } from "react";
 import { jsx as jsx265 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
@@ -30678,7 +30800,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",
@@ -30709,7 +30831,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 useEffect84, useMemo as useMemo149, useState as useState89 } from "react";
+import { useCallback as useCallback134, useEffect as useEffect84, useMemo as useMemo150, useState as useState89 } from "react";
 import { jsx as jsx266 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -30738,7 +30860,7 @@ var CliCopyButton = ({
 }) => {
   const [copied, setCopied] = useState89(false);
   const [hovered, setHovered] = useState89(false);
-  const fillColor = useMemo149(() => {
+  const fillColor = useMemo150(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const clipboardIcon = /* @__PURE__ */ jsx266(ClipboardIcon, {
@@ -31245,7 +31367,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) => {
@@ -31590,7 +31712,7 @@ var RenderModalAdvanced = ({
   darkMode,
   setDarkMode
 }) => {
-  const extendedOpenGlOptions = useMemo150(() => {
+  const extendedOpenGlOptions = useMemo151(() => {
     return [
       "angle",
       "egl",
@@ -31660,7 +31782,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,
@@ -31676,7 +31798,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
-  const chromeModeOptions = useMemo150(() => {
+  const chromeModeOptions = useMemo151(() => {
     return BrowserSafeApis6.validChromeModeOptions.map((option) => {
       return {
         label: option,
@@ -31692,7 +31814,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [chromeModeOption, setChromeModeOption]);
-  const x264PresetOptions = useMemo150(() => {
+  const x264PresetOptions = useMemo151(() => {
     return BrowserSafeApis6.x264PresetOptions.map((option) => {
       return {
         label: labelx264Preset(option),
@@ -31708,7 +31830,7 @@ var RenderModalAdvanced = ({
       };
     });
   }, [setx264Preset, x264Preset]);
-  const hardwareAccelerationValues = useMemo150(() => {
+  const hardwareAccelerationValues = useMemo151(() => {
     return BrowserSafeApis6.hardwareAccelerationOptions.map((option) => {
       return {
         label: option,
@@ -32201,7 +32323,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";
@@ -32294,7 +32416,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 useEffect85, useRef as useRef53, useState as useState91 } from "react";
@@ -32427,7 +32549,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) {
@@ -32527,7 +32649,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),
@@ -32714,7 +32836,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) => {
@@ -32743,7 +32865,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 jsx281, jsxs as jsxs142 } from "react/jsx-runtime";
 var container57 = {
   borderColor: "black",
@@ -32773,7 +32895,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 {
@@ -32980,7 +33102,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) => {
@@ -32998,7 +33120,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo154(() => {
+  const proResProfileOptions = useMemo155(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -33030,7 +33152,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),
@@ -33284,7 +33406,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 jsx286 } from "react/jsx-runtime";
@@ -33303,7 +33425,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 jsx287, jsxs as jsxs147, Fragment as Fragment48 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -33317,7 +33439,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}`;
@@ -33386,7 +33508,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo156(() => {
+  const colorSpaceOptions = useMemo157(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -33402,7 +33524,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo156(() => {
+  const qualityControlOptions = useMemo157(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -33797,7 +33919,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState92(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState92(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState92(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo157(() => {
+  const chromiumOptions = useMemo158(() => {
     return {
       headless,
       disableWebSecurity,
@@ -33839,19 +33961,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState92(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState92(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState92(() => 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;
     }
@@ -33859,10 +33981,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";
@@ -33886,7 +34008,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo157(() => {
+  const videoBitrate = useMemo158(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -33898,13 +34020,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;
     }
@@ -33913,13 +34035,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;
     }
@@ -33930,19 +34052,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState92(() => 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]);
@@ -34063,17 +34185,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState92(() => 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;
     }
@@ -34246,7 +34368,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo157(() => {
+  const imageFormatOptions = useMemo158(() => {
     if (renderMode === "still") {
       return [
         {
@@ -34342,7 +34464,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo157(() => {
+  const renderTabOptions = useMemo158(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -34400,7 +34522,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo157(() => {
+  const readOnlyRenderCommand = useMemo158(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -34573,7 +34695,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo157(() => {
+  const pixelFormatOptions = useMemo158(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -34872,7 +34994,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback154, useContext as useContext100, useMemo as useMemo162, useState as useState96 } from "react";
+import { useCallback as useCallback154, useContext as useContext100, useMemo as useMemo163, useState as useState96 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx290 } from "react/jsx-runtime";
@@ -35034,7 +35156,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 jsx292, jsxs as jsxs151 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -35072,7 +35194,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo158(() => {
+  const hardwareAccelerationOptions = useMemo159(() => {
     return [
       {
         label: "No Preference",
@@ -35204,7 +35326,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 jsx293 } from "react/jsx-runtime";
@@ -35277,8 +35399,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 {
@@ -35295,7 +35417,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;
@@ -35372,7 +35494,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo160 } from "react";
+import { useMemo as useMemo161 } from "react";
 import { jsx as jsx295, jsxs as jsxs153, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -35426,7 +35548,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo160(() => {
+  const imageFormatOptions = useMemo161(() => {
     return [
       {
         label: "PNG",
@@ -35448,7 +35570,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo160(() => {
+  const logLevelOptions = useMemo161(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -35463,7 +35585,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo160(() => {
+  const containerOptions = useMemo161(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -35477,7 +35599,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container62, setContainerFormat, renderMode]);
-  const codecOptions = useMemo160(() => {
+  const codecOptions = useMemo161(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -36067,7 +36189,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 jsx299, jsxs as jsxs156, Fragment as Fragment53 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -36085,7 +36207,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]);
@@ -36258,25 +36380,25 @@ var WebRenderModal = ({
   const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState96(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
-  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;
     }
@@ -36341,7 +36463,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container62, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo162(() => {
+  const renderTabOptions = useMemo163(() => {
     const options = [
       {
         label: "Still",
@@ -36387,7 +36509,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback154((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo162(() => {
+  const outnameValidation = useMemo163(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -36735,7 +36857,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 useEffect90, useState as useState97 } from "react";
@@ -36801,7 +36923,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback156, useMemo as useMemo163, useState as useState98 } from "react";
+import { useCallback as useCallback156, useMemo as useMemo164, useState as useState98 } from "react";
 import { jsx as jsx302 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
@@ -36821,7 +36943,7 @@ var OpenIssueButton = ({ link: link5 }) => {
   const handleClick = useCallback156(() => {
     window.open(link5, "_blank");
   }, [link5]);
-  const svgFillColor = useMemo163(() => {
+  const svgFillColor = useMemo164(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx302("svg", {
@@ -36918,7 +37040,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];
@@ -37107,7 +37229,7 @@ var Modals = ({ readOnlyStudio }) => {
 };
 
 // src/components/SequencePropsSubscriptionProvider.tsx
-import { useState as useState99, useCallback as useCallback158, useMemo as useMemo165 } from "react";
+import { useState as useState99, useCallback as useCallback158, useMemo as useMemo166 } from "react";
 import { Internals as Internals73 } from "remotion";
 import { jsx as jsx306 } from "react/jsx-runtime";
 var SequencePropsSubscriptionProvider = ({ children }) => {
@@ -37121,10 +37243,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__ */ jsx306(Internals73.OverrideIdsToNodePathsGettersContext.Provider, {
@@ -37157,7 +37279,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback159(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo166(() => {
+  const value = useMemo167(() => {
     if (!size3) {
       return null;
     }
@@ -37166,15 +37288,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size3
     };
   }, [size3]);
-  const MemoRoot = useMemo166(() => {
+  const MemoRoot = useMemo167(() => {
     return React202.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState100(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__ */ jsx307(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -37227,7 +37349,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 useState101 } from "react";
+import { useCallback as useCallback160, useContext as useContext102, useMemo as useMemo168, useState as useState101 } from "react";
 import { Internals as Internals75 } from "remotion";
 import { jsx as jsx308 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -37263,7 +37385,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo167(() => {
+  const previewSizeCtx = useMemo168(() => {
     return {
       size: editorZoomGestures ? size3 : {
         size: size3.size,
@@ -37284,7 +37406,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback161, useMemo as useMemo168, useState as useState102 } from "react";
+import { useCallback as useCallback161, useMemo as useMemo169, useState as useState102 } from "react";
 import { jsx as jsx309 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState102(() => loadCheckerboardOption());
@@ -37295,7 +37417,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo168(() => {
+  const checkerboardCtx = useMemo169(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -37308,19 +37430,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo169, useState as useState103 } from "react";
+import { useMemo as useMemo170, useState as useState103 } from "react";
 import { Internals as Internals76 } from "remotion";
 import { jsx as jsx310 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState103(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState103(1);
-  const mediaVolumeContextValue = useMemo169(() => {
+  const mediaVolumeContextValue = useMemo170(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo169(() => {
+  const setMediaVolumeContextValue = useMemo170(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -37336,11 +37458,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo170, useState as useState104 } from "react";
+import { useMemo as useMemo171, useState as useState104 } from "react";
 import { jsx as jsx311 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState104(null);
-  const modalsContext = useMemo170(() => {
+  const modalsContext = useMemo171(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -37353,7 +37475,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect91, useMemo as useMemo171, useState as useState105 } from "react";
+import { useEffect as useEffect91, useMemo as useMemo172, useState as useState105 } from "react";
 
 // src/state/marks.ts
 var localStorageKey4 = () => `remotion.editor.marksv2`;
@@ -37372,7 +37494,7 @@ var loadMarks = () => {
 import { jsx as jsx312 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState105(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo171(() => {
+  const setTimelineInOutContextValue = useMemo172(() => {
     return {
       setInAndOutFrames
     };
@@ -37390,7 +37512,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback162, useMemo as useMemo172, useRef as useRef57, useState as useState106 } from "react";
+import { useCallback as useCallback162, useMemo as useMemo173, useRef as useRef57, useState as useState106 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState106(() => loadGuidesList());
@@ -37406,7 +37528,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo172(() => {
+  const editorShowGuidesCtx = useMemo173(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -37433,7 +37555,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback163, useMemo as useMemo173, useState as useState107 } from "react";
+import { useCallback as useCallback163, useMemo as useMemo174, useState as useState107 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState107(() => loadEditorShowRulersOption());
@@ -37444,7 +37566,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo173(() => {
+  const editorShowRulersCtx = useMemo174(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -37476,7 +37598,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback164, useMemo as useMemo174, useState as useState108 } from "react";
+import { useCallback as useCallback164, useMemo as useMemo175, useState as useState108 } from "react";
 import { jsx as jsx315 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState108(() => loadEditorZoomGesturesOption());
@@ -37487,7 +37609,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo174(() => {
+  const editorZoomGesturesCtx = useMemo175(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -37624,7 +37746,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback165, useEffect as useEffect93, useMemo as useMemo175, useState as useState109 } from "react";
+import { useCallback as useCallback165, useEffect as useEffect93, useMemo as useMemo176, useState as useState109 } from "react";
 import { jsx as jsx318 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState109(0);
@@ -37643,7 +37765,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo175(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo176(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx318(FastRefreshContext.Provider, {
     value,
     children
@@ -37815,7 +37937,7 @@ import {
   useContext as useContext105,
   useEffect as useEffect94,
   useImperativeHandle as useImperativeHandle14,
-  useMemo as useMemo176,
+  useMemo as useMemo177,
   useState as useState110
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals78 } from "remotion";
@@ -37825,20 +37947,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] = useState110({});
-  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);
@@ -37975,13 +38097,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 ?? {}
@@ -38050,7 +38172,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo176(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo177(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });