@remotion/studio 4.0.508 → 4.0.510

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -1,18 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = exports.getTimelineSequenceSplitUnsupportedReason = void 0;
+exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
-const getTimelineSequenceSplitUnsupportedReason = (componentName) => {
-    if (componentName === '<TransitionSeries.Sequence>' ||
-        componentName === '<TransitionSeries.Overlay>') {
-        return `${componentName} cannot be split from source`;
-    }
-    return null;
-};
-exports.getTimelineSequenceSplitUnsupportedReason = getTimelineSequenceSplitUnsupportedReason;
 const staticNumberish = (status) => {
     if (!status) {
         return true;
@@ -21,7 +14,6 @@ const staticNumberish = (status) => {
         (typeof status.codeValue === 'number' || status.codeValue === undefined));
 };
 const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame, propStatuses, }) => {
-    var _a;
     if (selection.type !== 'sequence') {
         return {
             canSplit: false,
@@ -46,11 +38,10 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
             reason: 'Series.Sequence clips cannot be split from source',
         };
     }
-    const unsupportedReason = (0, exports.getTimelineSequenceSplitUnsupportedReason)((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName);
-    if (unsupportedReason) {
+    if (!(0, studio_shared_1.hasSequenceTimingTraits)(selection.nodePathInfo.sequenceSubscriptionKey.sequenceKeys)) {
         return {
             canSplit: false,
-            reason: unsupportedReason,
+            reason: 'Sequence does not expose timing traits that can be split',
         };
     }
     const { nodePathInfo } = selection;
@@ -101,6 +92,7 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     return (0, call_api_1.callApi)('/api/split-jsx-sequence', {
         fileName: nodePath.absolutePath,
         nodePath: nodePath.nodePath,
+        sequenceKeys: nodePath.sequenceKeys,
         splitFrame,
     })
         .then((result) => {

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -33,9 +33,9 @@ exports.timelineFieldValueColumnStyle = {
 };
 exports.timelineCompactStackedFieldValueColumnStyle = {
     ...exports.timelineFieldValueColumnStyle,
-    marginBottom: -2,
+    marginBottom: -3,
     position: 'relative',
-    top: -2,
+    top: -3,
 };
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',

package/dist/components/Timeline/timeline-field-utils.d.ts

@@ -11,3 +11,4 @@ export declare const formatTimelineNumber: ({ decimalPlaces, fixed, value, }: {
 }) => string;
 export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;
+export declare const leftAlignedDraggerStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
+exports.leftAlignedDraggerStyle = exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
     const [coefficient, exponent] = String(num).toLowerCase().split('e');
     const decimalIndex = coefficient.indexOf('.');
@@ -35,3 +35,8 @@ exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {
     width: 80,
 };
+exports.leftAlignedDraggerStyle = {
+    paddingBottom: 2,
+    paddingLeft: 0,
+    paddingTop: 2,
+};

package/dist/components/Timeline/update-selected-easing.js

@@ -33,6 +33,10 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
+            (0, studio_shared_1.isSchemaFieldHoldOnly)({
+                schema: sequence.controls.schema,
+                key: field.fieldKey,
+            }) ||
             !(0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
@@ -60,6 +64,10 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
+        (0, studio_shared_1.isSchemaFieldHoldOnly)({
+            schema: effect.schema,
+            key: field.fieldKey,
+        }) ||
         !(0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }

package/dist/components/Timeline/use-open-sequence-in-apps.js

@@ -8,9 +8,11 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const useOpenSequenceInApps = (sequence) => {
+    var _a;
+    var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const { resolvedLocation: originalLocation } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const { resolvedLocation: originalLocation } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack, (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewConnected);
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);

package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts

@@ -1,5 +1,5 @@
 import type { ResolvedStackLocation } from 'remotion';
-export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => {
+export declare const useResolveStackAndReactToChange: (getStack: () => string | null, sequenceIdentity: string) => {
     preferMappedNodePath: boolean;
     resolvedLocation: ResolvedStackLocation | null;
     stack: string | null;

package/dist/components/Timeline/use-resolved-stack-react-to-change.js

@@ -17,7 +17,7 @@ const matchesSourceLocation = (event, location) => {
         event.line === location.line &&
         event.column === ((_a = location.column) !== null && _a !== void 0 ? _a : 0));
 };
-const useResolveStackAndReactToChange = (getStack) => {
+const useResolveStackAndReactToChange = (getStack, sequenceIdentity) => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const [stackState, setStackState] = (0, react_1.useState)(() => ({
@@ -25,13 +25,34 @@ const useResolveStackAndReactToChange = (getStack) => {
         preferMappedNodePath: true,
     }));
     const resolvedLocationFromStack = (0, use_resolved_stack_1.useResolvedStack)(stackState.stack);
-    const resolvedLocation = (0, use_resolved_stack_1.hasResolvedStack)(stackState.stack)
+    const stackIsResolved = (0, use_resolved_stack_1.hasResolvedStack)(stackState.stack);
+    const lastResolvedLocation = (0, react_1.useRef)(resolvedLocationFromStack);
+    if (stackIsResolved) {
+        lastResolvedLocation.current = resolvedLocationFromStack;
+    }
+    const resolvedLocation = stackIsResolved
         ? resolvedLocationFromStack
-        : null;
+        : stackState.preferMappedNodePath
+            ? null
+            : lastResolvedLocation.current;
     const resolvedLocationRef = (0, react_1.useRef)(resolvedLocation);
     resolvedLocationRef.current = resolvedLocation;
     const getStackRef = (0, react_1.useRef)(getStack);
     getStackRef.current = getStack;
+    (0, react_1.useEffect)(() => {
+        const newStack = getStackRef.current();
+        setStackState((current) => {
+            if (newStack === current.stack) {
+                return current;
+            }
+            return {
+                stack: newStack,
+                // A different identity means a different selected sequence. Its existing
+                // node path mapping is still preferred.
+                preferMappedNodePath: true,
+            };
+        });
+    }, [sequenceIdentity]);
     (0, react_1.useEffect)(() => {
         if (fastRefreshes === 0) {
             return;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -436,9 +436,9 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: onPointerMove,
             onEnd: (reason) => {
                 if (reason === 'pointerup' || reason === 'buttons-released') {
@@ -643,9 +643,9 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: onPointerMove,
             onEnd: (reason) => {
                 if (reason === 'pointerup' || reason === 'buttons-released') {

package/dist/components/UndoRedoButtons.js

@@ -69,6 +69,8 @@ const UndoRedoButtons = () => {
         });
     }, []);
     (0, react_1.useEffect)(() => {
+        // Visual controls such as the color picker commit edits while their popup
+        // remains open. Keep undo and redo available in that higher z-index context.
         const undo = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'z',
@@ -83,7 +85,7 @@ const UndoRedoButtons = () => {
             },
             preventDefault: true,
             triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
+            keepRegisteredWhenNotHighestContext: true,
         });
         const redoWithShiftZ = keybindings.registerKeybinding({
             event: 'keydown',
@@ -99,7 +101,7 @@ const UndoRedoButtons = () => {
             },
             preventDefault: true,
             triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
+            keepRegisteredWhenNotHighestContext: true,
         });
         const redoWithY = is_mac_1.isMac
             ? null
@@ -114,7 +116,7 @@ const UndoRedoButtons = () => {
                 },
                 preventDefault: true,
                 triggerIfInputFieldFocused: false,
-                keepRegisteredWhenNotHighestContext: false,
+                keepRegisteredWhenNotHighestContext: true,
             });
         return () => {
             undo.unregister();

package/dist/components/folder-menu-items.js

@@ -88,6 +88,7 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                     folderName: folder.name,
                     parentName: folder.parent,
                     stack: folder.stack,
+                    canvasCapture: null,
                 });
             },
             quickSwitcherLabel: 'New composition in folder...',

package/dist/components/get-open-in-menu-items.d.ts

@@ -1,7 +1,8 @@
 import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }: {
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
@@ -9,9 +10,11 @@ export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, edi
     readonly excludeEditorId: EditorPickerId | null;
     readonly fileManagerDisabled: boolean;
     readonly folder: boolean;
+    readonly location: OriginalPosition | null;
     readonly onConfigureApps: () => void;
     readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
     readonly onOpenInEditor: (editorId: EditorPickerId) => void;
     readonly onOpenInFileExplorer: () => void;
+    readonly onOpenInGitClient: (gitClientId: "github-desktop") => void;
     readonly onOpenInTerminal: ((terminalId: TerminalId) => void) | null;
 }) => ComboboxValue[];

package/dist/components/get-open-in-menu-items.js

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOpenInMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const no_react_1 = require("remotion/no-react");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const editor_1 = require("../icons/editor");
 const finder_1 = require("../icons/finder");
+const git_client_1 = require("../icons/git-client");
+const github_1 = require("../icons/github");
 const terminal_1 = require("../icons/terminal");
 const CodingAgentIcon_1 = require("./CodingAgentIcon");
 const menuLabel = {
@@ -13,8 +17,8 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
-const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }) => {
-    var _a, _b, _c;
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
+    var _a, _b, _c, _d;
     const showFinder = window.remotion_fileSystemPlatform === 'darwin';
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
@@ -49,7 +53,53 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
         value: `coding-agent-${codingAgent.id}`,
     }));
     const terminals = folder ? ((_c = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedTerminals) !== null && _c !== void 0 ? _c : []) : [];
-    const showSystemApps = showFinder || terminals.length > 0;
+    const gitClients = folder ? ((_d = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedGitClients) !== null && _d !== void 0 ? _d : []) : [];
+    const gitHubItem = window.remotion_gitSource
+        ? {
+            id: 'open-in-github',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
+            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
+            onClick: () => {
+                const gitSource = window.remotion_gitSource;
+                if (!gitSource) {
+                    return;
+                }
+                window.open(folder || !location
+                    ? (0, get_git_menu_item_1.getGitSourceBranchUrl)(gitSource)
+                    : (0, get_git_menu_item_1.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'github',
+        }
+        : null;
+    const systemApps = [
+        gitHubItem,
+        showFinder
+            ? {
+                disabled: fileManagerDisabled,
+                id: 'open-in-file-explorer',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: fileManagerName }),
+                leftItem: jsx_runtime_1.jsx(finder_1.FinderIcon, { size: 18 }),
+                onClick: () => {
+                    if (!fileManagerDisabled) {
+                        onOpenInFileExplorer();
+                    }
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'file-explorer',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    const hasCategorizedApps = editors.length > 0 ||
+        codingAgents.length > 0 ||
+        terminals.length > 0 ||
+        gitClients.length > 0;
     return [
         ...(editors.length > 0
             ? [
@@ -71,61 +121,60 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 ...codingAgents,
             ]
             : []),
-        ...(showSystemApps
+        ...(terminals.length > 0
             ? [
-                ...(terminals.length > 0
-                    ? [
-                        {
-                            type: 'section-header',
-                            id: 'terminal-header',
-                            label: 'Terminal',
-                        },
-                        ...terminals.map((terminal) => ({
-                            id: `open-in-terminal-${terminal.id}`,
-                            keyHint: null,
-                            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: terminal.name }),
-                            leftItem: jsx_runtime_1.jsx(terminal_1.TerminalIcon, { terminalId: terminal.id, size: 18 }),
-                            onClick: () => onOpenInTerminal === null || onOpenInTerminal === void 0 ? void 0 : onOpenInTerminal(terminal.id),
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            type: 'item',
-                            value: `terminal-${terminal.id}`,
-                        })),
-                    ]
-                    : []),
-                ...(showFinder
+                {
+                    type: 'section-header',
+                    id: 'terminal-header',
+                    label: 'Terminal',
+                },
+                ...terminals.map((terminal) => ({
+                    id: `open-in-terminal-${terminal.id}`,
+                    keyHint: null,
+                    label: jsx_runtime_1.jsx("span", { style: menuLabel, children: terminal.name }),
+                    leftItem: jsx_runtime_1.jsx(terminal_1.TerminalIcon, { terminalId: terminal.id, size: 18 }),
+                    onClick: () => onOpenInTerminal === null || onOpenInTerminal === void 0 ? void 0 : onOpenInTerminal(terminal.id),
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: `terminal-${terminal.id}`,
+                })),
+            ]
+            : []),
+        ...(gitClients.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'git-client-header',
+                    label: 'Git Client',
+                },
+                ...gitClients.map((gitClient) => ({
+                    id: `open-in-git-client-${gitClient.id}`,
+                    keyHint: null,
+                    label: jsx_runtime_1.jsx("span", { style: menuLabel, children: gitClient.name }),
+                    leftItem: jsx_runtime_1.jsx(git_client_1.GitClientIcon, { gitClientId: gitClient.id, size: 18 }),
+                    onClick: () => onOpenInGitClient(gitClient.id),
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: `git-client-${gitClient.id}`,
+                })),
+            ]
+            : []),
+        ...(systemApps.length > 0
+            ? [
+                ...(hasCategorizedApps
                     ? [
-                        ...(editors.length > 0 ||
-                            codingAgents.length > 0 ||
-                            terminals.length > 0
-                            ? [
-                                {
-                                    type: 'divider',
-                                    id: 'open-in-file-explorer-divider',
-                                },
-                            ]
-                            : []),
                         {
-                            disabled: fileManagerDisabled,
-                            id: 'open-in-file-explorer',
-                            keyHint: null,
-                            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: fileManagerName }),
-                            leftItem: jsx_runtime_1.jsx(finder_1.FinderIcon, { size: 18 }),
-                            onClick: () => {
-                                if (!fileManagerDisabled) {
-                                    onOpenInFileExplorer();
-                                }
-                            },
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            type: 'item',
-                            value: 'file-explorer',
+                            type: 'divider',
+                            id: 'open-in-system-apps-divider',
                         },
                     ]
                     : []),
+                ...systemApps,
             ]
             : []),
-        ...(editors.length > 0 || codingAgents.length > 0 || showSystemApps
+        ...(hasCategorizedApps || systemApps.length > 0
             ? [{ type: 'divider', id: 'open-in-settings-divider' }]
             : []),
         {

package/dist/components/import-assets.js

@@ -7,6 +7,7 @@ const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
+const inserted_element_selection_1 = require("../helpers/inserted-element-selection");
 const install_required_package_1 = require("../helpers/install-required-package");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
@@ -504,6 +505,12 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         return false;
     }
+    if (result.insertedNodePath !== null) {
+        (0, inserted_element_selection_1.requestInsertedElementSelection)({
+            compositionId,
+            nodePath: result.insertedNodePath,
+        });
+    }
     return true;
 };
 const downloadRemoteAsset = (url) => {

package/dist/components/root-composition-menu-items.js

@@ -14,6 +14,7 @@ const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSele
                     folderName: null,
                     parentName: null,
                     stack: null,
+                    canvasCapture: null,
                 });
             },
             quickSwitcherLabel: 'New composition...',

package/dist/components/selected-outline-control-layout.d.ts

@@ -0,0 +1,14 @@
+import type { OutlinePoint } from './selected-outline-geometry';
+export type SelectedOutlineControlCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export declare const getSelectedOutlineControlLayout: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => {
+    rotationCorners: {
+        corner: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+        point: OutlinePoint;
+    }[];
+    rotationHandleRadius: number;
+    scaleEdges: ("bottom" | "left" | "right" | "top")[];
+    scaleHitWidth: {
+        horizontal: number;
+        vertical: number;
+    };
+};

package/dist/components/selected-outline-control-layout.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedOutlineControlLayout = void 0;
+// Outline points are measured in overlay pixels, keeping these sizes independent of canvas zoom.
+const handleSize = 8;
+const targetHalfSize = 4.5;
+const smallOutlineSize = handleSize * 4;
+const tinyOutlineSize = handleSize * 2;
+const distance = (from, to) => Math.hypot(to.x - from.x, to.y - from.y);
+const normalize = (point) => {
+    const length = Math.hypot(point.x, point.y);
+    if (length < 0.001) {
+        return null;
+    }
+    return { x: point.x / length, y: point.y / length };
+};
+const getRotationHandlePoint = ({ corner, points, radius, }) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const { point, adjacent } = {
+        'top-left': { point: topLeft, adjacent: [topRight, bottomLeft] },
+        'top-right': { point: topRight, adjacent: [topLeft, bottomRight] },
+        'bottom-right': { point: bottomRight, adjacent: [topRight, bottomLeft] },
+        'bottom-left': { point: bottomLeft, adjacent: [topLeft, bottomRight] },
+    }[corner];
+    const firstDirection = normalize({
+        x: point.x - adjacent[0].x,
+        y: point.y - adjacent[0].y,
+    });
+    const secondDirection = normalize({
+        x: point.x - adjacent[1].x,
+        y: point.y - adjacent[1].y,
+    });
+    const outlineCenter = {
+        x: (topLeft.x + topRight.x + bottomRight.x + bottomLeft.x) / 4,
+        y: (topLeft.y + topRight.y + bottomRight.y + bottomLeft.y) / 4,
+    };
+    const fallbackDirection = normalize({
+        x: point.x - outlineCenter.x,
+        y: point.y - outlineCenter.y,
+    });
+    const direction = firstDirection === null || secondDirection === null
+        ? fallbackDirection
+        : normalize({
+            x: firstDirection.x + secondDirection.x,
+            y: firstDirection.y + secondDirection.y,
+        });
+    if (direction === null) {
+        return point;
+    }
+    return {
+        x: point.x + direction.x * radius,
+        y: point.y + direction.y * radius,
+    };
+};
+const getSelectedOutlineControlLayout = (points) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const horizontalExtent = (distance(topLeft, topRight) + distance(bottomLeft, bottomRight)) / 2;
+    const verticalExtent = (distance(topLeft, bottomLeft) + distance(topRight, bottomRight)) / 2;
+    const isSmallX = horizontalExtent < smallOutlineSize;
+    const isSmallY = verticalExtent < smallOutlineSize;
+    const isTinyX = horizontalExtent < tinyOutlineSize;
+    const isTinyY = verticalExtent < tinyOutlineSize;
+    const targetHalfSizeX = isSmallX ? targetHalfSize / 2 : targetHalfSize;
+    const targetHalfSizeY = isSmallY ? targetHalfSize / 2 : targetHalfSize;
+    const rotationHandleRadius = Math.max(targetHalfSizeX, targetHalfSizeY) * 1.5;
+    const scaleEdges = ['top', 'right', 'bottom', 'left'].filter((edge) => {
+        // Preserve one scale control per axis when opposite edge targets would overlap.
+        if (edge === 'top') {
+            return !isTinyY;
+        }
+        if (edge === 'left') {
+            return !isTinyX;
+        }
+        return true;
+    });
+    const rotationCorners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => ({
+        corner,
+        point: getRotationHandlePoint({
+            corner,
+            points,
+            radius: rotationHandleRadius,
+        }),
+    }));
+    return {
+        rotationCorners: isTinyX || isTinyY ? [] : rotationCorners,
+        rotationHandleRadius,
+        scaleEdges,
+        scaleHitWidth: {
+            horizontal: targetHalfSizeY * 2,
+            vertical: targetHalfSizeX * 2,
+        },
+    };
+};
+exports.getSelectedOutlineControlLayout = getSelectedOutlineControlLayout;

