@remotion/studio 4.0.495 → 4.0.497

package/dist/components/SelectedOutlineElement.js

@@ -114,12 +114,6 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         const [scaleX, scaleY] = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
         const startTranslate = (0, timeline_translate_utils_1.parseTranslate)(transformOriginDrag.translateValue);
         const svgRect = svg.getBoundingClientRect();
-        const defaultOrigin = transformOriginDrag.originDefault !== undefined
-            ? JSON.stringify(transformOriginDrag.originDefault)
-            : null;
-        const defaultTranslate = transformOriginDrag.translateDefault !== undefined
-            ? JSON.stringify(transformOriginDrag.translateDefault)
-            : null;
         let last = null;
         let currentPointerX = event.clientX;
         let currentPointerY = event.clientY;
@@ -182,11 +176,29 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 })
                 : remotion_1.Internals.makeStaticDragOverride(origin));
             setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.translateFieldKey, transformOriginDrag.translatePropStatus.status === 'keyframed'
-                ? remotion_1.Internals.makeKeyframedDragOverride({
-                    status: transformOriginDrag.translatePropStatus,
-                    frame: transformOriginDrag.sourceFrame,
-                    value: translate,
-                })
+                ? transformOriginDrag.originPropStatus.status === 'keyframed'
+                    ? remotion_1.Internals.makeKeyframedDragOverride({
+                        status: transformOriginDrag.translatePropStatus,
+                        frame: transformOriginDrag.sourceFrame,
+                        value: translate,
+                    })
+                    : {
+                        type: 'keyframed',
+                        status: {
+                            ...transformOriginDrag.translatePropStatus,
+                            keyframes: transformOriginDrag.translatePropStatus.keyframes.map((keyframe) => {
+                                const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
+                                return {
+                                    ...keyframe,
+                                    value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] +
+                                        nextTranslateX -
+                                        startTranslate[0], keyframeTranslate[1] +
+                                        nextTranslateY -
+                                        startTranslate[1]),
+                                };
+                            }),
+                        },
+                    }
                 : remotion_1.Internals.makeStaticDragOverride(translate));
         };
         updateFromPointerPosition();
@@ -220,65 +232,27 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 clearDragOverrides(transformOriginDrag.nodePath);
                 return;
             }
-            const originChanged = last.origin !== transformOriginDrag.originValue;
-            const translateChanged = last.translate !== transformOriginDrag.translateValue;
-            if (!originChanged && !translateChanged) {
+            const { staticChanges, keyframedChanges } = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginDragChanges)({
+                target: transformOriginDrag,
+                startTranslate,
+                origin: last.origin,
+                translate: last.translate,
+            });
+            if (staticChanges.length === 0 && keyframedChanges.length === 0) {
                 clearDragOverrides(transformOriginDrag.nodePath);
                 return;
             }
-            const shouldSaveAsKeyframes = transformOriginDrag.originPropStatus.status === 'keyframed' ||
-                transformOriginDrag.translatePropStatus.status === 'keyframed';
-            const promise = shouldSaveAsKeyframes
+            const promise = staticChanges.length === 0
                 ? (0, call_add_keyframe_1.callAddKeyframes)({
-                    sequenceKeyframes: [
-                        originChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.transformOriginFieldKey,
-                                sourceFrame: transformOriginDrag.sourceFrame,
-                                value: last.origin,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                        translateChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.translateFieldKey,
-                                sourceFrame: transformOriginDrag.sourceFrame,
-                                value: last.translate,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                    ].filter(no_react_1.NoReactInternals.truthy),
+                    sequenceKeyframes: keyframedChanges,
                     effectKeyframes: [],
                     setPropStatuses,
                     clientId: transformOriginDrag.clientId,
                 })
                 : (0, save_sequence_prop_1.saveSequenceProps)({
-                    changes: [
-                        originChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.transformOriginFieldKey,
-                                value: last.origin,
-                                defaultValue: defaultOrigin,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                        translateChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.translateFieldKey,
-                                value: last.translate,
-                                defaultValue: defaultTranslate,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                    ].filter(no_react_1.NoReactInternals.truthy),
+                    changes: staticChanges,
+                    addedKeyframes: keyframedChanges,
+                    movedKeyframes: null,
                     setPropStatuses,
                     clientId: transformOriginDrag.clientId,
                     undoLabel: 'Move transform origin',
@@ -478,6 +452,8 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: drag.clientId,
                         undoLabel: changes.length > 1
@@ -488,16 +464,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                             : 'Move sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: drag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
@@ -692,6 +664,8 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: scaleDrag.clientId,
                         undoLabel: changes.length > 1
@@ -702,16 +676,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                             : 'Scale sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: scaleDrag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
@@ -911,6 +881,8 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: rotationDrag.clientId,
                         undoLabel: changes.length > 1
@@ -921,16 +893,12 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                             : 'Rotate sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: rotationDrag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -74,6 +74,7 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragChanges", { enumerabl
 Object.defineProperty(exports, "getSelectedOutlineScaleDragStates", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragStates; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
+Object.defineProperty(exports, "getSelectedOutlineTransformOriginDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
 Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
@@ -707,6 +708,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             staticChanges.length > 0
                 ? (0, save_sequence_prop_1.saveSequenceProps)({
                     changes: staticChanges,
+                    addedKeyframes: null,
+                    movedKeyframes: null,
                     setPropStatuses,
                     clientId: session.clientId,
                     undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
@@ -715,16 +718,12 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                         : 'Move sequence back',
                 })
                 : Promise.resolve(),
-            ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName: change.fileName,
-                nodePath: change.nodePath,
-                fieldKey: change.fieldKey,
-                sourceFrame: change.sourceFrame,
-                value: change.value,
-                schema: change.schema,
+            (0, call_add_keyframe_1.callAddKeyframes)({
+                sequenceKeyframes: keyframedChanges,
+                effectKeyframes: [],
                 setPropStatuses,
-                clientId: change.clientId,
-            })),
+                clientId: session.clientId,
+            }),
         ])
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);

