@remotion/studio 4.0.527 → 4.0.529

package/dist/components/Timeline/get-playback-rate-keyframe-changes.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPlaybackRateKeyframeChanges = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const get_keyframed_sequence_drag_targets_1 = require("./get-keyframed-sequence-drag-targets");
+const getPlaybackRateKeyframeChanges = ({ nodePath, sequences, overrideIdsToNodePaths, propStatuses, previousPlaybackRate, playbackRate, }) => {
+    var _a;
+    var _b;
+    const sequenceKeyframes = [];
+    const effectKeyframes = [];
+    const previews = [];
+    if (previousPlaybackRate === playbackRate ||
+        !Number.isFinite(previousPlaybackRate) ||
+        previousPlaybackRate <= 0 ||
+        !Number.isFinite(playbackRate) ||
+        playbackRate <= 0) {
+        return { sequenceKeyframes, effectKeyframes, previews };
+    }
+    const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+    const root = sequences.find((sequence) => {
+        var _a;
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        const path = overrideId ? overrideIdsToNodePaths[overrideId] : undefined;
+        return path && (0, studio_shared_1.stringifySequenceSubscriptionKey)(path) === key;
+    });
+    if (!root) {
+        return { sequenceKeyframes, effectKeyframes, previews };
+    }
+    const sequencesById = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+    const ratio = previousPlaybackRate / playbackRate;
+    const includedNodePaths = new Set();
+    for (const sequence of sequences) {
+        let ancestorId = sequence.id;
+        let belongsToRoot = false;
+        let descendantOffset = 0;
+        while (ancestorId !== null) {
+            if (ancestorId === root.id) {
+                belongsToRoot = true;
+                break;
+            }
+            const ancestor = sequencesById.get(ancestorId);
+            if (!ancestor) {
+                break;
+            }
+            descendantOffset += ancestor.from - ((_b = ancestor.trimBefore) !== null && _b !== void 0 ? _b : 0);
+            ancestorId = ancestor.parent;
+        }
+        if (!belongsToRoot) {
+            continue;
+        }
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        const descendantNodePath = overrideId
+            ? overrideIdsToNodePaths[overrideId]
+            : undefined;
+        if (!descendantNodePath) {
+            continue;
+        }
+        const descendantKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(descendantNodePath);
+        if (includedNodePaths.has(descendantKey)) {
+            continue;
+        }
+        includedNodePaths.add(descendantKey);
+        // Local-clock descendant keyframes already follow their parent's rate.
+        // The shared collector includes only outer-clock descendants.
+        const targets = (0, get_keyframed_sequence_drag_targets_1.getKeyframedSequenceDragTargets)({
+            nodePath: descendantNodePath,
+            sequence,
+            sequences,
+            propStatuses,
+            isDescendant: sequence.id !== root.id,
+        });
+        const addMoves = (target, effectIndex) => {
+            var _a;
+            const adjustment = (_a = target.status.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0;
+            // The adjustment includes the timing offsets between this element and
+            // the useCurrentFrame() binding. Remove the descendant offsets to find
+            // the edited element's start in that binding's source clock.
+            const anchor = sequence.id === root.id
+                ? root.from - adjustment
+                : -adjustment - descendantOffset;
+            if (!Number.isFinite(anchor)) {
+                return;
+            }
+            const nextKeyframes = target.status.keyframes.map((keyframe) => {
+                const frame = anchor + (keyframe.frame - anchor) * ratio;
+                const nearestInteger = Math.round(frame);
+                return {
+                    ...keyframe,
+                    frame: Math.abs(frame - nearestInteger) <=
+                        Number.EPSILON * Math.max(1, Math.abs(frame)) * 2
+                        ? nearestInteger
+                        : frame,
+                };
+            });
+            if (nextKeyframes.some((keyframe) => !Number.isFinite(keyframe.frame)) ||
+                new Set(nextKeyframes.map((keyframe) => keyframe.frame)).size !==
+                    nextKeyframes.length) {
+                return;
+            }
+            const moves = target.status.keyframes.flatMap((keyframe, index) => {
+                var _a;
+                const toFrame = (_a = nextKeyframes[index]) === null || _a === void 0 ? void 0 : _a.frame;
+                if (toFrame === undefined || toFrame === keyframe.frame) {
+                    return [];
+                }
+                return [
+                    {
+                        fileName: target.fileName,
+                        nodePath: target.nodePath,
+                        fieldKey: target.fieldKey,
+                        fromFrame: keyframe.frame,
+                        toFrame,
+                        schema: target.schema,
+                    },
+                ];
+            });
+            if (moves.length === 0) {
+                return;
+            }
+            previews.push({
+                nodePath: target.nodePath,
+                fieldKey: target.fieldKey,
+                effectIndex,
+                status: { ...target.status, keyframes: nextKeyframes },
+            });
+            if (effectIndex === null) {
+                sequenceKeyframes.push(...moves);
+            }
+            else {
+                effectKeyframes.push(...moves.map((move) => ({ ...move, effectIndex })));
+            }
+        };
+        for (const target of targets.sequenceKeyframes) {
+            addMoves(target, null);
+        }
+        for (const target of targets.effectKeyframes) {
+            addMoves(target, target.effectIndex);
+        }
+    }
+    return { sequenceKeyframes, effectKeyframes, previews };
+};
+exports.getPlaybackRateKeyframeChanges = getPlaybackRateKeyframeChanges;

package/dist/components/Timeline/get-sequence-split-menu-item.js

@@ -28,12 +28,12 @@ const getSequenceSplitMenuItem = ({ nodePathInfo, sequence, propStatuses, splitF
     return {
         type: 'item',
         id: 'split-sequence',
-        label: (jsx_runtime_1.jsx("span", { style: {
+        label: (jsx_runtime_1.jsx("span", { role: "group", style: {
                 fontFamily: 'inherit',
                 fontSize: 'inherit',
                 lineHeight: 'inherit',
                 color: 'inherit',
-            }, title: disabledReason !== null && disabledReason !== void 0 ? disabledReason : 'Split at the playhead', children: "Split clip" })),
+            }, "aria-label": disabledReason !== null && disabledReason !== void 0 ? disabledReason : 'Split at the playhead', children: "Split clip" })),
         value: 'split-sequence',
         keyHint: null,
         leftItem: null,

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -1,9 +1,22 @@
 import type { CanUpdateSequencePropStatus } from 'remotion';
-export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number) => {
+export type KeyframeSourceFrame = number | {
+    readonly displayFrame: number;
+    readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
+};
+export declare const getKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, propStatus, }: {
+    displayFrame: number;
+    keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
+    propStatus: CanUpdateSequencePropStatus | null;
+}) => number;
+export declare const resolveKeyframeSourceFrame: (sourceFrame: KeyframeSourceFrame, propStatus: CanUpdateSequencePropStatus | null) => number;
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number, keyframePlaybackRate?: number) => {
     frame: number;
     value: unknown;
 }[];
-export declare const getKeyframeDisplayOffset: ({ propStatus, keyframeDisplayOffset, }: {
+export declare const getKeyframeDisplayOffset: ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, }: {
     propStatus: CanUpdateSequencePropStatus | null | undefined;
     keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
 }) => number;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -1,7 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = void 0;
-const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
+exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = exports.resolveKeyframeSourceFrame = exports.getKeyframeSourceFrame = void 0;
+const getKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, propStatus, }) => {
+    const sourceFrame = (displayFrame - keyframeDisplayOffset) * keyframePlaybackRate;
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+        return sourceFrame;
+    }
+    // Converting a displayed keyframe back to source frames may introduce rounding
+    // error. Resolve its original frame so edits keep the existing keyframe identity,
+    // including when source keyframes themselves have fractional frames.
+    const tolerance = Number.EPSILON *
+        Math.max(1, Math.abs(displayFrame), Math.abs(keyframeDisplayOffset)) *
+        keyframePlaybackRate *
+        8;
+    let closestFrame = sourceFrame;
+    let closestDistance = Infinity;
+    for (const keyframe of propStatus.keyframes) {
+        const distance = Math.abs(keyframe.frame - sourceFrame);
+        if (distance <= tolerance && distance < closestDistance) {
+            closestFrame = keyframe.frame;
+            closestDistance = distance;
+        }
+    }
+    return closestFrame;
+};
+exports.getKeyframeSourceFrame = getKeyframeSourceFrame;
+const resolveKeyframeSourceFrame = (sourceFrame, propStatus) => {
+    return (0, exports.getKeyframeSourceFrame)({
+        ...(typeof sourceFrame === 'number'
+            ? {
+                displayFrame: sourceFrame,
+                keyframeDisplayOffset: 0,
+                keyframePlaybackRate: 1,
+            }
+            : sourceFrame),
+        propStatus,
+    });
+};
+exports.resolveKeyframeSourceFrame = resolveKeyframeSourceFrame;
+const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0, keyframePlaybackRate = 1) => {
     if (!propStatus) {
         return [];
     }
@@ -12,22 +49,23 @@ const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     const resolvedKeyframeDisplayOffset = (0, exports.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
-    if (resolvedKeyframeDisplayOffset === 0) {
+    if (resolvedKeyframeDisplayOffset === 0 && keyframePlaybackRate === 1) {
         return keyframes;
     }
     return keyframes.map((keyframe) => ({
         ...keyframe,
-        frame: keyframe.frame + resolvedKeyframeDisplayOffset,
+        frame: keyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
     }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;
-const getKeyframeDisplayOffset = ({ propStatus, keyframeDisplayOffset, }) => {
+const getKeyframeDisplayOffset = ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     return (keyframeDisplayOffset +
         ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static'
             ? propStatus.keyframeDisplayOffsetAdjustment === null
                 ? 0
-                : propStatus.keyframeDisplayOffsetAdjustment
+                : propStatus.keyframeDisplayOffsetAdjustment / keyframePlaybackRate
             : 0));
 };
 exports.getKeyframeDisplayOffset = getKeyframeDisplayOffset;

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

@@ -69,9 +69,11 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
                 fieldKey: identity.fieldKey,
             }),
             propStatus: sequencePropStatus,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: sequencePropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
         };
     }
