@remotion/studio 4.0.499 → 4.0.501

package/dist/components/Timeline/TimelineRowChrome.js

@@ -24,7 +24,7 @@ const keyframeControlsColumnBaseStyle = {
     flexShrink: 0,
     justifyContent: 'flex-start',
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const ref = (0, react_1.useRef)(null);
     const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
@@ -59,6 +59,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         showSelectedBackground,
         selected,
         containsSelection,
+        hovered,
     });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
@@ -89,8 +90,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

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

@@ -1,18 +1,20 @@
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
-import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
+export declare const TIMELINE_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
-export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, }: {
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, }: {
     readonly showSelectedBackground: boolean;
     readonly selected: boolean;
     readonly containsSelection: boolean;
+    readonly hovered: boolean;
 }) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#0F1113";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
@@ -145,23 +147,23 @@ type TimelineSelectionOptions = {
 };
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
     readonly selectedItems: readonly TimelineSelection[];
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
 }) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
@@ -213,5 +215,5 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     selectionItem: TimelineSelection;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
-export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null) => string | undefined;
+export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, hovered?: boolean) => string | undefined;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -21,6 +21,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
+exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = colors_1.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR;
 exports.TIMELINE_SELECTED_LABEL_TEXT = colors_1.BLACK;
 exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
@@ -54,10 +55,11 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor =
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
-const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, }) => {
-    return showSelectedBackground && (selected || containsSelection)
-        ? exports.TIMELINE_SELECTED_BACKGROUND
-        : undefined;
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, }) => {
+    if (showSelectedBackground && (selected || containsSelection)) {
+        return exports.TIMELINE_SELECTED_BACKGROUND;
+    }
+    return hovered ? exports.TIMELINE_HOVER_BACKGROUND : undefined;
 };
 exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
 exports.TIMELINE_BACKGROUND = colors_1.TIMELINE_BACKGROUND_COLOR;
@@ -595,9 +597,9 @@ const TimelineSelectionProvider = ({ children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const canSelect = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio;
+    const canSelect = (0, interactivity_enabled_1.isStudioSelectionEnabled)() &&
+        (previewServerState.type === 'connected' ||
+            window.remotion_isReadOnlyStudio);
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
@@ -614,7 +616,8 @@ const TimelineSelectionProvider = ({ children }) => {
             setSelectedItems([]);
         }
     }, [canSelect]);
-    const canSelectItem = (0, react_1.useCallback)((_item) => canSelect, [canSelect]);
+    const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
+        (!window.remotion_isReadOnlyStudio || item.type === 'sequence'), [canSelect]);
     const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -867,8 +870,9 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
-            ] }) }));
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+                    ] })) : null] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
 const useTimelineSelection = () => {
@@ -1107,13 +1111,14 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
-const useTimelineRowHighlightBackground = (nodePathInfo) => {
+const useTimelineRowHighlightBackground = (nodePathInfo, hovered = false) => {
     const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
     return (0, exports.getTimelineRowHighlightBackground)({
         showSelectedBackground: true,
         selected,
         containsSelection,
+        hovered,
     });
 };
 exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequence.js

@@ -291,10 +291,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                     },
                 ],
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -341,9 +338,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
-        }
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -376,7 +370,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDuplicateSequenceFromSource,
         openInEditor,
         originalLocation,
-        previewConnected,
         s,
         selectAsset,
     ]);
@@ -462,6 +455,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         return null;
     }
     const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
+    return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -46,6 +46,7 @@ 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 timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -55,6 +56,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -175,6 +177,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     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;
+    const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -186,7 +189,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     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 { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
@@ -267,10 +270,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                     },
                 ],
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -651,6 +651,29 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    const canCrop = (0, react_1.useMemo)(() => {
+        if (!previewInteractive ||
+            !sequence.controls ||
+            !nodePathInfo ||
+            !propStatusesForOverride ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return false;
+        }
+        const activeSchema = remotion_1.Internals.flattenActiveSchema(sequence.controls.schema, (key) => {
+            var _a;
+            return (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation[key];
+        });
+        return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+            schema: activeSchema,
+            propStatuses: propStatusesForOverride,
+        });
+    }, [
+        nodePathInfo,
+        previewInteractive,
+        propStatusesForOverride,
+        sequence.controls,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -671,10 +694,20 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         setSelectedModal,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
+    const onCrop = (0, react_1.useCallback)(() => {
+        if (!canCrop || !nodePathInfo) {
+            return;
         }
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
+            },
+            key: selected_outline_types_1.cropFieldKeys.left,
+        }, undefined, undefined, { reveal: true });
+    }, [canCrop, nodePathInfo, selectItem]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -706,12 +739,24 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                                 subMenu: null,
                                 value: 'add-effect',
                             },
-                            {
-                                type: 'divider',
-                                id: 'add-effect-divider',
-                            },
                         ]
                         : []),
+                    {
+                        type: 'item',
+                        id: 'crop',
+                        keyHint: null,
+                        label: 'Crop',
+                        leftItem: null,
+                        disabled: !canCrop,
+                        onClick: onCrop,
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'crop',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'crop-divider',
+                    },
                     {
                         type: 'item',
                         id: 'rename-sequence',
@@ -733,6 +778,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     }, [
         assetLinkInfo,
         canAddEffect,
+        canCrop,
         canOpenInEditor,
         canRenameThisSequence,
         deleteDisabled,
@@ -742,13 +788,13 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         freezeFrameMenuItem,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
+        onCrop,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
         openInEditor,
         originalLocation,
-        previewConnected,
         selectAsset,
         sequence,
     ]);
