@remotion/studio 4.0.511 → 4.0.513

package/dist/components/CompositionSelectorItem.js

@@ -22,6 +22,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const itemStyle = {
     paddingRight: 2,
     paddingTop: 5,
@@ -119,6 +120,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
@@ -126,6 +128,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
+                editorId: defaultEditorId,
+                editorName: defaultEditorName,
                 includeCompositionManagementItems: true,
                 resolvedLocation,
                 setSelectedModal,
@@ -135,12 +139,21 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,
             connectionStatus,
+            editorId: defaultEditorId,
+            editorName: defaultEditorName,
             folder: item.folder,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
         });
-    }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
+    }, [
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        item,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     const onCompositionDragStart = (0, react_1.useCallback)((event) => {
         var _a, _b, _c, _d;
         if (item.type !== 'composition' || window.remotion_isReadOnlyStudio) {

package/dist/components/InspectorOpenInEditor.js

@@ -42,16 +42,14 @@ const mainButtonBase = {
 };
 const editorButtonIconSize = 18;
 const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
-    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const ignorePointerEnter = (0, react_1.useRef)(false);
-    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
-    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
+    const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -63,8 +61,6 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [location]);
-    const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
-    const preferredEditor = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === preferredEditorId);
     const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : contextForAgents);
@@ -76,13 +72,14 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const editorName = (_b = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : preferredEditor === null || preferredEditor === void 0 ? void 0 : preferredEditor.nameWithType) !== null && _b !== void 0 ? _b : 'default editor';
-    const canOpenDefault = location !== null &&
-        (window.remotion_editorName !== null || preferredEditorId !== null);
+    const editorName = defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor';
+    const canOpenDefault = location !== null && canOpenInEditor;
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        openWithEditor(window.remotion_editorName === null ? preferredEditorId : null).catch(() => undefined);
-    }, [openWithEditor, preferredEditorId]);
+        if (defaultEditorId) {
+            openWithEditor(defaultEditorId).catch(() => undefined);
+        }
+    }, [defaultEditorId, openWithEditor]);
     const onDropdownOpenChange = (0, react_1.useCallback)((open) => {
         setDropdownOpened(open);
         if (!open) {
@@ -123,19 +120,21 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             editorDisabled: location === null,
             editorInfo,
             excludeCodingAgentId: null,
-            excludeEditorId: preferredEditorId,
+            excludeEditorId: defaultEditorId,
             fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
             folder: locationType === 'folder',
             location,
-            onConfigureApps: () => {
-                var _a;
-                var _b;
-                setSelectedModal({
-                    type: 'settings',
-                    initialTab: 'apps',
-                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                });
-            },
+            onConfigureApps: canConfigureApps
+                ? () => {
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
+                }
+                : null,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
             },
@@ -178,15 +177,16 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         });
     }, [
         codingAgentInfo,
+        canConfigureApps,
+        defaultEditorId,
         editorInfo,
         location,
         locationType,
         openWithCodingAgent,
         openWithEditor,
-        preferredEditorId,
         setSelectedModal,
     ]);
-    if (!editorPickerAvailable) {
+    if (previewServerState.type !== 'connected') {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => {
@@ -197,7 +197,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             ignorePointerEnter.current = false;
             setHovered(false);
         }, children: [
-            jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize })
+            jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize })
                 ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: onDropdownOpenChange, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -18,6 +18,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const selected_outline_drag_1 = require("../selected-outline-drag");
 const selected_outline_types_1 = require("../selected-outline-types");
 const call_add_keyframe_1 = require("../Timeline/call-add-keyframe");
+const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
 const save_sequence_prop_1 = require("../Timeline/save-sequence-prop");
 const timeline_translate_utils_1 = require("../Timeline/timeline-translate-utils");
 const alignment_controls_1 = require("./alignment-controls");
@@ -77,7 +78,12 @@ const AlignmentControls = ({ track }) => {
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
-        const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
+        const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
+        const sourceFrame = timelinePosition -
+            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: firstKeyframedStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            });
         const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
         const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
             schema: track.sequence.controls.schema,
@@ -191,7 +197,12 @@ const AlignmentControls = ({ track }) => {
     }
     const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
     const renderNodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, renderNodePath);
