@remotion/studio 4.0.428 → 4.0.429

package/README.md

@@ -1,18 +1,18 @@
 # @remotion/studio
- 
+
 APIs for interacting with the Remotion Studio
- 
+
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/studio.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/studio?minimal=true)
- 
+
 ## Installation
- 
+
 ```bash
 npm install @remotion/studio --save-exact
 ```
- 
+
 When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
 Remove the `^` character from the version number to use the exact version.
- 
+
 ## Usage
- 
+
 See the [documentation](https://www.remotion.dev/docs/studio/api) for more information.

package/dist/components/AssetSelectorItem.js

@@ -51,9 +51,9 @@ const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
+const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
-const layout_1 = require("./layout");
 const ASSET_ITEM_HEIGHT = 32;
 const iconStyle = {
     width: 18,

package/dist/components/Canvas.js

@@ -18,9 +18,9 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
-const layout_1 = require("./layout");
 const container = {
     flex: 1,
     display: 'flex',

package/dist/components/CopyButton.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const copy_text_1 = require("../helpers/copy-text");
 const Button_1 = require("./Button");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const iconStyle = {
     width: 16,
     height: 16,

package/dist/components/FilePreview.js

@@ -4,8 +4,8 @@ exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const JSONViewer_1 = require("./JSONViewer");
-const TextViewer_1 = require("./TextViewer");
 const layout_1 = require("./layout");
+const TextViewer_1 = require("./TextViewer");
 const msgStyle = {
     fontSize: 13,
     color: 'white',

package/dist/components/InstallPackage.js

@@ -46,12 +46,12 @@ const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const Checkbox_1 = require("./Checkbox");
 const InstallablePackage_1 = require("./InstallablePackage");
+const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalButton_1 = require("./ModalButton");
 const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
-const layout_1 = require("./layout");
 const container = {
     padding: 20,
     maxHeight: 400,

package/dist/components/Menu/MenuSubItem.js

@@ -14,10 +14,10 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
-const SubMenu_1 = require("./SubMenu");
 const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
+const SubMenu_1 = require("./SubMenu");
 const container = {
     paddingTop: 8,
     paddingBottom: 8,

package/dist/components/MenuBuildIndicator.js

@@ -4,9 +4,9 @@ exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const layout_1 = require("./layout");
 const OpenEditorButton_1 = require("./OpenEditorButton");
 const Spinner_1 = require("./Spinner");
-const layout_1 = require("./layout");
 const cwd = {
     fontSize: 13,
     opacity: 0.8,

package/dist/components/MenuToolbar.js

@@ -6,11 +6,11 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
+const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UpdateCheck_1 = require("./UpdateCheck");
-const layout_1 = require("./layout");
 const row = {
     alignItems: 'center',
     flexDirection: 'row',

package/dist/components/ModalHeader.js

@@ -4,8 +4,8 @@ exports.ModalHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../state/modals");
-const CancelButton_1 = require("./NewComposition/CancelButton");
 const layout_1 = require("./layout");
+const CancelButton_1 = require("./NewComposition/CancelButton");
 const container = {
     display: 'flex',
     flexDirection: 'row',

package/dist/components/NewComposition/CodemodFooter.js

@@ -6,10 +6,10 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
 const ModalButton_1 = require("../ModalButton");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
-const layout_1 = require("../layout");
 const DiffPreview_1 = require("./DiffPreview");
 const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
     const [submitting, setSubmitting] = (0, react_1.useState)(false);

package/dist/components/NewComposition/ComboBox.js

@@ -13,10 +13,10 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const noop_1 = require("../../helpers/noop");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
 const styles_1 = require("../Menu/styles");
-const layout_1 = require("../layout");
 const MenuContent_1 = require("./MenuContent");
 const container = {
     padding: '8px 10px',

package/dist/components/NewComposition/DuplicateComposition.js

@@ -6,11 +6,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const url_state_1 = require("../../helpers/url-state");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
-const layout_1 = require("../RenderModal/layout");
-const layout_2 = require("../layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
@@ -178,27 +178,27 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                     jsx_runtime_1.jsxs("div", { style: content, children: [initialCompType === 'composition' ? (
                             // We allow converting from a composition to a still, but
                             // not the other way around
-                            jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
-                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_1.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
+                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                        jsx_runtime_1.jsx(layout_2.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
+                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] }), hadDimensionsDefined ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Width" }), jsx_runtime_1.jsxs("div", { style: layout_1.rightRow, children: [
+                                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
                                                     jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                            jsx_runtime_1.jsx(layout_2.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
+                                                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
                                                         ] })) : null] })
-                                        ] }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Height" }), jsx_runtime_1.jsxs("div", { style: layout_1.rightRow, children: [
+                                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
                                                     jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                            jsx_runtime_1.jsx(layout_2.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
+                                                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
                                                         ] })) : null] })
                                         ] })