@@ -97,9 +99,11 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
             fieldKey: identity.fieldKey,
         }),
         propStatus: effectPropStatus,
+        keyframePlaybackRate: track.keyframePlaybackRate,
         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: effectPropStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         }),
     };
 };
@@ -147,7 +151,12 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
     }
     const keyframes = [];
     for (const { selection } of resolvedFields) {
-        const sourceFrame = selection.frame - firstResolved.keyframeDisplayOffset;
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: selection.frame,
+            keyframeDisplayOffset: firstResolved.keyframeDisplayOffset,
+            keyframePlaybackRate: firstResolved.keyframePlaybackRate,
+            propStatus: keyframedPropStatus,
+        });
         const keyframe = keyframedPropStatus.keyframes.find((item) => item.frame === sourceFrame);
         if (keyframe === undefined ||
             JSON.stringify(keyframe.value) === undefined) {
@@ -195,7 +204,7 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
         },
         keyframes: keyframes.map((keyframe) => {
             return {
-                frameOffset: keyframe.frame - firstFrame,
+                frameOffset: (keyframe.frame - firstFrame) / firstResolved.keyframePlaybackRate,
                 value: keyframe.value,
             };
         }),
@@ -260,7 +269,12 @@ const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequ
         return { type: 'multiple' };
     }
     const keyframes = payload.keyframes.map((keyframe) => ({
-        sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
+        sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition + keyframe.frameOffset,
+            keyframeDisplayOffset: resolved.keyframeDisplayOffset,
+            keyframePlaybackRate: resolved.keyframePlaybackRate,
+            propStatus: resolved.propStatus,
+        }),
         value: keyframe.value,
     }));
     const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.sourceFrame;

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

