@remotion/studio 4.0.517 → 4.0.519

package/dist/esm/renderEntry.mjs

@@ -1,10 +1,12 @@
 import {
   BACKGROUND_HEX,
   TRANSPARENT,
-  WHITE,
+  WHITE
+} from "./chunk-je0h1bgt.js";
+import {
   __require,
   __toESM
-} from "./chunk-4bxz1d3g.js";
+} from "./chunk-6jf1natv.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -213,10 +215,11 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-gzqm3g2m.js").then(({ StudioInternals }) => {
+    import("./chunk-1fkq5bfq.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";
+      window.remotion_enableSequenceStackTraces?.();
       renderToDOM(/* @__PURE__ */ jsx(StudioInternals.Studio, {
         readOnly: true,
         rootComponent: Root

package/dist/helpers/can-show-updates.d.ts

@@ -0,0 +1,5 @@
+export declare const canShowUpdates: ({ connectionStatus, isBrowserStudio, readOnlyStudio, }: {
+    readonly connectionStatus: "connected" | "disconnected" | "init";
+    readonly isBrowserStudio: boolean;
+    readonly readOnlyStudio: boolean;
+}) => boolean;

package/dist/helpers/can-show-updates.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canShowUpdates = void 0;
+const canShowUpdates = ({ connectionStatus, isBrowserStudio, readOnlyStudio, }) => {
+    return (connectionStatus === 'connected' && !isBrowserStudio && !readOnlyStudio);
+};
+exports.canShowUpdates = canShowUpdates;

package/dist/helpers/colors.d.ts

@@ -61,7 +61,6 @@ export declare const ERROR_CODE_FRAME_LINE_BACKGROUND = "#121212";
 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 = "#15181B";
 export declare const TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
 export declare const TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
@@ -86,7 +85,6 @@ export declare const BORDER_BLACK_ALPHA_60 = "1px solid rgba(0, 0, 0, 0.6)";
 export declare const BORDER_WHITE_ALPHA_12 = "1px solid rgba(255, 255, 255, 0.12)";
 export declare const BORDER_WHITE_ALPHA_20 = "1px solid rgba(255, 255, 255, 0.2)";
 export declare const BORDER_INFO_BLUE = "1px solid rgba(59, 130, 246, 0.4)";
-export declare const BORDER_STACK_FRAME_BLUE = "1px solid rgb(66, 144, 245)";
 export declare const BORDER_TIMELINE_DROP_BLUE = "1px solid rgba(0, 155, 255, 0.75)";
 export declare const BORDER_TIMELINE_MARQUEE_BLUE = "1px solid rgba(70, 130, 255, 0.75)";
 export declare const SHADOW_BLACK = "0 0 4px black";
@@ -113,7 +111,6 @@ export declare const SELECTED_OUTLINE_UV_DROP_SHADOW = "drop-shadow(0 1px 2px rg
 export declare const LOOPED_INDICATOR_DROP_SHADOW: string;
 export declare const TIMELINE_AUDIO_GRADIENT = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
 export declare const TIMELINE_VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
-export declare const TIMELINE_IMAGE_GRADIENT = "linear-gradient(to top, #2980b9, #3498db)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

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.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.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_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.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_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.BLACK = 'black';
 exports.WHITE = 'white';
 exports.RED = 'red';
@@ -67,7 +67,6 @@ exports.ERROR_CODE_FRAME_LINE_BACKGROUND = '#121212';
 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 = '#15181B';
 // WHITE_ALPHA_10 composited over TIMELINE_BACKGROUND_COLOR.
 exports.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = '#2C2F32';
@@ -94,7 +93,6 @@ exports.BORDER_BLACK_ALPHA_60 = `1px solid ${exports.BLACK_ALPHA_60}`;
 exports.BORDER_WHITE_ALPHA_12 = `1px solid ${exports.WHITE_ALPHA_12}`;
 exports.BORDER_WHITE_ALPHA_20 = `1px solid ${exports.WHITE_ALPHA_20}`;
 exports.BORDER_INFO_BLUE = '1px solid rgba(59, 130, 246, 0.4)';
-exports.BORDER_STACK_FRAME_BLUE = `1px solid ${exports.STACK_FRAME_BORDER_BLUE}`;
 exports.BORDER_TIMELINE_DROP_BLUE = `1px solid ${exports.TIMELINE_DROP_BLUE_ALPHA_75}`;
 exports.BORDER_TIMELINE_MARQUEE_BLUE = `1px solid ${exports.TIMELINE_MARQUEE_BLUE_ALPHA_75}`;
 exports.SHADOW_BLACK = `0 0 4px ${exports.BLACK}`;
@@ -135,7 +133,6 @@ exports.LOOPED_INDICATOR_DROP_SHADOW = `drop-shadow(0 0 2px ${exports.BLACK_ALPH
     `drop-shadow(0 1px 2px ${exports.BLACK_ALPHA_80})`;
 exports.TIMELINE_AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 exports.TIMELINE_VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
-exports.TIMELINE_IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/helpers/create-folder-tree.d.ts

@@ -20,3 +20,8 @@ export declare const splitParentIntoNameAndParent: (name: string | null) => {
  */
 export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
 export declare const createFolderTree: (comps: import("remotion").AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];
+/**
+ * Sorts the tree returned by createFolderTree by name, on every level.
+ * Folders stay grouped above compositions, and both groups are sorted.
+ */
+export declare const sortFolderTreeAlphabetically: (items: CompositionSelectorItemType[]) => CompositionSelectorItemType[];

package/dist/helpers/create-folder-tree.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.getKeysToExpand = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
+exports.sortFolderTreeAlphabetically = exports.createFolderTree = exports.getKeysToExpand = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
+const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
 const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
     const inFolder = files.filter((f) => f.name.includes('/'));
@@ -152,6 +153,43 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
         const list = findItemListToPush(items, item.folderName, item.parentFolderName);
         list.push(toPush);
     }
-    return items;
+    const sortTreeItems = (treeItems) => {
+        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(treeItems.map((item) => ({
+            item,
+            nonce: item.type === 'folder' ? item.folder.nonce : item.composition.nonce,
+        }))).map(({ item }) => {
+            if (item.type === 'composition') {
+                return item;
+            }
+            return {
+                ...item,
+                items: sortTreeItems(item.items),
+            };
+        });
+    };
+    return sortTreeItems(items);
 };
 exports.createFolderTree = createFolderTree;
+/**
+ * Sorts the tree returned by createFolderTree by name, on every level.
+ * Folders stay grouped above compositions, and both groups are sorted.
+ */
+const sortFolderTreeAlphabetically = (items) => {
+    return items
+        .map((item) => {
+        if (item.type !== 'folder') {
+            return item;
+        }
+        return { ...item, items: (0, exports.sortFolderTreeAlphabetically)(item.items) };
+    })
+        .sort((a, b) => {
+        if (a.type !== b.type) {
+            return a.type === 'folder' ? -1 : 1;
+        }
+        const aName = a.type === 'folder' ? a.folderName : a.composition.id;
+        const bName = b.type === 'folder' ? b.folderName : b.composition.id;
+        // `numeric` so that Scene2 comes before Scene10.
+        return aName.localeCompare(bName, undefined, { numeric: true });
+    });
+};
+exports.sortFolderTreeAlphabetically = sortFolderTreeAlphabetically;

package/dist/helpers/format-file-location.d.ts

@@ -2,6 +2,14 @@ type FileLocation = {
     readonly source: string | null;
     readonly line: number | null;
 };
+export type RelativeFileLocation = {
+    readonly filename: string;
+    readonly line: number;
+};
+export declare const getRelativeFileLocation: ({ location, root, }: {
+    readonly location: FileLocation | null;
+    readonly root: string;
+}) => RelativeFileLocation | null;
 export declare const formatFileLocation: ({ location, root, }: {
     readonly location: FileLocation | null;
     readonly root: string;

package/dist/helpers/format-file-location.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatContextForAgents = exports.formatFileLocation = void 0;
+exports.formatContextForAgents = exports.formatFileLocation = exports.getRelativeFileLocation = void 0;
 const normalizeSlashes = (path) => path.replace(/\\/g, '/');
 const stripTrailingSlashes = (path) => path.replace(/\/+$/, '');
 const stripLeadingDotSlash = (path) => path.replace(/^\.\/+/, '');
-const formatFileLocation = ({ location, root, }) => {
+const getRelativeFileLocation = ({ location, root, }) => {
     if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
         return null;
     }
@@ -22,7 +22,18 @@ const formatFileLocation = ({ location, root, }) => {
     const relativeSource = sourceIsInsideRoot
         ? source.slice(normalizedRoot.length + 1)
         : source;
-    return `${stripLeadingDotSlash(relativeSource)}:${location.line}`;
+    return {
+        filename: stripLeadingDotSlash(relativeSource),
+        line: location.line,
+    };
+};
+exports.getRelativeFileLocation = getRelativeFileLocation;
+const formatFileLocation = ({ location, root, }) => {
+    const relativeLocation = (0, exports.getRelativeFileLocation)({ location, root });
+    if (relativeLocation === null) {
+        return null;
+    }
+    return `${relativeLocation.filename}:${relativeLocation.line}`;
 };
 exports.formatFileLocation = formatFileLocation;
 const formatContextForAgents = ({ name, location, root, }) => {

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

@@ -86,7 +86,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
         }
         const fetchedAt = Date.now();
         const srcWithTime = addTime ? (0, add_asset_cache_bust_1.addAssetCacheBust)({ fetchedAt, src }) : src;
-        const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
+        const fileType = (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.type === 'asset' ? canvasContent.asset : src);
         if (fileType === 'video' || fileType === 'audio') {
             const mediaMetadata = await (0, use_media_metadata_1.getMediaMetadata)(srcWithTime);
             if (mediaMetadata === null) {

package/dist/helpers/get-git-menu-item.d.ts

@@ -4,4 +4,9 @@ import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-
 export declare const getGitSourceName: (gitSource: GitSource) => string;
 export declare const getGitSourceBranchUrl: (gitSource: GitSource) => string;
 export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition, remotionRoot: string) => string;
+export declare const hasReadOnlyGitSource: () => boolean;
+export declare const openGitSource: ({ folder, location, }: {
+    folder: boolean;
+    location: OriginalPosition | null;
+}) => void;
 export declare const getGitMenuItem: () => ComboboxValue | null;

package/dist/helpers/get-git-menu-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGitMenuItem = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
+exports.getGitMenuItem = exports.openGitSource = exports.hasReadOnlyGitSource = exports.getGitRefUrl = exports.getGitSourceBranchUrl = exports.getGitSourceName = void 0;
 const getGitSourceName = (gitSource) => {
     if (gitSource.type === 'github') {
         return 'GitHub';
@@ -52,6 +52,20 @@ const getGitRefUrl = (gitSource, originalLocation, remotionRoot) => {
     throw new Error('Unknown git source type');
 };
 exports.getGitRefUrl = getGitRefUrl;
+const hasReadOnlyGitSource = () => {
+    return Boolean(window.remotion_isReadOnlyStudio && window.remotion_gitSource);
+};
+exports.hasReadOnlyGitSource = hasReadOnlyGitSource;
+const openGitSource = ({ folder, location, }) => {
+    const gitSource = window.remotion_gitSource;
+    if (!gitSource) {
+        return;
+    }
+    window.open(folder || !location
+        ? (0, exports.getGitSourceBranchUrl)(gitSource)
+        : (0, exports.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+};
+exports.openGitSource = openGitSource;
 const getGitMenuItem = () => {
     if (!window.remotion_gitSource) {
         return null;

package/dist/helpers/get-timeline-max-zoom.d.ts

@@ -11,10 +11,18 @@ export declare const clampTimelineZoom: ({ zoom, durationInFrames, }: {
     zoom: number;
     durationInFrames: number;
 }) => number;
+export declare const timelineZoomToNormalized: ({ zoom, maxZoom, }: {
+    zoom: number;
+    maxZoom: number;
+}) => number;
 export declare const timelineZoomToSliderValue: ({ zoom, maxZoom, }: {
     zoom: number;
     maxZoom: number;
 }) => number;
+export declare const normalizedToTimelineZoom: ({ normalized, maxZoom, }: {
+    normalized: number;
+    maxZoom: number;
+}) => number;
 export declare const sliderValueToTimelineZoom: ({ sliderValue, maxZoom, }: {
     sliderValue: number;
     maxZoom: number;

package/dist/helpers/get-timeline-max-zoom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.timelineZoomToSliderValue = exports.clampTimelineZoom = exports.getTimelineMaxZoom = exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = exports.TIMELINE_MAX_ZOOM_FLOOR = exports.TIMELINE_MIN_ZOOM = void 0;
+exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.normalizedToTimelineZoom = exports.timelineZoomToSliderValue = exports.timelineZoomToNormalized = exports.clampTimelineZoom = exports.getTimelineMaxZoom = exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = exports.TIMELINE_MAX_ZOOM_FLOOR = exports.TIMELINE_MIN_ZOOM = void 0;
 exports.TIMELINE_MIN_ZOOM = 1;
 exports.TIMELINE_MAX_ZOOM_FLOOR = 5;
 /**
@@ -20,23 +20,34 @@ const clampTimelineZoom = ({ zoom, durationInFrames, }) => {
     return Math.round(clamped * 10) / 10;
 };
 exports.clampTimelineZoom = clampTimelineZoom;
-const timelineZoomToSliderValue = ({ zoom, maxZoom, }) => {
+const timelineZoomToNormalized = ({ zoom, maxZoom, }) => {
     if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
         return 0;
     }
     const clampedZoom = Math.min(maxZoom, Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
-    const t = Math.log(clampedZoom / exports.TIMELINE_MIN_ZOOM) /
+    const normalized = Math.log(clampedZoom / exports.TIMELINE_MIN_ZOOM) /
         Math.log(maxZoom / exports.TIMELINE_MIN_ZOOM);
-    return Math.round(t * TIMELINE_ZOOM_SLIDER_MAX);
+    return (Math.round(normalized * TIMELINE_ZOOM_SLIDER_MAX) / TIMELINE_ZOOM_SLIDER_MAX);
+};
+exports.timelineZoomToNormalized = timelineZoomToNormalized;
+const timelineZoomToSliderValue = ({ zoom, maxZoom, }) => {
+    return Math.round((0, exports.timelineZoomToNormalized)({ zoom, maxZoom }) * TIMELINE_ZOOM_SLIDER_MAX);
 };
 exports.timelineZoomToSliderValue = timelineZoomToSliderValue;
-const sliderValueToTimelineZoom = ({ sliderValue, maxZoom, }) => {
+const normalizedToTimelineZoom = ({ normalized, maxZoom, }) => {
     if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
         return exports.TIMELINE_MIN_ZOOM;
     }
-    const t = sliderValue / TIMELINE_ZOOM_SLIDER_MAX;
+    const t = Math.min(1, Math.max(0, normalized));
     return exports.TIMELINE_MIN_ZOOM * (maxZoom / exports.TIMELINE_MIN_ZOOM) ** t;
 };
+exports.normalizedToTimelineZoom = normalizedToTimelineZoom;
+const sliderValueToTimelineZoom = ({ sliderValue, maxZoom, }) => {
+    return (0, exports.normalizedToTimelineZoom)({
+        normalized: sliderValue / TIMELINE_ZOOM_SLIDER_MAX,
+        maxZoom,
+    });
+};
 exports.sliderValueToTimelineZoom = sliderValueToTimelineZoom;
 exports.TIMELINE_ZOOM_SLIDER_PROPS = {
     min: 0,

package/dist/helpers/hoverable.d.ts

@@ -3,6 +3,7 @@ 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 NO_HOVER_BACKGROUND_STYLE: React.CSSProperties;
 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.FOCUS_VISIBLE_ONLY_CLASS_NAME = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+exports.makeHoverableCSS = exports.hoverableStyle = exports.NO_HOVER_BACKGROUND_STYLE = 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),
@@ -16,6 +16,9 @@ const BG_VARIABLE = '--remotion-hoverable-bg';
 const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
 const COLOR_VARIABLE = '--remotion-hoverable-color';
 const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+exports.NO_HOVER_BACKGROUND_STYLE = {
+    [HOVER_BG_VARIABLE]: colors_1.TRANSPARENT,
+};
 // To disable the hover effect (e.g. for a disabled control), pass the idle
 // values as the hover values.
 const hoverableStyle = ({ idleBackground, hoverBackground, idleColor, hoverColor, }) => {
@@ -47,18 +50,23 @@ const makeHoverableCSS = () => `
   }
 
   @media (hover: hover) {
-    ${hoverable}:hover,
-    ${hoverGroup}:hover ${hoverable} {
+    ${hoverable}:hover {
       background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
     }
 
     ${hoverable}:hover,
-    ${hoverable}:hover *,
-    ${hoverGroup}:hover ${hoverable},
-    ${hoverGroup}:hover ${hoverable} * {
+    ${hoverable}:hover * {
       color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
     }
 
+    /* An outer hoverable must not put a nested inline action into its hover
+       state. The nested action should only use its hover color when the
+       pointer is over the action itself. */
+    ${hoverable}:hover ${hoverable}:not(:hover),
+    ${hoverable}:hover ${hoverable}:not(:hover) * {
+      color: var(${COLOR_VARIABLE}, inherit);
+    }
+
     ${hoverGroup} ${reveal} {
       opacity: 0;
     }

package/dist/helpers/open-in-editor.js

@@ -1,8 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
+const get_stack_1 = require("../components/Timeline/TimelineStack/get-stack");
 const browser_studio_operations_1 = require("./browser-studio-operations");
 const openInEditor = (stack, editorId) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
@@ -125,7 +159,23 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
         const body = browserStudioOperations
             ? await browserStudioOperations.getCompositionComponentInfo(request)
-            : await (0, call_api_1.callApi)('/api/composition-component-info', request);
+            : typeof window !== 'undefined' && window.remotion_isReadOnlyStudio
+                ? await (async () => {
+                    const files = (0, get_stack_1.getSourceMapFilesForSource)(compositionFile);
+                    if (files === null) {
+                        throw new Error(`Could not find source map contents for ${compositionFile}`);
+                    }
+                    const { resolveCompositionComponentLocation } = await Promise.resolve().then(() => __importStar(require('@remotion/studio-codemods/resolve-composition-component-location')));
+                    return {
+                        canAddSequence: false,
+                        location: resolveCompositionComponentLocation({
+                            compositionFile,
+                            compositionId,
+                            project: { files, rootDir: '.' },
+                        }),
+                    };
+                })()
+                : await (0, call_api_1.callApi)('/api/composition-component-info', request);
         const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,

package/dist/helpers/preview-server-events.js

@@ -90,6 +90,9 @@ const ensurePreviewServerEventSource = () => {
     if (connectToBrowserStudio()) {
         return;
     }
+    if (window.remotion_isReadOnlyStudio) {
+        return;
+    }
     if (typeof EventSource === 'undefined') {
         return;
     }

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

@@ -62,7 +62,6 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
 export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO: number;
-export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_GROUPS = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_GROUPS; } });
@@ -162,7 +162,6 @@ exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 // The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
 exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
 exports.TIMELINE_LAYER_HEIGHT_VIDEO = 2 + exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT + exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 26;
 exports.TIMELINE_LAYER_HEIGHT_AUDIO = 34;
 exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
 // The horizontal row inside a timeline list item (eye + arrow + label).
@@ -171,9 +170,6 @@ const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;
     }
-    if (type === 'image') {
-        return exports.TIMELINE_LAYER_HEIGHT_IMAGE;
-    }
     if (type === 'audio') {
         return exports.TIMELINE_LAYER_HEIGHT_AUDIO;
     }

package/dist/helpers/url-state.d.ts

@@ -1,3 +1,4 @@
+export declare const getNavigationWindow: () => Window;
 export declare const getUrlForRoute: (route: string) => string;
 export declare const pushUrl: (url: string) => void;
 export declare const replaceUrl: (url: string) => void;

package/dist/helpers/url-state.js

@@ -1,25 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
+exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = exports.getNavigationWindow = void 0;
 const getUrlHandlingType = () => {
     if (window.remotion_isReadOnlyStudio || window.remotion_browserStudio) {
         return 'query-string';
     }
     return 'spa';
 };
+const getNavigationWindow = () => {
+    if (window.remotion_browserStudio && window.parent !== window) {
+        return window.parent;
+    }
+    return window;
+};
+exports.getNavigationWindow = getNavigationWindow;
 const getUrlForRoute = (route) => {
     if (getUrlHandlingType() === 'query-string') {
-        return `${window.location.pathname}?${route}`;
+        return `${(0, exports.getNavigationWindow)().location.pathname}?${route}`;
     }
     return route;
 };
 exports.getUrlForRoute = getUrlForRoute;
 const pushUrl = (url) => {
-    window.history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.pushUrl = pushUrl;
 const replaceUrl = (url) => {
-    window.history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+    (0, exports.getNavigationWindow)().history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.replaceUrl = replaceUrl;
 const clearUrl = () => {
@@ -32,7 +39,7 @@ const reloadUrl = () => {
 exports.reloadUrl = reloadUrl;
 const getRoute = () => {
     if (getUrlHandlingType() === 'query-string') {
-        const route = window.location.search.substring(1);
+        const route = (0, exports.getNavigationWindow)().location.search.substring(1);
         return route.startsWith('/') ? route : '';
     }
     return window.location.pathname;

package/dist/icons/enter.d.ts

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

package/dist/icons/enter.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnterIcon = 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 EnterIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M544 144C544 135.2 551.2 128 560 128C568.8 128 576 135.2 576 144L576 240C576 293 533 336 480 336L118.6 336L235.3 452.7C241.5 458.9 241.5 469.1 235.3 475.3C229.1 481.5 218.9 481.5 212.7 475.3L68.7 331.3C65.7 328.3 64 324.2 64 320C64 315.8 65.7 311.7 68.7 308.7L212.7 164.7C218.9 158.5 229.1 158.5 235.3 164.7C241.5 170.9 241.5 181.1 235.3 187.3L118.6 304L480 304C515.3 304 544 275.3 544 240L544 144z" }) }));
+};
+exports.EnterIcon = EnterIcon;

package/dist/renderEntry.js

@@ -202,9 +202,11 @@ const renderContent = (Root) => {
         }
         renderToDOM(jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(DelayedSpinner, {}) }));
         Promise.resolve().then(() => __importStar(require('./internals'))).then(({ StudioInternals }) => {
+            var _a;
             window.remotion_isStudio = true;
             window.remotion_isReadOnlyStudio = true;
             window.remotion_inputProps = '{}';
+            (_a = window.remotion_enableSequenceStackTraces) === null || _a === void 0 ? void 0 : _a.call(window);
             renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root }));
         })
             .catch((err) => {

package/dist/state/folders.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
+export type CompositionSortOrder = 'registration' | 'alphabetical';
 type TFolderContext = {
     compositionFoldersExpanded: ExpandedFoldersState;
     setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
     assetFoldersExpanded: ExpandedFoldersState;
     setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{