@remotion/studio 4.0.490 → 4.0.492

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getEffectsClipboardEnvelopeFromSelections = exports.getEffectClipboardDataFromSelections = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = 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");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
+const effects_clipboard_1 = require("./effects-clipboard");
 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");
@@ -147,6 +150,83 @@ const getSnapshotsFromSelection = ({ selection, propStatuses, }) => {
     return snapshots;
 };
 exports.getSnapshotsFromSelection = getSnapshotsFromSelection;
+const getEffectClipboardDataFromSelections = ({ selectedItems, propStatuses, }) => {
+    const firstSelection = selectedItems[0];
+    const type = firstSelection ? getCopyType(firstSelection) : null;
+    if (type === null) {
+        return { type: 'none' };
+    }
+    if (selectedItems.some((selection) => getCopyType(selection) !== type)) {
+        return { type: 'mixed' };
+    }
+    const snapshots = selectedItems.flatMap((selection) => {
+        const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
+            selection,
+            propStatuses,
+        });
+        return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
+    });
+    if (snapshots.some((snapshot) => snapshot === null)) {
+        return { type: 'uncopyable' };
+    }
+    return {
+        type: 'valid',
+        payload: {
+            type,
+            version: 3,
+            remotionClipboard: 'effects',
+            effects: snapshots,
+        },
+    };
+};
+exports.getEffectClipboardDataFromSelections = getEffectClipboardDataFromSelections;
+const getEffectsClipboardEnvelopeFromSelections = ({ selectedItems, payload, }) => {
+    if (payload.type !== 'effects-additive' ||
+        selectedItems.some((selection) => selection.type !== 'sequence-effect')) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const effectSelections = selectedItems;
+    const firstSelection = effectSelections[0];
+    if (!firstSelection || effectSelections.length !== payload.effects.length) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const sourceIdentity = makeTargetKey(firstSelection.nodePathInfo.sequenceSubscriptionKey);
+    if (effectSelections.some((selection) => makeTargetKey(selection.nodePathInfo.sequenceSubscriptionKey) !==
+        sourceIdentity)) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const indexedEffects = effectSelections
+        .map((selection, index) => ({
+        effectIndex: selection.i,
+        effect: payload.effects[index],
+    }))
+        .sort((a, b) => a.effectIndex - b.effectIndex);
+    return {
+        envelopeVersion: 1,
+        payload: {
+            ...payload,
+            effects: indexedEffects.map(({ effect }) => effect),
+        },
+        sourceIdentity,
+        originalEffectIndices: indexedEffects.map(({ effectIndex }) => effectIndex),
+    };
+};
+exports.getEffectsClipboardEnvelopeFromSelections = getEffectsClipboardEnvelopeFromSelections;
 const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect-prop') {
         return null;
@@ -279,6 +359,7 @@ const TimelineClipboardKeybindings = () => {
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -348,38 +429,28 @@ const TimelineClipboardKeybindings = () => {
                     });
                     return;
                 }
