@remotion/studio 4.0.446 → 4.0.448

package/dist/esm/previewEntry.mjs

@@ -2420,7 +2420,7 @@ var getErrorRecord = async (error) => {
   };
 };
 var crashWithFrames = (crash) => (error) => {
-  const didHookOrderChange = error.message.startsWith("Rendered fewer hooks") || error.message.startsWith("Rendered more hooks");
+  const didHookOrderChange = error.message.startsWith("Rendered fewer hooks") || error.message.startsWith("Rendered more hooks") || error.message.startsWith("Should have a queue");
   const key = "remotion.lastCrashBecauseOfHooks";
   const previousCrashWasBecauseOfHooks = window.localStorage.getItem(key);
   const justRefreshedBecauseOfHooks = previousCrashWasBecauseOfHooks ? Date.now() - Number(previousCrashWasBecauseOfHooks) < 5000 : false;
@@ -2740,7 +2740,7 @@ import { Internals as Internals70 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React189, { useCallback as useCallback150, useMemo as useMemo150, useState as useState100 } from "react";
+import React189, { useCallback as useCallback150, useMemo as useMemo151, useState as useState100 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/noop.ts
@@ -4689,6 +4689,34 @@ var MenuSubItem = ({
   });
 };
 
+// src/components/NewComposition/menu-typeahead.ts
+var getLabelToMatch = (value) => {
+  if (value.type === "divider" || value.disabled) {
+    return null;
+  }
+  if (typeof value.label === "string") {
+    return value.label;
+  }
+  return null;
+};
+var findTypeaheadMenuItem = ({
+  query,
+  values
+}) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return null;
+  }
+  const matched = values.find((value) => {
+    const label2 = getLabelToMatch(value);
+    return label2 ? label2.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx46 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -4716,6 +4744,8 @@ var MenuContent = ({
   const containerRef = useRef10(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState19(false);
+  const typeaheadQueryRef = useRef10("");
+  const typeaheadTimeoutRef = useRef10(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -4726,6 +4756,13 @@ var MenuContent = ({
   const onItemSelected = useCallback20((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback20(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback20((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -4799,6 +4836,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback20((event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1 || event.key.trim().length === 0) {
+      return;
+    }
+    const { activeElement } = document;
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      return;
+    }
+    typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+    const matchedId = findTypeaheadMenuItem({
+      query: typeaheadQueryRef.current,
+      values
+    });
+    if (matchedId !== null) {
+      setSelectedItem(matchedId);
+    }
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+    }
+    typeaheadTimeoutRef.current = window.setTimeout(() => {
+      typeaheadQueryRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 700);
+  }, [values]);
   const containerWithHeight = useMemo20(() => {
     const containerStyles = { ...container11 };
     if (fixedHeight === null) {
@@ -4811,6 +4872,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect18(() => {
+    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      onTypeahead(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      clearTypeahead();
+    };
+  }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+  useEffect18(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect18(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -5282,6 +5361,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -6105,7 +6185,8 @@ var addVideoRenderJob = ({
   metadata,
   hardwareAcceleration,
   chromeMode,
-  mediaCacheSizeInBytes
+  mediaCacheSizeInBytes,
+  sampleRate
 }) => {
   return callApi("/api/render", {
     compositionId,
@@ -6152,7 +6233,8 @@ var addVideoRenderJob = ({
     metadata,
     hardwareAcceleration,
     chromeMode,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   });
 };
 var unsubscribeFromFileExistenceWatcher = ({
@@ -16825,7 +16907,7 @@ var ClientRenderQueueProcessor = () => {
     if (!compositionRef) {
       throw new Error(`Composition not found for job ${job.id}`);
     }
-    const { blob } = await renderStillOnWeb({
+    const blob = await (await renderStillOnWeb({
       composition: {
         component: compositionRef.component,
         width: compositionRef.width,
@@ -16837,15 +16919,15 @@ var ClientRenderQueueProcessor = () => {
         id: job.compositionId
       },
       frame: job.frame,
-      imageFormat: job.imageFormat,
       inputProps: job.inputProps,
       delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
       mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       logLevel: job.logLevel,
       licenseKey: job.licenseKey ?? undefined,
       scale: job.scale,
-      signal
-    });
+      signal,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
+    })).blob({ format: job.imageFormat });
     return {
       getBlob: () => Promise.resolve(blob),
       width: compositionRef.width,
@@ -16895,7 +16977,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -17436,6 +17519,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "still",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17489,6 +17573,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "sequence",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17542,6 +17627,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "video",
       initialHardwareAcceleration: job.hardwareAcceleration,
+      initialSampleRate: job.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -17573,7 +17659,8 @@ var makeClientRetryPayload = (job) => {
     initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
     initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
     initialMuted: job.type === "client-video" ? job.muted : null,
-    initialTransparent: job.type === "client-video" ? job.transparent : null
+    initialTransparent: job.type === "client-video" ? job.transparent : null,
+    initialAllowHtmlInCanvas: job.allowHtmlInCanvas
   };
 };
 
@@ -19396,6 +19483,7 @@ var RenderButton = ({
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults
@@ -19431,7 +19519,8 @@ var RenderButton = ({
       initialKeyframeIntervalInSeconds: null,
       initialTransparent: null,
       initialMuted: null,
-      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+      initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback94(() => {
@@ -28354,7 +28443,7 @@ import {
   useCallback as useCallback142,
   useContext as useContext94,
   useEffect as useEffect84,
-  useMemo as useMemo142,
+  useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
   useState as useState93
@@ -28504,6 +28593,7 @@ var makeReadOnlyStudioRenderCommand = ({
   beepOnFinish,
   repro,
   metadata,
+  sampleRate,
   envVariables,
   inputProps
 }) => {
@@ -28591,6 +28681,9 @@ var makeReadOnlyStudioRenderCommand = ({
       if (audioCodec !== defaultAudioCodec) {
         addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
       }
+      addValueFlagsIfChanged(flags, [
+        renderMediaValueFlag("sampleRate", sampleRate, renderDefaults.sampleRate)
+      ]);
     }
     addTrueBooleanFlagsIfChanged(flags, [
       renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
@@ -28864,8 +28957,9 @@ var padding3 = {
 var title6 = {
   fontSize: 14
 };
+var DESCRIPTION_FONT_SIZE_PX = 14;
 var description = {
-  fontSize: 14,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
   maxWidth: 400
 };
 var link3 = {
@@ -28924,9 +29018,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx253("div", {
+          /* @__PURE__ */ jsxs127("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx253("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx253("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -30249,7 +30356,7 @@ var RenderModalAdvanced = ({
 
 // src/components/RenderModal/RenderModalAudio.tsx
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
-import { useCallback as useCallback135 } from "react";
+import { useCallback as useCallback135, useMemo as useMemo138 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
 import { useCallback as useCallback132 } from "react";
@@ -30544,6 +30651,7 @@ var container56 = {
   flex: 1,
   overflowY: "auto"
 };
+var commonSampleRates = [8000, 16000, 22050, 44100, 48000, 96000];
 var RenderModalAudio = ({
   muted,
   setMuted,
@@ -30561,7 +30669,9 @@ var RenderModalAudio = ({
   setForSeamlessAacConcatenation,
   separateAudioTo,
   setSeparateAudioTo,
-  outName
+  outName,
+  sampleRate,
+  setSampleRate
 }) => {
   const onShouldHaveTargetAudioBitrateChanged = useCallback135((e) => {
     setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -30572,6 +30682,20 @@ var RenderModalAudio = ({
   const onSeamlessAacConcatenationChanges = useCallback135((e) => {
     setForSeamlessAacConcatenation(e.target.checked);
   }, [setForSeamlessAacConcatenation]);
+  const sampleRateOptions = useMemo138(() => {
+    return commonSampleRates.map((rate) => ({
+      label: rate === 48000 ? `${rate} Hz (default)` : `${rate} Hz`,
+      onClick: () => setSampleRate(rate),
+      key: String(rate),
+      leftItem: sampleRate === rate ? /* @__PURE__ */ jsx266(Checkmark, {}) : null,
+      id: String(rate),
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      type: "item",
+      value: String(rate)
+    }));
+  }, [sampleRate, setSampleRate]);
   const audioCodecOptions = useCallback135((currentCodec) => {
     return BrowserSafeApis8.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
       return {
@@ -30712,6 +30836,31 @@ var RenderModalAudio = ({
             })
           })
         ]
+      }) : null,
+      renderMode !== "still" && !muted ? /* @__PURE__ */ jsxs136("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs136("div", {
+            style: label6,
+            children: [
+              "Sample Rate ",
+              /* @__PURE__ */ jsx266(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx266(OptionExplainerBubble, {
+                id: "sampleRateOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx266("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx266(Combobox, {
+              values: sampleRateOptions,
+              selectedId: String(sampleRate),
+              title: "Sample Rate"
+            })
+          })
+        ]
       }) : null
     ]
   });
@@ -30720,7 +30869,7 @@ var RenderModalAudio = ({
 // src/components/RenderModal/RenderModalBasic.tsx
 import { BrowserSafeApis as BrowserSafeApis9 } from "@remotion/renderer/client";
 import { NoReactAPIs as NoReactAPIs2 } from "@remotion/renderer/pure";
-import { useCallback as useCallback138, useMemo as useMemo139 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo140 } from "react";
 
 // src/helpers/prores-labels.ts
 var labelProResProfile = (profile) => {
@@ -30749,7 +30898,7 @@ var labelProResProfile = (profile) => {
 import { useCallback as useCallback137 } from "react";
 
 // src/components/RenderModal/MultiRangeSlider.tsx
-import { useCallback as useCallback136, useMemo as useMemo138 } from "react";
+import { useCallback as useCallback136, useMemo as useMemo139 } from "react";
 import { jsx as jsx267, jsxs as jsxs137 } from "react/jsx-runtime";
 var container57 = {
   borderColor: "black",
@@ -30779,7 +30928,7 @@ var MultiRangeSlider = ({
   onRightThumbDrag
 }) => {
   const getPercent = useCallback136((value) => Math.round((value - min) / (max - min) * 100), [min, max]);
-  const rangeStyle = useMemo138(() => {
+  const rangeStyle = useMemo139(() => {
     const minPercent = getPercent(start);
     const maxPercent = getPercent(end);
     return {
@@ -30986,7 +31135,7 @@ var RenderModalBasic = ({
   showOutputName
 }) => {
   const existence = useFileExistence(outName);
-  const videoCodecOptions = useMemo139(() => {
+  const videoCodecOptions = useMemo140(() => {
     return BrowserSafeApis9.validCodecs.filter((c) => {
       return NoReactAPIs2.isAudioCodec(c) === (renderMode === "audio");
     }).map((codecOption) => {
@@ -31004,7 +31153,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo139(() => {
+  const proResProfileOptions = useMemo140(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -31036,7 +31185,7 @@ var RenderModalBasic = ({
   const onValueChange = useCallback138((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const logLevelOptions = useMemo139(() => {
+  const logLevelOptions = useMemo140(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -31290,7 +31439,7 @@ var RenderModalGif = ({
 
 // src/components/RenderModal/RenderModalPicture.tsx
 import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
-import { useCallback as useCallback141, useMemo as useMemo141 } from "react";
+import { useCallback as useCallback141, useMemo as useMemo142 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
 import { jsx as jsx272 } from "react/jsx-runtime";
@@ -31309,7 +31458,7 @@ var JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
 };
 
 // src/components/RenderModal/ScaleSetting.tsx
-import { useMemo as useMemo140 } from "react";
+import { useMemo as useMemo141 } from "react";
 import { jsx as jsx273, jsxs as jsxs142, Fragment as Fragment46 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -31323,7 +31472,7 @@ var outputDimensionsStyle = {
   marginTop: -10
 };
 var ScaleSetting = ({ scale, setScale, compositionWidth, compositionHeight }) => {
-  const outputDimensions = useMemo140(() => {
+  const outputDimensions = useMemo141(() => {
     const outputWidth = Math.round(compositionWidth * scale);
     const outputHeight = Math.round(compositionHeight * scale);
     return `${outputWidth}×${outputHeight}`;
@@ -31392,7 +31541,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo141(() => {
+  const colorSpaceOptions = useMemo142(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -31408,7 +31557,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo141(() => {
+  const qualityControlOptions = useMemo142(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -31730,6 +31879,7 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender,
   initialHardwareAcceleration,
+  initialSampleRate,
   defaultMetadata,
   initialChromeMode,
   renderDefaults
@@ -31787,6 +31937,7 @@ var RenderModal = ({
   const [repro, setRepro] = useState93(() => initialRepro);
   const [enforceAudioTrackState, setEnforceAudioTrackState] = useState93(() => initialEnforceAudioTrack);
   const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState93(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState93(() => initialSampleRate);
   const [renderMode, setRenderModeState] = useState93(initialRenderType);
   const [jpegQuality, setJpegQuality] = useState93(() => initialJpegQuality);
   const [scale, setScale] = useState93(() => initialScale);
@@ -31801,7 +31952,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState93(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState93(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState93(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo142(() => {
+  const chromiumOptions = useMemo143(() => {
     return {
       headless,
       disableWebSecurity,
@@ -31843,19 +31994,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState93(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState93(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState93(() => initialOffthreadVideoThreads);
-  const codec = useMemo142(() => {
+  const codec = useMemo143(() => {
     if (renderMode === "audio") {
       return videoCodecForAudioTab;
     }
     return videoCodecForVideoTab;
   }, [videoCodecForAudioTab, renderMode, videoCodecForVideoTab]);
-  const numberOfGifLoops = useMemo142(() => {
+  const numberOfGifLoops = useMemo143(() => {
     if (codec === "gif" && limitNumberOfGifLoops) {
       return numberOfGifLoopsSetting;
     }
     return null;
   }, [codec, limitNumberOfGifLoops, numberOfGifLoopsSetting]);
-  const audioBitrate = useMemo142(() => {
+  const audioBitrate = useMemo143(() => {
     if (shouldHaveCustomTargetAudioBitrate) {
       return customTargetAudioBitrate;
     }
@@ -31863,10 +32014,10 @@ var RenderModal = ({
   }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
   const supportsCrf = BrowserSafeApis11.codecSupportsCrf(codec);
   const supportsVideoBitrate = BrowserSafeApis11.codecSupportsVideoBitrate(codec);
-  const supportsBothQualityControls = useMemo142(() => {
+  const supportsBothQualityControls = useMemo143(() => {
     return supportsCrf && supportsVideoBitrate && hardwareAcceleration !== "if-possible" && hardwareAcceleration !== "required";
   }, [hardwareAcceleration, supportsCrf, supportsVideoBitrate]);
-  const qualityControlType = useMemo142(() => {
+  const qualityControlType = useMemo143(() => {
     if (hardwareAcceleration === "if-possible" || hardwareAcceleration === "required") {
       if (supportsVideoBitrate) {
         return "bitrate";
@@ -31890,7 +32041,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo142(() => {
+  const videoBitrate = useMemo143(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -31902,13 +32053,13 @@ var RenderModal = ({
       return;
     dispatch(payload);
   }, []);
-  const muted = useMemo142(() => {
+  const muted = useMemo143(() => {
     if (renderMode === "video") {
       return mutedState;
     }
     return false;
   }, [mutedState, renderMode]);
-  const enforceAudioTrack = useMemo142(() => {
+  const enforceAudioTrack = useMemo143(() => {
     if (renderMode === "video") {
       return enforceAudioTrackState;
     }
@@ -31917,13 +32068,13 @@ var RenderModal = ({
     }
     return false;
   }, [enforceAudioTrackState, renderMode]);
-  const proResProfile = useMemo142(() => {
+  const proResProfile = useMemo143(() => {
     if (renderMode === "video" && codec === "prores") {
       return proResProfileSetting;
     }
     return null;
   }, [codec, proResProfileSetting, renderMode]);
-  const x264Preset = useMemo142(() => {
+  const x264Preset = useMemo143(() => {
     if (renderMode === "video" && codec === "h264") {
       return x264PresetSetting;
     }
@@ -31934,19 +32085,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState93(() => defaultMetadata);
-  const endFrame = useMemo142(() => {
+  const endFrame = useMemo143(() => {
     if (endFrameOrNull === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrameOrNull));
   }, [resolvedComposition.durationInFrames, endFrameOrNull]);
-  const startFrame = useMemo142(() => {
+  const startFrame = useMemo143(() => {
     if (startFrameOrNull === null) {
       return 0;
     }
     return Math.max(0, Math.min(endFrame - 1, startFrameOrNull));
   }, [endFrame, startFrameOrNull]);
-  const frame2 = useMemo142(() => {
+  const frame2 = useMemo143(() => {
     const parsed = Math.floor(unclampedFrame);
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
   }, [resolvedComposition.durationInFrames, unclampedFrame]);
@@ -32067,17 +32218,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState93(() => initialEveryNthFrame);
-  const everyNthFrame = useMemo142(() => {
+  const everyNthFrame = useMemo143(() => {
     if (codec === "gif") {
       return everyNthFrameSetting;
     }
     return 1;
   }, [codec, everyNthFrameSetting]);
   const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
-  const availablePixelFormats = useMemo142(() => {
+  const availablePixelFormats = useMemo143(() => {
     return BrowserSafeApis11.validPixelFormatsForCodec(codec);
   }, [codec]);
-  const pixelFormat = useMemo142(() => {
+  const pixelFormat = useMemo143(() => {
     if (availablePixelFormats.includes(userPreferredPixelFormat)) {
       return userPreferredPixelFormat;
     }
@@ -32128,7 +32279,8 @@ var RenderModal = ({
       hardwareAcceleration,
       chromeMode,
       offthreadVideoThreads,
-      mediaCacheSizeInBytes
+      mediaCacheSizeInBytes,
+      sampleRate
     }).then(() => {
       dispatchIfMounted({ type: "succeed" });
       setSelectedModal(null);
@@ -32180,7 +32332,8 @@ var RenderModal = ({
     hardwareAcceleration,
     chromeMode,
     offthreadVideoThreads,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   ]);
   const onClickSequence = useCallback142(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -32248,7 +32401,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo142(() => {
+  const imageFormatOptions = useMemo143(() => {
     if (renderMode === "still") {
       return [
         {
@@ -32344,7 +32497,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo142(() => {
+  const renderTabOptions = useMemo143(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -32402,7 +32555,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo142(() => {
+  const readOnlyRenderCommand = useMemo143(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -32458,6 +32611,7 @@ var RenderModal = ({
       beepOnFinish,
       repro,
       metadata,
+      sampleRate,
       envVariables: envVariablesArrayToObject(envVariables),
       inputProps
     });
@@ -32507,6 +32661,7 @@ var RenderModal = ({
     resolvedComposition.durationInFrames,
     resolvedComposition.id,
     scale,
+    sampleRate,
     separateAudioTo,
     sequenceImageFormat,
     startFrame,
@@ -32573,7 +32728,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo142(() => {
+  const pixelFormatOptions = useMemo143(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -32783,7 +32938,9 @@ var RenderModal = ({
               setForSeamlessAacConcatenation,
               separateAudioTo,
               setSeparateAudioTo,
-              outName
+              outName,
+              sampleRate,
+              setSampleRate
             }) : tab === "gif" ? /* @__PURE__ */ jsx275(RenderModalGif, {
               everyNthFrame,
               limitNumberOfGifLoops,
@@ -32870,7 +33027,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback146, useContext as useContext95, useMemo as useMemo147, useState as useState97 } from "react";
+import { useCallback as useCallback146, useContext as useContext95, useMemo as useMemo148, useState as useState97 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx276 } from "react/jsx-runtime";
@@ -33032,7 +33189,7 @@ var WebRendererExperimentalBadge = () => {
 };
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
-import { useCallback as useCallback143, useMemo as useMemo143 } from "react";
+import { useCallback as useCallback143, useMemo as useMemo144 } from "react";
 import { jsx as jsx278, jsxs as jsxs146 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -33044,7 +33201,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback143(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -33054,6 +33213,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback143(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback143((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -33065,7 +33227,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo143(() => {
+  const hardwareAccelerationOptions = useMemo144(() => {
     return [
       {
         label: "No Preference",
@@ -33165,14 +33327,39 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs146("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs146("div", {
+            style: label6,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx278(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx278(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx278("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx278(Checkbox, {
+              checked: allowHtmlInCanvas,
+              onChange: toggleAllowHtmlInCanvas,
+              name: "allow-html-in-canvas"
+            })
+          })
+        ]
+      })
     ]
   });
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
 import { getSupportedAudioCodecsForContainer as getSupportedAudioCodecsForContainer2 } from "@remotion/web-renderer";
-import { useMemo as useMemo144 } from "react";
+import { useMemo as useMemo145 } from "react";
 
 // src/components/RenderModal/quality-options.tsx
 import { jsx as jsx279 } from "react/jsx-runtime";
@@ -33245,8 +33432,8 @@ var WebRenderModalAudio = ({
   encodableCodecs,
   effectiveAudioCodec
 }) => {
-  const containerSupported = useMemo144(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
-  const audioCodecOptions = useMemo144(() => {
+  const containerSupported = useMemo145(() => getSupportedAudioCodecsForContainer2(videoContainer), [videoContainer]);
+  const audioCodecOptions = useMemo145(() => {
     return containerSupported.map((codec) => {
       const isEncodable = encodableCodecs.includes(codec);
       return {
@@ -33263,7 +33450,7 @@ var WebRenderModalAudio = ({
       };
     });
   }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
-  const audioBitrateOptions = useMemo144(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+  const audioBitrateOptions = useMemo145(() => getQualityOptions(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
   const isAudioOnly = renderMode === "audio";
   const showAudioSettings = isAudioOnly || !muted;
   const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
@@ -33340,7 +33527,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo145 } from "react";
+import { useMemo as useMemo146 } from "react";
 import { jsx as jsx281, jsxs as jsxs148, Fragment as Fragment49 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -33394,7 +33581,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo145(() => {
+  const imageFormatOptions = useMemo146(() => {
     return [
       {
         label: "PNG",
@@ -33416,7 +33603,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo145(() => {
+  const logLevelOptions = useMemo146(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -33431,7 +33618,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo145(() => {
+  const containerOptions = useMemo146(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -33445,7 +33632,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container62, setContainerFormat, renderMode]);
-  const codecOptions = useMemo145(() => {
+  const codecOptions = useMemo146(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -34035,7 +34222,7 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback145, useMemo as useMemo146 } from "react";
+import { useCallback as useCallback145, useMemo as useMemo147 } from "react";
 import { jsx as jsx285, jsxs as jsxs151, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -34053,7 +34240,7 @@ var WebRenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const qualityOptions = useMemo146(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo147(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback145((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
@@ -34182,7 +34369,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -34222,27 +34410,28 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState97(initialMuted ?? false);
   const [scale, setScale] = useState97(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState97(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState97(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
-  const effectiveAudioCodec = useMemo147(() => {
+  const effectiveAudioCodec = useMemo148(() => {
     if (encodableAudioCodecs.includes(audioCodec)) {
       return audioCodec;
     }
     return encodableAudioCodecs[0] ?? audioCodec;
   }, [audioCodec, encodableAudioCodecs]);
-  const effectiveVideoCodec = useMemo147(() => {
+  const effectiveVideoCodec = useMemo148(() => {
     if (encodableVideoCodecs.includes(codec)) {
       return codec;
     }
     return encodableVideoCodecs[0] ?? codec;
   }, [codec, encodableVideoCodecs]);
-  const finalEndFrame = useMemo147(() => {
+  const finalEndFrame = useMemo148(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo147(() => {
+  const finalStartFrame = useMemo148(() => {
     if (startFrame === null) {
       return 0;
     }
@@ -34307,7 +34496,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container62, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo147(() => {
+  const renderTabOptions = useMemo148(() => {
     const options = [
       {
         label: "Still",
@@ -34353,7 +34542,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback146((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo147(() => {
+  const outnameValidation = useMemo148(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -34414,7 +34603,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -34437,7 +34627,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -34477,7 +34668,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs152("div", {
     style: outerModalStyle,
@@ -34672,7 +34864,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx286(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,
@@ -34696,7 +34890,7 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback149, useMemo as useMemo149 } from "react";
+import { useCallback as useCallback149, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
 import { useCallback as useCallback147, useEffect as useEffect88, useState as useState98 } from "react";
@@ -34762,7 +34956,7 @@ var CopyButton = ({ textToCopy, label: label13, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback148, useMemo as useMemo148, useState as useState99 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo149, useState as useState99 } from "react";
 import { jsx as jsx288 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34782,7 +34976,7 @@ var OpenIssueButton = ({ link: link5 }) => {
   const handleClick = useCallback148(() => {
     window.open(link5, "_blank");
   }, [link5]);
-  const svgFillColor = useMemo148(() => {
+  const svgFillColor = useMemo149(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx288("svg", {
@@ -34879,7 +35073,7 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo149(() => {
+  const hasKnownBugs = useMemo150(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
@@ -35043,6 +35237,7 @@ var Modals = ({ readOnlyStudio }) => {
         renderTypeOfLastRender: modalContextType.renderTypeOfLastRender,
         defaultMetadata: modalContextType.defaulMetadata,
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
+        initialSampleRate: modalContextType.initialSampleRate,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }) : null,
@@ -35087,7 +35282,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback150(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo150(() => {
+  const value = useMemo151(() => {
     if (!size4) {
       return null;
     }
@@ -35096,15 +35291,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo150(() => {
+  const MemoRoot = useMemo151(() => {
     return React189.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState100(null);
   const clearError = useCallback150(() => {
     setRenderError(null);
   }, []);
-  const compositionRenderErrorContextValue = useMemo150(() => ({ setError: setRenderError, clearError }), [clearError]);
-  const renderErrorContextValue = useMemo150(() => ({ error: renderError }), [renderError]);
+  const compositionRenderErrorContextValue = useMemo151(() => ({ setError: setRenderError, clearError }), [clearError]);
+  const renderErrorContextValue = useMemo151(() => ({ error: renderError }), [renderError]);
   return /* @__PURE__ */ jsx292(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -35155,7 +35350,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo151, useState as useState101 } from "react";
+import { useCallback as useCallback151, useContext as useContext97, useMemo as useMemo152, useState as useState101 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -35191,7 +35386,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo151(() => {
+  const previewSizeCtx = useMemo152(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -35212,7 +35407,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo152, useState as useState102 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo153, useState as useState102 } from "react";
 import { jsx as jsx294 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState102(() => loadCheckerboardOption());
@@ -35223,7 +35418,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo152(() => {
+  const checkerboardCtx = useMemo153(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -35236,19 +35431,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo153, useState as useState103 } from "react";
+import { useMemo as useMemo154, useState as useState103 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState103(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState103(1);
-  const mediaVolumeContextValue = useMemo153(() => {
+  const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo153(() => {
+  const setMediaVolumeContextValue = useMemo154(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -35264,11 +35459,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo154, useState as useState104 } from "react";
+import { useMemo as useMemo155, useState as useState104 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState104(null);
-  const modalsContext = useMemo154(() => {
+  const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -35281,7 +35476,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect89, useMemo as useMemo155, useState as useState105 } from "react";
+import { useEffect as useEffect89, useMemo as useMemo156, useState as useState105 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -35300,7 +35495,7 @@ var loadMarks = () => {
 import { jsx as jsx297 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState105(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo155(() => {
+  const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
     };
@@ -35318,7 +35513,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo156, useRef as useRef52, useState as useState106 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo157, useRef as useRef52, useState as useState106 } from "react";
 import { jsx as jsx298 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState106(() => loadGuidesList());
@@ -35334,7 +35529,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo156(() => {
+  const editorShowGuidesCtx = useMemo157(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -35361,7 +35556,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo157, useState as useState107 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo158, useState as useState107 } from "react";
 import { jsx as jsx299 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState107(() => loadEditorShowRulersOption());
@@ -35372,7 +35567,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo157(() => {
+  const editorShowRulersCtx = useMemo158(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -35404,7 +35599,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback155, useMemo as useMemo158, useState as useState108 } from "react";
+import { useCallback as useCallback155, useMemo as useMemo159, useState as useState108 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState108(() => loadEditorZoomGesturesOption());
@@ -35415,7 +35610,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo158(() => {
+  const editorZoomGesturesCtx = useMemo159(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -35552,7 +35747,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo159, useState as useState109 } from "react";
+import { useCallback as useCallback156, useEffect as useEffect91, useMemo as useMemo160, useState as useState109 } from "react";
 import { jsx as jsx303 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState109(0);
@@ -35571,7 +35766,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo159(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo160(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx303(FastRefreshContext.Provider, {
     value,
     children
@@ -35746,7 +35941,7 @@ import {
   useContext as useContext100,
   useEffect as useEffect92,
   useImperativeHandle as useImperativeHandle15,
-  useMemo as useMemo160,
+  useMemo as useMemo161,
   useState as useState110
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
@@ -35756,20 +35951,20 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
   const { compositions, canvasContent, currentCompositionMetadata } = useContext100(Internals69.CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext100(FastRefreshContext);
   if (manualRefreshes) {}
-  const selectedComposition = useMemo160(() => {
+  const selectedComposition = useMemo161(() => {
     return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
   const { props: allEditorProps } = useContext100(Internals69.EditorPropsContext);
   const env = Internals69.getRemotionEnvironment();
-  const inputProps = useMemo160(() => {
+  const inputProps = useMemo161(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps2() ?? {};
   }, [env.isPlayer]);
   const [resolvedConfigs, setResolvedConfigs] = useState110({});
-  const selectedEditorProps = useMemo160(() => {
+  const selectedEditorProps = useMemo161(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
-  const renderModalProps = useMemo160(() => {
+  const renderModalProps = useMemo161(() => {
     return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
   }, [allEditorProps, renderModalComposition]);
   const hasResolution = Boolean(currentCompositionMetadata);
@@ -35906,13 +36101,13 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     inputProps
   ]);
   const isTheSame = selectedComposition?.id === renderModalComposition?.id;
-  const currentDefaultProps = useMemo160(() => {
+  const currentDefaultProps = useMemo161(() => {
     return {
       ...selectedComposition?.defaultProps ?? {},
       ...selectedEditorProps ?? {}
     };
   }, [selectedComposition?.defaultProps, selectedEditorProps]);
-  const originalProps = useMemo160(() => {
+  const originalProps = useMemo161(() => {
     return {
       ...currentDefaultProps,
       ...inputProps ?? {}
@@ -35981,7 +36176,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo160(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo161(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });