@remotion/studio 4.0.502 → 4.0.503

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSequenceContextMenuItems = void 0;
+const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
+const editor_1 = require("../../icons/editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
@@ -22,11 +24,13 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b;
+    var _c;
     const editorName = window.remotion_editorName;
     const { documentationLink } = sequence;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
+    const installedEditors = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _c !== void 0 ? _c : [];
     const items = [
         editorName
             ? {
@@ -36,12 +40,44 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
-                onClick: openInEditor,
+                onClick: () => openInEditor(null),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'open-in-editor',
             }
             : null,
+        editorName && installedEditors.length > 0
+            ? {
+                type: 'item',
+                id: 'open-in-another-editor',
+                keyHint: null,
+                label: 'Open in...',
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: () => undefined,
+                quickSwitcherLabel: null,
+                subMenu: {
+                    items: installedEditors.map((editor) => ({
+                        type: 'item',
+                        id: `open-in-${editor.id}`,
+                        keyHint: null,
+                        label: editor.name,
+                        leftItem: (0, react_1.createElement)(editor_1.EditorIcon, {
+                            editorId: editor.id,
+                            size: 18,
+                        }),
+                        disabled: false,
+                        onClick: () => openInEditor(editor.id),
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: editor.id,
+                    })),
+                    leaveLeftSpace: true,
+                    preselectIndex: false,
+                },
+                value: 'open-in-another-editor',
+            }
+            : null,
         {
             type: 'item',
             id: 'copy-file-location',

package/dist/components/Timeline/should-subscribe-to-source-file.d.ts

@@ -0,0 +1 @@
+export declare const shouldSubscribeToSourceFile: (source: string) => boolean;

package/dist/components/Timeline/should-subscribe-to-source-file.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSubscribeToSourceFile = void 0;
+const shouldSubscribeToSourceFile = (source) => {
+    const normalized = source.replaceAll('\\', '/');
+    if (normalized === '..' || normalized.startsWith('../')) {
+        return false;
+    }
+    return !normalized.split('/').includes('node_modules');
+};
+exports.shouldSubscribeToSourceFile = shouldSubscribeToSourceFile;

package/dist/components/Timeline/use-open-sequence-in-editor.d.ts

@@ -1,6 +1,8 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
     canOpenInEditor: boolean;
-    openInEditor: () => Promise<void>;
+    editorInfo: import("@remotion/studio-shared").GetDefaultEditorInfoResponse | null;
+    openInEditor: (editorId: EditorPickerId | null) => Promise<void>;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

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

@@ -5,18 +5,20 @@ const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 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 useOpenSequenceInEditor = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
-    const openInEditor = (0, react_1.useCallback)(async () => {
+    const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!canOpenInEditor || !originalLocation) {
             return;
         }
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -24,6 +26,7 @@ const useOpenSequenceInEditor = (sequence) => {
     }, [canOpenInEditor, originalLocation]);
     return {
         canOpenInEditor,
+        editorInfo,
         openInEditor,
         originalLocation,
     };

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -40,6 +41,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         var _a, _b;
         if (!clientId ||
             !locationSource ||
+            !(0, should_subscribe_to_source_file_1.shouldSubscribeToSourceFile)(locationSource) ||
             !locationLine ||
             locationColumn === null ||
             !schema ||

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,7 +11,6 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
-const use_element_overwrite_confirmation_1 = require("../use-element-overwrite-confirmation");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -31,7 +30,6 @@ const useTimelineAssetDrop = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
-    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -122,7 +120,6 @@ const useTimelineAssetDrop = () => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
-                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: {
                     height: videoConfig.height,
@@ -145,7 +142,6 @@ const useTimelineAssetDrop = () => {
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
-        confirmElementOverwrite,
         currentCompositionId,
         getDropFrame,
         videoConfig,

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

@@ -5,6 +5,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -319,11 +320,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -438,9 +436,19 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,
@@ -519,11 +527,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -638,9 +643,19 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,

package/dist/components/UndoRedoButtons.js

@@ -141,7 +141,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdateCheck.d.ts

@@ -3,6 +3,8 @@ export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;
+    skillsUpdateAvailable: boolean;
+    remotionUpgradeSkillAvailable: boolean;
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };

package/dist/components/UpdateCheck.js

@@ -17,6 +17,7 @@ const buttonStyle = {
     fontSize: 14,
     display: 'inline-flex',
     justifyContent: 'center',
+    marginLeft: 8,
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
@@ -24,9 +25,9 @@ const UpdateCheck = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && knownBugs.length > 0;
-    }, [knownBugs]);
+    const hasBugfixesAvailable = (0, react_1.useMemo)(() => {
+        return Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
+    }, [info === null || info === void 0 ? void 0 : info.updateAvailable, knownBugs]);
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
         (0, actions_1.updateAvailable)(controller.signal)
@@ -78,9 +79,13 @@ const UpdateCheck = () => {
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,
-            color: hovered ? colors_1.WHITE : hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80,
+            color: hovered
+                ? colors_1.WHITE
+                : hasBugfixesAvailable
+                    ? colors_1.WARNING_COLOR
+                    : colors_1.WHITE_ALPHA_80,
         };
-    }, [hasKnownBugs, hovered]);
+    }, [hasBugfixesAvailable, hovered]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -90,10 +95,10 @@ const UpdateCheck = () => {
     if (!info) {
         return null;
     }
-    if (!info.updateAvailable) {
+    if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasBugfixesAvailable ? 'Bugfixes available' : 'Update available', children: hasBugfixesAvailable ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
                 color: 'inherit',

package/dist/components/UpdateModal/UpdateModal.js

@@ -16,7 +16,10 @@ const container = {
     paddingTop: 0,
 };
 const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
     fontSize: 14,
+    lineHeight: 1.5,
 };
 const title = {
     paddingTop: 12,
@@ -25,16 +28,19 @@ const title = {
 };
 const code = {
     background: colors_1.SELECTED_BACKGROUND,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
     padding: '12px 10px',
     fontSize: 14,
+    lineHeight: 1.5,
     marginTop: 10,
     marginBottom: 10,
 };
 const link = {
+    ...text,
     fontWeight: 'bold',
     color: colors_1.BLUE,
     textDecoration: 'none',
-    ...text,
 };
 const commands = {
     npm: 'npx remotion upgrade',
@@ -43,23 +49,33 @@ const commands = {
     bun: 'bun remotion upgrade',
     unknown: 'npx remotion upgrade',
 };
+const skillsUpdateCommand = 'npx remotion skills update';
+const remotionUpgradeSkill = '/remotion-upgrade';
 const UpdateModal = ({ info, knownBugs }) => {
     const hasKnownBugs = (0, react_1.useMemo)(() => {
         return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
     }, [knownBugs]);
-    const command = commands[info.packageManager];
+    const updateAction = info.remotionUpgradeSkillAvailable
+        ? remotionUpgradeSkill
+        : info.updateAvailable
+            ? commands[info.packageManager]
+            : skillsUpdateCommand;
+    const updateActionType = info.remotionUpgradeSkillAvailable
+        ? 'skill'
+        : 'command';
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(command).catch((err) => {
+        (0, copy_text_1.copyText)(updateAction).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [command]);
+    }, [updateAction]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsx("div", { style: text, children: "To upgrade, run the following command:" })
-                        ] })) : (jsx_runtime_1.jsx("div", { style: title, children: "A new update for Remotion is available! Run the following command:" })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: command }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })
-                ] })
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
+                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: updateAction }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: updateAction, label: "Copy", labelWhenCopied: "Copied!" })
+                        ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
+                                ? ' and update your project Remotion Agent Skills.'
+                                : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })
         ] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/components/VisualControls/ClickableFileName.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
 const container = {
@@ -28,11 +29,13 @@ const ClickableFileName = ({ originalFileName, }) => {
             color: hoverEffect ? colors_1.WHITE_HEX : colors_1.LIGHT_COLOR,
         };
     }, [originalFileName, hoverEffect]);
