@remotion/studio 4.0.472 → 4.0.474

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,6 +6,7 @@ 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");
+const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -36,7 +37,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, schema, codeValue }) => {
+const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -46,17 +47,18 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
     const onSave = (0, react_1.useCallback)((value) => {
+        var _a;
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
@@ -64,31 +66,39 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             ? JSON.stringify(field.fieldSchema.default)
             : null;
         const stringifiedValue = JSON.stringify(value);
-        if (value === codeValue.codeValue) {
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        if (value === propStatus.codeValue) {
             return Promise.resolve();
         }
         if (defaultValue === stringifiedValue &&
-            codeValue.codeValue === undefined) {
+            propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
-        return (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value,
-            defaultValue,
-            schema,
-            setCodeValues,
+        return (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value,
+                    defaultValue,
+                    schema,
+                },
+            ],
+            setPropStatuses,
             clientId,
+            undoLabel: `Update ${fieldLabel}`,
+            redoLabel: `Update ${fieldLabel} again`,
         });
     }, [
-        codeValue,
+        propStatus,
         clientId,
+        field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onDragValueChange = (0, react_1.useCallback)((value) => {
@@ -103,35 +113,36 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
     var _a, _b;
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
-    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
+    const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
-    const keyframeControls = codeValue !== null &&
+    const keyframeControls = propStatus !== null &&
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus: codeValue,
+            propStatus,
             selected: selection.selected,
             keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
                 schema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: codeValue, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
+        }) ? (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: schema, effectIndex: null })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -139,49 +150,58 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         };
     }, [field.rowHeight]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
-        if (!codeValue || codeValue.status === 'computed') {
+        if (!propStatus || propStatus.status === 'computed') {
             return false;
         }
         return isResettableStatus({
-            status: codeValue,
+            status: propStatus,
             defaultValue: field.fieldSchema.default,
         });
-    }, [codeValue, field.fieldSchema.default]);
+    }, [propStatus, field.fieldSchema.default]);
     const canPerformReset = previewServerState.type === 'connected' &&
-        codeValue !== null &&
-        codeValue.status !== 'computed';
+        propStatus !== null &&
+        propStatus.status !== 'computed';
     const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
+        var _a;
         if (!canShowReset ||
             !canResetToDefault ||
             previewServerState.type !== 'connected' ||
-            codeValue === null) {
+            propStatus === null) {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
-        (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value: field.fieldSchema.default,
-            defaultValue,
-            schema,
-            setCodeValues,
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value: field.fieldSchema.default,
+                    defaultValue,
+                    schema,
+                },
+            ],
+            setPropStatuses,
             clientId: previewServerState.clientId,
+            undoLabel: `Reset ${fieldLabel}`,
+            redoLabel: `Reapply ${fieldLabel}`,
         });
     }, [
         canResetToDefault,
         canShowReset,
+        field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
         previewServerState,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
-        codeValue,
+        propStatus,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
         if (!clientId) {
@@ -194,7 +214,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             sourceFrame,
             value,
             schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -202,24 +222,48 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
-        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
             throw new Error('Expected keyframed status');
         }
         setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
-            status: codeValue,
+            status: propStatus,
             frame: jsxFrame,
             value,
         }));
-    }, [codeValue, field.key, jsxFrame, nodePath, setDragOverrides]);
+    }, [propStatus, field.key, jsxFrame, nodePath, setDragOverrides]);
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
+    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
+        var _a;
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
+            return;
+        }
+        setSelectedModal({
+            type: 'keyframe-settings',
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
+            status: propStatus,
+            schema,
+            effectIndex: null,
+        });
+    }, [
+        propStatus,
+        field.description,
+        field.key,
+        nodePath,
+        schema,
+        setSelectedModal,
+        validatedLocation.source,
+    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        return [
+        const values = [
             {
                 type: 'item',
                 id: 'reset-sequence-field',
@@ -233,12 +277,33 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canShowReset, onReset]);
-    if (codeValue === null) {
+        if (propStatus !== null && isKeyframedStatus(propStatus)) {
+            values.push({
+                type: 'item',
+                id: 'keyframe-settings-sequence-field',
+                keyHint: null,
+                label: 'Keyframe settings...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenKeyframeSettings,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'keyframe-settings-sequence-field',
+            });
+        }
+        return values;
+    }, [
+        canShowReset,
+        propStatus,
+        onOpenKeyframeSettings,
+        onReset,
+        previewServerState,
+    ]);
+    if (propStatus === null) {
         return null;
     }
     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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(codeValue) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : codeValue.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CodeValues, OverrideIdToNodePaths, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -29,19 +29,19 @@ export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: number;
 }) => SaveSequencePropChange[];
-export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
-export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -22,14 +22,14 @@ const baseStyle = {
     zIndex: 1,
     touchAction: 'none',
 };
