@remotion/studio 4.0.482 → 4.0.483

package/dist/components/Timeline/EasingEditorModal.js

@@ -37,9 +37,12 @@ const PRESET_PREVIEW_HEIGHT = 30;
 const PRESET_PREVIEW_PADDING = 5;
 const PRESET_PREVIEW_Y_MIN = -0.35;
 const PRESET_PREVIEW_Y_MAX = 1.45;
+const DEFAULT_DURATION_REST_THRESHOLD = 0.02;
 const DEFAULT_SPRING_EASING = {
     type: 'spring',
+    allowTail: true,
     damping: 10,
+    durationRestThreshold: DEFAULT_DURATION_REST_THRESHOLD,
     mass: 1,
     overshootClamping: false,
     stiffness: 100,
@@ -54,14 +57,22 @@ const EDITOR_EASING_PRESETS = [
 ];
 const SPRING_LIMITS = {
     damping: { min: 1, max: 200, step: 1 },
+    durationRestThreshold: { min: 0.001, max: 0.5, step: 0.001 },
     mass: { min: 0.1, max: 20, step: 0.1 },
     stiffness: { min: 1, max: 1000, step: 1 },
 };
 const SPRING_DECIMAL_PLACES = {
     damping: 0,
+    durationRestThreshold: 3,
     mass: 2,
     stiffness: 0,
 };
+const SPRING_FALLBACKS = {
+    damping: DEFAULT_SPRING_EASING.damping,
+    durationRestThreshold: DEFAULT_DURATION_REST_THRESHOLD,
+    mass: DEFAULT_SPRING_EASING.mass,
+    stiffness: DEFAULT_SPRING_EASING.stiffness,
+};
 const inlineContainer = {
     width: '100%',
     minWidth: 0,
@@ -186,7 +197,11 @@ const sanitizeSpringValue = (value, key, fallback) => {
 };
 const sanitizeSpring = (spring) => ({
     type: 'spring',
+    allowTail: spring.allowTail,
     damping: sanitizeSpringValue(spring.damping, 'damping', DEFAULT_SPRING_EASING.damping),
+    durationRestThreshold: spring.durationRestThreshold === null
+        ? null
+        : sanitizeSpringValue(spring.durationRestThreshold, 'durationRestThreshold', DEFAULT_DURATION_REST_THRESHOLD),
     mass: sanitizeSpringValue(spring.mass, 'mass', DEFAULT_SPRING_EASING.mass),
     overshootClamping: spring.overshootClamping,
     stiffness: sanitizeSpringValue(spring.stiffness, 'stiffness', DEFAULT_SPRING_EASING.stiffness),
@@ -210,6 +225,7 @@ const formatNumberWithDecimalPlaces = (decimalPlaces) => (value) => {
 };
 const springFormatters = {
     damping: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.damping),
+    durationRestThreshold: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.durationRestThreshold),
     mass: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.mass),
     stiffness: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.stiffness),
 };
