@remotion/studio 4.0.485 → 4.0.487

package/dist/esm/renderEntry.mjs

@@ -1,7 +1,10 @@
 import {
+  BACKGROUND_HEX,
+  TRANSPARENT,
+  WHITE,
   __require,
   __toESM
-} from "./chunk-6jf1natv.js";
+} from "./chunk-jefhcs5z.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -26,7 +29,7 @@ var setBundleMode = (state) => {
 var getBundleMode = () => {
   return currentBundleMode;
 };
-Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(null, "#1f2428"));
+Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 var getCanSerializeDefaultProps = (object) => {
   try {
     const str = JSON.stringify(object);
@@ -60,7 +63,7 @@ var DelayedSpinner = () => {
       alignItems: "center",
       fontSize: 13,
       opacity: 0.6,
-      color: "white",
+      color: WHITE,
       fontFamily: "Helvetica, Arial, sans-serif"
     },
     children: "Loading Studio"
@@ -112,7 +115,7 @@ var GetVideoComposition = ({ state }) => {
       width: currentCompositionMetadata.width,
       height: currentCompositionMetadata.height,
       display: "flex",
-      backgroundColor: "transparent"
+      backgroundColor: TRANSPARENT
     }
   });
 };
@@ -209,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-103pp4n7.js").then(({ StudioInternals }) => {
+    import("./chunk-y2t24cx0.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/checkerboard-background.js

@@ -1,29 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkerboardBackgroundImage = exports.checkerboardBackgroundColor = exports.getCheckerboardBackgroundPos = exports.getCheckerboardBackgroundSize = void 0;
+const colors_1 = require("./colors");
 const getCheckerboardBackgroundSize = (size) => `${size}px ${size}px`;
 exports.getCheckerboardBackgroundSize = getCheckerboardBackgroundSize;
 const getCheckerboardBackgroundPos = (size) => `0 0, ${size / 2}px 0, ${size / 2}px -${size / 2}px, 0px ${size / 2}px`;
 exports.getCheckerboardBackgroundPos = getCheckerboardBackgroundPos;
 const checkerboardBackgroundColor = (checkerboard) => {
     if (checkerboard) {
-        return 'white';
+        return colors_1.WHITE;
     }
-    return 'black';
+    return colors_1.BLACK;
 };
 exports.checkerboardBackgroundColor = checkerboardBackgroundColor;
 const checkerboardBackgroundImage = (checkerboard) => {
     if (checkerboard) {
-        return `
-     linear-gradient(
-        45deg,
-        rgba(0, 0, 0, 0.1) 25%,
-        transparent 25%
-      ),
-      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
-      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)
-    `;
+        return colors_1.CHECKERBOARD_BACKGROUND_IMAGE;
     }
     return undefined;
 };

package/dist/helpers/colors.d.ts

@@ -1,25 +1,117 @@
+export declare const BLACK = "black";
+export declare const WHITE = "white";
+export declare const RED = "red";
+export declare const TRANSPARENT = "transparent";
+export declare const CURRENT_COLOR = "currentColor";
+export declare const CURRENT_COLOR_LOWERCASE = "currentcolor";
+export declare const WHITE_HEX = "#fff";
+export declare const WHITE_FULL_HEX = "#ffffff";
+export declare const BLACK_HEX = "#000";
+export declare const BLACK_FULL_HEX = "#000000";
 export declare const BACKGROUND = "rgb(31,36,40)";
+export declare const BACKGROUND_HEX = "#1f2428";
 export declare const BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
 export declare const INPUT_BACKGROUND = "#2f363d";
-export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
 export declare const LIGHT_TEXT = "#A6A7A9";
 export declare const RULER_COLOR = "#808080";
-export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
-export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
-export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
-export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
+export declare const WHITE_ALPHA_05 = "rgba(255, 255, 255, 0.05)";
+export declare const WHITE_ALPHA_06 = "rgba(255, 255, 255, 0.06)";
+export declare const WHITE_ALPHA_08 = "rgba(255, 255, 255, 0.08)";
+export declare const WHITE_ALPHA_10 = "rgba(255, 255, 255, 0.1)";
+export declare const WHITE_ALPHA_12 = "rgba(255, 255, 255, 0.12)";
+export declare const WHITE_ALPHA_15 = "rgba(255, 255, 255, 0.15)";
+export declare const WHITE_ALPHA_20 = "rgba(255, 255, 255, 0.2)";
+export declare const WHITE_ALPHA_25 = "rgba(255, 255, 255, 0.25)";
+export declare const WHITE_ALPHA_30 = "rgba(255, 255, 255, 0.3)";
+export declare const WHITE_ALPHA_35 = "rgba(255, 255, 255, 0.35)";
+export declare const WHITE_ALPHA_40 = "rgba(255, 255, 255, 0.4)";
+export declare const WHITE_ALPHA_45 = "rgba(255, 255, 255, 0.45)";
+export declare const WHITE_ALPHA_50 = "rgba(255, 255, 255, 0.5)";
+export declare const WHITE_ALPHA_60 = "rgba(255, 255, 255, 0.6)";
+export declare const WHITE_ALPHA_70 = "rgba(255, 255, 255, 0.7)";
+export declare const WHITE_ALPHA_72 = "rgba(255, 255, 255, 0.72)";
+export declare const WHITE_ALPHA_80 = "rgba(255, 255, 255, 0.8)";
+export declare const BLACK_ALPHA_10 = "rgba(0, 0, 0, 0.1)";
+export declare const BLACK_ALPHA_28 = "rgba(0, 0, 0, 0.28)";
+export declare const BLACK_ALPHA_30 = "rgba(0, 0, 0, 0.3)";
+export declare const BLACK_ALPHA_40 = "rgba(0, 0, 0, 0.4)";
+export declare const BLACK_ALPHA_50 = "rgba(0, 0, 0, 0.5)";
+export declare const BLACK_ALPHA_60 = "rgba(0, 0, 0, 0.6)";
+export declare const BLACK_ALPHA_80 = "rgba(0, 0, 0, 0.8)";
+export declare const BLACK_ALPHA_85 = "rgba(0, 0, 0, 0.85)";
+export declare const BLACK_ALPHA_90 = "rgba(0, 0, 0, 0.9)";
+export declare const BLACK_OPAQUE = "rgba(0, 0, 0, 1)";
 export declare const FAIL_COLOR = "#ff3232";
-export declare const TEXT_COLOR = "#fff";
 export declare const WARNING_COLOR = "#f1c40f";
 export declare const BLUE = "#0b84f3";
+export declare const BLUE_HOVERED = "#4da3f7";
 export declare const BLUE_DISABLED = "#284f73";
-export declare const LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0.7)";
 export declare const UNSELECTED_GUIDE = "#7e1219";
 export declare const SELECTED_GUIDE = "#d22d3a";
 export declare const LINE_COLOR = "#363A3E";
 export declare const TIMELINE_TRACK_SEPARATOR = "#13161B";
