@remotion/studio 4.0.504 → 4.0.505

package/dist/components/RenderButton.js

@@ -25,10 +25,9 @@ const MenuContent_1 = require("./NewComposition/MenuContent");
 const splitButtonContainer = {
     display: 'inline-flex',
     flexDirection: 'row',
-    alignItems: 'stretch',
-    borderRadius: 4,
-    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
+    alignItems: 'center',
+    borderRadius: 3,
+    gap: 1,
     overflow: 'hidden',
 };
 const mainButtonStyle = {
@@ -38,18 +37,14 @@ const mainButtonStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '3px 0 0 3px',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
     fontSize: 14,
     fontFamily: 'inherit',
 };
-const dividerStyle = {
-    width: 1,
-    backgroundColor: colors_1.BLACK_ALPHA_60,
-    alignSelf: 'stretch',
-};
 const dropdownTriggerStyle = {
     paddingLeft: 6,
     paddingRight: 6,
@@ -57,10 +52,12 @@ const dropdownTriggerStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '0 3px 3px 0',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
 };
 const mainButtonContent = {
     paddingLeft: 4,
@@ -75,32 +72,29 @@ const label = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactSplitButtonSegmentHeight = 24;
 const compactMainButtonStyle = {
     ...mainButtonStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: '0 4px',
     fontSize: 12,
 };
 const compactDropdownTriggerStyle = {
     ...dropdownTriggerStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: 0,
+    width: 20,
 };
 const compactMainButtonContent = {
     ...mainButtonContent,
-    paddingLeft: 2,
-    paddingRight: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
 };
 const compactLabel = {
     ...label,
@@ -123,13 +117,12 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
-    const [mainButtonHovered, setMainButtonHovered] = (0, react_1.useState)(false);
-    const [dropdownButtonHovered, setDropdownButtonHovered] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -193,7 +186,8 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: controlSize === 'compact' ? 14 : 16,
+                height: controlSize === 'compact' ? 18 : 16,
+                width: controlSize === 'compact' ? 18 : 16,
                 flexShrink: 0,
             },
         };
@@ -423,10 +417,9 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...splitButtonContainer,
-            borderColor: colors_1.BLACK_ALPHA_60,
-            borderRadius: controlSize === 'compact' ? 0 : 4,
+            borderRadius: controlSize === 'compact' ? 3 : 4,
             opacity: 1,
-            cursor: 'pointer',
+            cursor: 'default',
         };
     }, [controlSize]);
     const renderLabel = renderType === 'server-render'
@@ -434,20 +427,44 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
-    const mainIconColor = mainButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const dropdownIconColor = dropdownOpened || dropdownButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const showRenderLabel = !narrow || renderType !== 'server-render';
+    const mainHovered = hovered && !dropdownOpened;
+    const mainForegroundColor = mainHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const mainSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered: mainHovered,
+        selected: false,
+    });
+    const dropdownSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered,
+        selected: dropdownOpened,
+    });
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, onPointerEnter: () => setMainButtonHovered(true), onPointerLeave: () => setMainButtonHovered(false), id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+                    jsx_runtime_1.jsx("button", { type: "button", "aria-label": renderLabel, style: {
+                            ...(controlSize === 'compact'
+                                ? compactMainButtonStyle
+                                : mainButtonStyle),
+                            backgroundColor: mainSegmentBackground,
+                            color: mainForegroundColor,
+                        }, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainIconColor, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
-                            ? compactDropdownTriggerStyle
-                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, onPointerEnter: () => setDropdownButtonHovered(true), onPointerLeave: () => setDropdownButtonHovered(false), children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownIconColor }) })
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainForegroundColor, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: {
+                                                ...(controlSize === 'compact' ? compactLabel : label),
+                                                color: mainForegroundColor,
+                                            }, children: renderLabel })
+                                    ] })) : null] }) }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: {
+                            ...(controlSize === 'compact'
+                                ? compactDropdownTriggerStyle
+                                : dropdownTriggerStyle),
+                            backgroundColor: dropdownSegmentBackground,
+                            color: dropdownForegroundColor,
+                        }, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownForegroundColor }) })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/SelectedOutlineElement.js

@@ -73,7 +73,6 @@ const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils"
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const use_select_asset_1 = require("./use-select-asset");
-const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
     var _a, _b;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -305,7 +304,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         ] }));
 };
 exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -566,10 +565,10 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
         ] }));
 };
-const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -725,7 +724,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
         ] }));
 };
 const svgPointToClientPoint = (point, rect) => {
@@ -734,7 +733,7 @@ const svgPointToClientPoint = (point, rect) => {
         y: point.y + rect.top,
     };
 };
-const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMenuValues, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -946,7 +945,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
@@ -1179,10 +1178,10 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
+                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
+                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
                 : null] }));
 };
 exports.SelectedOutlineElement = SelectedOutlineElement;

package/dist/components/SelectedOutlineOverlay.js