-                const firstSelection = selectedItems[0];
-                const type = firstSelection ? getCopyType(firstSelection) : null;
-                if (type === null) {
+                const effectClipboardData = (0, exports.getEffectClipboardDataFromSelections)({
+                    selectedItems,
+                    propStatuses,
+                });
+                if (effectClipboardData.type === 'none') {
                     return;
                 }
-                if (selectedItems.some((selection) => getCopyType(selection) !== type)) {
+                if (effectClipboardData.type === 'mixed') {
                     e.preventDefault();
                     (0, NotificationCenter_1.showNotification)('Cannot copy individual effects together with all effects', 3000);
                     return;
                 }
-                const snapshots = selectedItems.flatMap((selection) => {
-                    const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
-                        selection,
-                        propStatuses,
-                    });
-                    return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
-                });
-                if (snapshots.some((snapshot) => snapshot === null)) {
+                if (effectClipboardData.type === 'uncopyable') {
                     e.preventDefault();
                     (0, NotificationCenter_1.showNotification)('Cannot copy effects because one of them contains values that cannot be copied', 3000);
                     return;
                 }
                 e.preventDefault();
                 navigator.clipboard
-                    .writeText(makeClipboardText({
-                    type,
-                    version: 3,
-                    remotionClipboard: 'effects',
-                    effects: snapshots,
-                }))
+                    .writeText(makeClipboardText(effectClipboardData.payload))
                     .then(() => {
-                    (0, NotificationCenter_1.showNotification)(snapshots.length === 1
+                    (0, NotificationCenter_1.showNotification)(effectClipboardData.payload.effects.length === 1
                         ? 'Copied effect to clipboard'
                         : 'Copied effects to clipboard', 1000);
                 })
@@ -392,169 +463,244 @@ const TimelineClipboardKeybindings = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const paste = keybindings.registerKeybinding({
+        const cut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'v',
+            key: 'x',
             callback: (e) => {
-                const { selectedItems } = currentSelection.current;
+                const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
-                navigator.clipboard
-                    .readText()
-                    .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);
+                const effectClipboardData = (0, exports.getEffectClipboardDataFromSelections)({
+                    selectedItems,
+                    propStatuses: propStatusesRef.current,
+                });
+                if (effectClipboardData.type === 'none') {
+                    return;
+                }
+                e.preventDefault();
+                if (effectClipboardData.type === 'mixed') {
+                    (0, NotificationCenter_1.showNotification)('Cannot cut individual effects together with all effects', 3000);
+                    return;
+                }
+                if (effectClipboardData.type === 'uncopyable') {
+                    (0, NotificationCenter_1.showNotification)('Cannot cut effects because one of them contains values that cannot be copied', 3000);
+                    return;
+                }
+                const envelope = (0, exports.getEffectsClipboardEnvelopeFromSelections)({
+                    selectedItems,
+                    payload: effectClipboardData.payload,
+                });
+                const propStatuses = propStatusesRef.current;
+                (0, effects_clipboard_1.writeEffectsClipboardEnvelope)(envelope)
+                    .then(() => {
+                    const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+                        selections: selectedItems,
+                        sequences: sequencesRef.current,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        setPropStatuses,
+                        clientId,
+                        confirm,
+                    });
+                    return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
+                        if (!deleted) {
                             return;
                         }
-                        const updatePromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
-                            selections: easingSelections,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                            selections: selectedItems,
                             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();
-                        if (effectPropResult.status === 'unsupported-version') {
-                            (0, NotificationCenter_1.showNotification)('Cannot paste effect prop copied from a different Remotion Studio version', 4000);
-                            return;
+                        if (nextSelection.length === 0) {
+                            clearSelection();
                         }
-                        const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
-                            selectedItems,
-                            payload: effectPropResult.data,
-                            propStatuses,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                        });
-                        if (effectPropTarget.type !== 'valid') {
-                            switch (effectPropTarget.type) {
-                                case 'multiple':
-                                    (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
-                                    return;
-                                case 'none':
-                                    (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
-                                    return;
-                                case 'unsupported':
-                                    (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
-                                    return;
-                                case 'effect-type-mismatch':
-                                    (0, NotificationCenter_1.showNotification)('Select an effect of the same type to paste this prop', 3000);
-                                    return;
-                                case 'prop-mismatch':
-                                    (0, NotificationCenter_1.showNotification)('Select the same effect prop, or an effect with that prop', 3000);
-                                    return;
-                                case 'uncopyable':
-                                    (0, NotificationCenter_1.showNotification)('Cannot paste onto an effect prop that cannot be updated', 3000);
-                                    return;
-                                default:
-                                    throw new Error(`Unexpected paste target: ${effectPropTarget}`);
-                            }
+                        else {
+                            selectItems(nextSelection);
                         }
-                        return (0, save_effect_prop_1.saveEffectProp)({
-                            fileName: effectPropTarget.fileName,
-                            nodePath: effectPropTarget.nodePath,
-                            effectIndex: effectPropTarget.effectIndex,
-                            fieldKey: effectPropTarget.fieldKey,
-                            ...(effectPropResult.data.param.type === 'static'
-                                ? {
-                                    type: 'value',
-                                    value: effectPropResult.data.param.value,
-                                }
-                                : {
-                                    type: 'effect-param',
-                                    effectParam: effectPropResult.data.param,
-                                }),
-                            defaultValue: effectPropTarget.defaultValue,
-                            schema: effectPropTarget.schema,
-                            setPropStatuses,
-                            clientId,
-                        }).then(() => {
-                            (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
-                        });
-                    }
-                    const result = (0, studio_shared_1.parseEffectClipboardDataResult)(text);
-                    if (result.status === 'invalid') {
-                        return;
-                    }
+                    });
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not cut effects: ${err.message}`, 2000);
+                });
+            },
+            commandCtrlKey: true,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const handlePaste = (e) => {
+            const { activeElement } = document;
+            if (activeElement instanceof HTMLInputElement ||
+                activeElement instanceof HTMLTextAreaElement) {
+                return;
+            }
+            const { selectedItems } = currentSelection.current;
+            if (selectedItems.length === 0 || e.clipboardData === null) {
+                return;
+            }
+            e.preventDefault();
+            const { text, envelope } = (0, effects_clipboard_1.readClipboardTextAndEffectsEnvelope)(e.clipboardData);
+            Promise.resolve()
+                .then(() => {
+                const propStatuses = propStatusesRef.current;
+                const sequences = sequencesRef.current;
+                const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
+                if (easingResult.status !== 'invalid') {
                     e.preventDefault();
-                    if (result.status === 'unsupported-version') {
-                        (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
+                    if (easingResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste easing copied from a different Remotion Studio version', 4000);
                         return;
                     }
-                    const { data: payload } = result;
-                    const target = (0, exports.getPasteEffectsTarget)(selectedItems);
-                    if (target.type === 'multiple') {
-                        (0, NotificationCenter_1.showNotification)('Select one target sequence to paste effects', 3000);
+                    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;
                     }
-                    if (target.type === 'none') {
-                        (0, NotificationCenter_1.showNotification)('Select a sequence to paste effects onto', 3000);
+                    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;
                     }
-                    if (target.type === 'unsupported') {
-                        (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                    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();
+                    if (effectPropResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste effect prop copied from a different Remotion Studio version', 4000);
                         return;
                     }
-                    const { sequenceSubscriptionKey: targetSequenceNodePath } = target.nodePathInfo;
-                    return (0, call_api_1.callApi)('/api/paste-effects', {
-                        targetFileName: targetSequenceNodePath.absolutePath,
-                        targetSequenceNodePath,
-                        type: payload.type,
-                        effects: payload.effects,
-                        clientId,
-                    }).then((pasteResult) => {
-                        if (pasteResult.success) {
-                            (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
-                        }
-                        else {
-                            (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
+                    const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
+                        selectedItems,
+                        payload: effectPropResult.data,
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (effectPropTarget.type !== 'valid') {
+                        switch (effectPropTarget.type) {
+                            case 'multiple':
+                                (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
+                                return;
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                return;
+                            case 'unsupported':
+                                (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                                return;
+                            case 'effect-type-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select an effect of the same type to paste this prop', 3000);
+                                return;
+                            case 'prop-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select the same effect prop, or an effect with that prop', 3000);
+                                return;
+                            case 'uncopyable':
+                                (0, NotificationCenter_1.showNotification)('Cannot paste onto an effect prop that cannot be updated', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${effectPropTarget}`);
                         }
+                    }
+                    return (0, save_effect_prop_1.saveEffectProp)({
+                        fileName: effectPropTarget.fileName,
+                        nodePath: effectPropTarget.nodePath,
+                        effectIndex: effectPropTarget.effectIndex,
+                        fieldKey: effectPropTarget.fieldKey,
+                        ...(effectPropResult.data.param.type === 'static'
+                            ? {
+                                type: 'value',
+                                value: effectPropResult.data.param.value,
+                            }
+                            : {
+                                type: 'effect-param',
+                                effectParam: effectPropResult.data.param,
+                            }),
+                        defaultValue: effectPropTarget.defaultValue,
+                        schema: effectPropTarget.schema,
+                        setPropStatuses,
+                        clientId,
+                    }).then(() => {
+                        (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
                     });
-                })
-                    .catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+                }
+                const result = envelope === null
+                    ? (0, studio_shared_1.parseEffectClipboardDataResult)(text)
+                    : { status: 'valid', data: envelope.payload };
+                if (result.status === 'invalid') {
+                    return;
+                }
+                e.preventDefault();
+                if (result.status === 'unsupported-version') {
+                    (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
+                    return;
+                }
+                const { data: payload } = result;
+                const target = (0, exports.getPasteEffectsTarget)(selectedItems);
+                if (target.type === 'multiple') {
+                    (0, NotificationCenter_1.showNotification)('Select one target sequence to paste effects', 3000);
+                    return;
+                }
+                if (target.type === 'none') {
+                    (0, NotificationCenter_1.showNotification)('Select a sequence to paste effects onto', 3000);
+                    return;
+                }
+                if (target.type === 'unsupported') {
+                    (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                    return;
+                }
+                const { sequenceSubscriptionKey: targetSequenceNodePath } = target.nodePathInfo;
+                const insertAtIndices = (envelope === null || envelope === void 0 ? void 0 : envelope.sourceIdentity) === makeTargetKey(targetSequenceNodePath)
+                    ? envelope.originalEffectIndices
+                    : null;
+                return (0, call_api_1.callApi)('/api/paste-effects', {
+                    targetFileName: targetSequenceNodePath.absolutePath,
+                    targetSequenceNodePath,
+                    type: payload.type,
+                    effects: payload.effects,
+                    clientId,
+                    insertAtIndices,
+                }).then((pasteResult) => {
+                    if (pasteResult.success) {
+                        (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
+                    }
+                    else {
+                        (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
+                    }
                 });
-            },
-            commandCtrlKey: true,
-            preventDefault: false,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
+            })
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+            });
+        };
+        // Reading ClipboardEvent data avoids the permission prompt caused by
+        // navigator.clipboard.read().
+        if (keybindings.isHighestContext && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+            document.addEventListener('paste', handlePaste);
+        }
         return () => {
             copy.unregister();
-            paste.unregister();
+            cut.unregister();
+            document.removeEventListener('paste', handlePaste);
         };
     }, [
         canSelect,
+        confirm,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -13,9 +13,8 @@ const get_animation_item_selection_for_frame_1 = require("./get-animation-item-s
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
-const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
 const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -213,7 +212,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
 const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
-    var _b, _c;
+    var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -225,11 +224,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
-        return {
-            ...fieldRowBase,
-            height: field.rowHeight,
-        };
-    }, [field.rowHeight]);
+        return field.typeName === 'text-content'
+            ? fieldRowBase
+            : { ...fieldRowBase, height: field.rowHeight };
+    }, [field.rowHeight, field.typeName]);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
         nodePath,
@@ -392,9 +390,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         sourceFrame,
         validatedLocation.source,
     ]);
-    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, onDoubleClick: onPropertyDoubleClick, 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 }) })
-        ] }));
+    const row = (jsx_runtime_1.jsx(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, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, 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 }));
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -57,6 +57,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => {

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

@@ -3,4 +3,5 @@ export declare const TimelineFieldLabel: React.FC<{
     readonly rowDepth: number;
     readonly selected: boolean;
     readonly label: string;
+    readonly stacked?: boolean;
 }>;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -4,7 +4,9 @@ exports.TimelineFieldLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
@@ -16,12 +18,14 @@ const fieldNameBase = {
     flex: 1,
     minWidth: 0,
 };
-const TimelineFieldLabel = ({ rowDepth, selected, label }) => {
+const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
+    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
-        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
+        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [rowDepth, selected]);
+    }), [basePadding, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineFieldRowContent: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly rowDepth: number;
+    readonly selected: boolean;
+    readonly children: React.ReactNode;
+}>;