@remotion/studio 4.0.514 → 4.0.516

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-r46yxrjr.js";
+} from "./chunk-4bxz1d3g.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -213,7 +213,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-xn2q7eem.js").then(({ StudioInternals }) => {
+    import("./chunk-w4244j4n.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/add-asset-cache-bust.d.ts

@@ -0,0 +1,4 @@
+export declare const addAssetCacheBust: ({ fetchedAt, src, }: {
+    fetchedAt: number;
+    src: string;
+}) => string;

package/dist/helpers/add-asset-cache-bust.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addAssetCacheBust = void 0;
+const addAssetCacheBust = ({ fetchedAt, src, }) => {
+    if (src.startsWith('blob:')) {
+        return src;
+    }
+    return `${src}${src.includes('?') ? '&' : '?'}date=${fetchedAt}`;
+};
+exports.addAssetCacheBust = addAssetCacheBust;

package/dist/helpers/browser-studio-operations.d.ts

@@ -2,4 +2,7 @@ import type { BrowserStudioOperations } from '@remotion/studio-shared';
 export declare const BROWSER_STUDIO_OPERATIONS_READY_EVENT = "remotion-browser-studio-operations-ready";
 export declare const getBrowserStudioOperations: () => BrowserStudioOperations | null;
 export declare const getBrowserStudioKeyframeOperations: () => import("@remotion/studio-shared").BrowserStudioKeyframeOperations | null;
+export declare const getBrowserStudioEffectOperations: () => import("@remotion/studio-shared").BrowserStudioEffectOperations | null;
 export declare const canUseKeyframeOperations: () => boolean;
+export declare const canUseEffectOperations: () => boolean;
+export declare const canInstallPackages: () => boolean;

package/dist/helpers/browser-studio-operations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUseKeyframeOperations = exports.getBrowserStudioKeyframeOperations = exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
+exports.canInstallPackages = exports.canUseEffectOperations = exports.canUseKeyframeOperations = exports.getBrowserStudioEffectOperations = exports.getBrowserStudioKeyframeOperations = exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
 // Browser Studio may be hosted by a different studio-shared version, so this
 // handshake intentionally has no shared runtime import.
 exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = 'remotion-browser-studio-operations-ready';
@@ -18,6 +18,23 @@ const getBrowserStudioKeyframeOperations = () => {
     return (_b = (_a = (0, exports.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.keyframes) !== null && _b !== void 0 ? _b : null;
 };
 exports.getBrowserStudioKeyframeOperations = getBrowserStudioKeyframeOperations;
+const getBrowserStudioEffectOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, exports.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.effects) !== null && _b !== void 0 ? _b : null;
+};
+exports.getBrowserStudioEffectOperations = getBrowserStudioEffectOperations;
 const canUseKeyframeOperations = () => !window.remotion_isReadOnlyStudio ||
     (0, exports.getBrowserStudioKeyframeOperations)() !== null;
 exports.canUseKeyframeOperations = canUseKeyframeOperations;
+const canUseEffectOperations = () => !window.remotion_isReadOnlyStudio ||
+    (0, exports.getBrowserStudioEffectOperations)() !== null;
+exports.canUseEffectOperations = canUseEffectOperations;
+const canInstallPackages = () => {
+    const browserStudioOperations = (0, exports.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return true;
+    }
+    return !window.remotion_isReadOnlyStudio;
+};
+exports.canInstallPackages = canInstallPackages;

package/dist/helpers/calculate-timeline.js

@@ -76,6 +76,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
             },
             depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sortedSequences, 0),
             cascadedStart,
+            localStart: sequence.from,
             cascadedDuration: sequence.duration,
             keyframeDisplayOffset: hasKeyframeRows
                 ? cascadedStartWithTrim - effectiveFrom
@@ -103,7 +104,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         return sortKeyA.localeCompare(sortKeyB);
     })
         .map((track) => {
-        const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
+        const { cascadedDuration, ...cleanTrack } = track;
         return cleanTrack;
     });
     const nodePathIndexCounters = new Map();

package/dist/helpers/colors.d.ts

@@ -62,7 +62,9 @@ export declare const ERROR_LINK_COLOR = "#58a6ff";
 export declare const INFO_BLUE = "#60a5fa";
 export declare const SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 export declare const STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