+export declare const LIGHT_GRAY = "#ccc";
+export declare const KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
+export declare const NOTIFICATION_BACKGROUND = "#111111";
+export declare const RENDER_STATUS_BACKGROUND = "#222";
+export declare const ERROR_CODE_FRAME_BACKGROUND = "#070707";
+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 = "#0F1113";
+export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
+export declare const TIMELINE_BLUE = "#0b84ff";
+export declare const TIMELINE_PLAYHEAD_COLOR = "#f02c00";
+export declare const TIMELINE_DROP_BLUE_ALPHA_12 = "rgba(0, 155, 255, 0.12)";
+export declare const TIMELINE_DROP_BLUE_ALPHA_16 = "rgba(0, 155, 255, 0.16)";
+export declare const TIMELINE_DROP_BLUE_ALPHA_75 = "rgba(0, 155, 255, 0.75)";
+export declare const TIMELINE_MARQUEE_BLUE_ALPHA_16 = "rgba(70, 130, 255, 0.16)";
+export declare const TIMELINE_MARQUEE_BLUE_ALPHA_75 = "rgba(70, 130, 255, 0.75)";
+export declare const EASING_SELECTED_BACKGROUND = "rgba(11, 132, 243, 0.18)";
+export declare const INFO_BLUE_BACKGROUND = "rgba(59, 130, 246, 0.15)";
+export declare const BORDER_BLACK = "1px solid #000";
+export declare const BORDER_WHITE = "1px solid #fff";
+export declare const BORDER_WHITE_2PX = "2px solid #fff";
+export declare const BORDER_CURRENT_COLOR = "1px solid currentColor";
+export declare const BORDER_TRANSPARENT_2PX = "2px solid transparent";
+export declare const BORDER_BLACK_ALPHA_50 = "1px solid rgba(0, 0, 0, 0.5)";
+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";
+export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
+export declare const NOTIFICATION_SHADOW = "0 2px 3px rgba(0, 0, 0, 1)";
+export declare const SERVER_DISCONNECTED_SHADOW = "0 2px 4px rgba(0, 0, 0, 0.4)";
+export declare const COLOR_PICKER_POPUP_SHADOW = "0 4px 16px rgba(0, 0, 0, 0.5)";
+export declare const COLOR_PICKER_HANDLE_SHADOW = "0 0 0 1px rgba(0, 0, 0, 0.6)";
+export declare const NOTIFICATION_BORDER = "0.25px solid rgba(255, 255, 255, 0.1)";
+export declare const HOT_MIDDLEWARE_ERROR_STYLE = "color: #ff0000;";
+export declare const HOT_MIDDLEWARE_WARNING_STYLE = "color: #999933;";
+export declare const FOCUS_BOX_SHADOW: string;
+export declare const CHECKERBOARD_BACKGROUND_IMAGE = "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    ";
+export declare const COLOR_PICKER_CHECKER_BACKGROUND_IMAGE: string;
+export declare const COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "#444";
+export declare const COLOR_PICKER_SATURATION_VALUE_GRADIENT = "linear-gradient(to right, #fff, transparent)";
+export declare const COLOR_PICKER_SATURATION_BLACK_GRADIENT = "linear-gradient(to top, #000, transparent)";
+export declare const COLOR_PICKER_ALPHA_TRANSPARENT = "rgba(0, 0, 0, 0)";
+export declare const COLOR_PICKER_HUE_GRADIENT = "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+export declare const ERROR_MESSAGE_MASK_IMAGE = "linear-gradient(to bottom, white 60%, transparent)";
+export declare const SELECTED_OUTLINE_DROP_SHADOW = "drop-shadow(0 0 1px rgba(255, 255, 255, 0.2))";
+export declare const SELECTED_OUTLINE_UV_DROP_SHADOW = "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))";
+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,29 +1,137 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.TEXT_COLOR = exports.FAIL_COLOR = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
+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.BLACK = 'black';
+exports.WHITE = 'white';
+exports.RED = 'red';
+exports.TRANSPARENT = 'transparent';
+exports.CURRENT_COLOR = 'currentColor';
+exports.CURRENT_COLOR_LOWERCASE = 'currentcolor';
+exports.WHITE_HEX = '#fff';
+exports.WHITE_FULL_HEX = '#ffffff';
+exports.BLACK_HEX = '#000';
+exports.BLACK_FULL_HEX = '#000000';
 exports.BACKGROUND = 'rgb(31,36,40)';
