@remotion/studio 4.0.483 → 4.0.485

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/Preview.js

@@ -122,7 +122,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {

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,

package/dist/components/SelectedOutlineElement.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
@@ -49,6 +50,7 @@ const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
@@ -56,6 +58,7 @@ const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -310,7 +313,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
         ] }));
 };
-const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, onTextEditStart, scale, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -339,6 +342,9 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         if (drag === null || interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
@@ -478,6 +484,14 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         setDragOverrides,
         target,
     ]);
+    const onDoubleClick = react_1.default.useCallback((event) => {
+        if (target === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onTextEditStart(target);
+    }, [onTextEditStart, target]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (effectDrop === null || !(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -526,7 +540,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
@@ -554,6 +568,9 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -728,6 +745,9 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         if (interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointer = { x: event.clientX, y: event.clientY };
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
@@ -916,6 +936,28 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onTextEditStart = react_1.default.useCallback((editTarget) => {
+        const { textEdit } = editTarget;
+        if (textEdit === null) {
+            return;
+        }
+        if (textEdit.propStatus.status !== 'static' ||
+            typeof textEdit.propStatus.codeValue !== 'string') {
+            (0, NotificationCenter_1.showNotification)('This text is computed and cannot be edited visually', 3000);
+            return;
+        }
+        (0, react_dom_1.flushSync)(() => {
+            var _a;
+            if (!editTarget.selected) {
+                onSelect(editTarget.selection, { shiftKey: false, toggleKey: false });
+            }
+            (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+        });
+        (0, focus_inspector_field_1.requestFocusInspectorField)({
+            fieldKey: 'children',
+            nodePath: textEdit.nodePath,
+        });
+    }, [onSelect]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;
@@ -1071,7 +1113,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         updateResolvedStackTrace,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineUvSnapThresholdPx, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
@@ -11,4 +11,6 @@ export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
+    readonly translationX: number;
+    readonly translationY: number;
 }>;