@remotion/studio 4.0.496 → 4.0.498

package/dist/components/Timeline/call-update-keyframe-settings.d.ts

@@ -20,3 +20,20 @@ export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, ef
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
+type BatchSequenceKeyframeSettingsUpdate = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: InteractivitySchema;
+};
+type BatchEffectKeyframeSettingsUpdate = BatchSequenceKeyframeSettingsUpdate & {
+    effectIndex: number;
+};
+export declare const callBatchUpdateKeyframeSettings: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
+    sequenceKeyframes: BatchSequenceKeyframeSettingsUpdate[];
+    effectKeyframes: BatchEffectKeyframeSettingsUpdate[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;
+export {};

package/dist/components/Timeline/call-update-keyframe-settings.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
+exports.callBatchUpdateKeyframeSettings = exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
 const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
@@ -50,3 +51,44 @@ const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fie
     });
 };
 exports.callUpdateEffectKeyframeSettings = callUpdateEffectKeyframeSettings;
+const callBatchUpdateKeyframeSettings = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+    for (const update of sequenceKeyframes) {
+        setPropStatuses(update.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateSequenceKeyframeSettings)({
+            previous: prev,
+            fieldKey: update.fieldKey,
+            settings: update.settings,
+        }));
+    }
+    for (const update of effectKeyframes) {
+        setPropStatuses(update.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateEffectKeyframeSettings)({
+            previous: prev,
+            effectIndex: update.effectIndex,
+            fieldKey: update.fieldKey,
+            settings: update.settings,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', {
+        sequenceKeyframes: sequenceKeyframes.map((update) => ({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            key: update.fieldKey,
+            settings: update.settings,
+            schema: update.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((update) => ({
+            fileName: update.fileName,
+            sequenceNodePath: update.nodePath,
+            effectIndex: update.effectIndex,
+            key: update.fieldKey,
+            settings: update.settings,
+            schema: update.schema,
+        })),
+        clientId,
+    })
+        .then(() => undefined)
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(`Could not update keyframe settings: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        throw err;
+    });
+};
+exports.callBatchUpdateKeyframeSettings = callBatchUpdateKeyframeSettings;

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -1,7 +1,9 @@
 import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
+export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
 export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
+exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -32,7 +32,7 @@ const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
         confirmLabel: 'Delete',
     });
 };
-const deleteSequences = async (nodePathInfos, confirm) => {
+const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
@@ -61,6 +61,7 @@ const deleteSequences = async (nodePathInfos, confirm) => {
         return true;
     });
 };
+exports.deleteSequencesFromSource = deleteSequencesFromSource;
 const deleteEffects = (effects) => {
     if (effects.length === 0) {
         return Promise.resolve(false);
@@ -115,7 +116,7 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
         case 'guide':
             return null;
         case 'sequence':
-            return deleteSequences([selection.nodePathInfo], confirm);
+            return (0, exports.deleteSequencesFromSource)([selection.nodePathInfo], confirm);
         case 'sequence-effect':
             return deleteEffects([
                 {
@@ -286,7 +287,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
         case 'guide':
             return null;
         case 'sequence':
-            return deleteSequences(selections
+            return (0, exports.deleteSequencesFromSource)(selections
                 .filter(isSequenceRowSelection)
                 .map((selection) => selection.nodePathInfo), confirm);
         case 'sequence-effect':

package/dist/components/Timeline/disable-sequence-interactivity.js

@@ -5,6 +5,8 @@ const no_react_1 = require("remotion/no-react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const disableSequenceInteractivity = ({ clientId, fileName, nodePath, setPropStatuses, }) => {
     return (0, save_sequence_prop_1.saveSequenceProps)({
+        addedKeyframes: null,
+        movedKeyframes: null,
         changes: [
             {
                 fileName,

package/dist/components/Timeline/get-timeline-media-visualization-layout.d.ts

@@ -0,0 +1,8 @@
+export declare const getTimelineMediaVisualizationLayout: ({ visualizationWidth, premountWidth, postmountWidth, }: {
+    readonly visualizationWidth: number;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
+}) => {
+    marginLeft: number;
+    width: number;
+};

package/dist/components/Timeline/get-timeline-media-visualization-layout.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineMediaVisualizationLayout = void 0;
+const getTimelineMediaVisualizationLayout = ({ visualizationWidth, premountWidth, postmountWidth, }) => {
+    return {
+        marginLeft: premountWidth,
+        width: Math.max(0, visualizationWidth - premountWidth - postmountWidth),
+    };
+};
+exports.getTimelineMediaVisualizationLayout = getTimelineMediaVisualizationLayout;

package/dist/components/Timeline/get-timeline-video-info-widths.js

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineVideoInfoWidths = void 0;
+const get_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
 const getTimelineVideoInfoWidths = ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }) => {
-    const mountWidth = premountWidth + postmountWidth;
     return {
-        mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
-        mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth),
+        mediaVisualizationWidth: (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth,
+            premountWidth,
+            postmountWidth,
+        }).width,
+        mediaNaturalWidth: (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth: naturalWidth,
+            premountWidth,
+            postmountWidth,
+        }).width,
     };
 };
 exports.getTimelineVideoInfoWidths = getTimelineVideoInfoWidths;

package/dist/components/Timeline/keyframe-clipboard.js

@@ -182,6 +182,10 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
         version: 1,
         remotionClipboard: 'keyframe',
         fieldType: firstResolved.fieldType,
+        field: {
+            type: firstResolved.identity.type,
+            fieldKey: firstResolved.identity.fieldKey,
+        },
         keyframes: keyframes.map((keyframe) => {
             return {
                 frameOffset: keyframe.frame - firstFrame,
@@ -214,15 +218,27 @@ const isKeyframeValueCompatible = ({ value, fieldType, }) => {
     return typeof value === 'string';
 };
 const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (selectedItems.length === 0) {
         return { type: 'none' };
     }
-    const selection = selectedItems[0];
+    const resolvedSelectedItems = selectedItems.length === 1 &&
+        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) === 'sequence' &&
+        payload.field !== null &&
+        payload.field.type === 'sequence'
+        ? [
+            {
+                type: 'sequence-prop',
+                nodePathInfo: selectedItems[0].nodePathInfo,
+                key: payload.field.fieldKey,
+            },
+        ]
+        : selectedItems;
+    const selection = resolvedSelectedItems[0];
     if (!selection || getKeyframeFieldIdentity(selection) === null) {
         return { type: 'none' };
     }
-    const resolvedFields = selectedItems.map((item) => resolveKeyframeField({
+    const resolvedFields = resolvedSelectedItems.map((item) => resolveKeyframeField({
         selection: item,
         sequences,
         overrideIdsToNodePaths,
@@ -239,8 +255,8 @@ const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequ
         sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
         value: keyframe.value,
     }));
-    const firstFrame = (_a = keyframes[0]) === null || _a === void 0 ? void 0 : _a.sourceFrame;
-    const lastFrame = (_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    const lastFrame = (_c = keyframes.at(-1)) === null || _c === void 0 ? void 0 : _c.sourceFrame;
     if (firstFrame === undefined || lastFrame === undefined) {
         return { type: 'incompatible' };
     }

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -155,6 +155,8 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
     const resetPromises = [];
     if (sequencePropTargets.length > 0) {
         resetPromises.push((0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: sequencePropTargets.map((target) => ({
                 fileName: target.fileName,
                 nodePath: target.nodePath,

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,5 +1,6 @@
 import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { AddSequenceKeyframeChange } from './call-add-keyframe';
 import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
@@ -13,14 +14,15 @@ export type SaveSequencePropChange = {
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
-    movedKeyframes?: {
+    addedKeyframes: AddSequenceKeyframeChange[] | null;
+    movedKeyframes: {
         sequenceKeyframes: MoveSequenceKeyframeChange[];
         effectKeyframes: MoveEffectKeyframeChange[];
-    };
+    } | null;
     setPropStatuses: SetPropStatuses;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
 };
-export declare const saveSequenceProps: ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -11,16 +11,18 @@ const serializeSequencePropValue = (value) => {
     }
     return { type: 'json', serialized: JSON.stringify(value) };
 };
-const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
-    var _a, _b;
-    const sequenceKeyframes = (_a = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.sequenceKeyframes) !== null && _a !== void 0 ? _a : [];
-    const effectKeyframes = (_b = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.effectKeyframes) !== null && _b !== void 0 ? _b : [];
+const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
+    const sequenceKeyframes = movedKeyframes === null ? [] : movedKeyframes.sequenceKeyframes;
+    const effectKeyframes = movedKeyframes === null ? [] : movedKeyframes.effectKeyframes;
     if (changes.length === 0 &&
+        keyframesToAdd.length === 0 &&
         sequenceKeyframes.length === 0 &&
         effectKeyframes.length === 0) {
         return Promise.resolve();
     }
     if (changes.length === 1 &&
+        keyframesToAdd.length === 0 &&
         sequenceKeyframes.length === 0 &&
         effectKeyframes.length === 0) {
         const change = changes[0];
@@ -51,6 +53,8 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
                             sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
                         },
                     ],
+                    addedKeyframes: null,
+                    movedKeyframes: null,
                     clientId,
                     undoLabel,
                     redoLabel,
@@ -64,6 +68,15 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
         effectKeyframes,
         setPropStatuses,
     });
+    for (const keyframe of keyframesToAdd) {
+        setPropStatuses(keyframe.nodePath, (prev) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
+            previous: prev,
+            fieldKey: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: keyframe.value,
+            schema: keyframe.schema,
+        }));
+    }
     for (const change of changes) {
         setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
@@ -86,25 +99,37 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
                 sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
             };
         }),
-        movedKeyframes: {
-            sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+        addedKeyframes: addedKeyframes === null
+            ? null
+            : addedKeyframes.map((keyframe) => ({
                 fileName: keyframe.fileName,
                 nodePath: keyframe.nodePath,
                 key: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-                schema: keyframe.schema,
-            })),
-            effectKeyframes: effectKeyframes.map((keyframe) => ({
-                fileName: keyframe.fileName,
-                sequenceNodePath: keyframe.nodePath,
-                effectIndex: keyframe.effectIndex,
-                key: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
+                frame: keyframe.sourceFrame,
+                value: JSON.stringify(keyframe.value),
                 schema: keyframe.schema,
             })),
-        },
+        movedKeyframes: movedKeyframes === null
+            ? null
+            : {
+                sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+                    fileName: keyframe.fileName,
+                    nodePath: keyframe.nodePath,
+                    key: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                    schema: keyframe.schema,
+                })),
+                effectKeyframes: effectKeyframes.map((keyframe) => ({
+                    fileName: keyframe.fileName,
+                    sequenceNodePath: keyframe.nodePath,
+                    effectIndex: keyframe.effectIndex,
+                    key: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                    schema: keyframe.schema,
+                })),
+            },
         clientId,
         undoLabel,
         redoLabel,

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -1,5 +1,7 @@
 export declare const PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = "data-remotion-prevent-selection-clear";
 export declare const shouldClearSelectionOnPointerDown: (event: {
     readonly button: number;
+    readonly ctrlKey: boolean | null;
+    readonly metaKey: boolean | null;
     readonly target?: EventTarget | null | undefined;
 }) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -13,7 +13,7 @@ const isSelectionClearBlocked = (target) => {
     return (target.closest(`[${exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR}]`) !== null);
 };
 const shouldClearSelectionOnPointerDown = (event) => {
-    if (event.button !== 0) {
+    if (event.button !== 0 || event.metaKey === true || event.ctrlKey === true) {
         return false;
     }
     return !isSelectionClearBlocked(event.target);

package/dist/components/Timeline/timeline-asset-drop-context.d.ts

@@ -0,0 +1 @@
+export declare const TimelineAssetDropFrameContext: import("react").Context<number | null>;

package/dist/components/Timeline/timeline-asset-drop-context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetDropFrameContext = void 0;
+const react_1 = require("react");
+exports.TimelineAssetDropFrameContext = (0, react_1.createContext)(null);

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -35,6 +35,13 @@ export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapo
     width: number;
     extrapolate: "clamp" | "extend";
 }) => number;
+export declare const getFrameFromTimelineDrop: ({ clientX, durationInFrames, scrollLeft, timelineLeft, timelineWidth, }: {
+    clientX: number;
+    durationInFrames: number;
+    scrollLeft: number;
+    timelineLeft: number;
+    timelineWidth: number;
+}) => number;
 /**
  * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
  * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -203,6 +203,15 @@ const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;
+const getFrameFromTimelineDrop = ({ clientX, durationInFrames, scrollLeft, timelineLeft, timelineWidth, }) => {
+    return (0, exports.getFrameFromX)({
+        clientX: clientX - timelineLeft + scrollLeft,
+        durationInFrames,
+        width: timelineWidth,
+        extrapolate: 'clamp',
+    });
+};
+exports.getFrameFromTimelineDrop = getFrameFromTimelineDrop;
 /**
  * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
  * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a

package/dist/components/Timeline/update-selected-easing.js

@@ -132,33 +132,36 @@ const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNod
     if (updates.length === 0) {
         return null;
     }
-    return Promise.all(updates.map((update) => {
-        const settings = {
-            type: 'easing',
-            segmentIndex: update.segmentIndex,
-            easing,
-        };
-        if (update.type === 'sequence') {
-            return (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
-                fileName: update.fileName,
-                nodePath: update.nodePath,
-                fieldKey: update.fieldKey,
-                settings,
-                schema: update.schema,
-                setPropStatuses,
-                clientId,
-            });
-        }
-        return (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+    return (0, call_update_keyframe_settings_1.callBatchUpdateKeyframeSettings)({
+        sequenceKeyframes: updates
+            .filter((update) => update.type === 'sequence')
+            .map((update) => ({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            fieldKey: update.fieldKey,
+            settings: {
+                type: 'easing',
+                segmentIndex: update.segmentIndex,
+                easing,
+            },
+            schema: update.schema,
+        })),
+        effectKeyframes: updates
+            .filter((update) => update.type === 'effect')
+            .map((update) => ({
             fileName: update.fileName,
             nodePath: update.nodePath,
             effectIndex: update.effectIndex,
             fieldKey: update.fieldKey,
-            settings,
+            settings: {
+                type: 'easing',
+                segmentIndex: update.segmentIndex,
+                easing,
+            },
             schema: update.schema,
-            setPropStatuses,
-            clientId,
-        });
-    })).then(() => undefined);
+        })),
+        setPropStatuses,
+        clientId,
+    });
 };
 exports.updateSelectedTimelineEasings = updateSelectedTimelineEasings;

package/dist/components/Timeline/use-rename-sequence.js

@@ -76,6 +76,8 @@ const useRenameSequence = ({ clientId, nodePathInfo, sequence, validatedLocation
             return;
         }
         await (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -2,6 +2,11 @@ import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequen
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
 export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
+export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOffset, timelinePosition, }: {
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+    readonly timelinePosition: number;
+}) => number;
 export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
     readonly clientId: string | null;
     readonly nodePath: SequencePropsSubscriptionKey | null;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.shouldShowFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
 };
 exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
+const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
+    const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+    const minFrame = sequenceFrameOffset;
+    const maxFrame = Number.isFinite(sequence.duration)
+        ? Math.max(minFrame, sequence.duration + sequenceFrameOffset - 1)
+        : Infinity;
+    return Math.min(Math.max(minFrame, rawFreezeFrame), maxFrame);
+};
+exports.calculateSequenceFreezeFrame = calculateSequenceFreezeFrame;
 const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
@@ -26,13 +35,15 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
             clientId === null) {
             return;
         }
-        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-        const maxFrame = Number.isFinite(sequence.duration)
-            ? Math.max(0, sequence.duration - 1)
-            : rawFreezeFrame;
-        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const freezeFrame = (0, exports.calculateSequenceFreezeFrame)({
+            sequence,
+            sequenceFrameOffset,
+            timelinePosition,
+        });
         const remove = isFrozen;
         (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedSource,
@@ -53,9 +64,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
         clientId,
         isFrozen,
         nodePath,
-        sequence.controls,
-        sequence.duration,
-        sequence.from,
+        sequence,
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,

package/dist/components/Timeline/use-timeline-asset-drop.d.ts

@@ -0,0 +1 @@
+export declare const useTimelineAssetDrop: () => number | null;