@remotion/studio 4.0.524 → 4.0.526

package/dist/components/LutPreview.js

@@ -0,0 +1,192 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LutPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const cube_lut_1 = require("../helpers/cube-lut");
+const hoverable_1 = require("../helpers/hoverable");
+const z_index_1 = require("../state/z-index");
+const sampleImage = 'https://remotion.media/transition-bg-blue.jpg';
+const previewWidth = 640;
+const previewHeight = 427;
+const container = {
+    padding: 24,
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    minHeight: 0,
+};
+const comparison = {
+    position: 'relative',
+    flexShrink: 0,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const canvasStyle = {
+    display: 'block',
+    width: '100%',
+    height: 'auto',
+    borderRadius: 4,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const sliderStyle = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 4,
+    cursor: 'default',
+    touchAction: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const dividerStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 2,
+    backgroundColor: colors_1.CURRENT_COLOR,
+    transform: 'translateX(-50%)',
+    pointerEvents: 'none',
+};
+const handleStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: `2px solid ${colors_1.CURRENT_COLOR}`,
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const message = {
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'center',
+    overflowWrap: 'anywhere',
+};
+const LutPreview = ({ src }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const beforeRef = (0, react_1.useRef)(null);
+    const afterRef = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)({ type: 'loading' });
+    const [position, setPosition] = (0, react_1.useState)(50);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(containerRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const updatePosition = (0, react_1.useCallback)((event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        setPosition(Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100)));
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        updatePosition(event);
+    }, [updatePosition]);
+    const onPointerMove = (0, react_1.useCallback)((event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            updatePosition(event);
+        }
+    }, [updatePosition]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        const step = event.shiftKey ? 10 : 1;
+        if (event.key === 'Home') {
+            setPosition(0);
+        }
+        else if (event.key === 'End') {
+            setPosition(100);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            setPosition((value) => Math.max(0, value - step));
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            setPosition((value) => Math.min(100, value + step));
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        setState({ type: 'loading' });
+        const load = async () => {
+            var _a, _b;
+            const response = await fetch(src, { signal: controller.signal });
+            if (!response.ok) {
+                throw new Error(`Could not load LUT (HTTP ${response.status}).`);
+            }
+            const lut = (0, cube_lut_1.parseCubeLut)(await response.text());
+            if (controller.signal.aborted) {
+                return;
+            }
+            image.src = sampleImage;
+            try {
+                await image.decode();
+            }
+            catch (_c) {
+                throw new Error('Could not load the LUT sample image. Check your internet connection.');
+            }
+            if (controller.signal.aborted) {
+                return;
+            }
+            const before = (_a = beforeRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+            const after = (_b = afterRef.current) === null || _b === void 0 ? void 0 : _b.getContext('2d');
+            if (!before || !after) {
+                throw new Error('Could not create the LUT preview canvas.');
+            }
+            before.drawImage(image, 0, 0, previewWidth, previewHeight);
+            const pixels = before.getImageData(0, 0, previewWidth, previewHeight);
+            (0, cube_lut_1.applyCubeLut)(pixels.data, lut);
+            after.putImageData(pixels, 0, 0);
+            setState({ type: 'loaded' });
+        };
+        load().catch((error) => {
+            if (!controller.signal.aborted) {
+                setState({
+                    type: 'error',
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            controller.abort();
+            image.removeAttribute('src');
+        };
+    }, [src]);
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [state.type === 'error' ? (jsx_runtime_1.jsxs("div", { style: message, role: "alert", children: ["Could not preview LUT: ", state.error] })) : state.type === 'loading' ? (jsx_runtime_1.jsx("div", { style: message, role: "status", children: "Loading LUT preview..." })) : null, jsx_runtime_1.jsxs("div", { style: {
+                    ...comparison,
+                    width: size
+                        ? Math.max(0, Math.min(960, size.width - 48, ((size.height - 48) * previewWidth) / previewHeight))
+                        : 0,
+                    display: state.type === 'loaded' ? 'block' : 'none',
+                }, children: [
+                    jsx_runtime_1.jsx("canvas", { ref: afterRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image after LUT" }), jsx_runtime_1.jsx("div", { style: {
+                            position: 'absolute',
+                            inset: 0,
+                            clipPath: `inset(0 ${100 - position}% 0 0)`,
+                        }, children: jsx_runtime_1.jsx("canvas", { ref: beforeRef, width: previewWidth, height: previewHeight, style: canvasStyle, role: "img", "aria-label": "Sample image before LUT" }) }), jsx_runtime_1.jsx("div", { role: "slider", "aria-label": "Before and after comparison", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sliderStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onKeyDown: onKeyDown, children: jsx_runtime_1.jsx("div", { "aria-hidden": true, style: { ...dividerStyle, left: `${position}%` }, children: jsx_runtime_1.jsx("div", { style: handleStyle, children: jsx_runtime_1.jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M8 8 4 12l4 4M16 8l4 4-4 4", stroke: colors_1.CURRENT_COLOR, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }) })
+                ] })
+        ] }));
+};
+exports.LutPreview = LutPreview;

package/dist/components/Menu/MenuItem.js

@@ -86,8 +86,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             event: e.nativeEvent,
             captureTarget: e.currentTarget,
             onEnd: (reason, evt) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    evt) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, evt)) {
                     const target = document.elementFromPoint(evt.clientX, evt.clientY);
                     if (!target || !(0, is_menu_item_1.isMenuItem)(target)) {
                         onItemQuit();

package/dist/components/MenuBuildIndicator.js

@@ -53,7 +53,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder", showTooltips: true }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };

package/dist/components/MenuCompositionName.js

@@ -4,7 +4,6 @@ exports.MenuCompositionName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -13,7 +12,7 @@ const composition_menu_items_1 = require("./composition-menu-items");
 const ContextMenu_1 = require("./ContextMenu");
 const InlineDropdown_1 = require("./InlineDropdown");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("./use-default-editor-info");
+const use_open_in_menu_apps_1 = require("./use-open-in-menu-apps");
 const baseStyle = {
     cursor: 'default',
     textDecoration: 'none',
@@ -66,18 +65,15 @@ const MenuCompositionName = () => {
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, composition_menu_items_1.getCompositionContextMenuItems)({
             closeMenu: noop_1.noop,
             composition,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
             includeCompositionManagementItems: true,
+            openInApps,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -85,8 +81,7 @@ const MenuCompositionName = () => {
     }, [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);

package/dist/components/Modals.js

@@ -11,12 +11,14 @@ const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const AssetSelectorModal_1 = require("./AssetSelectorModal");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
+const GenerateWithAgentModal_1 = require("./GenerateWithAgentModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -103,12 +105,8 @@ const Modals = ({ readOnlyStudio }) => {
             })();
         });
     }, [confirm, isBrowserStudio, previewServerState, subscribeToEvent]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType &&
-                modalContextType.type === 'settings' &&
-                (!isBrowserStudio ||
-                    modalContextType.initialTab === 'packages' ||
-                    modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ModelsSettings.js

@@ -36,8 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelsSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const Button_1 = require("./Button");
 const styles_1 = require("./InspectorPanel/styles");
 const OptionalPackageModal_1 = require("./OptionalPackageModal");
@@ -104,7 +107,7 @@ const errorStyle = {
     lineHeight: 1.4,
     margin: '8px 0 0',
 };
-const OptionalModelPackage = ({ children, label, packageName, style }) => {
+const OptionalModelPackage = ({ canInstall, children, label, packageName, style }) => {
     const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(packageName);
     const [installState, setInstallState] = (0, react_1.useState)({
         type: 'idle',
@@ -122,12 +125,20 @@ const OptionalModelPackage = ({ children, label, packageName, style }) => {
             jsx_runtime_1.jsxs("div", { style: headingRow, children: [
                     jsx_runtime_1.jsxs("div", { children: [
                             jsx_runtime_1.jsx("h3", { style: title, children: label }), jsx_runtime_1.jsx("p", { style: packageNameStyle, children: packageName })
-                        ] }), installed ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("p", { style: missingDescription, children: ["Install the package and ", optional_package_dependencies_1.TRANSFORMERS_PACKAGE, " to download and manage its models."] }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
+                        ] }), installed || !canInstall ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("p", { style: missingDescription, children: canInstall
+                            ? `Install the package and ${optional_package_dependencies_1.TRANSFORMERS_PACKAGE} to download and manage its models.`
+                            : 'Reconnect the Studio server to install this package and manage its models.' }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
 };
 const ModelsSettings = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = (0, settings_tab_availability_1.canInstallPackagesInStudio)({
+        isBrowserStudio: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null,
+        previewServerConnected: previewServerState.type === 'connected',
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
+            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { canInstall: canInstall, label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
         ] }));
 };
 exports.ModelsSettings = ModelsSettings;

package/dist/components/MuteToggle.js

@@ -10,6 +10,7 @@ const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 30 };
 const toggleMute = (setMuted) => {
     setMuted((muted) => {
         (0, mute_1.persistMuteOption)(!muted);
@@ -25,6 +26,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/components/NewComposition/CodemodFooter.js

@@ -80,6 +80,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, errorNotifi
                 dryRun: true,
                 symbolicatedStack,
                 signal,
+                undoRedoNavigation: null,
             });
         if (res.success) {
             setCanApplyCodemod({ type: 'success', diff: res.diff });

package/dist/components/NewComposition/DeleteComposition.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeleteComposition = 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 InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const load_canvas_content_from_url_1 = require("../load-canvas-content-from-url");
 const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -24,6 +28,10 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
     }
     const { unresolved } = context;
     const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const navigationAfterDelete = (0, react_1.useRef)(undefined);
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'delete-composition',
@@ -33,18 +41,46 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const onSuccess = (0, react_1.useCallback)(() => {
+        if (navigationAfterDelete.current === undefined) {
+            return;
+        }
+        if (navigationAfterDelete.current === null) {
+            (0, url_state_1.pushUrl)('/');
+            setCanvasContent(null);
+            return;
+        }
+        selectComposition(navigationAfterDelete.current, true);
+    }, [selectComposition, setCanvasContent]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: 'Delete composition' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
-                                codemod,
-                                dryRun: false,
-                                signal,
-                                symbolicatedStack,
-                            }), applyCodemodForPreview: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: onSuccess, applyCodemod: ({ signal, symbolicatedStack }) => {
+                                var _a;
+                                const currentRoute = (0, url_state_1.getRoute)();
+                                const currentCanvasContent = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
+                                const isSelected = (currentCanvasContent === null || currentCanvasContent === void 0 ? void 0 : currentCanvasContent.type) === 'composition' &&
+                                    currentCanvasContent.compositionId === compositionId;
+                                const fallback = isSelected
+                                    ? ((_a = compositions.find(({ id }) => id !== compositionId)) !== null && _a !== void 0 ? _a : null)
+                                    : undefined;
+                                navigationAfterDelete.current = fallback;
+                                return (0, actions_1.applyCodemod)({
+                                    codemod,
+                                    dryRun: false,
+                                    signal,
+                                    symbolicatedStack,
+                                    undoRedoNavigation: fallback === undefined
+                                        ? null
+                                        : {
+                                            undoRoute: currentRoute,
+                                            redoRoute: fallback === null ? '/' : `/${fallback.id}`,
+                                        },
+                                });
+                            }, applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteFolder.js

@@ -38,6 +38,7 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/DuplicateComposition.js

@@ -208,11 +208,16 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: {
+                                    undoRoute: (0, url_state_1.getRoute)(),
+                                    redoRoute: `/${newId}`,
+                                },
                             }), applyCodemodForPreview: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
                                 codemod,
                                 dryRun: true,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }) }) })
                 ] })
         ] }));

