@remotion/studio 4.0.483 → 4.0.485

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -73,11 +73,11 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
 Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
-Object.defineProperty(exports, "selectedOutlineUvSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineUvSnapThresholdPx; } });
 Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
+Object.defineProperty(exports, "selectedOutlineUvSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineUvSnapThresholdPx; } });
 Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineRotationDeltaDegrees; } });
-Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
+Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
@@ -105,7 +105,7 @@ const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ scale }) => {
+const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -176,6 +176,8 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
             const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
             const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
+            const textContentFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema.children;
+            const textContentPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses.children;
             const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
                     (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
@@ -228,6 +230,10 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 canTransformOriginTranslateStatus;
             const canDropEffect = previewServerState.type === 'connected' &&
                 (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
+            const canTextEdit = previewServerState.type === 'connected' &&
+                controls !== null &&
+                (textContentFieldSchema === null || textContentFieldSchema === void 0 ? void 0 : textContentFieldSchema.type) === 'text-content' &&
+                textContentPropStatus !== undefined;
             return {
                 key,
                 containsSelection,
@@ -342,6 +348,12 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         })) !== null && _f !== void 0 ? _f : fieldSchema.default),
                     }
                     : null,
+                textEdit: canTextEdit
+                    ? {
+                        nodePath,
+                        propStatus: textContentPropStatus,
+                    }
+                    : null,
                 uvHandles: containsSelection
                     ? (0, selected_outline_uv_1.getSelectedUvHandles)({
                         propStatuses,
@@ -613,28 +625,49 @@ const SelectedOutlineOverlay = ({ scale }) => {
             }
         };
     }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
-    (0, react_1.useEffect)(() => {
-        if (outlineTargets.length === 0) {
+    const updateOutlines = (0, react_1.useCallback)(() => {
+        if (overlayRef.current === null || outlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
             return;
         }
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
+        setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
+            ? prevOutlines
+            : nextOutlines);
+    }, [outlineTargets]);
+    (0, react_1.useLayoutEffect)(() => {
+        updateOutlines();
+    }, [outlineTargets, scale, translationX, translationY, updateOutlines]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (outlineTargets.length === 0 || typeof ResizeObserver === 'undefined') {
+            return;
+        }
         let animationFrame = null;
-        const updateOutlines = () => {
-            if (overlayRef.current) {
-                const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
-                setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
-                    ? prevOutlines
-                    : nextOutlines);
+        const scheduleUpdate = () => {
+            if (animationFrame !== null) {
+                return;
             }
-            animationFrame = requestAnimationFrame(updateOutlines);
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = null;
+                updateOutlines();
+            });
         };
-        updateOutlines();
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        if (overlayRef.current !== null) {
+            resizeObserver.observe(overlayRef.current);
+        }
+        for (const target of outlineTargets) {
+            if (target.ref.current !== null) {
+                resizeObserver.observe(target.ref.current);
+            }
+        }
         return () => {
             if (animationFrame !== null) {
                 cancelAnimationFrame(animationFrame);
             }
+            resizeObserver.disconnect();
         };
-    }, [outlineTargets]);
+    }, [outlineTargets, updateOutlines]);
     if (outlineTargets.length === 0) {
         return null;
     }

package/dist/components/Timeline/EasingEditorModal.js

@@ -80,8 +80,8 @@ const inlineContainer = {
 const segmentedControlWrapper = {
     display: 'flex',
     justifyContent: 'flex-start',
+    marginTop: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
-    marginBottom: 10,
 };
 const presetButtonsWrapper = {
     display: 'flex',
@@ -91,6 +91,10 @@ const presetButtonsWrapper = {
     marginBottom: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+const inspectorPresetButtonsWrapper = {
+    ...presetButtonsWrapper,
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+};
 const presetButtonBase = {
     alignItems: 'center',
     backgroundColor: colors_1.INPUT_BACKGROUND,
@@ -721,10 +725,11 @@ const EasingEditor = ({ state, renderHeader }) => {
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
         padding: '0 12px 12px',
     }), []);
-    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? (renderHeader(modeItems)) : (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" }) })), jsx_runtime_1.jsx("div", { style: presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
+    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
@@ -738,7 +743,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                 ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: "white" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Damping" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.damping, status: "ok", onValueChange: (value) => setSpringNumber('damping', value, false), onValueChangeEnd: (value) => setSpringNumber('damping', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.damping.min, max: SPRING_LIMITS.damping.max, step: SPRING_LIMITS.damping.step, formatter: springFormatters.damping, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.damping, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -11,6 +11,7 @@ const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
 const TimelineDeleteKeybindings = () => {
@@ -24,6 +25,9 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -58,7 +62,13 @@ const TimelineDeleteKeybindings = () => {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)(selectedItems);
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                            selections: selectedItems,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                            propStatuses,
+                            timelinePosition: timelinePositionRef.current,
+                        });
                         if (nextSelection.length === 0) {
                             clearSelection();
                         }
@@ -119,7 +129,10 @@ const TimelineDeleteKeybindings = () => {
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'd',
-            callback: () => {
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
+                    return;
+                }
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -138,10 +151,39 @@ const TimelineDeleteKeybindings = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const split = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
+                    return;
+                }
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+                    selections: selectedItems,
+                    sequences: sequencesRef.current,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses: propStatusesRef.current,
+                    splitFrame: timelinePositionRef.current,
+                });
+                if (splitPromise === null) {
+                    return;
+                }
+                splitPromise.catch(() => undefined);
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         return () => {
             backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
+            split.unregister();
         };
     }, [
         canSelect,
@@ -154,6 +196,7 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
+        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -10,6 +10,7 @@ const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 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");
@@ -22,6 +23,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -219,6 +221,9 @@ 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 { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
@@ -359,7 +364,83 @@ 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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
+        if (propStatus === null || propStatus.status === 'computed') {
+            return;
+        }
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame: sourceFrame + keyframeDisplayOffset,
+        };
+        if (propStatus.status === 'static') {
+            if (!keyframable || previewServerState.type !== 'connected') {
+                return;
+            }
+            const value = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus,
+                dragOverrideValue,
+                frame: sourceFrame,
+                defaultValue: field.fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            event.stopPropagation();
+            (0, call_add_keyframe_1.callAddEffectKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema: field.effectSchema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            selectItems([keyframeSelection], { reveal: true });
+            seekToDisplayFrame(keyframeSelection.frame);
+            return;
+        }
+        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
+            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
+            keyframeDisplayOffset,
+            keyframes: propStatus.keyframes,
+            nodePathInfo,
+            sourceFrame,
+        });
+        if (targetSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        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 }) })
         ] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,6 +56,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: 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/TimelineInOutPointerHandle.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
     height: '100%',