@@ -147,7 +147,10 @@ const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePa
         if (eligibility.canSplit) {
             eligible.push({
                 nodePathInfo: eligibility.nodePathInfo,
-                splitFrame,
+                splitFrame: track
+                    ? (splitFrame - track.keyframeDisplayOffset) *
+                        track.keyframePlaybackRate
+                    : splitFrame,
             });
         }
         else {

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -240,6 +240,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'uv-coordinate':
             return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
         case 'text-content':
+        case 'svg-path':
             return String(value);
         case 'asset':
         case 'array':

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -6,6 +6,7 @@ const timeline_row_layout_1 = require("./timeline-row-layout");
 exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
     return (field.typeName === 'text-content' ||
+        field.typeName === 'svg-path' ||
         (transform3DMode &&
             (field.typeName === 'translate' ||
                 field.typeName === 'rotation-css' ||

package/dist/components/Timeline/use-delete-timeline-items.js

@@ -55,17 +55,9 @@ const useDeleteTimelineItems = () => {
             timelinePosition,
         });
         if (deletePromise !== null) {
-            deletePromise
-                .then((deleted) => {
-                if (!deleted) {
-                    return;
-                }
+            const updateSelectionAfterDeletion = () => {
                 const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
                     selections: selectedItems,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    propStatuses,
-                    timelinePosition,
                 });
                 if (nextSelection.length === 0) {
                     clearSelection();
@@ -73,8 +65,22 @@ const useDeleteTimelineItems = () => {
                 else {
                     selectItems(nextSelection);
                 }
-            })
-                .catch(() => undefined);
+            };
+            if (selectedItems.some((item) => item.type === 'keyframe')) {
+                // Keyframes are removed optimistically. Update selection in the same
+                // event so easing segments cannot inherit the deleted segments' indices.
+                updateSelectionAfterDeletion();
+                deletePromise.catch(() => undefined);
+            }
+            else {
+                deletePromise
+                    .then((deleted) => {
+                    if (deleted) {
+                        updateSelectionAfterDeletion();
+                    }
+                })
+                    .catch(() => undefined);
+            }
             return;
         }
         const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);

package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts

@@ -8,10 +8,11 @@ export type ExpandedTrackKeyframeRow = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly rowKey: string;
 };
-export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, }: {
+export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
 }) => {
     readonly rows: ExpandedTrackKeyframeRow[];
     readonly expandedHeight: number;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -62,7 +62,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
         (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
-const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
+const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -123,6 +123,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             propStatuses,
             keyframeDisplayOffset,
+            keyframePlaybackRate,
             getDragOverrides,
             getEffectDragOverrides,
             timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
@@ -132,6 +133,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         getDragOverrides,
         getEffectDragOverrides,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
         nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
     ]);

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