-export declare const TIMELINE_BACKGROUND_COLOR = "#0F1113";
+export declare const TIMELINE_BACKGROUND_COLOR = "#15181B";
+export declare const TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
+export declare const TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
 export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 export declare const TIMELINE_BLUE = "#0b84ff";

package/dist/helpers/colors.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BLUE_DISABLED = exports.BLUE_HOVERED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.BLACK_OPAQUE = exports.BLACK_ALPHA_90 = exports.BLACK_ALPHA_85 = exports.BLACK_ALPHA_80 = exports.BLACK_ALPHA_60 = exports.BLACK_ALPHA_50 = exports.BLACK_ALPHA_40 = exports.BLACK_ALPHA_30 = exports.BLACK_ALPHA_28 = exports.BLACK_ALPHA_10 = exports.WHITE_ALPHA_80 = exports.WHITE_ALPHA_72 = exports.WHITE_ALPHA_70 = exports.WHITE_ALPHA_60 = exports.WHITE_ALPHA_50 = exports.WHITE_ALPHA_45 = exports.WHITE_ALPHA_40 = exports.WHITE_ALPHA_35 = exports.WHITE_ALPHA_30 = exports.WHITE_ALPHA_25 = exports.WHITE_ALPHA_20 = exports.WHITE_ALPHA_15 = exports.WHITE_ALPHA_12 = exports.WHITE_ALPHA_10 = exports.WHITE_ALPHA_08 = exports.WHITE_ALPHA_06 = exports.WHITE_ALPHA_05 = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND_HEX = exports.BACKGROUND = exports.BLACK_FULL_HEX = exports.BLACK_HEX = exports.WHITE_FULL_HEX = exports.WHITE_HEX = exports.CURRENT_COLOR_LOWERCASE = exports.CURRENT_COLOR = exports.TRANSPARENT = exports.RED = exports.WHITE = exports.BLACK = void 0;
-exports.FOCUS_BOX_SHADOW = exports.HOT_MIDDLEWARE_WARNING_STYLE = exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_STACK_FRAME_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.STACK_FRAME_BORDER_BLUE = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
-exports.getBackgroundFromHoverState = exports.TIMELINE_IMAGE_GRADIENT = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = void 0;
+exports.HOT_MIDDLEWARE_ERROR_STYLE = exports.NOTIFICATION_BORDER = exports.COLOR_PICKER_HANDLE_SHADOW = exports.COLOR_PICKER_POPUP_SHADOW = exports.SERVER_DISCONNECTED_SHADOW = exports.NOTIFICATION_SHADOW = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = exports.SHADOW_BLACK = exports.BORDER_TIMELINE_MARQUEE_BLUE = exports.BORDER_TIMELINE_DROP_BLUE = exports.BORDER_STACK_FRAME_BLUE = exports.BORDER_INFO_BLUE = exports.BORDER_WHITE_ALPHA_20 = exports.BORDER_WHITE_ALPHA_12 = exports.BORDER_BLACK_ALPHA_60 = exports.BORDER_BLACK_ALPHA_50 = exports.BORDER_TRANSPARENT_2PX = exports.BORDER_CURRENT_COLOR = exports.BORDER_WHITE_2PX = exports.BORDER_WHITE = exports.BORDER_BLACK = exports.INFO_BLUE_BACKGROUND = exports.EASING_SELECTED_BACKGROUND = exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_75 = exports.TIMELINE_DROP_BLUE_ALPHA_16 = exports.TIMELINE_DROP_BLUE_ALPHA_12 = exports.TIMELINE_PLAYHEAD_COLOR = exports.TIMELINE_BLUE = exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = exports.TIMELINE_SELECTED_BACKGROUND_COLOR = exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = exports.TIMELINE_BACKGROUND_COLOR = exports.STACK_FRAME_BORDER_BLUE = exports.SERVER_DISCONNECTED_BACKGROUND = exports.INFO_BLUE = exports.ERROR_LINK_COLOR = exports.ERROR_CODE_FRAME_LINE_BACKGROUND = exports.ERROR_CODE_FRAME_BACKGROUND = exports.RENDER_STATUS_BACKGROUND = exports.NOTIFICATION_BACKGROUND = exports.KEYBOARD_SHORTCUT_KEY_COLOR = exports.LIGHT_GRAY = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_IMAGE_GRADIENT = exports.TIMELINE_VIDEO_GRADIENT = exports.TIMELINE_AUDIO_GRADIENT = exports.LOOPED_INDICATOR_DROP_SHADOW = exports.SELECTED_OUTLINE_UV_DROP_SHADOW = exports.SELECTED_OUTLINE_DROP_SHADOW = exports.ERROR_MESSAGE_MASK_IMAGE = exports.COLOR_PICKER_HUE_GRADIENT = exports.COLOR_PICKER_ALPHA_TRANSPARENT = exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = exports.CHECKERBOARD_BACKGROUND_IMAGE = exports.FOCUS_BOX_SHADOW = exports.HOT_MIDDLEWARE_WARNING_STYLE = void 0;
 exports.BLACK = 'black';
 exports.WHITE = 'white';
 exports.RED = 'red';