+exports.BACKGROUND_HEX = '#1f2428';
 exports.BACKGROUND__TRANSPARENT = 'rgba(31,36,40, 0)';
 exports.INPUT_BACKGROUND = '#2f363d';
-exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
 exports.LIGHT_TEXT = '#A6A7A9';
 exports.RULER_COLOR = '#808080';
-exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
+exports.WHITE_ALPHA_05 = 'rgba(255, 255, 255, 0.05)';
+exports.WHITE_ALPHA_06 = 'rgba(255, 255, 255, 0.06)';
+exports.WHITE_ALPHA_08 = 'rgba(255, 255, 255, 0.08)';
+exports.WHITE_ALPHA_10 = 'rgba(255, 255, 255, 0.1)';
+exports.WHITE_ALPHA_12 = 'rgba(255, 255, 255, 0.12)';
+exports.WHITE_ALPHA_15 = 'rgba(255, 255, 255, 0.15)';
+exports.WHITE_ALPHA_20 = 'rgba(255, 255, 255, 0.2)';
+exports.WHITE_ALPHA_25 = 'rgba(255, 255, 255, 0.25)';
+exports.WHITE_ALPHA_30 = 'rgba(255, 255, 255, 0.3)';
+exports.WHITE_ALPHA_35 = 'rgba(255, 255, 255, 0.35)';
+exports.WHITE_ALPHA_40 = 'rgba(255, 255, 255, 0.4)';
+exports.WHITE_ALPHA_45 = 'rgba(255, 255, 255, 0.45)';
+exports.WHITE_ALPHA_50 = 'rgba(255, 255, 255, 0.5)';
+exports.WHITE_ALPHA_60 = 'rgba(255, 255, 255, 0.6)';
+exports.WHITE_ALPHA_70 = 'rgba(255, 255, 255, 0.7)';
+exports.WHITE_ALPHA_72 = 'rgba(255, 255, 255, 0.72)';
+exports.WHITE_ALPHA_80 = 'rgba(255, 255, 255, 0.8)';
+exports.BLACK_ALPHA_10 = 'rgba(0, 0, 0, 0.1)';
+exports.BLACK_ALPHA_28 = 'rgba(0, 0, 0, 0.28)';
+exports.BLACK_ALPHA_30 = 'rgba(0, 0, 0, 0.3)';
+exports.BLACK_ALPHA_40 = 'rgba(0, 0, 0, 0.4)';
+exports.BLACK_ALPHA_50 = 'rgba(0, 0, 0, 0.5)';
+exports.BLACK_ALPHA_60 = 'rgba(0, 0, 0, 0.6)';
+exports.BLACK_ALPHA_80 = 'rgba(0, 0, 0, 0.8)';
+exports.BLACK_ALPHA_85 = 'rgba(0, 0, 0, 0.85)';
+exports.BLACK_ALPHA_90 = 'rgba(0, 0, 0, 0.9)';
+exports.BLACK_OPAQUE = 'rgba(0, 0, 0, 1)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
-exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
-exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.FAIL_COLOR = '#ff3232';
-exports.TEXT_COLOR = '#fff';
 exports.WARNING_COLOR = '#f1c40f';
 exports.BLUE = '#0b84f3';