@@ -12,10 +12,14 @@ const isSequenceVisibleAtTimelinePosition = ({ sequence, timelinePosition, }) =>
 };
 exports.isSequenceVisibleAtTimelinePosition = isSequenceVisibleAtTimelinePosition;
 const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
-    const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-    const minFrame = sequenceFrameOffset;
+    const rawFreezeFrame = (timelinePosition - sequence.from) * sequence.sequencePlaybackRate +
+        sequenceFrameOffset;
+    const minFrame = (Math.ceil(sequence.from) - sequence.from) * sequence.sequencePlaybackRate +
+        sequenceFrameOffset;
     const maxFrame = Number.isFinite(sequence.duration)
-        ? Math.max(minFrame, sequence.duration + sequenceFrameOffset - 1)
+        ? Math.max(minFrame, (Math.ceil(sequence.from + sequence.duration) - 1 - sequence.from) *
+            sequence.sequencePlaybackRate +
+            sequenceFrameOffset)
         : Infinity;
     return Math.min(Math.max(minFrame, rawFreezeFrame), maxFrame);
 };

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -2,7 +2,7 @@ import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, selectedItems, }: {
     readonly sequence: TSequence;
-    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -14,6 +14,9 @@ const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, selec
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
+        if (nodePathInfo === null) {
+            return false;
+        }
         const tree = (0, timeline_layout_1.buildTimelineTree)({
             sequence,
             nodePathInfo,

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -102,7 +102,7 @@ const getTimelineSelectionsAfterEasingKeyframeDrag = ({ delta, selections, targe
 exports.getTimelineSelectionsAfterEasingKeyframeDrag = getTimelineSelectionsAfterEasingKeyframeDrag;
 const getCodeValueForTarget = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
 const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
         return null;
@@ -132,11 +132,16 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
         if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed') {
             return null;
         }
-        const effectSourceFrame = displayFrame -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        const effectSourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame,
+            propStatus: effectPropStatus,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectPropStatus,
                 keyframeDisplayOffset: (_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0,
-            });
+                keyframePlaybackRate: (_c = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _c !== void 0 ? _c : 1,
+            }),
+            keyframePlaybackRate: (_d = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _d !== void 0 ? _d : 1,
+        });
         if (!effectPropStatus.keyframes.some((keyframe) => keyframe.frame === effectSourceFrame)) {
             return null;
         }
@@ -151,17 +156,23 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
             propStatus: effectPropStatus,
             schema: effect.schema,
             sourceFrame: effectSourceFrame,
+            keyframePlaybackRate: (_e = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _e !== void 0 ? _e : 1,
         };
     }
     const sequencePropStatus = sequenceStatus.props[field.fieldKey];
     if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed') {
         return null;
     }