@@ -225,7 +241,9 @@ const areEasingsEqual = (first, second) => {
             return true;
         case 'spring':
             return (second.type === 'spring' &&
+                first.allowTail === second.allowTail &&
                 first.damping === second.damping &&
+                first.durationRestThreshold === second.durationRestThreshold &&
                 first.mass === second.mass &&
                 first.overshootClamping === second.overshootClamping &&
                 first.stiffness === second.stiffness);
@@ -295,6 +313,7 @@ const presetPreviewYToSvg = (value) => PRESET_PREVIEW_PADDING +
         (PRESET_PREVIEW_Y_MAX - PRESET_PREVIEW_Y_MIN)) *
         (PRESET_PREVIEW_HEIGHT - PRESET_PREVIEW_PADDING * 2);
 const getEasingFunction = (easing) => {
+    var _a, _b;
     switch (easing.type) {
         case 'linear':
             return remotion_1.Easing.linear;
@@ -302,7 +321,9 @@ const getEasingFunction = (easing) => {
             return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
         case 'spring':
             return remotion_1.Easing.spring({
+                allowTail: (_a = easing.allowTail) !== null && _a !== void 0 ? _a : undefined,
                 damping: easing.damping,
+                durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
                 mass: easing.mass,
                 overshootClamping: easing.overshootClamping,
                 stiffness: easing.stiffness,
@@ -374,6 +395,7 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
+    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -532,7 +554,7 @@ const EasingEditor = ({ state, renderHeader }) => {
     const setSpringNumber = (0, react_1.useCallback)((key, value, commit) => {
         const next = {
             ...springRef.current,
-            [key]: sanitizeSpringValue(value, key, DEFAULT_SPRING_EASING[key]),
+            [key]: sanitizeSpringValue(value, key, SPRING_FALLBACKS[key]),
         };
         const version = setSpringAndPreview(next);
         if (commit) {
@@ -547,6 +569,15 @@ const EasingEditor = ({ state, renderHeader }) => {
         const version = setSpringAndPreview(next);
         commitEasing(serializeSpring(next), version);
     }, [commitEasing, setSpringAndPreview]);
+    const setAllowTail = (0, react_1.useCallback)(() => {
+        var _a;
+        const next = {
+            ...springRef.current,
+            allowTail: !((_a = springRef.current.allowTail) !== null && _a !== void 0 ? _a : false),
+        };
+        const version = setSpringAndPreview(next);
+        commitEasing(serializeSpring(next), version);
+    }, [commitEasing, setSpringAndPreview]);
     const switchMode = (0, react_1.useCallback)((nextMode) => {
         setMode(nextMode);
         if (mode === nextMode || previewServerState.type !== 'connected') {
@@ -647,8 +678,11 @@ const EasingEditor = ({ state, renderHeader }) => {
         return `M ${startPoint.x} ${startPoint.y} C ${firstHandle.x} ${firstHandle.y}, ${secondHandle.x} ${secondHandle.y}, ${endPoint.x} ${endPoint.y}`;
     }, [endPoint, firstHandle, secondHandle, startPoint]);
     const springPath = (0, react_1.useMemo)(() => {
+        var _a, _b;
         const easing = remotion_1.Easing.spring({
+            allowTail: (_a = spring.allowTail) !== null && _a !== void 0 ? _a : undefined,
             damping: spring.damping,
+            durationRestThreshold: (_b = spring.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
             mass: spring.mass,
             overshootClamping: spring.overshootClamping,
             stiffness: spring.stiffness,
@@ -711,8 +745,12 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Mass" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.mass, status: "ok", onValueChange: (value) => setSpringNumber('mass', value, false), onValueChangeEnd: (value) => setSpringNumber('mass', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.mass.min, max: SPRING_LIMITS.mass.max, step: SPRING_LIMITS.mass.step, formatter: springFormatters.mass, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.mass, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Stiffness" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.stiffness, status: "ok", onValueChange: (value) => setSpringNumber('stiffness', value, false), onValueChangeEnd: (value) => setSpringNumber('stiffness', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.stiffness.min, max: SPRING_LIMITS.stiffness.max, step: SPRING_LIMITS.stiffness.step, formatter: springFormatters.stiffness, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.stiffness, disabled: disabled }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Rest threshold" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = spring.durationRestThreshold) !== null && _a !== void 0 ? _a : DEFAULT_DURATION_REST_THRESHOLD, status: "ok", onValueChange: (value) => setSpringNumber('durationRestThreshold', value, false), onValueChangeEnd: (value) => setSpringNumber('durationRestThreshold', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.durationRestThreshold.min, max: SPRING_LIMITS.durationRestThreshold.max, step: SPRING_LIMITS.durationRestThreshold.step, formatter: springFormatters.durationRestThreshold, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.durationRestThreshold, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Clamp overshoot" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: spring.overshootClamping, onChange: setOvershootClamping, name: "spring-overshoot-clamping", disabled: disabled, variant: "small" }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Allow tail" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: (_b = spring.allowTail) !== null && _b !== void 0 ? _b : false, onChange: setAllowTail, name: "spring-allow-tail", disabled: disabled, variant: "small" }) })
                                 ] })
                         ] })
                 ] }))] }));

package/dist/components/Timeline/Timeline.js

@@ -53,6 +53,7 @@ const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const SequencePropsObserver_1 = require("./SequencePropsObserver");
 const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline");
+const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequence-props");
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
@@ -227,7 +228,7 @@ const TimelineInner = () => {
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
-                if (!sequence.controls || !previewConnected || !sequence.getStack()) {
+                if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewConnected)) {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));

package/dist/components/Timeline/TimelineEffectItem.js

@@ -71,6 +71,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -205,12 +206,14 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             alignSelf: 'stretch',
             alignItems: 'center',
             color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
-            display: 'flex',
-            flex: 1,
+            display: 'inline-flex',
+            marginRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
             minWidth: 0,
-            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            boxShadow: containsSelection && !selection.selected
+                ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
+                : undefined,
         };
-    }, [selection.selected]);
+    }, [containsSelection, selection.selected]);
     const getDropTarget = (0, react_1.useCallback)((e) => {
         const dragData = getEffectReorderDragData(e.dataTransfer);
         if (!dragData || dragData.nodePathKey !== nodePathKey) {
@@ -316,7 +319,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
 };

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -50,11 +50,11 @@ const rowSeparator = {
 };
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo);
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -11,6 +11,7 @@ const valuesEqual = (left, right) => {
 const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const computedValue = (0, react_1.useMemo)(() => {
         const raw = remotion_1.Internals.interpolateKeyframedStatus({
+            forceSpringAllowTail: false,
             frame: sourceFrame,
             status: propStatus,
         });

package/dist/components/Timeline/TimelineRowChrome.js

@@ -51,13 +51,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         e.stopPropagation();
         onSelect();
     }, [onSelect]);
-    const highlightBackground = showSelectedBackground && (selected || containsSelection)
-        ? TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND
-        : undefined;
+    const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
+        showSelectedBackground,
+        selected,
+        containsSelection,
+    });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
         ...style,
