@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasingSelectionAfterKeyframeDelete = void 0;
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const getEasingSelectionAfterKeyframeDelete = ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }) => {
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
     const deletedSourceFrameSet = new Set(deletedSourceFrames);
     const remainingKeyframes = propStatus.keyframes.filter((keyframe) => !deletedSourceFrameSet.has(keyframe.frame));
-    const sourceFrame = timelinePosition - keyframeDisplayOffset;
+    const sourceFrame = timelinePosition - resolvedKeyframeDisplayOffset;
     for (let i = 0; i < remainingKeyframes.length - 1; i++) {
         const keyframe = remainingKeyframes[i];
         const nextKeyframe = remainingKeyframes[i + 1];
@@ -15,8 +20,8 @@ const getEasingSelectionAfterKeyframeDelete = ({ deletedSourceFrames, keyframeDi
             return {
                 type: 'easing',
                 nodePathInfo,
-                fromFrame: keyframe.frame + keyframeDisplayOffset,
-                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                fromFrame: keyframe.frame + resolvedKeyframeDisplayOffset,
+                toFrame: nextKeyframe.frame + resolvedKeyframeDisplayOffset,
                 segmentIndex: i,
             };
         }

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

@@ -6,6 +6,7 @@ const format_file_location_1 = require("../../helpers/format-file-location");
 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 timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
     var _a;
@@ -26,16 +27,17 @@ const normalizeMenuDividers = (items) => {
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
 const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
-    var _a, _b, _c, _d;
-    var _e, _f, _g;
-    const editorName = window.remotion_editorName;
+    var _a, _b, _c;
+    var _d, _e, _f;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
-    const installedEditors = (_e = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _e !== void 0 ? _e : [];
-    const defaultEditorId = (_f = (_b = installedEditors.find((editor) => editor.nameWithType === editorName)) === null || _b === void 0 ? void 0 : _b.id) !== null && _f !== void 0 ? _f : null;
+    const installedEditors = (_d = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _d !== void 0 ? _d : [];
+    const defaultEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const defaultEditor = installedEditors.find((editor) => editor.id === defaultEditorId);
+    const editorName = (_e = defaultEditor === null || defaultEditor === void 0 ? void 0 : defaultEditor.nameWithType) !== null && _e !== void 0 ? _e : null;
     const defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
     const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
         location: originalLocation,
-        name: sequence.displayName || ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.componentName) || null,
+        name: sequence.displayName || ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) || null,
         root: window.remotion_cwd,
     });
     const openInCodingAgentWithContext = (codingAgentId, codingAgentName) => {
@@ -46,7 +48,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             codingAgentInfo,
             editorDisabled: !canOpenInEditor || !originalLocation,
             editorInfo,
-            excludeCodingAgentId: (_g = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _g !== void 0 ? _g : null,
+            excludeCodingAgentId: (_f = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _f !== void 0 ? _f : null,
             excludeEditorId: defaultEditorId,
             fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
             folder: false,
@@ -161,7 +163,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 keyHint: null,
                 label: 'Copy SVG',
                 leftItem: null,
-                disabled: !((_d = sequence.refForOutline) === null || _d === void 0 ? void 0 : _d.current),
+                disabled: !((_c = sequence.refForOutline) === null || _c === void 0 ? void 0 : _c.current),
                 onClick: () => {
                     var _a;
                     const svg = (_a = sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current;

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -1,6 +1,9 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
-export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
+import type { CanUpdateSequencePropStatus } from 'remotion';
 export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number) => {
     frame: number;
     value: unknown;
 }[];
+export declare const getKeyframeDisplayOffset: ({ propStatus, keyframeDisplayOffset, }: {
+    propStatus: CanUpdateSequencePropStatus | null | undefined;
+    keyframeDisplayOffset: number;
+}) => number;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -1,13 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
-const getComputedStatusLabel = (propStatus) => {
-    if (propStatus.status === 'computed') {
-        return 'computed';
-    }
-    throw new Error(`Unsupported prop status: ${propStatus.status}`);
-};
-exports.getComputedStatusLabel = getComputedStatusLabel;
+exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = void 0;
 const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     if (!propStatus) {
         return [];
@@ -16,12 +9,25 @@ const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
         return [];
     }
     const { keyframes } = propStatus;
-    if (keyframeDisplayOffset === 0) {
+    const resolvedKeyframeDisplayOffset = (0, exports.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
+    if (resolvedKeyframeDisplayOffset === 0) {
         return keyframes;
     }
     return keyframes.map((keyframe) => ({
         ...keyframe,
-        frame: keyframe.frame + keyframeDisplayOffset,
+        frame: keyframe.frame + resolvedKeyframeDisplayOffset,
     }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;
+const getKeyframeDisplayOffset = ({ propStatus, keyframeDisplayOffset, }) => {
+    return (keyframeDisplayOffset +
+        ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static'
+            ? propStatus.keyframeDisplayOffsetAdjustment === null
+                ? 0
+                : propStatus.keyframeDisplayOffsetAdjustment
+            : 0));
+};
+exports.getKeyframeDisplayOffset = getKeyframeDisplayOffset;

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

@@ -0,0 +1,30 @@
+type TimelineSequenceVisibleLayout = {
+    readonly marginLeft: number;
+    readonly width: number;
+    readonly cropLeft: number;
+    readonly leftEdgeVisible: boolean;
+    readonly rightEdgeVisible: boolean;
+    readonly premount: {
+        readonly left: number;
+        readonly width: number;
+    } | null;
+    readonly postmount: {
+        readonly left: number;
+        readonly width: number;
+    } | null;
+    readonly media: {
+        readonly left: number;
+        readonly width: number;
+        readonly offset: number;
+        readonly fullWidth: number;
+    } | null;
+};
+export declare const getTimelineSequenceVisibleLayout: ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }: {
+    readonly marginLeft: number;
+    readonly width: number;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
+    readonly renderWindowLeft: number;
+    readonly renderWindowWidth: number;
+}) => TimelineSequenceVisibleLayout | null;
+export {};

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineSequenceVisibleLayout = void 0;
+const getVisibleSection = ({ sectionStart, sectionEnd, cropStart, cropEnd, }) => {
+    const start = Math.max(sectionStart, cropStart);
+    const end = Math.min(sectionEnd, cropEnd);
+    if (end <= start) {
+        return null;
+    }
+    return {
+        left: start - cropStart,
+        width: end - start,
+    };
+};
+const getTimelineSequenceVisibleLayout = ({ marginLeft, width, premountWidth, postmountWidth, renderWindowLeft, renderWindowWidth, }) => {
+    const itemStart = marginLeft;
+    const itemEnd = marginLeft + width;
+    const renderWindowEnd = renderWindowLeft + renderWindowWidth;
+    const visibleStart = Math.max(itemStart, renderWindowLeft);
+    const visibleEnd = Math.min(itemEnd, renderWindowEnd);
+    if (visibleEnd <= visibleStart) {
+        return null;
+    }
+    const cropStart = visibleStart - itemStart;
+    const cropEnd = visibleEnd - itemStart;
+    const mediaStart = premountWidth;
+    const mediaEnd = Math.max(mediaStart, width - postmountWidth);
+    const media = getVisibleSection({
+        sectionStart: mediaStart,
+        sectionEnd: mediaEnd,
+        cropStart,
+        cropEnd,
+    });
+    return {
+        marginLeft: visibleStart,
+        width: visibleEnd - visibleStart,
+        cropLeft: cropStart,
+        leftEdgeVisible: visibleStart === itemStart,
+        rightEdgeVisible: visibleEnd === itemEnd,
+        premount: getVisibleSection({
+            sectionStart: 0,
+            sectionEnd: premountWidth,
+            cropStart,
+            cropEnd,
+        }),
+        postmount: getVisibleSection({
+            sectionStart: Math.max(0, width - postmountWidth),
+            sectionEnd: width,
+            cropStart,
+            cropEnd,
+        }),
+        media: media
+            ? {
+                ...media,
+                offset: Math.max(0, cropStart - mediaStart),
+                fullWidth: Math.max(0, mediaEnd - mediaStart),
+            }
+            : null,
+    };
+};
+exports.getTimelineSequenceVisibleLayout = getTimelineSequenceVisibleLayout;

package/dist/components/Timeline/keyframe-clipboard.js

@@ -4,6 +4,7 @@ exports.getPasteKeyframeTarget = exports.isKeyframeValueCompatible = exports.get
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const getKeyframeClipboardFieldType = ({ schema, fieldKey, }) => {
     const field = remotion_1.Internals.getFlatSchemaWithAllKeys(schema)[fieldKey];
@@ -68,7 +69,10 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
                 fieldKey: identity.fieldKey,
             }),
             propStatus: sequencePropStatus,
-            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: sequencePropStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            }),
         };
     }
     const effect = track.sequence.effects[identity.effectIndex];
@@ -93,7 +97,10 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
             fieldKey: identity.fieldKey,
         }),
         propStatus: effectPropStatus,