@@ -68,7 +68,11 @@ exports.ERROR_LINK_COLOR = '#58a6ff';
 exports.INFO_BLUE = '#60a5fa';
 exports.SERVER_DISCONNECTED_BACKGROUND = '#e74c3c';
 exports.STACK_FRAME_BORDER_BLUE = 'rgb(66, 144, 245)';
-exports.TIMELINE_BACKGROUND_COLOR = '#0F1113';
+exports.TIMELINE_BACKGROUND_COLOR = '#15181B';
+// WHITE_ALPHA_10 composited over TIMELINE_BACKGROUND_COLOR.
+exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = '#2C2F32';
+// WHITE_ALPHA_10 composited over TIMELINE_NEGATIVE_START_BACKGROUND_COLOR.
+exports.TIMELINE_NEGATIVE_START_BORDER_COLOR = '#414446';
 exports.TIMELINE_SELECTED_BACKGROUND_COLOR = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = '#B0B0B0';
 exports.TIMELINE_BLUE = '#0b84ff';

package/dist/helpers/drag-aware-double-click.d.ts

@@ -0,0 +1,6 @@
+export type DragAwareDoubleClickTracker = {
+    readonly beginPointerGesture: () => void;
+    readonly endPointerGesture: (wasDragged: boolean) => void;
+    readonly consumePointerGestureWasDragged: () => boolean;
+};
+export declare const createDragAwareDoubleClickTracker: () => DragAwareDoubleClickTracker;

package/dist/helpers/drag-aware-double-click.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDragAwareDoubleClickTracker = void 0;
+const createDragAwareDoubleClickTracker = () => {
+    let pointerGestureWasDragged = false;
+    return {
+        beginPointerGesture: () => {
+            pointerGestureWasDragged = false;
+        },
+        endPointerGesture: (wasDragged) => {
+            pointerGestureWasDragged = wasDragged;
+        },
+        consumePointerGestureWasDragged: () => {
+            const wasDragged = pointerGestureWasDragged;
+            pointerGestureWasDragged = false;
+            return wasDragged;
+        },
+    };
+};
+exports.createDragAwareDoubleClickTracker = createDragAwareDoubleClickTracker;

