@remotion/studio 4.0.484 → 4.0.485

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/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;
+}>;

package/dist/components/NewComposition/NewComposition.js

@@ -4,14 +4,14 @@ exports.NewComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 use_create_composition_1 = require("../../helpers/use-create-composition");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 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");
@@ -23,49 +23,9 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const toPascalCase = (value) => {
-    var _a;
-    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
-    const candidate = words
-        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
-        .join('');
-    if (!candidate) {
-        return 'NewComposition';
-    }
-    if (/^[0-9]/.test(candidate)) {
-        return `Composition${candidate}`;
-    }
-    return candidate;
-};
-const waitForComposition = (compositionId) => {
-    return new Promise((resolve) => {
-        const started = Date.now();
-        const interval = window.setInterval(() => {
-            var _a;
-            var _b;
-            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
-            if (compositionNames.includes(compositionId) ||
-                Date.now() - started > 10000) {
-                window.clearInterval(interval);
-                resolve();
-            }
-        }, 100);
-    });
-};
-const getUniqueCompositionName = (compositions) => {
-    let counter = 1;
-    while (true) {
-        const name = counter === 1 ? 'NewComposition' : `NewComposition${counter}`;
-        const err = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
-        if (!err) {
-            return name;
-        }
-        counter++;
-    }
-};
-const NewCompositionLoaded = () => {
+const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [newId, setName] = (0, react_1.useState)(() => getUniqueCompositionName(compositions));
+    const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
     const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(30);
     const [size, setSize] = (0, react_1.useState)(() => ({
         width: 1920,
@@ -113,66 +73,49 @@ const NewCompositionLoaded = () => {
     const onFpsChange = (0, react_1.useCallback)((newFps) => {
         setFrameRate(newFps);
     }, []);
-    const compNameErrMessage = (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
-    const compWidthErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
-    const compHeightErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
-    const componentName = toPascalCase(newId);
-    const valid = compNameErrMessage === null &&
-        compWidthErrMessage === null &&
-        compHeightErrMessage === null;
-    const codemod = (0, react_1.useMemo)(() => {
-        return {
-            type: 'new-composition',
-            newDurationInFrames: Number(durationInFrames),
-            newFps: Number(selectedFrameRate),
-            newHeight: Number(size.height),
-            newWidth: Number(size.width),
-            newId,
-            componentName,
-            componentImportPath: `./${componentName}`,
-        };
-    }, [
-        componentName,
+    const { codemod, createComposition, heightValidationMessage: compHeightErrMessage, nameValidationMessage: compNameErrMessage, valid, widthValidationMessage: compWidthErrMessage, } = (0, use_create_composition_1.useCreateComposition)({
+        compositions,
         durationInFrames,
+        folderName,
         newId,
+        parentName,
         selectedFrameRate,
-        size.height,
-        size.width,
-    ]);
-    const onSuccess = (0, react_1.useCallback)(() => {
-        waitForComposition(newId).then(() => {
-            (0, url_state_1.pushUrl)(`/${newId}`);
-        });
-    }, [newId]);
+        size,
+    });
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const folderPath = [parentName, folderName].filter(Boolean).join('/');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsxs("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.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: folderPath })
+                                ] })) : 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(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] }) })
                                 ] }), 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] }) })
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), 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 }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: null, valid: valid, onSuccess: onSuccess, fallbackToRootFile: true }) })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                                signal,
+                                symbolicatedStack,
+                            }), fallbackToRootFile: true }) })
                 ] })
         ] }));
 };
-const NewComposition = () => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, {}) }));
+const NewComposition = ({ folderName, parentName, stack }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, { folderName: folderName, parentName: parentName, stack: stack }) }));
 };
 exports.NewComposition = NewComposition;

package/dist/components/NewComposition/RenameComposition.js

@@ -4,7 +4,7 @@ exports.RenameComposition = void 0;
 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 use_rename_composition_1 = require("../../helpers/use-rename-composition");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -12,6 +12,7 @@ const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
