@remotion/studio 4.0.174 → 4.0.176

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.173 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.175 build /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/.turbo/turbo-test.log

@@ -0,0 +1,85 @@
+
+> @remotion/studio@4.0.163 test /Users/jonathanburger/remotion/packages/studio
+> bun test src
+
+bun test v1.1.9-canary.1 (4df387d5)
+
+src/test/stringify-default-props.test.ts:
+✓ Should stringify default props correctly [2.87ms]
+✓ Should stringify default props correctly [4.96ms]
+
+src/test/sequenced-timeline.test.ts:
+✓ Should calculate sequences correctly [9.98ms]
+
+src/test/create-zod-values.test.ts:
+✓ Should be able to create a string [5.47ms]
+✓ Should be able to create a number [0.33ms]
+✓ Should be able to create an object [0.25ms]
+✓ Should be able to create an array [0.22ms]
+✓ Should be able to create a union [0.32ms]
+✓ Zod literal [0.20ms]
+✓ Should be able to create a discriminated union [1.18ms]
+✓ Zod instanceof [0.47ms]
+✓ Zod intersection [0.81ms]
+✓ Zod tuples [0.40ms]
+✓ Zod record [0.11ms]
+✓ Zod map [0.09ms]
+✓ Zod lazy [0.08ms]
+✓ Zod set [0.10ms]
+✓ Zod function [0.17ms]
+✓ Zod undefined [0.07ms]
+✓ Zod null [0.07ms]
+✓ Zod enum [0.20ms]
+✓ Zod nativeEnum [0.32ms]
+✓ Zod optional [0.34ms]
+✓ Zod nullable [0.38ms]
+✓ Zod undefined [0.24ms]
+✓ Zod catch [0.28ms]
+✓ Zod promise [0.34ms]
+✓ Zod transform [0.34ms]
+✓ Zod branded [0.35ms]
+✓ Zod lazy [1.06ms]
+✓ Zod coerce [0.16ms]
+✓ Zod strict [0.14ms]
+✓ Should create a color [0.10ms]
+✓ Should create a textarea [0.05ms]
+
+src/test/folder-tree.test.ts:
+✓ Should create a good folder tree with 1 item inside and 1 item outside [0.89ms]
+✓ Should handle nested folders well [0.39ms]
+✓ Should throw if two folders with the same name [0.24ms]
+
+src/test/big-timeline.test.ts:
+✓ Should calculate timeline as expected [2.52ms]
+
+src/test/smooth-zoom.test.ts:
+✓ Smoothen zoom [0.07ms]
+✓ Unsmoothen zoom [0.09ms]
+
+src/test/validate-gui-output-filename.test.ts:
+✓ Should catch dot after slash [0.47ms]
+✓ Should catch dot in front  [0.03ms]
+
+src/test/timeline-sequence-layout.test.ts:
+✓ Should test timeline sequence layout without max media duration [0.22ms]
+✓ Should test timeline sequence layout with max media duration [0.05ms]
+
+src/test/extract-zod-enums.test.ts:
+✓ Extract Zod enums [0.12ms]
+✓ Extract Zod enums #2 [0.44ms]
+
+src/test/color-math.test.ts:
+✓ Color math [0.88ms]
+
+src/test/format-time.test.ts:
+✓ Format time [0.20ms]
+
+src/test/timeline.test.ts:
+✓ Should calculate timeline with no sequences [0.06ms]
+✓ Should calculate a basic timeline [0.09ms]
+✓ Should follow order of nesting [0.12ms]
+
+ 51 pass
+ 0 fail
+ 67 expect() calls
+Ran 51 tests across 12 files. [192.00ms]

package/dist/components/Editor.js

@@ -37,6 +37,7 @@ const EditorContent_1 = require("./EditorContent");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -85,6 +86,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);
     }, [Root]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { drawRef: canvas_ref_1.drawRef, size: size, onMounted: onMounted, readOnlyStudio: readOnlyStudio, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.d.ts

@@ -1,9 +1,5 @@
-import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const EditorContent: React.FC<{
     readonly readOnlyStudio: boolean;
-    readonly onMounted: () => void;
-    readonly drawRef: React.RefObject<HTMLDivElement>;
-    readonly size: Size | null;
-    readonly bufferStateDelayInMilliseconds: number;
+    readonly children: React.ReactNode;
 }>;

package/dist/components/EditorContent.js

@@ -11,7 +11,6 @@ const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
-const TopPanel_1 = require("./TopPanel");
 const noop = () => undefined;
 const container = {
     display: 'flex',
@@ -19,11 +18,11 @@ const container = {
     flex: 1,
     height: 0,
 };
-const EditorContent = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayInMilliseconds, }) => {
+const EditorContent = ({ readOnlyStudio, children }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)("div", { style: SplitterContainer_1.containerColumn, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), onlyTopPanel ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] })] }));
 };
 exports.EditorContent = EditorContent;

