@remotion/studio 4.0.482 → 4.0.484

package/dist/components/Canvas.js

@@ -23,6 +23,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -57,6 +58,11 @@ const isComponentDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
 };
+const isElementDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
 const isSfxDragEvent = (event) => {
     var _a;
     var _b;
@@ -66,6 +72,7 @@ const isRemoteAssetDragEvent = (event) => {
     return (!isFileDragEvent(event) &&
         !isAssetDragEvent(event) &&
         !isComponentDragEvent(event) &&
+        !isElementDragEvent(event) &&
         !isSfxDragEvent(event) &&
         (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
 };
@@ -560,6 +567,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -579,6 +587,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -636,6 +645,16 @@ const Canvas = ({ canvasContent, size }) => {
                 });
             }
             else {
+                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
+                if (elementDragData !== null) {
+                    await (0, import_assets_1.insertElement)({
+                        element: elementDragData.element,
+                        compositionFile,
+                        compositionId: currentCompositionId,
+                        dropPosition,
+                    });
+                    return;
+                }
                 const componentDragData = getComponentDragData(event);
                 if (componentDragData !== null) {
                     await (0, import_assets_1.insertComponent)({

package/dist/components/ColorPicker/ColorPicker.js

@@ -8,6 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
 const z_index_1 = require("../../state/z-index");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
@@ -36,6 +39,23 @@ const fillStyle = {
     inset: 0,
     display: 'block',
 };
+const controlStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 3,
+    flex: '0 0 auto',
+};
+const eyedropperButtonBaseStyle = {
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: '0 0 auto',
+};
 const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
     const [opened, setOpened] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
@@ -65,6 +85,24 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
         };
     }, [borderRadius, customStyle, disabled, height, width]);
+    const eyedropperButtonSize = Math.max(15, Math.min(28, height));
+    const eyedropperIconSize = Math.max(12, Math.min(18, eyedropperButtonSize - 2));
+    const eyedropperButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...eyedropperButtonBaseStyle,
+            width: eyedropperButtonSize,
+            height: eyedropperButtonSize,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+        };
+    }, [disabled, eyedropperButtonSize]);
+    const eyedropperIconStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: eyedropperIconSize,
+            height: eyedropperIconSize,
+            pointerEvents: 'none',
+        };
+    }, [eyedropperIconSize]);
     // Toggle on pointerdown (matches Combobox) so the state flips before the
     // HigherZIndex outside-click detection runs on pointerup. If we toggled in
     // onClick, the popup would close in pointerup and immediately re-open in
@@ -98,6 +136,28 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             return !prev;
         });
     }, [disabled, refresh]);
+    const onPickWithEyeDropper = (0, react_1.useCallback)(() => {
+        if (disabled) {
+            return;
+        }
+        const Ctor = window.EyeDropper;
+        if (!Ctor) {
+            return;
+        }
+        setOpened(false);
+        const dropper = new Ctor();
+        dropper
+            .open()
+            .then((result) => {
+            onChangeComplete((0, color_conversion_1.formatRgba)((0, ColorPickerPopup_1.parseEyeDropperColor)(result.sRGBHex)));
+        })
+            .catch(() => {
+            // Aborted; ignore.
+        });
+    }, [disabled, onChangeComplete]);
+    const onEyeDropperPointerDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
@@ -139,10 +199,12 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
         window.addEventListener('blur', onWindowBlur);
         return () => window.removeEventListener('blur', onWindowBlur);
     }, [opened]);
+    const showEyeDropper = (0, ColorPickerPopup_1.hasEyeDropper)();
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
-                    .filter(Boolean)
-                    .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), portalStyle
+            jsx_runtime_1.jsxs("span", { style: controlStyle, children: [
+                    jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
+                            .filter(Boolean)
+                            .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: "currentColor" }) })) : null] }), 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: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/ColorPicker/ColorPickerPopup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const POPUP_WIDTH = 240;
+export declare const hasEyeDropper: () => boolean;
 export declare const parseEyeDropperColor: (pickedColor: string) => {
     r: number;
     g: number;

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.POPUP_WIDTH = void 0;
+exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.hasEyeDropper = exports.POPUP_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
@@ -100,6 +100,7 @@ const eyedropperButtonStyle = {
     flex: '0 0 auto',
 };
 const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+exports.hasEyeDropper = hasEyeDropper;
 const parseEyeDropperColor = (pickedColor) => {
     const parsed = (0, color_conversion_1.parseAnyColor)(pickedColor);
     return {
@@ -268,7 +269,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             backgroundColor: formatted,
         };
     }, [formatted]);
