@remotion/studio 4.0.524 → 4.0.525

package/dist/components/InspectorOpenInEditor.js

@@ -28,13 +28,13 @@ const dropdownSegmentStyle = {
     width: 20,
 };
 const editorButtonIconSize = 18;
-const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
+const githubButtonIconSize = 16;
+const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType, showTooltips, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
-    const defaultActionIsGitHub = !canOpenInEditor && canOpenInGitHub;
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -57,21 +57,21 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const defaultAppName = defaultActionIsGitHub
+    const defaultAppName = defaultOpenInTarget === 'git-source'
         ? 'GitHub'
         : (defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor');
-    const canOpenDefault = location !== null && (canOpenInEditor || canOpenInGitHub);
+    const canOpenDefault = location !== null && defaultOpenInTarget !== null;
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (defaultActionIsGitHub) {
+        if (defaultOpenInTarget === 'git-source') {
             (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
         }
-        else if (defaultEditorId) {
+        else if (defaultOpenInTarget === 'editor' && defaultEditorId) {
             openWithEditor(defaultEditorId).catch(() => undefined);
         }
     }, [
-        defaultActionIsGitHub,
         defaultEditorId,
+        defaultOpenInTarget,
         location,
         locationType,
         openWithEditor,
@@ -127,15 +127,15 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
-        return defaultActionIsGitHub
+        return defaultOpenInTarget === 'git-source'
             ? items.filter((item) => item.id !== 'open-in-github')
             : items;
     }, [
         codingAgentInfo,
         canOpenInEditor,
         configureDefaultApps,
-        defaultActionIsGitHub,
         defaultEditorId,
+        defaultOpenInTarget,
         editorInfo,
         location,
         locationType,
@@ -152,10 +152,11 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 idleColor: colors_1.LIGHT_TEXT,
                 onClick: onOpenDefault,
                 onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultActionIsGitHub ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: editorButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
+                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultOpenInTarget === 'git-source' ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: githubButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
                 segmentId: 'default-editor',
                 style: mainSegmentStyle,
-                title: `Open in ${defaultAppName}`,
+                title: showTooltips ? '' : `Open in ${defaultAppName}`,
+                tooltipLabel: showTooltips ? `Open in ${defaultAppName}` : null,
                 type: 'action',
             },
         ];
@@ -171,7 +172,8 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 segmentId: 'another-app',
                 selectedId: null,
                 style: dropdownSegmentStyle,
-                title: 'Open in another app',
+                title: showTooltips ? '' : 'Open in another app',
+                tooltipLabel: showTooltips ? 'Open in another app' : null,
                 type: 'menu',
                 values: menuItems,
             });
@@ -179,17 +181,18 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         return result;
     }, [
         canOpenDefault,
-        defaultActionIsGitHub,
         defaultAppName,
         defaultEditorId,
+        defaultOpenInTarget,
         label,
         menuItems,
         onOpenDefault,
+        showTooltips,
     ]);
     if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
         return null;
     }