package/dist/components/NewComposition/InputDragger.js

@@ -490,11 +490,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             event: e.nativeEvent,
             captureTarget: target,
             onMove: moveListener,
-            onEnd: (reason) => {
+            onEnd: (reason, endEvent) => {
                 pointerDownRef.current = false;
                 setDragging(false);
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                const commit = reason === 'pointerup' || reason === 'buttons-released';
+                const commit = (0, pointer_session_1.isPointerSessionRelease)(reason, endEvent);
                 if (commit && lastDragValue !== null && onValueChangeEnd) {
                     onValueChangeEnd(lastDragValue, 'drag');
                 }

package/dist/components/NewComposition/NewFolder.js

@@ -4,8 +4,11 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const create_folder_tree_1 = require("../../helpers/create-folder-tree");
+const persist_open_folders_1 = require("../../helpers/persist-open-folders");
 const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
+const folders_1 = require("../../state/folders");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -24,6 +27,10 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
+const parentNameStyle = {
+    ...layout_2.rightRow,
+    fontSize: 13,
+};
 const getUniqueFolderName = ({ folders, parentName, }) => {
     let counter = 1;
     while (true) {
@@ -37,6 +44,7 @@ const getUniqueFolderName = ({ folders, parentName, }) => {
 };
 const NewFolder = ({ parentName, stack }) => {
     const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const [newName, setName] = (0, react_1.useState)(() => getUniqueFolderName({ folders, parentName }));
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -63,21 +71,40 @@ const NewFolder = ({ parentName, stack }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const onSuccess = (0, react_1.useCallback)(() => {
+        if (parentName === null) {
+            return;
+        }
+        const parentFolder = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentName);
+        const parentFolderName = parentFolder.name;
+        if (parentFolderName === null) {
+            return;
+        }
+        setCompositionFoldersExpanded((previousState) => {
+            const foldersExpanded = { ...previousState };
+            for (const key of (0, create_folder_tree_1.getKeysToExpand)(parentFolderName, parentFolder.parent)) {
+                foldersExpanded[key] = true;
+            }
+            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpanded);
+            return foldersExpanded;
+        });
+    }, [parentName, setCompositionFoldersExpanded]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: parentNameStyle, children: parentName })
                                 ] })) : null, 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(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 }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: newName, slug: folderName }), 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: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: onSuccess, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
                                 codemod,
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/RenameFolder.js

@@ -72,6 +72,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/duplicate-composition-api.d.ts

@@ -1,5 +1,5 @@
-import type { DuplicateCompositionResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
-export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolicatedStack, }: {
+import type { DuplicateCompositionResponse, SymbolicatedStackFrame, UndoRedoNavigation } from '@remotion/studio-shared';
+export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolicatedStack, undoRedoNavigation, }: {
     codemod: {
         type: "duplicate-composition";
         idToDuplicate: string;
@@ -13,4 +13,5 @@ export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolica
     dryRun: boolean;
     signal: AbortSignal;
     symbolicatedStack: SymbolicatedStackFrame | null;
+    undoRedoNavigation: UndoRedoNavigation | null;
 }) => Promise<DuplicateCompositionResponse>;