-        backgroundColor: outerHeight === undefined ? highlightBackground : undefined,
+        backgroundColor: outerHeight === null ? highlightBackground : undefined,
     }), [style, outerHeight, highlightBackground]);
     const outerStyle = (0, react_1.useMemo)(() => {
         if (outerHeight === null) {

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

@@ -8,7 +8,12 @@ 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) => CSSProperties;
+export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, }: {
+    readonly showSelectedBackground: boolean;
+    readonly selected: boolean;
+    readonly containsSelection: boolean;
+}) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#0F1113";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 export type TimelineSelection = {
@@ -204,4 +209,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 {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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.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.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;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -42,8 +42,8 @@ const getTimelineColor = (selected, subcategory) => {
         : 'rgba(255, 255, 255, 0.8)';
 };
 exports.getTimelineColor = getTimelineColor;
-const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
-    backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
+const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor = exports.TIMELINE_SELECTED_BACKGROUND) => ({
+    backgroundColor,
     bottom: 0,
     left: -timeline_layout_1.TIMELINE_PADDING,
     pointerEvents: 'none',
@@ -52,6 +52,12 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, }) => {
+    return showSelectedBackground && (selected || containsSelection)
+        ? exports.TIMELINE_SELECTED_BACKGROUND
+        : undefined;
+};
+exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
 exports.TIMELINE_BACKGROUND = '#0F1113';
 exports.TIMELINE_TICKS_BACKGROUND = colors_1.BACKGROUND;
 const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
@@ -1043,3 +1049,13 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
+const useTimelineRowHighlightBackground = (nodePathInfo) => {
+    const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
+    return (0, exports.getTimelineRowHighlightBackground)({
+        showSelectedBackground: true,
+        selected,
+        containsSelection,
+    });
+};
+exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequence.js

@@ -154,10 +154,10 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b;
-    var _c, _d, _e, _f, _g;
+    var _a, _b, _c;
+    var _d, _e, _f, _g, _h, _j;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -174,7 +174,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -182,6 +182,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
     const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const trimBeforeCanUpdate = Boolean(((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -291,7 +292,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _e !== void 0 ? _e : null,
+        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) {
@@ -312,7 +313,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: [freezeFrameMenuItem],
+            sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : [],
         });
     }, [
         assetLinkInfo,
@@ -340,7 +341,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
+        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -391,10 +392,21 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
+    const showLeftEdgeDragHandle = (s.type === 'sequence' ||
+        s.type === 'image' ||
+        s.type === 'audio' ||
+        s.type === 'video') &&
+        !s.isInsideSeries &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        Boolean(s.controls) &&
+        fromCanUpdate &&
+        durationCanUpdate &&
+        trimBeforeCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         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, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : 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, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: 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);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -437,17 +437,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
-        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
-            e.stopPropagation();
-            return;
-        }
-        e.stopPropagation();
-        openInEditor();
-    }, [canOpenInEditor, openInEditor]);
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -548,6 +537,18 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeNameStatus !== undefined &&
         codeNameStatus !== null &&
         codeNameStatus.status === 'static';
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        e.stopPropagation();
+        if (canRenameThisSequence) {
+            setIsRenaming(true);
+            return;
+        }
+        openInEditor();
+    }, [canRenameThisSequence, openInEditor]);
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -718,7 +719,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     subMenu: null,
                     value: 'rename-sequence',
                 },
-                freezeFrameMenuItem,
+                ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
             ],
         });
     }, [
@@ -801,7 +802,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: !previewConnected, 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: [
+    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: !previewConnected, 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: canRenameThisSequence || canOpenInEditor
+            ? onSequenceDoubleClick
+            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, 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 }),
                         " ",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -8,6 +8,14 @@ export type TimelineSequenceDurationDragTarget = {
     readonly initialDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
 };
+export type TimelineSequenceLeftEdgeDragTarget = {
+    readonly fileName: string;
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+};
 export type TimelineSequenceFromDragTarget = {
     readonly fileName: string;
     readonly initialFrom: number;
@@ -17,6 +25,25 @@ export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, d
     readonly initialDuration: number;
     readonly deltaFrames: number;
 }) => number;
+export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => {
+    durationInFrames: number;
+    from: number;
+    trimBefore: number;
+};
+export declare const getTimelineSequenceLeftEdgeDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceLeftEdgeDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
 export declare const getTimelineSequenceDurationDragChanges: ({ targets, deltaFrames, }: {
     readonly targets: readonly TimelineSequenceDurationDragTarget[];
     readonly deltaFrames: number;
@@ -36,6 +63,13 @@ export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathI
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
+export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => TimelineSequenceLeftEdgeDragTarget[] | null;
 export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
@@ -43,6 +77,11 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
+export declare const TimelineSequenceLeftEdgeDragHandle: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}>;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly windowWidth: number;