-    if (previewServerState.type !== 'connected' && !canOpenInGitHub) {
+    if (previewServerState.type !== 'connected' && defaultOpenInTarget === null) {
         return null;
     }
     return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -38,7 +38,7 @@ const CompositionInspectorHeader = () => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
         if (!video) {
@@ -75,16 +75,16 @@ const CompositionInspectorHeader = () => {
         });
     }, [compositionFile, compositionId]);
     const openSourceLocation = (0, react_1.useCallback)((location) => {
-        if (canOpenInEditor && defaultEditorId) {
+        if (defaultOpenInTarget === 'editor' && defaultEditorId) {
             (0, open_in_editor_1.openOriginalPositionInEditor)(location, defaultEditorId).catch((err) => {
                 (0, NotificationCenter_1.showNotification)(err.message, 2000);
             });
             return;
         }
-        if (canOpenInGitHub) {
+        if (defaultOpenInTarget === 'git-source') {
             (0, get_git_menu_item_1.openGitSource)({ folder: false, location });
         }
-    }, [canOpenInEditor, canOpenInGitHub, defaultEditorId]);
+    }, [defaultEditorId, defaultOpenInTarget]);
     const openFileLocation = (0, react_1.useCallback)(() => {
         if (validatedLocation) {
             openSourceLocation(validatedLocation);
@@ -102,9 +102,8 @@ const CompositionInspectorHeader = () => {
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub), onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && defaultOpenInTarget !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
-                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null &&
-                        (canOpenInEditor || canOpenInGitHub), onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && defaultOpenInTarget !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -242,6 +242,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
             dryRun: false,
             signal: new AbortController().signal,
             symbolicatedStack,
+            undoRedoNavigation: null,
         })
             .then((result) => {
             if (!result.success) {

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -81,6 +81,7 @@ const ElementLibraryButton = () => {
             selectedId: null,
             style: elementLibraryDropdownSegmentStyle,
             title: 'Choose an Element library to browse inside Studio.',
+            tooltipLabel: null,
             type: 'menu',
             values: [
                 {

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
@@ -48,8 +47,7 @@ const externalTabIndicatorStyle = {
     width: 12,
 };
 const useSequenceInspectorSourceLocation = (sequence) => {
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
+    const { canOpenSource, openSource, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -64,16 +62,10 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         };
     }, [originalLocation]);
     const openFileLocation = (0, react_1.useCallback)(() => {
-        if (canOpenInEditor) {
-            openInEditor(null);
-            return;
-        }
-        if (canOpenInGitHub && validatedLocation) {
-            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: validatedLocation });
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openInEditor, validatedLocation]);
+        openSource();
+    }, [openSource]);
     return {
-        canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub),
+        canOpen: validatedLocation !== null && canOpenSource,
         openFileLocation,
         validatedLocation,
     };

package/dist/components/InspectorSequenceSection.js

@@ -207,21 +207,30 @@ const hasSequenceControls = (sequence) => {
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     var _a;
+    var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
         ? selectedItems[0]
         : null;
     const selectedEffectKey = selectedEffect === null ? null : (0, TimelineSelection_1.getTimelineSelectionKey)(selectedEffect);
+    const inspectorRevealItem = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.item;
+    const inspectorRevealItemKey = (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect' ||
+        (inspectorRevealItem === null || inspectorRevealItem === void 0 ? void 0 : inspectorRevealItem.type) === 'sequence-effect-prop'
+        ? (0, TimelineSelection_1.getTimelineSelectionKey)(inspectorRevealItem)
+        : null;
+    const inspectorRevealToken = inspectorRevealItemKey === selectedEffectKey
+        ? ((_b = inspectorRevealRequest === null || inspectorRevealRequest === void 0 ? void 0 : inspectorRevealRequest.token) !== null && _b !== void 0 ? _b : null)
+        : null;
     const selectedEffectRowRef = (0, react_1.useRef)(null);
-    const scrolledEffectKey = (0, react_1.useRef)(null);
+    const scrolledInspectorRevealToken = (0, react_1.useRef)(null);
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
@@ -310,7 +319,8 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     }, [getIsExpanded, tree]);
     (0, react_1.useEffect)(() => {
         if (selectedEffectKey === null ||
-            scrolledEffectKey.current === selectedEffectKey) {
+            inspectorRevealToken === null ||
+            scrolledInspectorRevealToken.current === inspectorRevealToken) {
             return;
         }
         const rows = (0, timeline_layout_1.flattenVisibleTreeNodes)({
@@ -344,19 +354,18 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             persistInspectorCollapsedKeys(next);
             return next;
         });
-    }, [selectedEffectKey, tree]);
+    }, [inspectorRevealToken, selectedEffectKey, tree]);
     (0, react_1.useEffect)(() => {
-        if (selectedEffectKey === null) {
-            scrolledEffectKey.current = null;
+        if (inspectorRevealToken === null) {
             return;
         }
-        if (scrolledEffectKey.current === selectedEffectKey ||
+        if (scrolledInspectorRevealToken.current === inspectorRevealToken ||
             selectedEffectRowRef.current === null) {
             return;
         }
         selectedEffectRowRef.current.scrollIntoView({ block: 'center' });
-        scrolledEffectKey.current = selectedEffectKey;
-    }, [effectRows, selectedEffectKey]);
+        scrolledInspectorRevealToken.current = inspectorRevealToken;
+    }, [effectRows, inspectorRevealToken]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');

package/dist/components/LoopToggle.js

@@ -10,6 +10,7 @@ const loop_1 = require("../state/loop");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = 'Loop';
+const buttonStyle = { width: 30 };
 const toggleLoop = (setLoop) => {
     setLoop((currentLoop) => {
         (0, loop_1.persistLoopOption)(!currentLoop);
@@ -24,6 +25,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    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, "aria-pressed": loop, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
+    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, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

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

@@ -11,6 +11,7 @@ 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");
@@ -109,6 +110,6 @@ const Modals = ({ readOnlyStudio }) => {
                     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 &&
                 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 === '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/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>;