@remotion/studio 4.0.515 → 4.0.516

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -663,7 +663,7 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -679,6 +679,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -687,6 +688,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -694,6 +696,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -764,6 +767,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
             pointerId: e.pointerId,
             button: e.button,
@@ -794,6 +798,9 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             const dx = e.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
+            if (deltaFrames !== 0) {
+                dragState.didMove = true;
+            }
             for (const target of dragState.targets) {
                 const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
                     initialDuration: target.initialDuration,
@@ -854,7 +861,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
 };
 exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
-const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
+const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -862,7 +869,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
@@ -874,6 +881,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         previewServerState,
         overrideIdToNodePathMappings,
         editorSnapping,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -885,6 +893,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         previewServerState,
         overrideIdToNodePathMappings,
         editorSnapping,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -892,9 +901,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
-        setDragging(false);
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, clearEffectDragOverrides: latestClearEffect, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
@@ -945,7 +954,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
+        var _a;
         if (e.button !== 0) {
             return;
         }
@@ -970,115 +979,93 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (targets === null || targets.length === 0) {
             return;
         }
+        (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         e.preventDefault();
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
-            pointerId: e.pointerId,
-            button: e.button,
-            target: e.currentTarget,
             targets,
         };
-        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
-        setDragging(true);
+        // Register before React commits so no pointer move can arrive before
+        // the global session listeners exist.
+        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+            event: e.nativeEvent,
+            captureTarget: e.currentTarget,
+            onMove: (moveEvent) => {
+                const dragState = dragStateRef.current;
+                if (!dragState) {
+                    return;
+                }
+                const dx = moveEvent.clientX - dragState.initialClientX;
+                const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
+                    deltaFrames: Math.round(dx / dragState.pxPerFrame),
+                    pxPerFrame: dragState.pxPerFrame,
+                    snappingEnabled: latestRef.current.editorSnapping,
+                    targets: dragState.targets,
+                });
+                dragState.latestDeltaFrames = deltaFrames;
+                if (deltaFrames !== 0) {
+                    dragState.didMove = true;
+                }
+                for (const target of dragState.targets) {
+                    const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
+                        initialFrom: target.initialFrom,
+                        deltaFrames,
+                    });
+                    latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
+                    for (const keyframeTarget of target.sequenceKeyframes) {
+                        latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
+                            type: 'keyframed',
+                            status: shiftKeyframedStatus({
+                                status: keyframeTarget.status,
+                                deltaFrames,
+                                isDescendant: keyframeTarget.isDescendant,
+                            }),
+                        });
+                    }
+                    for (const keyframeTarget of target.effectKeyframes) {
+                        latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                            type: 'keyframed',
+                            status: shiftKeyframedStatus({
+                                status: keyframeTarget.status,
+                                deltaFrames,
+                                isDescendant: keyframeTarget.isDescendant,
+                            }),
+                        });
+                    }
+                }
+            },
+            onEnd: (reason, endEvent) => {
+                stopPointerSessionRef.current = null;
+                finishDrag((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent !== null);
+            },
+        });
     }, [
         currentSelection,
+        finishDrag,
         propStatusesRef,
         sequencesRef,
         timelineDurationInFrames,
         windowWidth,
     ]);
     (0, react_1.useEffect)(() => {
-        if (!dragging) {
-            return;
-        }
-        const onMove = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            const dx = e.clientX - dragState.initialClientX;
-            const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
-                deltaFrames: Math.round(dx / dragState.pxPerFrame),
-                pxPerFrame: dragState.pxPerFrame,
-                snappingEnabled: latestRef.current.editorSnapping,
-                targets: dragState.targets,
-            });
-            dragState.latestDeltaFrames = deltaFrames;
-            for (const target of dragState.targets) {
-                const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
-                    initialFrom: target.initialFrom,
-                    deltaFrames,
-                });
-                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
-                for (const keyframeTarget of target.sequenceKeyframes) {
-                    latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
-                        type: 'keyframed',
-                        status: shiftKeyframedStatus({
-                            status: keyframeTarget.status,
-                            deltaFrames,
-                            isDescendant: keyframeTarget.isDescendant,
-                        }),
-                    });
-                }
-                for (const keyframeTarget of target.effectKeyframes) {
-                    latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
-                        type: 'keyframed',
-                        status: shiftKeyframedStatus({
-                            status: keyframeTarget.status,
-                            deltaFrames,
-                            isDescendant: keyframeTarget.isDescendant,
-                        }),
-                    });
-                }
-            }
-        };
-        const onUp = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            finishDrag(true);
-        };
-        const onCancel = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            finishDrag(false);
+        return () => {
+            var _a;
+            (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
+            stopPointerSessionRef.current = null;
         };
-        const activeDragState = dragStateRef.current;
-        if (!activeDragState) {
-            return;
-        }
-        return (0, pointer_session_1.startCapturedPointerSession)({
-            event: activeDragState,
-            captureTarget: activeDragState.target,
-            onMove,
-            onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
-                    onUp(endEvent);
-                }
-                else if (endEvent) {
-                    onCancel(endEvent);
-                }
-                else {
-                    finishDrag(false);
-                }
-            },
-        });
-    }, [dragging, finishDrag]);
+    }, []);
     return {
-        dragging,
         onPointerDown,
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -1095,6 +1082,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -1103,6 +1091,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -1110,6 +1099,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -1178,6 +1168,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
             pointerId: e.pointerId,
             button: e.button,
@@ -1211,6 +1202,9 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             const dx = e.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
+            if (deltaFrames !== 0) {
+                dragState.didMove = true;
+            }
             for (const target of dragState.targets) {
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,

package/dist/components/Timeline/TimelineTrack.js

@@ -65,7 +65,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, cascadedStart: track.cascadedStart, localStart: track.localStart, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -10,14 +10,10 @@ const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',

package/dist/components/Timeline/TimelineTranslateField.js

@@ -9,14 +9,10 @@ const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',

package/dist/components/Timeline/TimelineVirtualization.js

@@ -115,12 +115,14 @@ const TimelineVirtualizationProvider = ({ children, hasBeenCut, isStill, timelin
         virtualizer.measure();
     }, [trackHeights, virtualizer]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (revealRequest === null) {
             return;
         }
         const key = getSelectionTrackKey(revealRequest.item);
         const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
-        if (index !== undefined) {
+        if (index !== undefined &&
+            ((_a = virtualizer.getOffsetForIndex(index, 'auto')) === null || _a === void 0 ? void 0 : _a[1]) !== 'auto') {
             virtualizer.scrollToIndex(index, { align: 'center' });
         }
     }, [layout.rootTrackIndexes, revealRequest, virtualizer]);

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
-const call_api_1 = require("../call-api");
+const duplicate_jsx_node_api_1 = require("../duplicate-jsx-node-api");
 const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
@@ -28,7 +28,7 @@ const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, co
 };
 const duplicateSequence = (nodePathInfo) => {
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
-    return (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
+    return (0, duplicate_jsx_node_api_1.duplicateJsxNode)({
         fileName: nodePath.absolutePath,
         nodePath: nodePath.nodePath,
     });
@@ -49,11 +49,7 @@ const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
             const failedResult = results.find((result) => !result.success);
             if (failedResult && !failedResult.success) {
                 (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
-                return;
             }
-            (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
-                ? 'Duplicated sequence in source file'
-                : 'Duplicated sequences in source files', 2000);
         })
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
@@ -75,12 +71,7 @@ const duplicateEffectsFromSource = (effects) => {
         };
     }))
         .then((result) => {
-        if (result.success) {
-            (0, NotificationCenter_1.showNotification)(effects.length === 1
-                ? 'Duplicated effect in source file'
-                : 'Duplicated effects in source files', 2000);
-        }
-        else {
+        if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
     })

package/dist/components/Timeline/get-copy-context-for-agents-menu-item.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare const getCopyContextForAgentsMenuItem: ({ contextForAgents, }: {
+    readonly contextForAgents: string | null;
+}) => ComboboxValue;

package/dist/components/Timeline/get-copy-context-for-agents-menu-item.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCopyContextForAgentsMenuItem = void 0;
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const getCopyContextForAgentsMenuItem = ({ contextForAgents, }) => {
+    return {
+        type: 'item',
+        id: 'copy-context-for-agents',
+        keyHint: null,
+        label: 'Copy context for agents',
+        leftItem: null,
+        disabled: !contextForAgents,
+        onClick: () => {
+            if (!contextForAgents) {
+                return;
+            }
+            navigator.clipboard.writeText(contextForAgents).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+            });
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value: 'copy-context-for-agents',
+    };
+};
+exports.getCopyContextForAgentsMenuItem = getCopyContextForAgentsMenuItem;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -7,6 +7,7 @@ const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const use_default_editor_info_1 = require("../use-default-editor-info");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
     var _a;