@@ -30,7 +31,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, tim
             top: 0,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true }));
 };
 const TimelineInOutPointerHandle = ({ dragging, onPointerDown, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -11,11 +11,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -111,6 +113,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        includeTextContent: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {
@@ -262,7 +265,7 @@ const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
@@ -270,7 +273,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -385,37 +388,65 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             return;
         }
         if (hasKeyframeAtCurrentFrame) {
-            const deleteChanges = keyframeToggleTargets.flatMap((target) => {
+            const deleteTargets = keyframeToggleTargets.flatMap((target) => {
                 const change = getDeleteChange(target);
-                return change === null ? [] : [change];
+                return change === null ? [] : [{ target, change }];
             });
+            const singleDeleteTarget = deleteTargets[0];
+            const easingSelection = deleteTargets.length === 1 &&
+                singleDeleteTarget &&
+                isKeyframedStatus(singleDeleteTarget.target.propStatus) &&
+                (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(singleDeleteTarget.target.propStatus.interpolationFunction)
+                ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+                    deletedSourceFrames: [singleDeleteTarget.target.sourceFrame],
+                    keyframeDisplayOffset: singleDeleteTarget.target.keyframeDisplayOffset,
+                    nodePathInfo: singleDeleteTarget.target.nodePathInfo,
+                    propStatus: singleDeleteTarget.target.propStatus,
+                    timelinePosition,
+                })
+                : null;
+            const deleteChanges = deleteTargets.map(({ change }) => change);
             await (0, call_delete_keyframe_1.callDeleteKeyframes)({
                 sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
                 effectKeyframes: deleteChanges.filter((change) => hasEffectIndex(change)),
                 setPropStatuses,
                 clientId,
             });
+            if (mode === 'timeline' && easingSelection !== null) {
+                selectItems([easingSelection], { reveal: true });
+            }
             return;
         }
         const addChanges = keyframeToggleTargets.flatMap((target) => {
             const change = getAddChange(target);
-            return change === null ? [] : [change];
+            return change === null ? [] : [{ target, change }];
         });
         if (addChanges.length === 0) {
             return;
         }
+        const addChangeValues = addChanges.map(({ change }) => change);
         await (0, call_add_keyframe_1.callAddKeyframes)({
-            sequenceKeyframes: addChanges.filter((change) => !hasEffectIndex(change)),
-            effectKeyframes: addChanges.filter((change) => hasEffectIndex(change)),
+            sequenceKeyframes: addChangeValues.filter((change) => !hasEffectIndex(change)),
+            effectKeyframes: addChangeValues.filter((change) => hasEffectIndex(change)),
             setPropStatuses,
             clientId,
         });
+        if (mode === 'timeline') {
+            selectItems(addChanges.map(({ target }) => ({
+                type: 'keyframe',
+                nodePathInfo: target.nodePathInfo,
+                frame: target.sourceFrame + target.keyframeDisplayOffset,
+            })), { reveal: true });
+        }
     }, [
         canToggleKeyframe,
         clientId,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
+        mode,
+        selectItems,
         setPropStatuses,
+        timelinePosition,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
+export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+    readonly selected: boolean;
+}>;
 export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
     readonly fromFrame: number;
     readonly toFrame: number;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeEasingLine = void 0;
+exports.TimelineKeyframeEasingLine = exports.TimelineKeyframeEasingLineVisual = exports.getTimelineKeyframeEasingLineStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
@@ -67,6 +67,16 @@ const easingLine = {
     top: '50%',
     transform: 'translateY(-50%)',
 };
+const getTimelineKeyframeEasingLineStyle = (selected) => ({
+    ...easingLine,
+    outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+});
+exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
+const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+    const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
+    return jsx_runtime_1.jsx("div", { style: lineStyle });
+};
+exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
     const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -176,10 +186,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         toFrame,
         videoConfig.durationInFrames,
     ]);
-    const lineStyle = (0, react_1.useMemo)(() => ({
-        ...easingLine,
-        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
-    }), [selected]);
     const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
         onSelect,
         selectable,
@@ -190,7 +196,7 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
         ] }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -8,6 +8,7 @@ const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
+const TimelineTextContentField_1 = require("./TimelineTextContentField");
 const TimelineTransformOriginField_1 = require("./TimelineTransformOriginField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
@@ -52,6 +53,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'enum') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'text-content') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineSelection.js

@@ -404,6 +404,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getDragOverrides,
             getEffectDragOverrides,
             propStatuses,
+            includeTextContent: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,