@remotion/studio 4.0.403 → 4.0.405

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals65 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React178, { useCallback as useCallback135, useEffect as useEffect82, useMemo as useMemo137 } from "react";
+import React178, { useCallback as useCallback135, useEffect as useEffect83, useMemo as useMemo136 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/colors.ts
@@ -42616,7 +42616,7 @@ import {
   renderMediaOnWeb,
   renderStillOnWeb
 } from "@remotion/web-renderer";
-import { useCallback as useCallback131, useContext as useContext82, useMemo as useMemo134, useState as useState84 } from "react";
+import { useCallback as useCallback131, useContext as useContext82, useMemo as useMemo133, useState as useState85 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx257 } from "react/jsx-runtime";
@@ -43324,8 +43324,119 @@ var WebRenderModalBasic = ({
 };
 
 // src/components/RenderModal/WebRenderModalLicense.tsx
-import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
-import { jsx as jsx263, jsxs as jsxs139, Fragment as Fragment47 } from "react/jsx-runtime";
+import { useCallback as useCallback129, useEffect as useEffect81, useState as useState84 } from "react";
+
+// src/icons/check-circle-filled.tsx
+import { jsx as jsx263 } from "react/jsx-runtime";
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx263("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  style: { width: 14, height: 14 },
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx263("path", {
+    d: "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"
+  })
+});
+
+// src/components/RenderModal/WebRenderModalLicenseKeyDetails.tsx
+import { jsx as jsx264, jsxs as jsxs139 } from "react/jsx-runtime";
+var textStyle2 = {
+  color: LIGHT_TEXT,
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  lineHeight: 1.5,
+  display: "flex",
+  alignItems: "center"
+};
+var linkStyle = {
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  lineHeight: 1.5,
+  cursor: "pointer"
+};
+var bulletStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var icon8 = {
+  width: 14,
+  height: 14,
+  flexShrink: 0
+};
+var PRO_HOST = "https://remotion.pro";
+var fetchLicenseKeyDetails = async (licenseKey) => {
+  const response = await fetch(`${PRO_HOST}/api/validate-license-key`, {
+    method: "POST",
+    body: JSON.stringify({
+      licenseKey
+    }),
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+  return response.json();
+};
+var WebRenderModalLicenseKeyDetails = ({ details }) => {
+  return /* @__PURE__ */ jsxs139("div", {
+    children: [
+      /* @__PURE__ */ jsxs139("div", {
+        style: bulletStyle,
+        children: [
+          /* @__PURE__ */ jsx264(CheckCircleFilled, {
+            style: { ...icon8, fill: LIGHT_TEXT }
+          }),
+          /* @__PURE__ */ jsxs139("div", {
+            style: textStyle2,
+            children: [
+              "Belongs to ",
+              /* @__PURE__ */ jsx264("a", {
+                href: `${PRO_HOST}/projects/${details.projectSlug}`,
+                target: "_blank",
+                style: linkStyle,
+                children: details.projectName
+              }),
+              " - ",
+              /* @__PURE__ */ jsx264("a", {
+                href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`,
+                target: "_blank",
+                style: linkStyle,
+                children: "View usage"
+              })
+            ]
+          })
+        ]
+      }),
+      details.hasActiveSubscription ? /* @__PURE__ */ jsxs139("div", {
+        style: bulletStyle,
+        children: [
+          /* @__PURE__ */ jsx264(CheckCircleFilled, {
+            style: { ...icon8, fill: LIGHT_TEXT }
+          }),
+          /* @__PURE__ */ jsx264("div", {
+            style: textStyle2,
+            children: "Active Company License"
+          })
+        ]
+      }) : /* @__PURE__ */ jsxs139("div", {
+        style: bulletStyle,
+        children: [
+          /* @__PURE__ */ jsx264(WarningTriangle, {
+            type: "warning",
+            style: { ...icon8, fill: WARNING_COLOR }
+          }),
+          /* @__PURE__ */ jsx264("div", {
+            style: textStyle2,
+            children: "No active Company License"
+          })
+        ]
+      })
+    ]
+  });
+};
+
+// src/components/RenderModal/WebRenderModalLicense.tsx
+import { jsx as jsx265, jsxs as jsxs140, Fragment as Fragment47 } from "react/jsx-runtime";
 var row9 = {
   display: "flex",
   flexDirection: "row",
@@ -43402,34 +43513,73 @@ var LICENSE_KEY_LENGTH = 55;
 var LICENSE_KEY_PREFIX = "rm_pub_";
 var validateLicenseKey = (key5) => {
   if (key5.length === 0) {
-    return { valid: false, message: null };
+    return { valid: false, message: null, details: null };
   }
   if (!key5.startsWith(LICENSE_KEY_PREFIX)) {
     return {
       valid: false,
-      message: `License key must start with "${LICENSE_KEY_PREFIX}"`
+      message: `License key must start with "${LICENSE_KEY_PREFIX}"`,
+      details: null
     };
   }
   const afterPrefix = key5.slice(LICENSE_KEY_PREFIX.length);
   if (!/^[a-zA-Z0-9]*$/.test(afterPrefix)) {
     return {
       valid: false,
-      message: "License key must contain only alphanumeric characters after the prefix"
+      message: "License key must contain only alphanumeric characters after the prefix",
+      details: null
     };
   }
   if (key5.length !== LICENSE_KEY_LENGTH) {
     return {
       valid: false,
-      message: `License key must be ${LICENSE_KEY_LENGTH} characters long`
+      message: `License key must be ${LICENSE_KEY_LENGTH} characters long`,
+      details: null
     };
   }
-  return { valid: true, message: null };
+  return { valid: true, message: null, details: null };
 };
 var WebRenderModalLicense = ({
   licenseKey,
   setLicenseKey,
   initialPublicLicenseKey
 }) => {
+  const [licenseValidation, setLicenseValidation] = useState84({ valid: true, message: null, details: null });
+  const [isLoading, setIsLoading] = useState84(false);
+  useEffect81(() => {
+    if (licenseKey === null || licenseKey === "free-license") {
+      return setLicenseValidation({
+        valid: true,
+        message: null,
+        details: null
+      });
+    }
+    const validation = validateLicenseKey(licenseKey);
+    if (!validation.valid) {
+      return setLicenseValidation(validation);
+    }
+    setLicenseValidation({ valid: true, message: null, details: null });
+    setIsLoading(true);
+    fetchLicenseKeyDetails(licenseKey).then((details) => {
+      setIsLoading(false);
+      if (details.isValid) {
+        setLicenseValidation({ valid: true, message: null, details });
+      } else {
+        setLicenseValidation({
+          valid: false,
+          message: "License key is invalid or has been reset",
+          details: null
+        });
+      }
+    }).catch(() => {
+      setIsLoading(false);
+      setLicenseValidation({
+        valid: false,
+        message: "Failed to fetch license key details",
+        details: null
+      });
+    });
+  }, [licenseKey]);
   const onFreeLicenseChange = useCallback129(() => {
     setLicenseKey("free-license");
   }, [setLicenseKey]);
@@ -43439,21 +43589,15 @@ var WebRenderModalLicense = ({
   const onLicenseKeyChange = useCallback129((e) => {
     setLicenseKey(e.target.value);
   }, [setLicenseKey]);
-  const licenseValidation = useMemo132(() => {
-    if (licenseKey === null || licenseKey === "free-license") {
-      return { valid: true, message: null };
-    }
-    return validateLicenseKey(licenseKey);
-  }, [licenseKey]);
-  return /* @__PURE__ */ jsxs139("div", {
+  return /* @__PURE__ */ jsxs140("div", {
     style: tabContainer3,
     children: [
-      /* @__PURE__ */ jsxs139("div", {
+      /* @__PURE__ */ jsxs140("div", {
         style: descriptionStyle,
         children: [
           "Remotion is free if you are an individual or company with a headcount of 3 or less. See",
           " ",
-          /* @__PURE__ */ jsx263("a", {
+          /* @__PURE__ */ jsx265("a", {
             style: descriptionLink,
             href: "https://remotion.dev/license",
             children: "LICENSE.md"
@@ -43461,18 +43605,18 @@ var WebRenderModalLicense = ({
           "."
         ]
       }),
-      /* @__PURE__ */ jsx263("div", {
+      /* @__PURE__ */ jsx265("div", {
         style: row9,
-        children: /* @__PURE__ */ jsxs139("div", {
+        children: /* @__PURE__ */ jsxs140("div", {
           style: justifyCenter,
           children: [
-            /* @__PURE__ */ jsx263(Checkbox, {
+            /* @__PURE__ */ jsx265(Checkbox, {
               checked: licenseKey === "free-license",
               onChange: onFreeLicenseChange,
               name: "free-license",
               rounded: true
             }),
-            /* @__PURE__ */ jsxs139("div", {
+            /* @__PURE__ */ jsxs140("div", {
               style: checkboxLabel,
               onClick: onFreeLicenseChange,
               children: [
@@ -43484,34 +43628,34 @@ var WebRenderModalLicense = ({
           ]
         })
       }),
-      licenseKey === "free-license" ? /* @__PURE__ */ jsxs139("div", {
+      licenseKey === "free-license" ? /* @__PURE__ */ jsxs140("div", {
         style: paddedDescriptionStyle,
         children: [
           "Enjoy Remotion! Add the following to",
           " ",
-          /* @__PURE__ */ jsx263("code", {
+          /* @__PURE__ */ jsx265("code", {
             style: codeStyle,
             children: "remotion.config.ts"
           }),
           " to persist this setting:",
-          /* @__PURE__ */ jsx263("div", {
+          /* @__PURE__ */ jsx265("div", {
             style: codeLine,
             children: "Config.setPublicLicenseKey('free-license');"
           })
         ]
       }) : null,
-      /* @__PURE__ */ jsx263("div", {
+      /* @__PURE__ */ jsx265("div", {
         style: row9,
-        children: /* @__PURE__ */ jsxs139("div", {
+        children: /* @__PURE__ */ jsxs140("div", {
           style: justifyCenter,
           children: [
-            /* @__PURE__ */ jsx263(Checkbox, {
+            /* @__PURE__ */ jsx265(Checkbox, {
               checked: licenseKey !== "free-license" && licenseKey !== null,
               onChange: onCompanyLicenseChange,
               name: "company-license",
               rounded: true
             }),
-            /* @__PURE__ */ jsx263("div", {
+            /* @__PURE__ */ jsx265("div", {
               style: checkboxLabel,
               onClick: onCompanyLicenseChange,
               children: "I have a Company License"
@@ -43519,12 +43663,12 @@ var WebRenderModalLicense = ({
           ]
         })
       }),
-      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs139("div", {
+      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs140("div", {
         style: paddedDescriptionStyle,
         children: [
           "Add your public license from",
           " ",
-          /* @__PURE__ */ jsx263("a", {
+          /* @__PURE__ */ jsx265("a", {
             href: "https://remotion.pro/dashboard",
             target: "_blank",
             style: descriptionLink,
@@ -43532,11 +43676,11 @@ var WebRenderModalLicense = ({
           }),
           " ",
           "key below.",
-          /* @__PURE__ */ jsx263(Spacing, {
+          /* @__PURE__ */ jsx265(Spacing, {
             y: 1,
             block: true
           }),
-          /* @__PURE__ */ jsx263(RemotionInput, {
+          /* @__PURE__ */ jsx265(RemotionInput, {
             value: licenseKey,
             onChange: onLicenseKeyChange,
             placeholder: "remotion.pro public license key (starts with rm_pub_)",
@@ -43545,46 +43689,66 @@ var WebRenderModalLicense = ({
             style: inputStyle2,
             autoFocus: true
           }),
-          licenseValidation.message ? /* @__PURE__ */ jsxs139(Fragment47, {
+          licenseValidation.message ? /* @__PURE__ */ jsxs140(Fragment47, {
             children: [
-              /* @__PURE__ */ jsx263(Spacing, {
+              /* @__PURE__ */ jsx265(Spacing, {
                 y: 1,
                 block: true
               }),
-              /* @__PURE__ */ jsx263(ValidationMessage, {
+              /* @__PURE__ */ jsx265(ValidationMessage, {
                 message: licenseValidation.message,
                 align: "flex-start",
                 type: "error"
               })
             ]
           }) : null,
-          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs139(Fragment47, {
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs140(Fragment47, {
             children: [
-              /* @__PURE__ */ jsx263(Spacing, {
+              /* @__PURE__ */ jsx265(Spacing, {
                 y: 1,
                 block: true
               }),
               "Add the following to",
               " ",
-              /* @__PURE__ */ jsx263("code", {
+              /* @__PURE__ */ jsx265("code", {
                 style: codeStyle,
                 children: "remotion.config.ts"
               }),
               " to persist this setting:",
-              /* @__PURE__ */ jsx263("div", {
+              /* @__PURE__ */ jsx265("div", {
                 style: codeLineSmall,
                 children: "Config.setPublicLicenseKey('" + licenseKey + "');"
               })
             ]
-          }) : null
+          }) : null,
+          isLoading && /* @__PURE__ */ jsxs140(Fragment47, {
+            children: [
+              /* @__PURE__ */ jsx265(Spacing, {
+                y: 1,
+                block: true
+              }),
+              "Loading license key details..."
+            ]
+          }),
+          licenseValidation.details && /* @__PURE__ */ jsxs140(Fragment47, {
+            children: [
+              /* @__PURE__ */ jsx265(Spacing, {
+                y: 1,
+                block: true
+              }),
+              /* @__PURE__ */ jsx265(WebRenderModalLicenseKeyDetails, {
+                details: licenseValidation.details
+              })
+            ]
+          })
         ]
       }) : null,
-      licenseKey === null ? /* @__PURE__ */ jsxs139("div", {
+      licenseKey === null ? /* @__PURE__ */ jsxs140("div", {
         style: descriptionStyle,
         children: [
           "If you are not eligible for the free license, you need to obtain a",
           " ",
-          /* @__PURE__ */ jsx263("a", {
+          /* @__PURE__ */ jsx265("a", {
             style: descriptionLink,
             target: "_blank",
             href: "https://remotion.pro/license",
@@ -43598,8 +43762,8 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback130, useMemo as useMemo133 } from "react";
-import { jsx as jsx264, jsxs as jsxs140 } from "react/jsx-runtime";
+import { useCallback as useCallback130, useMemo as useMemo132 } from "react";
+import { jsx as jsx266, jsxs as jsxs141 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
 };
@@ -43612,26 +43776,26 @@ var WebRenderModalPicture = ({
   transparent,
   setTransparent
 }) => {
-  const qualityOptions = useMemo133(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo132(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback130((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
     return null;
   }
-  return /* @__PURE__ */ jsxs140("div", {
+  return /* @__PURE__ */ jsxs141("div", {
     style: tabContainer4,
     children: [
-      /* @__PURE__ */ jsxs140("div", {
+      /* @__PURE__ */ jsxs141("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx266("div", {
             style: label5,
             children: "Quality"
           }),
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx266("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx264(Combobox, {
+            children: /* @__PURE__ */ jsx266(Combobox, {
               values: qualityOptions,
               selectedId: videoBitrate,
               title: "Quality"
@@ -43639,7 +43803,7 @@ var WebRenderModalPicture = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx264(NumberSetting, {
+      /* @__PURE__ */ jsx266(NumberSetting, {
         name: "Keyframe Interval",
         formatter: (v) => `${v}s`,
         min: 1,
@@ -43648,16 +43812,16 @@ var WebRenderModalPicture = ({
         value: keyframeIntervalInSeconds,
         onValueChanged: setKeyframeIntervalInSeconds
       }),
-      /* @__PURE__ */ jsxs140("div", {
+      /* @__PURE__ */ jsxs141("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx266("div", {
             style: label5,
             children: "Transparent"
           }),
-          /* @__PURE__ */ jsx264("div", {
+          /* @__PURE__ */ jsx266("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx264(Checkbox, {
+            children: /* @__PURE__ */ jsx266(Checkbox, {
               checked: transparent,
               onChange: onTransparentChanged,
               name: "transparent"
@@ -43670,7 +43834,7 @@ var WebRenderModalPicture = ({
 };
 
 // src/components/RenderModal/WebRenderModal.tsx
-import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs142 } from "react/jsx-runtime";
 var invalidCharacters2 = ["?", "*", "+", ":", "%"];
 var isValidStillExtension2 = (extension, stillImageFormat) => {
   if (stillImageFormat === "jpeg" && extension === "jpg") {
@@ -43730,64 +43894,64 @@ var WebRenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const [isVideo] = useState84(() => {
+  const [isVideo] = useState85(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
-  const [renderMode, setRenderMode] = useState84(isVideo ? "video" : "still");
-  const [tab, setTab] = useState84("general");
-  const [imageFormat, setImageFormat] = useState84("png");
-  const [frame2, setFrame] = useState84(() => initialFrame);
-  const [logLevel, setLogLevel] = useState84(() => initialLogLevel);
-  const [inputProps, setInputProps] = useState84(() => defaultProps);
-  const [delayRenderTimeout, setDelayRenderTimeout] = useState84(30000);
-  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState84(null);
-  const [saving, setSaving] = useState84(false);
-  const [codec, setCodec] = useState84("h264");
-  const [container61, setContainer] = useState84("mp4");
-  const [audioCodec, setAudioCodec] = useState84("aac");
-  const [audioBitrate, setAudioBitrate] = useState84("medium");
-  const [videoBitrate, setVideoBitrate] = useState84("high");
-  const [hardwareAcceleration, setHardwareAcceleration] = useState84("no-preference");
-  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState84(5);
-  const [startFrame, setStartFrame] = useState84(() => inFrameMark ?? null);
-  const [endFrame, setEndFrame] = useState84(() => outFrameMark ?? null);
-  const [renderProgress, setRenderProgress] = useState84(null);
-  const [transparent, setTransparent] = useState84(false);
-  const [muted, setMuted] = useState84(false);
-  const [licenseKey, setLicenseKey] = useState84(initialLicenseKey);
+  const [renderMode, setRenderMode] = useState85(isVideo ? "video" : "still");
+  const [tab, setTab] = useState85("general");
+  const [imageFormat, setImageFormat] = useState85("png");
+  const [frame2, setFrame] = useState85(() => initialFrame);
+  const [logLevel, setLogLevel] = useState85(() => initialLogLevel);
+  const [inputProps, setInputProps] = useState85(() => defaultProps);
+  const [delayRenderTimeout, setDelayRenderTimeout] = useState85(30000);
+  const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState85(null);
+  const [saving, setSaving] = useState85(false);
+  const [codec, setCodec] = useState85("h264");
+  const [container61, setContainer] = useState85("mp4");
+  const [audioCodec, setAudioCodec] = useState85("aac");
+  const [audioBitrate, setAudioBitrate] = useState85("medium");
+  const [videoBitrate, setVideoBitrate] = useState85("high");
+  const [hardwareAcceleration, setHardwareAcceleration] = useState85("no-preference");
+  const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = useState85(5);
+  const [startFrame, setStartFrame] = useState85(() => inFrameMark ?? null);
+  const [endFrame, setEndFrame] = useState85(() => outFrameMark ?? null);
+  const [renderProgress, setRenderProgress] = useState85(null);
+  const [transparent, setTransparent] = useState85(false);
+  const [muted, setMuted] = useState85(false);
+  const [licenseKey, setLicenseKey] = useState85(initialLicenseKey);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
-  const effectiveAudioCodec = useMemo134(() => {
+  const effectiveAudioCodec = useMemo133(() => {
     if (encodableAudioCodecs.includes(audioCodec)) {
       return audioCodec;
     }
     return encodableAudioCodecs[0] ?? audioCodec;
   }, [audioCodec, encodableAudioCodecs]);
-  const effectiveVideoCodec = useMemo134(() => {
+  const effectiveVideoCodec = useMemo133(() => {
     if (encodableVideoCodecs.includes(codec)) {
       return codec;
     }
     return encodableVideoCodecs[0] ?? codec;
   }, [codec, encodableVideoCodecs]);
-  const finalEndFrame = useMemo134(() => {
+  const finalEndFrame = useMemo133(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo134(() => {
+  const finalStartFrame = useMemo133(() => {
     if (startFrame === null) {
       return 0;
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const frameRange = useMemo134(() => {
+  const frameRange = useMemo133(() => {
     if (startFrame === null && endFrame === null) {
       return null;
     }
     return [finalStartFrame, finalEndFrame];
   }, [endFrame, finalEndFrame, finalStartFrame, startFrame]);
-  const [initialOutName] = useState84(() => {
+  const [initialOutName] = useState85(() => {
     return getDefaultOutLocation2({
       compositionName: resolvedComposition.id,
       defaultExtension: renderMode === "still" ? imageFormat : isVideo ? container61 : imageFormat,
@@ -43796,7 +43960,7 @@ var WebRenderModal = ({
       clientSideRender: true
     });
   });
-  const [outName, setOutName] = useState84(() => initialOutName);
+  const [outName, setOutName] = useState85(() => initialOutName);
   const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
@@ -43826,7 +43990,7 @@ var WebRenderModal = ({
       });
     }
   }, [container61, imageFormat]);
-  const renderTabOptions = useMemo134(() => {
+  const renderTabOptions = useMemo133(() => {
     const options = [
       {
         label: "Still",
@@ -43864,7 +44028,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback131((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo134(() => {
+  const outnameValidation = useMemo133(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -44023,30 +44187,30 @@ var WebRenderModal = ({
       await onRenderVideo();
     }
   }, [renderMode, onRenderStill, onRenderVideo]);
-  return /* @__PURE__ */ jsxs141("div", {
+  return /* @__PURE__ */ jsxs142("div", {
     style: outerModalStyle,
     children: [
-      /* @__PURE__ */ jsx265(ModalHeader, {
+      /* @__PURE__ */ jsx267(ModalHeader, {
         title: `Render ${resolvedComposition.id}`
       }),
-      /* @__PURE__ */ jsxs141("div", {
+      /* @__PURE__ */ jsxs142("div", {
         style: container59,
         children: [
-          /* @__PURE__ */ jsx265(SegmentedControl, {
+          /* @__PURE__ */ jsx267(SegmentedControl, {
             items: renderTabOptions,
             needsWrapping: false
           }),
-          /* @__PURE__ */ jsx265("div", {
+          /* @__PURE__ */ jsx267("div", {
             style: flexer
           }),
-          /* @__PURE__ */ jsxs141(Button, {
+          /* @__PURE__ */ jsxs142(Button, {
             autoFocus: true,
             onClick: onRender,
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
               renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
-              /* @__PURE__ */ jsx265(ShortcutHint, {
+              /* @__PURE__ */ jsx267(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
               })
@@ -44054,94 +44218,94 @@ var WebRenderModal = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx265("div", {
+      /* @__PURE__ */ jsx267("div", {
         style: container59,
-        children: /* @__PURE__ */ jsx265(WebRendererExperimentalBadge, {})
+        children: /* @__PURE__ */ jsx267(WebRendererExperimentalBadge, {})
       }),
-      /* @__PURE__ */ jsxs141("div", {
+      /* @__PURE__ */ jsxs142("div", {
         style: horizontalLayout,
         children: [
-          /* @__PURE__ */ jsxs141("div", {
+          /* @__PURE__ */ jsxs142("div", {
             style: leftSidebar,
             children: [
-              /* @__PURE__ */ jsxs141(VerticalTab, {
+              /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "general",
                 onClick: () => setTab("general"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(FileIcon, {
+                    children: /* @__PURE__ */ jsx267(FileIcon, {
                       style: icon6
                     })
                   }),
                   "General"
                 ]
               }),
-              /* @__PURE__ */ jsxs141(VerticalTab, {
+              /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "data",
                 onClick: () => setTab("data"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(DataIcon, {
+                    children: /* @__PURE__ */ jsx267(DataIcon, {
                       style: icon6
                     })
                   }),
                   "Input Props"
                 ]
               }),
-              renderMode === "video" ? /* @__PURE__ */ jsxs141(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "picture",
                 onClick: () => setTab("picture"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(PicIcon, {
+                    children: /* @__PURE__ */ jsx267(PicIcon, {
                       style: icon6
                     })
                   }),
                   "Picture"
                 ]
               }) : null,
-              renderMode === "video" ? /* @__PURE__ */ jsxs141(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "audio",
                 onClick: () => setTab("audio"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(AudioIcon, {
+                    children: /* @__PURE__ */ jsx267(AudioIcon, {
                       style: icon6
                     })
                   }),
                   "Audio"
                 ]
               }) : null,
-              /* @__PURE__ */ jsxs141(VerticalTab, {
+              /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "advanced",
                 onClick: () => setTab("advanced"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(GearIcon, {
+                    children: /* @__PURE__ */ jsx267(GearIcon, {
                       style: icon6
                     })
                   }),
                   "Other"
                 ]
               }),
-              /* @__PURE__ */ jsxs141(VerticalTab, {
+              /* @__PURE__ */ jsxs142(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "license",
                 onClick: () => setTab("license"),
                 children: [
-                  /* @__PURE__ */ jsx265("div", {
+                  /* @__PURE__ */ jsx267("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx265(CertificateIcon, {
+                    children: /* @__PURE__ */ jsx267(CertificateIcon, {
                       style: icon6
                     })
                   }),
@@ -44150,10 +44314,10 @@ var WebRenderModal = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsx265("div", {
+          /* @__PURE__ */ jsx267("div", {
             style: optionsPanel,
             className: VERTICAL_SCROLLBAR_CLASSNAME,
-            children: tab === "general" ? /* @__PURE__ */ jsx265(WebRenderModalBasic, {
+            children: tab === "general" ? /* @__PURE__ */ jsx267(WebRenderModalBasic, {
               renderMode,
               resolvedComposition,
               imageFormat,
@@ -44175,7 +44339,7 @@ var WebRenderModal = ({
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message,
               logLevel,
               setLogLevel
-            }) : tab === "data" ? /* @__PURE__ */ jsx265(DataEditor, {
+            }) : tab === "data" ? /* @__PURE__ */ jsx267(DataEditor, {
               defaultProps: inputProps,
               setDefaultProps: setInputProps,
               unresolvedComposition,
@@ -44184,7 +44348,7 @@ var WebRenderModal = ({
               saving,
               setSaving,
               readOnlyStudio: false
-            }) : tab === "picture" ? /* @__PURE__ */ jsx265(WebRenderModalPicture, {
+            }) : tab === "picture" ? /* @__PURE__ */ jsx267(WebRenderModalPicture, {
               renderMode,
               videoBitrate,
               setVideoBitrate,
@@ -44192,7 +44356,7 @@ var WebRenderModal = ({
               setKeyframeIntervalInSeconds,
               transparent,
               setTransparent
-            }) : tab === "audio" ? /* @__PURE__ */ jsx265(WebRenderModalAudio, {
+            }) : tab === "audio" ? /* @__PURE__ */ jsx267(WebRenderModalAudio, {
               muted,
               setMuted,
               audioCodec,
@@ -44202,7 +44366,7 @@ var WebRenderModal = ({
               container: container61,
               encodableCodecs: encodableAudioCodecs,
               effectiveAudioCodec
-            }) : tab === "advanced" ? /* @__PURE__ */ jsx265(WebRenderModalAdvanced, {
+            }) : tab === "advanced" ? /* @__PURE__ */ jsx267(WebRenderModalAdvanced, {
               renderMode,
               delayRenderTimeout,
               setDelayRenderTimeout,
@@ -44210,7 +44374,7 @@ var WebRenderModal = ({
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
               setHardwareAcceleration
-            }) : /* @__PURE__ */ jsx265(WebRenderModalLicense, {
+            }) : /* @__PURE__ */ jsx267(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,
               initialPublicLicenseKey: initialLicenseKey
@@ -44222,10 +44386,10 @@ var WebRenderModal = ({
   });
 };
 var WebRenderModalWithLoader = (props) => {
-  return /* @__PURE__ */ jsx265(DismissableModal, {
-    children: /* @__PURE__ */ jsx265(ResolveCompositionBeforeModal, {
+  return /* @__PURE__ */ jsx267(DismissableModal, {
+    children: /* @__PURE__ */ jsx267(ResolveCompositionBeforeModal, {
       compositionId: props.compositionId,
-      children: /* @__PURE__ */ jsx265(WebRenderModal, {
+      children: /* @__PURE__ */ jsx267(WebRenderModal, {
         ...props
       })
     })
@@ -44233,11 +44397,11 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback134, useMemo as useMemo136 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback132, useEffect as useEffect81, useState as useState85 } from "react";
-import { jsx as jsx266, jsxs as jsxs142 } from "react/jsx-runtime";
+import { useCallback as useCallback132, useEffect as useEffect82, useState as useState86 } from "react";
+import { jsx as jsx268, jsxs as jsxs143 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
   height: 16,
@@ -44247,7 +44411,7 @@ var buttonContainerStyle = {
   display: "flex",
   minWidth: "114px"
 };
-var copyIcon = /* @__PURE__ */ jsx266("svg", {
+var copyIcon = /* @__PURE__ */ jsx268("svg", {
   "aria-hidden": "true",
   focusable: "false",
   "data-prefix": "far",
@@ -44257,7 +44421,7 @@ var copyIcon = /* @__PURE__ */ jsx266("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512",
   style: iconStyle8,
-  children: /* @__PURE__ */ jsx266("path", {
+  children: /* @__PURE__ */ jsx268("path", {
     fill: "currentColor",
     d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
   })
@@ -44266,7 +44430,7 @@ var labelStyle5 = {
   fontSize: 14
 };
 var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
-  const [copied, setCopied] = useState85(false);
+  const [copied, setCopied] = useState86(false);
   const onClick = useCallback132(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
@@ -44274,23 +44438,23 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect81(() => {
+  useEffect82(() => {
     if (!copied) {
       return;
     }
     const to = setTimeout(() => setCopied(false), 2000);
     return () => clearTimeout(to);
   }, [copied]);
-  return /* @__PURE__ */ jsxs142(Button, {
+  return /* @__PURE__ */ jsxs143(Button, {
     onClick,
     buttonContainerStyle,
     children: [
       copyIcon,
-      /* @__PURE__ */ jsx266(Spacing, {
+      /* @__PURE__ */ jsx268(Spacing, {
         x: 1.5
       }),
       " ",
-      /* @__PURE__ */ jsx266("span", {
+      /* @__PURE__ */ jsx268("span", {
         style: labelStyle5,
         children: copied ? labelWhenCopied : label11
       })
@@ -44299,8 +44463,8 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback133, useMemo as useMemo135, useState as useState86 } from "react";
-import { jsx as jsx267 } from "react/jsx-runtime";
+import { useCallback as useCallback133, useMemo as useMemo134, useState as useState87 } from "react";
+import { jsx as jsx269 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
   height: "11px"
@@ -44314,18 +44478,18 @@ var buttonStyle8 = {
   alignItems: "center"
 };
 var OpenIssueButton = ({ link: link4 }) => {
-  const [hovered, setHovered] = useState86(false);
+  const [hovered, setHovered] = useState87(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
   const handleClick = useCallback133(() => {
     window.open(link4, "_blank");
   }, [link4]);
-  const svgFillColor = useMemo135(() => {
+  const svgFillColor = useMemo134(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
-  const openInEditorSvg = /* @__PURE__ */ jsx267("svg", {
+  const openInEditorSvg = /* @__PURE__ */ jsx269("svg", {
     viewBox: "0 0 512 512",
     style: svgStyle3,
-    children: /* @__PURE__ */ jsx267("path", {
+    children: /* @__PURE__ */ jsx269("path", {
       fill: svgFillColor,
       d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
     })
@@ -44336,7 +44500,7 @@ var OpenIssueButton = ({ link: link4 }) => {
   const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx267("button", {
+  return /* @__PURE__ */ jsx269("button", {
     title: buttonTooltip,
     type: "button",
     onPointerEnter,
@@ -44348,7 +44512,7 @@ var OpenIssueButton = ({ link: link4 }) => {
 };
 
 // src/components/KnownBugs.tsx
-import { jsx as jsx268, jsxs as jsxs143 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs144 } from "react/jsx-runtime";
 var container61 = {
   display: "flex",
   flexDirection: "row",
@@ -44360,29 +44524,29 @@ var text4 = {
 };
 var KnownBugs = ({ bugs }) => {
   const bugElements = bugs.map((bug) => {
-    return /* @__PURE__ */ jsxs143("div", {
+    return /* @__PURE__ */ jsxs144("div", {
       style: container61,
       children: [
-        /* @__PURE__ */ jsxs143("div", {
+        /* @__PURE__ */ jsxs144("div", {
           style: text4,
           children: [
             "\uD83E\uDEB2 ",
             bug.title
           ]
         }),
-        /* @__PURE__ */ jsx268(OpenIssueButton, {
+        /* @__PURE__ */ jsx270(OpenIssueButton, {
           link: bug.link
         })
       ]
     }, bug.description + bug.link);
   });
-  return /* @__PURE__ */ jsx268("div", {
+  return /* @__PURE__ */ jsx270("div", {
     children: bugElements
   });
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx269, jsxs as jsxs144, Fragment as Fragment48 } from "react/jsx-runtime";
+import { jsx as jsx271, jsxs as jsxs145, Fragment as Fragment48 } from "react/jsx-runtime";
 var container62 = {
   padding: 20,
   paddingTop: 0
@@ -44416,7 +44580,7 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo136(() => {
+  const hasKnownBugs = useMemo135(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
@@ -44425,17 +44589,17 @@ var UpdateModal = ({ info, knownBugs }) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxs144(DismissableModal, {
+  return /* @__PURE__ */ jsxs145(DismissableModal, {
     children: [
-      /* @__PURE__ */ jsx269(ModalHeader, {
+      /* @__PURE__ */ jsx271(ModalHeader, {
         title: "Update available"
       }),
-      /* @__PURE__ */ jsxs144("div", {
+      /* @__PURE__ */ jsxs145("div", {
         style: container62,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs144(Fragment48, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment48, {
             children: [
-              /* @__PURE__ */ jsxs144("div", {
+              /* @__PURE__ */ jsxs145("div", {
                 style: title7,
                 children: [
                   "The currently installed version ",
@@ -44443,42 +44607,42 @@ var UpdateModal = ({ info, knownBugs }) => {
                   " has the following known bugs:"
                 ]
               }),
-              /* @__PURE__ */ jsx269(KnownBugs, {
+              /* @__PURE__ */ jsx271(KnownBugs, {
                 bugs: knownBugs
               }),
-              /* @__PURE__ */ jsx269("div", {
+              /* @__PURE__ */ jsx271("div", {
                 style: { height: "20px" }
               }),
-              /* @__PURE__ */ jsx269("div", {
+              /* @__PURE__ */ jsx271("div", {
                 style: text5,
                 children: "To upgrade, run the following command:"
               })
             ]
-          }) : /* @__PURE__ */ jsx269("div", {
+          }) : /* @__PURE__ */ jsx271("div", {
             style: title7,
             children: "A new update for Remotion is available! Run the following command:"
           }),
-          /* @__PURE__ */ jsxs144(Row, {
+          /* @__PURE__ */ jsxs145(Row, {
             align: "center",
             children: [
-              /* @__PURE__ */ jsx269(Flex, {
-                children: /* @__PURE__ */ jsx269("pre", {
+              /* @__PURE__ */ jsx271(Flex, {
+                children: /* @__PURE__ */ jsx271("pre", {
                   onClick,
                   style: code,
                   children: command
                 })
               }),
-              /* @__PURE__ */ jsx269(Spacing, {
+              /* @__PURE__ */ jsx271(Spacing, {
                 x: 1
               }),
-              /* @__PURE__ */ jsx269(CopyButton, {
+              /* @__PURE__ */ jsx271(CopyButton, {
                 textToCopy: command,
                 label: "Copy",
                 labelWhenCopied: "Copied!"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs144("div", {
+          /* @__PURE__ */ jsxs145("div", {
             style: text5,
             children: [
               "This will upgrade Remotion from ",
@@ -44489,12 +44653,12 @@ var UpdateModal = ({ info, knownBugs }) => {
               "."
             ]
           }),
-          /* @__PURE__ */ jsxs144("div", {
+          /* @__PURE__ */ jsxs145("div", {
             style: text5,
             children: [
               "Read the",
               " ",
-              /* @__PURE__ */ jsx269("a", {
+              /* @__PURE__ */ jsx271("a", {
                 style: link4,
                 target: "_blank",
                 href: "https://github.com/remotion-dev/remotion/releases",
@@ -44513,24 +44677,24 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment49 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs146, Fragment as Fragment49 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext83(ModalsContext);
   const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs145(Fragment49, {
+  return /* @__PURE__ */ jsxs146(Fragment49, {
     children: [
-      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx270(DuplicateComposition, {
+      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx272(DuplicateComposition, {
         compositionType: modalContextType.compositionType,
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx270(DeleteComposition, {
+      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx272(DeleteComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx270(RenameComposition, {
+      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx272(RenameComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx270(OverrideInputPropsModal, {}),
-      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx270(WebRenderModalWithLoader, {
+      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx272(OverrideInputPropsModal, {}),
+      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx272(WebRenderModalWithLoader, {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
@@ -44540,7 +44704,7 @@ var Modals = ({ readOnlyStudio }) => {
         initialLogLevel: modalContextType.initialLogLevel,
         initialLicenseKey: modalContextType.initialLicenseKey
       }),
-      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx270(RenderModalWithLoader, {
+      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx272(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
         initialDarkMode: modalContextType.initialDarkMode,
         compositionId: modalContextType.compositionId,
@@ -44589,28 +44753,28 @@ var Modals = ({ readOnlyStudio }) => {
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }),
-      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx270(RenderStatusModal, {
+      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx272(RenderStatusModal, {
         jobId: modalContextType.jobId
       }),
-      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx270(UpdateModal, {
+      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx272(UpdateModal, {
         info: modalContextType.info,
         knownBugs: modalContextType.knownBugs
       }),
-      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx270(InstallPackageModal, {
+      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx272(InstallPackageModal, {
         packageManager: modalContextType.packageManager
       }),
-      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx270(QuickSwitcher_default, {
+      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx272(QuickSwitcher_default, {
         readOnlyStudio,
         invocationTimestamp: modalContextType.invocationTimestamp,
         initialMode: modalContextType.mode
       }),
-      /* @__PURE__ */ jsx270(AskAiModal, {})
+      /* @__PURE__ */ jsx272(AskAiModal, {})
     ]
   });
 };
 
 // src/components/Editor.tsx
-import { jsx as jsx271, jsxs as jsxs146 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs147 } from "react/jsx-runtime";
 var background2 = {
   backgroundColor: BACKGROUND,
   display: "flex",
@@ -44626,7 +44790,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect82(() => {
+  useEffect83(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -44644,7 +44808,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback135(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo137(() => {
+  const value = useMemo136(() => {
     if (!size4) {
       return null;
     }
@@ -44653,41 +44817,41 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo137(() => {
+  const MemoRoot = useMemo136(() => {
     return React178.memo(Root);
   }, [Root]);
-  return /* @__PURE__ */ jsx271(HigherZIndex, {
+  return /* @__PURE__ */ jsx273(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
-    children: /* @__PURE__ */ jsxs146(TimelineZoomContext, {
+    children: /* @__PURE__ */ jsxs147(TimelineZoomContext, {
       children: [
-        /* @__PURE__ */ jsx271(Internals61.CurrentScaleContext.Provider, {
+        /* @__PURE__ */ jsx273(Internals61.CurrentScaleContext.Provider, {
           value,
-          children: /* @__PURE__ */ jsxs146("div", {
+          children: /* @__PURE__ */ jsxs147("div", {
             style: background2,
             children: [
-              canvasMounted ? /* @__PURE__ */ jsx271(MemoRoot, {}) : null,
-              /* @__PURE__ */ jsxs146(Internals61.CanUseRemotionHooksProvider, {
+              canvasMounted ? /* @__PURE__ */ jsx273(MemoRoot, {}) : null,
+              /* @__PURE__ */ jsxs147(Internals61.CanUseRemotionHooksProvider, {
                 children: [
-                  /* @__PURE__ */ jsx271(EditorContent, {
+                  /* @__PURE__ */ jsx273(EditorContent, {
                     readOnlyStudio,
-                    children: /* @__PURE__ */ jsx271(TopPanel, {
+                    children: /* @__PURE__ */ jsx273(TopPanel, {
                       drawRef,
                       bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS,
                       onMounted,
                       readOnlyStudio
                     })
                   }),
-                  /* @__PURE__ */ jsx271(GlobalKeybindings, {})
+                  /* @__PURE__ */ jsx273(GlobalKeybindings, {})
                 ]
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx271(Modals, {
+        /* @__PURE__ */ jsx273(Modals, {
           readOnlyStudio
         }),
-        /* @__PURE__ */ jsx271(NotificationCenter, {})
+        /* @__PURE__ */ jsx273(NotificationCenter, {})
       ]
     })
   });
@@ -44697,9 +44861,9 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback136, useContext as useContext84, useMemo as useMemo138, useState as useState87 } from "react";
+import { useCallback as useCallback136, useContext as useContext84, useMemo as useMemo137, useState as useState88 } from "react";
 import { Internals as Internals62 } from "remotion";
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
   localStorage.setItem(key5, JSON.stringify(option));
@@ -44718,8 +44882,8 @@ var loadPreviewSizeOption = () => {
   return JSON.parse(item2);
 };
 var PreviewSizeProvider = ({ children }) => {
-  const [size4, setSizeState] = useState87(() => loadPreviewSizeOption());
-  const [translation, setTranslation] = useState87(() => {
+  const [size4, setSizeState] = useState88(() => loadPreviewSizeOption());
+  const [translation, setTranslation] = useState88(() => {
     return {
       x: 0,
       y: 0
@@ -44733,7 +44897,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo138(() => {
+  const previewSizeCtx = useMemo137(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -44747,17 +44911,17 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return /* @__PURE__ */ jsx272(Internals62.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx274(Internals62.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo139, useState as useState88 } from "react";
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { useCallback as useCallback137, useMemo as useMemo138, useState as useState89 } from "react";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
-  const [checkerboard, setCheckerboardState] = useState88(() => loadCheckerboardOption());
+  const [checkerboard, setCheckerboardState] = useState89(() => loadCheckerboardOption());
   const setCheckerboard = useCallback137((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
@@ -44765,40 +44929,40 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo139(() => {
+  const checkerboardCtx = useMemo138(() => {
     return {
       checkerboard,
       setCheckerboard
     };
   }, [checkerboard, setCheckerboard]);
-  return /* @__PURE__ */ jsx273(CheckerboardContext.Provider, {
+  return /* @__PURE__ */ jsx275(CheckerboardContext.Provider, {
     value: checkerboardCtx,
     children
   });
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo140, useState as useState89 } from "react";
+import { useMemo as useMemo139, useState as useState90 } from "react";
 import { Internals as Internals63 } from "remotion";
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { jsx as jsx276 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
-  const [mediaMuted, setMediaMuted] = useState89(() => loadMuteOption());
-  const [mediaVolume, setMediaVolume] = useState89(1);
-  const mediaVolumeContextValue = useMemo140(() => {
+  const [mediaMuted, setMediaMuted] = useState90(() => loadMuteOption());
+  const [mediaVolume, setMediaVolume] = useState90(1);
+  const mediaVolumeContextValue = useMemo139(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo140(() => {
+  const setMediaVolumeContextValue = useMemo139(() => {
     return {
       setMediaMuted,
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx274(Internals63.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx276(Internals63.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx274(Internals63.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx276(Internals63.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -44806,24 +44970,24 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo141, useState as useState90 } from "react";
-import { jsx as jsx275 } from "react/jsx-runtime";
+import { useMemo as useMemo140, useState as useState91 } from "react";
+import { jsx as jsx277 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
-  const [modalContextType, setModalContextType] = useState90(null);
-  const modalsContext = useMemo141(() => {
+  const [modalContextType, setModalContextType] = useState91(null);
+  const modalsContext = useMemo140(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
     };
   }, [modalContextType]);
-  return /* @__PURE__ */ jsx275(ModalsContext.Provider, {
+  return /* @__PURE__ */ jsx277(ModalsContext.Provider, {
     value: modalsContext,
     children
   });
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect83, useMemo as useMemo142, useState as useState91 } from "react";
+import { useEffect as useEffect84, useMemo as useMemo141, useState as useState92 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -44839,20 +45003,20 @@ var loadMarks = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { jsx as jsx276 } from "react/jsx-runtime";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
-  const [inAndOutFrames, setInAndOutFrames] = useState91(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo142(() => {
+  const [inAndOutFrames, setInAndOutFrames] = useState92(() => loadMarks());
+  const setTimelineInOutContextValue = useMemo141(() => {
     return {
       setInAndOutFrames
     };
   }, []);
-  useEffect83(() => {
+  useEffect84(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
-  return /* @__PURE__ */ jsx276(TimelineInOutContext.Provider, {
+  return /* @__PURE__ */ jsx278(TimelineInOutContext.Provider, {
     value: inAndOutFrames,
-    children: /* @__PURE__ */ jsx276(SetTimelineInOutContext.Provider, {
+    children: /* @__PURE__ */ jsx278(SetTimelineInOutContext.Provider, {
       value: setTimelineInOutContextValue,
       children
     })
@@ -44860,13 +45024,13 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo143, useRef as useRef46, useState as useState92 } from "react";
-import { jsx as jsx277 } from "react/jsx-runtime";
+import { useCallback as useCallback138, useMemo as useMemo142, useRef as useRef46, useState as useState93 } from "react";
+import { jsx as jsx279 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
-  const [guidesList, setGuidesList] = useState92(() => loadGuidesList());
-  const [selectedGuideId, setSelectedGuideId] = useState92(null);
-  const [hoveredGuideId, setHoveredGuideId] = useState92(null);
-  const [editorShowGuides, setEditorShowGuidesState] = useState92(() => loadEditorShowGuidesOption());
+  const [guidesList, setGuidesList] = useState93(() => loadGuidesList());
+  const [selectedGuideId, setSelectedGuideId] = useState93(null);
+  const [hoveredGuideId, setHoveredGuideId] = useState93(null);
+  const [editorShowGuides, setEditorShowGuidesState] = useState93(() => loadEditorShowGuidesOption());
   const shouldCreateGuideRef = useRef46(false);
   const shouldDeleteGuideRef = useRef46(false);
   const setEditorShowGuides = useCallback138((newValue) => {
@@ -44876,7 +45040,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo143(() => {
+  const editorShowGuidesCtx = useMemo142(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -44896,17 +45060,17 @@ var ShowGuidesProvider = ({ children }) => {
     selectedGuideId,
     hoveredGuideId
   ]);
-  return /* @__PURE__ */ jsx277(EditorShowGuidesContext.Provider, {
+  return /* @__PURE__ */ jsx279(EditorShowGuidesContext.Provider, {
     value: editorShowGuidesCtx,
     children
   });
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo144, useState as useState93 } from "react";
-import { jsx as jsx278 } from "react/jsx-runtime";
+import { useCallback as useCallback139, useMemo as useMemo143, useState as useState94 } from "react";
+import { jsx as jsx280 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
-  const [editorShowRulers, setEditorShowRulersState] = useState93(() => loadEditorShowRulersOption());
+  const [editorShowRulers, setEditorShowRulersState] = useState94(() => loadEditorShowRulersOption());
   const setEditorShowRulers = useCallback139((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
@@ -44914,23 +45078,23 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo144(() => {
+  const editorShowRulersCtx = useMemo143(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
     };
   }, [editorShowRulers, setEditorShowRulers]);
-  return /* @__PURE__ */ jsx278(EditorShowRulersContext.Provider, {
+  return /* @__PURE__ */ jsx280(EditorShowRulersContext.Provider, {
     value: editorShowRulersCtx,
     children
   });
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback140, useMemo as useMemo145, useState as useState94 } from "react";
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { useCallback as useCallback140, useMemo as useMemo144, useState as useState95 } from "react";
+import { jsx as jsx281 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
-  const [editorZoomGestures, setEditorZoomGesturesState] = useState94(() => loadEditorZoomGesturesOption());
+  const [editorZoomGestures, setEditorZoomGesturesState] = useState95(() => loadEditorZoomGesturesOption());
   const setEditorZoomGestures = useCallback140((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
@@ -44938,40 +45102,40 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo145(() => {
+  const editorZoomGesturesCtx = useMemo144(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
     };
   }, [editorZoomGestures, setEditorZoomGestures]);
-  return /* @__PURE__ */ jsx279(EditorZoomGesturesContext.Provider, {
+  return /* @__PURE__ */ jsx281(EditorZoomGesturesContext.Provider, {
     value: editorZoomGesturesCtx,
     children
   });
 };
 
 // src/components/EditorContexts.tsx
-import { jsx as jsx280 } from "react/jsx-runtime";
+import { jsx as jsx282 } from "react/jsx-runtime";
 var EditorContexts = ({ children, readOnlyStudio }) => {
-  return /* @__PURE__ */ jsx280(ZodProvider, {
-    children: /* @__PURE__ */ jsx280(VisualControlsProvider, {
-      children: /* @__PURE__ */ jsx280(PreviewServerConnection, {
+  return /* @__PURE__ */ jsx282(ZodProvider, {
+    children: /* @__PURE__ */ jsx282(VisualControlsProvider, {
+      children: /* @__PURE__ */ jsx282(PreviewServerConnection, {
         readOnlyStudio,
-        children: /* @__PURE__ */ jsx280(RenderQueueContextProvider, {
-          children: /* @__PURE__ */ jsx280(KeybindingContextProvider, {
-            children: /* @__PURE__ */ jsx280(CheckerboardProvider, {
-              children: /* @__PURE__ */ jsx280(ZoomGesturesProvider, {
-                children: /* @__PURE__ */ jsx280(ShowRulersProvider, {
-                  children: /* @__PURE__ */ jsx280(ShowGuidesProvider, {
-                    children: /* @__PURE__ */ jsx280(PreviewSizeProvider, {
-                      children: /* @__PURE__ */ jsx280(ModalsProvider, {
-                        children: /* @__PURE__ */ jsx280(MediaVolumeProvider, {
-                          children: /* @__PURE__ */ jsx280(PlayerInternals20.PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx282(RenderQueueContextProvider, {
+          children: /* @__PURE__ */ jsx282(KeybindingContextProvider, {
+            children: /* @__PURE__ */ jsx282(CheckerboardProvider, {
+              children: /* @__PURE__ */ jsx282(ZoomGesturesProvider, {
+                children: /* @__PURE__ */ jsx282(ShowRulersProvider, {
+                  children: /* @__PURE__ */ jsx282(ShowGuidesProvider, {
+                    children: /* @__PURE__ */ jsx282(PreviewSizeProvider, {
+                      children: /* @__PURE__ */ jsx282(ModalsProvider, {
+                        children: /* @__PURE__ */ jsx282(MediaVolumeProvider, {
+                          children: /* @__PURE__ */ jsx282(PlayerInternals20.PlayerEmitterProvider, {
                             currentPlaybackRate: null,
-                            children: /* @__PURE__ */ jsx280(SidebarContextProvider, {
-                              children: /* @__PURE__ */ jsx280(FolderContextProvider, {
-                                children: /* @__PURE__ */ jsx280(HighestZIndexProvider, {
-                                  children: /* @__PURE__ */ jsx280(SetTimelineInOutProvider, {
+                            children: /* @__PURE__ */ jsx282(SidebarContextProvider, {
+                              children: /* @__PURE__ */ jsx282(FolderContextProvider, {
+                                children: /* @__PURE__ */ jsx282(HighestZIndexProvider, {
+                                  children: /* @__PURE__ */ jsx282(SetTimelineInOutProvider, {
                                     children
                                   })
                                 })
@@ -44994,7 +45158,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 
 // src/components/Notifications/ServerDisconnected.tsx
 import { useContext as useContext85 } from "react";
-import { jsx as jsx281, jsxs as jsxs147 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs148 } from "react/jsx-runtime";
 var container63 = {
   position: "fixed",
   justifyContent: "flex-end",
@@ -45039,26 +45203,26 @@ var ServerDisconnected = () => {
   }
   const base64Favicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=";
   fav.setAttribute("href", base64Favicon);
-  return /* @__PURE__ */ jsx281("div", {
+  return /* @__PURE__ */ jsx283("div", {
     style: container63,
     className: "css-reset",
-    children: /* @__PURE__ */ jsxs147("div", {
+    children: /* @__PURE__ */ jsxs148("div", {
       style: message,
       children: [
         "The studio server has disconnected. ",
-        /* @__PURE__ */ jsx281("br", {}),
-        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs147("span", {
+        /* @__PURE__ */ jsx283("br", {}),
+        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs148("span", {
           children: [
             "Run",
             " ",
-            /* @__PURE__ */ jsx281("code", {
+            /* @__PURE__ */ jsx283("code", {
               style: inlineCode,
               children: window.remotion_studioServerCommand
             }),
             " ",
             "to run it again."
           ]
-        }) : /* @__PURE__ */ jsx281("span", {
+        }) : /* @__PURE__ */ jsx283("span", {
           children: "Fast refresh will not work."
         })
       ]
@@ -45223,7 +45387,7 @@ var injectCSS = () => {
 };
 
 // src/Studio.tsx
-import { jsx as jsx282, jsxs as jsxs148 } from "react/jsx-runtime";
+import { jsx as jsx284, jsxs as jsxs149 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
@@ -45231,27 +45395,27 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx282(Internals65.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx284(Internals65.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx282(Internals65.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx284(Internals65.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel,
       numberOfAudioTags: window.remotion_numberOfAudioTags,
       audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-      children: /* @__PURE__ */ jsx282(Internals65.ResolveCompositionConfigInStudio, {
-        children: /* @__PURE__ */ jsxs148(EditorContexts, {
+      children: /* @__PURE__ */ jsx284(Internals65.ResolveCompositionConfigInStudio, {
+        children: /* @__PURE__ */ jsxs149(EditorContexts, {
           readOnlyStudio: readOnly,
           children: [
-            /* @__PURE__ */ jsx282(Editor, {
+            /* @__PURE__ */ jsx284(Editor, {
               readOnlyStudio: readOnly,
               Root: rootComponent
             }),
-            readOnly ? null : createPortal(/* @__PURE__ */ jsx282(ServerDisconnected, {}), getServerDisconnectedDomElement())
+            readOnly ? null : createPortal(/* @__PURE__ */ jsx284(ServerDisconnected, {}), getServerDisconnectedDomElement())
           ]
         })
       })
@@ -45260,9 +45424,9 @@ var Studio = ({ rootComponent, readOnly }) => {
 };
 
 // src/components/NoRegisterRoot.tsx
-import { useEffect as useEffect84, useState as useState95 } from "react";
+import { useEffect as useEffect85, useState as useState96 } from "react";
 import { AbsoluteFill as AbsoluteFill6 } from "remotion";
-import { jsx as jsx283, jsxs as jsxs149 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs150 } from "react/jsx-runtime";
 var label11 = {
   fontSize: 13,
   color: "white",
@@ -45281,8 +45445,8 @@ var link5 = {
   borderBottom: "1px solid"
 };
 var NoRegisterRoot = () => {
-  const [show, setShow] = useState95(() => false);
-  useEffect84(() => {
+  const [show, setShow] = useState96(() => false);
+  useEffect85(() => {
     const timeout = setTimeout(() => {
       setShow(true);
     }, 2000);
@@ -45293,19 +45457,19 @@ var NoRegisterRoot = () => {
   if (!show) {
     return null;
   }
-  return /* @__PURE__ */ jsxs149(AbsoluteFill6, {
+  return /* @__PURE__ */ jsxs150(AbsoluteFill6, {
     style: container64,
     children: [
-      /* @__PURE__ */ jsx283("div", {
+      /* @__PURE__ */ jsx285("div", {
         style: label11,
         children: "Waiting for registerRoot() to get called."
       }),
-      /* @__PURE__ */ jsxs149("div", {
+      /* @__PURE__ */ jsxs150("div", {
         style: label11,
         children: [
           "Learn more:",
           " ",
-          /* @__PURE__ */ jsx283("a", {
+          /* @__PURE__ */ jsx285("a", {
             target: "_blank",
             style: link5,
             href: "https://www.remotion.dev/docs/register-root",
@@ -45319,12 +45483,12 @@ var NoRegisterRoot = () => {
 
 // src/error-overlay/remotion-overlay/index.tsx
 import ReactDOM9 from "react-dom/client";
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx286 } from "react/jsx-runtime";
 var mountRemotionOverlay = () => {
   if (ReactDOM9.createRoot) {
-    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx284(Overlay, {}));
+    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx286(Overlay, {}));
   } else {
-    ReactDOM9.render(/* @__PURE__ */ jsx284(Overlay, {}), document.getElementById("remotion-error-overlay"));
+    ReactDOM9.render(/* @__PURE__ */ jsx286(Overlay, {}), document.getElementById("remotion-error-overlay"));
   }
 };
 
@@ -45629,7 +45793,7 @@ var enableHotMiddleware = () => {
 };
 
 // src/previewEntry.tsx
-import { jsx as jsx285 } from "react/jsx-runtime";
+import { jsx as jsx287 } from "react/jsx-runtime";
 Internals66.CSSUtils.injectCSS(Internals66.CSSUtils.makeDefaultPreviewCSS(null, "#1f2428"));
 var root = null;
 var getRootForElement = () => {
@@ -45649,10 +45813,10 @@ var renderToDOM = (content7) => {
   }
   getRootForElement().render(content7);
 };
-renderToDOM(/* @__PURE__ */ jsx285(NoRegisterRoot, {}));
+renderToDOM(/* @__PURE__ */ jsx287(NoRegisterRoot, {}));
 Internals66.waitForRoot((NewRoot) => {
   Internals66.enableSequenceStackTraces();
-  renderToDOM(/* @__PURE__ */ jsx285(Studio, {
+  renderToDOM(/* @__PURE__ */ jsx287(Studio, {
     readOnly: false,
     rootComponent: NewRoot
   }));