@remotion/studio 4.0.477 → 4.0.478

package/dist/esm/{chunk-t8fjnw2d.js → chunk-hrw9799x.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-6jf1natv.js";
 
 // src/Studio.tsx
-import { useLayoutEffect as useLayoutEffect5 } from "react";
+import { useLayoutEffect as useLayoutEffect6 } from "react";
 import { createPortal } from "react-dom";
 import { Internals as Internals103 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals22 } from "@remotion/player";
-import React233, { useCallback as useCallback189, useMemo as useMemo195, useState as useState115 } from "react";
+import React233, { useCallback as useCallback189, useMemo as useMemo195, useState as useState114 } from "react";
 import { Internals as Internals98 } from "remotion";
 
 // src/helpers/colors.ts
@@ -1645,7 +1645,7 @@ var InitialCompositionLoader = () => {
 };
 
 // src/components/MenuToolbar.tsx
-import { useCallback as useCallback116, useMemo as useMemo117, useState as useState73 } from "react";
+import { useCallback as useCallback116, useMemo as useMemo117, useState as useState72 } from "react";
 
 // src/helpers/use-menu-structure.tsx
 import { useContext as useContext12, useEffect as useEffect17, useMemo as useMemo21 } from "react";
@@ -2420,7 +2420,7 @@ var getPreviewFileType = (fileName) => {
   }
   const audioExtensions = ["mp3", "wav", "ogg", "aac"];
   const videoExtensions = ["mp4", "avi", "mkv", "mov", "webm"];
-  const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"];
+  const imageExtensions = ["jpg", "jpeg", "png", "apng", "gif", "bmp"];
   const fileExtension = fileName.split(".").pop()?.toLowerCase();
   if (fileExtension === undefined) {
     throw new Error("File extension is undefined");
@@ -6090,7 +6090,7 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback113, useContext as useContext74, useEffect as useEffect69 } from "react";
+import { useCallback as useCallback113, useContext as useContext74, useEffect as useEffect68 } from "react";
 
 // src/components/InlineAction.tsx
 import { useCallback as useCallback22, useMemo as useMemo26, useState as useState19 } from "react";
@@ -6115,6 +6115,7 @@ var InlineAction = ({
       background: disabled ? "transparent" : getBackgroundFromHoverState({ hovered, selected: false }),
       height: 24,
       width: 24,
+      padding: 0,
       display: "inline-flex",
       justifyContent: "center",
       alignItems: "center",
@@ -6135,7 +6136,7 @@ var InlineAction = ({
 };
 
 // src/components/TopPanel.tsx
-import React139, { useCallback as useCallback112, useContext as useContext73, useEffect as useEffect68, useMemo as useMemo115 } from "react";
+import React139, { useCallback as useCallback112, useContext as useContext73, useEffect as useEffect67, useMemo as useMemo115 } from "react";
 import { Internals as Internals57 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
@@ -6162,8 +6163,25 @@ function useBreakpoint(breakpoint2) {
 import { useContext as useContext34, useMemo as useMemo51 } from "react";
 import { Internals as Internals34 } from "remotion";
 
+// src/helpers/ruler-canvas-size.ts
+var applyRulerInsetsToCanvasSize = ({
+  rulersAreVisible,
+  size
+}) => {
+  if (!rulersAreVisible) {
+    return size;
+  }
+  return {
+    ...size,
+    left: size.left + RULER_WIDTH,
+    top: size.top + RULER_WIDTH,
+    width: size.width - RULER_WIDTH,
+    height: size.height - RULER_WIDTH
+  };
+};
+
 // src/components/CanvasOrLoading.tsx
-import { useContext as useContext33, useEffect as useEffect43 } from "react";
+import { useContext as useContext33, useEffect as useEffect42 } from "react";
 import { Internals as Internals33 } from "remotion";
 
 // src/error-overlay/remotion-overlay/ErrorLoader.tsx
@@ -7677,10 +7695,10 @@ import {
 import {
   useCallback as useCallback43,
   useContext as useContext32,
-  useEffect as useEffect41,
+  useEffect as useEffect40,
   useMemo as useMemo50,
   useRef as useRef28,
-  useState as useState39
+  useState as useState38
 } from "react";
 import { Internals as Internals31, watchStaticFile } from "remotion";
 
@@ -8040,7 +8058,7 @@ var findGuide = (guidesList, guideId) => {
   if (guideId === null) {
     return null;
   }
-  return guidesList.find((guide) => guide.id === guideId) ?? null;
+  return guidesList.find((guide) => guide.id === guideId && guide.show) ?? null;
 };
 var getRulerGuideHighlight = ({
   guidesList,
@@ -9746,15 +9764,38 @@ var duplicateSequencesFromSource = (nodePathInfos, confirm) => {
   });
 };
 var isDuplicatableSequenceRowSelection = (selection) => selection.type === "sequence";
+var isDuplicatableEffectSelection = (selection) => selection.type === "sequence-effect";
+var duplicateEffectsFromSource = (effects) => {
+  return callApi("/api/duplicate-effect", effects.map((effect) => {
+    const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
+    return {
+      fileName: nodePath.absolutePath,
+      sequenceNodePath: nodePath,
+      effectIndex: effect.i
+    };
+  })).then((result) => {
+    if (result.success) {
+      showNotification(effects.length === 1 ? "Duplicated effect in source file" : "Duplicated effects in source files", 2000);
+    } else {
+      showNotification(result.reason, 4000);
+    }
+  }).catch((err) => {
+    showNotification(err.message, 4000);
+  });
+};
 var duplicateSelectedTimelineItems = ({
   selections,
   confirm
 }) => {
   const sequenceSelections = selections.filter(isDuplicatableSequenceRowSelection);
-  if (sequenceSelections.length === 0) {
+  if (sequenceSelections.length > 0) {
+    return duplicateSequencesFromSource(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+  }
+  const effectSelections = selections.filter(isDuplicatableEffectSelection);
+  if (effectSelections.length === 0) {
     return null;
   }
-  return duplicateSequencesFromSource(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+  return duplicateEffectsFromSource(effectSelections);
 };
 
 // src/components/Timeline/reset-selected-timeline-props.ts
@@ -11112,8 +11153,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
       clientX: e.clientX,
       clientY: e.clientY
     };
-    shouldCreateGuideRef.current = true;
-    forceSpecificCursor("no-drop");
+    shouldCreateGuideRef.current = false;
     setDraggingGuideId(() => guide.id);
   }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
   const onMouseDown = useCallback35((e) => {
@@ -11128,8 +11168,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
       clientX: e.clientX,
       clientY: e.clientY
     };
-    shouldCreateGuideRef.current = true;
-    forceSpecificCursor("no-drop");
+    shouldCreateGuideRef.current = false;
     setDraggingGuideId(() => guide.id);
   }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
   const updateHasMovedGuide = useCallback35((clientX, clientY) => {
@@ -11152,13 +11191,38 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
   const onMouseMove = useCallback35((e) => {
     updateHasMovedGuide(e.clientX, e.clientY);
   }, [updateHasMovedGuide]);
+  const finishGuideInteraction = useCallback35(() => {
+    const shouldDeleteGuide = shouldDeleteGuideRef.current;
+    setGuidesList((prevState) => {
+      const newGuides = shouldDeleteGuide ? prevState.filter((candidate) => candidate.id !== guide.id) : prevState;
+      persistGuidesList(newGuides);
+      return newGuides;
+    });
+    if (shouldDeleteGuide && selected) {
+      clearSelection();
+    }
+    shouldDeleteGuideRef.current = false;
+    shouldCreateGuideRef.current = false;
+    stopForcingSpecificCursor();
+    setDraggingGuideId(() => null);
+  }, [
+    clearSelection,
+    guide.id,
+    selected,
+    setDraggingGuideId,
+    setGuidesList,
+    shouldCreateGuideRef,
+    shouldDeleteGuideRef
+  ]);
   const onPointerUp = useCallback35((e) => {
     if (e.currentTarget.hasPointerCapture(e.pointerId)) {
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
     const pointerDownPosition = pointerDownPositionRef.current;
     pointerDownPositionRef.current = null;
-    if (shouldDeleteGuideRef.current) {
+    const shouldDeleteGuide = shouldDeleteGuideRef.current;
+    finishGuideInteraction();
+    if (shouldDeleteGuide) {
       return;
     }
     if (isGuidePointerUpAClick({
@@ -11169,11 +11233,13 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
     })) {
       onSelect();
     }
-  }, [guide.id, onSelect, shouldDeleteGuideRef]);
+  }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
   const onMouseUp = useCallback35((e) => {
     const pointerDownPosition = pointerDownPositionRef.current;
     pointerDownPositionRef.current = null;
-    if (shouldDeleteGuideRef.current) {
+    const shouldDeleteGuide = shouldDeleteGuideRef.current;
+    finishGuideInteraction();
+    if (shouldDeleteGuide) {
       return;
     }
     if (isGuidePointerUpAClick({
@@ -11184,7 +11250,7 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
     })) {
       onSelect();
     }
-  }, [guide.id, onSelect, shouldDeleteGuideRef]);
+  }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
   const onClick = useCallback35((e) => {
     if (e.button !== 0) {
       return;
@@ -11194,7 +11260,8 @@ var GuideComp = ({ guide, canvasDimensions, scale }) => {
   }, []);
   const onPointerCancel = useCallback35(() => {
     pointerDownPositionRef.current = null;
-  }, []);
+    finishGuideInteraction();
+  }, [finishGuideInteraction]);
   const isActive = selected || hoveredGuideId === guide.id;
   const activeClassName = isActive ? "__remotion_editor_guide_selected" : null;
   const guideClassName = useMemo38(() => {
@@ -11286,7 +11353,7 @@ var EditorGuides_default = EditorGuides;
 import {
   useCallback as useCallback37,
   useContext as useContext23,
-  useEffect as useEffect32,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo41,
   useRef as useRef20
 } from "react";
@@ -11504,8 +11571,7 @@ import {
   useContext as useContext22,
   useEffect as useEffect31,
   useMemo as useMemo40,
-  useRef as useRef19,
-  useState as useState29
+  useRef as useRef19
 } from "react";
 import { Internals as Internals23 } from "remotion";
 import { jsx as jsx67 } from "react/jsx-runtime";
@@ -11537,7 +11603,7 @@ var Ruler = ({
   if (!unsafeVideoConfig) {
     throw new Error("Video config not set");
   }
-  const [cursor, setCursor] = useState29(isVerticalRuler ? "ew-resize" : "ns-resize");
+  const cursor = isVerticalRuler ? "ew-resize" : "ns-resize";
   const guideHighlight = useMemo40(() => getRulerGuideHighlight({
     guidesList,
     selectedItems,
@@ -11589,7 +11655,7 @@ var Ruler = ({
     e.preventDefault();
     e.stopPropagation();
     shouldCreateGuideRef.current = true;
-    forceSpecificCursor("no-drop");
+    forceSpecificCursor(cursor);
     const guideId = makeGuideId();
     setEditorShowGuides(() => true);
     setDraggingGuideId(() => guideId);
@@ -11612,28 +11678,16 @@ var Ruler = ({
     setGuidesList,
     orientation,
     originOffset,
-    unsafeVideoConfig.id
+    unsafeVideoConfig.id,
+    cursor
   ]);
-  const changeCursor = useCallback36((e) => {
-    e.preventDefault();
-    if (draggingGuideId !== null) {
-      setCursor("no-drop");
-    }
-  }, [setCursor, draggingGuideId]);
-  useEffect31(() => {
-    if (draggingGuideId === null) {
-      setCursor(isVerticalRuler ? "ew-resize" : "ns-resize");
-    }
-  }, [draggingGuideId, isVerticalRuler]);
   return /* @__PURE__ */ jsx67("canvas", {
     ref: rulerCanvasRef,
     width: rulerWidth * window.devicePixelRatio,
     height: rulerHeight * window.devicePixelRatio,
     style: rulerStyle,
     ...{ [PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: "true" },
-    onPointerDown,
-    onPointerEnter: changeCursor,
-    onPointerLeave: changeCursor
+    onPointerDown
   });
 };
 var Ruler_default = Ruler;
@@ -11709,12 +11763,13 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
         if (!shouldDeleteGuideRef.current) {
           shouldDeleteGuideRef.current = true;
         }
-        forceSpecificCursor("no-drop");
         setGuidesList((prevState) => {
           const newGuides = prevState.map((guide) => {
             if (guide.id !== draggingGuideId) {
               return guide;
             }
+            const desiredCursor = guide.orientation === "vertical" ? "ew-resize" : "ns-resize";
+            forceSpecificCursor(desiredCursor);
             return {
               ...guide,
               show: false
@@ -11754,9 +11809,10 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     canvasPosition.top
   ]);
   const onMouseUp = useCallback37(() => {
+    const shouldDeleteGuide = shouldDeleteGuideRef.current;
     setGuidesList((prevState) => {
       const newGuides = prevState.filter((selected) => {
-        if (!shouldDeleteGuideRef.current) {
+        if (!shouldDeleteGuide) {
           return true;
         }
         return selected.id !== draggingGuideId;
@@ -11765,7 +11821,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
       return newGuides;
     });
     const deletedGuideWasSelected = selectedItems.some((item) => item.type === "guide" && item.guideId === draggingGuideId);
-    if (shouldDeleteGuideRef.current && deletedGuideWasSelected) {
+    if (shouldDeleteGuide && deletedGuideWasSelected) {
       clearSelection();
     }
     shouldDeleteGuideRef.current = false;
@@ -11773,6 +11829,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     shouldCreateGuideRef.current = false;
     setDraggingGuideId(() => null);
     document.removeEventListener("pointerup", onMouseUp);
+    document.removeEventListener("pointercancel", onMouseUp);
     document.removeEventListener("pointermove", onMouseMove);
   }, [
     clearSelection,
@@ -11784,14 +11841,16 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     onMouseMove,
     selectedItems
   ]);
-  useEffect32(() => {
+  useLayoutEffect2(() => {
     if (draggingGuideId !== null) {
       document.addEventListener("pointermove", onMouseMove);
       document.addEventListener("pointerup", onMouseUp);
+      document.addEventListener("pointercancel", onMouseUp);
     }
     return () => {
       document.removeEventListener("pointermove", onMouseMove);
       document.removeEventListener("pointerup", onMouseUp);
+      document.removeEventListener("pointercancel", onMouseUp);
       if (requestAnimationFrameRef.current) {
         cancelAnimationFrame(requestAnimationFrameRef.current);
       }
@@ -12001,6 +12060,16 @@ var getAssetElement = ({
       position: null
     };
   }
+  if (fileType.type === "apng") {
+    return {
+      type: "asset",
+      assetType: "animated-image",
+      src,
+      srcType: "static",
+      dimensions: fileType.dimensions,
+      position: null
+    };
+  }
   if (fileType.type === "gif") {
     return {
       type: "asset",
@@ -12051,6 +12120,16 @@ var getAssetElementFromPath = (assetPath) => {
       position: null
     };
   }
+  if (extension === "apng") {
+    return {
+      type: "asset",
+      assetType: "animated-image",
+      src: assetPath,
+      srcType: "static",
+      dimensions: null,
+      position: null
+    };
+  }
   if (extension === "gif") {
     return {
       type: "asset",
@@ -12096,6 +12175,9 @@ var getAssetLabel = (element) => {
   if (element.assetType === "gif") {
     return "<Gif>";
   }
+  if (element.assetType === "animated-image") {
+    return "<AnimatedImage>";
+  }
   if (element.assetType === "audio") {
     return "<Audio>";
   }
@@ -12127,6 +12209,9 @@ var getComponentPropNumber = (props, name) => {
   return typeof prop?.value === "number" ? prop.value : null;
 };
 var getComponentDimensions = (component) => {
+  if (component.dimensions) {
+    return component.dimensions;
+  }
   const width = getComponentPropNumber(component.props, "width");
   const height = getComponentPropNumber(component.props, "height");
   if (width !== null && height !== null) {
@@ -12170,7 +12255,7 @@ var getFileDimensions = async ({
   if (fileType.type === "wav" || fileType.type === "mp3" || fileType.type === "aac" || fileType.type === "flac") {
     return null;
   }
-  if (fileType.type === "png" || fileType.type === "jpeg" || fileType.type === "webp" || fileType.type === "bmp" || fileType.type === "gif") {
+  if (fileType.type === "png" || fileType.type === "jpeg" || fileType.type === "webp" || fileType.type === "bmp" || fileType.type === "apng" || fileType.type === "gif") {
     if (fileType.dimensions) {
       return fileType.dimensions;
     }
@@ -12190,7 +12275,7 @@ var getFileDimensions = async ({
 var getStaticAssetDimensions = (assetPath) => {
   const extension = assetPath.split(".").pop()?.toLowerCase();
   const src = staticFile2(assetPath);
-  if (extension && ["png", "jpg", "jpeg", "webp", "bmp", "gif"].includes(extension)) {
+  if (extension && ["png", "jpg", "jpeg", "webp", "bmp", "gif", "apng"].includes(extension)) {
     return getImageDimensions({ revokeObjectUrl: false, src });
   }
   if (extension && ["mp4", "m4v", "mov", "avi", "webm", "ts", "m2ts"].includes(extension)) {
@@ -12215,6 +12300,31 @@ var getStaticAssetDimensionsOrNull = async (assetPath) => {
     return null;
   }
 };
+var getStaticAssetFileType = async (assetPath) => {
+  const extension = assetPath.split(".").pop()?.toLowerCase();
+  if (extension !== "png" && extension !== "apng") {
+    return null;
+  }
+  try {
+    const response = await fetch(staticFile2(assetPath));
+    if (!response.ok) {
+      return null;
+    }
+    return detectFileType(new Uint8Array(await response.arrayBuffer()));
+  } catch {
+    return null;
+  }
+};
+var getAssetElementFromStaticAsset = async (assetPath) => {
+  const fileType = await getStaticAssetFileType(assetPath);
+  if (fileType) {
+    const element = getAssetElement({ fileType, src: assetPath });
+    if (element) {
+      return element;
+    }
+  }
+  return getAssetElementFromPath(assetPath);
+};
 var pickFilesToImport = () => {
   return new Promise((resolve) => {
     const input = document.createElement("input");
@@ -12427,18 +12537,18 @@ var insertExistingAssets = async ({
   const unsupportedFiles = [];
   try {
     for (const assetPath of assetPaths) {
-      const element = getAssetElementFromPath(assetPath);
+      const element = await getAssetElementFromStaticAsset(assetPath);
       if (element === null) {
         unsupportedFiles.push(assetPath);
         continue;
       }
-      const dimensions = await getStaticAssetDimensionsOrNull(assetPath);
+      const dimensions = element.dimensions ?? await getStaticAssetDimensionsOrNull(assetPath);
       const inserted = await insertAssetElement({
         compositionFile,
         compositionId,
         element: {
           ...element,
-          dimensions: element.dimensions ?? dimensions,
+          dimensions,
           position: getCenteredPosition({
             dimensions,
             dropPosition
@@ -12492,7 +12602,7 @@ import { PlayerInternals as PlayerInternals10 } from "@remotion/player";
 import {
   useCallback as useCallback42,
   useContext as useContext31,
-  useEffect as useEffect40,
+  useEffect as useEffect39,
   useMemo as useMemo49,
   useRef as useRef27
 } from "react";
@@ -12524,32 +12634,32 @@ var checkerboardBackgroundImage = (checkerboard) => {
 };
 
 // src/components/RenderPreview.tsx
-import { useContext as useContext25, useEffect as useEffect37, useState as useState34 } from "react";
+import { useContext as useContext25, useEffect as useEffect36, useState as useState33 } from "react";
 
 // src/components/FilePreview.tsx
 import { formatBytes } from "@remotion/studio-shared";
 
 // src/components/JSONViewer.tsx
-import { useEffect as useEffect35, useState as useState32 } from "react";
+import { useEffect as useEffect34, useState as useState31 } from "react";
 
 // src/components/NewComposition/RemTextarea.tsx
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect34,
+  useEffect as useEffect33,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo43,
   useRef as useRef22,
-  useState as useState31
+  useState as useState30
 } from "react";
 
 // src/components/NewComposition/RemInput.tsx
 import {
   forwardRef as forwardRef2,
-  useEffect as useEffect33,
+  useEffect as useEffect32,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo42,
   useRef as useRef21,
-  useState as useState30
+  useState as useState29
 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var INPUT_HORIZONTAL_PADDING = 8;
@@ -12575,8 +12685,8 @@ var getInputBorderColor = ({
   isHovered
 }) => status === "warning" ? WARNING_COLOR : status === "error" ? FAIL_COLOR : isFocused ? SELECTED_BACKGROUND : isHovered ? INPUT_BORDER_COLOR_HOVERED : INPUT_BORDER_COLOR_UNHOVERED;
 var RemInputForwardRef = ({ status, rightAlign, ...props }, ref2) => {
-  const [isFocused, setIsFocused] = useState30(false);
-  const [isHovered, setIsHovered] = useState30(false);
+  const [isFocused, setIsFocused] = useState29(false);
+  const [isHovered, setIsHovered] = useState29(false);
   const inputRef = useRef21(null);
   const { tabIndex } = useZIndex();
   const style5 = useMemo42(() => {
@@ -12592,7 +12702,7 @@ var RemInputForwardRef = ({ status, rightAlign, ...props }, ref2) => {
   useImperativeHandle7(ref2, () => {
     return inputRef.current;
   }, []);
-  useEffect33(() => {
+  useEffect32(() => {
     if (!inputRef.current) {
       return;
     }
@@ -12633,8 +12743,8 @@ var inputBaseStyle2 = {
   overflowX: "hidden"
 };
 var RemTextareaFRFunction = ({ status, ...props }, ref2) => {
-  const [isFocused, setIsFocused] = useState31(false);
-  const [isHovered, setIsHovered] = useState31(false);
+  const [isFocused, setIsFocused] = useState30(false);
+  const [isHovered, setIsHovered] = useState30(false);
   const inputRef = useRef22(null);
   const { tabIndex } = useZIndex();
   useImperativeHandle8(ref2, () => {
@@ -12649,7 +12759,7 @@ var RemTextareaFRFunction = ({ status, ...props }, ref2) => {
       ...props.style ?? {}
     };
   }, [isFocused, isHovered, props.style, status]);
-  useEffect34(() => {
+  useEffect33(() => {
     if (!inputRef.current) {
       return;
     }
@@ -12726,8 +12836,8 @@ var jsonStyle = {
   flex: 1
 };
 var JSONViewer = ({ src }) => {
-  const [json, setJson] = useState32(null);
-  useEffect35(() => {
+  const [json, setJson] = useState31(null);
+  useEffect34(() => {
     fetch(src).then((res) => res.json()).then((jsonRes) => {
       setJson(JSON.stringify(jsonRes, null, 2));
     });
@@ -12743,7 +12853,7 @@ var JSONViewer = ({ src }) => {
 };
 
 // src/components/TextViewer.tsx
-import { useEffect as useEffect36, useState as useState33 } from "react";
+import { useEffect as useEffect35, useState as useState32 } from "react";
 import { jsxs as jsxs31 } from "react/jsx-runtime";
 var textStyle = {
   margin: 14,
@@ -12753,8 +12863,8 @@ var textStyle = {
   whiteSpace: "pre-wrap"
 };
 var TextViewer = ({ src }) => {
-  const [txt, setTxt] = useState33("");
-  useEffect36(() => {
+  const [txt, setTxt] = useState32("");
+  useEffect35(() => {
     fetch(src).then(async (res) => {
       if (!res.ok || !res.body) {
         return;
@@ -12855,9 +12965,9 @@ var errMsgStyle = {
 var RenderPreview = ({ path, assetMetadata, getBlob }) => {
   const fileType = getPreviewFileType(path);
   const connectionStatus = useContext25(StudioServerConnectionCtx).previewServerState.type;
-  const [blobUrl, setBlobUrl] = useState34(null);
-  const [blobError, setBlobError] = useState34(null);
-  useEffect37(() => {
+  const [blobUrl, setBlobUrl] = useState33(null);
+  const [blobError, setBlobError] = useState33(null);
+  useEffect36(() => {
     if (!getBlob) {
       setBlobUrl(null);
       setBlobError(null);
@@ -12922,10 +13032,10 @@ import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
 import React63, {
   useCallback as useCallback41,
   useContext as useContext29,
-  useEffect as useEffect39,
+  useEffect as useEffect38,
   useMemo as useMemo48,
   useRef as useRef26,
-  useState as useState38
+  useState as useState37
 } from "react";
 import { Internals as Internals29 } from "remotion";
 import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
@@ -15371,11 +15481,11 @@ var serializeTranslate = (x, y, decimalPlaces = translateDecimalPlaces) => {
 };
 
 // src/components/Timeline/TimelineScaleField.tsx
-import { useCallback as useCallback40, useContext as useContext26, useMemo as useMemo45, useRef as useRef24, useState as useState36 } from "react";
+import { useCallback as useCallback40, useContext as useContext26, useMemo as useMemo45, useRef as useRef24, useState as useState35 } from "react";
 import { NoReactInternals as NoReactInternals5 } from "remotion/no-react";
 
 // src/components/NewComposition/InputDragger.tsx
-import React58, { useCallback as useCallback38, useEffect as useEffect38, useMemo as useMemo44, useRef as useRef23, useState as useState35 } from "react";
+import React58, { useCallback as useCallback38, useEffect as useEffect37, useMemo as useMemo44, useRef as useRef23, useState as useState34 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -15418,8 +15528,8 @@ var InputDraggerForwardRefFn = ({
   dragDecimalPlaces,
   ...props
 }, ref2) => {
-  const [inputFallback, setInputFallback] = useState35(false);
-  const [dragging, setDragging] = useState35(false);
+  const [inputFallback, setInputFallback] = useState34(false);
+  const [dragging, setDragging] = useState34(false);
   const fallbackRef = useRef23(null);
   const pointerDownRef = useRef23(false);
   const style5 = useMemo44(() => {
@@ -15540,7 +15650,7 @@ var InputDraggerForwardRefFn = ({
     snapToStep,
     dragDecimalPlaces
   ]);
-  useEffect38(() => {
+  useEffect37(() => {
     if (inputFallback) {
       fallbackRef.current?.select();
     }
@@ -15796,8 +15906,8 @@ var TimelineScaleField = ({
   onDragEnd,
   scaleLockNodePath
 }) => {
-  const [dragX, setDragX] = useState36(null);
-  const [dragY, setDragY] = useState36(null);
+  const [dragX, setDragX] = useState35(null);
+  const [dragY, setDragY] = useState35(null);
   const dragStartRef = useRef24(null);
   const { getScaleLockState, setScaleLockState } = useContext26(ScaleLockContext);
   const [codeX, codeY, codeZ] = useMemo45(() => NoReactInternals5.parseScaleValue(effectiveValue), [effectiveValue]);
@@ -16486,9 +16596,66 @@ var compensateTranslateForTransformOrigin = ({
   return [startTranslate[0] - compensationX, startTranslate[1] - compensationY];
 };
 var uvsEqual = (left3, right) => Math.abs(left3[0] - right[0]) < 0.000001 && Math.abs(left3[1] - right[1]) < 0.000001;
+var getSelectedOutlineTransformOriginLockedAxis = ({
+  axisLocked,
+  dimensions,
+  startUv,
+  uv
+}) => {
+  if (!axisLocked) {
+    return null;
+  }
+  const deltaX = (uv[0] - startUv[0]) * dimensions.width;
+  const deltaY = (uv[1] - startUv[1]) * dimensions.height;
+  return Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+};
+var applySelectedOutlineTransformOriginAxisLock = ({
+  lockedAxis,
+  startUv,
+  uv
+}) => {
+  if (lockedAxis === "x") {
+    return [uv[0], startUv[1]];
+  }
+  if (lockedAxis === "y") {
+    return [startUv[0], uv[1]];
+  }
+  return uv;
+};
+var transformOriginSnapTargets = [
+  [0, 0],
+  [0.5, 0],
+  [1, 0],
+  [1, 0.5],
+  [1, 1],
+  [0.5, 1],
+  [0, 1],
+  [0, 0.5],
+  [0.5, 0.5]
+];
+var selectedOutlineTransformOriginSnapThresholdPx = 10;
+var snapSelectedOutlineTransformOriginUv = ({
+  point,
+  points,
+  thresholdPx = selectedOutlineTransformOriginSnapThresholdPx,
+  uv
+}) => {
+  let best = null;
+  for (const snapUv of transformOriginSnapTargets) {
+    const snapPoint = getUvHandlePosition(points, snapUv);
+    const distance = Math.hypot(point.x - snapPoint.x, point.y - snapPoint.y);
+    if (distance > thresholdPx) {
+      continue;
+    }
+    if (best === null || distance < best.distance) {
+      best = { distance, uv: snapUv };
+    }
+  }
+  return best?.uv ?? uv;
+};
 
 // src/components/SelectedOutlineElement.tsx
-import React61, { useContext as useContext27, useMemo as useMemo46, useRef as useRef25, useState as useState37 } from "react";
+import React61, { useContext as useContext27, useMemo as useMemo46, useRef as useRef25, useState as useState36 } from "react";
 import { Internals as Internals27 } from "remotion";
 import { NoReactInternals as NoReactInternals9 } from "remotion/no-react";
 
@@ -16887,14 +17054,39 @@ var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target
     const defaultOrigin = transformOriginDrag.originDefault !== undefined ? JSON.stringify(transformOriginDrag.originDefault) : null;
     const defaultTranslate = transformOriginDrag.translateDefault !== undefined ? JSON.stringify(transformOriginDrag.translateDefault) : null;
     let last = null;
+    let currentPointerX = event.clientX;
+    let currentPointerY = event.clientY;
+    let axisLocked = event.shiftKey;
     onDraggingChange(true);
     forceSpecificCursor("crosshair");
-    const updateFromPointerEvent = (pointerEvent) => {
+    const updateFromPointerPosition = () => {
       const point = {
-        x: pointerEvent.clientX - svgRect.left,
-        y: pointerEvent.clientY - svgRect.top
+        x: currentPointerX - svgRect.left,
+        y: currentPointerY - svgRect.top
       };
-      const nextUv = getUvCoordinateForPoint(outline.points, point);
+      const rawUv = getUvCoordinateForPoint(outline.points, point);
+      const lockedAxis = getSelectedOutlineTransformOriginLockedAxis({
+        axisLocked,
+        dimensions,
+        startUv: uv,
+        uv: rawUv
+      });
+      const axisLockedUv = applySelectedOutlineTransformOriginAxisLock({
+        lockedAxis,
+        startUv: uv,
+        uv: rawUv
+      });
+      const snapPoint = lockedAxis === null ? point : getUvHandlePosition(outline.points, axisLockedUv);
+      const snappedUv = snapSelectedOutlineTransformOriginUv({
+        point: snapPoint,
+        points: outline.points,
+        uv: axisLockedUv
+      });
+      const nextUv = applySelectedOutlineTransformOriginAxisLock({
+        lockedAxis,
+        startUv: uv,
+        uv: snappedUv
+      });
       const deltaOrigin = [
         (nextUv[0] - uv[0]) * dimensions.width,
         (nextUv[1] - uv[1]) * dimensions.height
@@ -16922,15 +17114,31 @@ var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target
         value: translate
       }) : Internals27.makeStaticDragOverride(translate));
     };
-    updateFromPointerEvent(event);
+    updateFromPointerPosition();
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
-      updateFromPointerEvent(moveEvent);
+      currentPointerX = moveEvent.clientX;
+      currentPointerY = moveEvent.clientY;
+      axisLocked = moveEvent.shiftKey;
+      updateFromPointerPosition();
+    };
+    const onKeyChange = (keyEvent) => {
+      if (keyEvent.key !== "Shift") {
+        return;
+      }
+      const nextAxisLocked = keyEvent.type === "keydown";
+      if (nextAxisLocked === axisLocked) {
+        return;
+      }
+      axisLocked = nextAxisLocked;
+      updateFromPointerPosition();
     };
     const onPointerUp = () => {
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerUp);
+      window.removeEventListener("keydown", onKeyChange);
+      window.removeEventListener("keyup", onKeyChange);
       stopForcingSpecificCursor();
       onDraggingChange(false);
       if (last === null || uvsEqual(last.uv, uv)) {
@@ -16999,6 +17207,8 @@ var SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target
     window.addEventListener("pointermove", onPointerMove);
     window.addEventListener("pointerup", onPointerUp);
     window.addEventListener("pointercancel", onPointerUp);
+    window.addEventListener("keydown", onKeyChange);
+    window.addEventListener("keyup", onKeyChange);
   }, [
     clearDragOverrides,
     onDraggingChange,
@@ -17072,7 +17282,7 @@ var SelectedOutlinePolygon = ({
   const selected = target?.selected ?? false;
   const containsSelection = target?.containsSelection ?? false;
   const effectDrop = target?.effectDrop ?? null;
-  const [effectDropHovered, setEffectDropHovered] = useState37(false);
+  const [effectDropHovered, setEffectDropHovered] = useState36(false);
   const visible = containsSelection || hovered;
   const onPointerDown = React61.useCallback((event) => {
     if (event.button !== 0 || target === undefined) {
@@ -17326,8 +17536,6 @@ var SelectedOutlineScaleEdgeLine = ({
     if (interaction.shiftKey || interaction.toggleKey) {
       return;
     }
-    onDraggingChange(true);
-    forceSpecificCursor(edgeInfo.cursor);
     const startPointer = { x: event.clientX, y: event.clientY };
     const dragStates = getSelectedOutlineScaleDragStates({
       dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -17335,12 +17543,24 @@ var SelectedOutlineScaleEdgeLine = ({
       timelinePosition: timelinePositionRef.current
     });
     let lastValues = new Map;
+    let dragStarted = false;
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
       const delta = {
         x: moveEvent.clientX - startPointer.x,
         y: moveEvent.clientY - startPointer.y
       };
+      if (!dragStarted) {
+        if (!isSelectedOutlineDragPastThreshold({
+          deltaX: delta.x,
+          deltaY: delta.y
+        })) {
+          return;
+        }
+        dragStarted = true;
+        onDraggingChange(true);
+        forceSpecificCursor(edgeInfo.cursor);
+      }
       const projectedDelta = dot(delta, edgeInfo.normal);
       const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
       lastValues = getSelectedOutlineScaleDragValues({
@@ -17368,8 +17588,10 @@ var SelectedOutlineScaleEdgeLine = ({
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerUp);
-      stopForcingSpecificCursor();
-      onDraggingChange(false);
+      if (dragStarted) {
+        stopForcingSpecificCursor();
+        onDraggingChange(false);
+      }
       const changes = getSelectedOutlineScaleDragChanges({
         dragStates,
         lastValues
@@ -17507,8 +17729,7 @@ var SelectedOutlineRotationCornerHandle = ({
     if (interaction.shiftKey || interaction.toggleKey) {
       return;
     }
-    onDraggingChange(true);
-    forceSpecificCursor(cornerInfo.cursor);
+    const startPointer = { x: event.clientX, y: event.clientY };
     const svgRect = svg.getBoundingClientRect();
     const center2 = svgPointToClientPoint(getSelectedOutlineRotationPivot({
       dimensions: outline.dimensions,
@@ -17526,8 +17747,21 @@ var SelectedOutlineRotationCornerHandle = ({
     });
     let accumulatedDelta = 0;
     let lastValues = new Map;
+    let dragStarted = false;
     const onPointerMove = (moveEvent) => {
       moveEvent.preventDefault();
+      const screenDeltaX = moveEvent.clientX - startPointer.x;
+      const screenDeltaY = moveEvent.clientY - startPointer.y;
+      if (!dragStarted) {
+        if (!isSelectedOutlineDragPastThreshold({
+          deltaX: screenDeltaX,
+          deltaY: screenDeltaY
+        })) {
+          return;
+        }
+        dragStarted = true;
+        onDraggingChange(true);
+      }
       const nextAngle = getAngleDegrees(center2, {
         x: moveEvent.clientX,
         y: moveEvent.clientY
@@ -17562,8 +17796,10 @@ var SelectedOutlineRotationCornerHandle = ({
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerUp);
-      stopForcingSpecificCursor();
-      onDraggingChange(false);
+      if (dragStarted) {
+        stopForcingSpecificCursor();
+        onDraggingChange(false);
+      }
       const changes = getSelectedOutlineRotationDragChanges({
         dragStates,
         lastValues
@@ -18006,9 +18242,9 @@ var SelectedOutlineOverlay = ({ scale }) => {
   const { frameBack, frameForward, getCurrentFrame: getCurrentFrame2, seek } = PlayerInternals9.usePlayer();
   const keybindings = useKeybinding();
   const timelinePosition = Internals29.Timeline.useTimelinePosition();
-  const [outlines, setOutlines] = useState38([]);
-  const [hoveredOutlineKey, setHoveredOutlineKey] = useState38(null);
-  const [draggingOutline, setDraggingOutline] = useState38(false);
+  const [outlines, setOutlines] = useState37([]);
+  const [hoveredOutlineKey, setHoveredOutlineKey] = useState37(null);
+  const [draggingOutline, setDraggingOutline] = useState37(false);
   const overlayRef = useRef26(null);
   const keyboardNudgeSessionRef = useRef26(null);
   const saveKeyboardNudgeSessionRef = useRef26(() => {
@@ -18186,7 +18422,7 @@ var SelectedOutlineOverlay = ({ scale }) => {
     sequences,
     timelinePosition
   ]);
-  useEffect39(() => {
+  useEffect38(() => {
     if (hoveredOutlineKey !== null && !outlineTargets.some((target) => target.key === hoveredOutlineKey)) {
       setHoveredOutlineKey(null);
     }
@@ -18249,10 +18485,10 @@ var SelectedOutlineOverlay = ({ scale }) => {
       });
     });
   }, [clearDragOverrides, setPropStatuses]);
-  useEffect39(() => {
+  useEffect38(() => {
     saveKeyboardNudgeSessionRef.current = saveKeyboardNudgeSession;
   }, [saveKeyboardNudgeSession]);
-  useEffect39(() => {
+  useEffect38(() => {
     return () => {
       saveKeyboardNudgeSessionRef.current();
     };
@@ -18387,7 +18623,7 @@ var SelectedOutlineOverlay = ({ scale }) => {
     event.preventDefault();
     saveKeyboardNudgeSession();
   }, [saveKeyboardNudgeSession]);
-  useEffect39(() => {
+  useEffect38(() => {
     const keyDownBindings = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].map((key2) => keybindings.registerKeybinding({
       event: "keydown",
       key: key2,
@@ -18412,7 +18648,7 @@ var SelectedOutlineOverlay = ({ scale }) => {
       }
     };
   }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
-  useEffect39(() => {
+  useEffect38(() => {
     if (outlineTargets.length === 0) {
       setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
       return;
@@ -18703,7 +18939,7 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
     xCorrection,
     yCorrection
   ]);
-  useEffect40(() => {
+  useEffect39(() => {
     const { current } = portalContainer;
     current?.appendChild(Internals30.portalNode());
     return () => {
@@ -18716,7 +18952,7 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
     }
     clearSelection();
   }, [clearSelection]);
-  useEffect40(() => {
+  useEffect39(() => {
     const { current } = portalContainer;
     if (!current) {
       return;
@@ -18869,8 +19105,8 @@ var Canvas = ({ canvasContent, size: size2 }) => {
   const { editorShowGuides } = useContext32(EditorShowGuidesContext);
   const { compositions } = useContext32(Internals31.CompositionManager);
   const { previewServerState } = useContext32(StudioServerConnectionCtx);
-  const [isAddingAsset, setIsAddingAsset] = useState39(false);
-  const [assetResolution, setAssetResolution] = useState39(null);
+  const [isAddingAsset, setIsAddingAsset] = useState38(false);
+  const [assetResolution, setAssetResolution] = useState38(null);
   const currentCompositionId = canvasContent.type === "composition" ? canvasContent.compositionId : null;
   const currentComposition = useMemo50(() => {
     if (currentCompositionId === null) {
@@ -18964,7 +19200,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       };
     });
   }, [editorZoomGestures, contentDimensions, isFit, setSize, size2]);
-  useEffect41(() => {
+  useEffect40(() => {
     const { current } = canvasRef;
     if (!current) {
       return;
@@ -18975,7 +19211,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     };
   }, [onWheel]);
   const supportsWebKitPinch = typeof window !== "undefined" && "GestureEvent" in window;
-  useEffect41(() => {
+  useEffect40(() => {
     const { current } = canvasRef;
     if (!current || !editorZoomGestures || !supportsWebKitPinch) {
       return;
@@ -19050,7 +19286,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       current.removeEventListener("gesturecancel", onGestureEnd);
     };
   }, [editorZoomGestures, setSize, supportsWebKitPinch]);
-  useEffect41(() => {
+  useEffect40(() => {
     const { current } = canvasRef;
     if (!current || !editorZoomGestures) {
       return;
@@ -19184,7 +19420,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       };
     });
   }, [contentDimensions, setSize, size2]);
-  useEffect41(() => {
+  useEffect40(() => {
     const resetBinding = keybindings.registerKeybinding({
       event: "keydown",
       key: "0",
@@ -19226,7 +19462,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     const metadata = await getAssetMetadata(canvasContent, canvasContent.type === "asset");
     setAssetResolution(metadata);
   }, [canvasContent]);
-  useEffect41(() => {
+  useEffect40(() => {
     if (canvasContent.type !== "asset") {
       return;
     }
@@ -19237,7 +19473,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
       file.cancel();
     };
   }, [canvasContent, fetchMetadata]);
-  useEffect41(() => {
+  useEffect40(() => {
     fetchMetadata();
   }, [fetchMetadata]);
   const onDragOver = useCallback43((event) => {
@@ -19333,7 +19569,7 @@ var Canvas = ({ canvasContent, size: size2 }) => {
     previewSize,
     size2
   ]);
-  useEffect41(() => {
+  useEffect40(() => {
     if (!canDropAssets) {
       return;
     }
@@ -19382,14 +19618,14 @@ var Canvas = ({ canvasContent, size: size2 }) => {
 };
 
 // src/components/FramePersistor.tsx
-import { useEffect as useEffect42 } from "react";
+import { useEffect as useEffect41 } from "react";
 import { Internals as Internals32, useVideoConfig as useVideoConfig2 } from "remotion";
 var FramePersistor = () => {
   const [playing] = Internals32.Timeline.usePlayingState();
   const config = useVideoConfig2();
   const frame2 = Internals32.Timeline.useTimelinePosition();
   const setFrame = Internals32.useTimelineSetFrame();
-  useEffect42(() => {
+  useEffect41(() => {
     if (!playing) {
       setFrame((f) => {
         const newObj = f[config.id] === frame2 ? f : { ...f, [config.id]: frame2 };
@@ -19489,7 +19725,7 @@ var CanvasOrLoading = ({ size: size2 }) => {
   const { setZoom } = useContext33(TimelineZoomCtx);
   const { canvasContent } = useContext33(Internals33.CompositionManager);
   const { error: renderError } = useContext33(RenderErrorContext);
-  useEffect43(() => {
+  useEffect42(() => {
     if (resolved?.type !== "success" && resolved?.type !== "success-and-refreshing") {
       return;
     }
@@ -19595,11 +19831,7 @@ var CanvasIfSizeIsAvailable = () => {
     if (!size2) {
       return null;
     }
-    return {
-      ...size2,
-      width: size2.width - RULER_WIDTH,
-      height: size2.height - RULER_WIDTH
-    };
+    return applyRulerInsetsToCanvasSize({ rulersAreVisible, size: size2 });
   }, [context, rulersAreVisible]);
   if (!sizeWithRulersApplied) {
     return null;
@@ -19610,7 +19842,7 @@ var CanvasIfSizeIsAvailable = () => {
 };
 
 // src/components/CurrentCompositionSideEffects.tsx
-import { useCallback as useCallback44, useContext as useContext35, useEffect as useEffect44 } from "react";
+import { useCallback as useCallback44, useContext as useContext35, useEffect as useEffect43 } from "react";
 import { Internals as Internals35 } from "remotion";
 
 // src/helpers/document-title.ts
@@ -19668,7 +19900,7 @@ var TitleUpdater = () => {
   const renderQueue = useContext35(RenderQueueContext);
   const { canvasContent } = useContext35(Internals35.CompositionManager);
   const { jobs } = renderQueue;
-  useEffect44(() => {
+  useEffect43(() => {
     if (!canvasContent) {
       setCurrentCanvasContentId(null);
       return;
@@ -19687,7 +19919,7 @@ var TitleUpdater = () => {
     }
     setCurrentCanvasContentId(canvasContent.asset);
   }, [canvasContent]);
-  useEffect44(() => {
+  useEffect43(() => {
     setRenderJobs(jobs);
   }, [jobs]);
   return null;
@@ -19707,7 +19939,7 @@ var CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
     const renderButton = document.getElementById("render-modal-button");
     renderButton.click();
   }, [readOnlyStudio, type, video]);
-  useEffect44(() => {
+  useEffect43(() => {
     const binding = keybindings.registerKeybinding({
       event: "keydown",
       key: "r",
@@ -19725,14 +19957,14 @@ var CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
 };
 
 // src/components/ExplorerPanel.tsx
-import { useCallback as useCallback55, useImperativeHandle as useImperativeHandle10, useState as useState46 } from "react";
+import { useCallback as useCallback55, useImperativeHandle as useImperativeHandle10, useState as useState45 } from "react";
 
 // src/components/AssetSelector.tsx
-import { useCallback as useCallback47, useContext as useContext38, useMemo as useMemo55, useState as useState42 } from "react";
+import { useCallback as useCallback47, useContext as useContext38, useMemo as useMemo55, useState as useState41 } from "react";
 import { Internals as Internals38 } from "remotion";
 
 // src/helpers/use-asset-drag-events.ts
-import { useCallback as useCallback45, useEffect as useEffect45, useMemo as useMemo52, useRef as useRef29 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect44, useMemo as useMemo52, useRef as useRef29 } from "react";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 var isFileDragEvent2 = (event) => {
   return Array.from(event.dataTransfer.types).includes("Files");
@@ -19768,7 +20000,7 @@ function useAssetDragEvents({
       setDropLocation((currentPath) => currentPath === combinedParents ? parentFolder : currentPath);
     }
   }, [combinedParents, dragDepthRef, parentFolder, setDropLocation]);
-  useEffect45(() => {
+  useEffect44(() => {
     if (dropLocation === null) {
       dragDepthRef.current = 0;
     }
@@ -19786,10 +20018,10 @@ import { ASSET_DRAG_MIME_TYPE as ASSET_DRAG_MIME_TYPE3, makeAssetDragData } from
 import {
   useCallback as useCallback46,
   useContext as useContext36,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo53,
   useRef as useRef30,
-  useState as useState40
+  useState as useState39
 } from "react";
 import { Internals as Internals36 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
@@ -20266,7 +20498,7 @@ var AssetFolderItem = ({
   setDropLocation,
   readOnlyStudio
 }) => {
-  const [hovered, setHovered] = useState40(false);
+  const [hovered, setHovered] = useState39(false);
   const openFolderTimerRef = useRef30(null);
   const { isDropDiv, onDragEnter, onDragLeave } = use_asset_drag_events_default({
     name: item.name,
@@ -20401,8 +20633,8 @@ var AssetFolderTree = ({
 };
 var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
   const isMobileLayout = useMobileLayout();
-  const [hovered, setHovered] = useState40(false);
-  const [isDragging, setIsDragging] = useState40(false);
+  const [hovered, setHovered] = useState39(false);
+  const [isDragging, setIsDragging] = useState39(false);
   const { setSidebarCollapsedState } = useContext36(SidebarContext);
   const { setSelectedModal } = useContext36(ModalsContext);
   const confirm = useConfirmationDialog();
@@ -20428,7 +20660,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     setHovered(false);
   }, []);
   const rowRef = useRef30(null);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     maybeScrollAssetSidebarRowIntoView({
       element: rowRef.current,
       assetPath: relativePath,
@@ -20707,7 +20939,7 @@ var formatMediaDuration = (seconds) => {
 // src/helpers/use-media-metadata.ts
 import { getVideoMetadata as getVideoMetadata3 } from "@remotion/media-utils";
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
-import { useEffect as useEffect46, useState as useState41 } from "react";
+import { useEffect as useEffect45, useState as useState40 } from "react";
 
 // src/helpers/get-duration-or-compute.ts
 var getDurationOrCompute = async (input) => {
@@ -20802,8 +21034,8 @@ var getMediaMetadata = (src) => {
   return request;
 };
 var useMediaMetadata = (src) => {
-  const [mediaMetadata, setMediaMetadata] = useState41(src ? cache.get(src) ?? null : null);
-  useEffect46(() => {
+  const [mediaMetadata, setMediaMetadata] = useState40(src ? cache.get(src) ?? null : null);
+  useEffect45(() => {
     const cached = src ? cache.get(src) ?? null : null;
     setMediaMetadata(cached);
     if (!src || cached) {
@@ -20950,7 +21182,7 @@ var AssetSelector = ({ readOnlyStudio }) => {
   const { tabIndex } = useZIndex();
   const { canvasContent } = useContext38(Internals38.CompositionManager);
   const { assetFoldersExpanded, setAssetFoldersExpanded } = useContext38(FolderContext);
-  const [dropLocation, setDropLocation] = useState42(null);
+  const [dropLocation, setDropLocation] = useState41(null);
   const connectionStatus = useContext38(StudioServerConnectionCtx).previewServerState.type;
   const shouldAllowUpload = connectionStatus === "connected" && !readOnlyStudio;
   const showCurrentAsset = canvasContent?.type === "asset";
@@ -21094,10 +21326,10 @@ import { Internals as Internals41 } from "remotion";
 import {
   useCallback as useCallback51,
   useContext as useContext41,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo59,
   useRef as useRef32,
-  useState as useState44
+  useState as useState43
 } from "react";
 
 // src/helpers/is-composition-still.ts
@@ -21153,7 +21385,7 @@ var EllipsisIcon = (props) => {
 
 // src/components/InlineDropdown.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback48, useMemo as useMemo56, useRef as useRef31, useState as useState43 } from "react";
+import { useCallback as useCallback48, useMemo as useMemo56, useRef as useRef31, useState as useState42 } from "react";
 import ReactDOM5 from "react-dom";
 import { jsx as jsx97, jsxs as jsxs45, Fragment as Fragment20 } from "react/jsx-runtime";
 var InlineDropdown = ({
@@ -21161,7 +21393,7 @@ var InlineDropdown = ({
   ...props
 }) => {
   const ref2 = useRef31(null);
-  const [opened, setOpened] = useState43({ type: "not-open" });
+  const [opened, setOpened] = useState42({ type: "not-open" });
   const { currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref2, {
     triggerOnWindowResize: true,
@@ -21593,7 +21825,7 @@ var CompositionSelectorItem = ({
     }
     return false;
   }, [item, currentComposition]);
-  const [hovered, setHovered] = useState44(false);
+  const [hovered, setHovered] = useState43(false);
   const onPointerEnter = useCallback51(() => {
     setHovered(true);
   }, []);
@@ -21602,7 +21834,7 @@ var CompositionSelectorItem = ({
   }, []);
   const compositionRowRef = useRef32(null);
   const compositionId = item.type === "composition" ? item.composition.id : null;
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (compositionId === null) {
       return;
     }
@@ -22064,7 +22296,7 @@ var CompSelectorRef = ({ children }) => {
 };
 
 // src/components/Tabs/index.tsx
-import { useCallback as useCallback54, useMemo as useMemo62, useState as useState45 } from "react";
+import { useCallback as useCallback54, useMemo as useMemo62, useState as useState44 } from "react";
 import { jsx as jsx105 } from "react/jsx-runtime";
 var tabsContainer = {
   display: "flex",
@@ -22098,7 +22330,7 @@ var selectorButton = {
   WebkitUserSelect: "none"
 };
 var Tab = ({ children, onClick, style: style5, selected }) => {
-  const [hovered, setHovered] = useState45(false);
+  const [hovered, setHovered] = useState44(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback54(() => {
     setHovered(true);
@@ -22150,7 +22382,7 @@ var persistSelectedOptionsSidebarPanel = (panel2) => {
   localStorage.setItem(localStorageKey, panel2);
 };
 var ExplorerPanel = ({ readOnlyStudio }) => {
-  const [panel2, setPanel] = useState46(() => getSelectedPanel());
+  const [panel2, setPanel] = useState45(() => getSelectedPanel());
   const onCompositionsSelected = useCallback55(() => {
     setPanel("compositions");
     persistSelectedOptionsSidebarPanel("compositions");
@@ -22252,9 +22484,9 @@ function MobilePanel({
 import React75, {
   useCallback as useCallback56,
   useContext as useContext44,
-  useEffect as useEffect47,
+  useEffect as useEffect46,
   useMemo as useMemo63,
-  useState as useState47
+  useState as useState46
 } from "react";
 import { Internals as Internals43 } from "remotion";
 import { NoReactInternals as NoReactInternals16 } from "remotion/no-react";
@@ -22263,7 +22495,7 @@ var ObserveDefaultPropsContext = React75.createContext(null);
 var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
   const { previewServerState, subscribeToEvent } = useContext44(StudioServerConnectionCtx);
   const { updateProps } = useContext44(Internals43.EditorPropsContext);
-  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState47({});
+  const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = useState46({});
   const canSaveDefaultProps = useMemo63(() => {
     if (compositionId === null) {
       return null;
@@ -22294,7 +22526,7 @@ var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
       }));
     }
   }, [updateProps]);
-  useEffect47(() => {
+  useEffect46(() => {
     if (readOnlyStudio || !clientId || compositionId === null) {
       return;
     }
@@ -22313,7 +22545,7 @@ var ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
       }).catch(() => {});
     };
   }, [readOnlyStudio, clientId, compositionId, applyResult]);
-  useEffect47(() => {
+  useEffect46(() => {
     const unsub = subscribeToEvent("default-props-updatable-changed", (e) => {
       if (e.type !== "default-props-updatable-changed") {
         return;
@@ -22341,7 +22573,7 @@ import {
   useContext as useContext62,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo109,
-  useState as useState65
+  useState as useState64
 } from "react";
 import { Internals as Internals47 } from "remotion";
 
@@ -22350,11 +22582,11 @@ import {
   createContext as createContext20,
   createRef as createRef9,
   useCallback as useCallback57,
-  useEffect as useEffect49,
+  useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo65,
   useRef as useRef33,
-  useState as useState49
+  useState as useState48
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
@@ -22377,9 +22609,9 @@ function getZodSchemaFromPrimitive(value, z) {
 import {
   createContext as createContext19,
   useContext as useContext45,
-  useEffect as useEffect48,
+  useEffect as useEffect47,
   useMemo as useMemo64,
-  useState as useState48
+  useState as useState47
 } from "react";
 import { jsx as jsx109 } from "react/jsx-runtime";
 async function getZodIfPossible() {
@@ -22416,16 +22648,16 @@ var useZodTypesIfPossible = () => {
 };
 var ZodContext = createContext19(null);
 var ZodProvider = ({ children }) => {
-  const [zod, setZod] = useState48(null);
-  const [zodV3, setZodV3] = useState48(null);
-  const [zodTypes, setZodTypes] = useState48(null);
-  useEffect48(() => {
+  const [zod, setZod] = useState47(null);
+  const [zodV3, setZodV3] = useState47(null);
+  const [zodTypes, setZodTypes] = useState47(null);
+  useEffect47(() => {
     getZodIfPossible().then((z) => setZod(z));
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     getZodV3IfPossible().then((z) => setZodV3(z));
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     getZTypesIfPossible().then((z) => setZodTypes(z));
   }, []);
   const contextValue = useMemo64(() => {
@@ -22494,7 +22726,7 @@ var SetVisualControlsContext = createContext20({
 });
 var VisualControlsProvider = ({ children }) => {
   const imperativeHandles = useRef33({});
-  const [handles, setHandles] = useState49({});
+  const [handles, setHandles] = useState48({});
   const state = useMemo65(() => {
     return {
       handles
@@ -22563,7 +22795,7 @@ var VisualControlsProvider = ({ children }) => {
       globalVisualControl: visualControl
     };
   }, [visualControl]);
-  useEffect49(() => {
+  useEffect48(() => {
     const callback = () => {
       if (imperativeHandles.current) {
         updateHandles();
@@ -22599,7 +22831,7 @@ var VisualControlsProvider = ({ children }) => {
 import { useContext as useContext49 } from "react";
 
 // src/components/RenderModal/DataEditor.tsx
-import React109, { useCallback as useCallback86, useContext as useContext48, useMemo as useMemo98, useState as useState60 } from "react";
+import React109, { useCallback as useCallback86, useContext as useContext48, useMemo as useMemo98, useState as useState59 } from "react";
 import { getInputProps } from "remotion";
 import { NoReactInternals as NoReactInternals20 } from "remotion/no-react";
 
@@ -22665,7 +22897,7 @@ var ValidationMessage = ({ message, align, type, action }) => {
 };
 
 // src/components/SegmentedControl.tsx
-import { useCallback as useCallback58, useMemo as useMemo67, useState as useState50 } from "react";
+import { useCallback as useCallback58, useMemo as useMemo67, useState as useState49 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
 var container26 = {
   display: "flex",
@@ -22714,7 +22946,7 @@ var SegmentedControl = ({ items, needsWrapping }) => {
   });
 };
 var Item = ({ selected, onClick, children }) => {
-  const [hovered, setHovered] = useState50(false);
+  const [hovered, setHovered] = useState49(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback58(() => {
     setHovered(true);
@@ -22822,7 +23054,7 @@ var getRenderModalWarnings = ({
 };
 
 // src/components/RenderModal/RenderModalJSONPropsEditor.tsx
-import React81, { useCallback as useCallback59, useEffect as useEffect50, useMemo as useMemo69 } from "react";
+import React81, { useCallback as useCallback59, useEffect as useEffect49, useMemo as useMemo69 } from "react";
 import { useContext as useContext46 } from "react";
 import { NoReactInternals as NoReactInternals18 } from "remotion/no-react";
 
@@ -23155,7 +23387,7 @@ var RenderModalJSONPropsEditor = ({
   const [localValue, setLocalValue] = React81.useState(() => {
     return parseJSON(serializedJSON.serializedString, schema);
   });
-  useEffect50(() => {
+  useEffect49(() => {
     const unsub = subscribeToEvent("default-props-updatable-changed", (e) => {
       if (e.type !== "default-props-updatable-changed") {
         return;
@@ -23174,7 +23406,7 @@ var RenderModalJSONPropsEditor = ({
       unsub();
     };
   }, [subscribeToEvent, compositionId, schema]);
-  useEffect50(() => {
+  useEffect49(() => {
     setLocalValue((prev) => {
       if (prev.validJSON && deepEqual(value, prev.value)) {
         return prev;
@@ -23207,7 +23439,7 @@ var RenderModalJSONPropsEditor = ({
       onSave();
     }
   }, [hasChanged, hasError, onSave]);
-  useEffect50(() => {
+  useEffect49(() => {
     setLocalValue((v) => parseJSON(v.str, schema));
   }, [schema]);
   const reset = useCallback59(() => {
@@ -23656,7 +23888,7 @@ var Fieldset = ({ children, shouldPad }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaLabel.tsx
-import { useCallback as useCallback61, useMemo as useMemo71, useState as useState51 } from "react";
+import { useCallback as useCallback61, useMemo as useMemo71, useState as useState50 } from "react";
 
 // src/components/RenderModal/InlineRemoveButton.tsx
 import { useCallback as useCallback60 } from "react";
@@ -23708,7 +23940,7 @@ var compactStyles = {
   flex: 1
 };
 var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick }) => {
-  const [clickableButtonHovered, setClickableButtonHovered] = useState51(false);
+  const [clickableButtonHovered, setClickableButtonHovered] = useState50(false);
   const labelStyle4 = useMemo71(() => {
     return {
       fontFamily: "monospace",
@@ -23754,7 +23986,7 @@ var SchemaLabel = ({ jsonPath, onRemove, valid, suffix: suffix2, handleClick })
 
 // src/components/RenderModal/SchemaEditor/ZodObjectEditor.tsx
 import { useCallback as useCallback84 } from "react";
-import React107, { useMemo as useMemo95, useState as useState59 } from "react";
+import React107, { useMemo as useMemo95, useState as useState58 } from "react";
 
 // src/components/RenderModal/layout.ts
 var optionRow = {
@@ -23800,7 +24032,7 @@ var fieldsetLabel = {
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaSeparationLine.tsx
-import { useCallback as useCallback62, useMemo as useMemo72, useState as useState52 } from "react";
+import { useCallback as useCallback62, useMemo as useMemo72, useState as useState51 } from "react";
 
 // src/icons/plus.tsx
 import { jsx as jsx119 } from "react/jsx-runtime";
@@ -23835,8 +24067,8 @@ var arraySeparationLine = {
   flexBasis: "100%"
 };
 var SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAddButton }) => {
-  const [outerHovered, setOuterHovered] = useState52(false);
-  const [innerHovered, setInnerHovered] = useState52(false);
+  const [outerHovered, setOuterHovered] = useState51(false);
+  const [innerHovered, setInnerHovered] = useState51(false);
   const zodTypes = useZodTypesIfPossible();
   const z = useZodIfPossible();
   if (!z) {
@@ -23976,7 +24208,7 @@ var SchemaVerticalGuide = ({ isRoot, children }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodArrayEditor.tsx
-import React89, { useCallback as useCallback65, useMemo as useMemo77, useState as useState54 } from "react";
+import React89, { useCallback as useCallback65, useMemo as useMemo77, useState as useState53 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodArrayItemEditor.tsx
 import { useCallback as useCallback63, useMemo as useMemo74 } from "react";
@@ -24013,7 +24245,7 @@ var ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, may
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals12 } from "@remotion/player";
-import { useCallback as useCallback64, useEffect as useEffect51, useMemo as useMemo76, useRef as useRef34, useState as useState53 } from "react";
+import { useCallback as useCallback64, useEffect as useEffect50, useMemo as useMemo76, useRef as useRef34, useState as useState52 } from "react";
 import ReactDOM7 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -24096,8 +24328,8 @@ var container27 = {
   verticalAlign: "text-bottom"
 };
 var InfoBubble = ({ title: title4, children }) => {
-  const [hovered, setIsHovered] = useState53(false);
-  const [opened, setOpened] = useState53(false);
+  const [hovered, setIsHovered] = useState52(false);
+  const [opened, setOpened] = useState52(false);
   const ref2 = useRef34(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals12.useElementSize(ref2, {
@@ -24108,7 +24340,7 @@ var InfoBubble = ({ title: title4, children }) => {
   const onHide = useCallback64(() => {
     setOpened(false);
   }, []);
-  useEffect51(() => {
+  useEffect50(() => {
     const { current } = ref2;
     if (!current) {
       return;
@@ -24284,7 +24516,7 @@ var ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
   const onChange = useCallback65((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
-  const [expanded, setExpanded] = useState54(true);
+  const [expanded, setExpanded] = useState53(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo77(() => {
     return expanded ? " [" : " [...] ";
@@ -24356,7 +24588,7 @@ var ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
 import { useCallback as useCallback66 } from "react";
 
 // src/components/Checkbox.tsx
-import { useEffect as useEffect52, useMemo as useMemo78, useRef as useRef35 } from "react";
+import { useEffect as useEffect51, useMemo as useMemo78, useRef as useRef35 } from "react";
 import { jsx as jsx127, jsxs as jsxs62 } from "react/jsx-runtime";
 var SIZES = {
   default: 20,
@@ -24411,7 +24643,7 @@ var Checkbox = ({ checked, onChange, disabled, name, rounded, variant = "default
       margin: 0
     };
   }, [disabled, size2]);
-  useEffect52(() => {
+  useEffect51(() => {
     if (ref2.current) {
       ref2.current.style.setProperty("border-radius", rounded ? "50%" : "0%", "important");
     }
@@ -24477,7 +24709,7 @@ import { useCallback as useCallback72, useMemo as useMemo84 } from "react";
 
 // src/components/ColorPicker/ColorPicker.tsx
 import { PlayerInternals as PlayerInternals13 } from "@remotion/player";
-import { useCallback as useCallback71, useEffect as useEffect54, useMemo as useMemo83, useRef as useRef40, useState as useState56 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect53, useMemo as useMemo83, useRef as useRef40, useState as useState55 } from "react";
 import ReactDOM8 from "react-dom";
 
 // src/components/ColorPicker/checker.ts
@@ -24487,7 +24719,7 @@ var CHECKER_BACKGROUND_POSITION = "0 0, 0 4px, 4px -4px, -4px 0";
 var CHECKER_BACKGROUND_COLOR = "#444";
 
 // src/components/ColorPicker/ColorPickerPopup.tsx
-import { useCallback as useCallback70, useEffect as useEffect53, useMemo as useMemo82, useRef as useRef39, useState as useState55 } from "react";
+import { useCallback as useCallback70, useEffect as useEffect52, useMemo as useMemo82, useRef as useRef39, useState as useState54 } from "react";
 
 // src/helpers/color-conversion.ts
 import { NoReactInternals as NoReactInternals19 } from "remotion/no-react";
@@ -24977,9 +25209,9 @@ var ChannelInput = ({
   max,
   onCommit
 }) => {
-  const [draft, setDraft] = useState55(String(Math.round(value)));
+  const [draft, setDraft] = useState54(String(Math.round(value)));
   const { tabIndex } = useZIndex();
-  useEffect53(() => {
+  useEffect52(() => {
     setDraft(String(Math.round(value)));
   }, [value]);
   const onChange = useCallback70((e) => {
@@ -25021,9 +25253,9 @@ var ChannelInput = ({
   });
 };
 var HexInput = ({ value, onCommit }) => {
-  const [draft, setDraft] = useState55(value);
+  const [draft, setDraft] = useState54(value);
   const { tabIndex } = useZIndex();
-  useEffect53(() => {
+  useEffect52(() => {
     setDraft(value);
   }, [value]);
   const onChange = useCallback70((e) => {
@@ -25071,9 +25303,9 @@ var HexInput = ({ value, onCommit }) => {
 };
 var ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
   const { tabIndex } = useZIndex();
-  const [hsva, setHsva] = useState55(() => rgbaToHsva(parseAnyColor(value)));
+  const [hsva, setHsva] = useState54(() => rgbaToHsva(parseAnyColor(value)));
   const lastEmittedRef = useRef39(formatRgba(parseAnyColor(value)));
-  useEffect53(() => {
+  useEffect52(() => {
     const incoming = formatRgba(parseAnyColor(value));
     if (incoming === lastEmittedRef.current) {
       return;
@@ -25287,7 +25519,7 @@ var ColorPicker = ({
   className: className2,
   style: customStyle
 }) => {
-  const [opened, setOpened] = useState56(false);
+  const [opened, setOpened] = useState55(false);
   const triggerRef = useRef40(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals13.useElementSize(triggerRef, {
@@ -25370,7 +25602,7 @@ var ColorPicker = ({
       boxShadow: "none"
     };
   }, [opened, size2]);
-  useEffect54(() => {
+  useEffect53(() => {
     if (!opened) {
       return;
     }
@@ -25673,7 +25905,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
 };
 
 // src/components/RenderModal/SchemaEditor/ZodMatrixEditor.tsx
-import React101, { useMemo as useMemo88, useState as useState57 } from "react";
+import React101, { useMemo as useMemo88, useState as useState56 } from "react";
 import { useCallback as useCallback76 } from "react";
 import { jsx as jsx140, jsxs as jsxs72 } from "react/jsx-runtime";
 var rowStyle = {
@@ -25686,7 +25918,7 @@ var ZodMatrixEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo88(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState57(true);
+  const [expanded, setExpanded] = useState56(true);
   const arrayElement = getArrayElement(schema);
   const suffix2 = useMemo88(() => {
     return expanded ? " [" : " [...] ";
@@ -26182,7 +26414,7 @@ var ZodTextareaEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }
 };
 
 // src/components/RenderModal/SchemaEditor/ZodTupleEditor.tsx
-import React106, { useCallback as useCallback83, useMemo as useMemo94, useState as useState58 } from "react";
+import React106, { useCallback as useCallback83, useMemo as useMemo94, useState as useState57 } from "react";
 
 // src/components/RenderModal/SchemaEditor/ZodTupleItemEditor.tsx
 import { useCallback as useCallback82, useMemo as useMemo93 } from "react";
@@ -26219,7 +26451,7 @@ var ZodTupleEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
     setValue(updater, { shouldSave });
   }, [setValue]);
   const zodValidation = useMemo94(() => zodSafeParse(schema, value), [schema, value]);
-  const [expanded, setExpanded] = useState58(true);
+  const [expanded, setExpanded] = useState57(true);
   const tupleItems = getTupleItems(schema);
   const suffix2 = useMemo94(() => {
     return expanded ? " [" : " [...] ";
@@ -26608,7 +26840,7 @@ var ZodObjectEditor = ({
   mayPad,
   discriminatedUnionReplacement
 }) => {
-  const [expanded, setExpanded] = useState59(true);
+  const [expanded, setExpanded] = useState58(true);
   const onChange = useCallback84((updater, { shouldSave }) => {
     setValue(updater, { shouldSave });
   }, [setValue]);
@@ -26924,8 +27156,8 @@ var DataEditor = ({
   propsEditType,
   canSaveDefaultProps
 }) => {
-  const [mode, setMode] = useState60("schema");
-  const [showWarning, setShowWarningWithoutPersistance] = useState60(() => getPersistedShowWarningState());
+  const [mode, setMode] = useState59("schema");
+  const [showWarning, setShowWarningWithoutPersistance] = useState59(() => getPersistedShowWarningState());
   const jsonEditorSetValue = useCallback86((newProps) => {
     setDefaultProps(typeof newProps === "function" ? newProps : () => newProps, { shouldSave: false });
   }, [setDefaultProps]);
@@ -27337,16 +27569,16 @@ var SchemaResetButton = ({ onClick }) => {
 };
 
 // src/components/RenderQueue/index.tsx
-import React121, { useContext as useContext58, useEffect as useEffect57, useMemo as useMemo106 } from "react";
+import React121, { useContext as useContext58, useEffect as useEffect56, useMemo as useMemo106 } from "react";
 import { Internals as Internals46 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
   useCallback as useCallback98,
   useContext as useContext57,
-  useEffect as useEffect56,
+  useEffect as useEffect55,
   useMemo as useMemo105,
-  useState as useState61
+  useState as useState60
 } from "react";
 import { Internals as Internals45 } from "remotion";
 
@@ -27447,7 +27679,7 @@ import { useCallback as useCallback90, useMemo as useMemo99 } from "react";
 
 // src/components/RenderQueue/ClientRenderQueueProcessor.tsx
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback89, useContext as useContext50, useEffect as useEffect55 } from "react";
+import { useCallback as useCallback89, useContext as useContext50, useEffect as useEffect54 } from "react";
 
 // src/api/save-render-output.ts
 var throwIfNotOk = async (response) => {
@@ -27647,7 +27879,7 @@ var ClientRenderQueueProcessor = () => {
     markClientJobFailed,
     markClientJobCancelled
   ]);
-  useEffect55(() => {
+  useEffect54(() => {
     setProcessJobCallback(processJob);
     return () => setProcessJobCallback(null);
   }, [processJob, setProcessJobCallback]);
@@ -28356,7 +28588,7 @@ var subtitle3 = {
 };
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
-  const [hovered, setHovered] = useState61(false);
+  const [hovered, setHovered] = useState60(false);
   const { setCanvasContent } = useContext57(Internals45.CompositionSetters);
   const isClientJob = isClientRenderJob(job);
   const onPointerEnter = useCallback98(() => {
@@ -28433,7 +28665,7 @@ var RenderQueueItem = ({ job, selected }) => {
     selected,
     setCanvasContent
   ]);
-  useEffect56(() => {
+  useEffect55(() => {
     if (selected) {
       scrollCurrentIntoView();
     }
@@ -28529,7 +28761,7 @@ var RenderQueue = () => {
   const previousJobCount = React121.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React121.useRef(null);
-  useEffect57(() => {
+  useEffect56(() => {
     if (!divRef.current) {
       return;
     }
@@ -28666,7 +28898,7 @@ var RendersTab = ({ selected, onClick }) => {
 import React124, { useContext as useContext61 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
-import { useCallback as useCallback100, useContext as useContext60, useEffect as useEffect59, useState as useState64 } from "react";
+import { useCallback as useCallback100, useContext as useContext60, useEffect as useEffect58, useState as useState63 } from "react";
 import { NoReactInternals as NoReactInternals22 } from "remotion/no-react";
 
 // src/fast-refresh-context.ts
@@ -28678,10 +28910,10 @@ var FastRefreshContext = createContext22({
 });
 
 // src/components/VisualControls/get-original-stack-trace.ts
-import { useEffect as useEffect58, useState as useState62 } from "react";
+import { useEffect as useEffect57, useState as useState61 } from "react";
 var useOriginalFileName = (stack2) => {
-  const [originalFileName, setOriginalFileName] = useState62({ type: "loading" });
-  useEffect58(() => {
+  const [originalFileName, setOriginalFileName] = useState61({ type: "loading" });
+  useEffect57(() => {
     if (!stack2) {
       return;
     }
@@ -28702,7 +28934,7 @@ var useOriginalFileName = (stack2) => {
 };
 
 // src/components/VisualControls/ClickableFileName.tsx
-import { useCallback as useCallback99, useMemo as useMemo108, useState as useState63 } from "react";
+import { useCallback as useCallback99, useMemo as useMemo108, useState as useState62 } from "react";
 
 // src/components/Timeline/TimelineStack/source-attribution.ts
 var getOriginalSourceAttribution = (originalLocation) => {
@@ -28727,7 +28959,7 @@ var container32 = {
 var ClickableFileName = ({
   originalFileName
 }) => {
-  const [titleHovered, setTitleHovered] = useState63(false);
+  const [titleHovered, setTitleHovered] = useState62(false);
   const hoverEffect = titleHovered && originalFileName.type === "loaded";
   const onTitlePointerEnter = useCallback99(() => {
     setTitleHovered(true);
@@ -28780,7 +29012,7 @@ var VisualControlHandle = ({ value, keyName }) => {
   const state = useContext60(VisualControlsContext);
   const { updateValue } = useContext60(SetVisualControlsContext);
   const { fastRefreshes, increaseManualRefreshes } = useContext60(FastRefreshContext);
-  const [_saving, setSaving] = useState64(false);
+  const [_saving, setSaving] = useState63(false);
   const currentValue = getVisualControlEditedValue({
     handles: state.handles,
     key: keyName
@@ -28832,7 +29064,7 @@ var VisualControlHandle = ({ value, keyName }) => {
     keyName,
     zodTypes
   ]);
-  useEffect59(() => {
+  useEffect58(() => {
     setSaving(false);
   }, [fastRefreshes]);
   const setValue = useCallback100((updater, { shouldSave }) => {
@@ -28924,7 +29156,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
     flexDirection: "column",
     flex: 1
   }), [isMobileLayout]);
-  const [panel2, setPanel] = useState65(() => getSelectedPanel2(renderingAvailable));
+  const [panel2, setPanel] = useState64(() => getSelectedPanel2(renderingAvailable));
   const onPropsSelected = useCallback101(() => {
     setPanel("input-props");
     persistSelectedOptionsSidebarPanel2("input-props");
@@ -29089,9 +29321,9 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 import {
   useCallback as useCallback111,
   useContext as useContext70,
-  useEffect as useEffect65,
+  useEffect as useEffect64,
   useRef as useRef43,
-  useState as useState69
+  useState as useState68
 } from "react";
 import { Internals as Internals56 } from "remotion";
 
@@ -29166,11 +29398,11 @@ var CheckboardToggle = () => {
 
 // src/components/FpsCounter.tsx
 import {
-  useEffect as useEffect60,
-  useLayoutEffect as useLayoutEffect4,
+  useEffect as useEffect59,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo110,
   useRef as useRef41,
-  useState as useState66
+  useState as useState65
 } from "react";
 import { Internals as Internals49 } from "remotion";
 import { jsxs as jsxs90 } from "react/jsx-runtime";
@@ -29188,17 +29420,17 @@ var FpsCounter = ({ playbackSpeed }) => {
   const videoConfig = Internals49.useUnsafeVideoConfig();
   const [playing] = Internals49.Timeline.usePlayingState();
   const frame2 = Internals49.Timeline.useTimelinePosition();
-  const [marker, rerender] = useState66({});
-  const [fps, setFps] = useState66(0);
+  const [marker, rerender] = useState65({});
+  const [fps, setFps] = useState65(0);
   const previousUpdates = useRef41([]);
   const fpsRef = useRef41(0);
   const playingRef = useRef41(playing);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
     playingRef.current = playing;
   }, [playing]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (playingRef.current === false)
       return;
     previousUpdates.current = pushWithMaxSize(previousUpdates.current, performance.now(), 15);
@@ -29210,7 +29442,7 @@ var FpsCounter = ({ playbackSpeed }) => {
     if (previousUpdates.current.length === 2)
       setFps(fpsRef.current);
   }, [frame2]);
-  useEffect60(() => {
+  useEffect59(() => {
     if (playing) {
       const t = setTimeout(() => {
         rerender({});
@@ -29248,7 +29480,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import { useCallback as useCallback103, useContext as useContext65, useEffect as useEffect61 } from "react";
+import { useCallback as useCallback103, useContext as useContext65, useEffect as useEffect60 } from "react";
 import { Internals as Internals50 } from "remotion";
 import { NoReactInternals as NoReactInternals24 } from "remotion/no-react";
 import { jsx as jsx182 } from "react/jsx-runtime";
@@ -29270,7 +29502,7 @@ var FullScreenToggle = () => {
         }
       }));
   }, [setSize]);
-  useEffect61(() => {
+  useEffect60(() => {
     const f = keybindings.registerKeybinding({
       event: "keydown",
       key: "f",
@@ -29411,7 +29643,7 @@ var OutlineToggle = () => {
 
 // src/components/PlaybackKeyboardShortcutsManager.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback107, useEffect as useEffect62 } from "react";
+import { useCallback as useCallback107, useEffect as useEffect61 } from "react";
 var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
   const keybindings = useKeybinding();
   const { play, pause, playing } = PlayerInternals14.usePlayer();
@@ -29449,7 +29681,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     });
     play();
   }, [play, playing, setPlaybackRate]);
-  useEffect62(() => {
+  useEffect61(() => {
     const jKey = keybindings.registerKeybinding({
       event: "keydown",
       key: "j",
@@ -29487,7 +29719,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 };
 
 // src/components/PlaybackRatePersistor.tsx
-import { useEffect as useEffect63 } from "react";
+import { useEffect as useEffect62 } from "react";
 import { Internals as Internals51 } from "remotion";
 
 // src/state/playbackrate.ts
@@ -29509,10 +29741,10 @@ var loadPlaybackRate = () => {
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
   const { setPlaybackRate, playbackRate } = Internals51.usePlaybackRate();
-  useEffect63(() => {
+  useEffect62(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
-  useEffect63(() => {
+  useEffect62(() => {
     persistPlaybackRate(playbackRate);
   }, [playbackRate]);
   return null;
@@ -29591,7 +29823,7 @@ var PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
 
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useCallback as useCallback108, useEffect as useEffect64, useState as useState67 } from "react";
+import { useCallback as useCallback108, useEffect as useEffect63, useState as useState66 } from "react";
 import { Internals as Internals53 } from "remotion";
 
 // src/icons/jump-to-start.tsx
@@ -29688,7 +29920,7 @@ var iconButton = {
 var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const videoConfig = Internals53.useUnsafeVideoConfig();
-  const [showBufferIndicator, setShowBufferState] = useState67(false);
+  const [showBufferIndicator, setShowBufferState] = useState66(false);
   const {
     playing,
     play,
@@ -29715,7 +29947,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
     muted
   });
   const isStill = useIsStill();
-  useEffect64(() => {
+  useEffect63(() => {
     if (isStill) {
       pause();
     }
@@ -29757,7 +29989,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
     seek(outFrame ?? getCurrentDuration() - 1);
   }, [seek, outFrame]);
   const keybindings = useKeybinding();
-  useEffect64(() => {
+  useEffect63(() => {
     const commandArrowLeft = keybindings.registerKeybinding({
       event: "keydown",
       key: "ArrowLeft",
@@ -29829,7 +30061,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
     oneFrameBack,
     oneFrameForward
   ]);
-  useEffect64(() => {
+  useEffect63(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -29911,7 +30143,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted })
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
-import { useCallback as useCallback109, useContext as useContext68, useMemo as useMemo112, useRef as useRef42, useState as useState68 } from "react";
+import { useCallback as useCallback109, useContext as useContext68, useMemo as useMemo112, useRef as useRef42, useState as useState67 } from "react";
 import ReactDOM9 from "react-dom";
 import { Internals as Internals54 } from "remotion";
 import { jsx as jsx194, jsxs as jsxs92, Fragment as Fragment29 } from "react/jsx-runtime";
@@ -29983,8 +30215,8 @@ var RenderButton = ({
 }) => {
   const { inFrame, outFrame } = useTimelineInOutFramePosition();
   const { setSelectedModal } = useContext68(ModalsContext);
-  const [preferredRenderType, setPreferredRenderType] = useState68(() => getInitialRenderType(readOnlyStudio));
-  const [dropdownOpened, setDropdownOpened] = useState68(false);
+  const [preferredRenderType, setPreferredRenderType] = useState67(() => getInitialRenderType(readOnlyStudio));
+  const [dropdownOpened, setDropdownOpened] = useState67(false);
   const dropdownRef = useRef42(null);
   const containerRef = useRef42(null);
   const { currentZIndex } = useZIndex();
@@ -30561,10 +30793,10 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const leftScrollIndicatorRef = useRef43(null);
   const rightScrollIndicatorRef = useRef43(null);
   const isStill = useIsStill();
-  const [loop, setLoop] = useState69(loadLoopOption());
+  const [loop, setLoop] = useState68(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect65(() => {
+  useEffect64(() => {
     if (!isMobileLayout) {
       if (leftScrollIndicatorRef.current) {
         leftScrollIndicatorRef.current.style.display = "none";
@@ -30757,7 +30989,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 
 // src/components/Splitter/SplitterContainer.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
-import { useEffect as useEffect66, useMemo as useMemo113, useRef as useRef44, useState as useState70 } from "react";
+import { useEffect as useEffect65, useMemo as useMemo113, useRef as useRef44, useState as useState69 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey3 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -30811,7 +31043,7 @@ var containerColumn = {
 };
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
-  const [flexValue, setFlexValue] = useState70(initialTimelineFlex ?? defaultFlex);
+  const [flexValue, setFlexValue] = useState69(initialTimelineFlex ?? defaultFlex);
   const ref2 = useRef44(null);
   const isDragging = useRef44(false);
   const value = useMemo113(() => {
@@ -30837,7 +31069,7 @@ var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex,
     persistFlex,
     ref2
   ]);
-  useEffect66(() => {
+  useEffect65(() => {
     const frame2 = requestAnimationFrame(() => {
       PlayerInternals17.updateAllElementsSizes();
     });
@@ -30894,7 +31126,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useContext as useContext72, useEffect as useEffect67, useRef as useRef45 } from "react";
+import { useContext as useContext72, useEffect as useEffect66, useRef as useRef45 } from "react";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -30911,7 +31143,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
   const ref2 = useRef45(null);
   const latest = useRef45({ context, allowToCollapse, onCollapse });
   latest.current = { context, allowToCollapse, onCollapse };
-  useEffect67(() => {
+  useEffect66(() => {
     const { current } = ref2;
     if (!current) {
       return;
@@ -30985,7 +31217,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       endDrag?.();
     };
   }, []);
-  useEffect67(() => {
+  useEffect66(() => {
     const { current } = ref2;
     if (!current) {
       return;
@@ -31073,7 +31305,7 @@ var TopPanelInner = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferState
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect68(() => {
+  useEffect67(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo115(() => ({
@@ -31248,7 +31480,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect69(() => {
+  useEffect68(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -31326,9 +31558,9 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback114,
   useContext as useContext75,
-  useEffect as useEffect70,
+  useEffect as useEffect69,
   useRef as useRef46,
-  useState as useState71
+  useState as useState70
 } from "react";
 
 // src/icons/redo.tsx
@@ -31364,13 +31596,13 @@ var iconStyle5 = {
   height: 16
 };
 var UndoRedoButtons = () => {
-  const [undoFile, setUndoFile] = useState71(null);
-  const [redoFile, setRedoFile] = useState71(null);
+  const [undoFile, setUndoFile] = useState70(null);
+  const [redoFile, setRedoFile] = useState70(null);
   const { subscribeToEvent } = useContext75(StudioServerConnectionCtx);
   const keybindings = useKeybinding();
   const undoInFlight = useRef46(false);
   const redoInFlight = useRef46(false);
-  useEffect70(() => {
+  useEffect69(() => {
     const unsub = subscribeToEvent("undo-redo-stack-changed", (event) => {
       if (event.type !== "undo-redo-stack-changed") {
         return;
@@ -31398,7 +31630,7 @@ var UndoRedoButtons = () => {
       redoInFlight.current = false;
     });
   }, []);
-  useEffect70(() => {
+  useEffect69(() => {
     const undo = keybindings.registerKeybinding({
       event: "keydown",
       key: "z",
@@ -31472,9 +31704,9 @@ var UndoRedoButtons = () => {
 import {
   useCallback as useCallback115,
   useContext as useContext76,
-  useEffect as useEffect71,
+  useEffect as useEffect70,
   useMemo as useMemo116,
-  useState as useState72
+  useState as useState71
 } from "react";
 import { VERSION } from "remotion";
 import { jsx as jsx206 } from "react/jsx-runtime";
@@ -31490,10 +31722,10 @@ var buttonStyle4 = {
   justifyContent: "center"
 };
 var UpdateCheck = () => {
-  const [info, setInfo] = useState72(null);
+  const [info, setInfo] = useState71(null);
   const { setSelectedModal } = useContext76(ModalsContext);
   const { tabIndex } = useZIndex();
-  const [knownBugs, setKnownBugs] = useState72(null);
+  const [knownBugs, setKnownBugs] = useState71(null);
   const hasKnownBugs = useMemo116(() => {
     return knownBugs && knownBugs.length > 0;
   }, [knownBugs]);
@@ -31524,7 +31756,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect71(() => {
+  useEffect70(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -31574,13 +31806,16 @@ var UpdateCheck = () => {
 
 // src/components/MenuToolbar.tsx
 import { jsx as jsx207, jsxs as jsxs99 } from "react/jsx-runtime";
+var MENU_TOOLBAR_HEIGHT = 30;
 var row6 = {
   alignItems: "center",
   flexDirection: "row",
   display: "flex",
   color: "white",
   borderBottom: "1px solid black",
+  boxSizing: "border-box",
   fontSize: 13,
+  height: MENU_TOOLBAR_HEIGHT,
   paddingLeft: 6,
   paddingRight: 10,
   backgroundColor: BACKGROUND
@@ -31589,7 +31824,7 @@ var flex2 = {
   flex: 1
 };
 var MenuToolbar = ({ readOnlyStudio }) => {
-  const [selected, setSelected] = useState73(null);
+  const [selected, setSelected] = useState72(null);
   const mobileLayout = useMobileLayout();
   const fixedWidthRight = useMemo117(() => {
     return {
@@ -31699,7 +31934,7 @@ var MenuToolbar = ({ readOnlyStudio }) => {
 };
 
 // src/components/Timeline/Timeline.tsx
-import React191, { useCallback as useCallback145, useContext as useContext105, useMemo as useMemo160, useState as useState91 } from "react";
+import React191, { useCallback as useCallback145, useContext as useContext105, useMemo as useMemo160, useState as useState90 } from "react";
 import { Internals as Internals84 } from "remotion";
 
 // src/components/Timeline/MaxTimelineTracks.tsx
@@ -31731,12 +31966,12 @@ var MaxTimelineTracksReached = () => {
 };
 
 // src/components/Timeline/SequencePropsObserver.tsx
-import { useContext as useContext77, useEffect as useEffect72 } from "react";
+import { useContext as useContext77, useEffect as useEffect71 } from "react";
 import { Internals as Internals58 } from "remotion";
 var SequencePropsObserver = () => {
   const { subscribeToEvent } = useContext77(StudioServerConnectionCtx);
   const { setPropStatuses } = useContext77(Internals58.VisualModeSettersContext);
-  useEffect72(() => {
+  useEffect71(() => {
     const handleEvent = (event) => {
       if (event.type !== "sequence-props-updated") {
         return;
@@ -31770,7 +32005,7 @@ import { useMemo as useMemo120 } from "react";
 import { NoReactInternals as NoReactInternals25 } from "remotion/no-react";
 
 // src/components/Timeline/use-resolved-stack-react-to-change.ts
-import { useContext as useContext78, useEffect as useEffect73, useRef as useRef47, useState as useState74 } from "react";
+import { useContext as useContext78, useEffect as useEffect72, useRef as useRef47, useState as useState73 } from "react";
 var matchesLostNodePathEvent = (event, location2) => {
   if (!location2?.source || !location2.line) {
     return false;
@@ -31779,11 +32014,11 @@ var matchesLostNodePathEvent = (event, location2) => {
 };
 var useResolveStackAndReactToChange = (getStack) => {
   const { subscribeToEvent } = useContext78(StudioServerConnectionCtx);
-  const [stack2, setStack] = useState74(() => getStack());
+  const [stack2, setStack] = useState73(() => getStack());
   const resolvedLocation = useResolvedStack(stack2);
   const resolvedLocationRef = useRef47(resolvedLocation);
   resolvedLocationRef.current = resolvedLocation;
-  useEffect73(() => {
+  useEffect72(() => {
     let interval = null;
     const handleEvent = (event) => {
       if (event.type !== "lost-node-path") {
@@ -31823,11 +32058,11 @@ import {
   getAllSchemaKeys as getAllSchemaKeys2,
   stringifySequenceSubscriptionKey as stringifySequenceSubscriptionKey3
 } from "@remotion/studio-shared";
-import { useContext as useContext79, useEffect as useEffect74, useMemo as useMemo119, useRef as useRef48 } from "react";
+import { useContext as useContext79, useEffect as useEffect73, useMemo as useMemo119, useRef as useRef48 } from "react";
 import { Internals as Internals60 } from "remotion";
 
 // src/components/ExpandedTracksProvider.tsx
-import { createContext as createContext23, useCallback as useCallback117, useMemo as useMemo118, useState as useState75 } from "react";
+import { createContext as createContext23, useCallback as useCallback117, useMemo as useMemo118, useState as useState74 } from "react";
 
 // src/helpers/migrate-expanded-tracks-for-subscription-key.ts
 import { stringifySequenceExpandedRowKey as stringifySequenceExpandedRowKey3 } from "@remotion/studio-shared";
@@ -31873,7 +32108,7 @@ var ExpandedTracksSetterContext = createContext23({
   }
 });
 var ExpandedTracksProvider = ({ children }) => {
-  const [expandedTracks, setExpandedTracks] = useState75(loadExpandedTracks);
+  const [expandedTracks, setExpandedTracks] = useState74(loadExpandedTracks);
   const toggleTrack = useCallback117((nodePathInfo) => {
     setExpandedTracks((prev) => {
       const key5 = timelineNodePathInfoToKey(nodePathInfo);
@@ -32044,7 +32279,7 @@ var useSequencePropsSubscription = ({
   const locationSource = validatedLocation?.source ?? null;
   const locationLine = validatedLocation?.line ?? null;
   const locationColumn = validatedLocation?.column ?? null;
-  useEffect74(() => {
+  useEffect73(() => {
     if (!clientId || !locationSource || !locationLine || locationColumn === null || !schema) {
       return;
     }
@@ -32124,22 +32359,22 @@ import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 import React147, {
   useCallback as useCallback119,
   useContext as useContext81,
-  useEffect as useEffect77,
+  useEffect as useEffect76,
   useMemo as useMemo122,
   useRef as useRef51,
-  useState as useState76
+  useState as useState75
 } from "react";
 import { Internals as Internals63, useVideoConfig as useVideoConfig3 } from "remotion";
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext80, useEffect as useEffect76, useMemo as useMemo121, useRef as useRef50 } from "react";
+import { useContext as useContext80, useEffect as useEffect75, useMemo as useMemo121, useRef as useRef50 } from "react";
 import { Internals as Internals62 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
 import {
   useCallback as useCallback118,
-  useEffect as useEffect75,
+  useEffect as useEffect74,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef49
 } from "react";
@@ -32190,7 +32425,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect75(() => {
+  useEffect74(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -32306,7 +32541,7 @@ var TimelineTimeIndicators = () => {
 };
 var TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
   const ref2 = useRef50(null);
-  useEffect76(() => {
+  useEffect75(() => {
     const currentRef = ref2.current;
     if (!currentRef) {
       return;
@@ -32440,7 +32675,7 @@ var TimelineDragHandlerInner = () => {
   const setFrame = Internals63.useTimelineSetFrame();
   const width = scrollableRef.current?.scrollWidth ?? 0;
   const left3 = size3?.left ?? 0;
-  const [dragging, setDragging] = useState76({
+  const [dragging, setDragging] = useState75({
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals20.usePlayer();
@@ -32576,7 +32811,7 @@ var TimelineDragHandlerInner = () => {
       play();
     }
   }, [dragging, left3, play, videoConfig, setFrame, width]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -32588,7 +32823,7 @@ var TimelineDragHandlerInner = () => {
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
   const ref2 = useRef51(null);
-  useEffect77(() => {
+  useEffect76(() => {
     const currentRef = ref2.current;
     if (!currentRef) {
       return;
@@ -32671,9 +32906,9 @@ import { PlayerInternals as PlayerInternals21 } from "@remotion/player";
 import React151, {
   useCallback as useCallback120,
   useContext as useContext85,
-  useEffect as useEffect78,
+  useEffect as useEffect77,
   useMemo as useMemo126,
-  useState as useState77
+  useState as useState76
 } from "react";
 import { Internals as Internals66, useVideoConfig as useVideoConfig5 } from "remotion";
 
@@ -32790,7 +33025,7 @@ var TimelineInOutDragHandlerInner = () => {
     shouldApplyCssTransforms: true
   });
   const { isHighestContext } = useZIndex();
-  const [inOutDragging, setInOutDragging] = useState77({
+  const [inOutDragging, setInOutDragging] = useState76({
     dragging: false
   });
   const timelineWidth = useContext85(TimelineWidthContext);
@@ -32955,7 +33190,7 @@ var TimelineInOutDragHandlerInner = () => {
     videoConfig,
     width
   ]);
-  useEffect78(() => {
+  useEffect77(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -33058,7 +33293,7 @@ var useTimelineKeyframeTracks = () => {
 };
 
 // src/components/Timeline/TimelineSequenceItem.tsx
-import React176, { useCallback as useCallback138, useContext as useContext93, useMemo as useMemo149, useState as useState85 } from "react";
+import React176, { useCallback as useCallback138, useContext as useContext93, useMemo as useMemo149, useState as useState84 } from "react";
 import { Internals as Internals74 } from "remotion";
 
 // src/components/Timeline/TimelineExpandArrowButton.tsx
@@ -33153,7 +33388,7 @@ var getExpandedRowDepth = ({
 };
 
 // src/components/Timeline/TimelineEffectItem.tsx
-import { useCallback as useCallback122, useContext as useContext87, useMemo as useMemo130, useState as useState78 } from "react";
+import { useCallback as useCallback122, useContext as useContext87, useMemo as useMemo130, useState as useState77 } from "react";
 import { Internals as Internals67 } from "remotion";
 
 // src/components/Timeline/TimelineRowChrome.tsx
@@ -33369,7 +33604,7 @@ var TimelineEffectItem = ({
   const { propStatuses } = useContext87(Internals67.VisualModePropStatusesContext);
   const { setPropStatuses } = useContext87(Internals67.VisualModeSettersContext);
   const selection = useTimelineRowSelection(nodePathInfo);
-  const [dropIndicator, setDropIndicator] = useState78(null);
+  const [dropIndicator, setDropIndicator] = useState77(null);
   const effectStatus = useMemo130(() => Internals67.getEffectPropStatusesCtx({
     propStatuses,
     nodePath,
@@ -34405,7 +34640,7 @@ var TimelineEnumField = ({
 };
 
 // src/components/Timeline/TimelineNumberField.tsx
-import { useCallback as useCallback127, useMemo as useMemo135, useState as useState79 } from "react";
+import { useCallback as useCallback127, useMemo as useMemo135, useState as useState78 } from "react";
 import { jsx as jsx227 } from "react/jsx-runtime";
 var TimelineNumberField = ({
   field,
@@ -34415,7 +34650,7 @@ var TimelineNumberField = ({
   onDragEnd,
   propStatus
 }) => {
-  const [dragValue, setDragValue] = useState79(null);
+  const [dragValue, setDragValue] = useState78(null);
   const onValueChange = useCallback127((newVal) => {
     setDragValue(newVal);
     onDragValueChange(newVal);
@@ -34473,7 +34708,7 @@ var TimelineNumberField = ({
 };
 
 // src/components/Timeline/TimelineRotationField.tsx
-import { useCallback as useCallback128, useMemo as useMemo136, useState as useState80 } from "react";
+import { useCallback as useCallback128, useMemo as useMemo136, useState as useState79 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
 var TimelineRotationField = ({
   field,
@@ -34483,7 +34718,7 @@ var TimelineRotationField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragValue, setDragValue] = useState80(null);
+  const [dragValue, setDragValue] = useState79(null);
   const isCssRotation = field.fieldSchema.type === "rotation-css";
   const degrees = useMemo136(() => {
     if (isCssRotation) {
@@ -34556,7 +34791,7 @@ var TimelineRotationField = ({
 };
 
 // src/components/Timeline/TimelineTransformOriginField.tsx
-import { useCallback as useCallback129, useMemo as useMemo137, useState as useState81 } from "react";
+import { useCallback as useCallback129, useMemo as useMemo137, useState as useState80 } from "react";
 import { jsx as jsx229, jsxs as jsxs108 } from "react/jsx-runtime";
 var leftDraggerStyle2 = {
   paddingLeft: 0
@@ -34576,8 +34811,8 @@ var TimelineTransformOriginField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragX, setDragX] = useState81(null);
-  const [dragY, setDragY] = useState81(null);
+  const [dragX, setDragX] = useState80(null);
+  const [dragY, setDragY] = useState80(null);
   const parsed = useMemo137(() => parseTransformOrigin(effectiveValue), [effectiveValue]);
   const percent = useMemo137(() => parsed === null ? null : parsedTransformOriginToPercent(parsed), [parsed]);
   const configuredStep = field.fieldSchema.type === "transform-origin" ? field.fieldSchema.step : undefined;
@@ -34731,7 +34966,7 @@ var TimelineTransformOriginField = ({
 };
 
 // src/components/Timeline/TimelineTranslateField.tsx
-import { useCallback as useCallback130, useMemo as useMemo138, useState as useState82 } from "react";
+import { useCallback as useCallback130, useMemo as useMemo138, useState as useState81 } from "react";
 import { jsx as jsx230, jsxs as jsxs109 } from "react/jsx-runtime";
 var leftDraggerStyle3 = {
   paddingLeft: 0
@@ -34751,8 +34986,8 @@ var TimelineTranslateField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragX, setDragX] = useState82(null);
-  const [dragY, setDragY] = useState82(null);
+  const [dragX, setDragX] = useState81(null);
+  const [dragY, setDragY] = useState81(null);
   const [codeX, codeY] = useMemo138(() => parseTranslate(String(effectiveValue ?? "0px 0px")), [effectiveValue]);
   const configuredStep = field.fieldSchema.type === "translate" ? field.fieldSchema.step : undefined;
   const step = configuredStep ?? 1;
@@ -34875,7 +35110,7 @@ var TimelineTranslateField = ({
 };
 
 // src/components/Timeline/TimelineUvCoordinateField.tsx
-import { useCallback as useCallback131, useMemo as useMemo139, useState as useState83 } from "react";
+import { useCallback as useCallback131, useMemo as useMemo139, useState as useState82 } from "react";
 import { jsx as jsx231, jsxs as jsxs110 } from "react/jsx-runtime";
 var leftDraggerStyle4 = {
   paddingLeft: 0
@@ -34907,8 +35142,8 @@ var TimelineUvCoordinateField = ({
   onDragValueChange,
   onDragEnd
 }) => {
-  const [dragX, setDragX] = useState83(null);
-  const [dragY, setDragY] = useState83(null);
+  const [dragX, setDragX] = useState82(null);
+  const [dragY, setDragY] = useState82(null);
   const [codeX, codeY] = useMemo139(() => parseUvCoordinate2(effectiveValue), [effectiveValue]);
   const configuredStep = field.fieldSchema.type === "uv-coordinate" ? field.fieldSchema.step : undefined;
   const step = configuredStep ?? 0.01;
@@ -36548,7 +36783,7 @@ var TimelineMediaInfo = ({ src }) => {
 };
 
 // src/components/Timeline/TimelineSequenceName.tsx
-import { useCallback as useCallback136, useEffect as useEffect79, useMemo as useMemo147, useRef as useRef53, useState as useState84 } from "react";
+import { useCallback as useCallback136, useEffect as useEffect78, useMemo as useMemo147, useRef as useRef53, useState as useState83 } from "react";
 import { jsx as jsx242, jsxs as jsxs115, Fragment as Fragment37 } from "react/jsx-runtime";
 var MAX_DISPLAY_NAME_LENGTH = 1000;
 var MAX_RENAME_INPUT_WIDTH = 240;
@@ -36568,7 +36803,7 @@ var TimelineSequenceName = ({
   onSaveName
 }) => {
   const inputRef = useRef53(null);
-  const [draftName, setDraftName] = useState84(displayName);
+  const [draftName, setDraftName] = useState83(displayName);
   const cancelNextBlurRef = useRef53(false);
   const style10 = useMemo147(() => {
     return {
@@ -36605,7 +36840,7 @@ var TimelineSequenceName = ({
     };
   }, [style10]);
   const text2 = getTruncatedDisplayName(displayName) || "<Sequence>";
-  useEffect79(() => {
+  useEffect78(() => {
     if (!editing) {
       setDraftName(displayName);
       return;
@@ -36787,10 +37022,10 @@ var TimelineSequenceItem = ({
   const { onSelect, selectable, selected } = useTimelineRowSelection(nodePathInfo);
   const { selectedItems } = useTimelineSelection();
   const containsSelection = useTimelineRowContainsSelection(nodePathInfo);
-  const [effectDropHovered, setEffectDropHovered] = useState85(false);
-  const [isRenaming, setIsRenaming] = useState85(false);
-  const [sequenceDropIndicator, setSequenceDropIndicator] = useState85(null);
-  const [sequenceDropRejection, setSequenceDropRejection] = useState85(null);
+  const [effectDropHovered, setEffectDropHovered] = useState84(false);
+  const [isRenaming, setIsRenaming] = useState84(false);
+  const [sequenceDropIndicator, setSequenceDropIndicator] = useState84(null);
+  const [sequenceDropRejection, setSequenceDropRejection] = useState84(null);
   const timelinePosition = Internals74.Timeline.useTimelinePosition();
   const { canOpenInEditor, openInEditor: openInEditor2, originalLocation } = useOpenSequenceInEditor(sequence);
   const fileLocation = useMemo149(() => formatFileLocation({
@@ -37464,7 +37699,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePinchZoom.tsx
-import { useCallback as useCallback139, useContext as useContext94, useEffect as useEffect80, useRef as useRef54 } from "react";
+import { useCallback as useCallback139, useContext as useContext94, useEffect as useEffect79, useRef as useRef54 } from "react";
 import { Internals as Internals75 } from "remotion";
 var ZOOM_WHEEL_DELTA = 0.06;
 var TimelinePinchZoom = () => {
@@ -37521,7 +37756,7 @@ var TimelinePinchZoom = () => {
     setZoom
   ]);
   const supportsWebKitPinch = typeof window !== "undefined" && "GestureEvent" in window;
-  useEffect80(() => {
+  useEffect79(() => {
     const el = timelineVerticalScroll.current;
     if (!el) {
       return;
@@ -37531,7 +37766,7 @@ var TimelinePinchZoom = () => {
       el.removeEventListener("wheel", onWheel);
     };
   }, [onWheel]);
-  useEffect80(() => {
+  useEffect79(() => {
     const el = timelineVerticalScroll.current;
     if (!el || !editorZoomGestures || !supportsWebKitPinch) {
       return;
@@ -37603,7 +37838,7 @@ var TimelinePinchZoom = () => {
     canvasContent,
     setZoom
   ]);
-  useEffect80(() => {
+  useEffect79(() => {
     const el = timelineVerticalScroll.current;
     if (!el || !editorZoomGestures) {
       return;
@@ -37681,7 +37916,7 @@ var TimelinePinchZoom = () => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext95, useEffect as useEffect81 } from "react";
+import { useContext as useContext95, useEffect as useEffect80 } from "react";
 import { Internals as Internals76 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -37699,7 +37934,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentDuration(video.durationInFrames);
     setCurrentFps(video.fps);
   }
-  useEffect81(() => {
+  useEffect80(() => {
     if (!video) {
       return;
     }
@@ -37712,7 +37947,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playbackRate, playing, timelinePosition, video]);
-  useEffect81(() => {
+  useEffect80(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -37834,7 +38069,7 @@ import {
   useCallback as useCallback140,
   useContext as useContext96,
   useMemo as useMemo151,
-  useState as useState86
+  useState as useState85
 } from "react";
 import { jsx as jsx246 } from "react/jsx-runtime";
 var emptyDraggedKeyframes = new Set;
@@ -37854,7 +38089,7 @@ var TimelineKeyframeDragStateContext = createContext25({
   }
 });
 var TimelineKeyframeDragStateProvider = ({ children }) => {
-  const [draggedKeys, setDraggedKeys] = useState86(emptyDraggedKeyframes);
+  const [draggedKeys, setDraggedKeys] = useState85(emptyDraggedKeyframes);
   const setDraggedKeyframes = useCallback140((keyframes) => {
     setDraggedKeys(new Set(keyframes.map(getTimelineKeyframeDragKey)));
   }, []);
@@ -39221,7 +39456,7 @@ var getTimelineSequenceLayout = ({
 };
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect82, useState as useState87 } from "react";
+import { useEffect as useEffect81, useState as useState86 } from "react";
 var cache2 = new Map;
 var getCacheKey = (src, fps) => JSON.stringify([src, fps]);
 var getSrc = (s) => {
@@ -39236,8 +39471,8 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const cacheKey = src ? getCacheKey(src, fps) : null;
-  const [maxMediaDuration, setMaxMediaDuration] = useState87(cacheKey ? cache2.get(cacheKey) ?? null : Infinity);
-  useEffect82(() => {
+  const [maxMediaDuration, setMaxMediaDuration] = useState86(cacheKey ? cache2.get(cacheKey) ?? null : Infinity);
+  useEffect81(() => {
     if (!src || !cacheKey) {
       return;
     }
@@ -39279,7 +39514,7 @@ import {
   shouldTileLoopDisplay,
   sliceWaveformPeaks
 } from "@remotion/timeline-utils";
-import { useEffect as useEffect83, useMemo as useMemo155, useRef as useRef57, useState as useState88 } from "react";
+import { useEffect as useEffect82, useMemo as useMemo155, useRef as useRef57, useState as useState87 } from "react";
 import { Internals as Internals81 } from "remotion";
 import { jsx as jsx251, jsxs as jsxs121 } from "react/jsx-runtime";
 var EMPTY_PEAKS = new Float32Array(0);
@@ -39368,9 +39603,9 @@ var AudioWaveform = ({
   playbackRate,
   loopDisplay
 }) => {
-  const [peaks, setPeaks] = useState88(null);
-  const [error, setError] = useState88(null);
-  const [waveformCanvasKey, setWaveformCanvasKey] = useState88(0);
+  const [peaks, setPeaks] = useState87(null);
+  const [error, setError] = useState87(null);
+  const [waveformCanvasKey, setWaveformCanvasKey] = useState87(0);
   const canUseWorkerPath = useMemo155(() => canUseAudioWaveformWorker(), []);
   const vidConf = Internals81.useUnsafeVideoConfig();
   if (vidConf === null) {
@@ -39382,7 +39617,7 @@ var AudioWaveform = ({
   const hasTransferredCanvas = useRef57(false);
   const latestRequestId = useRef57(0);
   const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === "string";
-  useEffect83(() => {
+  useEffect82(() => {
     if (canUseWorkerPath) {
       return;
     }
@@ -39400,7 +39635,7 @@ var AudioWaveform = ({
     });
     return () => controller.abort();
   }, [canUseWorkerPath, src]);
-  useEffect83(() => {
+  useEffect82(() => {
     if (!canUseWorkerPath) {
       return;
     }
@@ -39473,7 +39708,7 @@ var AudioWaveform = ({
     startFrom,
     vidConf.fps
   ]);
-  useEffect83(() => {
+  useEffect82(() => {
     const { current: canvasElement } = waveformCanvas;
     if (!canvasElement) {
       return;
@@ -39540,7 +39775,7 @@ var AudioWaveform = ({
     volume,
     waveformCanvasKey
   ]);
-  useEffect83(() => {
+  useEffect82(() => {
     if (!shouldRenderVolumeOverlay) {
       return;
     }
@@ -39678,7 +39913,7 @@ var LoopedTimelineIndicator = ({ loops }) => {
 
 // src/components/Timeline/TimelineImageInfo.tsx
 import { drawRepeatingImageThumbnail } from "@remotion/timeline-utils";
-import { useEffect as useEffect84, useRef as useRef58 } from "react";
+import { useEffect as useEffect83, useRef as useRef58 } from "react";
 import { jsx as jsx254 } from "react/jsx-runtime";
 var HEIGHT = getTimelineLayerHeight("image") - 2;
 var containerStyle9 = {
@@ -39691,7 +39926,7 @@ var containerStyle9 = {
 };
 var TimelineImageInfo = ({ src, visualizationWidth }) => {
   const ref2 = useRef58(null);
-  useEffect84(() => {
+  useEffect83(() => {
     const { current } = ref2;
     if (!current) {
       return;
@@ -39770,9 +40005,9 @@ import { stringifySequenceSubscriptionKey as stringifySequenceSubscriptionKey4 }
 import {
   useCallback as useCallback143,
   useContext as useContext102,
-  useEffect as useEffect85,
+  useEffect as useEffect84,
   useRef as useRef59,
-  useState as useState89
+  useState as useState88
 } from "react";
 import { Internals as Internals82 } from "remotion";
 import { NoReactInternals as NoReactInternals26 } from "remotion/no-react";
@@ -39976,7 +40211,7 @@ var useTimelineSequenceFromDrag = ({
   const { overrideIdToNodePathMappings } = useContext102(Internals82.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext102(StudioServerConnectionCtx);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const [dragging, setDragging] = useState89(false);
+  const [dragging, setDragging] = useState88(false);
   const dragStateRef = useRef59(null);
   const latestRef = useRef59({
     nodePathInfo,
@@ -40079,7 +40314,7 @@ var useTimelineSequenceFromDrag = ({
     timelineDurationInFrames,
     windowWidth
   ]);
-  useEffect85(() => {
+  useEffect84(() => {
     if (!dragging) {
       return;
     }
@@ -40138,7 +40373,7 @@ var TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeline
   const { overrideIdToNodePathMappings } = useContext102(Internals82.OverrideIdsToNodePathsGettersContext);
   const { previewServerState } = useContext102(StudioServerConnectionCtx);
   const currentSelection = useCurrentTimelineSelectionStateAsRef();
-  const [dragging, setDragging] = useState89(false);
+  const [dragging, setDragging] = useState88(false);
   const dragStateRef = useRef59(null);
   const latestRef = useRef59({
     nodePathInfo,
@@ -40241,7 +40476,7 @@ var TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeline
     timelineDurationInFrames,
     windowWidth
   ]);
-  useEffect85(() => {
+  useEffect84(() => {
     if (!dragging) {
       return;
     }
@@ -40310,14 +40545,17 @@ import {
   extractFrames,
   fillFrameWhereItFits,
   fillWithCachedFrames,
+  frameDatabase,
   getAspectRatioFromCache,
+  getFrameDatabaseKeyPrefix,
   getLoopDisplayWidth as getLoopDisplayWidth2,
+  getTimestampFromFrameDatabaseKey,
   makeFrameDatabaseKey,
   resizeVideoFrame,
-  shouldTileLoopDisplay as shouldTileLoopDisplay2,
+  shouldTileLoopDisplay as shouldTileLoopDisplay3,
   WEBCODECS_TIMESCALE
 } from "@remotion/timeline-utils";
-import { useEffect as useEffect86, useMemo as useMemo156, useRef as useRef60, useState as useState90 } from "react";
+import { useEffect as useEffect85, useMemo as useMemo156, useRef as useRef60, useState as useState89 } from "react";
 import { useVideoConfig as useVideoConfig10 } from "remotion";
 
 // src/components/Timeline/get-timeline-video-info-widths.ts
@@ -40334,6 +40572,31 @@ var getTimelineVideoInfoWidths = ({
   };
 };
 
+// src/components/Timeline/timeline-video-filmstrip-times.ts
+import { shouldTileLoopDisplay as shouldTileLoopDisplay2 } from "@remotion/timeline-utils";
+var getTimelineVideoFilmstripTimes = ({
+  trimBefore,
+  durationInFrames,
+  playbackRate,
+  fps,
+  loopDisplay,
+  frozenMediaFrame
+}) => {
+  if (frozenMediaFrame !== null) {
+    return {
+      type: "frozen",
+      timestampInSeconds: Math.max(0, frozenMediaFrame / fps)
+    };
+  }
+  const fromSeconds = trimBefore / fps;
+  const visibleDurationInFrames = shouldTileLoopDisplay2(loopDisplay) && loopDisplay ? loopDisplay.durationInFrames : durationInFrames;
+  return {
+    type: "range",
+    fromSeconds,
+    toSeconds: fromSeconds + visibleDurationInFrames * playbackRate / fps
+  };
+};
+
 // src/components/Timeline/TimelineVideoInfo.tsx
 import { jsx as jsx257, jsxs as jsxs125 } from "react/jsx-runtime";
 var outerStyle = {
@@ -40350,6 +40613,7 @@ var filmstripContainerStyle = {
   fontSize: 10,
   fontFamily: "Arial, Helvetica"
 };
+var MAX_FROZEN_FRAME_CACHE_DEVIATION = WEBCODECS_TIMESCALE * 0.05;
 var TimelineVideoInfo = ({
   src,
   visualizationWidth,
@@ -40361,11 +40625,12 @@ var TimelineVideoInfo = ({
   doesVolumeChange,
   premountWidth,
   postmountWidth,
-  loopDisplay
+  loopDisplay,
+  frozenMediaFrame
 }) => {
   const { fps } = useVideoConfig10();
   const ref2 = useRef60(null);
-  const [error, setError] = useState90(null);
+  const [error, setError] = useState89(null);
   const aspectRatio = useRef60(getAspectRatioFromCache(src));
   const { mediaVisualizationWidth, mediaNaturalWidth } = useMemo156(() => {
     return getTimelineVideoInfoWidths({
@@ -40375,7 +40640,7 @@ var TimelineVideoInfo = ({
       postmountWidth
     });
   }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
-  useEffect86(() => {
+  useEffect85(() => {
     if (error) {
       return;
     }
@@ -40392,11 +40657,96 @@ var TimelineVideoInfo = ({
       return;
     }
     current.appendChild(canvas);
+    const drawRepeatedFrame = (frame2) => {
+      const thumbnailWidth = Math.max(1, frame2.displayWidth / window.devicePixelRatio);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (let x = 0;x < canvas.width; x += thumbnailWidth) {
+        ctx.drawImage(frame2, x, 0, thumbnailWidth, TIMELINE_LAYER_FILMSTRIP_HEIGHT);
+      }
+    };
+    const getCachedFrozenFrame = (timestamp) => {
+      const prefix = getFrameDatabaseKeyPrefix(src);
+      const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(prefix));
+      let bestDistance = Infinity;
+      let bestFrame = null;
+      for (const key5 of keys) {
+        const frame2 = frameDatabase.get(key5);
+        if (!frame2) {
+          continue;
+        }
+        const distance = Math.abs(getTimestampFromFrameDatabaseKey(key5) - timestamp);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          bestFrame = frame2.frame;
+        }
+      }
+      return bestDistance <= MAX_FROZEN_FRAME_CACHE_DEVIATION ? bestFrame : null;
+    };
+    const times = getTimelineVideoFilmstripTimes({
+      trimBefore,
+      durationInFrames,
+      playbackRate,
+      fps,
+      loopDisplay,
+      frozenMediaFrame
+    });
+    if (times.type === "frozen") {
+      const timestamp = times.timestampInSeconds * WEBCODECS_TIMESCALE;
+      const cachedFrame = getCachedFrozenFrame(timestamp);
+      if (cachedFrame) {
+        drawRepeatedFrame(cachedFrame);
+        return () => {
+          current.removeChild(canvas);
+        };
+      }
+      extractFrames({
+        timestampsInSeconds: ({
+          track
+        }) => {
+          aspectRatio.current = track.width / track.height;
+          aspectRatioCache.set(src, aspectRatio.current);
+          return [times.timestampInSeconds];
+        },
+        src,
+        onVideoSample: (sample) => {
+          let frame2;
+          try {
+            frame2 = sample.toVideoFrame();
+            const scale = TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame2.displayHeight * window.devicePixelRatio;
+            const transformed = resizeVideoFrame({
+              frame: frame2,
+              scale
+            });
+            if (transformed !== frame2) {
+              frame2.close();
+            }
+            frame2 = undefined;
+            const databaseKey = makeFrameDatabaseKey(src, transformed.timestamp);
+            addFrameToCache(databaseKey, transformed);
+            drawRepeatedFrame(transformed);
+          } catch (e) {
+            if (frame2) {
+              frame2.close();
+            }
+            throw e;
+          } finally {
+            sample.close();
+          }
+        },
+        signal: controller.signal
+      }).catch((e) => {
+        setError(e);
+      });
+      return () => {
+        controller.abort();
+        current.removeChild(canvas);
+      };
+    }
     const loopWidth = getLoopDisplayWidth2({
       visualizationWidth: mediaNaturalWidth,
       loopDisplay
     });
-    const shouldRepeatVideo = shouldTileLoopDisplay2(loopDisplay);
+    const shouldRepeatVideo = shouldTileLoopDisplay3(loopDisplay);
     const targetCanvas = shouldRepeatVideo ? document.createElement("canvas") : canvas;
     targetCanvas.width = shouldRepeatVideo ? Math.max(1, Math.ceil(loopWidth)) : canvas.width;
     targetCanvas.height = canvas.height;
@@ -40419,9 +40769,7 @@ var TimelineVideoInfo = ({
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     };
     const filledSlots = new Map;
-    const fromSeconds = trimBefore / fps;
-    const visibleDurationInFrames = shouldRepeatVideo && loopDisplay ? loopDisplay.durationInFrames : durationInFrames;
-    const toSeconds = fromSeconds + visibleDurationInFrames * playbackRate / fps;
+    const { fromSeconds, toSeconds } = times;
     const targetWidth = shouldRepeatVideo ? targetCanvas.width : mediaNaturalWidth;
     if (aspectRatio.current !== null) {
       ensureSlots({
@@ -40540,6 +40888,7 @@ var TimelineVideoInfo = ({
     durationInFrames,
     error,
     fps,
+    frozenMediaFrame,
     loopDisplay,
     mediaNaturalWidth,
     mediaVisualizationWidth,
@@ -40859,9 +41208,7 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
       onSelect({ shiftKey: false, toggleKey: false });
     }
   }, [onSelect, selectable]);
-  const freezeStatus = propStatusesForOverride?.freeze;
-  const runtimeFreezeFrame = typeof s.controls?.currentRuntimeValueDotNotation.freeze === "number" ? s.controls.currentRuntimeValueDotNotation.freeze : null;
-  const frozenFrame = freezeStatus?.status === "static" ? typeof freezeStatus.codeValue === "number" ? freezeStatus.codeValue : null : runtimeFreezeFrame;
+  const { frozenFrame } = s;
   const { onPointerDown: onMoveDragPointerDown } = useTimelineSequenceFromDrag({
     nodePathInfo,
     windowWidth,
@@ -40940,7 +41287,8 @@ var TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset
         doesVolumeChange: s.doesVolumeChange,
         premountWidth: premountWidth ?? 0,
         postmountWidth: postmountWidth ?? 0,
-        loopDisplay: s.loopDisplay
+        loopDisplay: s.loopDisplay,
+        frozenMediaFrame: s.frozenMediaFrame
       }) : null,
       s.type === "image" ? /* @__PURE__ */ jsx258(TimelineImageInfo, {
         src: s.src,
@@ -41055,8 +41403,8 @@ var noop3 = () => {
 var TimelineContextMenuArea = ({ children }) => {
   const { compositions, canvasContent } = useContext105(Internals84.CompositionManager);
   const videoConfig = Internals84.useUnsafeVideoConfig();
-  const [isAddingSolid, setIsAddingSolid] = useState91(false);
-  const [isAddingAsset, setIsAddingAsset] = useState91(false);
+  const [isAddingSolid, setIsAddingSolid] = useState90(false);
+  const [isAddingAsset, setIsAddingAsset] = useState90(false);
   const { previewServerState } = useContext105(StudioServerConnectionCtx);
   const previewConnected = previewServerState.type === "connected";
   const currentCompositionId = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
@@ -41341,13 +41689,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext107, useEffect as useEffect87 } from "react";
+import { useContext as useContext107, useEffect as useEffect86 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext107(ModalsContext);
   const { setCheckerboard } = useContext107(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect87(() => {
+  useEffect86(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -41470,7 +41818,7 @@ import {
   extraPackages,
   installableMap
 } from "@remotion/studio-shared";
-import React194, { useCallback as useCallback148, useContext as useContext109, useEffect as useEffect88 } from "react";
+import React194, { useCallback as useCallback148, useContext as useContext109, useEffect as useEffect87 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/components/InstallablePackage.tsx
@@ -41556,7 +41904,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect88(() => {
+  useEffect87(() => {
     if (disabled) {
       return;
     }
@@ -41710,7 +42058,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback150, useContext as useContext112, useMemo as useMemo163 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React195, { useContext as useContext110, useEffect as useEffect89, useMemo as useMemo161 } from "react";
+import React195, { useContext as useContext110, useEffect as useEffect88, useMemo as useMemo161 } from "react";
 import { Internals as Internals86 } from "remotion";
 import { jsx as jsx267, jsxs as jsxs133 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -41734,7 +42082,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals86.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext110(Internals86.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect89(() => {
+  useEffect88(() => {
     const { current } = Internals86.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -41795,9 +42143,9 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 import {
   useCallback as useCallback149,
   useContext as useContext111,
-  useEffect as useEffect90,
+  useEffect as useEffect89,
   useMemo as useMemo162,
-  useState as useState92
+  useState as useState91
 } from "react";
 
 // src/helpers/resolved-stack-to-symbolicated.ts
@@ -41873,9 +42221,9 @@ var CodemodFooter = ({
   submitLabel,
   onSuccess
 }) => {
-  const [submitting, setSubmitting] = useState92(false);
+  const [submitting, setSubmitting] = useState91(false);
   const { setSelectedModal } = useContext111(ModalsContext);
-  const [codemodStatus, setCanApplyCodemod] = useState92({
+  const [codemodStatus, setCanApplyCodemod] = useState91({
     type: "loading"
   });
   const resolvedLocation = useResolvedStack(stack2);
@@ -41921,7 +42269,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod, symbolicatedStack]);
-  useEffect90(() => {
+  useEffect89(() => {
     if (!stack2) {
       setCanApplyCodemod({
         type: "fail",
@@ -41956,7 +42304,7 @@ var CodemodFooter = ({
   }, [errorNotification, getCanApplyCodemod, stack2, symbolicatedStack]);
   const disabled = !valid || submitting || symbolicatedStack === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect90(() => {
+  useEffect89(() => {
     if (disabled) {
       return;
     }
@@ -42153,7 +42501,7 @@ var DeleteFolder = ({ folderName, parentName, stack: stack2 }) => {
 };
 
 // src/components/NewComposition/DuplicateComposition.tsx
-import { useCallback as useCallback153, useContext as useContext113, useMemo as useMemo165, useState as useState93 } from "react";
+import { useCallback as useCallback153, useContext as useContext113, useMemo as useMemo165, useState as useState92 } from "react";
 import { Internals as Internals88 } from "remotion";
 
 // src/helpers/validate-new-comp-data.ts
@@ -42265,14 +42613,14 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   }
   const { resolved, unresolved } = context;
   const compositionStack = unresolved.stack ?? null;
-  const [initialCompType] = useState93(initialType);
+  const [initialCompType] = useState92(initialType);
   const hadDimensionsDefined = unresolved.width && unresolved.height;
   const hadFpsDefined = unresolved.fps !== undefined;
   const hadDurationDefined = unresolved.durationInFrames !== undefined;
-  const [selectedFrameRate, setFrameRate] = useState93(resolved.result.fps);
+  const [selectedFrameRate, setFrameRate] = useState92(resolved.result.fps);
   const { compositions } = useContext113(Internals88.CompositionManager);
-  const [type, setType] = useState93(initialCompType);
-  const [newId, setName] = useState93(() => {
+  const [type, setType] = useState92(initialCompType);
+  const [newId, setName] = useState92(() => {
     const numberAtEnd = resolved.result.id.match(/([0-9]+)$/)?.[0];
     let prefix = numberAtEnd ? Number(numberAtEnd) : 1;
     const initialName = resolved.result.id.replace(/([0-9]+)$/, "");
@@ -42287,11 +42635,11 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
     }
     return currentName;
   });
-  const [size3, setSize] = useState93(() => ({
+  const [size3, setSize] = useState92(() => ({
     width: resolved.result.width,
     height: resolved.result.height
   }));
-  const [durationInFrames, setDurationInFrames] = useState93(resolved.result.durationInFrames);
+  const [durationInFrames, setDurationInFrames] = useState92(resolved.result.durationInFrames);
   const onTypeChanged = useCallback153((newType) => {
     setType(newType);
   }, []);
@@ -42621,10 +42969,10 @@ var DuplicateComposition = ({ compositionId, compositionType }) => {
 import {
   useCallback as useCallback154,
   useContext as useContext114,
-  useEffect as useEffect91,
+  useEffect as useEffect90,
   useMemo as useMemo166,
   useRef as useRef62,
-  useState as useState94
+  useState as useState93
 } from "react";
 import { Internals as Internals89 } from "remotion";
 import { jsx as jsx274, jsxs as jsxs140, Fragment as Fragment44 } from "react/jsx-runtime";
@@ -42643,11 +42991,11 @@ var RenameCompositionLoaded = () => {
   const { resolved, unresolved } = context;
   const compositionStack = unresolved.stack ?? null;
   const { compositions } = useContext114(Internals89.CompositionManager);
-  const [newId, setName] = useState94(() => {
+  const [newId, setName] = useState93(() => {
     return resolved.result.id;
   });
   const inputRef = useRef62(null);
-  useEffect91(() => {
+  useEffect90(() => {
     const input2 = inputRef.current;
     if (!input2)
       return;
@@ -42749,10 +43097,10 @@ var RenameComposition = ({ compositionId }) => {
 import {
   useCallback as useCallback155,
   useContext as useContext115,
-  useEffect as useEffect92,
+  useEffect as useEffect91,
   useMemo as useMemo167,
   useRef as useRef63,
-  useState as useState95
+  useState as useState94
 } from "react";
 import { Internals as Internals91 } from "remotion";
 
@@ -42789,9 +43137,9 @@ var content8 = {
 };
 var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
   const { folders } = useContext115(Internals91.CompositionManager);
-  const [newName, setName] = useState95(folderName);
+  const [newName, setName] = useState94(folderName);
   const inputRef = useRef63(null);
-  useEffect92(() => {
+  useEffect91(() => {
     const input2 = inputRef.current;
     if (!input2)
       return;
@@ -42892,10 +43240,10 @@ var RenameFolder = ({ folderName, parentName, stack: stack2 }) => {
 import {
   useCallback as useCallback156,
   useContext as useContext116,
-  useEffect as useEffect93,
+  useEffect as useEffect92,
   useMemo as useMemo168,
   useRef as useRef64,
-  useState as useState96
+  useState as useState95
 } from "react";
 import { Internals as Internals92 } from "remotion";
 
@@ -42939,10 +43287,10 @@ var RenameStaticFileModal = ({ relativePath }) => {
   const { canvasContent } = useContext116(Internals92.CompositionManager);
   const { setCanvasContent } = useContext116(Internals92.CompositionSetters);
   const staticFiles = useStaticFiles();
-  const [newName, setNewName] = useState96(() => getBaseName(relativePath));
-  const [submitting, setSubmitting] = useState96(false);
+  const [newName, setNewName] = useState95(() => getBaseName(relativePath));
+  const [submitting, setSubmitting] = useState95(false);
   const inputRef = useRef64(null);
-  useEffect93(() => {
+  useEffect92(() => {
     const input2 = inputRef.current;
     if (!input2)
       return;
@@ -43089,7 +43437,7 @@ var RenameStaticFileModal = ({ relativePath }) => {
 };
 
 // src/components/OverrideInputProps.tsx
-import { useCallback as useCallback157, useContext as useContext117, useMemo as useMemo169, useState as useState97 } from "react";
+import { useCallback as useCallback157, useContext as useContext117, useMemo as useMemo169, useState as useState96 } from "react";
 import { Internals as Internals93 } from "remotion";
 import { jsx as jsx277, jsxs as jsxs143 } from "react/jsx-runtime";
 var style10 = {
@@ -43125,7 +43473,7 @@ var isValidJSON = (value) => {
   }
 };
 var Inner = () => {
-  const [value, setValue] = useState97(() => {
+  const [value, setValue] = useState96(() => {
     const override = Internals93.getInputPropsOverride();
     if (override) {
       return JSON.stringify(override, null, 2);
@@ -43214,10 +43562,10 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback158,
   useContext as useContext118,
-  useEffect as useEffect95,
+  useEffect as useEffect94,
   useMemo as useMemo171,
   useRef as useRef66,
-  useState as useState99
+  useState as useState98
 } from "react";
 import { Internals as Internals94 } from "remotion";
 
@@ -44276,7 +44624,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect94, useMemo as useMemo170, useRef as useRef65, useState as useState98 } from "react";
+import { useEffect as useEffect93, useMemo as useMemo170, useRef as useRef65, useState as useState97 } from "react";
 import { jsx as jsx281, jsxs as jsxs146, Fragment as Fragment48 } from "react/jsx-runtime";
 var container48 = {
   paddingLeft: 16,
@@ -44305,10 +44653,10 @@ var labelContainer = {
   paddingBottom: 5
 };
 var QuickSwitcherResult = ({ result, selected }) => {
-  const [hovered, setIsHovered] = useState98(false);
+  const [hovered, setIsHovered] = useState97(false);
   const ref2 = useRef65(null);
   const keybindings = useKeybinding();
-  useEffect94(() => {
+  useEffect93(() => {
     const { current } = ref2;
     if (!current) {
       return;
@@ -44322,7 +44670,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect94(() => {
+  useEffect93(() => {
     if (!selected) {
       return;
     }
@@ -44339,7 +44687,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect94(() => {
+  useEffect93(() => {
     if (selected) {
       ref2.current?.scrollIntoView({
         block: "nearest",
@@ -44472,13 +44820,13 @@ var mapModeToQuery = (mode) => {
 };
 var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
   const { compositions } = useContext118(Internals94.CompositionManager);
-  const [state, setState] = useState99(() => {
+  const [state, setState] = useState98(() => {
     return {
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
     };
   });
-  useEffect95(() => {
+  useEffect94(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
@@ -44490,7 +44838,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
     return;
   }, []);
   const actions = useMenuStructure(closeMenu, readOnlyStudio);
-  const [docResults, setDocResults] = useState99({ type: "initial" });
+  const [docResults, setDocResults] = useState98({ type: "initial" });
   const { setSelectedModal } = useContext118(ModalsContext);
   const keybindings = useKeybinding();
   const mode = mapQueryToMode(state.query);
@@ -44552,7 +44900,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect95(() => {
+  useEffect94(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -44566,7 +44914,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect95(() => {
+  useEffect94(() => {
     if (mode !== "docs") {
       return;
     }
@@ -44591,7 +44939,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect95(() => {
+  useEffect94(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -45257,11 +45605,11 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback178,
   useContext as useContext121,
-  useEffect as useEffect98,
+  useEffect as useEffect97,
   useMemo as useMemo183,
   useReducer as useReducer2,
   useRef as useRef68,
-  useState as useState105
+  useState as useState104
 } from "react";
 
 // src/helpers/convert-env-variables.ts
@@ -45531,9 +45879,9 @@ var makeReadOnlyStudioRenderCommand = ({
 };
 
 // src/helpers/render-modal-sections.ts
-import { useMemo as useMemo173, useState as useState100 } from "react";
+import { useMemo as useMemo173, useState as useState99 } from "react";
 var useRenderModalSections = (renderMode, codec) => {
-  const [selectedTab, setTab] = useState100("general");
+  const [selectedTab, setTab] = useState99("general");
   const shownTabs = useMemo173(() => {
     if (renderMode === "audio") {
       return [
@@ -45656,7 +46004,7 @@ var GifIcon = (props) => /* @__PURE__ */ jsx292("svg", {
 });
 
 // src/components/Tabs/vertical.tsx
-import { useCallback as useCallback161, useMemo as useMemo174, useState as useState101 } from "react";
+import { useCallback as useCallback161, useMemo as useMemo174, useState as useState100 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var selectorButton2 = {
   border: "none",
@@ -45672,7 +46020,7 @@ var selectorButton2 = {
   WebkitUserSelect: "none"
 };
 var VerticalTab = ({ children, onClick, style: style11, selected }) => {
-  const [hovered, setHovered] = useState101(false);
+  const [hovered, setHovered] = useState100(false);
   const { tabIndex } = useZIndex();
   const onPointerEnter = useCallback161(() => {
     setHovered(true);
@@ -45702,7 +46050,7 @@ var VerticalTab = ({ children, onClick, style: style11, selected }) => {
 
 // src/components/RenderModal/CrfSetting.tsx
 import { BrowserSafeApis as BrowserSafeApis3 } from "@remotion/renderer/client";
-import { useState as useState103 } from "react";
+import { useState as useState102 } from "react";
 
 // src/components/RenderModal/NumberSetting.tsx
 import { useCallback as useCallback163 } from "react";
@@ -45711,7 +46059,7 @@ import { useCallback as useCallback163 } from "react";
 import { BrowserSafeApis as BrowserSafeApis2 } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback162, useEffect as useEffect96, useMemo as useMemo175, useState as useState102 } from "react";
+import { useCallback as useCallback162, useEffect as useEffect95, useMemo as useMemo175, useState as useState101 } from "react";
 import { jsx as jsx294 } from "react/jsx-runtime";
 var svgStyle4 = {
   width: 16,
@@ -45738,8 +46086,8 @@ var buttonStyle5 = {
 var CliCopyButton = ({
   valueToCopy
 }) => {
-  const [copied, setCopied] = useState102(false);
-  const [hovered, setHovered] = useState102(false);
+  const [copied, setCopied] = useState101(false);
+  const [hovered, setHovered] = useState101(false);
   const fillColor = useMemo175(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
@@ -45762,7 +46110,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback162(() => {
     setHovered(false);
   }, []);
-  useEffect96(() => {
+  useEffect95(() => {
     if (!copied) {
       return;
     }
@@ -46027,7 +46375,7 @@ var getDefaultCrfState = () => {
   }, {});
 };
 var useCrfState = (codec) => {
-  const [state, setState] = useState103(() => getDefaultCrfState());
+  const [state, setState] = useState102(() => getDefaultCrfState());
   const range = BrowserSafeApis3.getValidCrfRanges(codec);
   const setCrf = (updater) => {
     setState((q) => {
@@ -46909,14 +47257,14 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback167, useMemo as useMemo177 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext120, useEffect as useEffect97, useRef as useRef67, useState as useState104 } from "react";
+import { useContext as useContext120, useEffect as useEffect96, useRef as useRef67, useState as useState103 } from "react";
 var useFileExistence = (outName) => {
-  const [exists, setExists] = useState104(false);
+  const [exists, setExists] = useState103(false);
   const { previewServerState: state, subscribeToEvent } = useContext120(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
   const currentOutName = useRef67("");
   currentOutName.current = outName;
-  useEffect97(() => {
+  useEffect96(() => {
     if (!clientId) {
       return;
     }
@@ -46932,7 +47280,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect97(() => {
+  useEffect96(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -46949,7 +47297,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect97(() => {
+  useEffect96(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -48812,7 +49160,7 @@ var RenderModal = ({
     unresolved: unresolvedComposition
   } = context;
   const isMounted = useRef68(true);
-  const [isVideo] = useState105(() => {
+  const [isVideo] = useState104(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
   const [
@@ -48823,7 +49171,7 @@ var RenderModal = ({
       initialVideoCodecForAudioTab,
       initialVideoCodecForVideoTab
     }
-  ] = useState105(() => {
+  ] = useState104(() => {
     return getDefaultCodecs({
       defaultConfigurationVideoCodec,
       compositionDefaultVideoCodec: resolvedComposition.defaultCodec,
@@ -48832,16 +49180,16 @@ var RenderModal = ({
     });
   });
   const [state, dispatch2] = useReducer2(reducer2, initialState2);
-  const [unclampedFrame, setFrame] = useState105(() => initialFrame);
-  const [stillImageFormat, setStillImageFormat] = useState105(() => initialStillImageFormat);
-  const [videoImageFormat, setVideoImageFormat] = useState105(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
-  const [sequenceImageFormat, setSequenceImageFormat] = useState105(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
-  const [concurrency, setConcurrency] = useState105(() => initialConcurrency);
-  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState105(() => initialVideoCodecForVideoTab);
-  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState105(() => initialAudioCodec);
-  const [separateAudioTo, setSeparateAudioTo] = useState105(null);
-  const [envVariables, setEnvVariables] = useState105(() => envVariablesObjectToArray(initialEnvVariables).filter(([key6]) => key6 !== "NODE_ENV"));
-  const [initialOutName] = useState105(() => {
+  const [unclampedFrame, setFrame] = useState104(() => initialFrame);
+  const [stillImageFormat, setStillImageFormat] = useState104(() => initialStillImageFormat);
+  const [videoImageFormat, setVideoImageFormat] = useState104(() => initialVideoImageFormat ?? resolvedComposition.defaultVideoImageFormat ?? renderDefaults.videoImageFormat);
+  const [sequenceImageFormat, setSequenceImageFormat] = useState104(() => initialStillImageFormat === "jpeg" ? "jpeg" : "png");
+  const [concurrency, setConcurrency] = useState104(() => initialConcurrency);
+  const [videoCodecForVideoTab, setVideoCodecForVideoTab] = useState104(() => initialVideoCodecForVideoTab);
+  const [userSelectedAudioCodec, setUserSelectedAudioCodec] = useState104(() => initialAudioCodec);
+  const [separateAudioTo, setSeparateAudioTo] = useState104(null);
+  const [envVariables, setEnvVariables] = useState104(() => envVariablesObjectToArray(initialEnvVariables).filter(([key6]) => key6 !== "NODE_ENV"));
+  const [initialOutName] = useState104(() => {
     return getDefaultOutLocation({
       compositionName: resolvedComposition.id,
       defaultExtension: initialRenderType === "still" ? initialStillImageFormat : isVideo ? BrowserSafeApis11.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec) : initialStillImageFormat,
@@ -48850,26 +49198,26 @@ var RenderModal = ({
       outputLocation: renderDefaults.outputLocation
     });
   });
-  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState105(() => initialVideoCodecForAudioTab);
-  const [mutedState, setMuted] = useState105(() => initialMuted);
-  const [repro, setRepro] = useState105(() => initialRepro);
-  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState105(() => initialEnforceAudioTrack);
-  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState105(() => initialForSeamlessAacConcatenation);
-  const [sampleRate, setSampleRate] = useState105(() => initialSampleRate);
-  const [renderMode, setRenderModeState] = useState105(initialRenderType);
-  const [jpegQuality, setJpegQuality] = useState105(() => initialJpegQuality);
-  const [scale, setScale] = useState105(() => initialScale);
-  const [logLevel, setLogLevel] = useState105(() => initialLogLevel);
-  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState105(false);
-  const [disableWebSecurity, setDisableWebSecurity] = useState105(() => initialDisableWebSecurity);
-  const [headless, setHeadless] = useState105(() => initialHeadless);
-  const [beepOnFinish, setBeepOnFinish] = useState105(() => initialBeep);
-  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState105(() => initialIgnoreCertificateErrors);
-  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState105(() => initialMultiProcessOnLinux);
-  const [darkMode, setDarkMode] = useState105(() => initialDarkMode);
-  const [openGlOption, setOpenGlOption] = useState105(() => initialGl ?? "default");
-  const [colorSpace, setColorSpace] = useState105(() => initialColorSpace);
-  const [userAgent, setUserAgent] = useState105(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
+  const [videoCodecForAudioTab, setVideoCodecForAudioTab] = useState104(() => initialVideoCodecForAudioTab);
+  const [mutedState, setMuted] = useState104(() => initialMuted);
+  const [repro, setRepro] = useState104(() => initialRepro);
+  const [enforceAudioTrackState, setEnforceAudioTrackState] = useState104(() => initialEnforceAudioTrack);
+  const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState104(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState104(() => initialSampleRate);
+  const [renderMode, setRenderModeState] = useState104(initialRenderType);
+  const [jpegQuality, setJpegQuality] = useState104(() => initialJpegQuality);
+  const [scale, setScale] = useState104(() => initialScale);
+  const [logLevel, setLogLevel] = useState104(() => initialLogLevel);
+  const [disallowParallelEncoding, setDisallowParallelEncoding] = useState104(false);
+  const [disableWebSecurity, setDisableWebSecurity] = useState104(() => initialDisableWebSecurity);
+  const [headless, setHeadless] = useState104(() => initialHeadless);
+  const [beepOnFinish, setBeepOnFinish] = useState104(() => initialBeep);
+  const [ignoreCertificateErrors, setIgnoreCertificateErrors] = useState104(() => initialIgnoreCertificateErrors);
+  const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = useState104(() => initialMultiProcessOnLinux);
+  const [darkMode, setDarkMode] = useState104(() => initialDarkMode);
+  const [openGlOption, setOpenGlOption] = useState104(() => initialGl ?? "default");
+  const [colorSpace, setColorSpace] = useState104(() => initialColorSpace);
+  const [userAgent, setUserAgent] = useState104(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
   const chromiumOptions = useMemo183(() => {
     return {
       headless,
@@ -48889,30 +49237,30 @@ var RenderModal = ({
     multiProcessOnLinux,
     darkMode
   ]);
-  const [outName, setOutName] = useState105(() => initialOutName);
-  const [endFrameOrNull, setEndFrame] = useState105(() => outFrameMark ?? null);
-  const [startFrameOrNull, setStartFrame] = useState105(() => inFrameMark ?? null);
-  const [proResProfileSetting, setProResProfile] = useState105(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
-  const [x264PresetSetting, setx264Preset] = useState105(() => initialx264Preset);
-  const [gopSize, setGopSize] = useState105(() => initialGopSize);
-  const [hardwareAcceleration, setHardwareAcceleration] = useState105(() => initialHardwareAcceleration);
-  const [userPreferredPixelFormat, setPixelFormat] = useState105(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
-  const [preferredQualityControlType, setQualityControl] = useState105(() => initialVideoBitrate === null ? "crf" : "bitrate");
+  const [outName, setOutName] = useState104(() => initialOutName);
+  const [endFrameOrNull, setEndFrame] = useState104(() => outFrameMark ?? null);
+  const [startFrameOrNull, setStartFrame] = useState104(() => inFrameMark ?? null);
+  const [proResProfileSetting, setProResProfile] = useState104(() => initialProResProfile ?? resolvedComposition.defaultProResProfile ?? "hq");
+  const [x264PresetSetting, setx264Preset] = useState104(() => initialx264Preset);
+  const [gopSize, setGopSize] = useState104(() => initialGopSize);
+  const [hardwareAcceleration, setHardwareAcceleration] = useState104(() => initialHardwareAcceleration);
+  const [userPreferredPixelFormat, setPixelFormat] = useState104(() => initialPixelFormat ?? resolvedComposition.defaultPixelFormat ?? renderDefaults.pixelFormat);
+  const [preferredQualityControlType, setQualityControl] = useState104(() => initialVideoBitrate === null ? "crf" : "bitrate");
   const [
     shouldHaveCustomTargetAudioBitrate,
     setShouldHaveCustomTargetAudioBitrate
-  ] = useState105(() => initialAudioBitrate !== null);
-  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState105(() => initialAudioBitrate ?? "320K");
-  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState105(() => initialVideoBitrate ?? "1M");
-  const [encodingMaxRate, setEncodingMaxRate] = useState105(() => initialEncodingMaxRate ?? null);
-  const [encodingBufferSize, setEncodingBufferSize] = useState105(() => initialEncodingBufferSize ?? null);
-  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState105(() => initialNumberOfGifLoops !== null);
-  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState105(() => initialNumberOfGifLoops ?? 0);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState105(() => initialDelayRenderTimeout);
-  const [chromeMode, setChromeMode] = useState105(() => initialChromeMode);
-  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState105(initialOffthreadVideoCacheSizeInBytes);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState105(initialMediaCacheSizeInBytes);
-  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState105(() => initialOffthreadVideoThreads);
+  ] = useState104(() => initialAudioBitrate !== null);
+  const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = useState104(() => initialAudioBitrate ?? "320K");
+  const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = useState104(() => initialVideoBitrate ?? "1M");
+  const [encodingMaxRate, setEncodingMaxRate] = useState104(() => initialEncodingMaxRate ?? null);
+  const [encodingBufferSize, setEncodingBufferSize] = useState104(() => initialEncodingBufferSize ?? null);
+  const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = useState104(() => initialNumberOfGifLoops !== null);
+  const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = useState104(() => initialNumberOfGifLoops ?? 0);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState104(() => initialDelayRenderTimeout);
+  const [chromeMode, setChromeMode] = useState104(() => initialChromeMode);
+  const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState104(initialOffthreadVideoCacheSizeInBytes);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState104(initialMediaCacheSizeInBytes);
+  const [offthreadVideoThreads, setOffthreadVideoThreads] = useState104(() => initialOffthreadVideoThreads);
   const codec = useMemo183(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
@@ -48999,11 +49347,11 @@ var RenderModal = ({
     }
     return null;
   }, [codec, x264PresetSetting, renderMode]);
-  const [inputProps, _setInputProps] = useState105(() => defaultProps);
+  const [inputProps, _setInputProps] = useState104(() => defaultProps);
   const setInputProps = useCallback178((updater) => {
     _setInputProps(updater);
   }, []);
-  const [metadata] = useState105(() => defaultMetadata);
+  const [metadata] = useState104(() => defaultMetadata);
   const endFrame = useMemo183(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
@@ -49136,7 +49484,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState105(() => initialEveryNthFrame);
+  const [everyNthFrameSetting, setEveryNthFrameSetting] = useState104(() => initialEveryNthFrame);
   const everyNthFrame = useMemo183(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
@@ -49317,7 +49665,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect98(() => {
+  useEffect97(() => {
     return () => {
       isMounted.current = false;
     };
@@ -49594,7 +49942,7 @@ var RenderModal = ({
     videoBitrate,
     x264Preset
   ]);
-  const [commandCopiedAt, setCommandCopiedAt] = useState105(null);
+  const [commandCopiedAt, setCommandCopiedAt] = useState104(null);
   const renderDisabled = readOnlyStudio ? false : !outnameValidation.valid || state.type === "load";
   const trigger = useCallback178(() => {
     if (readOnlyStudio) {
@@ -49623,7 +49971,7 @@ var RenderModal = ({
     readOnlyStudio,
     renderMode
   ]);
-  useEffect98(() => {
+  useEffect97(() => {
     if (commandCopiedAt === null) {
       return;
     }
@@ -49632,7 +49980,7 @@ var RenderModal = ({
     }, 2000);
     return () => clearTimeout(timeout);
   }, [commandCopiedAt]);
-  useEffect98(() => {
+  useEffect97(() => {
     if (renderDisabled) {
       return;
     }
@@ -49984,7 +50332,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback182, useContext as useContext122, useMemo as useMemo188, useState as useState109 } from "react";
+import { useCallback as useCallback182, useContext as useContext122, useMemo as useMemo188, useState as useState108 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx319 } from "react/jsx-runtime";
@@ -50003,15 +50351,15 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect99, useRef as useRef69, useState as useState106 } from "react";
+import { useEffect as useEffect98, useRef as useRef69, useState as useState105 } from "react";
 var useEncodableAudioCodecs = (container60) => {
   const cacheRef = useRef69({});
-  const [codecsByContainer, setCodecsByContainer] = useState106(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState105(() => {
     return {
       [container60]: getSupportedAudioCodecsForContainer(container60)
     };
   });
-  useEffect99(() => {
+  useEffect98(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -50045,15 +50393,15 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect100, useRef as useRef70, useState as useState107 } from "react";
+import { useEffect as useEffect99, useRef as useRef70, useState as useState106 } from "react";
 var useEncodableVideoCodecs = (container60) => {
   const cacheRef = useRef70({});
-  const [codecsByContainer, setCodecsByContainer] = useState107(() => {
+  const [codecsByContainer, setCodecsByContainer] = useState106(() => {
     return {
       [container60]: getSupportedVideoCodecsForContainer(container60)
     };
   });
-  useEffect100(() => {
+  useEffect99(() => {
     const cached = cacheRef.current[container60];
     if (cached) {
       return;
@@ -50741,7 +51089,7 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback180, useEffect as useEffect101, useState as useState108 } from "react";
+import { useCallback as useCallback180, useEffect as useEffect100, useState as useState107 } from "react";
 
 // src/icons/check-circle-filled.tsx
 import { jsx as jsx325 } from "react/jsx-runtime";
@@ -50961,9 +51309,9 @@ var WebRenderModalLicense = ({
   setLicenseKey,
   initialPublicLicenseKey
 }) => {
-  const [licenseValidation, setLicenseValidation] = useState108({ valid: true, message: null, details: null });
-  const [isLoading, setIsLoading] = useState108(false);
-  useEffect101(() => {
+  const [licenseValidation, setLicenseValidation] = useState107({ valid: true, message: null, details: null });
+  const [isLoading, setIsLoading] = useState107(false);
+  useEffect100(() => {
     if (licenseKey === null || licenseKey === "free-license") {
       return setLicenseValidation({
         valid: true,
@@ -51340,34 +51688,34 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [isVideo] = useState109(() => {
+  const [isVideo] = useState108(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
-  const [renderMode, setRenderMode] = useState109(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
-  const [tab, setTab] = useState109("general");
-  const [imageFormat, setImageFormat] = useState109(() => initialStillImageFormat ?? "png");
-  const [frame2, setFrame] = useState109(() => initialFrame);
-  const [logLevel, setLogLevel] = useState109(() => initialLogLevel);
-  const [inputProps, _setInputProps] = useState109(() => defaultProps);
+  const [renderMode, setRenderMode] = useState108(initialContainer && isAudioOnlyContainer(initialContainer) ? "audio" : isVideo ? "video" : "still");
+  const [tab, setTab] = useState108("general");
+  const [imageFormat, setImageFormat] = useState108(() => initialStillImageFormat ?? "png");
+  const [frame2, setFrame] = useState108(() => initialFrame);
+  const [logLevel, setLogLevel] = useState108(() => initialLogLevel);
+  const [inputProps, _setInputProps] = useState108(() => defaultProps);
   const setInputProps = useCallback182((updater) => {
     _setInputProps(updater);
   }, []);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState109(initialDelayRenderTimeout ?? 30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState109(initialMediaCacheSizeInBytes);
-  const [codec, setCodec] = useState109(initialVideoCodec ?? "h264");
-  const [container61, setContainer] = useState109(initialContainer ?? "mp4");
-  const [audioCodec, setAudioCodec] = useState109(initialAudioCodec ?? "aac");
-  const [audioBitrate, setAudioBitrate] = useState109(initialAudioBitrate ?? "medium");
-  const [videoBitrate, setVideoBitrate] = useState109(initialVideoBitrate ?? "high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState109(initialHardwareAcceleration ?? "no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState109(initialKeyframeIntervalInSeconds ?? 5);
-  const [startFrame, setStartFrame] = useState109(() => inFrameMark);
-  const [endFrame, setEndFrame] = useState109(() => outFrameMark);
-  const [transparent, setTransparent] = useState109(initialTransparent ?? false);
-  const [muted, setMuted] = useState109(initialMuted ?? false);
-  const [scale, setScale] = useState109(initialScale ?? 1);
-  const [licenseKey, setLicenseKey] = useState109(initialLicenseKey);
-  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState109(initialAllowHtmlInCanvas ?? false);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState108(initialDelayRenderTimeout ?? 30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState108(initialMediaCacheSizeInBytes);
+  const [codec, setCodec] = useState108(initialVideoCodec ?? "h264");
+  const [container61, setContainer] = useState108(initialContainer ?? "mp4");
+  const [audioCodec, setAudioCodec] = useState108(initialAudioCodec ?? "aac");
+  const [audioBitrate, setAudioBitrate] = useState108(initialAudioBitrate ?? "medium");
+  const [videoBitrate, setVideoBitrate] = useState108(initialVideoBitrate ?? "high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState108(initialHardwareAcceleration ?? "no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState108(initialKeyframeIntervalInSeconds ?? 5);
+  const [startFrame, setStartFrame] = useState108(() => inFrameMark);
+  const [endFrame, setEndFrame] = useState108(() => outFrameMark);
+  const [transparent, setTransparent] = useState108(initialTransparent ?? false);
+  const [muted, setMuted] = useState108(initialMuted ?? false);
+  const [scale, setScale] = useState108(initialScale ?? 1);
+  const [licenseKey, setLicenseKey] = useState108(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState108(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
   const effectiveAudioCodec = useMemo188(() => {
@@ -51394,7 +51742,7 @@ var WebRenderModal = ({
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const [initialOutNameState] = useState109(() => {
+  const [initialOutNameState] = useState108(() => {
     if (initialDefaultOutName) {
       return initialDefaultOutName;
     }
@@ -51410,7 +51758,7 @@ var WebRenderModal = ({
     }
     return defaultOut;
   });
-  const [outName, setOutName] = useState109(() => initialOutNameState);
+  const [outName, setOutName] = useState108(() => initialOutNameState);
   const updateOutNameExtension = useCallback182((extension) => {
     setOutName((prev) => getStringBeforeSuffix(prev) + "." + extension);
   }, []);
@@ -51850,10 +52198,10 @@ var WebRenderModalWithLoader = (props) => {
 import {
   useCallback as useCallback183,
   useContext as useContext123,
-  useEffect as useEffect102,
+  useEffect as useEffect101,
   useMemo as useMemo189,
   useRef as useRef71,
-  useState as useState110
+  useState as useState109
 } from "react";
 import { Internals as Internals95 } from "remotion";
 import { jsx as jsx330, jsxs as jsxs178 } from "react/jsx-runtime";
@@ -51945,9 +52293,9 @@ var EasingEditorModal = ({ state }) => {
   const { setPropStatuses } = useContext123(Internals95.VisualModeSettersContext);
   const { overrideIdToNodePathMappings } = useContext123(Internals95.OverrideIdsToNodePathsGettersContext);
   const svgRef = useRef71(null);
-  const [bezier, setBezier] = useState110(() => easingToBezier(state.initialEasing));
-  const [saving, setSaving] = useState110(false);
-  const [activeHandle, setActiveHandle] = useState110(null);
+  const [bezier, setBezier] = useState109(() => easingToBezier(state.initialEasing));
+  const [saving, setSaving] = useState109(false);
+  const [activeHandle, setActiveHandle] = useState109(null);
   const close = useCallback183(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
@@ -51988,7 +52336,7 @@ var EasingEditorModal = ({ state }) => {
       return next;
     });
   }, [getValueFromPointer]);
-  useEffect102(() => {
+  useEffect101(() => {
     if (activeHandle === null) {
       return;
     }
@@ -52324,7 +52672,7 @@ var EasingEditorModal = ({ state }) => {
 };
 
 // src/components/Timeline/KeyframeSettingsModal.tsx
-import { useCallback as useCallback184, useContext as useContext124, useMemo as useMemo190, useState as useState111 } from "react";
+import { useCallback as useCallback184, useContext as useContext124, useMemo as useMemo190, useState as useState110 } from "react";
 import { Internals as Internals96 } from "remotion";
 import { jsx as jsx331, jsxs as jsxs179, Fragment as Fragment63 } from "react/jsx-runtime";
 var container62 = {
@@ -52380,10 +52728,10 @@ var KeyframeSettingsModal = ({ state }) => {
   const { setSelectedModal } = useContext124(ModalsContext);
   const { setPropStatuses } = useContext124(Internals96.VisualModeSettersContext);
   const { previewServerState } = useContext124(StudioServerConnectionCtx);
-  const [left4, setLeft] = useState111(state.status.clamping.left);
-  const [right5, setRight] = useState111(state.status.clamping.right);
-  const [posterize, setPosterize] = useState111(state.status.posterize ?? 0);
-  const [saving, setSaving] = useState111(false);
+  const [left4, setLeft] = useState110(state.status.clamping.left);
+  const [right5, setRight] = useState110(state.status.clamping.right);
+  const [posterize, setPosterize] = useState110(state.status.posterize ?? 0);
+  const [saving, setSaving] = useState110(false);
   const canEditClamping = state.status.interpolationFunction === "interpolate";
   const close = useCallback184(() => {
     setSelectedModal(null);
@@ -52543,7 +52891,7 @@ var KeyframeSettingsModal = ({ state }) => {
 import { useCallback as useCallback187, useMemo as useMemo192 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback185, useEffect as useEffect103, useState as useState112 } from "react";
+import { useCallback as useCallback185, useEffect as useEffect102, useState as useState111 } from "react";
 import { jsx as jsx332, jsxs as jsxs180 } from "react/jsx-runtime";
 var iconStyle9 = {
   width: 16,
@@ -52573,7 +52921,7 @@ var labelStyle6 = {
   fontSize: 14
 };
 var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
-  const [copied, setCopied] = useState112(false);
+  const [copied, setCopied] = useState111(false);
   const onClick = useCallback185(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
@@ -52581,7 +52929,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect103(() => {
+  useEffect102(() => {
     if (!copied) {
       return;
     }
@@ -52606,7 +52954,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback186, useMemo as useMemo191, useState as useState113 } from "react";
+import { useCallback as useCallback186, useMemo as useMemo191, useState as useState112 } from "react";
 import { jsx as jsx333 } from "react/jsx-runtime";
 var svgStyle6 = {
   width: "11px",
@@ -52621,7 +52969,7 @@ var buttonStyle7 = {
   alignItems: "center"
 };
 var OpenIssueButton = ({ link: link4 }) => {
-  const [hovered, setHovered] = useState113(false);
+  const [hovered, setHovered] = useState112(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
   const handleClick = useCallback186(() => {
     window.open(link4, "_blank");
@@ -52935,11 +53283,11 @@ var Modals = ({ readOnlyStudio }) => {
 };
 
 // src/components/SequencePropsSubscriptionProvider.tsx
-import { useState as useState114, useCallback as useCallback188, useMemo as useMemo193 } from "react";
+import { useState as useState113, useCallback as useCallback188, useMemo as useMemo193 } from "react";
 import { Internals as Internals97 } from "remotion";
 import { jsx as jsx337 } from "react/jsx-runtime";
 var SequencePropsSubscriptionProvider = ({ children }) => {
-  const [overrideToNodePathMap, setOverrideIdToNodePathMap] = useState114({});
+  const [overrideToNodePathMap, setOverrideIdToNodePathMap] = useState113({});
   const setOverrideIdToNodePath = useCallback188((overrideId, state) => {
     setOverrideIdToNodePathMap((prev) => {
       const existing = prev[overrideId];
@@ -52969,7 +53317,7 @@ import {
   HtmlInCanvasCapture,
   isHtmlInCanvasAvailable
 } from "@remotion/canvas-capture";
-import { useEffect as useEffect104, useMemo as useMemo194, useRef as useRef72 } from "react";
+import { useEffect as useEffect103, useMemo as useMemo194, useRef as useRef72 } from "react";
 import { jsx as jsx338 } from "react/jsx-runtime";
 var logCaptureError = (message, err) => {
   console.error(message, err instanceof Error ? err.message : String(err));
@@ -52978,7 +53326,7 @@ var StudioCanvasCapture = ({ children, density }) => {
   const captureRef = useRef72(null);
   const isSupported = useMemo194(() => isHtmlInCanvasAvailable(), []);
   const keybindings = useKeybinding();
-  useEffect104(() => {
+  useEffect103(() => {
     if (!isSupported) {
       return;
     }
@@ -53020,7 +53368,7 @@ var background = {
 var DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 var BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === "undefined" || process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === null ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 var Editor = ({ Root, readOnlyStudio }) => {
-  const [drawElement, setDrawElement] = useState115(null);
+  const [drawElement, setDrawElement] = useState114(null);
   const size3 = PlayerInternals22.useElementSize(drawElement, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
@@ -53045,7 +53393,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const MemoRoot = useMemo195(() => {
     return React233.memo(Root);
   }, [Root]);
-  const [renderError, setRenderError] = useState115(null);
+  const [renderError, setRenderError] = useState114(null);
   const clearError = useCallback189(() => {
     setRenderError(null);
   }, []);
@@ -53109,7 +53457,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals23 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback190, useContext as useContext126, useMemo as useMemo196, useState as useState116 } from "react";
+import { useCallback as useCallback190, useContext as useContext126, useMemo as useMemo196, useState as useState115 } from "react";
 import { Internals as Internals99 } from "remotion";
 import { jsx as jsx340 } from "react/jsx-runtime";
 var key6 = "remotion.previewSize";
@@ -53130,8 +53478,8 @@ var loadPreviewSizeOption = () => {
   return JSON.parse(item2);
 };
 var PreviewSizeProvider = ({ children }) => {
-  const [size3, setSizeState] = useState116(() => loadPreviewSizeOption());
-  const [translation, setTranslation] = useState116(() => {
+  const [size3, setSizeState] = useState115(() => loadPreviewSizeOption());
+  const [translation, setTranslation] = useState115(() => {
     return {
       x: 0,
       y: 0
@@ -53166,10 +53514,10 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback191, useMemo as useMemo197, useState as useState117 } from "react";
+import { useCallback as useCallback191, useMemo as useMemo197, useState as useState116 } from "react";
 import { jsx as jsx341 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
-  const [checkerboard, setCheckerboardState] = useState117(() => loadCheckerboardOption());
+  const [checkerboard, setCheckerboardState] = useState116(() => loadCheckerboardOption());
   const setCheckerboard = useCallback191((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
@@ -53190,12 +53538,12 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo198, useState as useState118 } from "react";
+import { useMemo as useMemo198, useState as useState117 } from "react";
 import { Internals as Internals100 } from "remotion";
 import { jsx as jsx342 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
-  const [mediaMuted, setMediaMuted] = useState118(() => loadMuteOption());
-  const [mediaVolume, setMediaVolume] = useState118(1);
+  const [mediaMuted, setMediaMuted] = useState117(() => loadMuteOption());
+  const [mediaVolume, setMediaVolume] = useState117(1);
   const mediaVolumeContextValue = useMemo198(() => {
     return {
       mediaMuted,
@@ -53218,10 +53566,10 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo199, useState as useState119 } from "react";
+import { useMemo as useMemo199, useState as useState118 } from "react";
 import { jsx as jsx343 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
-  const [modalContextType, setModalContextType] = useState119(null);
+  const [modalContextType, setModalContextType] = useState118(null);
   const modalsContext = useMemo199(() => {
     return {
       selectedModal: modalContextType,
@@ -53235,7 +53583,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect105, useMemo as useMemo200, useState as useState120 } from "react";
+import { useEffect as useEffect104, useMemo as useMemo200, useState as useState119 } from "react";
 
 // src/state/marks.ts
 var localStorageKey4 = () => `remotion.editor.marksv2`;
@@ -53253,13 +53601,13 @@ var loadMarks = () => {
 // src/components/SetTimelineInOutProvider.tsx
 import { jsx as jsx344 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
-  const [inAndOutFrames, setInAndOutFrames] = useState120(() => loadMarks());
+  const [inAndOutFrames, setInAndOutFrames] = useState119(() => loadMarks());
   const setTimelineInOutContextValue = useMemo200(() => {
     return {
       setInAndOutFrames
     };
   }, []);
-  useEffect105(() => {
+  useEffect104(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
   return /* @__PURE__ */ jsx344(TimelineInOutContext.Provider, {
@@ -53272,13 +53620,13 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback192, useMemo as useMemo201, useRef as useRef73, useState as useState121 } from "react";
+import { useCallback as useCallback192, useMemo as useMemo201, useRef as useRef73, useState as useState120 } from "react";
 import { jsx as jsx345 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
-  const [guidesList, setGuidesList] = useState121(() => loadGuidesList());
-  const [draggingGuideId, setDraggingGuideId] = useState121(null);
-  const [hoveredGuideId, setHoveredGuideId] = useState121(null);
-  const [editorShowGuides, setEditorShowGuidesState] = useState121(() => loadEditorShowGuidesOption());
+  const [guidesList, setGuidesList] = useState120(() => loadGuidesList());
+  const [draggingGuideId, setDraggingGuideId] = useState120(null);
+  const [hoveredGuideId, setHoveredGuideId] = useState120(null);
+  const [editorShowGuides, setEditorShowGuidesState] = useState120(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef73(false);
   const shouldDeleteGuideRef = useRef73(false);
   const setEditorShowGuides = useCallback192((newValue) => {
@@ -53315,10 +53663,10 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowOutlinesProvider.tsx
-import { useCallback as useCallback193, useMemo as useMemo202, useState as useState122 } from "react";
+import { useCallback as useCallback193, useMemo as useMemo202, useState as useState121 } from "react";
 import { jsx as jsx346 } from "react/jsx-runtime";
 var ShowOutlinesProvider = ({ children }) => {
-  const [editorShowOutlines, setEditorShowOutlinesState] = useState122(() => loadEditorShowOutlinesOption());
+  const [editorShowOutlines, setEditorShowOutlinesState] = useState121(() => loadEditorShowOutlinesOption());
   const setEditorShowOutlines = useCallback193((newValue) => {
     setEditorShowOutlinesState((prevState) => {
       const newVal = newValue(prevState);
@@ -53339,10 +53687,10 @@ var ShowOutlinesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback194, useMemo as useMemo203, useState as useState123 } from "react";
+import { useCallback as useCallback194, useMemo as useMemo203, useState as useState122 } from "react";
 import { jsx as jsx347 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
-  const [editorShowRulers, setEditorShowRulersState] = useState123(() => loadEditorShowRulersOption());
+  const [editorShowRulers, setEditorShowRulersState] = useState122(() => loadEditorShowRulersOption());
   const setEditorShowRulers = useCallback194((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
@@ -53363,11 +53711,11 @@ var ShowRulersProvider = ({ children }) => {
 };
 
 // src/components/VisualControls/VisualControlsUndoSync.tsx
-import { useContext as useContext127, useEffect as useEffect106 } from "react";
+import { useContext as useContext127, useEffect as useEffect105 } from "react";
 var VisualControlsUndoSync = () => {
   const { subscribeToEvent } = useContext127(StudioServerConnectionCtx);
   const { updateValue } = useContext127(SetVisualControlsContext);
-  useEffect106(() => {
+  useEffect105(() => {
     const unsub = subscribeToEvent("visual-control-values-changed", (event) => {
       if (event.type !== "visual-control-values-changed") {
         return;
@@ -53382,10 +53730,10 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback195, useMemo as useMemo204, useState as useState124 } from "react";
+import { useCallback as useCallback195, useMemo as useMemo204, useState as useState123 } from "react";
 import { jsx as jsx348 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
-  const [editorZoomGestures, setEditorZoomGesturesState] = useState124(() => loadEditorZoomGesturesOption());
+  const [editorZoomGestures, setEditorZoomGesturesState] = useState123(() => loadEditorZoomGesturesOption());
   const setEditorZoomGestures = useCallback195((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
@@ -53532,15 +53880,15 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback196, useEffect as useEffect107, useMemo as useMemo205, useState as useState125 } from "react";
+import { useCallback as useCallback196, useEffect as useEffect106, useMemo as useMemo205, useState as useState124 } from "react";
 import { jsx as jsx351 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
-  const [fastRefreshes, setFastRefreshes] = useState125(0);
-  const [manualRefreshes, setManualRefreshes] = useState125(0);
+  const [fastRefreshes, setFastRefreshes] = useState124(0);
+  const [manualRefreshes, setManualRefreshes] = useState124(0);
   const increaseManualRefreshes = useCallback196(() => {
     setManualRefreshes((i) => i + 1);
   }, []);
-  useEffect107(() => {
+  useEffect106(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -53721,15 +54069,15 @@ var injectCSS = () => {
 import {
   useCallback as useCallback197,
   useContext as useContext129,
-  useEffect as useEffect108,
+  useEffect as useEffect107,
   useImperativeHandle as useImperativeHandle14,
   useMemo as useMemo206,
-  useState as useState126
+  useState as useState125
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals102 } from "remotion";
 import { jsx as jsx352 } from "react/jsx-runtime";
 var ResolveCompositionConfigInStudio = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState126(null);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState125(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext129(Internals102.CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext129(FastRefreshContext);
   if (manualRefreshes) {}
@@ -53742,7 +54090,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
   const inputProps = useMemo206(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
-  const [resolvedConfigs, setResolvedConfigs] = useState126({});
+  const [resolvedConfigs, setResolvedConfigs] = useState125({});
   const selectedEditorProps = useMemo206(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -53897,7 +54245,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
   }, [currentDefaultProps, inputProps]);
   const canResolve = selectedComposition && Boolean(selectedComposition.calculateMetadata);
   const shouldIgnoreUpdate = typeof window !== "undefined" && window.remotion_ignoreFastRefreshUpdate && fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
-  useEffect108(() => {
+  useEffect107(() => {
     if (shouldIgnoreUpdate) {
       return;
     }
@@ -53929,7 +54277,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     selectedComposition?.width,
     shouldIgnoreUpdate
   ]);
-  useEffect108(() => {
+  useEffect107(() => {
     if (renderModalComposition && !isTheSame) {
       const combinedProps = {
         ...renderModalComposition.defaultProps ?? {},
@@ -54018,7 +54366,7 @@ var StudioInner = ({ rootComponent, readOnly }) => {
   });
 };
 var Studio = ({ rootComponent, readOnly }) => {
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     injectCSS();
   }, []);
   return /* @__PURE__ */ jsx353(FastRefreshProvider, {