@@ -115,25 +116,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'open-in-another-app',
             }
             : null,
-        {
-            type: 'item',
-            id: 'copy-context-for-agents',
-            keyHint: null,
-            label: 'Copy context for agents',
-            leftItem: null,
-            disabled: !contextForAgents,
-            onClick: () => {
-                if (!contextForAgents) {
-                    return;
-                }
-                navigator.clipboard.writeText(contextForAgents).catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                });
-            },
-            quickSwitcherLabel: null,
-            subMenu: null,
-            value: 'copy-context-for-agents',
-        },
+        (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({ contextForAgents }),
         assetLinkInfo
             ? {
                 type: 'item',

package/dist/components/Timeline/get-timeline-sequence-visible-layout.d.ts

@@ -4,6 +4,10 @@ type TimelineSequenceVisibleLayout = {
     readonly cropLeft: number;
     readonly leftEdgeVisible: boolean;
     readonly rightEdgeVisible: boolean;
+    readonly negativeStart: {
+        readonly left: number;
+        readonly width: number;
+    } | null;
     readonly premount: {
         readonly left: number;
         readonly width: number;
@@ -19,9 +23,10 @@ type TimelineSequenceVisibleLayout = {
         readonly fullWidth: number;
     } | null;
 };
-export declare const getTimelineSequenceVisibleLayout: ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }: {
+export declare const getTimelineSequenceVisibleLayout: ({ marginLeft, width, negativeStartWidth, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }: {
     readonly marginLeft: number;
     readonly width: number;
+    readonly negativeStartWidth: number;
     readonly premountWidth: number;
     readonly postmountWidth: number;
     readonly renderWindowLeft: number;

package/dist/components/Timeline/get-timeline-sequence-visible-layout.js

@@ -12,7 +12,7 @@ const getVisibleSection = ({ sectionStart, sectionEnd, cropStart, cropEnd, }) =>
         width: end - start,
     };
 };
-const getTimelineSequenceVisibleLayout = ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }) => {
+const getTimelineSequenceVisibleLayout = ({ marginLeft, width, negativeStartWidth, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }) => {
     const itemStart = marginLeft;
     const itemEnd = marginLeft + width;
     const renderWindowEnd = renderWindowLeft + renderWindowWidth;
@@ -23,7 +23,8 @@ const getTimelineSequenceVisibleLayout = ({ marginLeft, width, premountWidth, po
     }
     const cropStart = visibleStart - itemStart;
     const cropEnd = visibleEnd - itemStart;
-    const mediaStart = premountWidth;
+    const premountStart = negativeStartWidth;
+    const mediaStart = negativeStartWidth + premountWidth;
     const mediaEnd = Math.max(mediaStart, width - postmountWidth);
     const media = getVisibleSection({
         sectionStart: mediaStart,
@@ -37,9 +38,15 @@ const getTimelineSequenceVisibleLayout = ({ marginLeft, width, premountWidth, po
         cropLeft: cropStart,
         leftEdgeVisible: visibleStart === itemStart,
         rightEdgeVisible: visibleEnd === itemEnd,
-        premount: getVisibleSection({
+        negativeStart: getVisibleSection({
             sectionStart: 0,
-            sectionEnd: premountWidth,
+            sectionEnd: negativeStartWidth,
+            cropStart,
+            cropEnd,
+        }),
+        premount: getVisibleSection({
+            sectionStart: premountStart,
+            sectionEnd: premountStart + premountWidth,
             cropStart,
             cropEnd,
         }),

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -97,7 +97,6 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     })
         .then((result) => {
         if (result.success) {
-            (0, NotificationCenter_1.showNotification)('Split sequence', 2000);
             return true;
         }
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,10 +1,10 @@
 import type React from 'react';
 import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 export declare const isTimelineFieldStacked: ({ field, transform3DMode, }: {
     readonly field: SchemaFieldInfo;
     readonly transform3DMode: boolean;
 }) => boolean;
 export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
-export declare const timelineCompactStackedFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineStackedFieldContentStyle = exports.timelineCompactStackedFieldValueColumnStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = void 0;
+exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
     return (field.typeName === 'text-content' ||
         (transform3DMode &&
@@ -31,16 +32,12 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
-exports.timelineCompactStackedFieldValueColumnStyle = {
-    ...exports.timelineFieldValueColumnStyle,
-    marginBottom: -3,
-    position: 'relative',
-    top: -3,
-};
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',
+    boxSizing: 'border-box',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
     minWidth: 0,
+    paddingBlock: 3,
 };

package/dist/components/Timeline/timeline-field-utils.js

@@ -36,7 +36,5 @@ exports.draggerStyle = {
     width: 80,
 };
 exports.leftAlignedDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -132,6 +132,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
+                localFiles: null,
                 preferCompositionStart: false,
             });
         }