-                                ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_1.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
+                                ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: onDuplicateSuccess }) })
                 ] })
         ] }));

package/dist/components/NewComposition/InputDragger.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { RemInputStatus } from './RemInput';
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
+    readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -45,7 +45,7 @@ const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
 };
-const InputDraggerForwardRefFn = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
@@ -109,6 +109,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, min: _min, max: _max, step: _
         if (button !== 0) {
             return;
         }
+        let lastDragValue = null;
         const moveListener = (ev) => {
             const xDistance = ev.pageX - pageX;
             const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
@@ -121,18 +122,22 @@ const InputDraggerForwardRefFn = ({ onValueChange, min: _min, max: _max, step: _
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
             const newValue = Math.min(max, Math.max(min, Number(value) + diff));
             const roundedToStep = roundToStep(newValue, step);
+            lastDragValue = roundedToStep;
             onValueChange(roundedToStep);
         };
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
             window.removeEventListener('mousemove', moveListener);
+            if (lastDragValue !== null && onValueChangeEnd) {
+                onValueChangeEnd(lastDragValue);
+            }
             setTimeout(() => {
                 (0, input_dragger_click_lock_1.setClickLock)(false);
             }, 2);
         }, {
             once: true,
         });
-    }, [_step, _min, _max, value, onValueChange]);
+    }, [_step, _min, _max, value, onValueChange, onValueChangeEnd]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (inputFallback) {

package/dist/components/NewComposition/MenuContent.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const styles_1 = require("../Menu/styles");
 const BORDER_SIZE = 1;
 const container = {

package/dist/components/NewComposition/NewCompDuration.js

@@ -4,8 +4,8 @@ exports.NewCompDuration = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../RenderModal/layout");
-const layout_2 = require("../layout");
+const layout_1 = require("../layout");
+const layout_2 = require("../RenderModal/layout");
 const InputDragger_1 = require("./InputDragger");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
@@ -16,12 +16,12 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
         setDurationInFrames(newVal);
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Duration in frames" }), jsx_runtime_1.jsxs("div", { style: layout_1.rightRow, children: [
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
                     jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
                         // Hitting Promise.all() limit in Chrome
                         max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_2.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
                         ] })) : null] })
         ] }));
 };

package/dist/components/NewComposition/RenameComposition.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
-const layout_1 = require("../RenderModal/layout");
-const layout_2 = require("../layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const RemInput_1 = require("./RemInput");
@@ -50,10 +50,10 @@ const RenameCompositionLoaded = () => {
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                jsx_runtime_1.jsx("div", { style: layout_1.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                    jsx_runtime_1.jsx(layout_2.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
+                                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: null }) })
                 ] })

package/dist/components/OverrideInputProps.js