package/dist/components/use-default-editor-info.js

@@ -9,10 +9,35 @@ const canUseEditorPicker = (previewServerConnected) => {
         (0, browser_studio_operations_1.getBrowserStudioOperations)() === null);
 };
 exports.canUseEditorPicker = canUseEditorPicker;
+const preferredFallbackEditorIds = [
+    'zed',
+    'vscode',
+    'cursor',
+];
 const getPreferredEditorId = (editorInfo) => {
-    var _a;
-    var _b;
-    return ((_b = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.nameWithType === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    var _a, _b, _c;
+    var _d;
+    const runningEditorId = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.nameWithType === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id;
+    if (runningEditorId) {
+        return runningEditorId;
+    }
+    if (window.remotion_editorName !== null) {
+        return null;
+    }
+    const configuredEditorId = (_b = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === editorInfo.defaultEditor)) === null || _b === void 0 ? void 0 : _b.id;
+    if (configuredEditorId) {
+        return configuredEditorId;
+    }
+    return ((_d = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.slice().sort((a, b) => {
+        const aPriority = preferredFallbackEditorIds.indexOf(a.id);
+        const bPriority = preferredFallbackEditorIds.indexOf(b.id);
+        const normalizedAPriority = aPriority === -1 ? Number.POSITIVE_INFINITY : aPriority;
+        const normalizedBPriority = bPriority === -1 ? Number.POSITIVE_INFINITY : bPriority;
+        if (normalizedAPriority !== normalizedBPriority) {
+            return normalizedAPriority - normalizedBPriority;
+        }
+        return a.nameWithType.localeCompare(b.nameWithType);
+    }).at(0)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null);
 };
 exports.getPreferredEditorId = getPreferredEditorId;
 const useDefaultEditorInfo = (enabled) => {