-    const renderSourceFrame = timelinePosition - track.keyframeDisplayOffset;
+    const firstRenderKeyframedStatus = Object.values(renderNodePropStatuses !== null && renderNodePropStatuses !== void 0 ? renderNodePropStatuses : {}).find((status) => status.status === 'keyframed');
+    const renderSourceFrame = timelinePosition -
+        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: firstRenderKeyframedStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        });
     const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
     const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
         schema: track.sequence.controls.schema,

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -4,6 +4,7 @@ exports.CompositionInspectorHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const react_2 = require("../../icons/react");
@@ -16,6 +17,7 @@ const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
 const sourceLocationIconStyle = {
     flexShrink: 0,
@@ -33,6 +35,8 @@ const CompositionInspectorHeader = () => {
     var _a, _b, _c, _d, _e;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
         if (!video) {
@@ -69,21 +73,21 @@ const CompositionInspectorHeader = () => {
         });
     }, [compositionFile, compositionId]);
     const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!validatedLocation) {
+        if (!validatedLocation || !defaultEditorId || !canOpenInEditor) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, null).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, defaultEditorId).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
-    }, [validatedLocation]);
+    }, [canOpenInEditor, defaultEditorId, validatedLocation]);
     const openComponentLocation = (0, react_1.useCallback)(() => {
-        if (!componentLocation) {
+        if (!componentLocation || !defaultEditorId || !canOpenInEditor) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, null).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, defaultEditorId).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
-    }, [componentLocation]);
+    }, [canOpenInEditor, componentLocation, defaultEditorId]);
     const renderCompositionIcon = (0, react_1.useCallback)((color) => {
         if (!video) {
             return null;
@@ -91,8 +95,8 @@ const CompositionInspectorHeader = () => {
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && canOpenInEditor, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
-                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && canOpenInEditor, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -13,6 +13,7 @@ const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const common_1 = require("./common");
 const compositionIconStyle = {
     height: 18,
@@ -43,15 +44,25 @@ const ConnectedCompositionRow = ({ composition }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
         closeMenu: noop_1.noop,
         composition,
         connectionStatus,
+        editorId: defaultEditorId,
+        editorName: defaultEditorName,
         includeCompositionManagementItems: false,
         readOnlyStudio: window.remotion_isReadOnlyStudio,
         resolvedLocation,
         setSelectedModal,
-    }), [composition, connectionStatus, resolvedLocation, setSelectedModal]);
+    }), [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
 };

package/dist/components/InspectorPanel/EasingInspector.js

@@ -12,6 +12,7 @@ const render_frame_1 = require("../../state/render-frame");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const call_add_keyframe_1 = require("../Timeline/call-add-keyframe");
 const EasingEditorModal_1 = require("../Timeline/EasingEditorModal");
+const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const update_selected_easing_1 = require("../Timeline/update-selected-easing");
 const common_1 = require("./common");
@@ -117,6 +118,12 @@ const EasingInspector = ({ selection }) => {
             segmentIndex: easingUpdate.segmentIndex,
         });
     }, [easingUpdate, selection.nodePathInfo, track]);
