@remotion/studio 4.0.524 → 4.0.525

package/dist/components/NewComposition/duplicate-composition-api.js

@@ -3,14 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateComposition = void 0;
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const actions_1 = require("../RenderQueue/actions");
-const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, }) => {
+const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, undoRedoNavigation, }) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations === null) {
-        return (0, actions_1.applyCodemod)({ codemod, dryRun, signal, symbolicatedStack }).then((result) => (result.success ? result : { ...result, stack: '' }));
+        return (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun,
+            signal,
+            symbolicatedStack,
+            undoRedoNavigation,
+        }).then((result) => (result.success ? result : { ...result, stack: '' }));
     }
     return browserStudioOperations.duplicateComposition({
         codemod,
         dryRun,
+        undoRedoNavigation,
     });
 };
 exports.duplicateComposition = duplicateComposition;

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -4,5 +4,6 @@ type CreatedNotification = {
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
+export declare const showCannotAddSequenceDropNotification: () => void;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/components/Notifications/NotificationCenter.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.showNotification = void 0;
+exports.NotificationCenter = exports.showCannotAddSequenceDropNotification = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
@@ -32,6 +32,27 @@ const showNotification = (content, durationInMs) => {
     });
 };
 exports.showNotification = showNotification;
+const CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION = 'Cannot insert this item: This composition component cannot accept a new <Sequence>.';
+const CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION = 3000;
+let cannotAddSequenceNotification = null;
+let cannotAddSequenceDismissTimeout = null;
+const showCannotAddSequenceDropNotification = () => {
+    if (cannotAddSequenceNotification === null) {
+        cannotAddSequenceNotification = (0, exports.showNotification)(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
+    }
+    else {
+        cannotAddSequenceNotification.replaceContent(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
+    }
+    if (cannotAddSequenceDismissTimeout !== null) {
+        clearTimeout(cannotAddSequenceDismissTimeout);
+    }
+    cannotAddSequenceDismissTimeout = setTimeout(() => {
+        cannotAddSequenceNotification === null || cannotAddSequenceNotification === void 0 ? void 0 : cannotAddSequenceNotification.dismiss();
+        cannotAddSequenceNotification = null;
+        cannotAddSequenceDismissTimeout = null;
+    }, CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION);
+};
+exports.showCannotAddSequenceDropNotification = showCannotAddSequenceDropNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const { currentZIndex } = (0, z_index_1.useZIndex)();

package/dist/components/OutlineToggle.js

@@ -9,6 +9,7 @@ const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-
 const editor_outlines_1 = require("../state/editor-outlines");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const OutlineToggle = () => {
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -20,7 +21,7 @@ const OutlineToggle = () => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    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": editorShowOutlines, onClick: onClick, children: (color) => {
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", 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": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
                 const iconColor = editorShowOutlines ? colors_1.BLUE : color;
                 return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
                         jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [

package/dist/components/PlayPause.js

@@ -235,6 +235,6 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go back 1 frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go forward 1 frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
 };
 exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/Preview.js

@@ -47,9 +47,6 @@ const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
-        // Avoid the background bleeding through opaque compositions at fractional
-        // scales due to Chromium compositing the child and background together.
-        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/PreviewToolbar.js

@@ -91,13 +91,10 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCanvasViewControls: showCanvasViewControls, showCompositionControls: showCompositionControls, playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                         ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, showCanvasViewControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout || !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showCompositionControls ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })
-                        ] })), readOnlyStudio ||
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, showCanvasViewControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout || !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })), readOnlyStudio ||
                         isMobileLayout ||
-                        !showCompositionControls ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
-                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                        !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate, setMuted: setPlayerMuted, setLoop: setLoop }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));

package/dist/components/PreviewToolbarOverflowButton.js

@@ -12,6 +12,7 @@ const checkerboard_1 = require("../state/checkerboard");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const editor_rulers_1 = require("../state/editor-rulers");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineDropdown_1 = require("./InlineDropdown");
 const LoopToggle_1 = require("./LoopToggle");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