+exports.BLUE_HOVERED = '#4da3f7';
 exports.BLUE_DISABLED = '#284f73';
-exports.LIGHT_TRANSPARENT = 'rgba(255, 255, 255, 0.7)';
 exports.UNSELECTED_GUIDE = '#7e1219';
 exports.SELECTED_GUIDE = '#d22d3a';
 exports.LINE_COLOR = '#363A3E';
 exports.TIMELINE_TRACK_SEPARATOR = '#13161B';
+exports.LIGHT_GRAY = '#ccc';
+exports.KEYBOARD_SHORTCUT_KEY_COLOR = '#eee';
+exports.NOTIFICATION_BACKGROUND = '#111111';
+exports.RENDER_STATUS_BACKGROUND = '#222';
+exports.ERROR_CODE_FRAME_BACKGROUND = '#070707';
+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 = '#0F1113';
+exports.TIMELINE_SELECTED_BACKGROUND_COLOR = '#3B3F42';
+exports.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = '#B0B0B0';
+exports.TIMELINE_BLUE = '#0b84ff';
+exports.TIMELINE_PLAYHEAD_COLOR = '#f02c00';
+exports.TIMELINE_DROP_BLUE_ALPHA_12 = 'rgba(0, 155, 255, 0.12)';
+exports.TIMELINE_DROP_BLUE_ALPHA_16 = 'rgba(0, 155, 255, 0.16)';
+exports.TIMELINE_DROP_BLUE_ALPHA_75 = 'rgba(0, 155, 255, 0.75)';
+exports.TIMELINE_MARQUEE_BLUE_ALPHA_16 = 'rgba(70, 130, 255, 0.16)';
+exports.TIMELINE_MARQUEE_BLUE_ALPHA_75 = 'rgba(70, 130, 255, 0.75)';
+exports.EASING_SELECTED_BACKGROUND = 'rgba(11, 132, 243, 0.18)';
+exports.INFO_BLUE_BACKGROUND = 'rgba(59, 130, 246, 0.15)';
+exports.BORDER_BLACK = `1px solid ${exports.BLACK_HEX}`;
+exports.BORDER_WHITE = `1px solid ${exports.WHITE_HEX}`;
+exports.BORDER_WHITE_2PX = `2px solid ${exports.WHITE_HEX}`;
+exports.BORDER_CURRENT_COLOR = `1px solid ${exports.CURRENT_COLOR}`;
+exports.BORDER_TRANSPARENT_2PX = `2px solid ${exports.TRANSPARENT}`;
+exports.BORDER_BLACK_ALPHA_50 = `1px solid ${exports.BLACK_ALPHA_50}`;
+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}`;
+exports.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = `0 2px 8px ${exports.BLACK_ALPHA_50}`;
+exports.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = `0 -2px 8px ${exports.BLACK_ALPHA_50}`;
+exports.NOTIFICATION_SHADOW = `0 2px 3px ${exports.BLACK_OPAQUE}`;
+exports.SERVER_DISCONNECTED_SHADOW = `0 2px 4px ${exports.BLACK_ALPHA_40}`;
+exports.COLOR_PICKER_POPUP_SHADOW = `0 4px 16px ${exports.BLACK_ALPHA_50}`;
+exports.COLOR_PICKER_HANDLE_SHADOW = `0 0 0 1px ${exports.BLACK_ALPHA_60}`;
+exports.NOTIFICATION_BORDER = `0.25px solid ${exports.WHITE_ALPHA_10}`;
+exports.HOT_MIDDLEWARE_ERROR_STYLE = 'color: #ff0000;';
+exports.HOT_MIDDLEWARE_WARNING_STYLE = 'color: #999933;';
+exports.FOCUS_BOX_SHADOW = `inset 1px 1px #555, inset -1px -1px #555, ` +
+    `inset 1px -1px #555, inset -1px 1px #555`;
+exports.CHECKERBOARD_BACKGROUND_IMAGE = `
+     linear-gradient(
+        45deg,
+        ${exports.BLACK_ALPHA_10} 25%,
+        ${exports.TRANSPARENT} 25%
+      ),
+      linear-gradient(135deg, ${exports.BLACK_ALPHA_10} 25%, ${exports.TRANSPARENT} 25%),
+      linear-gradient(45deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%),
+      linear-gradient(135deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%)
+    `;
+exports.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = `linear-gradient(45deg, #888 25%, ${exports.TRANSPARENT} 25%), ` +
+    `linear-gradient(-45deg, #888 25%, ${exports.TRANSPARENT} 25%), ` +
+    `linear-gradient(45deg, ${exports.TRANSPARENT} 75%, #888 75%), ` +
+    `linear-gradient(-45deg, ${exports.TRANSPARENT} 75%, #888 75%)`;
+exports.COLOR_PICKER_CHECKER_BACKGROUND_COLOR = '#444';
+exports.COLOR_PICKER_SATURATION_VALUE_GRADIENT = `linear-gradient(to right, ${exports.WHITE_HEX}, ${exports.TRANSPARENT})`;
+exports.COLOR_PICKER_SATURATION_BLACK_GRADIENT = `linear-gradient(to top, ${exports.BLACK_HEX}, ${exports.TRANSPARENT})`;
+exports.COLOR_PICKER_ALPHA_TRANSPARENT = 'rgba(0, 0, 0, 0)';
+exports.COLOR_PICKER_HUE_GRADIENT = 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)';
+exports.ERROR_MESSAGE_MASK_IMAGE = `linear-gradient(to bottom, ${exports.WHITE} 60%, ${exports.TRANSPARENT})`;
+exports.SELECTED_OUTLINE_DROP_SHADOW = `drop-shadow(0 0 1px ${exports.WHITE_ALPHA_20})`;
+exports.SELECTED_OUTLINE_UV_DROP_SHADOW = `drop-shadow(0 1px 2px ${exports.BLACK_ALPHA_28})`;
+exports.LOOPED_INDICATOR_DROP_SHADOW = `drop-shadow(0 0 2px ${exports.BLACK_ALPHA_90}) ` +
+    `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) {
@@ -32,8 +140,8 @@ const getBackgroundFromHoverState = ({ selected, hovered, }) => {
         return exports.SELECTED_BACKGROUND;
     }
     if (hovered) {
-        return exports.CLEAR_HOVER;
+        return exports.WHITE_ALPHA_06;
     }
-    return 'transparent';
+    return exports.TRANSPARENT;
 };
 exports.getBackgroundFromHoverState = getBackgroundFromHoverState;

package/dist/helpers/inject-css.js

@@ -3,19 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectCSS = void 0;
 const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
+const colors_1 = require("./colors");
 const makeDefaultGlobalCSS = () => {
     const unhoveredDragAreaFactor = 2;
     const fromMiddle = 50 / unhoveredDragAreaFactor;
     const hoveredDragAreaFactor = 6;
     const fromMiddleHovered = 50 / hoveredDragAreaFactor;
     return `