+    const easingKeyframeDisplayOffset = easingUpdate === null || track === null
+        ? 0
+        : (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: easingUpdate.propStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        });
     const state = (0, react_1.useMemo)(() => {
         if (initialEasing === null || currentEasingSelection === null) {
             return null;
@@ -147,7 +154,7 @@ const EasingInspector = ({ selection }) => {
             previewServerState.type !== 'connected') {
             return;
         }
-        const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
+        const sourceFrame = timelinePosition - easingKeyframeDisplayOffset;
         const value = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: easingUpdate.propStatus,
             dragOverrideValue: easingDetails.dragOverrideValue,
@@ -196,11 +203,12 @@ const EasingInspector = ({ selection }) => {
         setPropStatuses,
         timelinePosition,
         track,
+        easingKeyframeDisplayOffset,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
-                    frame: keyframe.frame + track.keyframeDisplayOffset,
+                    frame: keyframe.frame + easingKeyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
         currentEasingSelection,
         easingUpdate,
@@ -209,6 +217,7 @@ const EasingInspector = ({ selection }) => {
         parentSelection,
         selection,
         track,
+        easingKeyframeDisplayOffset,
     ]);
     if (state === null ||
         track === null ||

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -13,6 +13,7 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
 const call_move_keyframe_1 = require("../Timeline/call-move-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("../Timeline/get-easing-selection-after-keyframe-delete");
+const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
 const imperative_state_1 = require("../Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
 const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
@@ -80,7 +81,6 @@ const KeyframeInspector = ({ selection }) => {
         }
         const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
         const { keyframeDisplayOffset } = track;
-        const sourceFrame = selection.frame - keyframeDisplayOffset;
         if (keyframeField.type === 'sequence') {
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
@@ -100,11 +100,18 @@ const KeyframeInspector = ({ selection }) => {
                 field: sequenceField,
                 fieldLabel: (_d = sequenceField.description) !== null && _d !== void 0 ? _d : sequenceField.key,
                 fileName: nodePath.absolutePath,
-                keyframeDisplayOffset,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: sequencePropStatus,
+                    keyframeDisplayOffset,
+                }),
                 nodePath,
                 propStatus: sequencePropStatus,
                 schema: track.sequence.controls.schema,
-                sourceFrame,
+                sourceFrame: selection.frame -
+                    (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                        propStatus: sequencePropStatus,
+                        keyframeDisplayOffset,
+                    }),
             };
         }
         const effect = track.sequence.effects[keyframeField.effectIndex];
@@ -136,11 +143,18 @@ const KeyframeInspector = ({ selection }) => {
             field: effectField,
             fieldLabel: (_g = effectField.description) !== null && _g !== void 0 ? _g : effectField.key,
             fileName: nodePath.absolutePath,
-            keyframeDisplayOffset,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: effectPropStatus,
+                keyframeDisplayOffset,
+            }),
             nodePath,
             propStatus: effectPropStatus,
             schema: effect.schema,
-            sourceFrame,
+            sourceFrame: selection.frame -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: effectPropStatus,
+                    keyframeDisplayOffset,
+                }),
             validatedLocation: {
                 source: nodePath.absolutePath,
                 line: 1,

package/dist/components/InspectorPanel/easing-inspector-selection.js

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasingSelectionFromCurrentKeyframes = void 0;
+const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
 const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }) => {
     const fromKeyframe = propStatus.keyframes[segmentIndex];
     const toKeyframe = propStatus.keyframes[segmentIndex + 1];
     if (!fromKeyframe || !toKeyframe) {
         return null;
     }
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
     return {
         type: 'easing',
         nodePathInfo,
-        fromFrame: fromKeyframe.frame + keyframeDisplayOffset,
-        toFrame: toKeyframe.frame + keyframeDisplayOffset,
+        fromFrame: fromKeyframe.frame + resolvedKeyframeDisplayOffset,
+        toFrame: toKeyframe.frame + resolvedKeyframeDisplayOffset,
         segmentIndex,
     };
 };

package/dist/components/InspectorPanel/inspector-section-collapse.d.ts

@@ -4,6 +4,7 @@ export type SmartCollapsibleInspectorGroup = Extract<SchemaFieldGroup, 'backgrou
 export type InspectorSectionActivity = 'active' | 'inactive' | 'unknown';
 type InspectorSectionPropStatus = {
     readonly status: 'static';
+    readonly keyframeDisplayOffsetAdjustment: number | null;
     readonly codeValue: unknown;
 } | {
     readonly status: 'computed' | 'keyframed';

package/dist/components/SelectedOutlineElement.js

@@ -68,8 +68,7 @@ const use_select_asset_1 = require("./use-select-asset");
 const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onContextMenuOpenChange, onSnapPointsChange, onSelect, scale, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const canConfigureApps = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(canConfigureApps);
+    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 { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
@@ -138,8 +137,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         });
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
-            canOpenInEditor: previewServerState.type === 'connected' &&
-                Boolean(window.remotion_editorName),
+            canOpenInEditor: editorAvailable,
             numberOfConnectedCompositions: connectedCompositions.length,
         });
         if (action === null) {
@@ -151,10 +149,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         }
         const openTargetInEditor = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
