@remotion/studio 4.0.518 → 4.0.520

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -6,13 +6,14 @@ const react_1 = require("react");
 const Button_1 = require("../../components/Button");
 const colors_1 = require("../../helpers/colors");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
-const carets_1 = require("./carets");
+const caret_1 = require("../../icons/caret");
 const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
 const location = {
-    color: colors_1.WHITE_ALPHA_60,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'monospace',
     fontSize: 14,
+    overflowWrap: 'anywhere',
 };
 const header = {
     paddingLeft: 14,
@@ -22,12 +23,11 @@ const header = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_STACK_FRAME_BLUE,
-    backgroundColor: colors_1.BLACK,
 };
 const left = {
     paddingRight: 14,
     flex: 1,
+    minWidth: 0,
 };
 const fnName = {
     fontSize: 14,
@@ -60,7 +60,10 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
         setShowCodeFrame((f) => !f);
     }, []);
     return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
-            jsx_runtime_1.jsxs("div", { style: header, children: [
+            jsx_runtime_1.jsxs("div", { style: {
+                    ...header,
+                    borderBottom: showCodeFrame ? 'none' : colors_1.BORDER_WHITE_ALPHA_12,
+                }, children: [
                     jsx_runtime_1.jsxs("div", { style: left, children: [
                             jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: location, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("span", { onClick: onOpenFileLocation, onPointerEnter: () => {
                                         setLocationHovered(true);
@@ -68,10 +71,12 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                                         setLocationHovered(false);
                                     }, style: {
                                         ...location,
+                                        color: locationHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
                                         cursor: 'pointer',
-                                        textDecoration: locationHovered ? 'underline' : 'none',
-                                        textUnderlineOffset: locationHovered ? 4 : undefined,
-                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
+                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
+                                display: 'flex',
+                                transform: showCodeFrame ? undefined : 'rotate(-90deg)',
+                            }, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) }) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
         ] }));

package/dist/error-overlay/remotion-overlay/Symbolicating.js

@@ -4,7 +4,7 @@ exports.Symbolicating = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const Symbolicating = (props) => {
-    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: colors_1.WHITE, ...props, children: [
+    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "14", height: "14", fill: colors_1.WHITE, ...props, children: [
             jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })
         ] }));
 };

package/dist/esm/chunk-6jf1natv.js

@@ -0,0 +1,25 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __toESM, __require };

package/dist/esm/{chunk-4bxz1d3g.js → chunk-je0h1bgt.js}

@@ -1,27 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/helpers/colors.ts
 var BLACK = "black";
 var WHITE = "white";
@@ -85,7 +61,6 @@ var ERROR_CODE_FRAME_LINE_BACKGROUND = "#121212";
 var ERROR_LINK_COLOR = "#58a6ff";
 var INFO_BLUE = "#60a5fa";
 var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
-var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
 var TIMELINE_BACKGROUND_COLOR = "#15181B";
 var TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
 var TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
@@ -109,7 +84,6 @@ var BORDER_BLACK_ALPHA_60 = `1px solid ${BLACK_ALPHA_60}`;
 var BORDER_WHITE_ALPHA_12 = `1px solid ${WHITE_ALPHA_12}`;
 var BORDER_WHITE_ALPHA_20 = `1px solid ${WHITE_ALPHA_20}`;
 var BORDER_INFO_BLUE = "1px solid rgba(59, 130, 246, 0.4)";
-var BORDER_STACK_FRAME_BLUE = `1px solid ${STACK_FRAME_BORDER_BLUE}`;
 var BORDER_TIMELINE_DROP_BLUE = `1px solid ${TIMELINE_DROP_BLUE_ALPHA_75}`;
 var BORDER_TIMELINE_MARQUEE_BLUE = `1px solid ${TIMELINE_MARQUEE_BLUE_ALPHA_75}`;
 var SHADOW_BLACK = `0 0 4px ${BLACK}`;
@@ -143,7 +117,6 @@ var SELECTED_OUTLINE_UV_DROP_SHADOW = `drop-shadow(0 1px 2px ${BLACK_ALPHA_28})`
 var LOOPED_INDICATOR_DROP_SHADOW = `drop-shadow(0 0 2px ${BLACK_ALPHA_90}) ` + `drop-shadow(0 1px 2px ${BLACK_ALPHA_80})`;
 var TIMELINE_AUDIO_GRADIENT = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
 var TIMELINE_VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
-var TIMELINE_IMAGE_GRADIENT = "linear-gradient(to top, #2980b9, #3498db)";
 var getBackgroundFromHoverState = ({
   selected,
   hovered
@@ -160,4 +133,4 @@ var getBackgroundFromHoverState = ({
   return TRANSPARENT;
 };
 
-export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };
+export { BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, getBackgroundFromHoverState };