-    const sourceFrame = displayFrame -
-        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+    const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame,
+        propStatus: sequencePropStatus,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: sequencePropStatus,
-            keyframeDisplayOffset: (_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0,
-        });
+            keyframeDisplayOffset: (_f = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _f !== void 0 ? _f : 0,
+            keyframePlaybackRate: (_g = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _g !== void 0 ? _g : 1,
+        }),
+        keyframePlaybackRate: (_h = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _h !== void 0 ? _h : 1,
+    });
     if (!sequencePropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
         return null;
     }
@@ -175,6 +186,7 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
         propStatus: sequencePropStatus,
         schema: sequence.controls.schema,
         sourceFrame,
+        keyframePlaybackRate: (_j = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _j !== void 0 ? _j : 1,
     };
 };
 const getTargetGroupKey = (target) => {
@@ -196,10 +208,11 @@ const groupTargets = (targets) => {
     }
     return [...groups.values()];
 };
-const getMovesForGroup = ({ group, delta, }) => group.map((target) => ({
+const getMoveForTarget = (target, delta) => ({
     fromFrame: target.sourceFrame,
-    toFrame: target.sourceFrame + delta,
-}));
+    toFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(target.sourceFrame + delta * target.keyframePlaybackRate, target.propStatus),
+});
+const getMovesForGroup = ({ group, delta, }) => group.map((target) => getMoveForTarget(target, delta));
 const canMoveTimelineKeyframeDragTargets = ({ targets, delta, }) => groupTargets(targets).every((group) => {
     const [first] = group;
     if (!first) {
@@ -422,8 +435,7 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                     fileName: target.fileName,
                     nodePath: target.nodePath,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 effectKeyframes: targets
@@ -433,8 +445,7 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                     nodePath: target.nodePath,
                     effectIndex: target.effectIndex,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 setPropStatuses,
@@ -629,8 +640,7 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                     fileName: target.fileName,
                     nodePath: target.nodePath,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 effectKeyframes: targets
@@ -640,8 +650,7 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                     nodePath: target.nodePath,
                     effectIndex: target.effectIndex,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 setPropStatuses,

package/dist/components/TimelineCombobox.d.ts

@@ -4,7 +4,7 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const TimelineCombobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly tooltipDelay: number | null;
     readonly labelWidth?: number;
     readonly renderLeftItem?: RenderInlineAction;

package/dist/components/TimelineCombobox.js

@@ -23,31 +23,30 @@ const label = {
     WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const TimelineCombobox = ({ values, selectedId, 'aria-label': ariaLabel, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const selected = values.find((value) => value.id === selectedId);
     const segments = [
         {
-            ariaLabel: title,
+            ariaLabel,
             buttonId: null,
             disabled: false,
             idleColor: unhoveredIconColor,
             leaveLeftSpace: true,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: tooltipDelay === null && typeof selected.label === 'string'
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { role: "group", "aria-label": tooltipDelay === null && typeof selected.label === 'string'
                             ? selected.label
                             : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
                 ] })),
             segmentId: 'selector',
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
-            title: tooltipDelay === null ? title : null,
             tooltipLabel: null,
             type: 'menu',
             values,
         },
     ];
-    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
-    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: title, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
+    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle }));
+    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: ariaLabel, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
 };
 exports.TimelineCombobox = TimelineCombobox;