@remotion/studio 4.0.434 → 4.0.436

package/dist/esm/{chunk-t3wtt582.js → chunk-x88z6n54.js}

@@ -1086,9 +1086,46 @@ var SidebarContextProvider = ({ children }) => {
 };
 
 // src/components/CompositionSelector.tsx
-import { useCallback as useCallback16, useContext as useContext9, useMemo as useMemo21 } from "react";
+import { useCallback as useCallback16, useContext as useContext9, useMemo as useMemo22 } from "react";
 import { Internals as Internals7 } from "remotion";
 
+// src/error-overlay/remotion-overlay/ShortcutHint.tsx
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var cmdOrCtrlCharacter = window.navigator.platform.startsWith("Mac") ? "⌘" : "Ctrl";
+var container3 = {
+  display: "inline-block",
+  marginLeft: 6,
+  opacity: 0.6,
+  verticalAlign: "middle",
+  fontSize: 14
+};
+var ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
+  const style = useMemo9(() => {
+    if (keyToPress === "↵") {
+      return {
+        display: "inline-block",
+        transform: `translateY(2px)`,
+        fontSize: 14
+      };
+    }
+    return {};
+  }, [keyToPress]);
+  if (areKeyboardShortcutsDisabled()) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3("span", {
+    style: container3,
+    children: [
+      cmdOrCtrl ? `${cmdOrCtrlCharacter}` : "",
+      /* @__PURE__ */ jsx10("span", {
+        style,
+        children: keyToPress.toUpperCase()
+      })
+    ]
+  });
+};
+
 // src/helpers/create-folder-tree.ts
 var buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
   const notInFolder = files.filter((f) => !f.name.includes("/"));
@@ -1270,36 +1307,45 @@ var sortItemsByNonceHistory = (items) => {
   return result;
 };
 
+// src/state/modals.ts
+import { createContext as createContext9 } from "react";
+var ModalsContext = createContext9({
+  selectedModal: null,
+  setSelectedModal: () => {
+    return;
+  }
+});
+
 // src/components/CompositionSelectorItem.tsx
-import { useCallback as useCallback15, useContext as useContext8, useMemo as useMemo20, useState as useState14 } from "react";
+import { useCallback as useCallback15, useContext as useContext8, useMemo as useMemo21, useState as useState14 } from "react";
 
 // src/icons/folder.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var CollapsedFolderIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx10("svg", {
