@remotion/studio 4.0.482 → 4.0.484

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,
@@ -69,8 +80,8 @@ const inlineContainer = {
 const segmentedControlWrapper = {
     display: 'flex',
     justifyContent: 'flex-start',
+    marginTop: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
-    marginBottom: 10,
 };
 const presetButtonsWrapper = {
     display: 'flex',
@@ -80,6 +91,10 @@ const presetButtonsWrapper = {
     marginBottom: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+const inspectorPresetButtonsWrapper = {
+    ...presetButtonsWrapper,
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+};
 const presetButtonBase = {
     alignItems: 'center',
     backgroundColor: colors_1.INPUT_BACKGROUND,
@@ -186,7 +201,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 +229,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 +245,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 +317,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 +325,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 +399,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 +558,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 +573,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 +682,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,
@@ -687,10 +725,11 @@ const EasingEditor = ({ state, renderHeader }) => {
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
         padding: '0 12px 12px',
     }), []);
-    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? (renderHeader(modeItems)) : (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" }) })), jsx_runtime_1.jsx("div", { style: presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
+    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
@@ -704,15 +743,19 @@ const EasingEditor = ({ state, renderHeader }) => {
                 ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: "white" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Damping" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.damping, status: "ok", onValueChange: (value) => setSpringNumber('damping', value, false), onValueChangeEnd: (value) => setSpringNumber('damping', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.damping.min, max: SPRING_LIMITS.damping.max, step: SPRING_LIMITS.damping.step, formatter: springFormatters.damping, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.damping, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     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/TimelineDeleteKeybindings.js

@@ -24,6 +24,9 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -58,7 +61,13 @@ const TimelineDeleteKeybindings = () => {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)(selectedItems);
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                            selections: selectedItems,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                            propStatuses,
+                            timelinePosition: timelinePositionRef.current,
+                        });
                         if (nextSelection.length === 0) {
                             clearSelection();
                         }
@@ -154,6 +163,7 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
+        timelinePositionRef,
     ]);
     return null;
 };

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/TimelineEffectPropItem.js

@@ -10,6 +10,7 @@ const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 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_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -22,6 +23,7 @@ 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 isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -219,6 +221,9 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     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 style = (0, react_1.useMemo)(() => {
@@ -359,7 +364,83 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         previewServerState,
         propStatus,
     ]);
-    const row = (jsx_runtime_1.jsxs(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, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    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.callAddEffectKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema: field.effectSchema,
+                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) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        sourceFrame,
+        validatedLocation.source,
+    ]);
+    const row = (jsx_runtime_1.jsxs(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(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) })
         ] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));

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/TimelineKeyframeControls.js

@@ -11,11 +11,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -262,7 +264,7 @@ const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
@@ -270,7 +272,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -385,37 +387,65 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             return;
         }
         if (hasKeyframeAtCurrentFrame) {
-            const deleteChanges = keyframeToggleTargets.flatMap((target) => {
+            const deleteTargets = keyframeToggleTargets.flatMap((target) => {
                 const change = getDeleteChange(target);
-                return change === null ? [] : [change];
+                return change === null ? [] : [{ target, change }];
             });
+            const singleDeleteTarget = deleteTargets[0];
+            const easingSelection = deleteTargets.length === 1 &&
+                singleDeleteTarget &&
+                isKeyframedStatus(singleDeleteTarget.target.propStatus) &&
+                (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(singleDeleteTarget.target.propStatus.interpolationFunction)
+                ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+                    deletedSourceFrames: [singleDeleteTarget.target.sourceFrame],
+                    keyframeDisplayOffset: singleDeleteTarget.target.keyframeDisplayOffset,
+                    nodePathInfo: singleDeleteTarget.target.nodePathInfo,
+                    propStatus: singleDeleteTarget.target.propStatus,
+                    timelinePosition,
+                })
+                : null;
+            const deleteChanges = deleteTargets.map(({ change }) => change);
             await (0, call_delete_keyframe_1.callDeleteKeyframes)({
                 sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
                 effectKeyframes: deleteChanges.filter((change) => hasEffectIndex(change)),
                 setPropStatuses,
                 clientId,
             });
+            if (mode === 'timeline' && easingSelection !== null) {
+                selectItems([easingSelection], { reveal: true });
+            }
             return;
         }
         const addChanges = keyframeToggleTargets.flatMap((target) => {
             const change = getAddChange(target);
-            return change === null ? [] : [change];
+            return change === null ? [] : [{ target, change }];
         });
         if (addChanges.length === 0) {
             return;
         }
+        const addChangeValues = addChanges.map(({ change }) => change);
         await (0, call_add_keyframe_1.callAddKeyframes)({
-            sequenceKeyframes: addChanges.filter((change) => !hasEffectIndex(change)),
-            effectKeyframes: addChanges.filter((change) => hasEffectIndex(change)),
+            sequenceKeyframes: addChangeValues.filter((change) => !hasEffectIndex(change)),
+            effectKeyframes: addChangeValues.filter((change) => hasEffectIndex(change)),
             setPropStatuses,
             clientId,
         });
+        if (mode === 'timeline') {
+            selectItems(addChanges.map(({ target }) => ({
+                type: 'keyframe',
+                nodePathInfo: target.nodePathInfo,
+                frame: target.sourceFrame + target.keyframeDisplayOffset,
+            })), { reveal: true });
+        }
     }, [
         canToggleKeyframe,
         clientId,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
+        mode,
+        selectItems,
         setPropStatuses,
+        timelinePosition,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
+export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+    readonly selected: boolean;
+}>;
 export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
     readonly fromFrame: number;
     readonly toFrame: number;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeEasingLine = void 0;
+exports.TimelineKeyframeEasingLine = exports.TimelineKeyframeEasingLineVisual = exports.getTimelineKeyframeEasingLineStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
@@ -67,6 +67,16 @@ const easingLine = {
     top: '50%',
     transform: 'translateY(-50%)',
 };
+const getTimelineKeyframeEasingLineStyle = (selected) => ({
+    ...easingLine,
+    outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+});
+exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
+const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+    const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
+    return jsx_runtime_1.jsx("div", { style: lineStyle });
+};
+exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
     const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -176,10 +186,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         toFrame,
         videoConfig.durationInFrames,
     ]);
-    const lineStyle = (0, react_1.useMemo)(() => ({
-        ...easingLine,
-        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
-    }), [selected]);
     const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
         onSelect,
         selectable,
@@ -190,7 +196,7 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
         ] }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

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 {};