-const canUpdateDurationInFrames = ({ codeValues, nodePath, }) => {
+const canUpdateDurationInFrames = ({ propStatuses, nodePath, }) => {
     var _a, _b;
-    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
-const canUpdateFrom = ({ codeValues, nodePath, }) => {
+const canUpdateFrom = ({ propStatuses, nodePath, }) => {
     var _a, _b;
-    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
 const isDurationDraggableSequence = (sequence) => {
@@ -100,7 +100,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
         return ((0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
-const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -116,18 +116,23 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     const targets = new Map();
     for (const nodePathInfo of targetNodePathInfos) {
         const track = findSequenceTrack({ tracks, nodePathInfo });
-        if (!track || !isDurationDraggableSequence(track.sequence)) {
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !originalSequence ||
+            !isDurationDraggableSequence(originalSequence)) {
             return null;
         }
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateDurationInFrames({ codeValues, nodePath })) {
+        if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
             return null;
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
             targets.set(key, {
                 fileName: nodePath.absolutePath,
-                initialDuration: track.sequence.duration,
+                initialDuration: originalSequence.duration,
                 nodePath,
             });
         }
@@ -135,7 +140,7 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     return [...targets.values()];
 };
 exports.getTimelineSequenceDurationDragTargets = getTimelineSequenceDurationDragTargets;
-const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -160,7 +165,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             return null;
         }
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateFrom({ codeValues, nodePath })) {
+        if (!canUpdateFrom({ propStatuses, nodePath })) {
             return null;
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
@@ -186,35 +191,29 @@ const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
     }
 };
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     });
     latestRef.current = {
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -225,7 +224,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (!dragState) {
             return;
         }
-        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
             deltaFrames: dragState.latestDeltaFrames,
@@ -239,19 +238,15 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             });
             return;
         }
-        const savePromise = changes.length === 1
-            ? (0, save_sequence_prop_1.saveSequenceProp)({
-                ...changes[0],
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-            })
-            : (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-                undoLabel: 'Move selected sequences',
-                redoLabel: 'Move selected sequences back',
-            });
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setPropStatuses: latestSetPropStatuses,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
+            redoLabel: changes.length > 1
+                ? 'Move selected sequences back'
+                : 'Move sequence back',
+        });
         savePromise
             .catch((err) => {
             remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save from', err);
@@ -273,16 +268,17 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (pxPerFrame <= 0) {
             return;
         }
-        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
         if (latestNodePathInfo === null) {
             return;
         }
         const targets = (0, exports.getTimelineSequenceFromDragTargets)({
             draggedNodePathInfo: latestNodePathInfo,
             selectedItems: latestSelectedItems,
-            sequences: latestSequences,
+            sequences: sequencesRef.current,
             overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            codeValues: latestCodeValues,
+            propStatuses: propStatusesRef.current,
         });
         if (targets === null || targets.length === 0) {
             return;
@@ -298,7 +294,13 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         setDragging(true);
-    }, [timelineDurationInFrames, windowWidth]);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!dragging) {
             return;
@@ -353,36 +355,30 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
 const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     // Keep latest props/setters available to window listeners installed once at pointerdown.
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     });
     latestRef.current = {
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -394,7 +390,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         if (!dragState) {
             return;
         }
-        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
             targets: dragState.targets,
             deltaFrames: dragState.latestDeltaFrames,
@@ -408,19 +404,15 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             });
             return;
         }
-        const savePromise = changes.length === 1
-            ? (0, save_sequence_prop_1.saveSequenceProp)({
-                ...changes[0],
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-            })
-            : (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-                undoLabel: 'Resize selected sequences',
-                redoLabel: 'Resize selected sequences back',
-            });
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setPropStatuses: latestSetPropStatuses,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Resize selected sequences' : 'Resize sequence',
+            redoLabel: changes.length > 1
+                ? 'Resize selected sequences back'
+                : 'Resize sequence back',
+        });
         savePromise
             .catch((err) => {
             remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save durationInFrames', err);
@@ -442,13 +434,14 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         if (pxPerFrame <= 0) {
             return;
         }
-        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
         const targets = (0, exports.getTimelineSequenceDurationDragTargets)({
             draggedNodePathInfo: latestNodePathInfo,
             selectedItems: latestSelectedItems,
-            sequences: latestSequences,
+            sequences: sequencesRef.current,
             overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            codeValues: latestCodeValues,
+            propStatuses: propStatusesRef.current,
         });
         if (targets === null || targets.length === 0) {
             return;
@@ -466,7 +459,13 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
         setDragging(true);
-    }, [timelineDurationInFrames, windowWidth]);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
     // Install global pointer listeners while dragging. They survive parent re-renders
     // and element remounts that would otherwise drop React's synthetic handlers or
     // pointer capture.