@remotion/studio 4.0.491 → 4.0.493

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
@@ -18,12 +19,13 @@ const fieldNameBase = {
     minWidth: 0,
 };
 const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
+    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
-        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
+        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
         ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [rowDepth, selected, stacked]);
+    }), [basePadding, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -114,6 +114,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getEffectDragOverrides,
         propStatuses,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

package/dist/components/Timeline/TimelineList.js

@@ -12,7 +12,8 @@ const container = {
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
+                var _a;
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePrimitiveFieldValue = exports.isTimelinePrimitiveFieldInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineAssetField_1 = require("./TimelineAssetField");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
@@ -17,9 +18,7 @@ const inlineWrapper = {
     fontSize: 12,
 };
 const isTimelinePrimitiveFieldInfo = (field) => {
-    return (field.typeName !== 'array' &&
-        field.typeName !== 'hidden' &&
-        field.fieldSchema.type !== 'array');
+    return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
 };
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
@@ -60,6 +59,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'font-family') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'asset') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const rowBase = {
     alignItems: 'stretch',
@@ -19,27 +20,28 @@ const leftChromeStyle = {
 };
 const keyframeControlsColumnBaseStyle = {
     alignItems: 'center',
-    boxSizing: 'border-box',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'flex-start',
-    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);
+    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
         ...keyframeControlsColumnBaseStyle,
-        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
-    }), [depth]);
+        boxSizing: keyframeControlsPadding === 0 ? undefined : 'border-box',
+        paddingLeft: keyframeControlsPadding,
+        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth, basePadding),
+    }), [basePadding, depth, keyframeControlsPadding]);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
         display: 'flex',
         flexShrink: 0,
-        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
-    }), []);
+        paddingLeft: basePadding,
+    }), [basePadding]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();

package/dist/components/Timeline/TimelineRowLayoutContext.d.ts

@@ -0,0 +1,7 @@
+type TimelineRowLayout = {
+    readonly basePadding: number;
+    readonly keyframeControlsPadding: number;
+};
+export declare const INSPECTOR_TIMELINE_ROW_LAYOUT: TimelineRowLayout;
+export declare const TimelineRowLayoutContext: import("react").Context<TimelineRowLayout>;
+export {};

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRowLayoutContext = exports.INSPECTOR_TIMELINE_ROW_LAYOUT = void 0;
+const react_1 = require("react");
+const timeline_row_layout_1 = require("./timeline-row-layout");
+exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
+    basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
+    keyframeControlsPadding: 0,
+};
+exports.TimelineRowLayoutContext = (0, react_1.createContext)({
+    basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+});

package/dist/components/Timeline/TimelineSelection.js

@@ -221,10 +221,26 @@ const isTimelineSelectionCompatibleWithMarqueeKind = (item, kind) => {
     return item.type === 'keyframe' || item.type === 'easing';
 };
 const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeRect, }) => {
-    const intersectingCandidates = candidates.filter((candidate) => {
+    const geometricallyIntersectingCandidates = candidates.filter((candidate) => {
         return (getTimelineMarqueeSelectionKind(candidate.item) !== null &&
             (0, exports.timelineMarqueeRectsIntersect)(candidate.rect, marqueeRect));
     });
+    const intersectingKeyframes = new Set(geometricallyIntersectingCandidates.flatMap((candidate) => {
+        if (candidate.item.type !== 'keyframe') {
+            return [];
+        }
+        return [
+            `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.item.nodePathInfo)}.${candidate.item.frame}`,
+        ];
+    }));
+    const intersectingCandidates = geometricallyIntersectingCandidates.filter((candidate) => {
+        if (candidate.item.type !== 'easing') {
+            return true;
+        }
+        const fieldKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(candidate.item.nodePathInfo);
+        return (intersectingKeyframes.has(`${fieldKey}.${candidate.item.fromFrame}`) &&
+            intersectingKeyframes.has(`${fieldKey}.${candidate.item.toFrame}`));
+    });
     const getFirstIntersectingSelectionKind = () => intersectingCandidates.length === 0
         ? null
         : getTimelineMarqueeSelectionKind(intersectingCandidates[0].item);
@@ -363,8 +379,6 @@ const getSelectableTimelineSequenceSelections = (tracks) => {
     });
 };
 exports.getSelectableTimelineSequenceSelections = getSelectableTimelineSequenceSelections;
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
 const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -373,7 +387,7 @@ const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, })
     if (node.field.kind === 'sequence-field') {
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)) === null || _a === void 0 ? void 0 : _a[node.field.key];
         return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