package/dist/esm/internals.mjs

@@ -5801,7 +5801,7 @@ var TimelineInOutPointToggle = () => {
     }
     setInAndOutFrames((prev) => {
       const prevInFrame = prev[videoConfig.id]?.inFrame;
-      const smallestPossible = prevInFrame === null || prevInFrame === undefined ? (-Infinity) : prevInFrame + 1;
+      const smallestPossible = prevInFrame === null || prevInFrame === undefined ? -Infinity : prevInFrame + 1;
       const selected = Math.max(timelinePosition, smallestPossible);
       if (selected === videoConfig.durationInFrames - 1) {
         return {
@@ -13235,13 +13235,13 @@ var fullWidth6 = {
 var getMinValue = (schema) => {
   const minCheck = schema._def.checks.find((c) => c.kind === "min");
   if (!minCheck) {
-    return (-Infinity);
+    return -Infinity;
   }
   if (minCheck.kind !== "min") {
     throw new Error("Expected min check");
   }
   if (!minCheck.inclusive) {
-    return (-Infinity);
+    return -Infinity;
   }
   return minCheck.value;
 };
@@ -18137,7 +18137,7 @@ var Inner2 = () => {
       setInOutDragging({
         dragging: "in",
         initialOffset: getClientXWithScroll(e.clientX),
-        boundaries: [(-Infinity), outMarker - inMarker]
+        boundaries: [-Infinity, outMarker - inMarker]
       });
       return;
     }
@@ -18146,7 +18146,7 @@ var Inner2 = () => {
         throw new Error("expected outframe");
       }
       const outMarker = get(outFrame);
-      const inMarker = inFrame === null ? (-Infinity) : get(inFrame + 1);
+      const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
       setInOutDragging({
         dragging: "out",
         initialOffset: getClientXWithScroll(e.clientX),
@@ -18357,7 +18357,7 @@ var Inner2 = () => {
           }
         }));
       }
-      const minFrame = inFrame === null ? (-Infinity) : inFrame + 1;
+      const minFrame = inFrame === null ? -Infinity : inFrame + 1;
       setInAndOutFrames((prev) => ({
         ...prev,
         [videoConfig.id]: {
@@ -19836,7 +19836,8 @@ var Timeline = () => {
 // src/components/EditorContent.tsx
 import {
 jsx as jsx188,
-jsxs as jsxs93
+jsxs as jsxs93,
+Fragment as Fragment27
 } from "react/jsx-runtime";
 var noop8 = () => {
   return;
@@ -19847,13 +19848,7 @@ var container41 = {
   flex: 1,
   height: 0
 };
-var EditorContent = ({
-  readOnlyStudio,
-  onMounted,
-  size: size4,
-  drawRef: drawRef2,
-  bufferStateDelayInMilliseconds
-}) => {
+var EditorContent = ({ readOnlyStudio, children }) => {
   const isStill = useIsStill();
   const { canvasContent } = useContext63(Internals51.CompositionManager);
   const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== "composition";
@@ -19864,16 +19859,7 @@ var EditorContent = ({
       jsx188(MenuToolbar, {
         readOnlyStudio
       }),
-      onlyTopPanel ? jsx188("div", {
-        style: containerColumn,
-        children: jsx188(TopPanel, {
-          size: size4,
-          drawRef: drawRef2,
-          bufferStateDelayInMilliseconds,
-          onMounted,
-          readOnlyStudio
-        })
-      }) : jsxs93(SplitterContainer, {
+      jsxs93(SplitterContainer, {
         orientation: "horizontal",
         id: "top-to-bottom",
         maxFlex: 0.9,
@@ -19883,22 +19869,20 @@ var EditorContent = ({
           jsx188(SplitterElement, {
             sticky: null,
             type: "flexer",
-            children: jsx188(TopPanel, {
-              size: size4,
-              drawRef: drawRef2,
-              bufferStateDelayInMilliseconds,
-              onMounted,
-              readOnlyStudio
-            })
-          }),
-          jsx188(SplitterHandle, {
-            allowToCollapse: "none",
-            onCollapse: noop8
+            children
           }),
-          jsx188(SplitterElement, {
-            sticky: null,
-            type: "anti-flexer",
-            children: jsx188(Timeline, {})
+          onlyTopPanel ? null : jsxs93(Fragment27, {
+            children: [
+              jsx188(SplitterHandle, {
+                allowToCollapse: "none",
+                onCollapse: noop8
+              }),
+              jsx188(SplitterElement, {
+                sticky: null,
+                type: "anti-flexer",
+                children: jsx188(Timeline, {})
+              })
+            ]
           })
         ]
       })
@@ -20364,7 +20348,7 @@ var DismissableModal = ({ children }) => {
 import {
 jsx as jsx195,
 jsxs as jsxs98,
-Fragment as Fragment27
+Fragment as Fragment28
 } from "react/jsx-runtime";
 var content2 = {
   padding: 16,
@@ -20387,7 +20371,7 @@ var DeleteCompositionLoaded = ({ compositionId }) => {
   const onSubmit = useCallback93((e) => {
     e.preventDefault();
   }, []);
-  return jsxs98(Fragment27, {
+  return jsxs98(Fragment28, {
     children: [
       jsx195(NewCompHeader, {
         title: "Delete composition"
@@ -20492,7 +20476,7 @@ import {useCallback as useCallback94} from "react";
 import {
 jsx as jsx196,
 jsxs as jsxs99,
-Fragment as Fragment28
+Fragment as Fragment29
 } from "react/jsx-runtime";
 var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
   const onDurationInFramesChanged = useCallback94((newValue) => {
@@ -20526,7 +20510,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
             onValueChange: onDurationChangedDirectly,
             rightAlign: false
           }),
-          compDurationErrMessage ? jsxs99(Fragment28, {
+          compDurationErrMessage ? jsxs99(Fragment29, {
             children: [
               jsx196(Spacing, {
                 y: 1,
@@ -20549,7 +20533,7 @@ var NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
 import {
 jsx as jsx197,
 jsxs as jsxs100,
-Fragment as Fragment29
+Fragment as Fragment30
 } from "react/jsx-runtime";
 var content3 = {
   padding: 12,
@@ -20700,7 +20684,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
   const onSubmit = useCallback95((e) => {
     e.preventDefault();
   }, []);
-  return jsxs100(Fragment29, {
+  return jsxs100(Fragment30, {
     children: [
       jsx197(NewCompHeader, {
         title: `Duplicate ${resolved.result.id}`
@@ -20749,7 +20733,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                           status: "ok",
                           rightAlign: true
                         }),
-                        compNameErrMessage ? jsxs100(Fragment29, {
+                        compNameErrMessage ? jsxs100(Fragment30, {
                           children: [
                             jsx197(Spacing, {
                               y: 1,
@@ -20767,7 +20751,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                   })
                 ]
               }),
-              hadDimensionsDefined ? jsxs100(Fragment29, {
+              hadDimensionsDefined ? jsxs100(Fragment30, {
                 children: [
                   jsxs100("div", {
                     style: optionRow,
@@ -20794,7 +20778,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                             onValueChange: onWidthDirectlyChanged,
                             rightAlign: false
                           }),
-                          compWidthErrMessage ? jsxs100(Fragment29, {
+                          compWidthErrMessage ? jsxs100(Fragment30, {
                             children: [
                               jsx197(Spacing, {
                                 y: 1,
@@ -20836,7 +20820,7 @@ var DuplicateCompositionLoaded = ({ initialType }) => {
                             onValueChange: onHeightDirectlyChanged,
                             rightAlign: false
                           }),
-                          compHeightErrMessage ? jsxs100(Fragment29, {
+                          compHeightErrMessage ? jsxs100(Fragment30, {
                             children: [
                               jsx197(Spacing, {
                                 y: 1,
@@ -20921,7 +20905,7 @@ import {Internals as Internals55} from "remotion";
 import {
 jsx as jsx198,
 jsxs as jsxs101,
-Fragment as Fragment30
+Fragment as Fragment31
 } from "react/jsx-runtime";
 var content4 = {
   padding: 12,
@@ -20955,7 +20939,7 @@ var RenameCompositionLoaded = () => {
   const onSubmit = useCallback96((e) => {
     e.preventDefault();
   }, []);
-  return jsxs101(Fragment30, {
+  return jsxs101(Fragment31, {
     children: [
       jsx198(NewCompHeader, {
         title: `Rename ${resolved.result.id}`
@@ -20985,7 +20969,7 @@ var RenameCompositionLoaded = () => {
                         status: "ok",
                         rightAlign: true
                       }),
-                      compNameErrMessage ? jsxs101(Fragment30, {
+                      compNameErrMessage ? jsxs101(Fragment31, {
                         children: [
                           jsx198(Spacing, {
                             y: 1,
@@ -21781,7 +21765,7 @@ import {useEffect as useEffect65, useMemo as useMemo105, useRef as useRef34, use
 import {
 jsx as jsx202,
 jsxs as jsxs104,
-Fragment as Fragment31
+Fragment as Fragment32
 } from "react/jsx-runtime";
 var container45 = {
   paddingLeft: 16,
@@ -21885,7 +21869,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       }),
       jsx202("div", {
         style: labelContainer,
-        children: result.type === "search-result" ? jsxs104(Fragment31, {
+        children: result.type === "search-result" ? jsxs104(Fragment32, {
           children: [
             jsx202("div", {
               dangerouslySetInnerHTML: {
@@ -22006,7 +21990,7 @@ var waitForElm = function(selector) {
 import {
 jsx as jsx203,
 jsxs as jsxs105,
-Fragment as Fragment32
+Fragment as Fragment33
 } from "react/jsx-runtime";
 var input2 = {
   width: "100%"
@@ -22298,7 +22282,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
             placeholder: "Search compositions...",
             rightAlign: false
           }),
-          showKeyboardShortcuts ? jsxs105(Fragment32, {
+          showKeyboardShortcuts ? jsxs105(Fragment33, {
             children: [
               jsx203(Spacing, {
                 x: 2
@@ -22769,7 +22753,7 @@ var OptionExplainerBubble = ({ id }) => {
 import {
 jsx as jsx214,
 jsxs as jsxs107,
-Fragment as Fragment33
+Fragment as Fragment34
 } from "react/jsx-runtime";
 var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
   const onTextChanged = useCallback100((e) => {
@@ -22791,7 +22775,7 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
         style: label5,
         children: [
           name,
-          hint ? jsxs107(Fragment33, {
+          hint ? jsxs107(Fragment34, {
             children: [
               jsx214(Spacing, {
                 x: 0.5
@@ -22951,7 +22935,7 @@ var InlineEyeButton = ({ onClick, enabled }) => {
 import {
 jsx as jsx217,
 jsxs as jsxs108,
-Fragment as Fragment34
+Fragment as Fragment35
 } from "react/jsx-runtime";
 var input3 = {
   flex: 1,
@@ -22999,7 +22983,7 @@ var EnvInput = ({
     setValueWarningEligible(true);
   }, []);
   const isNodeEnvKey = envKey.trim() === "NODE_ENV";
-  return jsxs108(Fragment34, {
+  return jsxs108(Fragment35, {
     children: [
       jsxs108(Row, {
         align: "center",
@@ -23793,7 +23777,7 @@ var useFileExistence = (outName) => {
 import {
 jsx as jsx223,
 jsxs as jsxs113,
-Fragment as Fragment35
+Fragment as Fragment36
 } from "react/jsx-runtime";
 var RenderModalOutputName = ({
   existence,
@@ -23824,7 +23808,7 @@ var RenderModalOutputName = ({
               onChange: onValueChange,
               rightAlign: true
             }),
-            validationMessage ? jsxs113(Fragment35, {
+            validationMessage ? jsxs113(Fragment36, {
               children: [
                 jsx223(Spacing, {
                   y: 1,
@@ -23836,7 +23820,7 @@ var RenderModalOutputName = ({
                   type: "error"
                 })
               ]
-            }) : existence ? jsxs113(Fragment35, {
+            }) : existence ? jsxs113(Fragment36, {
               children: [
                 jsx223(Spacing, {
                   y: 1,
@@ -23869,7 +23853,7 @@ var getStringBeforeSuffix = (fileName) => {
 import {
 jsx as jsx224,
 jsxs as jsxs114,
-Fragment as Fragment36
+Fragment as Fragment37
 } from "react/jsx-runtime";
 var SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCodec }) => {
   const existence = useFileExistence(separateAudioTo);
@@ -23902,7 +23886,7 @@ var SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, ou
       setSeparateAudioTo(null);
     }
   }, [audioCodec, outName, setSeparateAudioTo]);
-  return jsxs114(Fragment36, {
+  return jsxs114(Fragment37, {
     children: [
       jsxs114("div", {
         style: optionRow,
@@ -23959,7 +23943,7 @@ var humanReadableAudioCodec = (audioCodec) => {
 import {
 jsx as jsx225,
 jsxs as jsxs115,
-Fragment as Fragment37
+Fragment as Fragment38
 } from "react/jsx-runtime";
 var container49 = {
   flex: 1,
@@ -24013,7 +23997,7 @@ var RenderModalAudio = ({
     style: container49,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
     children: [
-      renderMode === "video" ? jsxs115(Fragment37, {
+      renderMode === "video" ? jsxs115(Fragment38, {
         children: [
           jsx225(MutedSetting, {
             enforceAudioTrack,
@@ -24048,7 +24032,7 @@ var RenderModalAudio = ({
           })
         ]
       }) : null,
-      (renderMode === "video" || renderMode === "audio") && !muted && jsxs115(Fragment37, {
+      (renderMode === "video" || renderMode === "audio") && !muted && jsxs115(Fragment38, {
         children: [
           jsx225(EnforceAudioTrackSetting, {
             muted,
@@ -24684,7 +24668,7 @@ var ScaleSetting = ({ scale, setScale }) => {
 import {
 jsx as jsx233,
 jsxs as jsxs121,
-Fragment as Fragment38
+Fragment as Fragment39
 } from "react/jsx-runtime";
 var qualityControlModes = ["crf", "bitrate"];
 var container53 = {
@@ -24840,7 +24824,7 @@ var RenderModalPicture = ({
           })
         ]
       }) : null,
-      renderMode === "video" ? jsxs121(Fragment38, {
+      renderMode === "video" ? jsxs121(Fragment39, {
         children: [
           jsxs121("div", {
             style: optionRow,
@@ -26371,7 +26355,7 @@ var GuiRenderStatus = ({ job }) => {
 import {
 jsx as jsx237,
 jsxs as jsxs124,
-Fragment as Fragment39
+Fragment as Fragment40
 } from "react/jsx-runtime";
 var container55 = {
   padding: 20,
@@ -26434,7 +26418,7 @@ var RenderStatusModal = ({ jobId }) => {
       jsxs124("div", {
         style: container55,
         children: [
-          job.status === "failed" ? jsxs124(Fragment39, {
+          job.status === "failed" ? jsxs124(Fragment40, {
             children: [
               jsx237("p", {
                 children: "The render failed because of the following error:"
@@ -26643,7 +26627,7 @@ var KnownBugs = ({ bugs }) => {
 import {
 jsx as jsx241,
 jsxs as jsxs127,
-Fragment as Fragment40
+Fragment as Fragment41
 } from "react/jsx-runtime";
 var container57 = {
   padding: 20,
@@ -26695,7 +26679,7 @@ var UpdateModal = ({ info, knownBugs }) => {
       jsxs127("div", {
         style: container57,
         children: [
-          hasKnownBugs ? jsxs127(Fragment40, {
+          hasKnownBugs ? jsxs127(Fragment41, {
             children: [
               jsxs127("div", {
                 style: title7,
@@ -26778,12 +26762,12 @@ var UpdateModal = ({ info, knownBugs }) => {
 import {
 jsx as jsx242,
 jsxs as jsxs128,
-Fragment as Fragment41
+Fragment as Fragment42
 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext76(ModalsContext);
   const canRender = useContext76(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return jsxs128(Fragment41, {
+  return jsxs128(Fragment42, {
     children: [
       modalContextType && modalContextType.type === "duplicate-comp" && jsx242(DuplicateComposition, {
         compositionType: modalContextType.compositionType,
@@ -26917,11 +26901,14 @@ var Editor = ({ Root, readOnlyStudio }) => {
               jsxs129(Internals57.CanUseRemotionHooksProvider, {
                 children: [
                   jsx243(EditorContent, {
-                    drawRef,
-                    size: size4,
-                    onMounted,
                     readOnlyStudio,
-                    bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS
+                    children: jsx243(TopPanel, {
+                      size: size4,
+                      drawRef,
+                      bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS,
+                      onMounted,
+                      readOnlyStudio
+                    })
                   }),
                   jsx243(GlobalKeybindings, {})
                 ]

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.174",
+  "version": "4.0.176",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.174",
-    "@remotion/player": "4.0.174",
-    "@remotion/media-utils": "4.0.174",
-    "@remotion/renderer": "4.0.174",
-    "@remotion/studio-shared": "4.0.174"
+    "remotion": "4.0.176",
+    "@remotion/player": "4.0.176",
+    "@remotion/media-utils": "4.0.176",
+    "@remotion/renderer": "4.0.176",
+    "@remotion/studio-shared": "4.0.176"
   },
   "devDependencies": {
     "react": "18.3.1",
@@ -39,7 +39,7 @@
     "@types/semver": "^7.3.4",
     "prettier-plugin-organize-imports": "3.2.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.174"
+    "@remotion/zod-types": "4.0.176"
   },
   "publishConfig": {
     "access": "public"