@@ -41,6 +41,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const use_is_fullscreen_1 = require("../helpers/use-is-fullscreen");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
@@ -422,6 +423,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -457,7 +459,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+        if (isFullscreen ||
+            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
             !previewSelectionAvailable ||
             !editorShowOutlines) {
             return [];
@@ -756,6 +759,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         getEffectDragOverrides,
         getScaleLockState,
         editorShowOutlines,
+        isFullscreen,
         overrideIdToNodePathMappings,
         previewInteractive,
         previewSelectionAvailable,

package/dist/components/SizeSelector.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const canvas_zoom_1 = require("../icons/canvas-zoom");
 const Checkmark_1 = require("../icons/Checkmark");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
+const TimelineCombobox_1 = require("./TimelineCombobox");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -47,7 +47,6 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -116,14 +115,9 @@ const usePreviewSizeMenuItems = () => {
 exports.usePreviewSizeMenuItems = usePreviewSizeMenuItems;
 const SizeSelector = () => {
     const { items, selectedId, zoomable } = (0, exports.usePreviewSizeMenuItems)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, unhoveredIconColor: colors_1.WHITE_ALPHA_80 }) }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Timeline/Timeline.js

@@ -195,7 +195,7 @@ const TimelineContextMenuArea = ({ children }) => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
-    const contextMenuItems = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 type: 'item',
@@ -223,7 +223,7 @@ const TimelineContextMenuArea = ({ children }) => {
             },
         ];
     }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, getItems: getContextMenuItems, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
 };
 const TimelineInner = () => {
     var _a;
@@ -267,9 +267,9 @@ const TimelineInner = () => {
                     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));
-            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, isStill: isStill, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: false })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: true }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })
                                         ] })

package/dist/components/Timeline/TimelineDragHandler.js

@@ -247,6 +247,9 @@ const TimelineDragHandlerInner = () => {
             extrapolate: 'clamp',
         });
         setFrame((c) => {
+            if (c[videoConfig.id] === frame) {
+                return c;
+            }
             const newObj = { ...c, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(newObj);
             return newObj;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -120,10 +120,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (!previewConnected) {
             return [];
         }
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         const items = [];
         if (documentationLink) {
             items.push({
@@ -168,6 +171,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         documentationLink,
         onDeleteEffectFromSource,
         previewConnected,
+        selection,
     ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
@@ -322,6 +326,6 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     }, [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: 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);
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };
 exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -294,7 +294,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         return [
             {
                 type: 'item',
@@ -309,7 +312,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canShowReset, onReset]);
+    }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         if (!window.remotion_editorName ||
             previewServerState.type !== 'connected') {
@@ -322,6 +325,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         }).catch(() => undefined);
     }, [field.key, previewServerState.type, validatedLocation]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: 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 }));
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
+import type { getTimelineKeyframes } from './get-timeline-keyframes';
+type TimelineExpandedKeyframeRowProps = {
     readonly height: number;
-    readonly keyframes: {
-        frame: number;
-        value: unknown;
-    }[];
+    readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
     readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly showSeparator: boolean;
-}>;
+};
+export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<TimelineExpandedKeyframeRowProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
@@ -65,4 +66,34 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height, width: timelineWidth !== null && timelineWidth !== void 0 ? timelineWidth : undefined }, children: 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);
+const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
+    if (prevProps.height !== nextProps.height ||
+        prevProps.canEditEasing !== nextProps.canEditEasing ||
+        prevProps.showSeparator !== nextProps.showSeparator ||
+        prevProps.keyframes.length !== nextProps.keyframes.length ||
+        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
+        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
+            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
+        prevProps.nodePathInfo.supportsEffects !==
+            nextProps.nodePathInfo.supportsEffects ||
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
+        prevProps.nodePathInfo.auxiliaryKeys.length !==
+            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        return false;
+    }
+    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    if (prevVideoConfig !== nextVideoConfig &&
+        (prevVideoConfig === null ||
+            nextVideoConfig === null ||
+            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
+            prevVideoConfig.fps !== nextVideoConfig.fps ||
+            prevVideoConfig.height !== nextVideoConfig.height ||
+            prevVideoConfig.width !== nextVideoConfig.width)) {
+        return false;
+    }
+    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
+        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+};
+exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

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

@@ -3,5 +3,6 @@ import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
     readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
+    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -45,8 +45,8 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
+const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
+    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -302,7 +302,7 @@ const TimelineInOutDragHandlerInner = () => {
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
     }, []);
-    const inContextMenu = (0, react_1.useMemo)(() => {
+    const getInContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-in',
@@ -330,7 +330,7 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    const outContextMenu = (0, react_1.useMemo)(() => {
+    const getOutContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-out',
@@ -358,6 +358,6 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getInContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getOutContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
 };
 const TimelineInOutDragHandlerInnerMemo = react_1.default.memo(TimelineInOutDragHandlerInner);

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

@@ -4,10 +4,12 @@ export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) =>
 export declare const TimelineKeyframeEasingLineVisual: React.NamedExoticComponent<{
     readonly selected: boolean;
 }>;
-export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+type TimelineKeyframeEasingLineProps = {
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly rowHeight: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly segmentIndex: number;
-}>;
+};
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<TimelineKeyframeEasingLineProps>;
+export {};