-  html {
-    --remotion-cli-internals-blue: #0b84f3;
-    --remotion-cli-internals-blue-hovered: #4da3f7;
-    overscroll-behavior-y: none;
-    overscroll-behavior-x: none;
-  }
-  
+	  html {
+	    --remotion-cli-internals-blue: ${colors_1.BLUE};
+	    --remotion-cli-internals-blue-hovered: ${colors_1.BLUE_HOVERED};
+	    overscroll-behavior-y: none;
+	    overscroll-behavior-x: none;
+	  }
+
   body {
     overscroll-behavior-y: none;
     overscroll-behavior-x: none;
@@ -27,83 +28,84 @@ const makeDefaultGlobalCSS = () => {
     user-select: none;
     -webkit-user-select: none;
   }
-  
+
   .remotion-splitter-horizontal {
-    transform: scaleY(${unhoveredDragAreaFactor});
-    background: linear-gradient(
-      to bottom,
-      transparent ${50 - fromMiddle}%,
-      black ${50 - fromMiddle}%,
-      black ${50 + fromMiddle}%,
-      transparent ${50 + fromMiddle}%
-    );
-  }
-  
+	    transform: scaleY(${unhoveredDragAreaFactor});
+	    background: linear-gradient(
+	      to bottom,
+	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+	      ${colors_1.BLACK} ${50 - fromMiddle}%,
+	      ${colors_1.BLACK} ${50 + fromMiddle}%,
+	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+	    );
+	  }
+
   .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