-    const onClick = (0, react_1.useCallback)(async () => {
+    const onClick = (0, react_1.useCallback)(() => {
         if (originalFileName.type !== 'loaded') {
             return;
         }
-        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName);
+        (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName, null).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
     }, [originalFileName]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
                 ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)

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

@@ -28,7 +28,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);

package/dist/components/element-install-request.d.ts

@@ -0,0 +1,3 @@
+import type { ElementInstallRequest } from '@remotion/studio-shared';
+export declare const enqueueElementInstallRequest: (request: ElementInstallRequest) => void;
+export declare const subscribeToElementInstallRequests: (listener: (request: ElementInstallRequest) => void) => () => void;

package/dist/components/element-install-request.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToElementInstallRequests = exports.enqueueElementInstallRequest = void 0;
+const listeners = new Set();
+const enqueueElementInstallRequest = (request) => {
+    for (const listener of listeners) {
+        listener(request);
+    }
+};
+exports.enqueueElementInstallRequest = enqueueElementInstallRequest;
+const subscribeToElementInstallRequests = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+exports.subscribeToElementInstallRequests = subscribeToElementInstallRequests;

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

@@ -32,7 +32,7 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);

package/dist/components/handle-drop.d.ts

@@ -1,10 +1,9 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
-import { type ConfirmElementOverwrite, type InsertElementDropPosition } from './import-assets';
+import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
-    confirmElementOverwrite: ConfirmElementOverwrite;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;

