@remotion/studio 4.0.518 → 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-7prjt5n5.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,6 +1,6 @@
 "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) => {
@@ -170,3 +170,26 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
     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/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-box-quads-polyfill-internals.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @param {globalThis} windowObj?
+ * @param {boolean=} force
+ */
+export declare function addPolyfill(windowObj?: globalThis, force?: boolean | undefined): void;
+/**
+ * @param {globalThis} windowObj?
+ */
+export declare function patchAdoptNode(windowObj?: globalThis): void;
+/**
+ * @param {Node} node
+ * @param {DOMQuadInit} quad
+ * @param {Element} from
+ * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options
+ * @returns {DOMQuad}
+ */
+export declare function convertQuadFromNode(node: Node, quad: DOMQuadInit, from: Element, options?: {
+    fromBox?: 'margin' | 'border' | 'padding' | 'content';
+    toBox?: 'margin' | 'border' | 'padding' | 'content';
+    iframes?: HTMLIFrameElement[];
+} | undefined): DOMQuad;
+/**
+ * @param {Node} node
+ * @param {{x: number, y: number, width: number, height: number}} rect
+ * @param {Element} from
+ * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options
+ * @returns {DOMQuad}
+ */
+export declare function convertRectFromNode(node: Node, rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, from: Element, options?: {
+    fromBox?: 'margin' | 'border' | 'padding' | 'content';
+    toBox?: 'margin' | 'border' | 'padding' | 'content';
+    iframes?: HTMLIFrameElement[];
+} | undefined): DOMQuad;
+/**
+ * @param {Node} node
+ * @param {DOMPointInit} point
+ * @param {Element} from
+ * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options
+ * @returns {DOMPoint}
+ */
+export declare function convertPointFromNode(node: Node, point: DOMPointInit, from: Element, options?: {
+    fromBox?: 'margin' | 'border' | 'padding' | 'content';
+    toBox?: 'margin' | 'border' | 'padding' | 'content';
+    iframes?: HTMLIFrameElement[];
+} | undefined): DOMPoint;
+export declare function clearCache(): void;
+export declare function useCache(): void;
+/**
+ * @param {Node} node
+ * @param {{box?: 'margin'|'border'|'padding'|'content', relativeTo?: Element, iframes?: HTMLIFrameElement[]}=} options
+ * @returns {DOMQuad[]}
+ */
+export declare function getBoxQuads(node: Node, options?: {
+    box?: 'margin' | 'border' | 'padding' | 'content';
+    relativeTo?: Element;
+    iframes?: HTMLIFrameElement[];
+} | undefined): DOMQuad[];
+/**
+ * @param {Node} node
+ * @param {DOMMatrix=} matrix
+ */
+export declare function getElementSize(node: Node, matrix?: DOMMatrix | undefined): {
+    width: number;
+    height: number;
+};
+/**
+ * @param {Node} node
+ * @param {Element} ancestor
+ * @param {HTMLIFrameElement[]} iframes
+ * @param {boolean=} excludeSelfZoom
+ */
+export declare function getResultingTransformationBetweenElementAndAllAncestors(node: Node, ancestor: Element, iframes: HTMLIFrameElement[], excludeSelfZoom?: boolean | undefined): DOMMatrix;
+/**
+ * @param {Node} element
+ * @param {HTMLIFrameElement[]=} iframes
+ */
+export declare function getElementCombinedTransform(element: Node, iframes?: HTMLIFrameElement[] | undefined): DOMMatrix;