@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Splitter/SplitterContext.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
+exports.SplitterLayoutContext = exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
 const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }) => {
     if (availableSize === null || availableSize <= 0) {
@@ -21,6 +21,8 @@ const getClampedSplitterFlex = ({ flexValue, ...bounds }) => {
 exports.getClampedSplitterFlex = getClampedSplitterFlex;
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
+    collapsedDuringDrag: null,
+    setCollapsedDuringDrag: () => undefined,
     ref: { current: null },
     setFlexValue: () => undefined,
     isDragging: { current: false },
@@ -35,3 +37,5 @@ exports.SplitterContext = react_1.default.createContext({
     id: '--',
     persistFlex: () => undefined,
 });
+// Propagate layout changes only through the affected splitter subtree.
+exports.SplitterLayoutContext = react_1.default.createContext(null);

package/dist/components/Splitter/SplitterElement.js

@@ -15,7 +15,9 @@ const SplitterElement = ({ children, type, sticky }) => {
             flex: 
             // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
             (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
-            display: 'flex',
+            display: context.collapsedDuringDrag === (type === 'flexer' ? 'left' : 'right')
+                ? 'none'
+                : 'flex',
             position: 'relative',
             overflow: 'hidden',
             flexDirection: 'column',
@@ -28,7 +30,14 @@ const SplitterElement = ({ children, type, sticky }) => {
                 ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
                 : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
+    }, [
+        context.collapsedDuringDrag,
+        context.flexValue,
+        context.orientation,
+        maxSize,
+        minSize,
+        type,
+    ]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.d.ts

@@ -3,4 +3,5 @@ export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
     readonly allowToCollapse: 'right' | 'left' | 'none';
     readonly onCollapse: () => void;
+    readonly onCollapseDuringDrag: ((side: 'left' | 'right' | null) => void) | null;
 }>;

package/dist/components/Splitter/SplitterHandle.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -11,10 +10,14 @@ exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
     height: exports.SPLITTER_HANDLE_SIZE,
 };
+const collapsedContainer = {
+    width: 0,
+    height: 0,
+};
 const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
 };
-const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
+const SplitterHandle = ({ allowToCollapse, onCollapse, onCollapseDuringDrag }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     if (!context) {
         throw new Error('Cannot find splitter context');
@@ -22,8 +25,13 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const ref = (0, react_1.useRef)(null);
     // Keep the latest props/context readable inside the long-lived pointerdown
     // listener without re-subscribing it on every render.
-    const latest = (0, react_1.useRef)({ context, allowToCollapse, onCollapse });
-    latest.current = { context, allowToCollapse, onCollapse };
+    const latest = (0, react_1.useRef)({
+        context,
+        allowToCollapse,
+        onCollapse,
+        onCollapseDuringDrag,
+    });
+    latest.current = { context, allowToCollapse, onCollapse, onCollapseDuringDrag };
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -75,41 +83,59 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 }
                 return newFlex;
             };
+            const getCollapsedSide = (ev) => {
+                const collapse = latest.current.allowToCollapse;
+                const unclamped = getNewValue(ev, false);
+                if (collapse === 'left' && unclamped < dragContext.minFlex / 2) {
+                    return 'left';
+                }
+                if (collapse === 'right' &&
+                    1 - unclamped < (1 - dragContext.maxFlex) / 2) {
+                    return 'right';
+                }
+                return null;
+            };
+            let lastFlex = startFlex;
+            let lastCollapsedSide = null;
             const onPointerMove = (ev) => {
+                var _a, _b;
                 if (!dragContext.isDragging.current) {
                     return;
                 }
-                dragContext.setFlexValue(getNewValue(ev, true));
-                const collapse = latest.current.allowToCollapse;
-                if (collapse === 'left') {
-                    const unclamped = getNewValue(ev, false);
-                    if (unclamped < dragContext.minFlex / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
-                else if (collapse === 'right') {
-                    const unclamped = 1 - getNewValue(ev, false);
-                    if (unclamped < (1 - dragContext.maxFlex) / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
+                // Keep the handle mounted and captured until release, even while
+                // the panel is hidden, so moving inward can restore it.
+                lastCollapsedSide = getCollapsedSide(ev);
+                lastFlex = getNewValue(ev, true);
+                (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, lastCollapsedSide);
+                dragContext.setCollapsedDuringDrag(lastCollapsedSide);
+                dragContext.setFlexValue(lastFlex);
             };
             endDrag = (0, pointer_session_1.startCapturedPointerSession)({
                 event: e,
                 captureTarget: current,
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
+                    var _a, _b;
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        endEvent &&
-                        dragContext.isDragging.current) {
-                        dragContext.persistFlex(getNewValue(endEvent, true));
+                        endEvent) {
+                        lastFlex = getNewValue(endEvent, true);
+                        lastCollapsedSide = getCollapsedSide(endEvent);
+                    }
+                    // Capture loss and cancellation may have no usable coordinates.
+                    // Commit the last displayed state instead of resetting the panel.
+                    if (reason !== 'manual' && dragContext.isDragging.current) {
+                        const savedFlex = lastCollapsedSide === null ? lastFlex : startFlex;
+                        dragContext.setFlexValue(savedFlex);
+                        dragContext.persistFlex(savedFlex);
+                        if (lastCollapsedSide !== null) {
+                            latest.current.onCollapse();
+                        }
                     }
+                    (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+                    dragContext.setCollapsedDuringDrag(null);
                     dragContext.isDragging.current = false;
                     (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                     endDrag = null;
-                    player_1.PlayerInternals.updateAllElementsSizes();
                 },
             });
         };
@@ -124,6 +150,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             context.orientation === 'horizontal'
                 ? 'remotion-splitter-horizontal'
                 : 'remotion-splitter-vertical',
-        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+        ].join(' '), style: context.collapsedDuringDrag !== null
+            ? collapsedContainer
+            : context.orientation === 'horizontal'
+                ? containerRow
+                : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

package/dist/components/Tabs/vertical.d.ts

@@ -5,4 +5,5 @@ export declare const VerticalTab: React.FC<{
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
+    readonly autoFocus?: boolean;
 }>;

package/dist/components/Tabs/vertical.js

@@ -19,7 +19,7 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -38,6 +38,6 @@ const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
             ...style,
         };
     }, [color, hovered, selected, style]);
-    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
+    return (jsx_runtime_1.jsxs("button", { autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TimeValue.js

@@ -102,13 +102,12 @@ const TimeValue = () => {
     }), [seek, play, pause, toggle]);
     (0, react_1.useEffect)(() => {
         const gKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'g',
+            event: 'keydown',
+            action: 'goToFrame',
             callback: () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/SequencePropsObserver.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const TimelineSelection_1 = require("./TimelineSelection");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -18,6 +19,7 @@ const SequencePropsObserver = () => {
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { remapSelectionNodePaths } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -36,6 +38,7 @@ const SequencePropsObserver = () => {
         if (mutations.length === 0) {
             return;
         }
+        remapSelectionNodePaths(mutations);
         const statusRemappings = [];
         const overrideUpdates = [];
         const overrideIdsToRefresh = new Set();
@@ -127,6 +130,7 @@ const SequencePropsObserver = () => {
         fastRefreshes,
         migrateExpandedTracksForSubscriptionKey,
         propStatusesRef,
+        remapSelectionNodePaths,
         remapPropStatuses,
         setOverrideIdToNodePath,
     ]);

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

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

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
+const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects, videoConfigValues, }) => {
     const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack, overrideId);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
@@ -22,6 +22,7 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         originalLocation: resolvedLocation,
         preferMappedNodePath,
         stack,
+        videoConfigValues,
     });
     return null;
 };

