@remotion/studio 4.0.484 → 4.0.486

package/dist/components/Menu/MenuItem.js

@@ -16,7 +16,7 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',

package/dist/components/Menu/MenuSubItem.js

@@ -56,7 +56,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: selected && !disabled ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected && !disabled ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
             opacity: disabled ? 0.5 : 1,
             cursor: disabled ? 'not-allowed' : 'default',
         };

package/dist/components/Menu/styles.js

@@ -9,12 +9,12 @@ exports.MAX_MOBILE_MENU_WIDTH = 300;
 const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
-exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
+exports.SHADOW_TOWARDS_BOTTOM = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+exports.SHADOW_TOWARDS_TOP = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
 exports.menuContainerTowardsBottom = {
     ...menuContainer,
     boxShadow: exports.SHADOW_TOWARDS_BOTTOM,

package/dist/components/MenuToolbar.js

@@ -17,8 +17,8 @@ const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
-    color: 'white',
-    borderBottom: '1px solid black',
+    color: colors_1.WHITE,
+    borderBottom: colors_1.BORDER_BLACK,
     boxSizing: 'border-box',
     fontSize: 13,
     height: exports.MENU_TOOLBAR_HEIGHT,

package/dist/components/ModalButton.js

@@ -7,7 +7,7 @@ const colors_1 = require("../helpers/colors");
 const Button_1 = require("./Button");
 const buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const ModalButton = (props) => {
     const style = (0, react_1.useMemo)(() => {

package/dist/components/ModalContainer.js

@@ -15,7 +15,7 @@ const getMaxModalHeight = (height) => {
 };
 exports.getMaxModalHeight = getMaxModalHeight;
 const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.WHITE_ALPHA_20,
     backdropFilter: `blur(1px)`,
     position: 'fixed',
     height: '100%',
@@ -25,8 +25,8 @@ const backgroundOverlay = {
 };
 const panel = {
     backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
+    boxShadow: colors_1.SHADOW_BLACK,
+    color: colors_1.WHITE,
     margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {

package/dist/components/ModalFooter.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooterContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const content = {
     padding: 12,
     paddingRight: 12,
@@ -10,6 +11,6 @@ const content = {
     minWidth: 500,
 };
 const ModalFooterContainer = ({ children }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, borderTop: '1px solid black' }, children: children }));
+    return jsx_runtime_1.jsx("div", { style: { ...content, borderTop: colors_1.BORDER_BLACK }, children: children });
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
 const CancelButton_1 = require("./NewComposition/CancelButton");
@@ -12,11 +13,11 @@ const container = {
     alignItems: 'center',
     padding: '12px 16px',
     width: '100%',
-    borderBottom: '1px solid black',
+    borderBottom: colors_1.BORDER_BLACK,
 };
 const titleStyle = {
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const icon = {
     height: 20,

package/dist/components/Modals.js

@@ -16,6 +16,7 @@ const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const NewComposition_1 = require("./NewComposition/NewComposition");
+const NewFolder_1 = require("./NewComposition/NewFolder");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
@@ -31,7 +32,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, {})), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/CancelButton.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
 const style = {
     appearance: 'none',
     border: 'none',
-    backgroundColor: 'transparent',
-    color: 'white',
+    backgroundColor: colors_1.TRANSPARENT,
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'inline-flex',
     justifyContent: 'center',
@@ -15,6 +16,6 @@ const style = {
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("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" }) }) }));
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, 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" }) }) }));
 };
 exports.CancelButton = CancelButton;

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

@@ -1,5 +1,9 @@
-import type { RecastCodemod } from '@remotion/studio-shared';
+import type { ApplyCodemodResponse, RecastCodemod, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
+type ApplyCodemodAction = (options: {
+    signal: AbortSignal;
+    symbolicatedStack: SymbolicatedStackFrame | null;
+}) => Promise<ApplyCodemodResponse>;
 export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
@@ -13,4 +17,6 @@ export declare const CodemodFooter: React.FC<{
     }) => string;
     readonly onSuccess: (() => void) | null;
     readonly fallbackToRootFile?: boolean;
+    readonly applyCodemod: ApplyCodemodAction;
 }>;
+export {};

package/dist/components/NewComposition/CodemodFooter.js