@@ -193,6 +194,6 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -195,7 +195,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             return [
                 {
                     id: 'select-file',
-                    title: 'Select file...',
+                    title: 'Import file...',
                     type: 'select-file',
                     onSelected: () => {
                         assetSelection.onSelectFile();

package/dist/components/RenderButton.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
@@ -47,7 +48,9 @@ const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
+const call_api_1 = require("./call-api");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SegmentedButton_1 = require("./SegmentedButton");
 const segmentedButtonStyle = {
     height: 28,
@@ -215,7 +218,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             renderDefaults: defaults,
         });
     }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
-    const openClientRenderModal = (0, react_1.useCallback)(() => {
+    const openClientRenderModal = (0, react_1.useCallback)(async () => {
         var _a;
         if (!video) {
             return null;
@@ -224,6 +227,28 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         if (!defaults) {
             throw new TypeError('Expected defaults');
         }
+        if (!readOnlyStudio && !isBrowserStudio) {
+            let onReconciliation = null;
+            const nextReconciliation = new Promise((resolve) => {
+                onReconciliation = resolve;
+                window.addEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReconciliation, { once: true });
+            });
+            try {
+                const { didInvalidate } = await (0, call_api_1.callApi)('/api/invalidate-bundle', {});
+                if (didInvalidate) {
+                    await nextReconciliation;
+                }
+            }
+            catch (error) {
+                (0, NotificationCenter_1.showNotification)(`Could not prepare client-side render: ${error.message}`, 4000);
+                return null;
+            }
+            finally {
+                if (onReconciliation) {
+                    window.removeEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReconciliation);
+                }
+            }
+        }
         setSelectedModal({
             type: 'web-render',
             compositionId: video.id,
@@ -249,7 +274,16 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
             initialPageResponsiveness: 'medium',
         });
-    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
+    }, [
+        video,
+        readOnlyStudio,
+        isBrowserStudio,
+        setSelectedModal,
+        props,
+        inFrame,
+        outFrame,
+        getCurrentFrame,
+    ]);
     const onClick = (0, react_1.useCallback)(() => {
         if (renderType === 'render-command') {
             openServerRenderModal(true);
@@ -361,7 +395,8 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactMainSegmentStyle
                     : defaultMainSegmentStyle,
-                title: tooltip,
+                title: showRenderLabel ? tooltip : null,
+                tooltipLabel: showRenderLabel ? null : renderLabel,
                 type: 'action',
             },
             {
@@ -378,6 +413,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                     ? compactDropdownSegmentStyle
                     : defaultDropdownSegmentStyle,
                 title: 'Select render type',
+                tooltipLabel: null,
                 type: 'menu',
                 values: dropdownValues,
             },
@@ -396,7 +432,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: tooltip })
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: showRenderLabel ? tooltip : null })
         ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -121,7 +121,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "codec", id: "videoCodecOption" })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
                         ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
-                ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name', existingOutputPath: null, existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "logLevel", id: "logLevelOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })

package/dist/components/RenderModal/render-modals.js

@@ -33,9 +33,12 @@ exports.horizontalLayout = {
 };
 exports.leftSidebar = {
     flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
     padding: 6,
 };
 exports.horizontalTab = {
+    flex: 'none',
     width: 150,
     display: 'flex',
     flexDirection: 'row',

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -57,6 +57,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName, markCopied]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Copy to clipboard", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Copy to clipboard", variant: null, renderAction: renderCopyAction, onClick: onClick }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Copy", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Copy to clipboard", variant: null, renderAction: renderCopyAction, onClick: onClick }) }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -31,6 +31,6 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Cancel render", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Cancel render", renderAction: renderAction, onClick: onClick, variant: null }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Cancel", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Cancel render", renderAction: renderAction, onClick: onClick, variant: null }) }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/components/RenderQueue/actions.d.ts