package/dist/components/Timeline/Timeline.js

@@ -63,7 +63,6 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
-const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -75,7 +74,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
+const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -99,7 +98,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -107,44 +105,6 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
-    (0, react_1.useEffect)(() => {
-        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
-        if (!verticalScroll) {
-            return;
-        }
-        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
-            includeHorizontal: false,
-            includeVertical: true,
-            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
-            onTick: (directions) => {
-                if (directions.y === null) {
-                    return;
-                }
-                verticalScroll.scrollTop +=
-                    directions.y === 'up'
-                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
-                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
-            },
-        });
-        const onDragOver = (event) => {
-            if (!event.dataTransfer ||
-                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
-                autoScroll.stop();
-                return;
-            }
-            autoScroll.update(event);
-        };
-        const stopAutoScroll = () => autoScroll.stop();
-        verticalScroll.addEventListener('dragover', onDragOver, true);
-        document.addEventListener('dragend', stopAutoScroll, true);
-        document.addEventListener('drop', stopAutoScroll, true);
-        return () => {
-            autoScroll.stop();
-            verticalScroll.removeEventListener('dragover', onDragOver, true);
-            document.removeEventListener('dragend', stopAutoScroll, true);
-            document.removeEventListener('drop', stopAutoScroll, true);
-        };
-    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -356,9 +316,20 @@ const TimelineInner = () => {
         timeline,
     ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
-    }, [durationInFrames, timeline]);
+        return timeline.filter((t) => {
+            // Moving outside the composition can reduce the displayed duration to
+            // zero. Keep the drag owner mounted until its pending edit is saved.
+            if (t.sequence.showInTimeline &&
+                t.nodePathInfo !== null &&
+                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
+                    undefined) {
+                return true;
+            }
+            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
+        });
+    }, [durationInFrames, getDragOverrides, timeline]);
     // Keep `filtered` complete so a future toggle can show every programmatic
     // instance without recalculating the timeline or losing its instance index.
     const collapsed = (0, react_1.useMemo)(() => {
@@ -388,10 +359,10 @@ const TimelineInner = () => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects, videoConfigValues: sequence.controls.videoConfigValues }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenProvider, { value: layerChildrenValue, children: jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: jsx_runtime_1.jsxs(TimelineVirtualization_1.TimelineVirtualizationProvider, { hasBeenCut: hasBeenCut, isStill: isStill, timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, {})) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                             jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, onCollapseDuringDrag: null, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                                 jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                             ] }), children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                                 jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null] }) })
@@ -402,6 +373,6 @@ const TimelineInner = () => {
 };
 const MemoizedTimelineInner = react_1.default.memo(TimelineInner);
 const Timeline = () => {
-    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }));
+    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }) }));
 };
 exports.Timeline = Timeline;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -367,7 +367,7 @@ const TimelineClipboardKeybindings = () => {
         const { clientId } = previewServerState;
         const copy = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'c',
+            action: 'copyEffectsAndValues',
             callback: (e) => {
                 var _a, _b;
                 const { selectedItems } = currentSelection.current;
@@ -509,14 +509,13 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const cut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'x',
+            action: 'cutEffects',
             callback: (e) => {
                 const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
@@ -575,7 +574,6 @@ const TimelineClipboardKeybindings = () => {
                     (0, NotificationCenter_1.showNotification)(`Could not cut effects: ${err.message}`, 2000);
                 });
             },
-            commandCtrlKey: true,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -25,31 +25,18 @@ const TimelineDeleteKeybindings = () => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const backspace = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Backspace',
-            callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'Delete',
+            action: 'deleteSelection',
             callback: () => deleteTimelineItems(null),
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
-                    return;
-                }
+            action: 'duplicateSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -63,7 +50,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 duplicatePromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -97,7 +83,6 @@ const TimelineDeleteKeybindings = () => {
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
             split.unregister();