-        keyframeDisplayOffset: track.keyframeDisplayOffset,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: effectPropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        }),
     };
 };
 const areResolvedFieldsEqual = (first, second) => {

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
-const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const split_jsx_sequence_api_1 = require("../split-jsx-sequence-api");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const staticNumberish = (status) => {
     if (!status) {
@@ -89,7 +89,7 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
 exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
 const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
-    return (0, call_api_1.callApi)('/api/split-jsx-sequence', {
+    return (0, split_jsx_sequence_api_1.splitJsxSequence)({
         fileName: nodePath.absolutePath,
         nodePath: nodePath.nodePath,
         sequenceKeys: nodePath.sequenceKeys,

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -2,6 +2,30 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollRight: boolean;
     canScrollLeft: boolean;
 };
+export declare const SCROLL_INCREMENT = 200;
+export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+export type TimelineEdgeScrollDirections = {
+    x: 'left' | 'right' | null;
+    y: 'up' | 'down' | null;
+};
+export type TimelineEdgeAutoScroller = {
+    update: (e: {
+        clientX: number;
+        clientY: number;
+    }) => TimelineEdgeScrollDirections;
+    stop: () => void;
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+export declare const startTimelineEdgeAutoScroll: ({ includeVertical, onTick, }: {
+    includeVertical: boolean;
+    onTick: (directions: TimelineEdgeScrollDirections) => void;
+}) => TimelineEdgeAutoScroller;
 export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {
     durationInFrames: number;
     width: number;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSlider_1 = require("./TimelineSlider");
 const canScrollTimelineIntoDirection = () => {
@@ -13,7 +14,126 @@ const canScrollTimelineIntoDirection = () => {
     return { canScrollRight, canScrollLeft };
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
-const SCROLL_INCREMENT = 200;
+exports.SCROLL_INCREMENT = 200;
+exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+const EDGE_SCROLL_INTERVAL_MS = 100;
+// Once edge-scrolling has started, the pointer must move this many pixels
+// back inside the timeline to stop it. Prevents pixel jitter around the edge
+// threshold from rapidly cancelling and restarting the auto-scroll.
+const EDGE_SCROLL_EXIT_HYSTERESIS = 8;
+// The vertical edge zones extend this many pixels into the viewport, so the
+// auto-scroll already engages when dragging close to (not exactly onto) the
+// top or bottom edge.
+const EDGE_SCROLL_VERTICAL_INSET = 8;
+const canScrollTimelineVerticallyIntoDirection = () => {
+    const { current } = timeline_refs_1.timelineVerticalScroll;
+    if (!current) {
+        return { canScrollUp: false, canScrollDown: false };
+    }
+    const { scrollTop, scrollHeight, clientHeight } = current;
+    return {
+        canScrollUp: scrollTop > 0,
+        canScrollDown: scrollHeight - scrollTop - clientHeight > 0,
+    };
+};
+const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, }) => {
+    let x = null;
+    const scrollable = timeline_refs_1.scrollableRef.current;
+    if (scrollable) {
+        const rect = scrollable.getBoundingClientRect();
+        const leftThreshold = rect.left + (active.x === 'left' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const rightThreshold = rect.left +
+            scrollable.clientWidth -
+            timeline_layout_1.TIMELINE_PADDING -
+            (active.x === 'right' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollLeft, canScrollRight } = (0, exports.canScrollTimelineIntoDirection)();
+        if (clientX <= leftThreshold && canScrollLeft) {
+            x = 'left';
+        }
+        else if (clientX >= rightThreshold && canScrollRight) {
+            x = 'right';
+        }
+    }
+    let y = null;
+    const vertical = timeline_refs_1.timelineVerticalScroll.current;
+    if (includeVertical && vertical) {
+        const rect = vertical.getBoundingClientRect();
+        const topThreshold = rect.top +
+            EDGE_SCROLL_VERTICAL_INSET +
+            (active.y === 'up' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const bottomThreshold = rect.bottom -
+            EDGE_SCROLL_VERTICAL_INSET -
+            (active.y === 'down' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollUp, canScrollDown } = canScrollTimelineVerticallyIntoDirection();
+        if (clientY <= topThreshold && canScrollUp) {
+            y = 'up';
+        }
+        else if (clientY >= bottomThreshold && canScrollDown) {
+            y = 'down';
+        }
+    }
+    return { x, y };
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
+    let active = { x: null, y: null };
+    let lastPointer = null;
+    let interval = null;
+    const stopInterval = () => {
+        if (interval !== null) {
+            clearInterval(interval);
+            interval = null;
+        }
+    };
+    const tick = () => {
+        if (lastPointer === null) {
+            return;
+        }
+        active = getEdgeScrollDirections({
+            clientX: lastPointer.clientX,
+            clientY: lastPointer.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x === null && active.y === null) {
+            stopInterval();
+            return;
+        }
+        onTick(active);
+    };
+    const update = (e) => {
+        lastPointer = { clientX: e.clientX, clientY: e.clientY };
+        active = getEdgeScrollDirections({
+            clientX: e.clientX,
+            clientY: e.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x !== null || active.y !== null) {
+            if (interval === null) {
+                onTick(active);
+                interval = setInterval(tick, EDGE_SCROLL_INTERVAL_MS);
+            }
+        }
+        else {
+            stopInterval();
+        }
+        return active;
+    };
+    const stop = () => {
+        stopInterval();
+        lastPointer = null;
+        active = { x: null, y: null };
+    };
+    return { update, stop };
+};
+exports.startTimelineEdgeAutoScroll = startTimelineEdgeAutoScroll;
 const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
     var _a;
     return ((0, exports.getFrameFromX)({
@@ -28,7 +148,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = (0, exports.getFrameFromX)({
-        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - exports.SCROLL_INCREMENT,
         durationInFrames,
         width,
         extrapolate: 'clamp',
@@ -71,6 +191,9 @@ exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
     var _a, _b, _c;
     var _d, _e;
+    // Sync the imperative frame first: scrolling below triggers the scroll
+    // listener in TimelineSlider, which reads the frame imperatively.
+    (0, imperative_state_1.setCurrentFrame)(frame);
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
     const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
     const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
@@ -183,7 +306,7 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     const nextFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
         width,
-        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + exports.SCROLL_INCREMENT,
     });
     const currentFrame = calculateFrameWhileScrollingRight({
         durationInFrames,

package/dist/components/Timeline/use-open-sequence-in-apps.js

@@ -13,21 +13,21 @@ const useOpenSequenceInApps = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { resolvedLocation: originalLocation } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack, (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id);
-    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewConnected);
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
-    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
-    const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
+    const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewConnected);
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
+    const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(editorAvailable && originalLocation), [editorAvailable, originalLocation]);
     const openInEditor = (0, react_1.useCallback)(async (editorId) => {
-        if (!canOpenInEditor || !originalLocation) {
+        const resolvedEditorId = editorId !== null && editorId !== void 0 ? editorId : defaultEditorId;
+        if (!canOpenInEditor || !originalLocation || !resolvedEditorId) {
             return;
         }
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, resolvedEditorId);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
-    }, [canOpenInEditor, originalLocation]);
+    }, [canOpenInEditor, defaultEditorId, originalLocation]);
     const openInCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName, contextForAgents) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents);
@@ -41,7 +41,7 @@ const useOpenSequenceInApps = (sequence) => {
     }, []);
     return {
         canOpenInEditor,
-        canConfigureApps: editorPickerAvailable,
+        canConfigureApps,
         codingAgentInfo,
         editorInfo,
         openInCodingAgent,

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,6 +1,4 @@
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineHeight: ({ shown, hasBeenCut, isStill, }: {
-    shown: TimelineTrackData[];
-    hasBeenCut: boolean;
-    isStill: boolean;
-}) => number;
+export declare const useTimelineTrackHeights: ({ timeline, }: {
+    timeline: readonly TimelineTrackData[];
+}) => readonly number[];

package/dist/components/Timeline/use-timeline-height.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineHeight = void 0;
+exports.useTimelineTrackHeights = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -8,11 +8,9 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
-const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
-const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
+const useTimelineTrackHeights = ({ timeline, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -20,7 +18,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
-    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+    const expandedControls = (0, react_1.useMemo)(() => timeline.flatMap((track) => {
         if (!previewServerConnected ||
             track.nodePathInfo === null ||
             !getIsExpanded(track.nodePathInfo) ||
@@ -28,14 +26,14 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
             return [];
         }
         return [track.sequence.controls];
-    }), [getIsExpanded, previewServerConnected, shown]);
+    }), [getIsExpanded, previewServerConnected, timeline]);
     const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
     const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
         controls.runtimeValues,
         runtimeValueSnapshots[index],
     ])), [expandedControls, runtimeValueSnapshots]);
-    return (0, react_1.useMemo)(() => {
-        const tracksHeight = shown.reduce((acc, track) => {
+    const heights = (0, react_1.useMemo)(() => {
+        return timeline.map((track) => {
             const isExpanded = previewServerConnected &&
                 track.nodePathInfo !== null &&
                 getIsExpanded(track.nodePathInfo);
@@ -84,16 +82,10 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
                 const separators = Math.max(0, flat.length - 1);
                 return totalRowsHeight + separators + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             })();
-            return acc + layerHeight + expandedHeight;
-        }, 0);
-        return (tracksHeight +
-            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
-            (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-            (isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT));
+            return layerHeight + expandedHeight;
+        });
     }, [
-        shown,
-        hasBeenCut,
-        isStill,
+        timeline,
         previewServerConnected,
         getIsExpanded,
         propStatuses,
@@ -102,5 +94,11 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
         selectedRowKeys,
         runtimeValuesByStore,
     ]);
+    const stableHeights = (0, react_1.useRef)(heights);
+    if (stableHeights.current.length !== heights.length ||
+        heights.some((height, index) => stableHeights.current[index] !== height)) {
+        stableHeights.current = heights;
+    }
+    return stableHeights.current;
 };
-exports.useTimelineHeight = useTimelineHeight;
+exports.useTimelineTrackHeights = useTimelineTrackHeights;