@@ -13,7 +13,15 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, }) => {
+const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel, relativeFilePath, submitLabel, trigger, }) => {
+    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
+                        ? submitLabel({ relativeRootPath: relativeFilePath })
+                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
+                ] })
+        ] }));
+};
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -27,13 +35,15 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         setSubmitting(true);
         setSelectedModal(null);
         const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
-        (0, actions_1.applyCodemod)({
-            codemod,
-            dryRun: false,
+        applyCodemod({
             symbolicatedStack,
             signal: new AbortController().signal,
         })
-            .then(() => {
+            .then((result) => {
+            if (!result.success) {
+                notification.replaceContent(`${errorNotification}: ${result.reason}`, 2000);
+                return;
+            }
             notification.replaceContent(successNotification, 2000);
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
@@ -41,7 +51,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
             notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
         });
     }, [
-        codemod,
+        applyCodemod,
         errorNotification,
         loadingNotification,
         onSuccess,
@@ -145,11 +155,6 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
             enter.unregister();
         };
     }, [disabled, registerKeybinding, trigger, valid]);
-    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
-                        ? submitLabel({ relativeRootPath: relativeFilePath })
-                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
-                ] })
-        ] }));
+    return (jsx_runtime_1.jsx(CodemodFooterPresentation, { codemodStatus: codemodStatus, disabled: disabled, genericSubmitLabel: genericSubmitLabel, relativeFilePath: relativeFilePath, submitLabel: submitLabel, trigger: trigger }));
 };
 exports.CodemodFooter = CodemodFooter;

package/dist/components/NewComposition/ComboBox.js

@@ -167,15 +167,15 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            color: 'white',
+            color: colors_1.WHITE,
             display: 'inline-flex',
             flexDirection: 'row',
             alignItems: 'center',
             borderColor: opened
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+                    ? colors_1.WHITE_ALPHA_05
+                    : colors_1.BLACK_ALPHA_60,
         };
     }, [customStyle, hovered, opened, small]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/DeleteComposition.js

@@ -7,6 +7,7 @@ const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const content = {
@@ -38,7 +39,12 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteFolder.js

@@ -7,6 +7,7 @@ const get_folder_id_1 = require("../../helpers/get-folder-id");
 const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const content = {
@@ -32,7 +33,12 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "Folder" }),
                             " with ID ", '"', folderId, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
-                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null }) })
+                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DuplicateComposition.js

@@ -11,9 +11,11 @@ const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
@@ -183,25 +185,30 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                             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("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { 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_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_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_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
-                                                        ] })) : null] })
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { 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_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_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_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
-                                                        ] })) : null] })
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { 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_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_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, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess }) })
+                                ] })) : 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, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

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

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare const InputAndValidationContainer: React.FC<PropsWithChildren>;

package/dist/components/NewComposition/InputAndValidationContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputAndValidationContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container = {
+    width: 250,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+};
+const InputAndValidationContainer = ({ children, }) => {
+    return jsx_runtime_1.jsx("div", { style: container, children: children });
+};
+exports.InputAndValidationContainer = InputAndValidationContainer;

package/dist/components/NewComposition/InputDragger.js

@@ -84,8 +84,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     const style = (0, react_1.useMemo)(() => {
         return {
             ...RemInput_1.inputBaseStyle,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
+            backgroundColor: colors_1.TRANSPARENT,
+            borderColor: colors_1.TRANSPARENT,
             padding: '4px 6px',
             ...{ outline: 'none' },
         };
@@ -113,6 +113,14 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
         setInputFallback(true);
     }, []);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setInputFallback(true);
+    }, []);
     const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
@@ -225,6 +233,6 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/MenuContent.js

@@ -15,7 +15,7 @@ const BORDER_SIZE = 1;
 const container = {
     paddingTop: styles_1.MENU_VERTICAL_PADDING,
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
-    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `${BORDER_SIZE}px solid ${colors_1.BLACK_ALPHA_60}`,
     marginLeft: 0 - BORDER_SIZE,
     overflowY: 'auto',
     overflowX: 'hidden',

package/dist/components/NewComposition/NewCompDuration.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
 const layout_1 = require("../layout");
 const layout_2 = require("../RenderModal/layout");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
@@ -17,12 +18,12 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
     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_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
-                        ] })) : null] })
+            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { 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_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
+                            ] })) : null] }) })
         ] }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const NewComposition: React.FC;
+export declare const NewComposition: React.FC<{
+    readonly folderName: string | null;
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;