package/dist/components/handle-drop.js

@@ -4,8 +4,9 @@ exports.handleDrop = void 0;
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -77,13 +78,19 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElement
     }
     const element = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
     if (element !== null) {
-        await (0, import_assets_1.insertElement)({
+        (0, element_install_request_1.enqueueElementInstallRequest)({
+            id: crypto.randomUUID(),
+            clientId: 'drag-and-drop',
+            createdAt: Date.now(),
             compositionFile,
             compositionId,
-            confirmOverwrite: confirmElementOverwrite,
-            dropPosition,
             element: element.element,
             from,
+            position: (0, import_assets_1.getElementPositionForDrop)({
+                dimensions: element.element.dimensions,
+                dropPosition,
+            }),
+            source: { type: 'drag-and-drop' },
         });
         return;
     }

package/dist/components/import-assets.d.ts

@@ -1,11 +1,10 @@
 import { type CompositionDragData, type ComponentProp } from '@remotion/studio-protocol';
-import { type FileType, type InsertElementFileConflict, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
 };
-export type ConfirmElementOverwrite = (conflict: InsertElementFileConflict) => Promise<boolean>;
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
@@ -145,11 +144,9 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }: {
+export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
     compositionFile: string;
     compositionId: string;
-    confirmOverwrite: ConfirmElementOverwrite;
-    dropPosition: InsertElementDropPosition | null;
     element: {
         dependencies: string[];
         slug: string;
@@ -157,5 +154,8 @@ export declare const insertElement: ({ compositionFile, compositionId, confirmOv
         sourceCode: string;
         dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
     };
+    expectedFileState: ElementInstallExpectedFileState;
+    position: InsertableCompositionElementPosition | null;
     from: number | null;
+    overwriteExisting: boolean;
 }) => Promise<void>;

package/dist/components/import-assets.js

@@ -872,33 +872,22 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }) => {
+const insertElement = async ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
     try {
         await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const position = (0, exports.getElementPositionForDrop)({
-            dimensions: element.dimensions,
-            dropPosition,
-        });
-        const callInsertElementApi = (overwriteExisting) => (0, call_api_1.callApi)('/api/insert-element', {
+        const response = await (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
+            expectedFileState,
             from,
             overwriteExisting,
             position,
         });
-        let response = await callInsertElementApi(false);
-        if (!response.success && response.type === 'file-conflict') {
-            const shouldOverwrite = await confirmOverwrite(response.conflict);
-            if (!shouldOverwrite) {
-                return;
-            }
-            response = await callInsertElementApi(true);
-        }
         if (!response.success) {
             const reason = response.type === 'error'
                 ? response.reason
-                : `Element file still conflicts: ${response.conflict.filePath}`;
+                : `Element file changed: ${response.conflict.filePath}`;
             (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
             return;
         }

package/dist/components/use-default-editor-info.d.ts

@@ -0,0 +1,4 @@
+import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+export declare const canUseEditorPicker: (previewServerConnected: boolean) => boolean;
+export declare const getPreferredEditorId: (editorInfo: GetDefaultEditorInfoResponse | null) => EditorPickerId | null;
+export declare const useDefaultEditorInfo: (enabled: boolean) => GetDefaultEditorInfoResponse | null;