-    background: linear-gradient(
-      to bottom,
-      transparent ${50 - fromMiddleHovered}%,
-      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-      transparent ${50 + fromMiddleHovered}%
-    );
+	    background: linear-gradient(
+	      to bottom,
+	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
+	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
+	    );
     cursor: row-resize;
     transform: scaleY(${hoveredDragAreaFactor});
     z-index: 1000;
   }
-  
+
   .remotion-splitter-vertical {
-    transform: scaleX(${unhoveredDragAreaFactor});
-    background: linear-gradient(
-      to right,
-      transparent ${50 - fromMiddle}%,
-      black ${50 - fromMiddle}%,
-      black ${50 + fromMiddle}%,
-      transparent ${50 + fromMiddle}%
-    );
-  }
-  
+	    transform: scaleX(${unhoveredDragAreaFactor});
+	    background: linear-gradient(
+	      to right,
+	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+	      ${colors_1.BLACK} ${50 - fromMiddle}%,
+	      ${colors_1.BLACK} ${50 + fromMiddle}%,
+	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+	    );
+	  }
+
   .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
-    background: linear-gradient(
-      to right,
-      transparent ${50 - fromMiddleHovered}%,
-      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-      transparent ${50 + fromMiddleHovered}%
-    );
+	    background: linear-gradient(
+	      to right,
+	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
+	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
+	    );
     transform: scaleX(${hoveredDragAreaFactor});
     cursor: col-resize;
     z-index: 1000;
   }