@@ -100,11 +100,12 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, }: {
+export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, undoRedoNavigation, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
     symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
     signal: AbortSignal;
+    undoRedoNavigation: import("@remotion/studio-shared").UndoRedoNavigation | null;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;

package/dist/components/RenderQueue/actions.js

@@ -137,11 +137,12 @@ const openInFileExplorer = ({ directory }) => {
     return (0, call_api_1.callApi)('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
+const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, undoRedoNavigation, }) => {
     const body = {
         codemod,
         dryRun,
         symbolicatedStack,
+        undoRedoNavigation,
     };
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations !== null) {

package/dist/components/RulersAndGuidesToggle.js

@@ -10,6 +10,7 @@ const editor_guides_1 = require("../state/editor-guides");
 const editor_rulers_1 = require("../state/editor-rulers");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const RulersAndGuidesToggle = ({ showGuides }) => {
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
@@ -35,6 +36,6 @@ const RulersAndGuidesToggle = ({ showGuides }) => {
         : editorShowRulers
             ? 'Hide rulers'
             : 'Show rulers';
-    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": rulersOrGuidesAreVisible, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', 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": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
 };
 exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SegmentedButton.d.ts

@@ -9,6 +9,7 @@ type SegmentedButtonSegmentCommon = {
     readonly segmentId: string;
     readonly style: React.CSSProperties | null;
     readonly title: string | null;
+    readonly tooltipLabel: string | null;
 };
 export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/components/SegmentedButton.js

@@ -13,6 +13,7 @@ const hoverable_1 = require("../helpers/hoverable");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
+const ActionTooltip_1 = require("./ActionTooltip");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
@@ -46,6 +47,7 @@ const segmentStyle = {
     padding: '0 6px',
     whiteSpace: 'nowrap',
 };
+const tooltipTriggerStyle = { height: '100%' };
 const getSegmentBorderRadius = ({ index, segmentCount, }) => {
     if (segmentCount === 1) {
         return SEGMENTED_BUTTON_BORDER_RADIUS;
@@ -106,7 +108,11 @@ const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
         (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
         preventPointerFocus(event);
     }, [segment]);
-    return (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    if (segment.tooltipLabel === null) {
+        return button;
+    }
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button }));
 };
 const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
     var _a, _b;
@@ -208,8 +214,8 @@ const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
             ...segment.style,
         };
     }, [index, opened, segment, segmentCount]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }), portalStyle
+    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [segment.tooltipLabel === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button })), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
                                         ? false
                                         : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))

package/dist/components/SelectedOutlineElement.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -65,6 +66,9 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({
+        canOpenInEditor: editorAvailable,
+    });
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -100,7 +104,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         });
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
-            canOpenInEditor: editorAvailable,
+            canOpenSource: defaultOpenInTarget !== null,
             numberOfConnectedCompositions: connectedCompositions.length,
             sequenceWasDragged,
         });
@@ -111,21 +115,27 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             selectComposition(connectedCompositions[0], true);
             return true;
         }