package/dist/components/Timeline/TimelineDragHandler.js

@@ -80,6 +80,7 @@ const TimelineDragHandler = () => {
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
         var _b, _c, _d, _e;
@@ -90,16 +91,20 @@ const TimelineDragHandler = () => {
         const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
             durationInFrames,
             timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
-            zoom: canvasContent.type === 'composition'
-                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
-                : null,
+            zoom: videoId ? ((_e = zoomMap[videoId]) !== null && _e !== void 0 ? _e : null) : null,
         });
         return {
             ...container,
             width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
+    }, [
+        canvasContent,
+        timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width,
+        video === null || video === void 0 ? void 0 : video.durationInFrames,
+        videoId,
+        zoomMap,
+    ]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
@@ -110,7 +115,7 @@ const TimelineDragHandler = () => {
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
-    var _a;
+    var _a, _b;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -315,6 +320,6 @@ const TimelineDragHandlerInner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: { ...style, minWidth: (_b = size === null || size === void 0 ? void 0 : size.width) !== null && _b !== void 0 ? _b : 0 }, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
 };
 const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -47,6 +47,7 @@ const rowClipper = {
     boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
+    minWidth: `calc(100% + ${timeline_layout_1.TIMELINE_PADDING * 2}px)`,
     overflow: 'hidden',
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,