@@ -43,28 +44,26 @@ const RenameCompositionLoaded = () => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const compNameErrMessage = newId === resolved.result.id
-        ? null
-        : (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
-    const valid = compNameErrMessage === null && resolved.result.id !== newId;
-    const codemod = (0, react_1.useMemo)(() => {
-        return {
-            type: 'rename-composition',
-            idToRename: resolved.result.id,
-            newId,
-        };
-    }, [newId, resolved.result.id]);
+    const { codemod, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
+        compositions,
+        currentId: resolved.result.id,
+        newId,
+    });
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
     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_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, { ref: inputRef, 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] }) })
-                            ] }) }), 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, stack: compositionStack, valid: valid, onSuccess: 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, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
+                                newCompositionId: newId,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameFolder.js

@@ -10,8 +10,10 @@ const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
@@ -56,11 +58,16 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${folderId}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, 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: "Name" }), 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: "Name" }), 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, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (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: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameStaticFile.js

@@ -15,6 +15,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const layout_2 = require("../RenderModal/layout");
 const use_static_files_1 = require("../use-static-files");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
@@ -115,7 +116,7 @@ const RenameStaticFileModal = ({ relativePath }) => {
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${relativePath}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, 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: "Name" }), 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: "Name" }), 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, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, autoComplete: "off", "data-1p-ignore": true, placeholder: "Asset name", status: validationMessage ? 'error' : 'ok', rightAlign: true }), validationMessage ? (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: validationMessage, type: "error" })
                                                 ] })) : null] }) })

package/dist/components/NewComposition/ValidationMessage.js

@@ -20,12 +20,20 @@ const compactStyle = {
     height: 10,
 };
 const container = {
+    width: '100%',
     maxWidth: 500,
+    minWidth: 0,
+};
+const row = {
+    minWidth: 0,
 };
 const label = {
     fontSize: 13,
     color: 'white',
     fontFamily: 'sans-serif',
+    minWidth: 0,
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
 };
 const compactLabel = {
     ...label,
@@ -40,7 +48,7 @@ const ValidationMessage = ({ message, align, type, action, size = 'default' }) =
             fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
         };
     }, [iconStyle, type]);
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, style: row, children: [
                 jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), action] })) : null] }) }));
 };

package/dist/components/OptionsPanel.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 type OptionsSidebarPanel = 'inspector' | 'renders';
 export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
-export declare const optionsSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-} | null>;
 export declare const OptionsPanel: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/OptionsPanel.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
+exports.OptionsPanel = exports.persistSelectedOptionsSidebarPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -10,6 +10,7 @@ const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const InspectorPanel_1 = require("./InspectorPanel");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
 const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
@@ -35,7 +36,6 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
 exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
-exports.optionsSidebarTabs = (0, react_1.createRef)();
 const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
@@ -57,8 +57,12 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         setPanel('renders');
         (0, exports.persistSelectedOptionsSidebarPanel)('renders');
     }, []);
-    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
+    (0, react_1.useImperativeHandle)(options_sidebar_tabs_1.optionsSidebarTabs, () => {
         return {
+            selectInspectorPanel: () => {
+                setPanel('inspector');
+                (0, exports.persistSelectedOptionsSidebarPanel)('inspector');
+            },
             selectRendersPanel: () => {
                 setPanel('renders');
                 (0, exports.persistSelectedOptionsSidebarPanel)('renders');

package/dist/components/RenderModal/ServerRenderModal.js

@@ -27,6 +27,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const OptionsPanel_1 = require("../OptionsPanel");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -365,7 +366,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         var _a;
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
-        (_a = OptionsPanel_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addStillRenderJob)({
             compositionId: resolvedComposition.id,
@@ -438,7 +439,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         var _a;
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
-        (_a = OptionsPanel_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addVideoRenderJob)({
             compositionId: resolvedComposition.id,
@@ -548,7 +549,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         var _a;
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
-        (_a = OptionsPanel_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addSequenceRenderJob)({
             compositionId: resolvedComposition.id,

package/dist/components/RenderModal/WebRenderModal.js

@@ -18,6 +18,7 @@ const Button_1 = require("../Button");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const OptionsPanel_1 = require("../OptionsPanel");
 const context_1 = require("../RenderQueue/context");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -369,7 +370,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         }
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
-        (_a = OptionsPanel_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         setSelectedModal(null);
     }, [
         renderMode,