-        const openTargetInEditor = async () => {
+        const openTargetSource = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
-            if (originalLocation === null || defaultEditorId === null) {
+            if (originalLocation === null) {
+                return;
+            }
+            if (defaultOpenInTarget === 'editor' && defaultEditorId !== null) {
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
+            if (defaultOpenInTarget === 'git-source') {
+                (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+            }
         };
-        openTargetInEditor().catch((err) => {
+        openTargetSource().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
         return true;
     }, [
         compositions,
         defaultEditorId,
-        editorAvailable,
+        defaultOpenInTarget,
         resolveOriginalLocation,
         selectComposition,
     ]);

package/dist/components/SelectedOutlinePolygon.js

@@ -262,7 +262,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             axisLocked = nextAxisLocked;
             updateDragOverrides();
         };
-        const onPointerUp = (reason) => {
+        const onPointerUp = (reason, endEvent) => {
             dragAwareDoubleClick.endPointerGesture(dragStarted);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
@@ -277,7 +277,9 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             });
             if (changes.length === 0) {
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
-                if (deferSelection && !dragStarted && reason === 'pointerup') {
+                if (deferSelection &&
+                    !dragStarted &&
+                    (0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onSelect(target.selection, interaction);
                 }
                 return;

package/dist/components/SettingsContext.d.ts

@@ -1,5 +1,9 @@
 import type { GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse, GetRemotionSkillsInfoResponse, RenderDefaults, StudioRuntimeConfig } from '@remotion/studio-shared';
 import React from 'react';
+type SkillAction = {
+    readonly skill: string;
+    readonly type: 'installing' | 'removing';
+};
 type SettingsContextValue = {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
@@ -10,6 +14,10 @@ type SettingsContextValue = {
     readonly studioRuntimeConfig: StudioRuntimeConfig | null;
     readonly revision: number;
     readonly setPublicLicenseKey: (publicLicenseKey: string | null) => void;
+    readonly installSkill: (skill: string) => Promise<void>;
+    readonly removeSkill: (skill: string) => Promise<void>;
+    readonly skillAction: SkillAction | null;
+    readonly skillActionError: string | null;
 };
 export declare const SettingsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/SettingsContext.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const call_api_1 = require("./call-api");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsContext = (0, react_1.createContext)(null);
 const SettingsProvider = ({ children }) => {
@@ -21,6 +22,8 @@ const SettingsProvider = ({ children }) => {
         renderDefaults: (_c = window.remotion_renderDefaults) !== null && _c !== void 0 ? _c : null,
         studioRuntimeConfig: (_d = window.remotion_studioConfig) !== null && _d !== void 0 ? _d : null,
         revision: 0,
+        skillAction: null,
+        skillActionError: null,
     });
     (0, react_1.useEffect)(() => {
         if (previewServerState.type !== 'connected' ||
@@ -108,9 +111,61 @@ const SettingsProvider = ({ children }) => {
             };
         });
     }, []);
+    const installSkill = (0, react_1.useCallback)(async (skill) => {
+        setSettings((currentSettings) => ({
+            ...currentSettings,
+            skillAction: { skill, type: 'installing' },
+            skillActionError: null,
+        }));
+        try {
+            const remotionSkillsInfo = await (0, call_api_1.callApi)('/api/install-remotion-skill', {
+                skill,
+            });
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                remotionSkillsInfo,
+                skillAction: null,
+                revision: currentSettings.revision + 1,
+            }));
+            (0, NotificationCenter_1.showNotification)(`Installed ${skill}.`, 5000);
+        }
+        catch (err) {
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                skillAction: null,
+                skillActionError: err.message,
+            }));
+        }
+    }, []);
+    const removeSkill = (0, react_1.useCallback)(async (skill) => {
+        setSettings((currentSettings) => ({
+            ...currentSettings,
+            skillAction: { skill, type: 'removing' },
+            skillActionError: null,
+        }));
+        try {
+            const remotionSkillsInfo = await (0, call_api_1.callApi)('/api/remove-remotion-skill', {
+                skill,
+            });
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                remotionSkillsInfo,
+                skillAction: null,
+                revision: currentSettings.revision + 1,
+            }));
+            (0, NotificationCenter_1.showNotification)(`Removed ${skill}.`, 5000);
+        }
+        catch (err) {
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                skillAction: null,
+                skillActionError: err.message,
+            }));
+        }
+    }, []);
     const value = (0, react_1.useMemo)(() => {
-        return { ...settings, setPublicLicenseKey };
-    }, [setPublicLicenseKey, settings]);
+        return { ...settings, setPublicLicenseKey, installSkill, removeSkill };
+    }, [installSkill, removeSkill, setPublicLicenseKey, settings]);
     return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: jsx_runtime_1.jsx(UpdateStatusContext_1.UpdateStatusProvider, { children: children }) }));
 };
 exports.SettingsProvider = SettingsProvider;