@@ -810,7 +856,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             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: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (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, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, 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 }),
@@ -818,7 +864,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,9 +6,11 @@ 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 open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
-const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
+const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
@@ -18,8 +20,17 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
+const inlineSourceFieldRow = {
+    alignItems: 'stretch',
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const computedSourceFieldRow = {
+    boxSizing: 'border-box',
+    paddingInline: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
 };
@@ -167,9 +178,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -223,16 +231,14 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         (0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
             movedKeyframes: null,
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: field.key,
-                    value: field.fieldSchema.default,
-                    defaultValue,
-                    schema,
-                },
-            ],
+            changes: (0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)({
+                fileName: validatedLocation.source,
+                nodePath,
+                fieldKey: field.key,
+                value: field.fieldSchema.default,
+                defaultValue,
+                schema,
+            }),
             setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: `Reset ${fieldLabel}`,
@@ -267,84 +273,29 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             },
         ];
     }, [canShowReset, onReset]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
-        setFrame((current) => {
-            const next = { ...current, [videoConfig.id]: frame };
-            remotion_1.Internals.persistCurrentFrame(next);
-            return next;
-        });
-    }, [setFrame, videoConfig.id]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (propStatus === null || propStatus.status === 'computed') {
-            return;
-        }
-        const keyframeSelection = {
-            type: 'keyframe',
-            nodePathInfo,
-            frame: sourceFrame + keyframeDisplayOffset,
-        };
-        if (propStatus.status === 'static') {
-            if (!keyframable || previewServerState.type !== 'connected') {
-                return;
-            }
-            const value = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                frame: sourceFrame,
-                defaultValue: field.fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            event.stopPropagation();
-            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName: validatedLocation.source,
-                nodePath,
-                fieldKey: field.key,
-                sourceFrame,
-                value,
-                schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            }).catch(() => undefined);
-            selectItems([keyframeSelection], { reveal: true });
-            seekToDisplayFrame(keyframeSelection.frame);
-            return;
-        }
-        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
-            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
-            keyframeDisplayOffset,
-            keyframes: propStatus.keyframes,
-            nodePathInfo,
-            sourceFrame,
-        });
-        if (targetSelection === null) {
+        var _a;
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             return;
         }
         event.stopPropagation();
-        selectItems([targetSelection], { reveal: true });
-        if (targetSelection.type === 'keyframe') {
-            seekToDisplayFrame(targetSelection.frame);
-        }
-    }, [
-        dragOverrideValue,
-        field.fieldSchema.default,
-        field.key,
-        keyframeDisplayOffset,
-        keyframable,
-        nodePath,
-        nodePathInfo,
-        previewServerState,
-        propStatus,
-        schema,
-        seekToDisplayFrame,
-        selectItems,
-        setPropStatuses,
-        sourceFrame,
-        validatedLocation.source,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: (_a = field.key.split('.').at(-1)) !== null && _a !== void 0 ? _a : field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     if (propStatus === null) {
         return null;
     }
     const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    if (field.typeName === 'asset' && field.key === 'src') {
+        return (jsx_runtime_1.jsx("div", { style: {
+                ...inlineSourceFieldRow,
+                ...(propStatus.status === 'computed' ? computedSourceFieldRow : null),
+                ...style,
+            }, children: fieldValue }));
+    }
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -107,7 +107,6 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
         return 1;
     }
     const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
-        candidate.rootId === sequence.rootId &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
             isTransitionSeriesTransition(candidate))));
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTrack: React.NamedExoticComponent<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;

package/dist/components/Timeline/TimelineTrack.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -49,7 +50,8 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo);
+    const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(track.nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo, hovered);
     const layerStyle = (0, react_1.useMemo)(() => ({
         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -58,7 +60,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const showExpandedKeyframes = track.nodePathInfo !== null &&
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
-    return (jsx_runtime_1.jsxs("div", { children: [
+    return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
             jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTracks: React.NamedExoticComponent<{
-    readonly timeline: TrackWithHash[];
+    readonly timeline: TimelineTrackData[];
     readonly hasBeenCut: boolean;
 }>;

package/dist/components/Timeline/border-radius-representation.d.ts

@@ -0,0 +1,16 @@
+import { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY } from '@remotion/studio-shared';
+import type { CanUpdateSequencePropStatus, DragOverrideValue } from 'remotion';
+export { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY };
+export type BorderRadiusConversion = {
+    readonly type: 'individual';
+    readonly value: number;
+} | {
+    readonly type: 'shorthand';
+    readonly value: number;
+};
+export type BorderRadiusConversionChange = {
+    readonly fieldKey: string;
+    readonly value: number | undefined;
+};
+export declare const getBorderRadiusConversionChanges: (conversion: BorderRadiusConversion) => BorderRadiusConversionChange[];
+export declare const getBorderRadiusConversion: (props: Record<string, CanUpdateSequencePropStatus> | undefined, dragOverrides?: Record<string, DragOverrideValue>) => BorderRadiusConversion | null;