@@ -7,9 +7,9 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const Button_1 = require("./Button");
+const layout_1 = require("./layout");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RemTextarea_1 = require("./NewComposition/RemTextarea");
-const layout_1 = require("./layout");
 const style = {
     padding: 12,
     width: 500,

package/dist/components/PreviewToolbar.js

@@ -14,17 +14,17 @@ const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
 const FpsCounter_1 = require("./FpsCounter");
 const FullscreenToggle_1 = require("./FullscreenToggle");
+const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
-const PlayPause_1 = require("./PlayPause");
 const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
+const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const layout_1 = require("./layout");
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -75,6 +75,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const previewToolbarRef = (0, react_1.useRef)(null);
     const leftScrollIndicatorRef = (0, react_1.useRef)(null);
@@ -139,7 +140,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                             jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isFullscreenSupported && jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isFullscreenSupported && jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), (0, should_show_render_button_1.shouldShowRenderButton)(readOnlyStudio) ? (jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -11,14 +11,14 @@ const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("../layout");
+const algolia_search_1 = require("./algolia-search");
 const AlgoliaCredit_1 = require("./AlgoliaCredit");
+const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
-const algolia_search_1 = require("./algolia-search");
-const fuzzy_search_1 = require("./fuzzy-search");
 const input = {
     width: '100%',
 };

package/dist/components/RenderButton.js

@@ -18,11 +18,11 @@ const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const layout_1 = require("./layout");
 const splitButtonContainer = {
     display: 'inline-flex',
     flexDirection: 'row',

package/dist/components/RenderModal/DataEditor.js

@@ -41,19 +41,19 @@ const no_react_1 = require("remotion/no-react");
 const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const layout_1 = require("../layout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
-const get_zod_if_possible_1 = require("../get-zod-if-possible");
-const layout_1 = require("../layout");
+const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
+const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
-const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
 const zod_schema_type_1 = require("./SchemaEditor/zod-schema-type");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
-const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const errorExplanation = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,

package/dist/components/RenderModal/EnforceAudioTrackSetting.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack }) => {
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);

package/dist/components/RenderModal/EnvInput.js

@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnvInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const layout_1 = require("../layout");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const layout_1 = require("../layout");
 const InlineEyeIcon_1 = require("./InlineEyeIcon");
 const InlineRemoveButton_1 = require("./InlineRemoveButton");
 const layout_2 = require("./layout");

package/dist/components/RenderModal/MutedSetting.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
     const onMutedChanged = (0, react_1.useCallback)((e) => {
         setMuted(e.target.checked);

package/dist/components/RenderModal/NumberSetting.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const layout_1 = require("../layout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("../layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
     const onTextChanged = (0, react_1.useCallback)((e) => {
         onValueChanged((q) => {

package/dist/components/RenderModal/OptionExplainer.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
-const MenuDivider_1 = require("../Menu/MenuDivider");
 const layout_1 = require("../layout");
+const MenuDivider_1 = require("../Menu/MenuDivider");
 const CliCopyButton_1 = require("./CliCopyButton");
 const container = {
     fontSize: 14,

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -7,15 +7,15 @@ const react_1 = require("react");
 const presets_labels_1 = require("../../helpers/presets-labels");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("../layout");
+const layout_2 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
 const RenderModalHr_1 = require("./RenderModalHr");
-const layout_2 = require("./layout");
 const container = {
     flex: 1,
     overflowY: 'auto',

package/dist/components/RenderModal/RenderModalAudio.js

@@ -6,17 +6,17 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("../layout");
 const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
+const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
+const layout_2 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalHr_1 = require("./RenderModalHr");
 const SeparateAudioOption_1 = require("./SeparateAudioOption");
-const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
-const layout_2 = require("./layout");
 const container = {
     flex: 1,
     overflowY: 'auto',

package/dist/components/RenderModal/RenderModalBasic.js

@@ -8,17 +8,17 @@ const react_1 = require("react");
 const prores_labels_1 = require("../../helpers/prores-labels");
 const use_file_existence_1 = require("../../helpers/use-file-existence");
 const Checkmark_1 = require("../../icons/Checkmark");
+const layout_1 = require("../layout");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
 const SegmentedControl_1 = require("../SegmentedControl");
-const layout_1 = require("../layout");
 const FrameRangeSetting_1 = require("./FrameRangeSetting");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const human_readable_codec_1 = require("./human-readable-codec");
 const human_readable_loglevel_1 = require("./human-readable-loglevel");
 const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const container = {
     flex: 1,
 };

package/dist/components/RenderModal/RenderModalGif.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
+const layout_2 = require("./layout");
 const NumberOfLoopsSetting_1 = require("./NumberOfLoopsSetting");
 const NumberSetting_1 = require("./NumberSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const layout_2 = require("./layout");
 const container = {
     flex: 1,
 };