package/dist/components/SizeSelector.js

@@ -46,7 +46,7 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 80 };
+const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -72,7 +72,7 @@ const SizeSelector = () => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
         };
     }, []);
     const zoomable = (0, react_1.useMemo)(() => {
@@ -114,6 +114,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    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: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Timeline/Timeline.js

@@ -56,6 +56,7 @@ 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_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
@@ -72,6 +73,7 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_timeline_asset_drop_1 = require("./use-timeline-asset-drop");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -83,6 +85,7 @@ const container = {
 const noop = () => undefined;
 const TimelineContextMenuArea = ({ children }) => {
     var _a, _b;
+    const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
@@ -128,6 +131,7 @@ const TimelineContextMenuArea = ({ children }) => {
             const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
                 compositionFile,
                 compositionId: currentCompositionId,
+                from: null,
                 element: {
                     type: 'solid',
                     width: videoConfig.width,
@@ -151,7 +155,8 @@ const TimelineContextMenuArea = ({ children }) => {
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
-            compositionFile === null) {
+            compositionFile === null ||
+            videoConfig === null) {
             return;
         }
         const files = await (0, import_assets_1.pickFilesToImport)();
@@ -162,17 +167,19 @@ const TimelineContextMenuArea = ({ children }) => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: videoConfig.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: null,
                 dropPosition: null,
+                from: null,
                 svgImportMode: 'image',
             });
         }
         finally {
             setIsAddingAsset(false);
         }
-    }, [canInsertAsset, compositionFile, currentCompositionId]);
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
     const contextMenuItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -201,7 +208,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: children }));
+    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 }) }));
 };
 const TimelineInner = () => {
     var _a;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineAssetDropIndicator: React.FC;

package/dist/components/Timeline/TimelineAssetDropIndicator.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetDropIndicator = 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 get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const indicator = {
+    backgroundColor: colors_1.RULER_COLOR,
+    bottom: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    width: 1,
+    zIndex: 10,
+};
+const TimelineAssetDropIndicator = () => {
+    var _a;
+    var _b;
+    const frame = (0, react_1.useContext)(timeline_asset_drop_context_1.TimelineAssetDropFrameContext);
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    if (frame === null || timelineWidth === null || videoConfig === null) {
+        return null;
+    }
+    const width = (_b = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : timelineWidth;
+    const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
+    return (jsx_runtime_1.jsx("div", { "data-timeline-asset-drop-indicator": "true", style: {
+            ...indicator,
+            transform: `translateX(${left - 0.5}px)`,
+        } }));
+};
+exports.TimelineAssetDropIndicator = TimelineAssetDropIndicator;

package/dist/components/Timeline/TimelineAssetField.js

@@ -109,7 +109,7 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             },
         ];
     }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: current, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: current, selectedId: current, values: items, style: comboboxStyle }));
 };
 const TimelineAssetField = (props) => {
     var _a;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -710,13 +710,7 @@ const TimelineClipboardKeybindings = () => {
                         (0, NotificationCenter_1.showNotification)('Cannot paste onto an easing that cannot be updated', 3000);
                         return;
                     }
-                    return updatePromise
-                        .then(() => {
-                        (0, NotificationCenter_1.showNotification)(easingSelections.length === 1
-                            ? 'Pasted easing'
-                            : 'Pasted easing to selected segments', 2000);
-                    })
-                        .catch((err) => {
+                    return updatePromise.catch((err) => {
                         (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
                     });
                 }

package/dist/components/Timeline/TimelineEnumField.js

@@ -37,6 +37,6 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             disabled: false,
         }));
     }, [variantKeys, onSelect]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -19,13 +19,13 @@ const fieldNameBase = {
     minWidth: 0,
 };
 const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
