@remotion/studio 4.0.496 → 4.0.497

package/dist/components/NewComposition/InputDragger.d.ts

@@ -16,6 +16,11 @@ export declare const isInputDraggerValueInRange: ({ max, min, value, }: {
     readonly min: string | number | undefined;
     readonly value: number;
 }) => boolean;
+export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDistance, }: {
+    readonly dragSensitivity: number;
+    readonly step: number;
+    readonly xDistance: number;
+}) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
@@ -26,4 +31,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
+    readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
+exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -92,7 +92,11 @@ const isInputDraggerValueInRange = ({ max, min, value, }) => {
         (!Number.isFinite(numericMax) || value <= numericMax));
 };
 exports.isInputDraggerValueInRange = isInputDraggerValueInRange;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, ...props }, ref) => {
+const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
+    return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
+};
+exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -195,7 +199,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
                 target.blur();
             }
-            const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
+            const diff = (0, exports.deriveInputDraggerValueDiff)({
+                dragSensitivity,
+                step,
+                xDistance,
+            });
             const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
             const nextValue = snapToStep
                 ? roundToStep(newValue, step)
@@ -229,6 +237,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         onValueChangeEnd,
         snapToStep,
         dragDecimalPlaces,
+        dragSensitivity,
     ]);
     (0, react_1.useEffect)(() => {
         var _a;

package/dist/components/NewComposition/NewComposition.js

@@ -125,7 +125,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
                                 signal,
                                 symbolicatedStack,
                             }), fallbackToRootFile: true }) })

package/dist/components/NewComposition/use-rename-static-file.js

@@ -76,7 +76,7 @@ const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
             if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
                 canvasContent.asset === relativePath) {
                 setCanvasContent({ type: 'asset', asset: newRelativePath });
-                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+                (0, url_state_1.replaceUrl)(`/assets/${newRelativePath}`);
             }
             notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
             return true;

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/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/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/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,

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

@@ -117,6 +117,10 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
     readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
     readonly selectedItems: readonly TimelineSelection[];
 };
+export declare const extendTimelineMarqueeSelection: ({ currentSelection, marqueeSelection, }: {
+    readonly currentSelection: readonly TimelineSelection[];
+    readonly marqueeSelection: readonly TimelineSelection[];
+}) => readonly TimelineSelection[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly selectedItems: readonly TimelineSelection[];

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -265,6 +265,28 @@ const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeR
     };
 };
 exports.getTimelineMarqueeSelection = getTimelineMarqueeSelection;
+const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, }) => {
+    if (marqueeSelection.length === 0) {
+        return currentSelection;
+    }
+    const marqueeKind = getTimelineMarqueeSelectionKind(marqueeSelection[0]);
+    if (marqueeKind === null) {
+        return marqueeSelection;
+    }
+    const selectedKeys = new Set(currentSelection.map((item) => (0, exports.getTimelineSelectionKey)(item)));
+    return [
+        ...currentSelection.filter((item) => isTimelineSelectionCompatibleWithMarqueeKind(item, marqueeKind)),
+        ...marqueeSelection.filter((item) => {
+            const key = (0, exports.getTimelineSelectionKey)(item);
+            if (selectedKeys.has(key)) {
+                return false;
+            }
+            selectedKeys.add(key);
+            return true;
+        }),
+    ];
+};
+exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
     selectedItems: [],
@@ -864,7 +886,7 @@ const useCurrentTimelineSelectionStateAsRef = () => {
 };
 exports.useCurrentTimelineSelectionStateAsRef = useCurrentTimelineSelectionStateAsRef;
 const useTimelineMarqueeSelection = () => {
-    const { canSelect, getMarqueeSelection, selectItems } = (0, exports.useTimelineSelection)();
+    const { canSelect, getMarqueeSelection, selectedItems, selectItems } = (0, exports.useTimelineSelection)();
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
     const onPointerDownCapture = (0, react_1.useCallback)((event) => {
@@ -874,7 +896,7 @@ const useTimelineMarqueeSelection = () => {
         if (event.button !== 0 || !canSelect) {
             return;
         }
-        if (event.shiftKey || event.metaKey || event.ctrlKey) {
+        if (event.shiftKey) {
             return;
         }
         if (!(event.target instanceof Element)) {
@@ -908,6 +930,8 @@ const useTimelineMarqueeSelection = () => {
         document.body.style.webkitUserSelect = 'none';
         let hasDragged = false;
         let lockedSelectionKind = null;
+        const extendSelection = event.metaKey || event.ctrlKey;
+        const selectionBeforeMarquee = selectedItems;
         const cleanup = () => {
             var _a;
             window.removeEventListener('pointermove', onPointerMove);
@@ -941,7 +965,12 @@ const useTimelineMarqueeSelection = () => {
             const nextSelection = getMarqueeSelection(rect, lockedSelectionKind);
             lockedSelectionKind = nextSelection.lockedSelectionKind;
             setMarqueeRect(rect);
-            selectItems(nextSelection.selectedItems);
+            selectItems(extendSelection
+                ? (0, exports.extendTimelineMarqueeSelection)({
+                    currentSelection: selectionBeforeMarquee,
+                    marqueeSelection: nextSelection.selectedItems,
+                })
+                : nextSelection.selectedItems);
         };
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
@@ -956,7 +985,13 @@ const useTimelineMarqueeSelection = () => {
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerCancel);
-    }, [canSelect, getMarqueeSelection, isHighestContext, selectItems]);
+    }, [
+        canSelect,
+        getMarqueeSelection,
+        isHighestContext,
+        selectedItems,
+        selectItems,
+    ]);
     return { marqueeRect, onPointerDownCapture };
 };
 exports.useTimelineMarqueeSelection = useTimelineMarqueeSelection;