-            if (originalLocation === null) {
+            if (originalLocation === null || defaultEditorId === null) {
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
         };
         openTargetInEditor().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -162,7 +160,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         return true;
     }, [
         compositions,
-        previewServerState.type,
+        defaultEditorId,
+        editorAvailable,
         resolveOriginalLocation,
         selectComposition,
     ]);
@@ -185,7 +184,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             ? contextMenuTarget.sequence.src
             : null;
         const assetLinkInfo = mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null;
-        const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
+        const canOpenInEditor = Boolean(originalLocation && editorAvailable);
         const sourceEditingEnabled = (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
         const disableInteractivityDisabled = !sourceEditingEnabled || !contextMenuTarget.sequence.showInTimeline;
         const sourceEditDisabled = !sourceEditingEnabled ||
@@ -281,10 +280,11 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                 });
             },
             openInEditor: (editorId) => {
-                if (!originalLocation) {
+                const resolvedEditorId = editorId !== null && editorId !== void 0 ? editorId : defaultEditorId;
+                if (!originalLocation || !resolvedEditorId || !editorAvailable) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, resolvedEditorId).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },
@@ -383,6 +383,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         editorInfo,
         getTarget,
         onSelect,
+        defaultEditorId,
+        editorAvailable,
         previewServerState,
         resolveOriginalLocation,
         setManuallyEnabled,

package/dist/components/SelectedOutlineOverlay.js

@@ -55,6 +55,7 @@ Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true,
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
 const selected_outline_drag_2 = require("./selected-outline-drag");
@@ -181,7 +182,12 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         }
         const { controls } = sequence;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
-        const sourceFrame = targetTimelinePosition - keyframeDisplayOffset;
+        const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
+        const nodeKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: firstKeyframedStatus,
+            keyframeDisplayOffset,
+        });
+        const sourceFrame = targetTimelinePosition - nodeKeyframeDisplayOffset;
         const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
         const runtimeValues = controls
             ? ((_b = runtimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
@@ -257,7 +263,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             key,
             containsSelection,
             crop,
-            keyframeDisplayOffset,
+            keyframeDisplayOffset: nodeKeyframeDisplayOffset,
             nodePathInfo,
             ref: sequence.refForOutline,
             selected,
@@ -316,7 +322,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
             (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
             ? sourceFrame
-            : selectedTransformOriginInfo.displayFrame - keyframeDisplayOffset;
+            : selectedTransformOriginInfo.displayFrame -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: transformOriginPropStatus,
+                    keyframeDisplayOffset,
+                });
         const canTransformOriginStatus = (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
             ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed' &&
                 transformOriginPropStatus.interpolationFunction === 'interpolate');
@@ -333,7 +343,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
             (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
             ? sourceFrame
-            : selectedCropInfo.displayFrame - keyframeDisplayOffset;
+            : selectedCropInfo.displayFrame - nodeKeyframeDisplayOffset;
         const canCropDrag = previewInteractive &&
             selectedForCrop &&
             controls !== null &&
@@ -364,7 +374,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         propStatus,
                         clientId: connectedClientId,
                         fieldDefault: fieldSchema.default,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         schema: controls.schema,
                     }
@@ -375,7 +388,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: scalePropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         linked: getScaleLockState({
                             nodePath,
                             fieldKey: selected_outline_types_1.scaleFieldKey,
@@ -401,7 +417,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: rotationFieldSchema.default,
                         fieldSchema: rotationFieldSchema,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: rotationPropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         schema: controls.schema,
                         transform3DMode,
@@ -411,7 +430,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                 transformOriginDrag: canTransformOriginDrag
                     ? {
                         clientId: connectedClientId,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: transformOriginPropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,

package/dist/components/Timeline/TimelineArrayField.js

@@ -155,6 +155,7 @@ const ItemEditor = ({ field, arrayField, items, index, onSave, onDragValueChange
     }, [arrayField, fallback, field, index]);
     const propStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
+        keyframeDisplayOffsetAdjustment: null,
         codeValue: value,
     }), [value]);
     const onSaveItem = (0, react_1.useCallback)((next) => onSave(replaceAtIndex(items, index, next)), [index, items, onSave]);