package/dist/helpers/get-asset-metadata.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const remotion_1 = require("remotion");
+const add_asset_cache_bust_1 = require("./add-asset-cache-bust");
 const get_preview_file_type_1 = require("./get-preview-file-type");
 exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
 const getSrcFromCanvasContent = (canvasContent) => {
@@ -12,6 +13,7 @@ const getSrcFromCanvasContent = (canvasContent) => {
     return exports.remotion_outputsBase + canvasContent.path;
 };
 const getAssetMetadata = async (canvasContent, addTime) => {
+    var _a;
     if (canvasContent.type === 'output-blob') {
         return {
             type: 'found',
@@ -25,27 +27,34 @@ const getAssetMetadata = async (canvasContent, addTime) => {
     }
     try {
         const src = getSrcFromCanvasContent(canvasContent);
-        const file = await fetch(src, {
-            method: 'HEAD',
-        });
-        if (file.status === 404) {
-            return { type: 'not-found' };
-        }
-        if (file.status !== 200) {
-            throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
-        }
-        const size = file.headers.get('content-length');
-        if (!size) {
-            throw new Error('Unexpected error: content-length is null');
+        const listedStaticFile = canvasContent.type === 'asset'
+            ? window.remotion_staticFiles.find((file) => file.name === canvasContent.asset && file.src === src)
+            : null;
+        let size = (_a = listedStaticFile === null || listedStaticFile === void 0 ? void 0 : listedStaticFile.sizeInBytes) !== null && _a !== void 0 ? _a : null;
+        if (size === null) {
+            const file = await fetch(src, {
+                method: 'HEAD',
+            });
+            if (file.status === 404) {
+                return { type: 'not-found' };
+            }
+            if (file.status !== 200) {
+                throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
+            }
+            const contentLength = file.headers.get('content-length');
+            if (!contentLength) {
+                throw new Error('Unexpected error: content-length is null');
+            }
+            size = Number(contentLength);
         }
         const fetchedAt = Date.now();
-        const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
+        const srcWithTime = addTime ? (0, add_asset_cache_bust_1.addAssetCacheBust)({ fetchedAt, src }) : src;
         const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
         if (fileType === 'video') {
             const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
             return {
                 type: 'found',
-                size: Number(size),
+                size,
                 dimensions: { width: resolution.width, height: resolution.height },
                 fetchedAt,
             };
@@ -56,7 +65,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
                 img.onload = () => {
                     resolve({
                         type: 'found',
-                        size: Number(size),
+                        size,
                         dimensions: { width: img.width, height: img.height },
                         fetchedAt,
                     });
@@ -71,7 +80,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
         return {
             type: 'found',
             dimensions: 'none',
-            size: Number(size),
+            size,
             fetchedAt,
         };
     }

package/dist/helpers/get-sequence-double-click-action.d.ts

@@ -1,9 +1,10 @@
 import type { TSequence } from 'remotion';
 export type SequenceDoubleClickAction = 'open-connected-composition' | 'open-in-editor';
-export declare const getSequenceDoubleClickAction: ({ button, canOpenInEditor, numberOfConnectedCompositions, }: {
+export declare const getSequenceDoubleClickAction: ({ button, canOpenInEditor, numberOfConnectedCompositions, sequenceWasDragged, }: {
     readonly button: number;
     readonly canOpenInEditor: boolean;
     readonly numberOfConnectedCompositions: number;
+    readonly sequenceWasDragged: boolean;
 }) => SequenceDoubleClickAction | null;
 export declare const getConnectedCompositionFrame: ({ timelinePosition, sequence, sequenceFrameOffset, }: {
     readonly timelinePosition: number;

package/dist/helpers/get-sequence-double-click-action.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getConnectedCompositionFrame = exports.getSequenceDoubleClickAction = void 0;
-const getSequenceDoubleClickAction = ({ button, canOpenInEditor, numberOfConnectedCompositions, }) => {
+const getSequenceDoubleClickAction = ({ button, canOpenInEditor, numberOfConnectedCompositions, sequenceWasDragged, }) => {
+    // The browser still fires `dblclick` when the second press of a
+    // double-click turned into a drag. That gesture is a drag, not a
+    // double-click.
+    if (sequenceWasDragged) {
+        return null;
+    }
     if (button !== 0) {
         return null;
     }

package/dist/helpers/get-timeline-sequence-layout.d.ts

@@ -1,8 +1,9 @@
 import type { VideoConfig } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
-export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }: {
+export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, cascadedStart, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }: {
     durationInFrames: number;
     startFrom: number;
+    cascadedStart: number;
     startFromMedia: number;
     maxMediaDuration: number | null;
     video: VideoConfig;
@@ -13,6 +14,8 @@ export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom,
     marginLeft: number;
     width: number;
     naturalWidth: number;
+    negativeStartWidth: number;
+    negativeStartClipped: boolean;
     premountWidth: number | null;
     postmountWidth: number | null;
 };

package/dist/helpers/get-timeline-sequence-layout.js

@@ -10,16 +10,23 @@ const getWidthOfTrack = ({ durationInFrames, timelineDuration, windowWidth, spat
         : (spatialDuration / timelineDuration) * fullWidth;
     return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
-const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
+const getTimelineSequenceLayout = ({ durationInFrames, startFrom, cascadedStart, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const timelineDuration = (_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1;
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
     const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames, timelineDuration - startFrom));
     // Unclipped spatial duration: without the timeline-end constraint
     const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
-    const marginLeft = timelineDuration <= 0
-        ? 0
-        : (startFrom / timelineDuration) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const marginLeft = timelineDuration <= 0 ? 0 : (startFrom / timelineDuration) * fullWidth;
+    const naturalNegativeStartWidth = timelineDuration > 0 &&
+        startFrom === 0 &&
+        cascadedStart < 0 &&
+        durationInFrames > 0
+        ? Math.max(0, (-cascadedStart / timelineDuration) * fullWidth)
+        : 0;
+    const negativeStartWidth = Math.min(timeline_layout_1.TIMELINE_PADDING, naturalNegativeStartWidth);
+    const negativeStartClipped = naturalNegativeStartWidth > timeline_layout_1.TIMELINE_PADDING;
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     const width = getWidthOfTrack({
         durationInFrames,
@@ -54,9 +61,11 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
         })
         : null;
     return {
-        marginLeft: Math.max(marginLeft, 0) - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
-        width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
+        marginLeft: Math.max(marginLeft, 0) - negativeStartWidth - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+        width: width + negativeStartWidth + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
         naturalWidth: naturalWidth + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
+        negativeStartWidth,
+        negativeStartClipped,
         premountWidth,
         postmountWidth,
     };

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -13,9 +13,10 @@ export type TimelineTrackData = {
     nodePathInfo: SequenceNodePathInfo | null;
     keyframeDisplayOffset: number;
     sequenceFrameOffset: number;
+    cascadedStart: number;
+    localStart: number;
 };
 export type TimelineTrackWithOriginalTimings = TimelineTrackData & {
-    cascadedStart: number;
     cascadedDuration: number;
 };
 export declare const getTimelineSequenceSortKey: (track: TimelineTrackData, tracks: TimelineTrackData[], nonceRanks: Map<string, number>) => string;

package/dist/helpers/hoverable.d.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
 export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
 export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
+export declare const FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
 export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
     idleBackground: string;
     hoverBackground: string;

package/dist/helpers/hoverable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeHoverableCSS = exports.hoverableStyle = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+exports.makeHoverableCSS = exports.hoverableStyle = exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
 const colors_1 = require("./colors");
 // Purely visual hover styling must be driven by CSS `:hover` rather than
 // React state: When the Studio runs in an <iframe> (like in Browser Studio),
@@ -11,6 +11,7 @@ const colors_1 = require("./colors");
 exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
 exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
 exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
+exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = '__remotion-focus-visible-only';
 const BG_VARIABLE = '--remotion-hoverable-bg';
 const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
 const COLOR_VARIABLE = '--remotion-hoverable-color';

package/dist/helpers/inject-css.js

@@ -58,7 +58,7 @@ const makeDefaultGlobalCSS = () => {
 
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title):not(.${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}):not(.__remotion-timeline-expand-arrow-button),
   a:focus {
 	    outline: none;
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
@@ -66,14 +66,18 @@ const makeDefaultGlobalCSS = () => {
 
   .__remotion-composition-selector-item:focus,
   .__remotion-inspector-quick-action:focus,
-  .__remotion-inspector-section-title:focus {
+  .__remotion-inspector-section-title:focus,
+  .${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}:focus,
+  .__remotion-timeline-expand-arrow-button:focus {
     outline: none;
     box-shadow: none;
   }
 
   .__remotion-composition-selector-item:focus-visible,
   .__remotion-inspector-quick-action:focus-visible,
-  .__remotion-inspector-section-title:focus-visible {
+  .__remotion-inspector-section-title:focus-visible,
+  .${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}:focus-visible,
+  .__remotion-timeline-expand-arrow-button:focus-visible {
     box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
   }
 

package/dist/helpers/open-in-remotion-convert.d.ts

@@ -0,0 +1,7 @@
+export declare const getRemotionConvertUrl: ({ relativePath, studioOrigin, }: {
+    relativePath: string;
+    studioOrigin: string;
+}) => string;
+export declare const openInRemotionConvert: ({ relativePath, }: {
+    relativePath: string;
+}) => void;

package/dist/helpers/open-in-remotion-convert.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInRemotionConvert = exports.getRemotionConvertUrl = void 0;
+const remotion_1 = require("remotion");
+const getRemotionConvertUrl = ({ relativePath, studioOrigin, }) => {
+    const convertUrl = new URL('https://www.remotion.dev/convert');
+    const assetUrl = new URL((0, remotion_1.staticFile)(relativePath), studioOrigin);
+    convertUrl.searchParams.set('url', assetUrl.toString());
+    return convertUrl.toString();
+};
+exports.getRemotionConvertUrl = getRemotionConvertUrl;
+const openInRemotionConvert = ({ relativePath, }) => {
+    window.open((0, exports.getRemotionConvertUrl)({
+        relativePath,
+        studioOrigin: window.location.origin,
+    }), '_blank', 'noopener,noreferrer');
+};
+exports.openInRemotionConvert = openInRemotionConvert;

package/dist/helpers/use-max-media-duration.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMaxMediaDuration = void 0;
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const is_video_with_last_frame_hold_1 = require("./is-video-with-last-frame-hold");
 const use_media_metadata_1 = require("./use-media-metadata");
 const cache = new Map();
@@ -19,7 +20,8 @@ const useMaxMediaDuration = (s, fps) => {
     var _a;
     const holdsLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
     const src = holdsLastFrame ? null : getSrc(s);
-    const cacheKey = src ? getCacheKey(src, fps) : null;
+    const resolvedSrc = remotion_1.Internals.usePreload(src !== null && src !== void 0 ? src : '');
+    const cacheKey = src ? getCacheKey(resolvedSrc, fps) : null;
     const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(cacheKey ? ((_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null) : Infinity);
     (0, react_1.useEffect)(() => {
         var _a;
@@ -32,7 +34,7 @@ const useMaxMediaDuration = (s, fps) => {
             return;
         }
         let cancelled = false;
-        (0, use_media_metadata_1.getMediaMetadata)(src)
+        (0, use_media_metadata_1.getMediaMetadata)(resolvedSrc)
             .then((metadata) => {
             if (cancelled || !metadata) {
                 return;
@@ -50,7 +52,7 @@ const useMaxMediaDuration = (s, fps) => {
         return () => {
             cancelled = true;
         };
-    }, [cacheKey, fps, src]);
+    }, [cacheKey, fps, resolvedSrc, src]);
     if (holdsLastFrame) {
         return Infinity;
     }

package/dist/helpers/use-media-metadata.d.ts

@@ -1,4 +1,4 @@
-import type { InputAudioTrack, InputVideoTrack } from 'mediabunny';
+import type { FrameRateMetrics, InputAudioTrack, InputVideoTrack } from 'mediabunny';
 export type MediaMetadata = {
     duration: number;
     format: string | null;
@@ -12,6 +12,7 @@ export type MediaMetadata = {
     hasVideoTrack: boolean | null;
     hasAudioTrack: boolean | null;
 };
+export declare const getFrameRateFromMetrics: (metrics: Pick<FrameRateMetrics, "bestGuessFrameRate" | "probedPacketCount"> | null) => number | null;
 export declare const getCachedMediaMetadata: (src: string) => MediaMetadata | null;
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = void 0;
+exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = exports.getFrameRateFromMetrics = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
+const getFrameRateFromMetrics = (metrics) => {
+    if (metrics === null || metrics.probedPacketCount < 2) {
+        return null;
+    }
+    return metrics.bestGuessFrameRate;
+};
+exports.getFrameRateFromMetrics = getFrameRateFromMetrics;
 const getCachedMediaMetadata = (src) => {
     var _a;
     return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
@@ -21,20 +29,39 @@ const safeCall = async (fn) => {
     }
 };
 const getMediabunnyMetadata = async (src) => {
-    var _a, _b;
-    let input;
-    try {
-        input = new mediabunny_1.Input({
-            formats: mediabunny_1.ALL_FORMATS,
-            source: new mediabunny_1.UrlSource(src),
-        });
-    }
-    catch (_c) {
+    var _a;
+    const lease = (() => {
+        try {
+            return remotion_1.Internals.globalMediaResourceManager.acquire({
+                key: remotion_1.Internals.getMediabunnyInputResourceKey({
+                    src,
+                    credentials: null,
+                    requestInitFingerprint: null,
+                    revision: null,
+                }),
+                create: () => {
+                    const createdInput = new mediabunny_1.Input({
+                        formats: mediabunny_1.ALL_FORMATS,
+                        source: new mediabunny_1.UrlSource(src),
+                    });
+                    return {
+                        resource: createdInput,
+                        dispose: () => createdInput.dispose(),
+                    };
+                },
+            });
+        }
+        catch (_a) {
+            return null;
+        }
+    })();
+    if (lease === null) {
         return null;
     }
+    const input = lease.resource;
     try {
         const [duration, format, videoTrack, audioTrack] = await Promise.all([
-            safeCall(() => (0, get_duration_or_compute_1.getDurationOrCompute)(input)),
+            safeCall(() => lease.getOrCreateValue(remotion_1.Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => (0, get_duration_or_compute_1.getDurationOrCompute)(input))),
             safeCall(() => input.getFormat()),
             safeCall(() => input.getPrimaryVideoTrack()),
             safeCall(() => input.getPrimaryAudioTrack()),
@@ -42,11 +69,11 @@ const getMediabunnyMetadata = async (src) => {
         if (duration === null) {
             return null;
         }
-        const [width, height, videoCodec, packetStats, isHdr, audioCodec, sampleRate,] = await Promise.all([
+        const [width, height, videoCodec, frameRateMetrics, isHdr, audioCodec, sampleRate,] = await Promise.all([
             videoTrack ? safeCall(() => videoTrack.getDisplayWidth()) : null,
             videoTrack ? safeCall(() => videoTrack.getDisplayHeight()) : null,
             videoTrack ? safeCall(() => videoTrack.getCodec()) : null,
-            videoTrack ? safeCall(() => videoTrack.computePacketStats(50)) : null,
+            videoTrack ? safeCall(() => videoTrack.computeFrameRateMetrics()) : null,
             videoTrack ? safeCall(() => videoTrack.hasHighDynamicRange()) : null,
             audioTrack ? safeCall(() => audioTrack.getCodec()) : null,
             audioTrack ? safeCall(() => audioTrack.getSampleRate()) : null,
@@ -58,7 +85,7 @@ const getMediabunnyMetadata = async (src) => {
             height,
             videoCodec,
             audioCodec,
-            fps: (_b = packetStats === null || packetStats === void 0 ? void 0 : packetStats.averagePacketRate) !== null && _b !== void 0 ? _b : null,
+            fps: (0, exports.getFrameRateFromMetrics)(frameRateMetrics),
             isHdr,
             sampleRate,
             hasVideoTrack: Boolean(videoTrack),
@@ -66,12 +93,7 @@ const getMediabunnyMetadata = async (src) => {
         };
     }
     finally {
-        try {
-            input.dispose();
-        }
-        catch (_d) {
-            // ignore
-        }
+        lease.release();
     }
 };
 const getFallbackVideoMetadata = async (src) => {
@@ -121,15 +143,17 @@ const getMediaMetadata = (src) => {
 };
 exports.getMediaMetadata = getMediaMetadata;
 const useMediaMetadata = (src) => {
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedMediaMetadata)(src) : null);
+    const resolvedSrc = remotion_1.Internals.usePreload(src !== null && src !== void 0 ? src : '');
+    const metadataSrc = src === null ? null : resolvedSrc;
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(metadataSrc ? (0, exports.getCachedMediaMetadata)(metadataSrc) : null);
     (0, react_1.useEffect)(() => {
-        const cached = src ? (0, exports.getCachedMediaMetadata)(src) : null;
+        const cached = metadataSrc ? (0, exports.getCachedMediaMetadata)(metadataSrc) : null;
         setMediaMetadata(cached);
-        if (!src || cached) {
+        if (!metadataSrc || cached) {
             return;
         }
         let cancelled = false;
-        (0, exports.getMediaMetadata)(src)
+        (0, exports.getMediaMetadata)(metadataSrc)
             .then((metadata) => {
             if (cancelled) {
                 return;
@@ -145,7 +169,7 @@ const useMediaMetadata = (src) => {
         return () => {
             cancelled = true;
         };
-    }, [src]);
+    }, [metadataSrc]);
     return mediaMetadata;
 };
 exports.useMediaMetadata = useMediaMetadata;