-  
+
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
-  
+
   input:focus,
   textarea:focus,
   button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
   a:focus {
-    outline: none;
-    box-shadow:
-      inset 1px 1px #555,
-      inset -1px -1px #555,
-      inset 1px -1px #555,
-      inset -1px 1px #555;
-  }
+	    outline: none;
+	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
+	  }
 
   .__remotion_color_swatch:focus {
     outline: none;
   }
-  
+
+	  .__remotion_input_dragger:focus-visible {
+	    outline: none;
+	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
+	  }
+
   .__remotion_thumb,
   .__remotion_thumb::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  
+	    -webkit-appearance: none;
+	    -webkit-tap-highlight-color: ${colors_1.TRANSPARENT};
+	  }
+
   .__remotion_thumb {
     pointer-events: none;
     position: absolute;
@@ -114,32 +116,32 @@ const makeDefaultGlobalCSS = () => {
     margin-left: -2px;
     z-index: 2;
   }
-  
-  /* For Firefox browsers */
-  .__remotion_thumb::-moz-range-thumb {
-    border: 1px solid black;
-    border-radius: 2px;
-    cursor: pointer;
-    height: 37px;
-    width: 10px;
-    pointer-events: all;
-    border-color: black;
-    background-color: white;
-    position: relative;
-  }
-  
-  /* For Chrome browsers */
-  .__remotion_thumb::-webkit-slider-thumb {
-    border: 1px solid black;
-    border-radius: 2px;
-    cursor: pointer;
-    height: 39px;
-    width: 10px;
-    pointer-events: all;
-    border-color: black;
-    background-color: white;
-    position: relative;
-  }  
+
+	  /* For Firefox browsers */
+	  .__remotion_thumb::-moz-range-thumb {
+	    border: ${colors_1.BORDER_BLACK};
+	    border-radius: 2px;
+	    cursor: pointer;
+	    height: 37px;
+	    width: 10px;
+	    pointer-events: all;
+	    border-color: ${colors_1.BLACK};
+	    background-color: ${colors_1.WHITE};
+	    position: relative;
+	  }
+
+	  /* For Chrome browsers */
+	  .__remotion_thumb::-webkit-slider-thumb {
+	    border: ${colors_1.BORDER_BLACK};
+	    border-radius: 2px;
+	    cursor: pointer;
+	    height: 39px;
+	    width: 10px;
+	    pointer-events: all;
+	    border-color: ${colors_1.BLACK};
+	    background-color: ${colors_1.WHITE};
+	    position: relative;
+	  }
 
   .__remotion_input_dragger:hover span {
     color: var(--remotion-cli-internals-blue-hovered) !important;

package/dist/helpers/retry-payload.js

@@ -203,6 +203,7 @@ const makeClientRetryPayload = (job) => {
         initialMuted: job.type === 'client-video' ? job.muted : null,
         initialTransparent: job.type === 'client-video' ? job.transparent : null,
         initialAllowHtmlInCanvas: job.allowHtmlInCanvas,
+        initialPageResponsiveness: job.type === 'client-video' ? job.pageResponsiveness : 'disabled',
     };
 };
 exports.makeClientRetryPayload = makeClientRetryPayload;

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

@@ -1,4 +1,4 @@
-import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type InteractivitySchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
+import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type InteractivitySchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
@@ -10,7 +10,9 @@ export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
 export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 export declare const TREE_GROUP_ROW_HEIGHT = 22;
 export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
-export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
+export type TimelineFieldOnSave = (value: unknown, options?: {
+    sourceEdit?: SaveSequencePropSourceEdit;
+}) => Promise<void>;
 export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type TimelineEffectGroupInfo = {
     readonly effectIndex: number;