@remotion/studio 4.0.527 → 4.0.528

package/dist/esm/{index-vxwg66ar.mjs → index-xac20sv4.mjs}

@@ -11,32 +11,19 @@ import {
   rightRow,
   useCopyFeedback,
   validatePublicOutputName
-} from "./index-ppspzgn9.mjs";
+} from "./index-x6r9bn12.mjs";
 import {
   showNotification
-} from "./index-21hxsfaa.mjs";
+} from "./index-dh3zk2hv.mjs";
 import {
   Spacing
-} from "./index-5t2dwxsk.mjs";
+} from "./index-890dd9b3.mjs";
 import {
   BLUE,
-  CURRENT_COLOR_LOWERCASE,
   INPUT_BACKGROUND,
   LIGHT_TEXT,
   WHITE
-} from "./index-k426ye99.mjs";
-
-// src/icons/gear.tsx
-import { jsx } from "react/jsx-runtime";
-var GearIcon = ({ color, ...props }) => /* @__PURE__ */ jsx("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 512 512",
-  ...props,
-  children: /* @__PURE__ */ jsx("path", {
-    fill: color ?? CURRENT_COLOR_LOWERCASE,
-    d: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z"
-  })
-});
+} from "./index-wqc43mw0.mjs";
 
 // src/components/Transcription/caption-output-name.ts
 var getDefaultCaptionOutputName = (src, displayName = "captions") => {
@@ -52,7 +39,7 @@ import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
 import { useCallback, useMemo, useState } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var svgStyle = {
   width: 16,
   height: 16,
@@ -75,7 +62,7 @@ var CliCopyButton = ({
   const fillColor = useMemo(() => {
     return hovered ? WHITE : LIGHT_TEXT;
   }, [hovered]);
-  const copyIcon = /* @__PURE__ */ jsx2(CopyIcon, {
+  const copyIcon = /* @__PURE__ */ jsx(CopyIcon, {
     copied,
     color: fillColor,
     style: svgStyle
@@ -86,7 +73,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx2("button", {
+  return /* @__PURE__ */ jsx("button", {
     type: "button",
     onPointerEnter,
     onPointerLeave,
@@ -101,7 +88,7 @@ var CliCopyButton = ({
 };
 
 // src/components/RenderModal/OptionExplainer.tsx
-import { jsx as jsx3, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
 var container = {
   fontSize: 14,
   paddingTop: 10,
@@ -168,16 +155,16 @@ var OptionExplainer = ({
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
-              /* @__PURE__ */ jsx3("strong", {
+              /* @__PURE__ */ jsx2("strong", {
                 style: title,
                 children: option.name
               }),
               option.docLink ? /* @__PURE__ */ jsxs(Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx3(Spacing, {
+                  /* @__PURE__ */ jsx2(Spacing, {
                     x: 1
                   }),
-                  /* @__PURE__ */ jsx3("a", {
+                  /* @__PURE__ */ jsx2("a", {
                     style: link,
                     href: option.docLink,
                     target: "_blank",
@@ -190,7 +177,7 @@ var OptionExplainer = ({
           /* @__PURE__ */ jsxs("div", {
             style: description,
             children: [
-              /* @__PURE__ */ jsx3("style", {
+              /* @__PURE__ */ jsx2("style", {
                 children: `
 							.__remotion-option-explainer-description,
 							.__remotion-option-explainer-description * {
@@ -210,7 +197,7 @@ var OptionExplainer = ({
 							}
 						`
               }),
-              /* @__PURE__ */ jsx3("div", {
+              /* @__PURE__ */ jsx2("div", {
                 className: "__remotion-option-explainer-description",
                 children: option.description("ssr")
               })
@@ -220,12 +207,12 @@ var OptionExplainer = ({
       }),
       hasInfoRows ? /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          /* @__PURE__ */ jsx3(Spacing, {
+          /* @__PURE__ */ jsx2(Spacing, {
             y: 0.5,
             block: true
           }),
-          /* @__PURE__ */ jsx3(MenuDivider, {}),
-          /* @__PURE__ */ jsx3(Spacing, {
+          /* @__PURE__ */ jsx2(MenuDivider, {}),
+          /* @__PURE__ */ jsx2(Spacing, {
             y: 0.5,
             block: true
           }),
@@ -234,19 +221,19 @@ var OptionExplainer = ({
               extraInfoRows.map((row) => /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: row.label
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
-                  /* @__PURE__ */ jsx3("code", {
+                  /* @__PURE__ */ jsx2("code", {
                     children: row.value
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: copyWrapper,
-                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                    children: /* @__PURE__ */ jsx2(CliCopyButton, {
                       valueToCopy: row.value
                     })
                   })
@@ -255,11 +242,11 @@ var OptionExplainer = ({
               shouldShowCliFlag ? /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: "CLI flag"
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
                   /* @__PURE__ */ jsxs("code", {
@@ -268,9 +255,9 @@ var OptionExplainer = ({
                       option.cliFlag
                     ]
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: copyWrapper,
-                    children: /* @__PURE__ */ jsx3(CliCopyButton, {
+                    children: /* @__PURE__ */ jsx2(CliCopyButton, {
                       valueToCopy: option.cliFlag
                     })
                   })
@@ -279,22 +266,22 @@ var OptionExplainer = ({
               shouldShowApiOption ? /* @__PURE__ */ jsxs("div", {
                 style: infoRow,
                 children: [
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: infoRowLabel,
                     children: "API option"
                   }),
-                  /* @__PURE__ */ jsx3("div", {
+                  /* @__PURE__ */ jsx2("div", {
                     style: flexSpacer
                   }),
-                  /* @__PURE__ */ jsx3("code", {
+                  /* @__PURE__ */ jsx2("code", {
                     children: option.ssrName
                   }),
-                  /* @__PURE__ */ jsx3(Spacing, {
+                  /* @__PURE__ */ jsx2(Spacing, {
                     x: 3.75
                   })
                 ]
               }) : null,
-              /* @__PURE__ */ jsx3("div", {
+              /* @__PURE__ */ jsx2("div", {
                 style: infoRow
               })
             ]
@@ -306,12 +293,12 @@ var OptionExplainer = ({
 };
 
 // src/components/RenderModal/OptionExplainerBubble.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
   const option = BrowserSafeApis.options[id];
-  return /* @__PURE__ */ jsx4(InfoBubble, {
+  return /* @__PURE__ */ jsx3(InfoBubble, {
     title: "Learn more about this option",
-    children: /* @__PURE__ */ jsx4(OptionExplainer, {
+    children: /* @__PURE__ */ jsx3(OptionExplainer, {
       extraInfoRows,
       option,
       showApiOption,
@@ -320,7 +307,7 @@ var OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag })
   });
 };
 var WebRendererOptionExplainerBubble = ({ id, apiName }) => {
-  return /* @__PURE__ */ jsx4(OptionExplainerBubble, {
+  return /* @__PURE__ */ jsx3(OptionExplainerBubble, {
     extraInfoRows: [{ label: "API option", value: apiName }],
     id,
     showApiOption: false,
@@ -334,9 +321,9 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
     name,
     ssrName: null
   };
-  return /* @__PURE__ */ jsx4(InfoBubble, {
+  return /* @__PURE__ */ jsx3(InfoBubble, {
     title: "Learn more about this option",
-    children: /* @__PURE__ */ jsx4(OptionExplainer, {
+    children: /* @__PURE__ */ jsx3(OptionExplainer, {
       extraInfoRows: [{ label: "API option", value: apiName }],
       option,
       showApiOption: false,
@@ -346,7 +333,7 @@ var WebRendererCustomOptionExplainerBubble = ({ apiName, description: descriptio
 };
 
 // src/components/RenderModal/NumberSetting.tsx
-import { jsx as jsx5, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
 var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
   const onTextChanged = useCallback2((e) => {
     onValueChanged((q) => {
@@ -369,12 +356,12 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
           name,
           hint ? /* @__PURE__ */ jsxs2(Fragment2, {
             children: [
-              /* @__PURE__ */ jsx5(Spacing, {
+              /* @__PURE__ */ jsx4(Spacing, {
                 x: 0.5
               }),
-              typeof hint === "string" ? /* @__PURE__ */ jsx5(OptionExplainerBubble, {
+              typeof hint === "string" ? /* @__PURE__ */ jsx4(OptionExplainerBubble, {
                 id: hint
-              }) : /* @__PURE__ */ jsx5(InfoBubble, {
+              }) : /* @__PURE__ */ jsx4(InfoBubble, {
                 title: hint.title,
                 children: hint.content
               })
@@ -382,10 +369,10 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsx5("div", {
+      /* @__PURE__ */ jsx4("div", {
         style: rightRow,
-        children: /* @__PURE__ */ jsx5(RightAlignInput, {
-          children: /* @__PURE__ */ jsx5(InputDragger, {
+        children: /* @__PURE__ */ jsx4(RightAlignInput, {
+          children: /* @__PURE__ */ jsx4(InputDragger, {
             value,
             name: name.toLowerCase(),
             "aria-label": `${name}: ${formatter ? formatter(value) : value}`,
@@ -405,4 +392,4 @@ var NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, format
   });
 };
 
-export { GearIcon, getDefaultCaptionOutputName, validateCaptionOutputName, OptionExplainerBubble, WebRendererOptionExplainerBubble, WebRendererCustomOptionExplainerBubble, NumberSetting };
+export { getDefaultCaptionOutputName, validateCaptionOutputName, OptionExplainerBubble, WebRendererOptionExplainerBubble, WebRendererCustomOptionExplainerBubble, NumberSetting };

package/dist/esm/index.mjs

@@ -3,7 +3,7 @@ import {
   play,
   seek,
   shutDownStudio
-} from "./index-n5gmcvhz.mjs";
+} from "./index-5ycb9e9q.mjs";
 import {
   CodingAgentIcon,
   DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME,
@@ -21,14 +21,13 @@ import {
   visualControlRef,
   visualControlStore,
   watchPublicFolder
-} from "./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
+} from "./index-s6qya2gg.mjs";
 import {
   getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-wqc43mw0.mjs";
 import {
   __require,
   __toESM

package/dist/esm/internals.mjs

@@ -1,19 +1,19 @@
 import {
   Studio
-} from "./index-4zen9prq.mjs";
-import"./index-vxwg66ar.mjs";
-import"./index-s7qa3xbw.mjs";
-import"./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
-import"./index-9x6e1dq0.mjs";
-import"./index-n5gmcvhz.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
-import"./index-cw0pnpg5.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-dpyss74p.mjs";
+import"./index-xac20sv4.mjs";
+import"./index-c2wabcdt.mjs";
+import"./index-x6r9bn12.mjs";
+import"./index-dh3zk2hv.mjs";
+import"./index-hqxc6tzp.mjs";
+import"./index-5ycb9e9q.mjs";
+import"./index-s6qya2gg.mjs";
+import"./index-dfy1t576.mjs";
+import"./index-t7tbt980.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/internals.ts

package/dist/esm/previewEntry.mjs

@@ -5,28 +5,28 @@ import {
   markErrorMessageAsLoggedByServer,
   setErrorsRef,
   startReportingRuntimeErrors
-} from "./index-4zen9prq.mjs";
-import"./index-vxwg66ar.mjs";
-import"./index-s7qa3xbw.mjs";
+} from "./index-dpyss74p.mjs";
+import"./index-xac20sv4.mjs";
+import"./index-c2wabcdt.mjs";
 import {
   reloadUrl,
   subscribeToPreviewServerEvents
-} from "./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
-import"./index-9x6e1dq0.mjs";
-import"./index-n5gmcvhz.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
-import"./index-cw0pnpg5.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-x6r9bn12.mjs";
+import"./index-dh3zk2hv.mjs";
+import"./index-hqxc6tzp.mjs";
+import"./index-5ycb9e9q.mjs";
+import"./index-s6qya2gg.mjs";
+import"./index-dfy1t576.mjs";
+import {
+  studioCssVariables
+} from "./index-t7tbt980.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BACKGROUND_HEX,
-  HOT_MIDDLEWARE_ERROR_STYLE,
-  HOT_MIDDLEWARE_WARNING_STYLE,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/previewEntry.tsx
@@ -328,6 +328,8 @@ var processUpdate = function(hash, moduleMap, options) {
 };
 
 // src/hot-middleware-client/client.ts
+var HOT_MIDDLEWARE_ERROR_STYLE = "color: #ff0000;";
+var HOT_MIDDLEWARE_WARNING_STYLE = "color: #999933;";
 function createReporter() {
   const styles = {
     errors: HOT_MIDDLEWARE_ERROR_STYLE,
@@ -438,6 +440,7 @@ var enableHotMiddleware = () => {
 // src/previewEntry.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 installFiberCommitOrderObserver(window);
+Internals3.CSSUtils.injectCSS(studioCssVariables);
 Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
   window.__remotionOverlayStarted = true;

package/dist/esm/renderEntry.mjs

@@ -1,8 +1,11 @@
+import {
+  studioCssVariables
+} from "./index-t7tbt980.mjs";
 import {
   BACKGROUND_HEX,
   TRANSPARENT,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import {
   __require,
   __toESM
@@ -30,6 +33,7 @@ var setBundleMode = (state) => {
 var getBundleMode = () => {
   return currentBundleMode;
 };
+Internals.CSSUtils.injectCSS(studioCssVariables);
 Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 var getCanSerializeDefaultProps = (object) => {
   try {

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

@@ -1 +1,5 @@
-export { calculateTimeline } from '@remotion/canvas';
+export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, compositions, }: {
+    sequences: import("remotion").TSequence[];
+    overrideIdsToNodePaths: import("remotion").OverrideIdToNodePaths;
+    compositions?: readonly import("remotion").AnyComposition[] | undefined;
+}) => import("@remotion/canvas").TimelineTrackData[];

package/dist/helpers/calculate-timeline.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
 const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "calculateTimeline", { enumerable: true, get: function () { return canvas_1.calculateTimeline; } });
+({ calculateTimeline: exports.calculateTimeline } = canvas_1.CanvasInternals);

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
-export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\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    " | undefined;
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "var(--remotion-studio-black)" | "var(--remotion-studio-white)";
+export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        var(--remotion-studio-black-alpha-10) 25%,\n        var(--remotion-studio-transparent) 25%\n      ),\n      linear-gradient(135deg, var(--remotion-studio-black-alpha-10) 25%, var(--remotion-studio-transparent) 25%),\n      linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%),\n      linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%)\n    " | undefined;