@remotion/studio 4.0.478 → 4.0.481

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 export type KeyframeSettingsModalState = {
     type: 'keyframe-settings';
     fileName: string;
@@ -7,7 +7,7 @@ export type KeyframeSettingsModalState = {
     fieldKey: string;
     fieldLabel: string;
     status: CanUpdateSequencePropStatusKeyframed;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     effectIndex: number | null;
 };
 export declare const KeyframeSettingsModal: React.FC<{

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

@@ -1,9 +1,9 @@
 import { type FC } from 'react';
-import type { EffectDefinition, JsxComponentIdentity, SequenceSchema } from 'remotion';
+import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly componentIdentity: JsxComponentIdentity | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];
 }>;

package/dist/components/Timeline/Timeline.js

@@ -231,15 +231,15 @@ const TimelineInner = () => {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: [
-                    jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                                ] }) })
-                                    ] })
-                            ] })) })
-                ] })
+            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [
+                        jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                    ] }) })
+                                        ] })
+                                ] })) })
+                    ] }) })
         ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

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

@@ -1,6 +1,6 @@
-import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
+import { type EasingClipboardData, type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
-import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
+import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -20,7 +20,7 @@ export type PasteEffectPropTarget = {
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 } | {
     readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
@@ -33,6 +33,18 @@ export declare const getEffectPropClipboardDataFromSelection: ({ selection, prop
     selection: TimelineSelection;
     propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
+export declare const getEasingClipboardDataFromSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => EasingClipboardData | null;
 export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
     readonly selectedItems: readonly TimelineSelection[];
     readonly payload: EffectPropClipboardData;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,6 +11,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const makeClipboardText = (payload) => JSON.stringify(payload);
 const makeTargetKey = (nodePath) => {
     return JSON.stringify({
@@ -176,6 +177,24 @@ const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) =
     };
 };
 exports.getEffectPropClipboardDataFromSelection = getEffectPropClipboardDataFromSelection;
+const getEasingClipboardDataFromSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    const easing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    });
+    if (easing === null) {
+        return null;
+    }
+    return {
+        type: 'easing',
+        version: 1,
+        remotionClipboard: 'easing',
+        easing,
+    };
+};
+exports.getEasingClipboardDataFromSelection = getEasingClipboardDataFromSelection;
 const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
     if (selectedItems.length === 0) {
@@ -269,9 +288,38 @@ const TimelineClipboardKeybindings = () => {
                 var _a;
                 const { selectedItems } = currentSelection.current;
                 const propStatuses = propStatusesRef.current;
+                const sequences = sequencesRef.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+                if (easingSelections.length > 0) {
+                    e.preventDefault();
+                    if (easingSelections.length !== 1 ||
+                        easingSelections.length !== selectedItems.length) {
+                        (0, NotificationCenter_1.showNotification)('Select one easing to copy', 3000);
+                        return;
+                    }
+                    const payload = (0, exports.getEasingClipboardDataFromSelection)({
+                        selection: easingSelections[0],
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot copy easing because it cannot be read', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied easing to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy easing: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 if (selectedItems.some((selection) => selection.type === 'sequence-effect-prop')) {
                     e.preventDefault();
                     if (selectedItems.length !== 1 ||
@@ -354,6 +402,42 @@ const TimelineClipboardKeybindings = () => {
                     .then((text) => {
                     const propStatuses = propStatusesRef.current;
                     const sequences = sequencesRef.current;
+                    const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
+                    if (easingResult.status !== 'invalid') {
+                        e.preventDefault();
+                        if (easingResult.status === 'unsupported-version') {
+                            (0, NotificationCenter_1.showNotification)('Cannot paste easing copied from a different Remotion Studio version', 4000);
+                            return;
+                        }
+                        const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+                        if (easingSelections.length === 0 ||
+                            easingSelections.length !== selectedItems.length) {
+                            (0, NotificationCenter_1.showNotification)('Select an easing to paste onto', 3000);
+                            return;
+                        }
+                        const updatePromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                            selections: easingSelections,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                            propStatuses,
+                            setPropStatuses,
+                            clientId,
+                            easing: easingResult.data.easing,
+                        });
+                        if (updatePromise === null) {
+                            (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) => {
+                            (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
+                        });
+                    }
                     const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                     if (effectPropResult.status !== 'invalid') {
                         e.preventDefault();

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDeleteKeybindings = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -29,7 +30,7 @@ const TimelineDeleteKeybindings = () => {
         }
         const { clientId } = previewServerState;
         const handleDelete = () => {
-            const { selectedItems, clearSelection } = currentSelection.current;
+            const { selectedItems, clearSelection, selectItems } = currentSelection.current;
             const sequences = sequencesRef.current;
             const propStatuses = propStatusesRef.current;
             if (selectedItems.length === 0) {
@@ -57,7 +58,13 @@ const TimelineDeleteKeybindings = () => {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
-                        clearSelection();
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)(selectedItems);
+                        if (nextSelection.length === 0) {
+                            clearSelection();
+                        }
+                        else {
+                            selectItems(nextSelection);
+                        }
                     }
                 })
                     .catch(() => undefined);
@@ -72,7 +79,7 @@ const TimelineDeleteKeybindings = () => {
                     propStatuses,
                     setPropStatuses,
                     clientId,
-                    easing: 'linear',
+                    easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
                 });
                 if (resetEasingPromise !== null) {
                     resetEasingPromise.catch(() => undefined);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
@@ -7,7 +7,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly label: string;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly effectIndex: number;
-    readonly effectSchema: SequenceSchema;
+    readonly effectSchema: InteractivitySchema;
     readonly documentationLink: string | null;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -316,7 +316,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
 };

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

@@ -3,6 +3,13 @@ import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
+import { type TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
+export declare const TimelineEffectPropValue: React.FC<{
+    readonly field: EffectSchemaFieldInfo;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly validatedLocation: CodePosition;
+    readonly sourceFrame: number;
+}>;
 export declare const TimelineEffectPropItem: React.FC<{
     readonly field: EffectSchemaFieldInfo;
     readonly validatedLocation: CodePosition;
@@ -10,4 +17,5 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectPropItem = void 0;
+exports.TimelineEffectPropItem = exports.TimelineEffectPropValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -40,7 +40,7 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -58,13 +58,11 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const onDragValueChange = (0, react_1.useCallback)((value) => {
         const nextDragOverrideValue = propStatus !== null && isKeyframedStatus(propStatus)
             ? remotion_1.Internals.makeKeyframedDragOverride({
                 status: propStatus,
-                frame: jsxFrame,
+                frame: sourceFrame,
                 value,
             })
             : remotion_1.Internals.makeStaticDragOverride(value);
@@ -72,10 +70,10 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
     }, [
         field.effectIndex,
         field.key,
-        jsxFrame,
         nodePath,
         propStatus,
         setEffectDragOverrides,
+        sourceFrame,
     ]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         clearEffectDragOverrides(nodePath, field.effectIndex);
@@ -142,7 +140,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         setPropStatuses,
         validatedLocation,
     ]);
-    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
+    const onSaveKeyframed = (0, react_1.useCallback)((value, frame) => {
         if (!validatedLocation) {
             return Promise.reject(new Error('Cannot save'));
         }
@@ -154,7 +152,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
             nodePath,
             effectIndex: field.effectIndex,
             fieldKey: field.key,
-            sourceFrame,
+            sourceFrame: frame,
             value,
             schema: field.effectSchema,
             setPropStatuses,
@@ -197,7 +195,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         return null;
     }
     if (isKeyframedStatus(propStatus)) {
-        return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
+        return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
@@ -206,12 +204,13 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
-        frame: jsxFrame,
+        frame: sourceFrame,
         shouldResortToDefaultValueIfUndefined: true,
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, }) => {
+exports.TimelineEffectPropValue = TimelineEffectPropValue;
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -220,6 +219,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -238,15 +239,18 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
         return overrides[field.key];
     }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema: field.effectSchema,
+        key: field.key,
+    });
     const keyframeControls = propStatus !== null &&
-        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus,
-            selected: selection.selected,
-            keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
-                schema: field.effectSchema,
-                key: field.key,
-            }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo })) : null;
+        (keyframeControlsMode === 'inspector'
+            ? keyframable
+            : (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+                propStatus,
+                selected: selection.selected,
+                keyframable,
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -355,8 +359,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         previewServerState,
         propStatus,
     ]);
-    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) })
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) })
         ] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const arrowButton = {
     background: 'none',
     border: 'none',
@@ -27,6 +60,13 @@ const arrowSpacer = {
 };
 const svgStyle = { display: 'block' };
 const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
+    const handleClick = react_1.default.useCallback((e) => {
+        e.stopPropagation();
+        onClick();
+    }, [onClick]);
+    const stopPropagation = react_1.default.useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
@@ -35,7 +75,7 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

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

@@ -1,17 +1,20 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
+import type { TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
 export declare const TimelineExpandedRow: React.FC<{
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
+    readonly rowDepthBase?: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly validatedLocation: CodePosition;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -20,8 +20,8 @@ const rowLabel = {
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, }) => {
-    const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
+const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+    const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
@@ -44,19 +44,19 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = TimelineExpandedRow;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedSection: React.FC<{