-    const showEyeDropper = hasEyeDropper();
+    const showEyeDropper = (0, exports.hasEyeDropper)();
     return (jsx_runtime_1.jsxs("div", { style: popupShellStyle, children: [
             jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: "currentColor" }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
                             jsx_runtime_1.jsx(HueSlider_1.HueSlider, { hue: hsva.h, onChange: onHueChange, onChangeComplete: onHueComplete }), jsx_runtime_1.jsx(AlphaSlider_1.AlphaSlider, { hue: hsva.h, saturation: hsva.s, value: hsva.v, alpha: hsva.a, onChange: onAlphaChange, onChangeComplete: onAlphaComplete })

package/dist/components/InspectorPanel/EasingInspector.js

@@ -4,38 +4,212 @@ exports.EasingInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const plus_1 = require("../../icons/plus");
+const render_frame_1 = require("../../state/render-frame");
 const is_menu_item_1 = require("../Menu/is-menu-item");
-const SegmentedControl_1 = require("../SegmentedControl");
+const call_add_keyframe_1 = require("../Timeline/call-add-keyframe");
 const EasingEditorModal_1 = require("../Timeline/EasingEditorModal");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const update_selected_easing_1 = require("../Timeline/update-selected-easing");
 const common_1 = require("./common");
+const easing_inspector_selection_1 = require("./easing-inspector-selection");
+const KeyframeEasingNavigator_1 = require("./KeyframeEasingNavigator");
+const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
+const use_track_for_selection_1 = require("./use-track-for-selection");
+const addKeyframeIcon = {
+    display: 'block',
+    height: 13,
+    width: 12,
+};
 const EasingInspector = ({ selection }) => {
+    var _a, _b;
+    const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const initialEasing = (0, react_1.useMemo)(() => (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const parentSelection = (0, react_1.useMemo)(() => (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(selection.nodePathInfo), [selection.nodePathInfo]);
+    const easingUpdate = (0, react_1.useMemo)(() => (0, update_selected_easing_1.getSelectedEasingUpdate)({
         selection,
         sequences,
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         propStatuses,
     }), [overrideIdToNodePathMappings, propStatuses, selection, sequences]);
+    const initialEasing = (_a = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _a !== void 0 ? _a : null;
+    const easingDetails = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (easingUpdate === null || track === null) {
+            return null;
+        }
+        if (easingUpdate.type === 'sequence') {
+            const sequenceDragOverrideValue = ((_a = getDragOverrides(easingUpdate.nodePath)) !== null && _a !== void 0 ? _a : {})[easingUpdate.fieldKey];
+            if (!track.sequence.controls) {
+                return {
+                    defaultValue: undefined,
+                    dragOverrideValue: sequenceDragOverrideValue,
+                    fieldLabel: easingUpdate.fieldKey,
+                };
+            }
+            const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
+                schema: track.sequence.controls.schema,
+                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                getDragOverrides,
+                propStatuses,
+                nodePath: easingUpdate.nodePath,
+            });
+            const sequenceField = (_b = sequenceFields === null || sequenceFields === void 0 ? void 0 : sequenceFields.find((candidate) => candidate.key === easingUpdate.fieldKey)) !== null && _b !== void 0 ? _b : null;
+            return {
+                defaultValue: sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.fieldSchema.default,
+                dragOverrideValue: sequenceDragOverrideValue,
+                fieldLabel: (_d = (_c = sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.description) !== null && _c !== void 0 ? _c : sequenceField === null || sequenceField === void 0 ? void 0 : sequenceField.key) !== null && _d !== void 0 ? _d : easingUpdate.fieldKey,
+            };
+        }
+        const effectDragOverrideValue = getEffectDragOverrides(easingUpdate.nodePath, easingUpdate.effectIndex)[easingUpdate.fieldKey];
+        const effect = track.sequence.effects[easingUpdate.effectIndex];
+        if (!effect) {
+            return {
+                defaultValue: undefined,
+                dragOverrideValue: effectDragOverrideValue,
+                fieldLabel: easingUpdate.fieldKey,
+            };
+        }
+        const effectFields = (0, timeline_layout_1.getEffectFieldsToShow)({
+            effect,
+            effectIndex: easingUpdate.effectIndex,
+            nodePath: easingUpdate.nodePath,
+            propStatuses,
+            getEffectDragOverrides,
+        });
+        const effectField = (_e = effectFields.find((candidate) => candidate.key === easingUpdate.fieldKey)) !== null && _e !== void 0 ? _e : null;
+        return {
+            defaultValue: effectField === null || effectField === void 0 ? void 0 : effectField.fieldSchema.default,
+            dragOverrideValue: effectDragOverrideValue,
+            fieldLabel: (_g = (_f = effectField === null || effectField === void 0 ? void 0 : effectField.description) !== null && _f !== void 0 ? _f : effectField === null || effectField === void 0 ? void 0 : effectField.key) !== null && _g !== void 0 ? _g : easingUpdate.fieldKey,
+        };
+    }, [
+        easingUpdate,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses,
+        track,
+    ]);
+    const fieldLabel = (_b = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _b !== void 0 ? _b : null;
+    const currentEasingSelection = (0, react_1.useMemo)(() => {
+        if (easingUpdate === null || track === null) {
+            return null;
+        }
+        return (0, easing_inspector_selection_1.getEasingSelectionFromCurrentKeyframes)({
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            nodePathInfo: selection.nodePathInfo,
+            propStatus: easingUpdate.propStatus,
+            segmentIndex: easingUpdate.segmentIndex,
+        });
+    }, [easingUpdate, selection.nodePathInfo, track]);
     const state = (0, react_1.useMemo)(() => {
-        if (initialEasing === null) {
+        if (initialEasing === null || currentEasingSelection === null) {
             return null;
         }
         return {
             initialEasing,
-            selections: [selection],
+            selections: [currentEasingSelection],
+        };
+    }, [currentEasingSelection, initialEasing]);
+    const onSelectParent = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (parentSelection === null) {
+            return;
+        }
+        selectItems([parentSelection], { reveal: true });
+    }, [parentSelection, selectItems]);
+    const canAddKeyframeAtPlayhead = currentEasingSelection !== null &&
+        timelinePosition > currentEasingSelection.fromFrame &&
+        timelinePosition < currentEasingSelection.toFrame;
+    const addKeyframeTime = (0, render_frame_1.renderFrame)(timelinePosition, videoConfig.fps);
+    const addKeyframeDisabled = previewServerState.type !== 'connected';
+    const onAddKeyframeAtPlayhead = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (!canAddKeyframeAtPlayhead ||
+            easingUpdate === null ||
+            easingDetails === null ||
+            track === null ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const sourceFrame = timelinePosition - track.keyframeDisplayOffset;
+        const value = remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus: easingUpdate.propStatus,
+            dragOverrideValue: easingDetails.dragOverrideValue,
+            defaultValue: easingDetails.defaultValue,
+            frame: sourceFrame,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo: selection.nodePathInfo,
+            frame: timelinePosition,
         };
-    }, [initialEasing, selection]);
-    const renderHeader = (0, react_1.useCallback)((modeItems) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
-                    jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Easing" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" })
-                ] }) }) })), []);
-    if (state === null) {
+        if (easingUpdate.type === 'sequence') {
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: easingUpdate.fileName,
+                nodePath: easingUpdate.nodePath,
+                fieldKey: easingUpdate.fieldKey,
+                sourceFrame,
+                value,
+                schema: easingUpdate.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        }
+        else {
+            (0, call_add_keyframe_1.callAddEffectKeyframe)({
+                fileName: easingUpdate.fileName,
+                nodePath: easingUpdate.nodePath,
+                effectIndex: easingUpdate.effectIndex,
+                fieldKey: easingUpdate.fieldKey,
+                sourceFrame,
+                value,
+                schema: easingUpdate.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        }
+        selectItems([keyframeSelection], { reveal: true });
+    }, [
+        canAddKeyframeAtPlayhead,
+        easingDetails,
+        easingUpdate,
+        previewServerState,
+        selectItems,
+        selection.nodePathInfo,
+        setPropStatuses,
+        timelinePosition,
+        track,
+    ]);
+    const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorBackHeaderWithDivider, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, children: fieldLabel }) }), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
+                    ...keyframe,
+                    frame: keyframe.frame + track.keyframeDisplayOffset,
+                })), nodePathInfo: selection.nodePathInfo }))] })), [
+        currentEasingSelection,
+        easingUpdate,
+        fieldLabel,
+        onSelectParent,
+        parentSelection,
+        selection,
+        track,
+    ]);
+    if (state === null || track === null || currentEasingSelection === null) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
-    return (jsx_runtime_1.jsx("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(selection)) }));
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeaderWithDivider, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx("div", { style: styles_1.detailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelection } from '../Timeline/TimelineSelection';
+import { type NavigatorKeyframe } from './keyframe-easing-navigator-items';
+export declare const KeyframeEasingNavigator: React.FC<{
+    readonly currentSelection: Extract<TimelineSelection, {
+        type: 'keyframe';
+    } | {
+        type: 'easing';
+    }>;
+    readonly includeEasings: boolean;
+    readonly keyframes: readonly NavigatorKeyframe[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+}>;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeEasingNavigator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const InlineAction_1 = require("../InlineAction");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const TimelineKeyframeDiamondIcon_1 = require("../Timeline/TimelineKeyframeDiamondIcon");
+const TimelineKeyframeEasingLine_1 = require("../Timeline/TimelineKeyframeEasingLine");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const keyframe_easing_navigator_items_1 = require("./keyframe-easing-navigator-items");
+const navigatorContainer = {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    gap: 8,
+    justifyContent: 'space-between',
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`,
+    width: '100%',
+};
+const itemStrip = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 0,
+    height: 24,
+    justifyContent: 'center',
+    minWidth: 0,
+};
+const itemButton = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    display: 'flex',
+    height: 24,
+    justifyContent: 'center',
+    padding: 0,
+};
+const diamondSize = 12;
+const easingLineDiamondOverlap = diamondSize / 2;
+const emptyItem = {
+    height: 24,
+    width: diamondSize,
+};
+const easingItem = {
+    height: 12,
+    position: 'relative',
+    width: 38,
+};
+const getEasingLineUnderlay = ({ extendLeft, extendRight, }) => {
+    return {
+        bottom: 0,
+        left: extendLeft ? -easingLineDiamondOverlap : 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: extendRight ? -easingLineDiamondOverlap : 0,
+        top: 0,
+    };
+};
+const chevronIcon = {
+    display: 'block',
+    height: 12,
+    width: 8,
+};
+const disabledChevronColor = 'rgba(255, 255, 255, 0.25)';
+const NavigationChevron = ({ color, direction }) => {
+    const path = direction === 'left' ? 'M6 1L2 6L6 11' : 'M2 1L6 6L2 11';
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: chevronIcon, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
+};
+const TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item, onSelect, selected }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        if (item === null) {
+            return;
+        }
+        onSelect(item);
+    }, [item, onSelect]);
+    if (item === null) {
+        return jsx_runtime_1.jsx("div", { style: emptyItem });
+    }
+    const buttonStyle = {
+        ...itemButton,
+        position: 'relative',
+        width: item.type === 'easing' ? 38 : diamondSize,
+        zIndex: item.type === 'keyframe' ? 1 : 0,
+    };
+    const lineUnderlayStyle = getEasingLineUnderlay({
+        extendLeft: extendLineLeft,
+        extendRight: extendLineRight,
+    });
+    return (jsx_runtime_1.jsx("button", { type: "button", style: buttonStyle, onClick: onClick, title: item.type === 'keyframe'
+            ? `Keyframe at frame ${item.selection.frame}`
+            : `Easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, "aria-label": item.type === 'keyframe'
+            ? `Select keyframe at frame ${item.selection.frame}`
+            : `Select easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, children: item.type === 'keyframe' ? (jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: selected, size: 12 })) : (jsx_runtime_1.jsx("div", { style: easingItem, children: jsx_runtime_1.jsx("div", { style: lineUnderlayStyle, children: jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLineVisual, { selected: selected }) }) })) }));
+};
+const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
+    const { isSelected, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const items = (0, react_1.useMemo)(() => (0, keyframe_easing_navigator_items_1.getKeyframeEasingNavigatorItems)({
+        includeEasings,
+        keyframes,
+        nodePathInfo,
+    }), [includeEasings, keyframes, nodePathInfo]);
+    const currentKey = (0, TimelineSelection_1.getTimelineSelectionKey)(currentSelection);
+    const currentIndex = items.findIndex((item) => (0, TimelineSelection_1.getTimelineSelectionKey)(item.selection) === currentKey);
+    const previousItem = currentIndex > 0 ? items[currentIndex - 1] : null;
+    const currentItem = currentIndex === -1 ? null : items[currentIndex];
+    const nextItem = currentIndex === -1 || currentIndex >= items.length - 1
+        ? null
+        : items[currentIndex + 1];
+    const selectItem = (0, react_1.useCallback)((item) => {
+        selectItems([item.selection], { reveal: true });
+    }, [selectItems]);
+    const seekToItem = (0, react_1.useCallback)((item) => {
+        const frame = (0, keyframe_easing_navigator_items_1.getNavigatorItemPlayheadFrame)(item);
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const selectPrevious = (0, react_1.useCallback)(() => {
+        if (previousItem === null) {
+            return;
+        }
+        seekToItem(previousItem);
+        selectItem(previousItem);
+    }, [previousItem, seekToItem, selectItem]);
+    const selectNext = (0, react_1.useCallback)(() => {
+        if (nextItem === null) {
+            return;
+        }
+        seekToItem(nextItem);
+        selectItem(nextItem);
+    }, [nextItem, seekToItem, selectItem]);
+    if (currentItem === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+                    jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+};
+exports.KeyframeEasingNavigator = KeyframeEasingNavigator;

package/dist/components/InspectorPanel/KeyframeInspector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TimelineSelection } from '../Timeline/TimelineSelection';
+import { type TimelineSelection } from '../Timeline/TimelineSelection';
 export declare const KeyframeInspector: React.FC<{
     readonly selection: Extract<TimelineSelection, {
         type: 'keyframe';