@remotion/studio 4.0.515 → 4.0.516

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-s6k99gh2.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-v5a8vpv4.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/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

@@ -63,6 +63,8 @@ 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 = "#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';
@@ -69,6 +69,10 @@ exports.INFO_BLUE = '#60a5fa';
 exports.SERVER_DISCONNECTED_BACKGROUND = '#e74c3c';
 exports.STACK_FRAME_BORDER_BLUE = 'rgb(66, 144, 245)';
 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):not(.__remotion-timeline-expand-arrow-button),
+  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};
@@ -67,6 +67,7 @@ const makeDefaultGlobalCSS = () => {
   .__remotion-composition-selector-item:focus,
   .__remotion-inspector-quick-action: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;
@@ -75,6 +76,7 @@ const makeDefaultGlobalCSS = () => {
   .__remotion-composition-selector-item:focus-visible,
   .__remotion-inspector-quick-action: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-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,6 +1,6 @@
 "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");
@@ -8,6 +8,13 @@ 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;
@@ -22,7 +29,7 @@ const safeCall = async (fn) => {
     }
 };
 const getMediabunnyMetadata = async (src) => {
-    var _a, _b;
+    var _a;
     const lease = (() => {
         try {
             return remotion_1.Internals.globalMediaResourceManager.acquire({
@@ -62,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,
@@ -78,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),

package/dist/helpers/use-menu-structure.js

@@ -304,29 +304,28 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Changelog',
                     },
-                    browserStudioOperations === null
-                        ? {
-                            id: 'settings',
-                            value: 'settings',
-                            label: 'Settings...',
-                            onClick: () => {
-                                var _a;
-                                var _b;
-                                closeMenu();
-                                setSelectedModal({
-                                    type: 'settings',
-                                    initialTab: 'rendering',
-                                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                                });
-                            },
-                            type: 'item',
-                            keyHint: null,
-                            leftItem: null,
-                            subMenu: null,
-                            quickSwitcherLabel: 'Settings...',
-                            disabled: readOnlyStudio || type !== 'connected',
-                        }
-                        : null,
+                    {
+                        id: 'settings',
+                        value: 'settings',
+                        label: 'Settings...',
+                        onClick: () => {
+                            var _a;
+                            var _b;
+                            closeMenu();
+                            setSelectedModal({
+                                type: 'settings',
+                                initialTab: browserStudioOperations === null ? 'rendering' : 'shortcuts',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                            });
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Settings...',
+                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
+                            type !== 'connected',
+                    },
                     {
                         id: 'acknowledgements',
                         value: 'acknowledgements',
@@ -789,12 +788,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             value: 'install-packages',
                             label: 'Install package...',
                             onClick: () => {
+                                var _a;
+                                var _b;
                                 closeMenu();
                                 setSelectedModal({
-                                    type: 'install-packages',
-                                    packageManager: remotion_packageManager === 'unknown'
-                                        ? null
-                                        : remotion_packageManager,
+                                    type: 'settings',
+                                    initialTab: 'packages',
+                                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                                 });
                             },
                             type: 'item',
@@ -818,13 +818,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Shortcuts (disabled)'
                             : 'Shortcuts',
                         onClick: () => {
+                            var _a;
+                            var _b;
                             closeMenu();
                             setSelectedModal({
-                                type: 'quick-switcher',
-                                mode: 'docs',
-                                invocationTimestamp: Date.now(),
-                                assetSelection: null,
-                                compositionSelection: null,
+                                type: 'settings',
+                                initialTab: 'shortcuts',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
                         keyHint: '?',

package/dist/icons/align-center-horizontal.js

@@ -6,7 +6,7 @@ const AlignCenterHorizontalIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignCenterHorizontalIcon = AlignCenterHorizontalIcon;

package/dist/icons/align-left.js

@@ -6,7 +6,7 @@ const AlignLeftIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignLeftIcon = AlignLeftIcon;

package/dist/icons/align-right.js

@@ -6,7 +6,7 @@ const AlignRightIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignRightIcon = AlignRightIcon;

package/dist/icons/keyboard.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const KeyboardIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/keyboard.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const KeyboardIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M96 192l64 0 0 128-64 0c-53 0-96 43-96 96s43 96 96 96 96-43 96-96l0-64 128 0 0 64c0 53 43 96 96 96s96-43 96-96-43-96-96-96l-64 0 0-128 64 0c53 0 96-43 96-96s-43-96-96-96-96 43-96 96l0 64-128 0 0-64c0-53-43-96-96-96S0 43 0 96 43 192 96 192zM256 320l-64 0 0-128 128 0 0 128-64 0zM96 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64l0 64-64 0zm64 256c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64l64 0 0 64zM352 160l0-64c0-35.3 28.7-64 64-64s64 28.7 64 64-28.7 64-64 64l-64 0zm64 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64l0-64 64 0z" }) }));
+};
+exports.KeyboardIcon = KeyboardIcon;

package/dist/icons/license.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const LicenseIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/license.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LicenseIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -40 512 593", children: jsx_runtime_1.jsx("path", { fill: color, d: "M309.4-7.4L256-40 202.6-7.4 140-8.9 110 46 55.1 76 56.6 138.6 24 192 56.6 245.4 55.1 308 110 338 128 371 128 552.3c1-.4 43.6-18.7 128-54.9 84.4 36.2 127 54.4 128 54.9l0-181.3 18-33 54.9-30-1.5-62.6 32.6-53.4-32.6-53.4 1.5-62.6-54.9-30-30-54.9-62.6 1.5zM160 503.7l0-111.3 42.6-1 53.4 32.6 53.4-32.6 42.6 1 0 111.3-89.7-38.4-6.3-2.7-6.3 2.7-89.7 38.4zM353.3 23.5l20.7 37.8 4.5 8.2c.6 .3 15.9 8.7 46 25.2-.8 34.3-1.2 51.8-1.2 52.5 .3 .5 9.4 15.5 27.3 44.8-17.9 29.3-27 44.3-27.3 44.8 0 .6 .4 18.1 1.2 52.5l-37.8 20.7-8.2 4.5-4.5 8.2-20.7 37.8c-34.3-.8-51.8-1.2-52.5-1.2-.5 .3-15.5 9.4-44.8 27.3-29.3-17.9-44.3-27-44.8-27.3-.6 0-18.1 .4-52.5 1.2-16.5-30.1-24.9-45.5-25.2-46l-8.2-4.5-37.8-20.7c.8-34.3 1.2-51.8 1.2-52.5-.3-.5-9.4-15.5-27.3-44.8 17.9-29.3 27-44.3 27.3-44.8 0-.6-.4-18.1-1.2-52.5 30.1-16.5 45.5-24.9 46-25.2 .3-.6 8.7-15.9 25.2-46 34.3 .8 51.8 1.2 52.5 1.2 .5-.3 15.5-9.4 44.8-27.3 29.3 17.9 44.3 27 44.8 27.3 .6 0 18.1-.4 52.5-1.2zM336 192a80 80 0 1 1 -160 0 80 80 0 1 1 160 0zM256 80a112 112 0 1 0 0 224 112 112 0 1 0 0-224z" }) }));
+};
+exports.LicenseIcon = LicenseIcon;