+  return /* @__PURE__ */ jsx11("svg", {
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx10("path", {
+    children: /* @__PURE__ */ jsx11("path", {
       fill: color,
       d: "M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32V416z"
     })
   });
 };
 var ExpandedFolderIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx10("svg", {
+  return /* @__PURE__ */ jsx11("svg", {
     viewBox: "0 0 576 512",
     ...props,
-    children: /* @__PURE__ */ jsx10("path", {
+    children: /* @__PURE__ */ jsx11("path", {
       fill: color,
       d: "M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6zM543.2 244.8l-60 192C481.1 443.5 475 448 467.1 448H64c-3.322 0-6.357-.9551-9.373-1.898c-2.184-1.17-4.109-2.832-5.596-4.977c-3.031-4.375-3.703-9.75-1.828-14.73l72-192C121.5 228.2 127.5 224 134.2 224h393.8c5.141 0 9.844 2.375 12.89 6.516C543.9 234.7 544.8 239.9 543.2 244.8z"
     })
   });
 };
 var ExpandedFolderIconSolid = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx10("svg", {
+  return /* @__PURE__ */ jsx11("svg", {
     viewBox: "0 0 576 512",
     ...props,
-    children: /* @__PURE__ */ jsx10("path", {
+    children: /* @__PURE__ */ jsx11("path", {
       fill: color,
       d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z"
     })
@@ -1307,12 +1353,12 @@ var ExpandedFolderIconSolid = ({ color, ...props }) => {
 };
 
 // src/icons/still.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var StillIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx11("svg", {
+  return /* @__PURE__ */ jsx12("svg", {
     ...props,
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx11("path", {
+    children: /* @__PURE__ */ jsx12("path", {
       fill: color,
       d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 208C211.8 208 176 243.8 176 288C176 332.2 211.8 368 256 368C300.2 368 336 332.2 336 288C336 243.8 300.2 208 256 208zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 128C46.33 128 32 142.3 32 160V416C32 433.7 46.33 448 64 448H448C465.7 448 480 433.7 480 416V160C480 142.3 465.7 128 448 128H350.3L332.6 74.94C330.4 68.41 324.3 64 317.4 64H194.6C187.7 64 181.6 68.41 179.4 74.94L161.7 128H64z"
     })
@@ -1320,33 +1366,24 @@ var StillIcon = ({ color, ...props }) => {
 };
 
 // src/icons/video.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FilmIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx12("svg", {
+  return /* @__PURE__ */ jsx13("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx12("path", {
+    children: /* @__PURE__ */ jsx13("path", {
       fill: color,
       d: "M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM384 64v176H128V64H384zM32 96c0-17.64 14.36-32 32-32h32v80H32V96zM32 176h64v64H32V176zM32 272h64v64H32V272zM64 448c-17.64 0-32-14.36-32-32v-48h64V448H64zM128 448V272h256V448H128zM480 416c0 17.64-14.36 32-32 32h-32v-80h64V416zM480 336h-64v-64h64V336zM480 240h-64v-64h64V240zM480 144h-64V64h32c17.64 0 32 14.36 32 32V144z"
     })
   });
 };
 
-// src/state/modals.ts
-import { createContext as createContext9 } from "react";
-var ModalsContext = createContext9({
-  selectedModal: null,
-  setSelectedModal: () => {
-    return;
-  }
-});
-
 // src/components/CompositionContextButton.tsx
-import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo18 } from "react";
 
 // src/helpers/client-id.tsx
-import React12, { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo10, useRef as useRef6 } from "react";
+import React13, { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo11, useRef as useRef6 } from "react";
 import { Internals as Internals4 } from "remotion";
 
 // src/components/Notifications/NotificationCenter.tsx
@@ -1359,7 +1396,7 @@ import {
 
 // src/components/Notifications/Notification.tsx
 import { useEffect as useEffect6 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var notification = {
   backgroundColor: "#111111",
   color: "white",
@@ -1386,7 +1423,7 @@ var Notification = ({ children, id, duration, created, onRemove }) => {
       clearTimeout(timeout);
     };
   }, [created, duration, id, onRemove]);
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx14("div", {
     className: "css-reset",
     style: notification,
     children
@@ -1394,8 +1431,8 @@ var Notification = ({ children, id, duration, created, onRemove }) => {
 };
 
 // src/components/Notifications/NotificationCenter.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var container3 = {
+import { jsx as jsx15 } from "react/jsx-runtime";
+var container4 = {
   position: "absolute",
   justifyContent: "center",
   alignItems: "center",
@@ -1449,10 +1486,10 @@ var NotificationCenter = () => {
       addNotification
     };
   }, [addNotification]);
-  return /* @__PURE__ */ jsx14("div", {
-    style: container3,
+  return /* @__PURE__ */ jsx15("div", {
+    style: container4,
     children: notifications.map((n) => {
-      return /* @__PURE__ */ jsx14(Notification, {
+      return /* @__PURE__ */ jsx15(Notification, {
         created: n.created,
         duration: n.duration,
         id: n.id,
@@ -1481,12 +1518,12 @@ var playBeepSound = async (renderId) => {
 var PlayBeepSound_default = playBeepSound;
 
 // src/components/RenderQueue/context.tsx
-import React11, {
+import React12, {
   createRef as createRef4,
   useCallback as useCallback5,
   useEffect as useEffect7,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef5,
   useState as useState8
 } from "react";
@@ -1525,7 +1562,7 @@ var cancelAbortController = (jobId) => {
 };
 
 // src/components/RenderQueue/context.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var restorePersistedClientRenders = () => {
   const persisted = window.remotion_initialClientRenders ?? [];
   return persisted.map((r) => ({ ...r, status: "done" }));
@@ -1537,7 +1574,7 @@ var noopString = () => "";
 var noop2 = () => {
   return;
 };
-var RenderQueueContext = React11.createContext({
+var RenderQueueContext = React12.createContext({
   jobs: [],
   serverJobs: [],
   clientJobs: [],
@@ -1574,7 +1611,13 @@ var RenderQueueContextProvider = ({ children }) => {
     setClientJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
       ...job,
       status: "running",
-      progress: { encodedFrames: 0, totalFrames: 0 }
+      progress: {
+        encodedFrames: 0,
+        totalFrames: 0,
+        doneIn: null,
+        renderEstimatedTime: 0,
+        progress: 0
+      }
     } : job));
     processJobCallbackRef.current(nextJob);
   }, [clientJobs, currentlyProcessing]);
@@ -1673,7 +1716,7 @@ var RenderQueueContextProvider = ({ children }) => {
       });
     }
   }), []);
-  const value = useMemo9(() => {
+  const value = useMemo10(() => {
     return {
       jobs: [...serverJobs, ...clientJobs].sort((a, b) => a.startedAt - b.startedAt),
       serverJobs,
@@ -1705,15 +1748,15 @@ var RenderQueueContextProvider = ({ children }) => {
     cancelClientJob,
     setProcessJobCallback
   ]);
-  return /* @__PURE__ */ jsx15(RenderQueueContext.Provider, {
+  return /* @__PURE__ */ jsx16(RenderQueueContext.Provider, {
     value,
     children
   });
 };
 
 // src/helpers/client-id.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var StudioServerConnectionCtx = React12.createContext({
+import { jsx as jsx17 } from "react/jsx-runtime";
+var StudioServerConnectionCtx = React13.createContext({
   previewServerState: {
     type: "init"
   },
@@ -1797,28 +1840,28 @@ var PreviewServerConnection = ({ children, readOnlyStudio }) => {
       close();
     };
   }, [openEventSource, readOnlyStudio]);
-  const [state, setState] = React12.useState({
+  const [state, setState] = React13.useState({
     type: "init"
   });
-  const context = useMemo10(() => {
+  const context = useMemo11(() => {
     return {
       previewServerState: state,
       subscribeToEvent
     };
   }, [state, subscribeToEvent]);
-  return /* @__PURE__ */ jsx16(StudioServerConnectionCtx.Provider, {
+  return /* @__PURE__ */ jsx17(StudioServerConnectionCtx.Provider, {
     value: context,
     children
   });
 };
 
 // src/icons/ellipsis.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var EllipsisIcon = (props) => {
-  return /* @__PURE__ */ jsx17("svg", {
+  return /* @__PURE__ */ jsx18("svg", {
     ...props.svgProps,
     viewBox: "0 0 448 512",
-    children: /* @__PURE__ */ jsx17("path", {
+    children: /* @__PURE__ */ jsx18("path", {
       fill: props.fill,
       d: "M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"
     })
@@ -1827,12 +1870,12 @@ var EllipsisIcon = (props) => {
 
 // src/components/InlineDropdown.tsx
 import { PlayerInternals as PlayerInternals3 } from "@remotion/player";
-import { useCallback as useCallback11, useMemo as useMemo16, useRef as useRef9, useState as useState12 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo17, useRef as useRef9, useState as useState12 } from "react";
 import ReactDOM2 from "react-dom";
 
 // src/components/InlineAction.tsx
-import { useCallback as useCallback7, useMemo as useMemo11, useState as useState9 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useMemo as useMemo12, useState as useState9 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var InlineAction = ({
   renderAction,
   onClick,
@@ -1847,7 +1890,7 @@ var InlineAction = ({
   const onPointerLeave = useCallback7(() => {
     setHovered(false);
   }, []);
-  const style = useMemo11(() => {
+  const style = useMemo12(() => {
     return {
       border: "none",
       background: disabled ? "transparent" : getBackgroundFromHoverState({ hovered, selected: false }),
@@ -1860,7 +1903,7 @@ var InlineAction = ({
       pointerEvents: disabled ? "none" : "auto"
     };
   }, [disabled, hovered]);
-  return /* @__PURE__ */ jsx18("button", {
+  return /* @__PURE__ */ jsx19("button", {
     type: "button",
     onPointerEnter,
     onPointerLeave,
@@ -1924,7 +1967,7 @@ var inlineCodeSnippet = {
 };
 
 // src/components/NewComposition/MenuContent.tsx
-import { useCallback as useCallback10, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef8, useState as useState11 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect10, useMemo as useMemo16, useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/Menu/is-menu-item.tsx
 var MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
@@ -1936,7 +1979,7 @@ var isMenuItem = (el) => {
 };
 
 // src/components/Menu/MenuDivider.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var menuDivider = {
   marginTop: 4,
   marginBottom: 4,
@@ -1944,19 +1987,19 @@ var menuDivider = {
   backgroundColor: INPUT_BORDER_COLOR_HOVERED
 };
 var MenuDivider = () => {
-  return /* @__PURE__ */ jsx19("div", {
+  return /* @__PURE__ */ jsx20("div", {
     style: menuDivider
   });
 };
 
 // src/components/Menu/MenuSubItem.tsx
 import { PlayerInternals as PlayerInternals2 } from "@remotion/player";
-import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef7, useState as useState10 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo15, useRef as useRef7, useState as useState10 } from "react";
 import ReactDOM from "react-dom";
 
 // src/icons/caret.tsx
-import { useMemo as useMemo12 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { useMemo as useMemo13 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var caret = {
   height: 12
 };
@@ -1966,36 +2009,36 @@ var caretDown = {
 var angleDown = {
   width: 10
 };
-var CaretRight = () => /* @__PURE__ */ jsx20("svg", {
+var CaretRight = () => /* @__PURE__ */ jsx21("svg", {
   viewBox: "0 0 192 512",
   style: caret,
-  children: /* @__PURE__ */ jsx20("path", {
+  children: /* @__PURE__ */ jsx21("path", {
     fill: "currentColor",
     d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
   })
 });
 var CaretDown = () => {
-  return /* @__PURE__ */ jsx20("svg", {
+  return /* @__PURE__ */ jsx21("svg", {
     viewBox: "0 0 320 512",
     style: caretDown,
-    children: /* @__PURE__ */ jsx20("path", {
+    children: /* @__PURE__ */ jsx21("path", {
       fill: "currentColor",
       d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
     })
   });
 };
 var AngleDown = ({ down }) => {
-  const style = useMemo12(() => {
+  const style = useMemo13(() => {
     return {
       ...angleDown,
       transform: down ? "rotate(180deg)" : "rotate(0deg)",
       marginTop: 1
     };
   }, [down]);
-  return /* @__PURE__ */ jsx20("svg", {
+  return /* @__PURE__ */ jsx21("svg", {
     style,
     viewBox: "0 0 448 512",
-    children: /* @__PURE__ */ jsx20("path", {
+    children: /* @__PURE__ */ jsx21("path", {
       fill: LIGHT_TEXT,
       d: "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
     })
@@ -2003,11 +2046,11 @@ var AngleDown = ({ down }) => {
 };
 
 // src/components/layout.tsx
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { useMemo as useMemo14 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SPACING_UNIT = 8;
 var Spacing = ({ x = 0, y = 0, block = false }) => {
-  const style = useMemo13(() => {
+  const style = useMemo14(() => {
     return {
       display: block ? "block" : "inline-block",
       width: x * SPACING_UNIT,
@@ -2015,17 +2058,17 @@ var Spacing = ({ x = 0, y = 0, block = false }) => {
       flexShrink: 0
     };
   }, [block, x, y]);
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     style
   });
 };
 var flexCss = { flex: 1 };
-var Flex = ({ children }) => /* @__PURE__ */ jsx21("div", {
+var Flex = ({ children }) => /* @__PURE__ */ jsx22("div", {
   style: flexCss,
   children
 });
 var Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
-  const finalStyle = useMemo13(() => {
+  const finalStyle = useMemo14(() => {
     return {
       ...style,
       display: "flex",
@@ -2035,7 +2078,7 @@ var Row = ({ children, justify, className, align, flex, style = {}, ...other })
       flex: flex ?? undefined
     };
   }, [align, flex, justify, style]);
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     className,
     style: finalStyle,
     ...other,
@@ -2043,7 +2086,7 @@ var Row = ({ children, justify, className, align, flex, style = {}, ...other })
   });
 };
 var Column = ({ children, justify, className, align, style = {} }) => {
-  const finalStyle = useMemo13(() => {
+  const finalStyle = useMemo14(() => {
     return {
       ...style,
       display: "flex",
@@ -2052,7 +2095,7 @@ var Column = ({ children, justify, className, align, style = {} }) => {
       alignItems: align ?? "flex-start"
     };
   }, [align, justify, style]);
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     className,
     style: finalStyle,
     children
@@ -2061,7 +2104,7 @@ var Column = ({ children, justify, className, align, style = {} }) => {
 
 // src/components/Menu/SubMenu.tsx
 import { useCallback as useCallback8 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var SubMenuComponent = ({
   portalStyle,
   subMenuActivated,
@@ -2077,13 +2120,13 @@ var SubMenuComponent = ({
       onQuitFullMenu();
     }
   }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
-  return /* @__PURE__ */ jsx22(HigherZIndex, {
+  return /* @__PURE__ */ jsx23(HigherZIndex, {
     onEscape: onQuitFullMenu,
     onOutsideClick,
-    children: /* @__PURE__ */ jsx22("div", {
+    children: /* @__PURE__ */ jsx23("div", {
       style: portalStyle,
       className: "css-reset",
-      children: /* @__PURE__ */ jsx22(MenuContent, {
+      children: /* @__PURE__ */ jsx23(MenuContent, {
         onNextMenu: noop,
         onPreviousMenu: onQuitSubMenu,
         values: subMenu.items,
@@ -2098,8 +2141,8 @@ var SubMenuComponent = ({
 };
 
 // src/components/Menu/MenuSubItem.tsx
-import { jsx as jsx23, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
-var container4 = {
+import { jsx as jsx24, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+var container5 = {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 12,
@@ -2148,9 +2191,9 @@ var MenuSubItem = ({
   });
   const mobileLayout = useMobileLayout();
   const { currentZIndex } = useZIndex();
-  const style = useMemo14(() => {
+  const style = useMemo15(() => {
     return {
-      ...container4,
+      ...container5,
       backgroundColor: selected && !disabled ? CLEAR_HOVER : "transparent",
       opacity: disabled ? 0.5 : 1,
       cursor: disabled ? "not-allowed" : "default"
@@ -2180,7 +2223,7 @@ var MenuSubItem = ({
   const onQuitSubmenu = useCallback9(() => {
     setSubMenuActivated(false);
   }, [setSubMenuActivated]);
-  const portalStyle = useMemo14(() => {
+  const portalStyle = useMemo15(() => {
     if (!selected || !size || !subMenu || !subMenuActivated) {
       return null;
     }
@@ -2207,7 +2250,7 @@ var MenuSubItem = ({
       });
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx23("div", {
+  return /* @__PURE__ */ jsx24("div", {
     ref,
     onPointerEnter,
     onPointerLeave,
@@ -2215,35 +2258,35 @@ var MenuSubItem = ({
     onPointerUp,
     role: "button",
     className: MENU_ITEM_CLASSNAME,
-    children: /* @__PURE__ */ jsxs3(Row, {
+    children: /* @__PURE__ */ jsxs4(Row, {
       align: "center",
       children: [
-        leaveLeftSpace ? /* @__PURE__ */ jsxs3(Fragment, {
+        leaveLeftSpace ? /* @__PURE__ */ jsxs4(Fragment, {
           children: [
-            /* @__PURE__ */ jsx23("div", {
+            /* @__PURE__ */ jsx24("div", {
               style: leftSpace,
               children: leftItem
             }),
-            /* @__PURE__ */ jsx23(Spacing, {
+            /* @__PURE__ */ jsx24(Spacing, {
               x: 1
             })
           ]
         }) : null,
-        /* @__PURE__ */ jsx23("div", {
+        /* @__PURE__ */ jsx24("div", {
           style: labelStyle,
           ...{ title: typeof label === "string" ? label : undefined },
           children: label
         }),
         " ",
-        /* @__PURE__ */ jsx23(Spacing, {
+        /* @__PURE__ */ jsx24(Spacing, {
           x: 2
         }),
-        subMenu ? /* @__PURE__ */ jsx23(CaretRight, {}) : null,
-        keyHint && !areKeyboardShortcutsDisabled() ? /* @__PURE__ */ jsx23("span", {
+        subMenu ? /* @__PURE__ */ jsx24(CaretRight, {}) : null,
+        keyHint && !areKeyboardShortcutsDisabled() ? /* @__PURE__ */ jsx24("span", {
           style: keyHintCss,
           children: keyHint
         }) : null,
-        portalStyle && subMenu ? ReactDOM.createPortal(/* @__PURE__ */ jsx23(SubMenuComponent, {
+        portalStyle && subMenu ? ReactDOM.createPortal(/* @__PURE__ */ jsx24(SubMenuComponent, {
           onQuitFullMenu: onQuitMenu,
           subMenu,
           onQuitSubMenu: onQuitSubmenu,
@@ -2256,9 +2299,9 @@ var MenuSubItem = ({
 };
 
 // src/components/NewComposition/MenuContent.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
-var container5 = {
+var container6 = {
   paddingTop: MENU_VERTICAL_PADDING,
   paddingBottom: MENU_VERTICAL_PADDING,
   border: `${BORDER_SIZE}px solid ${INPUT_BORDER_COLOR_UNHOVERED}`,
@@ -2365,8 +2408,8 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
-  const containerWithHeight = useMemo15(() => {
-    const containerStyles = { ...container5 };
+  const containerWithHeight = useMemo16(() => {
+    const containerStyles = { ...container6 };
     if (fixedHeight === null) {
       containerStyles.maxHeight = 600;
     } else {
@@ -2492,13 +2535,13 @@ var MenuContent = ({
     current.addEventListener("pointerleave", onPointerLeave);
     return () => current.removeEventListener("pointerleave", onPointerLeave);
   }, [onHide, subMenuActivated]);
-  return /* @__PURE__ */ jsx24("div", {
+  return /* @__PURE__ */ jsx25("div", {
     ref: containerRef,
     style: containerWithHeight,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
     children: values.map((item) => {
       if (item.type === "divider") {
-        return /* @__PURE__ */ jsx24(MenuDivider, {}, item.id);
+        return /* @__PURE__ */ jsx25(MenuDivider, {}, item.id);
       }
       const onClick = (id, e) => {
         item.onClick(id, e);
@@ -2507,7 +2550,7 @@ var MenuContent = ({
         }
         onHide();
       };
-      return /* @__PURE__ */ jsx24(MenuSubItem, {
+      return /* @__PURE__ */ jsx25(MenuSubItem, {
         selected: item.id === selectedItem,
         onActionChosen: onClick,
         onItemSelected,
@@ -2528,7 +2571,7 @@ var MenuContent = ({
 };
 
 // src/components/InlineDropdown.tsx
-import { jsx as jsx25, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
 var InlineDropdown = ({
   values,
   ...props
@@ -2546,19 +2589,19 @@ var InlineDropdown = ({
     e.stopPropagation();
     setOpened({ type: "open", left: e.clientX, top: e.clientY });
   }, []);
-  const spaceToBottom = useMemo16(() => {
+  const spaceToBottom = useMemo17(() => {
     if (size && opened.type === "open") {
       return size.windowSize.height - opened.top;
     }
     return 0;
   }, [opened, size]);
-  const spaceToTop = useMemo16(() => {
+  const spaceToTop = useMemo17(() => {
     if (size && opened.type === "open") {
       return opened.top;
     }
     return 0;
   }, [opened, size]);
-  const portalStyle = useMemo16(() => {
+  const portalStyle = useMemo17(() => {
     if (opened.type === "not-open") {
       return;
     }
@@ -2589,26 +2632,26 @@ var InlineDropdown = ({
   const onHide = useCallback11(() => {
     setOpened({ type: "not-open" });
   }, []);
-  return /* @__PURE__ */ jsxs4(Fragment2, {
+  return /* @__PURE__ */ jsxs5(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx25("div", {
+      /* @__PURE__ */ jsx26("div", {
         ref,
-        children: /* @__PURE__ */ jsx25(InlineAction, {
+        children: /* @__PURE__ */ jsx26(InlineAction, {
           onClick,
           ...props
         })
       }),
-      portalStyle ? ReactDOM2.createPortal(/* @__PURE__ */ jsx25("div", {
+      portalStyle ? ReactDOM2.createPortal(/* @__PURE__ */ jsx26("div", {
         style: fullScreenOverlay,
-        children: /* @__PURE__ */ jsx25("div", {
+        children: /* @__PURE__ */ jsx26("div", {
           style: outerPortal,
           className: "css-reset",
-          children: /* @__PURE__ */ jsx25(HigherZIndex, {
+          children: /* @__PURE__ */ jsx26(HigherZIndex, {
             onOutsideClick: onHide,
             onEscape: onHide,
-            children: /* @__PURE__ */ jsx25("div", {
+            children: /* @__PURE__ */ jsx26("div", {
               style: portalStyle,
-              children: /* @__PURE__ */ jsx25(MenuContent, {
+              children: /* @__PURE__ */ jsx26(MenuContent, {
                 onNextMenu: noop,
                 onPreviousMenu: noop,
                 values,
@@ -2627,9 +2670,9 @@ var InlineDropdown = ({
 };
 
 // src/components/CompositionContextButton.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var CompositionContextButton = ({ visible, values }) => {
-  const iconStyle = useMemo17(() => {
+  const iconStyle = useMemo18(() => {
     return {
       style: {
         height: 12
@@ -2638,7 +2681,7 @@ var CompositionContextButton = ({ visible, values }) => {
   }, []);
   const connectionStatus = useContext6(StudioServerConnectionCtx).previewServerState.type;
   const renderAction = useCallback12((color) => {
-    return /* @__PURE__ */ jsx26(EllipsisIcon, {
+    return /* @__PURE__ */ jsx27(EllipsisIcon, {
       fill: color,
       svgProps: iconStyle
     });
@@ -2646,7 +2689,7 @@ var CompositionContextButton = ({ visible, values }) => {
   if (!visible || connectionStatus !== "connected") {
     return null;
   }
-  return /* @__PURE__ */ jsx26(InlineDropdown, {
+  return /* @__PURE__ */ jsx27(InlineDropdown, {
     renderAction,
     values
   });
@@ -2654,14 +2697,14 @@ var CompositionContextButton = ({ visible, values }) => {
 
 // src/components/ContextMenu.tsx
 import { PlayerInternals as PlayerInternals4 } from "@remotion/player";
-import { useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo18, useRef as useRef10, useState as useState13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo19, useRef as useRef10, useState as useState13 } from "react";
 import ReactDOM3 from "react-dom";
-import { jsx as jsx27, jsxs as jsxs5, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
 var ContextMenu = ({ children, values }) => {
   const ref = useRef10(null);
   const [opened, setOpened] = useState13({ type: "not-open" });
   const { currentZIndex } = useZIndex();
-  const style = useMemo18(() => {
+  const style = useMemo19(() => {
     return {};
   }, []);
   const size = PlayerInternals4.useElementSize(ref, {
@@ -2685,19 +2728,19 @@ var ContextMenu = ({ children, values }) => {
       current.removeEventListener("contextmenu", onClick);
     };
   }, [size]);
-  const spaceToBottom = useMemo18(() => {
+  const spaceToBottom = useMemo19(() => {
     if (size && opened.type === "open") {
       return size.windowSize.height - opened.top;
     }
     return 0;
   }, [opened, size]);
-  const spaceToTop = useMemo18(() => {
+  const spaceToTop = useMemo19(() => {
     if (size && opened.type === "open") {
       return opened.top;
     }
     return 0;
   }, [opened, size]);
-  const portalStyle = useMemo18(() => {
+  const portalStyle = useMemo19(() => {
     if (opened.type === "not-open") {
       return;
     }
@@ -2728,25 +2771,25 @@ var ContextMenu = ({ children, values }) => {
   const onHide = useCallback13(() => {
     setOpened({ type: "not-open" });
   }, []);
-  return /* @__PURE__ */ jsxs5(Fragment3, {
+  return /* @__PURE__ */ jsxs6(Fragment3, {
     children: [
-      /* @__PURE__ */ jsx27("div", {
+      /* @__PURE__ */ jsx28("div", {
         ref,
         onContextMenu: () => false,
         style,
         children
       }),
-      portalStyle ? ReactDOM3.createPortal(/* @__PURE__ */ jsx27("div", {
+      portalStyle ? ReactDOM3.createPortal(/* @__PURE__ */ jsx28("div", {
         style: fullScreenOverlay,
-        children: /* @__PURE__ */ jsx27("div", {
+        children: /* @__PURE__ */ jsx28("div", {
           style: outerPortal,
           className: "css-reset",
-          children: /* @__PURE__ */ jsx27(HigherZIndex, {
+          children: /* @__PURE__ */ jsx28(HigherZIndex, {
             onOutsideClick: onHide,
             onEscape: onHide,
-            children: /* @__PURE__ */ jsx27("div", {
+            children: /* @__PURE__ */ jsx28("div", {
               style: portalStyle,
-              children: /* @__PURE__ */ jsx27(MenuContent, {
+              children: /* @__PURE__ */ jsx28(MenuContent, {
                 onNextMenu: noop,
                 onPreviousMenu: noop,
                 values,
@@ -2765,17 +2808,17 @@ var ContextMenu = ({ children, values }) => {
 };
 
 // src/components/SidebarRenderButton.tsx
-import { useCallback as useCallback14, useContext as useContext7, useMemo as useMemo19 } from "react";
+import { useCallback as useCallback14, useContext as useContext7, useMemo as useMemo20 } from "react";
 import { Internals as Internals5 } from "remotion";
 
 // src/icons/render.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ThinRenderIcon = (props) => {
-  return /* @__PURE__ */ jsx28("svg", {
+  return /* @__PURE__ */ jsx29("svg", {
     ...props.svgProps,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx28("path", {
+    children: /* @__PURE__ */ jsx29("path", {
       fill: props.fill,
       d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z"
     })
@@ -2783,12 +2826,12 @@ var ThinRenderIcon = (props) => {
 };
 
 // src/components/SidebarRenderButton.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SidebarRenderButton = ({ composition, visible }) => {
   const { setSelectedModal } = useContext7(ModalsContext);
   const { setSidebarCollapsedState } = useContext7(SidebarContext);
   const isMobileLayout = useMobileLayout();
-  const iconStyle = useMemo19(() => {
+  const iconStyle = useMemo20(() => {
     return {
       style: {
         height: 12
@@ -2866,7 +2909,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
     setSidebarCollapsedState
   ]);
   const renderAction = useCallback14((color) => {
-    return /* @__PURE__ */ jsx29(ThinRenderIcon, {
+    return /* @__PURE__ */ jsx30(ThinRenderIcon, {
       fill: color,
       svgProps: iconStyle
     });
@@ -2874,14 +2917,14 @@ var SidebarRenderButton = ({ composition, visible }) => {
   if (!visible || connectionStatus !== "connected") {
     return null;
   }
-  return /* @__PURE__ */ jsx29(InlineAction, {
+  return /* @__PURE__ */ jsx30(InlineAction, {
     renderAction,
     onClick
   });
 };
 
 // src/components/CompositionSelectorItem.tsx
-import { jsx as jsx30, jsxs as jsxs6, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
 var COMPOSITION_ITEM_HEIGHT = 32;
 var itemStyle = {
   paddingRight: 10,
@@ -2898,7 +2941,8 @@ var itemStyle = {
   width: "100%",
   textAlign: "left",
   backgroundColor: BACKGROUND,
-  height: COMPOSITION_ITEM_HEIGHT
+  height: COMPOSITION_ITEM_HEIGHT,
+  userSelect: "none"
 };
 var labelStyle2 = {
   textAlign: "left",
@@ -2922,7 +2966,7 @@ var CompositionSelectorItem = ({
   selectComposition,
   toggleFolder
 }) => {
-  const selected = useMemo20(() => {
+  const selected = useMemo21(() => {
     if (item.type === "composition") {
       return currentComposition === item.composition.id;
     }
@@ -2935,14 +2979,14 @@ var CompositionSelectorItem = ({
   const onPointerLeave = useCallback15(() => {
     setHovered(false);
   }, []);
-  const style = useMemo20(() => {
+  const style = useMemo21(() => {
     return {
       ...itemStyle,
       backgroundColor: getBackgroundFromHoverState({ hovered, selected }),
       paddingLeft: 12 + level * 8
     };
   }, [hovered, level, selected]);
-  const label = useMemo20(() => {
+  const label = useMemo21(() => {
     return {
       ...labelStyle2,
       color: selected || hovered ? "white" : LIGHT_TEXT
@@ -2962,7 +3006,7 @@ var CompositionSelectorItem = ({
     }
   }, [onClick]);
   const { setSelectedModal } = useContext8(ModalsContext);
-  const contextMenu = useMemo20(() => {
+  const contextMenu = useMemo21(() => {
     if (item.type === "composition") {
       return [
         {
@@ -3040,9 +3084,9 @@ var CompositionSelectorItem = ({
     return [];
   }, [item, setSelectedModal]);
   if (item.type === "folder") {
-    return /* @__PURE__ */ jsxs6(Fragment4, {
+    return /* @__PURE__ */ jsxs7(Fragment4, {
       children: [
-        /* @__PURE__ */ jsxs6("button", {
+        /* @__PURE__ */ jsxs7("button", {
           style,
           onPointerEnter,
           onPointerLeave,
@@ -3051,24 +3095,24 @@ var CompositionSelectorItem = ({
           type: "button",
           title: item.folderName,
           children: [
-            item.expanded ? /* @__PURE__ */ jsx30(ExpandedFolderIcon, {
+            item.expanded ? /* @__PURE__ */ jsx31(ExpandedFolderIcon, {
               style: iconStyle,
               color: hovered || selected ? "white" : LIGHT_TEXT
-            }) : /* @__PURE__ */ jsx30(CollapsedFolderIcon, {
+            }) : /* @__PURE__ */ jsx31(CollapsedFolderIcon, {
               color: hovered || selected ? "white" : LIGHT_TEXT,
               style: iconStyle
             }),
-            /* @__PURE__ */ jsx30(Spacing, {
+            /* @__PURE__ */ jsx31(Spacing, {
               x: 1
             }),
-            /* @__PURE__ */ jsx30("div", {
+            /* @__PURE__ */ jsx31("div", {
               style: label,
               children: item.folderName
             })
           ]
         }),
         item.expanded ? item.items.map((childItem) => {
-          return /* @__PURE__ */ jsx30(CompositionSelectorItem, {
+          return /* @__PURE__ */ jsx31(CompositionSelectorItem, {
             currentComposition,
             selectComposition,
             item: childItem,
@@ -3080,11 +3124,11 @@ var CompositionSelectorItem = ({
       ]
     });
   }
-  return /* @__PURE__ */ jsx30(ContextMenu, {
+  return /* @__PURE__ */ jsx31(ContextMenu, {
     values: contextMenu,
-    children: /* @__PURE__ */ jsx30(Row, {
+    children: /* @__PURE__ */ jsx31(Row, {
       align: "center",
-      children: /* @__PURE__ */ jsxs6("a", {
+      children: /* @__PURE__ */ jsxs7("a", {
         style,
         onPointerEnter,
         onPointerLeave,
@@ -3096,28 +3140,28 @@ var CompositionSelectorItem = ({
         className: "__remotion-composition",
         "data-compname": item.composition.id,
         children: [
-          isCompositionStill(item.composition) ? /* @__PURE__ */ jsx30(StillIcon, {
+          isCompositionStill(item.composition) ? /* @__PURE__ */ jsx31(StillIcon, {
             color: hovered || selected ? "white" : LIGHT_TEXT,
             style: iconStyle
-          }) : /* @__PURE__ */ jsx30(FilmIcon, {
+          }) : /* @__PURE__ */ jsx31(FilmIcon, {
             color: hovered || selected ? "white" : LIGHT_TEXT,
             style: iconStyle
           }),
-          /* @__PURE__ */ jsx30(Spacing, {
+          /* @__PURE__ */ jsx31(Spacing, {
             x: 1
           }),
-          /* @__PURE__ */ jsx30("div", {
+          /* @__PURE__ */ jsx31("div", {
             style: label,
             children: item.composition.id
           }),
-          /* @__PURE__ */ jsx30(Spacing, {
+          /* @__PURE__ */ jsx31(Spacing, {
             x: 0.5
           }),
-          /* @__PURE__ */ jsx30(CompositionContextButton, {
+          /* @__PURE__ */ jsx31(CompositionContextButton, {
             values: contextMenu,
             visible: hovered
           }),
-          /* @__PURE__ */ jsx30(SidebarRenderButton, {
+          /* @__PURE__ */ jsx31(SidebarRenderButton, {
             visible: hovered,
             composition: item.composition
           })
@@ -3149,13 +3193,12 @@ var renderFrame = (frame, fps) => {
 };
 
 // src/components/CurrentComposition.tsx
-import { jsx as jsx31, jsxs as jsxs7 } from "react/jsx-runtime";
-var CURRENT_COMPOSITION_HEIGHT = 80;
-var container6 = {
+import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+var CURRENT_COMPOSITION_HEIGHT = 64;
+var container7 = {
   height: CURRENT_COMPOSITION_HEIGHT,
   display: "block",
-  borderBottom: `1px solid ${BORDER_COLOR}`,
-  padding: 12,
+  padding: "6px 12px",
   color: "white",
   backgroundColor: BACKGROUND
 };
@@ -3181,17 +3224,17 @@ var row = {
 };
 var CurrentComposition = () => {
   const video = Internals6.useVideo();
-  return /* @__PURE__ */ jsx31("div", {
-    style: container6,
-    children: video ? /* @__PURE__ */ jsx31("div", {
+  return /* @__PURE__ */ jsx32("div", {
+    style: container7,
+    children: video ? /* @__PURE__ */ jsx32("div", {
       style: row,
-      children: /* @__PURE__ */ jsxs7("div", {
+      children: /* @__PURE__ */ jsxs8("div", {
         children: [
-          /* @__PURE__ */ jsx31("div", {
+          /* @__PURE__ */ jsx32("div", {
             style: title,
             children: video.id
           }),
-          /* @__PURE__ */ jsxs7("div", {
+          /* @__PURE__ */ jsxs8("div", {
             style: subtitle,
             children: [
               video.width,
@@ -3200,10 +3243,10 @@ var CurrentComposition = () => {
               isCompositionStill(video) ? null : `, ${video.fps} FPS`
             ]
           }),
-          isCompositionStill(video) ? /* @__PURE__ */ jsx31("div", {
+          isCompositionStill(video) ? /* @__PURE__ */ jsx32("div", {
             style: subtitle,
             children: "Still"
-          }) : /* @__PURE__ */ jsxs7("div", {
+          }) : /* @__PURE__ */ jsxs8("div", {
             style: subtitle,
             children: [
               "Duration ",
@@ -3217,7 +3260,7 @@ var CurrentComposition = () => {
 };
 
 // src/components/CompositionSelector.tsx
-import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
 var useCompositionNavigation = () => {
   const { compositions, canvasContent } = useContext9(Internals7.CompositionManager);
   const selectComposition = useSelectComposition();
@@ -3245,18 +3288,41 @@ var useCompositionNavigation = () => {
     const previousComposition = compositions[previousIndex];
     selectComposition(previousComposition, true);
   }, [canvasContent, compositions, selectComposition]);
-  return useMemo21(() => ({
+  return useMemo22(() => ({
     navigateToNextComposition,
     navigateToPreviousComposition
   }), [navigateToNextComposition, navigateToPreviousComposition]);
 };
-var container7 = {
+var container8 = {
   display: "flex",
   flexDirection: "column",
   flex: 1,
   overflow: "hidden",
   backgroundColor: BACKGROUND
 };
+var QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
+var quickSwitcherArea = {
+  padding: "4px 12px",
+  borderBottom: `1px solid ${BORDER_COLOR}`
+};
+var quickSwitcherTrigger = {
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  borderRadius: 5,
+  padding: "4px 10px",
+  color: LIGHT_TEXT,
+  fontSize: 12,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: "none",
+  width: "100%",
+  appearance: "none"
+};
+var shortcutLabel = {
+  fontSize: 11,
+  opacity: 0.6
+};
 var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
   initial.push(openFolderKey({
     folderName: initialFolderName,
@@ -3271,35 +3337,62 @@ var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 var CompositionSelector = () => {
   const { compositions, canvasContent, folders } = useContext9(Internals7.CompositionManager);
   const { foldersExpanded } = useContext9(ExpandedFoldersContext);
+  const { setSelectedModal } = useContext9(ModalsContext);
   const { tabIndex } = useZIndex();
   const selectComposition = useSelectComposition();
-  const sortedCompositions = useMemo21(() => {
+  const sortedCompositions = useMemo22(() => {
     return sortItemsByNonceHistory(compositions);
   }, [compositions]);
-  const sortedFolders = useMemo21(() => {
+  const sortedFolders = useMemo22(() => {
     return sortItemsByNonceHistory(folders);
   }, [folders]);
-  const items = useMemo21(() => {
+  const items = useMemo22(() => {
     return createFolderTree(sortedCompositions, sortedFolders, foldersExpanded);
   }, [sortedCompositions, sortedFolders, foldersExpanded]);
-  const list = useMemo21(() => {
+  const list = useMemo22(() => {
     return {
-      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px)`,
+      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
       overflowY: "auto"
     };
   }, []);
   const toggleFolder = useCallback16((folderName, parentName) => {
     Internals7.compositionSelectorRef.current?.toggleFolder(folderName, parentName);
   }, []);
-  return /* @__PURE__ */ jsxs8("div", {
-    style: container7,
+  const openQuickSwitcher = useCallback16(() => {
+    setSelectedModal({
+      type: "quick-switcher",
+      mode: "compositions",
+      invocationTimestamp: Date.now()
+    });
+  }, [setSelectedModal]);
+  return /* @__PURE__ */ jsxs9("div", {
+    style: container8,
     children: [
-      /* @__PURE__ */ jsx32(CurrentComposition, {}),
-      /* @__PURE__ */ jsx32("div", {
+      /* @__PURE__ */ jsx33(CurrentComposition, {}),
+      /* @__PURE__ */ jsx33("div", {
+        style: quickSwitcherArea,
+        children: /* @__PURE__ */ jsxs9("button", {
+          type: "button",
+          style: quickSwitcherTrigger,
+          onClick: openQuickSwitcher,
+          tabIndex,
+          children: [
+            "Search...",
+            areKeyboardShortcutsDisabled() ? null : /* @__PURE__ */ jsxs9("span", {
+              style: shortcutLabel,
+              children: [
+                cmdOrCtrlCharacter,
+                "+K"
+              ]
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx33("div", {
         className: "__remotion-vertical-scrollbar",
         style: list,
         children: items.map((c) => {
-          return /* @__PURE__ */ jsx32(CompositionSelectorItem, {
+          return /* @__PURE__ */ jsx33(CompositionSelectorItem, {
             level: 0,
             currentComposition: canvasContent && canvasContent.type === "composition" ? canvasContent.compositionId : null,
             selectComposition,
@@ -3317,7 +3410,7 @@ var CompositionSelector = () => {
 import { createRef as createRef5, useCallback as useCallback22, useImperativeHandle as useImperativeHandle5, useState as useState21 } from "react";
 
 // src/components/AssetSelector.tsx
-import { useCallback as useCallback19, useContext as useContext13, useMemo as useMemo25, useState as useState18 } from "react";
+import { useCallback as useCallback19, useContext as useContext13, useMemo as useMemo26, useState as useState18 } from "react";
 import { Internals as Internals10 } from "remotion";
 
 // src/api/write-static-file.ts
@@ -3346,7 +3439,7 @@ var writeStaticFile = async ({
 };
 
 // src/helpers/use-asset-drag-events.ts
-import { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo22, useRef as useRef11 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo23, useRef as useRef11 } from "react";
 import { NoReactInternals } from "remotion/no-react";
 function useAssetDragEvents({
   name,
@@ -3355,10 +3448,10 @@ function useAssetDragEvents({
   setDropLocation
 }) {
   const dragDepthRef = useRef11(0);
-  const combinedParents = useMemo22(() => {
+  const combinedParents = useMemo23(() => {
     return [parentFolder, name].filter(NoReactInternals.truthy).join("/");
   }, [name, parentFolder]);
-  const isDropDiv = useMemo22(() => {
+  const isDropDiv = useMemo23(() => {
     return dropLocation === combinedParents;
   }, [combinedParents, dropLocation]);
   const onDragEnter = useCallback17(() => {
@@ -3387,7 +3480,7 @@ function useAssetDragEvents({
 var use_asset_drag_events_default = useAssetDragEvents;
 
 // src/components/AssetSelectorItem.tsx
-import React24, { useCallback as useCallback18, useContext as useContext10, useMemo as useMemo23, useRef as useRef12, useState as useState15 } from "react";
+import React25, { useCallback as useCallback18, useContext as useContext10, useMemo as useMemo24, useRef as useRef12, useState as useState15 } from "react";
 import { Internals as Internals8 } from "remotion";
 import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
 
@@ -3409,26 +3502,26 @@ var copyText = (cmd) => {
 };
 
 // src/icons/clipboard.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var ClipboardIcon = ({ color, ...props }) => /* @__PURE__ */ jsx33("svg", {
+import { jsx as jsx34 } from "react/jsx-runtime";
+var ClipboardIcon = ({ color, ...props }) => /* @__PURE__ */ jsx34("svg", {
   viewBox: "0 0 384 512",
   ...props,
-  children: /* @__PURE__ */ jsx33("path", {
+  children: /* @__PURE__ */ jsx34("path", {
     fill: color,
     d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
   })
 });
 
 // src/icons/file.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var FileIcon = ({
   color,
   ...props
-}) => /* @__PURE__ */ jsx34("svg", {
+}) => /* @__PURE__ */ jsx35("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512",
   ...props,
-  children: /* @__PURE__ */ jsx34("path", {
+  children: /* @__PURE__ */ jsx35("path", {
     fill: color ?? "currentColor",
     d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z"
   })
@@ -3732,7 +3825,7 @@ var applyVisualControlChange = ({
 };
 
 // src/components/AssetSelectorItem.tsx
-import { jsx as jsx35, jsxs as jsxs9, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs10, Fragment as Fragment5 } from "react/jsx-runtime";
 var ASSET_ITEM_HEIGHT = 32;
 var iconStyle2 = {
   width: 18,
@@ -3795,14 +3888,14 @@ var AssetFolderItem = ({
   const onPointerLeave = useCallback18(() => {
     setHovered(false);
   }, []);
-  const folderStyle = useMemo23(() => {
+  const folderStyle = useMemo24(() => {
     return {
       ...itemStyle2,
       paddingLeft: 4 + level * 8,
       backgroundColor: hovered ? CLEAR_HOVER : "transparent"
     };
   }, [hovered, level]);
-  const label = useMemo23(() => {
+  const label = useMemo24(() => {
     return {
       ...labelStyle3,
       color: hovered ? "white" : LIGHT_TEXT
@@ -3812,14 +3905,14 @@ var AssetFolderItem = ({
     toggleFolder(item.name, parentFolder);
   }, [item.name, parentFolder, toggleFolder]);
   const Icon = item.expanded ? ExpandedFolderIcon : CollapsedFolderIcon;
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     onDragEnter,
     onDragLeave,
     style: {
       backgroundColor: isDropDiv ? CLEAR_HOVER : BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsx35("div", {
+      /* @__PURE__ */ jsx36("div", {
         style: folderStyle,
         onPointerEnter,
         onPointerLeave,
@@ -3838,23 +3931,23 @@ var AssetFolderItem = ({
             clearTimeout(openFolderTimerRef.current);
           }
         },
-        children: /* @__PURE__ */ jsxs9(Row, {
+        children: /* @__PURE__ */ jsxs10(Row, {
           children: [
-            /* @__PURE__ */ jsx35(Icon, {
+            /* @__PURE__ */ jsx36(Icon, {
               style: iconStyle2,
               color: hovered ? "white" : LIGHT_TEXT
             }),
-            /* @__PURE__ */ jsx35(Spacing, {
+            /* @__PURE__ */ jsx36(Spacing, {
               x: 1
             }),
-            /* @__PURE__ */ jsx35("div", {
+            /* @__PURE__ */ jsx36("div", {
               style: label,
               children: item.name
             })
           ]
         })
       }),
-      item.expanded ? /* @__PURE__ */ jsx35(AssetFolderTree, {
+      item.expanded ? /* @__PURE__ */ jsx36(AssetFolderTree, {
         item: item.items,
         name: item.name,
         level,
@@ -3879,13 +3972,13 @@ var AssetFolderTree = ({
   setDropLocation,
   readOnlyStudio
 }) => {
-  const combinedParents = useMemo23(() => {
+  const combinedParents = useMemo24(() => {
     return [parentFolder, name].filter(NoReactInternals3.truthy).join("/");
   }, [name, parentFolder]);
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     children: [
       item.folders.map((folder) => {
-        return /* @__PURE__ */ jsx35(AssetFolderItem, {
+        return /* @__PURE__ */ jsx36(AssetFolderItem, {
           item: folder,
           tabIndex,
           level: level + 1,
@@ -3897,7 +3990,7 @@ var AssetFolderTree = ({
         }, folder.name);
       }),
       item.files.map((file) => {
-        return /* @__PURE__ */ jsx35(AssetSelectorItem, {
+        return /* @__PURE__ */ jsx36(AssetSelectorItem, {
           item: file,
           tabIndex,
           level,
@@ -3917,10 +4010,10 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   }, []);
   const { setCanvasContent } = useContext10(Internals8.CompositionSetters);
   const { canvasContent } = useContext10(Internals8.CompositionManager);
-  const relativePath = useMemo23(() => {
+  const relativePath = useMemo24(() => {
     return parentFolder ? parentFolder + "/" + item.name : item.name;
   }, [parentFolder, item.name]);
-  const selected = useMemo23(() => {
+  const selected = useMemo24(() => {
     if (canvasContent && canvasContent.type === "asset") {
       return canvasContent.asset === relativePath;
     }
@@ -3941,7 +4034,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
     setCanvasContent,
     setSidebarCollapsedState
   ]);
-  const style = useMemo23(() => {
+  const style = useMemo24(() => {
     return {
       ...itemStyle2,
       color: hovered || selected ? "white" : LIGHT_TEXT,
@@ -3949,25 +4042,25 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
       paddingLeft: 12 + level * 8
     };
   }, [hovered, level, selected]);
-  const label = useMemo23(() => {
+  const label = useMemo24(() => {
     return {
       ...labelStyle3,
       color: hovered || selected ? "white" : LIGHT_TEXT
     };
   }, [hovered, selected]);
   const renderFileExplorerAction = useCallback18((color) => {
-    return /* @__PURE__ */ jsx35(ExpandedFolderIcon, {
+    return /* @__PURE__ */ jsx36(ExpandedFolderIcon, {
       style: revealIconStyle,
       color
     });
   }, []);
   const renderCopyAction = useCallback18((color) => {
-    return /* @__PURE__ */ jsx35(ClipboardIcon, {
+    return /* @__PURE__ */ jsx36(ClipboardIcon, {
       style: revealIconStyle,
       color
     });
   }, []);
-  const revealInExplorer = React24.useCallback((e) => {
+  const revealInExplorer = React25.useCallback((e) => {
     e.stopPropagation();
     openInFileExplorer({
       directory: window.remotion_publicFolderExists + "/" + parentFolder + "/" + item.name
@@ -3984,9 +4077,9 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [item.name, parentFolder]);
-  return /* @__PURE__ */ jsx35(Row, {
+  return /* @__PURE__ */ jsx36(Row, {
     align: "center",
-    children: /* @__PURE__ */ jsxs9("div", {
+    children: /* @__PURE__ */ jsxs10("div", {
       style,
       onPointerEnter,
       onPointerLeave,
@@ -3994,33 +4087,33 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
       tabIndex,
       title: item.name,
       children: [
-        /* @__PURE__ */ jsx35(FileIcon, {
+        /* @__PURE__ */ jsx36(FileIcon, {
           style: iconStyle2,
           color: LIGHT_TEXT
         }),
-        /* @__PURE__ */ jsx35(Spacing, {
+        /* @__PURE__ */ jsx36(Spacing, {
           x: 1
         }),
-        /* @__PURE__ */ jsx35("div", {
+        /* @__PURE__ */ jsx36("div", {
           style: label,
           children: item.name
         }),
-        hovered ? /* @__PURE__ */ jsxs9(Fragment5, {
+        hovered ? /* @__PURE__ */ jsxs10(Fragment5, {
           children: [
-            /* @__PURE__ */ jsx35(Spacing, {
+            /* @__PURE__ */ jsx36(Spacing, {
               x: 0.5
             }),
-            /* @__PURE__ */ jsx35(InlineAction, {
+            /* @__PURE__ */ jsx36(InlineAction, {
               title: "Copy staticFile() name",
               renderAction: renderCopyAction,
               onClick: copyToClipboard
             }),
-            readOnlyStudio ? null : /* @__PURE__ */ jsxs9(Fragment5, {
+            readOnlyStudio ? null : /* @__PURE__ */ jsxs10(Fragment5, {
               children: [
-                /* @__PURE__ */ jsx35(Spacing, {
+                /* @__PURE__ */ jsx36(Spacing, {
                   x: 0.5
                 }),
-                /* @__PURE__ */ jsx35(InlineAction, {
+                /* @__PURE__ */ jsx36(InlineAction, {
                   title: "Open in Explorer",
                   renderAction: renderFileExplorerAction,
                   onClick: revealInExplorer
@@ -4037,11 +4130,11 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
 // src/components/CurrentAsset.tsx
 import { formatBytes } from "@remotion/studio-shared";
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
-import { useContext as useContext12, useEffect as useEffect14, useMemo as useMemo24, useState as useState17 } from "react";
+import { useContext as useContext12, useEffect as useEffect14, useMemo as useMemo25, useState as useState17 } from "react";
 import { Internals as Internals9, staticFile } from "remotion";
 
 // src/components/use-static-files.ts
-import React25, { createContext as createContext10, useContext as useContext11, useEffect as useEffect13, useState as useState16 } from "react";
+import React26, { createContext as createContext10, useContext as useContext11, useEffect as useEffect13, useState as useState16 } from "react";
 import { useRemotionEnvironment } from "remotion";
 
 // src/api/get-static-files.ts
@@ -4113,16 +4206,16 @@ var StaticFilesProvider = ({ children }) => {
     });
     return cancel;
   }, [env.isStudio, env.isReadOnlyStudio]);
-  return React25.createElement(StaticFilesContext.Provider, { value: files }, children);
+  return React26.createElement(StaticFilesContext.Provider, { value: files }, children);
 };
 var useStaticFiles = () => {
   return useContext11(StaticFilesContext);
 };
 
 // src/components/CurrentAsset.tsx
-import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var CURRENT_ASSET_HEIGHT = 80;
-var container8 = {
+var container9 = {
   height: CURRENT_ASSET_HEIGHT,
   display: "block",
   borderBottom: `1px solid ${BORDER_COLOR}`,
@@ -4164,7 +4257,7 @@ var CurrentAsset = () => {
   const { canvasContent } = useContext12(Internals9.CompositionManager);
   const assetName = canvasContent?.type === "asset" ? canvasContent.asset : null;
   const staticFiles = useStaticFiles();
-  const sizeInBytes = useMemo24(() => {
+  const sizeInBytes = useMemo25(() => {
     if (!assetName) {
       return null;
     }
@@ -4199,8 +4292,8 @@ var CurrentAsset = () => {
     };
   }, [assetName]);
   if (!assetName) {
-    return /* @__PURE__ */ jsx36("div", {
-      style: container8
+    return /* @__PURE__ */ jsx37("div", {
+      style: container9
     });
   }
   const fileName = assetName.split("/").pop() ?? assetName;
@@ -4214,21 +4307,21 @@ var CurrentAsset = () => {
       subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
     }
   }
-  return /* @__PURE__ */ jsx36("div", {
-    style: container8,
-    children: /* @__PURE__ */ jsx36("div", {
+  return /* @__PURE__ */ jsx37("div", {
+    style: container9,
+    children: /* @__PURE__ */ jsx37("div", {
       style: row2,
-      children: /* @__PURE__ */ jsxs10("div", {
+      children: /* @__PURE__ */ jsxs11("div", {
         children: [
-          /* @__PURE__ */ jsx36("div", {
+          /* @__PURE__ */ jsx37("div", {
             style: title2,
             children: fileName
           }),
-          subtitleParts.length > 0 ? /* @__PURE__ */ jsx36("div", {
+          subtitleParts.length > 0 ? /* @__PURE__ */ jsx37("div", {
             style: subtitle2,
             children: subtitleParts.join(" · ")
           }) : null,
-          mediaMetadata ? /* @__PURE__ */ jsx36("div", {
+          mediaMetadata ? /* @__PURE__ */ jsx37("div", {
             style: subtitle2,
             children: formatDuration(mediaMetadata.duration)
           }) : null
@@ -4239,8 +4332,8 @@ var CurrentAsset = () => {
 };
 
 // src/components/AssetSelector.tsx
-import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var container9 = {
+import { jsx as jsx38, jsxs as jsxs12 } from "react/jsx-runtime";
+var container10 = {
   display: "flex",
   flexDirection: "column",
   flex: 1,
@@ -4271,7 +4364,7 @@ var AssetSelector = ({ readOnlyStudio }) => {
   const connectionStatus = useContext13(StudioServerConnectionCtx).previewServerState.type;
   const shouldAllowUpload = connectionStatus === "connected" && !readOnlyStudio;
   const showCurrentAsset = canvasContent?.type === "asset";
-  const list = useMemo25(() => {
+  const list = useMemo26(() => {
     return {
       ...baseList,
       height: showCurrentAsset ? `calc(100% - ${CURRENT_ASSET_HEIGHT}px)` : "100%"
@@ -4279,7 +4372,7 @@ var AssetSelector = ({ readOnlyStudio }) => {
   }, [showCurrentAsset]);
   const staticFiles = useStaticFiles();
   const publicFolderExists = window.remotion_publicFolderExists;
-  const assetTree = useMemo25(() => {
+  const assetTree = useMemo26(() => {
     return buildAssetFolderStructure(staticFiles, null, assetFoldersExpanded);
   }, [assetFoldersExpanded, staticFiles]);
   const toggleFolder = useCallback19((folderName, parentName) => {
@@ -4330,41 +4423,41 @@ var AssetSelector = ({ readOnlyStudio }) => {
       setDropLocation(null);
     }
   }, [dropLocation]);
-  return /* @__PURE__ */ jsxs11("div", {
-    style: container9,
+  return /* @__PURE__ */ jsxs12("div", {
+    style: container10,
     onDragOver: shouldAllowUpload ? onDragOver : undefined,
     onDrop: shouldAllowUpload ? onDrop : undefined,
     children: [
-      showCurrentAsset ? /* @__PURE__ */ jsx37(CurrentAsset, {}) : null,
-      staticFiles.length === 0 ? publicFolderExists ? /* @__PURE__ */ jsx37("div", {
+      showCurrentAsset ? /* @__PURE__ */ jsx38(CurrentAsset, {}) : null,
+      staticFiles.length === 0 ? publicFolderExists ? /* @__PURE__ */ jsx38("div", {
         style: emptyState,
-        children: /* @__PURE__ */ jsxs11("div", {
+        children: /* @__PURE__ */ jsxs12("div", {
           style: label,
           children: [
             "To add assets, place a file in the",
             " ",
-            /* @__PURE__ */ jsx37("code", {
+            /* @__PURE__ */ jsx38("code", {
               style: inlineCodeSnippet,
               children: "public"
             }),
             " folder of your project or drag and drop a file here."
           ]
         })
-      }) : /* @__PURE__ */ jsx37("div", {
+      }) : /* @__PURE__ */ jsx38("div", {
         style: emptyState,
-        children: /* @__PURE__ */ jsxs11("div", {
+        children: /* @__PURE__ */ jsxs12("div", {
           style: label,
           children: [
             "To add assets, create a folder called",
             " ",
-            /* @__PURE__ */ jsx37("code", {
+            /* @__PURE__ */ jsx38("code", {
               style: inlineCodeSnippet,
               children: "public"
             }),
             " in the root of your project and place a file in it."
           ]
         })
-      }) : /* @__PURE__ */ jsx37("div", {
+      }) : /* @__PURE__ */ jsx38("div", {
         className: "__remotion-vertical-scrollbar",
         style: {
           ...list,
@@ -4372,7 +4465,7 @@ var AssetSelector = ({ readOnlyStudio }) => {
         },
         onDragEnter,
         onDragLeave,
-        children: /* @__PURE__ */ jsx37(AssetFolderTree, {
+        children: /* @__PURE__ */ jsx38(AssetFolderTree, {
           item: assetTree,
           level: 0,
           parentFolder: null,
@@ -4393,11 +4486,11 @@ import {
   useCallback as useCallback20,
   useContext as useContext14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo26,
+  useMemo as useMemo27,
   useState as useState19
 } from "react";
 import { Internals as Internals11 } from "remotion";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var CompSelectorRef = ({ children }) => {
   const { compositions } = useContext14(Internals11.CompositionManager);
   const [foldersExpanded, setFoldersExpanded] = useState19(loadExpandedFolders("compositions"));
@@ -4459,34 +4552,34 @@ var CompSelectorRef = ({ children }) => {
       }
     };
   }, [compositions, selectComposition, toggleFolder]);
-  const contextValue = useMemo26(() => {
+  const contextValue = useMemo27(() => {
     return {
       foldersExpanded,
       setFoldersExpanded,
       toggleFolder
     };
   }, [foldersExpanded, setFoldersExpanded, toggleFolder]);
-  return /* @__PURE__ */ jsx38(ExpandedFoldersContext.Provider, {
+  return /* @__PURE__ */ jsx39(ExpandedFoldersContext.Provider, {
     value: contextValue,
     children
   });
 };
 
 // src/components/Tabs/index.tsx
-import { useCallback as useCallback21, useMemo as useMemo27, useState as useState20 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useCallback as useCallback21, useMemo as useMemo28, useState as useState20 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var tabsContainer = {
   display: "flex",
   flexDirection: "row"
 };
 var Tabs = ({ children, style }) => {
-  const definiteStyle = useMemo27(() => {
+  const definiteStyle = useMemo28(() => {
     return {
       ...tabsContainer,
       ...style
     };
   }, [style]);
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx40("div", {
     style: definiteStyle,
     children
   });
@@ -4515,7 +4608,7 @@ var Tab = ({ children, onClick, style, selected }) => {
   const onPointerLeave = useCallback21(() => {
     setHovered(false);
   }, []);
-  const definiteStyle = useMemo27(() => ({
+  const definiteStyle = useMemo28(() => ({
     ...selectorButton,
     backgroundColor: selected ? BACKGROUND : hovered ? CLEAR_HOVER : INPUT_BACKGROUND,
     color: selected ? "white" : LIGHT_TEXT,
@@ -4523,7 +4616,7 @@ var Tab = ({ children, onClick, style, selected }) => {
     boxShadow: selected ? "none" : undefined,
     ...style
   }), [hovered, selected, style]);
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx40("div", {
     style: definiteStyle,
     role: "button",
     onClick,
@@ -4535,8 +4628,8 @@ var Tab = ({ children, onClick, style, selected }) => {
 };
 
 // src/components/ExplorerPanel.tsx
-import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
-var container10 = {
+import { jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
+var container11 = {
   height: "100%",
   width: "100%",
   maxWidth: "100%",
@@ -4581,21 +4674,21 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx40(CompSelectorRef, {
-    children: /* @__PURE__ */ jsxs12("div", {
-      style: container10,
+  return /* @__PURE__ */ jsx41(CompSelectorRef, {
+    children: /* @__PURE__ */ jsxs13("div", {
+      style: container11,
       className: "css-reset",
       children: [
-        /* @__PURE__ */ jsx40("div", {
+        /* @__PURE__ */ jsx41("div", {
           style: tabsContainer2,
-          children: /* @__PURE__ */ jsxs12(Tabs, {
+          children: /* @__PURE__ */ jsxs13(Tabs, {
             children: [
-              /* @__PURE__ */ jsx40(Tab, {
+              /* @__PURE__ */ jsx41(Tab, {
                 selected: panel === "compositions",
                 onClick: onCompositionsSelected,
                 children: "Compositions"
               }),
-              /* @__PURE__ */ jsx40(Tab, {
+              /* @__PURE__ */ jsx41(Tab, {
                 selected: panel === "assets",
                 onClick: onAssetsSelected,
                 children: "Assets"
@@ -4603,7 +4696,7 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
             ]
           })
         }),
-        panel === "compositions" ? /* @__PURE__ */ jsx40(CompositionSelector, {}) : /* @__PURE__ */ jsx40(AssetSelector, {
+        panel === "compositions" ? /* @__PURE__ */ jsx41(CompositionSelector, {}) : /* @__PURE__ */ jsx41(AssetSelector, {
           readOnlyStudio
         })
       ]
@@ -4769,7 +4862,7 @@ import {
 import { AbsoluteFill } from "remotion";
 
 // src/components/ModalContainer.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var padding = 20;
 var getMaxModalWidth = (width) => {
   return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
@@ -4793,16 +4886,16 @@ var panel = {
   margin: "auto"
 };
 var ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
-  return /* @__PURE__ */ jsx41("div", {
+  return /* @__PURE__ */ jsx42("div", {
     className: "css-reset",
     style: backgroundOverlay,
     role: "dialog",
     "aria-modal": "true",
-    children: /* @__PURE__ */ jsx41(HigherZIndex, {
+    children: /* @__PURE__ */ jsx42(HigherZIndex, {
       disabled: noZIndex,
       onOutsideClick,
       onEscape,
-      children: /* @__PURE__ */ jsx41("div", {
+      children: /* @__PURE__ */ jsx42("div", {
         style: panel,
         children
       })
@@ -4814,7 +4907,7 @@ var ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
 import { useCallback as useCallback24, useContext as useContext16 } from "react";
 
 // src/components/NewComposition/CancelButton.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var style = {
   appearance: "none",
   border: "none",
@@ -4827,15 +4920,15 @@ var style = {
 };
 var CancelButton = ({ onPress, ...props }) => {
   const { tabIndex } = useZIndex();
-  return /* @__PURE__ */ jsx42("button", {
+  return /* @__PURE__ */ jsx43("button", {
     tabIndex,
     style,
     type: "button",
     onClick: onPress,
-    children: /* @__PURE__ */ jsx42("svg", {
+    children: /* @__PURE__ */ jsx43("svg", {
       viewBox: "0 0 320 512",
       ...props,
-      children: /* @__PURE__ */ jsx42("path", {
+      children: /* @__PURE__ */ jsx43("path", {
         fill: "currentColor",
         d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
       })
@@ -4844,8 +4937,8 @@ var CancelButton = ({ onPress, ...props }) => {
 };
 
 // src/components/ModalHeader.tsx
-import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
-var container11 = {
+import { jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
+var container12 = {
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -4866,15 +4959,15 @@ var ModalHeader = ({ title: title3, onClose }) => {
   const onPress = useCallback24(() => {
     setSelectedModal(null);
   }, [setSelectedModal]);
-  return /* @__PURE__ */ jsxs13("div", {
-    style: container11,
+  return /* @__PURE__ */ jsxs14("div", {
+    style: container12,
     children: [
-      /* @__PURE__ */ jsx43("div", {
+      /* @__PURE__ */ jsx44("div", {
         style: titleStyle,
         children: title3
       }),
-      /* @__PURE__ */ jsx43(Flex, {}),
-      /* @__PURE__ */ jsx43(CancelButton, {
+      /* @__PURE__ */ jsx44(Flex, {}),
+      /* @__PURE__ */ jsx44(CancelButton, {
         style: icon,
         onPress: onClose ?? onPress
       })
@@ -4883,8 +4976,8 @@ var ModalHeader = ({ title: title3, onClose }) => {
 };
 
 // src/components/AskAiModal.tsx
-import { jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
-var container12 = {
+import { jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
+var container13 = {
   height: "calc(100vh - 100px)",
   width: "calc(100vw - 160px)",
   maxWidth: 800,
@@ -4936,21 +5029,21 @@ var AskAiModal = () => {
   if (state === "never-opened") {
     return null;
   }
-  return /* @__PURE__ */ jsx44(AbsoluteFill, {
+  return /* @__PURE__ */ jsx45(AbsoluteFill, {
     style: { display: state === "visible" ? "block" : "none" },
-    children: /* @__PURE__ */ jsxs14(ModalContainer, {
+    children: /* @__PURE__ */ jsxs15(ModalContainer, {
       noZIndex: state === "hidden",
       onOutsideClick: onQuit,
       onEscape: onQuit,
       children: [
-        /* @__PURE__ */ jsx44(ModalHeader, {
+        /* @__PURE__ */ jsx45(ModalHeader, {
           title: "Ask AI",
           onClose: onQuit
         }),
-        /* @__PURE__ */ jsx44("iframe", {
+        /* @__PURE__ */ jsx45("iframe", {
           ref: iframe,
           frameBorder: 0,
-          style: container12,
+          style: container13,
           src: "https://www.remotion.dev/ai-embed",
           allow: "clipboard-read; clipboard-write"
         })
@@ -4960,32 +5053,32 @@ var AskAiModal = () => {
 };
 
 // src/components/SizeSelector.tsx
-import { useContext as useContext20, useMemo as useMemo34 } from "react";
+import { useContext as useContext20, useMemo as useMemo35 } from "react";
 import { Internals as Internals14 } from "remotion";
 
 // src/icons/Checkmark.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var style2 = {
   width: 14,
   height: 14
 };
-var Checkmark = () => /* @__PURE__ */ jsx45("svg", {
+var Checkmark = () => /* @__PURE__ */ jsx46("svg", {
   focusable: "false",
   role: "img",
   viewBox: "0 0 512 512",
   style: style2,
-  children: /* @__PURE__ */ jsx45("path", {
+  children: /* @__PURE__ */ jsx46("path", {
     fill: "currentColor",
     d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
   })
 });
 
 // src/components/ControlButton.tsx
-import { useMemo as useMemo28 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { useMemo as useMemo29 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var CONTROL_BUTTON_PADDING = 6;
 var ControlButton = (props) => {
-  const style3 = useMemo28(() => {
+  const style3 = useMemo29(() => {
     return {
       opacity: props.disabled ? 0.5 : 1,
       display: "inline-flex",
@@ -4995,7 +5088,7 @@ var ControlButton = (props) => {
     };
   }, [props.disabled]);
   const { tabIndex } = useZIndex();
-  return /* @__PURE__ */ jsx46("button", {
+  return /* @__PURE__ */ jsx47("button", {
     type: "button",
     tabIndex,
     ...props,
@@ -5005,10 +5098,10 @@ var ControlButton = (props) => {
 
 // src/components/NewComposition/ComboBox.tsx
 import { PlayerInternals as PlayerInternals5 } from "@remotion/player";
-import { useCallback as useCallback26, useEffect as useEffect17, useMemo as useMemo29, useRef as useRef14, useState as useState23 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect17, useMemo as useMemo30, useRef as useRef14, useState as useState23 } from "react";
 import ReactDOM4 from "react-dom";
-import { jsx as jsx47, jsxs as jsxs15, Fragment as Fragment6 } from "react/jsx-runtime";
-var container13 = {
+import { jsx as jsx48, jsxs as jsxs16, Fragment as Fragment6 } from "react/jsx-runtime";
+var container14 = {
   padding: "8px 10px",
   display: "inline-block",
   backgroundColor: INPUT_BACKGROUND,
@@ -5082,25 +5175,25 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
       current.removeEventListener("click", onClick);
     };
   }, [refresh]);
-  const spaceToBottom = useMemo29(() => {
+  const spaceToBottom = useMemo30(() => {
     const margin2 = 10;
     if (size && opened) {
       return size.windowSize.height - (size.top + size.height) - margin2;
     }
     return 0;
   }, [opened, size]);
-  const spaceToTop = useMemo29(() => {
+  const spaceToTop = useMemo30(() => {
     const margin2 = 10;
     if (size && opened) {
       return size.top - margin2;
     }
     return 0;
   }, [opened, size]);
-  const derivedMaxHeight = useMemo29(() => {
+  const derivedMaxHeight = useMemo30(() => {
     return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
   }, [spaceToBottom, spaceToTop]);
   const isMobileLayout = useMobileLayout();
-  const portalStyle = useMemo29(() => {
+  const portalStyle = useMemo30(() => {
     if (!opened || !size) {
       return null;
     }
@@ -5127,9 +5220,9 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
     };
   }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
   const selected = values.find((v) => v.id === selectedId);
-  const style3 = useMemo29(() => {
+  const style3 = useMemo30(() => {
     return {
-      ...container13,
+      ...container14,
       ...customStyle ?? {},
       userSelect: "none",
       WebkitUserSelect: "none",
@@ -5140,9 +5233,9 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
       borderColor: opened ? SELECTED_BACKGROUND : hovered ? INPUT_BORDER_COLOR_HOVERED : INPUT_BORDER_COLOR_UNHOVERED
     };
   }, [customStyle, hovered, opened]);
-  return /* @__PURE__ */ jsxs15(Fragment6, {
+  return /* @__PURE__ */ jsxs16(Fragment6, {
     children: [
-      /* @__PURE__ */ jsxs15("button", {
+      /* @__PURE__ */ jsxs16("button", {
         ref,
         title: title3,
         tabIndex,
@@ -5150,29 +5243,29 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
         style: style3,
         className: MENU_INITIATOR_CLASSNAME,
         children: [
-          selected ? /* @__PURE__ */ jsx47("div", {
+          selected ? /* @__PURE__ */ jsx48("div", {
             title: typeof selected.label === "string" ? selected.label : undefined,
             style: label2,
             children: selected?.label
           }) : null,
-          /* @__PURE__ */ jsx47(Spacing, {
+          /* @__PURE__ */ jsx48(Spacing, {
             x: 1
           }),
           " ",
-          /* @__PURE__ */ jsx47(CaretDown, {})
+          /* @__PURE__ */ jsx48(CaretDown, {})
         ]
       }),
-      portalStyle ? ReactDOM4.createPortal(/* @__PURE__ */ jsx47("div", {
+      portalStyle ? ReactDOM4.createPortal(/* @__PURE__ */ jsx48("div", {
         style: fullScreenOverlay,
-        children: /* @__PURE__ */ jsx47("div", {
+        children: /* @__PURE__ */ jsx48("div", {
           style: outerPortal,
           className: "css-reset",
-          children: /* @__PURE__ */ jsx47(HigherZIndex, {
+          children: /* @__PURE__ */ jsx48(HigherZIndex, {
             onOutsideClick: onHide,
             onEscape: onHide,
-            children: /* @__PURE__ */ jsx47("div", {
+            children: /* @__PURE__ */ jsx48("div", {
               style: portalStyle,
-              children: /* @__PURE__ */ jsx47(MenuContent, {
+              children: /* @__PURE__ */ jsx48(MenuContent, {
                 onNextMenu: noop,
                 onPreviousMenu: noop,
                 values,
@@ -5192,7 +5285,7 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title3 }) => {
 
 // src/components/Preview.tsx
 import { PlayerInternals as PlayerInternals6 } from "@remotion/player";
-import { useContext as useContext19, useEffect as useEffect23, useMemo as useMemo33, useRef as useRef17 } from "react";
+import { useContext as useContext19, useEffect as useEffect23, useMemo as useMemo34, useRef as useRef17 } from "react";
 import { Internals as Internals13 } from "remotion";
 
 // src/helpers/checkerboard-background.ts
@@ -5324,7 +5417,7 @@ import {
   forwardRef as forwardRef2,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef16,
   useState as useState25
 } from "react";
@@ -5334,17 +5427,17 @@ import {
   forwardRef,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef15,
   useState as useState24
 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var INPUT_HORIZONTAL_PADDING = 8;
 var aligner = {
   marginRight: -INPUT_HORIZONTAL_PADDING
 };
 var RightAlignInput = ({ children }) => {
-  return /* @__PURE__ */ jsx48("div", {
+  return /* @__PURE__ */ jsx49("div", {
     style: aligner,
     children
   });
@@ -5366,7 +5459,7 @@ var RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
   const [isHovered, setIsHovered] = useState24(false);
   const inputRef = useRef15(null);
   const { tabIndex } = useZIndex();
-  const style3 = useMemo30(() => {
+  const style3 = useMemo31(() => {
     return {
       backgroundColor: INPUT_BACKGROUND,
       ...inputBaseStyle,
@@ -5399,7 +5492,7 @@ var RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, [inputRef]);
-  return /* @__PURE__ */ jsx48("input", {
+  return /* @__PURE__ */ jsx49("input", {
     ref: inputRef,
     tabIndex,
     ...props,
@@ -5409,7 +5502,7 @@ var RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
 var RemotionInput = forwardRef(RemInputForwardRef);
 
 // src/components/NewComposition/RemTextarea.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var inputBaseStyle2 = {
   padding: `${INPUT_HORIZONTAL_PADDING}px 10px`,
   color: "white",
@@ -5427,7 +5520,7 @@ var RemTextareaFRFunction = ({ status, ...props }, ref) => {
   useImperativeHandle8(ref, () => {
     return inputRef.current;
   }, []);
-  const style3 = useMemo31(() => {
+  const style3 = useMemo32(() => {
     return {
       backgroundColor: INPUT_BACKGROUND,
       ...inputBaseStyle2,
@@ -5490,7 +5583,7 @@ var RemTextareaFRFunction = ({ status, ...props }, ref) => {
       current.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  return /* @__PURE__ */ jsx49("textarea", {
+  return /* @__PURE__ */ jsx50("textarea", {
     ref: inputRef,
     tabIndex,
     ...props,
@@ -5501,7 +5594,7 @@ var RemTextareaFRFunction = ({ status, ...props }, ref) => {
 var RemTextarea = forwardRef2(RemTextareaFRFunction);
 
 // src/components/JSONViewer.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var jsonStyle = {
   marginTop: 14,
   marginBottom: 14,
@@ -5515,7 +5608,7 @@ var JSONViewer = ({ src }) => {
       setJson(JSON.stringify(jsonRes, null, 2));
     });
   }, [src]);
-  return /* @__PURE__ */ jsx50(RemTextarea, {
+  return /* @__PURE__ */ jsx51(RemTextarea, {
     value: json ?? undefined,
     status: "ok",
     onChange: () => {
@@ -5527,7 +5620,7 @@ var JSONViewer = ({ src }) => {
 
 // src/components/TextViewer.tsx
 import { useEffect as useEffect21, useState as useState27 } from "react";
-import { jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsxs as jsxs17 } from "react/jsx-runtime";
 var textStyle = {
   margin: 14,
   fontFamily: "monospace",
@@ -5546,7 +5639,7 @@ var TextViewer = ({ src }) => {
       setTxt(text);
     });
   }, [src]);
-  return /* @__PURE__ */ jsxs16("div", {
+  return /* @__PURE__ */ jsxs17("div", {
     style: textStyle,
     children: [
       txt,
@@ -5556,7 +5649,7 @@ var TextViewer = ({ src }) => {
 };
 
 // src/components/FilePreview.tsx
-import { jsx as jsx51, jsxs as jsxs17, Fragment as Fragment7 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs18, Fragment as Fragment7 } from "react/jsx-runtime";
 var msgStyle = {
   fontSize: 13,
   color: "white",
@@ -5572,42 +5665,42 @@ var FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     throw new Error('expected to have assetMetadata, got "not-found"');
   }
   if (fileType === "audio") {
-    return /* @__PURE__ */ jsx51("audio", {
+    return /* @__PURE__ */ jsx52("audio", {
       src,
       controls: true
     });
   }
   if (fileType === "video") {
-    return /* @__PURE__ */ jsx51("video", {
+    return /* @__PURE__ */ jsx52("video", {
       src,
       controls: true
     });
   }
   if (fileType === "image") {
-    return /* @__PURE__ */ jsx51("img", {
+    return /* @__PURE__ */ jsx52("img", {
       src
     });
   }
   if (fileType === "json") {
-    return /* @__PURE__ */ jsx51(JSONViewer, {
+    return /* @__PURE__ */ jsx52(JSONViewer, {
       src
     });
   }
   if (fileType === "txt") {
-    return /* @__PURE__ */ jsx51(TextViewer, {
+    return /* @__PURE__ */ jsx52(TextViewer, {
       src
     });
   }
-  return /* @__PURE__ */ jsxs17(Fragment7, {
+  return /* @__PURE__ */ jsxs18(Fragment7, {
     children: [
-      /* @__PURE__ */ jsx51("div", {
+      /* @__PURE__ */ jsx52("div", {
         style: msgStyle,
         children: currentAsset
       }),
-      /* @__PURE__ */ jsx51(Spacing, {
+      /* @__PURE__ */ jsx52(Spacing, {
         y: 0.5
       }),
-      /* @__PURE__ */ jsxs17("div", {
+      /* @__PURE__ */ jsxs18("div", {
         style: msgStyle,
         children: [
           "Size: ",
@@ -5620,7 +5713,7 @@ var FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
 };
 
 // src/components/RenderPreview.tsx
-import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
 var msgStyle2 = {
   fontSize: 13,
   color: "white",
@@ -5669,13 +5762,13 @@ var RenderPreview = ({ path, assetMetadata, getBlob }) => {
   }, [getBlob]);
   const src = blobUrl ?? remotion_outputsBase + path;
   if (connectionStatus === "disconnected") {
-    return /* @__PURE__ */ jsx52("div", {
+    return /* @__PURE__ */ jsx53("div", {
       style: errMsgStyle,
       children: "Studio server disconnected"
     });
   }
   if (getBlob && blobError) {
-    return /* @__PURE__ */ jsxs18("div", {
+    return /* @__PURE__ */ jsxs19("div", {
       style: errMsgStyle,
       children: [
         "Failed to load preview: ",
@@ -5684,12 +5777,12 @@ var RenderPreview = ({ path, assetMetadata, getBlob }) => {
     });
   }
   if (getBlob && !blobUrl) {
-    return /* @__PURE__ */ jsx52("div", {
+    return /* @__PURE__ */ jsx53("div", {
       style: msgStyle2,
       children: "Loading preview..."
     });
   }
-  return /* @__PURE__ */ jsx52(FilePreview, {
+  return /* @__PURE__ */ jsx53(FilePreview, {
     assetMetadata,
     currentAsset: path,
     fileType,
@@ -5698,23 +5791,23 @@ var RenderPreview = ({ path, assetMetadata, getBlob }) => {
 };
 
 // src/components/Spinner.tsx
-import { useMemo as useMemo32 } from "react";
-import { jsx as jsx53, jsxs as jsxs19, Fragment as Fragment8 } from "react/jsx-runtime";
+import { useMemo as useMemo33 } from "react";
+import { jsx as jsx54, jsxs as jsxs20, Fragment as Fragment8 } from "react/jsx-runtime";
 var viewBox = 100;
 var lines = 8;
 var className = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner = ({ size, duration }) => {
-  const style3 = useMemo32(() => {
+  const style3 = useMemo33(() => {
     return {
       width: size,
       height: size
     };
   }, [size]);
-  return /* @__PURE__ */ jsxs19(Fragment8, {
+  return /* @__PURE__ */ jsxs20(Fragment8, {
     children: [
-      /* @__PURE__ */ jsx53("style", {
+      /* @__PURE__ */ jsx54("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionSpinnerAnimation} {
@@ -5731,11 +5824,11 @@ var Spinner = ({ size, duration }) => {
         }        
 			`
       }),
-      /* @__PURE__ */ jsx53("svg", {
+      /* @__PURE__ */ jsx54("svg", {
         style: style3,
         viewBox: `0 0 ${viewBox} ${viewBox}`,
         children: new Array(lines).fill(true).map((_, index) => {
-          return /* @__PURE__ */ jsx53("path", {
+          return /* @__PURE__ */ jsx54("path", {
             className,
             style: {
               rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -5754,7 +5847,7 @@ var Spinner = ({ size, duration }) => {
 // src/components/StaticFilePreview.tsx
 import { useContext as useContext18 } from "react";
 import { staticFile as staticFile3 } from "remotion";
-import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var msgStyle3 = {
   fontSize: 13,
   color: "white",
@@ -5773,13 +5866,13 @@ var StaticFilePreview = ({ currentAsset, assetMetadata }) => {
   const connectionStatus = useContext18(StudioServerConnectionCtx).previewServerState.type;
   const exists = staticFiles.find((file) => file.name === currentAsset);
   if (connectionStatus === "disconnected") {
-    return /* @__PURE__ */ jsx54("div", {
+    return /* @__PURE__ */ jsx55("div", {
       style: errMsgStyle2,
       children: "Studio server disconnected"
     });
   }
   if (!exists) {
-    return /* @__PURE__ */ jsxs20("div", {
+    return /* @__PURE__ */ jsxs21("div", {
       style: errMsgStyle2,
       children: [
         currentAsset,
@@ -5790,7 +5883,7 @@ var StaticFilePreview = ({ currentAsset, assetMetadata }) => {
   if (!currentAsset) {
     return null;
   }
-  return /* @__PURE__ */ jsx54(FilePreview, {
+  return /* @__PURE__ */ jsx55(FilePreview, {
     currentAsset,
     fileType,
     src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === "found" ? assetMetadata.fetchedAt : 0}`,
@@ -5799,7 +5892,7 @@ var StaticFilePreview = ({ currentAsset, assetMetadata }) => {
 };
 
 // src/components/Preview.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var centeredContainer = {
   display: "flex",
   flex: 1,
@@ -5857,24 +5950,24 @@ var containerStyle = (options) => {
 };
 var VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
   if (assetMetadata && assetMetadata.type === "not-found") {
-    return /* @__PURE__ */ jsx55("div", {
+    return /* @__PURE__ */ jsx56("div", {
       style: centeredContainer,
-      children: /* @__PURE__ */ jsx55("div", {
+      children: /* @__PURE__ */ jsx56("div", {
         style: label3,
         children: "File does not exist"
       })
     });
   }
   if (contentDimensions === null) {
-    return /* @__PURE__ */ jsx55("div", {
+    return /* @__PURE__ */ jsx56("div", {
       style: centeredContainer,
-      children: /* @__PURE__ */ jsx55(Spinner, {
+      children: /* @__PURE__ */ jsx56(Spinner, {
         duration: 0.5,
         size: 24
       })
     });
   }
-  return /* @__PURE__ */ jsx55(CompWhenItHasDimensions, {
+  return /* @__PURE__ */ jsx56(CompWhenItHasDimensions, {
     contentDimensions,
     canvasSize,
     canvasContent,
@@ -5883,7 +5976,7 @@ var VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadat
 };
 var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
   const { size: previewSize } = useContext19(Internals13.PreviewSizeContext);
-  const { centerX, centerY, yCorrection, xCorrection, scale } = useMemo33(() => {
+  const { centerX, centerY, yCorrection, xCorrection, scale } = useMemo34(() => {
     if (contentDimensions === "none") {
       return {
         centerX: 0,
@@ -5900,7 +5993,7 @@ var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, a
       previewSize: previewSize.size
     });
   }, [canvasSize, contentDimensions, previewSize.size]);
-  const outer = useMemo33(() => {
+  const outer = useMemo34(() => {
     return {
       width: contentDimensions === "none" ? "100%" : contentDimensions.width * scale,
       height: contentDimensions === "none" ? "100%" : contentDimensions.height * scale,
@@ -5923,36 +6016,36 @@ var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, a
     canvasContent
   ]);
   if (canvasContent.type === "asset") {
-    return /* @__PURE__ */ jsx55("div", {
+    return /* @__PURE__ */ jsx56("div", {
       style: outer,
-      children: /* @__PURE__ */ jsx55(StaticFilePreview, {
+      children: /* @__PURE__ */ jsx56(StaticFilePreview, {
         assetMetadata,
         currentAsset: canvasContent.asset
       })
     });
   }
   if (canvasContent.type === "output") {
-    return /* @__PURE__ */ jsx55("div", {
+    return /* @__PURE__ */ jsx56("div", {
       style: outer,
-      children: /* @__PURE__ */ jsx55(RenderPreview, {
+      children: /* @__PURE__ */ jsx56(RenderPreview, {
         path: canvasContent.path,
         assetMetadata
       })
     });
   }
   if (canvasContent.type === "output-blob") {
-    return /* @__PURE__ */ jsx55("div", {
+    return /* @__PURE__ */ jsx56("div", {
       style: outer,
-      children: /* @__PURE__ */ jsx55(RenderPreview, {
+      children: /* @__PURE__ */ jsx56(RenderPreview, {
         path: canvasContent.displayName,
         assetMetadata,
         getBlob: canvasContent.getBlob
       })
     });
   }
-  return /* @__PURE__ */ jsx55("div", {
+  return /* @__PURE__ */ jsx56("div", {
     style: outer,
-    children: /* @__PURE__ */ jsx55(PortalContainer, {
+    children: /* @__PURE__ */ jsx56(PortalContainer, {
       contentDimensions,
       scale,
       xCorrection,
@@ -5962,7 +6055,7 @@ var CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, a
 };
 var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
   const { checkerboard } = useContext19(CheckerboardContext);
-  const style3 = useMemo33(() => {
+  const style3 = useMemo34(() => {
     return containerStyle({
       checkerboard,
       scale,
@@ -5987,14 +6080,14 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
     };
   }, []);
   const portalContainer = useRef17(null);
-  return /* @__PURE__ */ jsx55("div", {
+  return /* @__PURE__ */ jsx56("div", {
     ref: portalContainer,
     style: style3
   });
 };
 
 // src/components/SizeSelector.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var commonPreviewSizes = [
   {
     size: "auto",
@@ -6055,12 +6148,12 @@ var zoomableFileTypes = ["video", "image"];
 var SizeSelector = () => {
   const { size, setSize } = useContext20(Internals14.PreviewSizeContext);
   const { canvasContent } = useContext20(Internals14.CompositionManager);
-  const style3 = useMemo34(() => {
+  const style3 = useMemo35(() => {
     return {
       padding: CONTROL_BUTTON_PADDING
     };
   }, []);
-  const zoomable = useMemo34(() => {
+  const zoomable = useMemo35(() => {
     if (!canvasContent) {
       return null;
     }
@@ -6075,7 +6168,7 @@ var SizeSelector = () => {
     }
     return false;
   }, [canvasContent]);
-  const items = useMemo34(() => {
+  const items = useMemo35(() => {
     return getUniqueSizes(size).map((newSize) => {
       return {
         id: String(newSize.size),
@@ -6088,7 +6181,7 @@ var SizeSelector = () => {
         type: "item",
         value: newSize.size,
         keyHint: newSize.size === "auto" ? "0" : null,
-        leftItem: String(size.size) === String(newSize.size) ? /* @__PURE__ */ jsx56(Checkmark, {}) : null,
+        leftItem: String(size.size) === String(newSize.size) ? /* @__PURE__ */ jsx57(Checkmark, {}) : null,
         subMenu: null,
         quickSwitcherLabel: null
       };
@@ -6097,10 +6190,10 @@ var SizeSelector = () => {
   if (!zoomable) {
     return null;
   }
-  return /* @__PURE__ */ jsx56("div", {
+  return /* @__PURE__ */ jsx57("div", {
     style: style3,
     "aria-label": accessibilityLabel,
-    children: /* @__PURE__ */ jsx56(Combobox, {
+    children: /* @__PURE__ */ jsx57(Combobox, {
       title: accessibilityLabel,
       style: comboStyle,
       selectedId: String(size.size),
@@ -6121,13 +6214,13 @@ import { Internals as Internals16 } from "remotion";
 import { NoReactInternals as NoReactInternals4 } from "remotion/no-react";
 
 // src/icons/timelineInOutPointer.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var TimelineInPointer = (props) => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     viewBox: "0 0 256 256",
     fill: "none",
     ...props,
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M158 25H99V230.5H158",
       stroke: props.color,
       strokeWidth: "42",
@@ -6137,11 +6230,11 @@ var TimelineInPointer = (props) => {
   });
 };
 var TimelineOutPointer = (props) => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     viewBox: "0 0 256 256",
     fill: "none",
     ...props,
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M98 25H157V230.5H98",
       stroke: props.color,
       strokeWidth: "42",
@@ -6152,7 +6245,7 @@ var TimelineOutPointer = (props) => {
 };
 
 // src/state/in-out.ts
-import { createContext as createContext12, useContext as useContext21, useMemo as useMemo35 } from "react";
+import { createContext as createContext12, useContext as useContext21, useMemo as useMemo36 } from "react";
 import { Internals as Internals15 } from "remotion";
 var TimelineInOutContext = createContext12({});
 var SetTimelineInOutContext = createContext12({
@@ -6165,7 +6258,7 @@ var useTimelineInOutFramePosition = () => {
   const state = useContext21(TimelineInOutContext);
   const id = videoConfig?.id;
   const durationInFrames = videoConfig?.durationInFrames;
-  return useMemo35(() => {
+  return useMemo36(() => {
     if (!id || !durationInFrames) {
       return { inFrame: null, outFrame: null };
     }
@@ -6184,7 +6277,7 @@ var useTimelineSetInOutFramePosition = () => {
 };
 
 // src/components/TimelineInOutToggle.tsx
-import { jsx as jsx58, jsxs as jsxs21, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs22, Fragment as Fragment9 } from "react/jsx-runtime";
 var getTooltipText = (pointType, key) => [
   `Mark ${pointType}`,
   areKeyboardShortcutsDisabled() ? null : `(${key})`,
@@ -6399,26 +6492,26 @@ var TimelineInOutPointToggle = () => {
       outMarkClick: onOutMark
     };
   }, [confId, onInMark, onInOutClear, onOutMark]);
-  return /* @__PURE__ */ jsxs21(Fragment9, {
+  return /* @__PURE__ */ jsxs22(Fragment9, {
     children: [
-      /* @__PURE__ */ jsx58(ControlButton, {
+      /* @__PURE__ */ jsx59(ControlButton, {
         title: getTooltipText("In", "I"),
         "aria-label": getTooltipText("In", "I"),
         onClick: onInMark,
         onContextMenu: clearInMark,
         disabled: !videoConfig || isFirstFrame,
-        children: /* @__PURE__ */ jsx58(TimelineInPointer, {
+        children: /* @__PURE__ */ jsx59(TimelineInPointer, {
           color: inFrame === null ? "white" : BLUE,
           style: style3
         })
       }),
-      /* @__PURE__ */ jsx58(ControlButton, {
+      /* @__PURE__ */ jsx59(ControlButton, {
         title: getTooltipText("Out", "O"),
         "aria-label": getTooltipText("Out", "O"),
         onClick: onOutMark,
         onContextMenu: clearOutMark,
         disabled: !videoConfig || isLastFrame,
-        children: /* @__PURE__ */ jsx58(TimelineOutPointer, {
+        children: /* @__PURE__ */ jsx59(TimelineOutPointer, {
           color: outFrame === null ? "white" : BLUE,
           style: style3
         })
@@ -6427,43 +6520,6 @@ var TimelineInOutPointToggle = () => {
   });
 };
 
-// src/error-overlay/remotion-overlay/ShortcutHint.tsx
-import { useMemo as useMemo36 } from "react";
-import { jsx as jsx59, jsxs as jsxs22 } from "react/jsx-runtime";
-var cmdOrCtrlCharacter = window.navigator.platform.startsWith("Mac") ? "⌘" : "Ctrl";
-var container14 = {
-  display: "inline-block",
-  marginLeft: 6,
-  opacity: 0.6,
-  verticalAlign: "middle",
-  fontSize: 14
-};
-var ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
-  const style4 = useMemo36(() => {
-    if (keyToPress === "↵") {
-      return {
-        display: "inline-block",
-        transform: `translateY(2px)`,
-        fontSize: 14
-      };
-    }
-    return {};
-  }, [keyToPress]);
-  if (areKeyboardShortcutsDisabled()) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs22("span", {
-    style: container14,
-    children: [
-      cmdOrCtrl ? `${cmdOrCtrlCharacter}` : "",
-      /* @__PURE__ */ jsx59("span", {
-        style: style4,
-        children: keyToPress.toUpperCase()
-      })
-    ]
-  });
-};
-
 // src/state/editor-guides.ts
 import { createContext as createContext13 } from "react";
 var persistEditorShowGuidesOption = (option) => {
@@ -16618,7 +16674,10 @@ var ClientRenderQueueProcessor = () => {
       onProgress: (progress) => {
         onProgress(job.id, {
           encodedFrames: progress.encodedFrames,
-          totalFrames
+          totalFrames,
+          doneIn: progress.doneIn,
+          renderEstimatedTime: progress.renderEstimatedTime,
+          progress: progress.progress
         });
       },
       outputTarget: "web-fs",
@@ -16909,8 +16968,7 @@ var RenderQueueItemStatus = ({ job }) => {
   if (job.status === "running") {
     let progressValue;
     if (isClientJob) {
-      const { encodedFrames, totalFrames } = job.progress;
-      progressValue = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+      progressValue = job.progress.progress;
     } else {
       progressValue = job.progress.value;
     }
@@ -17002,6 +17060,34 @@ var RenderQueueOutputName = ({ job }) => {
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { useCallback as useCallback77, useContext as useContext43 } from "react";
+
+// src/components/RenderQueue/client-render-progress.ts
+var formatEtaString = (timeRemainingInMilliseconds) => {
+  const remainingTime = timeRemainingInMilliseconds / 1000;
+  const remainingTimeHours = Math.floor(remainingTime / 3600);
+  const remainingTimeMinutes = Math.floor(remainingTime % 3600 / 60);
+  const remainingTimeSeconds = Math.floor(remainingTime % 60);
+  return [
+    remainingTimeHours ? `${remainingTimeHours}h` : null,
+    remainingTimeMinutes ? `${remainingTimeMinutes}m` : null,
+    `${remainingTimeSeconds}s`
+  ].filter((value) => Boolean(value)).join(" ");
+};
+var getClientRenderProgressMessage = (progress) => {
+  if (progress.totalFrames === 0) {
+    return "Getting composition";
+  }
+  if (progress.doneIn !== null) {
+    return `Encoded ${progress.totalFrames}/${progress.totalFrames}`;
+  }
+  if (progress.renderEstimatedTime > 0) {
+    const etaString = `, time remaining: ${formatEtaString(progress.renderEstimatedTime)}`;
+    return `Rendering ${progress.encodedFrames}/${progress.totalFrames}${etaString}`;
+  }
+  return `Encoded ${progress.encodedFrames}/${progress.totalFrames}`;
+};
+
+// src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { jsx as jsx153 } from "react/jsx-runtime";
 var outputLocation2 = {
   ...renderQueueItemSubtitleStyle
@@ -17019,7 +17105,7 @@ var RenderQueueProgressMessage = ({ job }) => {
       jobId: job.id
     });
   }, [job.id, setSelectedModal]);
-  const message = isClientJob ? job.progress.totalFrames === 0 ? "Getting composition" : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}` : job.progress.message;
+  const message = isClientJob ? getClientRenderProgressMessage(job.progress) : job.progress.message;
   return /* @__PURE__ */ jsx153("button", {
     onClick,
     type: "button",
@@ -26871,9 +26957,15 @@ var right3 = {
   textAlign: "right",
   flex: 1
 };
-var EncodingProgress = ({ encodedFrames, totalFrames }) => {
-  const done = encodedFrames === totalFrames;
-  const progress = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+var ProgressStatus = ({ encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress }) => {
+  const done = doneIn !== null;
+  const message = getClientRenderProgressMessage({
+    encodedFrames,
+    totalFrames,
+    doneIn,
+    renderEstimatedTime,
+    progress
+  });
   return /* @__PURE__ */ jsxs120("div", {
     style: progressItem,
     children: [
@@ -26885,8 +26977,15 @@ var EncodingProgress = ({ encodedFrames, totalFrames }) => {
       }),
       /* @__PURE__ */ jsx237("div", {
         style: label10,
-        children: done ? `Encoded ${totalFrames} frames` : `Encoding ${encodedFrames} / ${totalFrames} frames`
-      })
+        children: message
+      }),
+      doneIn !== null ? /* @__PURE__ */ jsxs120("div", {
+        style: right3,
+        children: [
+          doneIn,
+          "ms"
+        ]
+      }) : null
     ]
   });
 };
@@ -26944,15 +27043,18 @@ var ClientRenderProgress = ({ job }) => {
       ]
     });
   }
-  const { encodedFrames, totalFrames } = job.progress;
+  const { encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress } = job.progress;
   return /* @__PURE__ */ jsxs120("div", {
     children: [
       /* @__PURE__ */ jsx237(Spacing, {
         y: 0.5
       }),
-      job.type === "client-video" && /* @__PURE__ */ jsx237(EncodingProgress, {
+      job.type === "client-video" && /* @__PURE__ */ jsx237(ProgressStatus, {
         encodedFrames,
-        totalFrames
+        totalFrames,
+        doneIn,
+        renderEstimatedTime,
+        progress
       }),
       /* @__PURE__ */ jsx237(Spacing, {
         y: 1
@@ -27373,7 +27475,7 @@ var addTrueBooleanFlagsIfChanged = (flags, mappings) => {
   }
 };
 var getNpmRemotionCommandPrefix = (version) => {
-  return version.trim() === "" ? "npx --yes --location=global -p @remotion/cli remotion" : `npx --yes --location=global -p @remotion/cli@${version} remotion`;
+  return version.trim() === "" ? "bunx --yes --location=global -p @remotion/cli remotion" : `bunx --yes --location=global -p @remotion/cli@${version} remotion`;
 };
 var normalizeServeUrlForRenderCommand = ({
   locationHref,