-    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, highlightSelectedLabel } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
         ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
-        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected && highlightSelectedLabel, true),
         ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [basePadding, rowDepth, selected, stacked]);
+    }), [basePadding, highlightSelectedLabel, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -18,6 +18,9 @@ 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 NAV_BUTTON_SIZE = 14;
+const INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
+const INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -25,6 +28,12 @@ const controlsContainerStyle = {
     gap: 1,
     marginRight: 4,
 };
+const inspectorControlsContainerStyle = {
+    ...controlsContainerStyle,
+    paddingLeft: NAV_BUTTON_SIZE -
+        INSPECTOR_NAV_BUTTON_WIDTH -
+        INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
+};
 const navButtonStyle = {
     alignItems: 'center',
     background: 'none',
@@ -33,13 +42,20 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    height: 14,
+    height: NAV_BUTTON_SIZE,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 14,
+    width: NAV_BUTTON_SIZE,
+};
+const inspectorNavButtonStyle = {
+    width: INSPECTOR_NAV_BUTTON_WIDTH,
+};
+const inspectorPreviousNavButtonStyle = {
+    ...inspectorNavButtonStyle,
+    marginRight: INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
 };
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -48,7 +64,7 @@ const diamondButtonStyle = {
     ...navButtonStyle,
     background: 'none',
 };
-const svgStyle = { display: 'block' };
+const svgStyle = { display: 'block', flexShrink: 0 };
 const isKeyframeControlSelection = (selection) => {
     return (selection.type === 'sequence-prop' ||
         selection.type === 'sequence-effect-prop');
@@ -454,23 +470,27 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const nextDisabled = nextDisplayFrame === null;
     const previousStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorPreviousNavButtonStyle : null),
         cursor: previousDisabled ? 'default' : 'pointer',
         opacity: previousDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [previousDisabled, showNavigationButtons]);
+    }), [mode, previousDisabled, showNavigationButtons]);
     const nextStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorNavButtonStyle : null),
         cursor: nextDisabled ? 'default' : 'pointer',
         opacity: nextDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [nextDisabled, showNavigationButtons]);
+    }), [mode, nextDisabled, showNavigationButtons]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
     }), [canToggleKeyframe, clientId]);
     const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
-    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+    return (jsx_runtime_1.jsxs("div", { style: mode === 'inspector'
+            ? inspectorControlsContainerStyle
+            : controlsContainerStyle, children: [
             jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };

package/dist/components/Timeline/TimelineRowChrome.js

@@ -26,7 +26,7 @@ const keyframeControlsColumnBaseStyle = {
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);
-    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
@@ -64,7 +64,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         ...rowBase,
         ...style,
         backgroundColor: outerHeight === null ? highlightBackground : undefined,
-    }), [style, outerHeight, highlightBackground]);
+        borderRadius: rowBorderRadius,
+        margin: `0 ${rowHorizontalMargin}px`,
+    }), [
+        style,
+        outerHeight,
+        highlightBackground,
+        rowBorderRadius,
+        rowHorizontalMargin,
+    ]);
     const outerStyle = (0, react_1.useMemo)(() => {
         if (outerHeight === null) {
             return undefined;

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

@@ -1,6 +1,9 @@
 type TimelineRowLayout = {
     readonly basePadding: number;
+    readonly highlightSelectedLabel: boolean;
     readonly keyframeControlsPadding: number;
+    readonly rowBorderRadius: number;
+    readonly rowHorizontalMargin: number;
 };
 export declare const INSPECTOR_TIMELINE_ROW_LAYOUT: TimelineRowLayout;
 export declare const TimelineRowLayoutContext: import("react").Context<TimelineRowLayout>;

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -5,9 +5,15 @@ const react_1 = require("react");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
     basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
+    highlightSelectedLabel: false,
     keyframeControlsPadding: 0,
+    rowBorderRadius: 4,
+    rowHorizontalMargin: 4,
 };
 exports.TimelineRowLayoutContext = (0, react_1.createContext)({
     basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    highlightSelectedLabel: true,
     keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    rowBorderRadius: 0,
+    rowHorizontalMargin: 0,
 });

package/dist/components/Timeline/TimelineScrollable.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
+const TimelineAssetDropIndicator_1 = require("./TimelineAssetDropIndicator");
 const TimelineSelection_1 = require("./TimelineSelection");
 const outer = {
     width: '100%',
@@ -31,8 +32,8 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
-            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, "data-timeline-scrollable": "true", style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
+            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
                     ...marqueeStyle,
                     height: marqueeRect.bottom - marqueeRect.top,
                     left: marqueeRect.left,