-            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+            (0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction));
     }
     const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -384,7 +398,7 @@ const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, })
         ? effectStatus.props[node.field.key]
         : null;
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
-        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+        (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
 const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }) => {
     const selectedRowKeys = (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems);
@@ -407,6 +421,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getEffectDragOverrides,
             propStatuses,
             includeTextContent: false,
+            includeSourceControls: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

package/dist/components/Timeline/TimelineSequenceItem.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { TSequence } from 'remotion';
+import type { _InternalTypes, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequenceItem: React.FC<{
     readonly sequence: TSequence;
+    readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -40,16 +40,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
+const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
@@ -76,6 +79,11 @@ const labelContainerStyle = {
     flexDirection: 'row',
     minWidth: 0,
 };
+const connectedCompositionIconStyle = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
 const effectDropHighlight = {
     backgroundColor: colors_1.TIMELINE_DROP_BLUE_ALPHA_16,
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
@@ -88,6 +96,7 @@ const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onTog
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
@@ -154,7 +163,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
+const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
     var _a, _b, _c;
     var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
@@ -167,6 +176,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
@@ -201,6 +211,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequence,
         validatedLocation,
     });
+    const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
+        ? connectedCompositions[0].id
+        : displayName;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
@@ -535,17 +548,27 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
             return;
         }
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
+            button: e.button,
+            canOpenInEditor,
+            numberOfConnectedCompositions: connectedCompositions.length,
+        });
+        if (action === null) {
+            return;
+        }
         e.stopPropagation();
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true);
+            return;
+        }
         openInEditor();
-    }, [canOpenInEditor, openInEditor]);
+    }, [canOpenInEditor, connectedCompositions, openInEditor, selectComposition]);
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -765,8 +788,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

package/dist/components/Timeline/TimelineSequenceName.js

@@ -24,7 +24,11 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             alignSelf: 'stretch',
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
+            fontFamily: 'inherit',
             fontSize: 12,
+            lineHeight: 'normal',
+            minWidth: 0,
+            overflow: 'hidden',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),

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

@@ -31,15 +31,15 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
         editorName
             ? {
                 type: 'item',
-                id: 'show-in-editor',
+                id: 'open-in-editor',
                 keyHint: null,
-                label: `Show in ${editorName}`,
+                label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
                 onClick: openInEditor,
                 quickSwitcherLabel: null,
                 subMenu: null,
-                value: 'show-in-editor',
+                value: 'open-in-editor',
             }
             : null,
         {

package/dist/components/Timeline/keyframe-clipboard.d.ts

@@ -0,0 +1,34 @@
+import type { KeyframeClipboardData } from '@remotion/studio-shared';
+import { type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const getKeyframeClipboardDataFromSelections: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => KeyframeClipboardData | null;
+export type PasteKeyframeTarget = {
+    readonly type: 'valid';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly effectIndex: number | null;
+    readonly keyframes: readonly {
+        readonly sourceFrame: number;
+        readonly value: unknown;
+    }[];
+    readonly keyframesToDelete: readonly number[];
+    readonly easing: KeyframeClipboardData['easing'];
+    readonly firstEasingSegmentIndex: number;
+    readonly schema: InteractivitySchema;
+} | {
+    readonly type: 'none' | 'multiple' | 'uncopyable' | 'incompatible';
+};
+export declare const getPasteKeyframeTarget: ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: KeyframeClipboardData;
+    readonly timelinePosition: number;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => PasteKeyframeTarget;