@remotion/studio 4.0.446 → 4.0.448

package/dist/esm/internals.mjs

@@ -29,7 +29,7 @@ import { Internals as Internals70 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React187, { useCallback as useCallback149, useMemo as useMemo150, useState as useState98 } from "react";
+import React187, { useCallback as useCallback149, useMemo as useMemo151, useState as useState98 } from "react";
 import { Internals as Internals65 } from "remotion";
 
 // src/helpers/colors.ts
@@ -2459,6 +2459,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 label = getLabelToMatch(value);
+    return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -2486,6 +2514,8 @@ var MenuContent = ({
   const containerRef = useRef8(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState12(false);
+  const typeaheadQueryRef = useRef8("");
+  const typeaheadTimeoutRef = useRef8(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -2496,6 +2526,13 @@ var MenuContent = ({
   const onItemSelected = useCallback11((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback11(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback11((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -2569,6 +2606,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback11((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 = useMemo15(() => {
     const containerStyles = { ...container6 };
     if (fixedHeight === null) {
@@ -2581,6 +2642,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect10(() => {
+    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]);
+  useEffect10(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect10(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -3052,6 +3131,7 @@ var SidebarRenderButton = ({ composition, visible }) => {
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -3875,7 +3955,8 @@ var addVideoRenderJob = ({
   metadata,
   hardwareAcceleration,
   chromeMode,
-  mediaCacheSizeInBytes
+  mediaCacheSizeInBytes,
+  sampleRate
 }) => {
   return callApi("/api/render", {
     compositionId,
@@ -3922,7 +4003,8 @@ var addVideoRenderJob = ({
     metadata,
     hardwareAcceleration,
     chromeMode,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   });
 };
 var unsubscribeFromFileExistenceWatcher = ({
@@ -16233,7 +16315,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,
@@ -16245,15 +16327,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,
@@ -16303,7 +16385,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -16844,6 +16927,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "still",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -16897,6 +16981,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "sequence",
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -16950,6 +17035,7 @@ var makeRetryPayload = (job) => {
       defaulMetadata: job.metadata,
       renderTypeOfLastRender: "video",
       initialHardwareAcceleration: job.hardwareAcceleration,
+      initialSampleRate: job.sampleRate,
       initialChromeMode: job.chromeMode,
       initialMediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       renderDefaults: defaults,
@@ -16981,7 +17067,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
   };
 };
 
@@ -18804,6 +18891,7 @@ var RenderButton = ({
       renderTypeOfLastRender: null,
       defaulMetadata: defaults.metadata,
       initialHardwareAcceleration: defaults.hardwareAcceleration,
+      initialSampleRate: defaults.sampleRate,
       initialChromeMode: defaults.chromeMode,
       initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
       renderDefaults: defaults
@@ -18839,7 +18927,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 = useCallback93(() => {
@@ -27762,7 +27851,7 @@ import {
   useCallback as useCallback141,
   useContext as useContext94,
   useEffect as useEffect83,
-  useMemo as useMemo142,
+  useMemo as useMemo143,
   useReducer as useReducer2,
   useRef as useRef49,
   useState as useState91
@@ -27912,6 +28001,7 @@ var makeReadOnlyStudioRenderCommand = ({
   beepOnFinish,
   repro,
   metadata,
+  sampleRate,
   envVariables,
   inputProps
 }) => {
@@ -27999,6 +28089,9 @@ var makeReadOnlyStudioRenderCommand = ({
       if (audioCodec !== defaultAudioCodec) {
         addFlagWithValue(flags, getRenderMediaFlag("audioCodec"), audioCodec);
       }
+      addValueFlagsIfChanged(flags, [
+        renderMediaValueFlag("sampleRate", sampleRate, renderDefaults.sampleRate)
+      ]);
     }
     addTrueBooleanFlagsIfChanged(flags, [
       renderMediaBooleanFlag("disallowParallelEncoding", disallowParallelEncoding, false),
@@ -28272,8 +28365,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 link2 = {
@@ -28332,9 +28426,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx250("div", {
+          /* @__PURE__ */ jsxs126("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx250("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx250("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -29657,7 +29764,7 @@ var RenderModalAdvanced = ({
 
 // src/components/RenderModal/RenderModalAudio.tsx
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client";
-import { useCallback as useCallback134 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo138 } from "react";
 
 // src/components/RenderModal/EnforceAudioTrackSetting.tsx
 import { useCallback as useCallback131 } from "react";
@@ -29952,6 +30059,7 @@ var container55 = {
   flex: 1,
   overflowY: "auto"
 };
+var commonSampleRates = [8000, 16000, 22050, 44100, 48000, 96000];
 var RenderModalAudio = ({
   muted,
   setMuted,
@@ -29969,7 +30077,9 @@ var RenderModalAudio = ({
   setForSeamlessAacConcatenation,
   separateAudioTo,
   setSeparateAudioTo,
-  outName
+  outName,
+  sampleRate,
+  setSampleRate
 }) => {
   const onShouldHaveTargetAudioBitrateChanged = useCallback134((e) => {
     setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -29980,6 +30090,20 @@ var RenderModalAudio = ({
   const onSeamlessAacConcatenationChanges = useCallback134((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__ */ jsx263(Checkmark, {}) : null,
+      id: String(rate),
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      type: "item",
+      value: String(rate)
+    }));
+  }, [sampleRate, setSampleRate]);
   const audioCodecOptions = useCallback134((currentCodec) => {
     return BrowserSafeApis8.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
       return {
@@ -30120,6 +30244,31 @@ var RenderModalAudio = ({
             })
           })
         ]
+      }) : null,
+      renderMode !== "still" && !muted ? /* @__PURE__ */ jsxs135("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs135("div", {
+            style: label5,
+            children: [
+              "Sample Rate ",
+              /* @__PURE__ */ jsx263(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx263(OptionExplainerBubble, {
+                id: "sampleRateOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx263("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx263(Combobox, {
+              values: sampleRateOptions,
+              selectedId: String(sampleRate),
+              title: "Sample Rate"
+            })
+          })
+        ]
       }) : null
     ]
   });
@@ -30128,7 +30277,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 useCallback137, useMemo as useMemo139 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo140 } from "react";
 
 // src/helpers/prores-labels.ts
 var labelProResProfile = (profile) => {
@@ -30157,7 +30306,7 @@ var labelProResProfile = (profile) => {
 import { useCallback as useCallback136 } from "react";
 
 // src/components/RenderModal/MultiRangeSlider.tsx
-import { useCallback as useCallback135, useMemo as useMemo138 } from "react";
+import { useCallback as useCallback135, useMemo as useMemo139 } from "react";
 import { jsx as jsx264, jsxs as jsxs136 } from "react/jsx-runtime";
 var container56 = {
   borderColor: "black",
@@ -30187,7 +30336,7 @@ var MultiRangeSlider = ({
   onRightThumbDrag
 }) => {
   const getPercent = useCallback135((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 {
@@ -30394,7 +30543,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) => {
@@ -30412,7 +30561,7 @@ var RenderModalBasic = ({
       };
     });
   }, [renderMode, setCodec, codec]);
-  const proResProfileOptions = useMemo139(() => {
+  const proResProfileOptions = useMemo140(() => {
     return BrowserSafeApis9.proResProfileOptions.map((option) => {
       return {
         label: labelProResProfile(option),
@@ -30444,7 +30593,7 @@ var RenderModalBasic = ({
   const onValueChange = useCallback137((e) => {
     setOutName(e.target.value);
   }, [setOutName]);
-  const logLevelOptions = useMemo139(() => {
+  const logLevelOptions = useMemo140(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -30698,7 +30847,7 @@ var RenderModalGif = ({
 
 // src/components/RenderModal/RenderModalPicture.tsx
 import { BrowserSafeApis as BrowserSafeApis10 } from "@remotion/renderer/client";
-import { useCallback as useCallback140, useMemo as useMemo141 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo142 } from "react";
 
 // src/components/RenderModal/JpegQualitySetting.tsx
 import { jsx as jsx269 } from "react/jsx-runtime";
@@ -30717,7 +30866,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 jsx270, jsxs as jsxs141, Fragment as Fragment46 } from "react/jsx-runtime";
 var MIN_SCALE = 0.1;
 var MAX_SCALE = 10;
@@ -30731,7 +30880,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}`;
@@ -30800,7 +30949,7 @@ var RenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const colorSpaceOptions = useMemo141(() => {
+  const colorSpaceOptions = useMemo142(() => {
     return BrowserSafeApis10.validColorSpaces.map((option) => {
       return {
         label: option,
@@ -30816,7 +30965,7 @@ var RenderModalPicture = ({
       };
     });
   }, [colorSpace, setColorSpace]);
-  const qualityControlOptions = useMemo141(() => {
+  const qualityControlOptions = useMemo142(() => {
     return qualityControlModes.map((option) => {
       return {
         label: option === "crf" ? "CRF" : "Bitrate",
@@ -31138,6 +31287,7 @@ var RenderModal = ({
   initialForSeamlessAacConcatenation,
   renderTypeOfLastRender,
   initialHardwareAcceleration,
+  initialSampleRate,
   defaultMetadata,
   initialChromeMode,
   renderDefaults
@@ -31195,6 +31345,7 @@ var RenderModal = ({
   const [repro, setRepro] = useState91(() => initialRepro);
   const [enforceAudioTrackState, setEnforceAudioTrackState] = useState91(() => initialEnforceAudioTrack);
   const [forSeamlessAacConcatenation, setForSeamlessAacConcatenation] = useState91(() => initialForSeamlessAacConcatenation);
+  const [sampleRate, setSampleRate] = useState91(() => initialSampleRate);
   const [renderMode, setRenderModeState] = useState91(initialRenderType);
   const [jpegQuality, setJpegQuality] = useState91(() => initialJpegQuality);
   const [scale, setScale] = useState91(() => initialScale);
@@ -31209,7 +31360,7 @@ var RenderModal = ({
   const [openGlOption, setOpenGlOption] = useState91(() => initialGl ?? "default");
   const [colorSpace, setColorSpace] = useState91(() => initialColorSpace);
   const [userAgent, setUserAgent] = useState91(() => initialUserAgent === null ? null : initialUserAgent.trim() === "" ? null : initialUserAgent);
-  const chromiumOptions = useMemo142(() => {
+  const chromiumOptions = useMemo143(() => {
     return {
       headless,
       disableWebSecurity,
@@ -31251,19 +31402,19 @@ var RenderModal = ({
   const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = useState91(initialOffthreadVideoCacheSizeInBytes);
   const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = useState91(initialMediaCacheSizeInBytes);
   const [offthreadVideoThreads, setOffthreadVideoThreads] = useState91(() => 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;
     }
@@ -31271,10 +31422,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";
@@ -31298,7 +31449,7 @@ var RenderModal = ({
     supportsCrf,
     supportsVideoBitrate
   ]);
-  const videoBitrate = useMemo142(() => {
+  const videoBitrate = useMemo143(() => {
     if (qualityControlType === "bitrate") {
       return customTargetVideoBitrate;
     }
@@ -31310,13 +31461,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;
     }
@@ -31325,13 +31476,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;
     }
@@ -31342,19 +31493,19 @@ var RenderModal = ({
     _setInputProps(updater);
   }, []);
   const [metadata] = useState91(() => 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]);
@@ -31475,17 +31626,17 @@ var RenderModal = ({
     mediaCacheSizeInBytes
   ]);
   const [everyNthFrameSetting, setEveryNthFrameSetting] = useState91(() => 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;
     }
@@ -31536,7 +31687,8 @@ var RenderModal = ({
       hardwareAcceleration,
       chromeMode,
       offthreadVideoThreads,
-      mediaCacheSizeInBytes
+      mediaCacheSizeInBytes,
+      sampleRate
     }).then(() => {
       dispatchIfMounted({ type: "succeed" });
       setSelectedModal(null);
@@ -31588,7 +31740,8 @@ var RenderModal = ({
     hardwareAcceleration,
     chromeMode,
     offthreadVideoThreads,
-    mediaCacheSizeInBytes
+    mediaCacheSizeInBytes,
+    sampleRate
   ]);
   const onClickSequence = useCallback141(() => {
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -31656,7 +31809,7 @@ var RenderModal = ({
       isMounted.current = false;
     };
   }, []);
-  const imageFormatOptions = useMemo142(() => {
+  const imageFormatOptions = useMemo143(() => {
     if (renderMode === "still") {
       return [
         {
@@ -31752,7 +31905,7 @@ var RenderModal = ({
     stillImageFormat,
     videoCodecForVideoTab
   ]);
-  const renderTabOptions = useMemo142(() => {
+  const renderTabOptions = useMemo143(() => {
     if (resolvedComposition?.durationInFrames < 2) {
       return [
         {
@@ -31810,7 +31963,7 @@ var RenderModal = ({
   });
   const { tab, setTab, shownTabs } = useRenderModalSections(renderMode, codec);
   const { registerKeybinding } = useKeybinding();
-  const readOnlyRenderCommand = useMemo142(() => {
+  const readOnlyRenderCommand = useMemo143(() => {
     if (!readOnlyStudio) {
       return null;
     }
@@ -31866,6 +32019,7 @@ var RenderModal = ({
       beepOnFinish,
       repro,
       metadata,
+      sampleRate,
       envVariables: envVariablesArrayToObject(envVariables),
       inputProps
     });
@@ -31915,6 +32069,7 @@ var RenderModal = ({
     resolvedComposition.durationInFrames,
     resolvedComposition.id,
     scale,
+    sampleRate,
     separateAudioTo,
     sequenceImageFormat,
     startFrame,
@@ -31981,7 +32136,7 @@ var RenderModal = ({
       enter.unregister();
     };
   }, [registerKeybinding, renderDisabled, trigger]);
-  const pixelFormatOptions = useMemo142(() => {
+  const pixelFormatOptions = useMemo143(() => {
     return availablePixelFormats.map((option) => {
       return {
         label: option,
@@ -32191,7 +32346,9 @@ var RenderModal = ({
               setForSeamlessAacConcatenation,
               separateAudioTo,
               setSeparateAudioTo,
-              outName
+              outName,
+              sampleRate,
+              setSampleRate
             }) : tab === "gif" ? /* @__PURE__ */ jsx272(RenderModalGif, {
               everyNthFrame,
               limitNumberOfGifLoops,
@@ -32278,7 +32435,7 @@ import {
   getDefaultVideoCodecForContainer,
   isAudioOnlyContainer
 } from "@remotion/web-renderer";
-import { useCallback as useCallback145, useContext as useContext95, useMemo as useMemo147, useState as useState95 } from "react";
+import { useCallback as useCallback145, useContext as useContext95, useMemo as useMemo148, useState as useState95 } from "react";
 
 // src/icons/certificate.tsx
 import { jsx as jsx273 } from "react/jsx-runtime";
@@ -32440,7 +32597,7 @@ var WebRendererExperimentalBadge = () => {
 };
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
-import { useCallback as useCallback142, useMemo as useMemo143 } from "react";
+import { useCallback as useCallback142, useMemo as useMemo144 } from "react";
 import { jsx as jsx275, jsxs as jsxs145 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
@@ -32452,7 +32609,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback142(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -32462,6 +32621,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback142(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback142((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -32473,7 +32635,7 @@ var WebRenderModalAdvanced = ({
       return cb;
     });
   }, [setMediaCacheSizeInBytes]);
-  const hardwareAccelerationOptions = useMemo143(() => {
+  const hardwareAccelerationOptions = useMemo144(() => {
     return [
       {
         label: "No Preference",
@@ -32573,14 +32735,39 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs145("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs145("div", {
+            style: label5,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx275(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx275(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx275("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx275(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 jsx276 } from "react/jsx-runtime";
@@ -32653,8 +32840,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 {
@@ -32671,7 +32858,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;
@@ -32748,7 +32935,7 @@ var WebRenderModalAudio = ({
 };
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
-import { useMemo as useMemo145 } from "react";
+import { useMemo as useMemo146 } from "react";
 import { jsx as jsx278, jsxs as jsxs147, Fragment as Fragment49 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
@@ -32802,7 +32989,7 @@ var WebRenderModalBasic = ({
   logLevel,
   setLogLevel
 }) => {
-  const imageFormatOptions = useMemo145(() => {
+  const imageFormatOptions = useMemo146(() => {
     return [
       {
         label: "PNG",
@@ -32824,7 +33011,7 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [imageFormat, setStillFormat]);
-  const logLevelOptions = useMemo145(() => {
+  const logLevelOptions = useMemo146(() => {
     return ["trace", "verbose", "info", "warn", "error"].map((level) => {
       return {
         label: humanReadableLogLevel(level),
@@ -32839,7 +33026,7 @@ var WebRenderModalBasic = ({
       };
     });
   }, [logLevel, setLogLevel]);
-  const containerOptions = useMemo145(() => {
+  const containerOptions = useMemo146(() => {
     const containers = renderMode === "audio" ? audioContainers : videoContainers;
     return containers.map((c) => ({
       label: containerLabels[c],
@@ -32853,7 +33040,7 @@ var WebRenderModalBasic = ({
       value: c
     }));
   }, [container61, setContainerFormat, renderMode]);
-  const codecOptions = useMemo145(() => {
+  const codecOptions = useMemo146(() => {
     return encodableVideoCodecs.map((c) => ({
       label: codecLabels[c],
       onClick: () => setCodec(c),
@@ -33443,7 +33630,7 @@ var WebRenderModalLicense = ({
 };
 
 // src/components/RenderModal/WebRenderModalPicture.tsx
-import { useCallback as useCallback144, useMemo as useMemo146 } from "react";
+import { useCallback as useCallback144, useMemo as useMemo147 } from "react";
 import { jsx as jsx282, jsxs as jsxs150, Fragment as Fragment51 } from "react/jsx-runtime";
 var tabContainer4 = {
   flex: 1
@@ -33461,7 +33648,7 @@ var WebRenderModalPicture = ({
   compositionWidth,
   compositionHeight
 }) => {
-  const qualityOptions = useMemo146(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
+  const qualityOptions = useMemo147(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
   const onTransparentChanged = useCallback144((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
@@ -33590,7 +33777,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -33630,27 +33818,28 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState95(initialMuted ?? false);
   const [scale, setScale] = useState95(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState95(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState95(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container61);
   const encodableVideoCodecs = useEncodableVideoCodecs(container61);
-  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;
     }
@@ -33715,7 +33904,7 @@ var WebRenderModal = ({
       setTab((prev) => prev === "audio" ? "general" : prev);
     }
   }, [container61, imageFormat, updateOutNameExtension]);
-  const renderTabOptions = useMemo147(() => {
+  const renderTabOptions = useMemo148(() => {
     const options = [
       {
         label: "Still",
@@ -33761,7 +33950,7 @@ var WebRenderModal = ({
   const onOutNameChange = useCallback145((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo147(() => {
+  const outnameValidation = useMemo148(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -33822,7 +34011,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -33845,7 +34035,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -33885,7 +34076,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs151("div", {
     style: outerModalStyle,
@@ -34080,7 +34272,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx283(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,
@@ -34104,7 +34298,7 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback148, useMemo as useMemo149 } from "react";
+import { useCallback as useCallback148, useMemo as useMemo150 } from "react";
 
 // src/components/CopyButton.tsx
 import { useCallback as useCallback146, useEffect as useEffect87, useState as useState96 } from "react";
@@ -34170,7 +34364,7 @@ var CopyButton = ({ textToCopy, label: label12, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback147, useMemo as useMemo148, useState as useState97 } from "react";
+import { useCallback as useCallback147, useMemo as useMemo149, useState as useState97 } from "react";
 import { jsx as jsx285 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: "11px",
@@ -34190,7 +34384,7 @@ var OpenIssueButton = ({ link: link4 }) => {
   const handleClick = useCallback147(() => {
     window.open(link4, "_blank");
   }, [link4]);
-  const svgFillColor = useMemo148(() => {
+  const svgFillColor = useMemo149(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
   const openInEditorSvg = /* @__PURE__ */ jsx285("svg", {
@@ -34287,7 +34481,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];
@@ -34451,6 +34645,7 @@ var Modals = ({ readOnlyStudio }) => {
         renderTypeOfLastRender: modalContextType.renderTypeOfLastRender,
         defaultMetadata: modalContextType.defaulMetadata,
         initialHardwareAcceleration: modalContextType.initialHardwareAcceleration,
+        initialSampleRate: modalContextType.initialSampleRate,
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }) : null,
@@ -34495,7 +34690,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
   const onMounted = useCallback149(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo150(() => {
+  const value = useMemo151(() => {
     if (!size4) {
       return null;
     }
@@ -34504,15 +34699,15 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo150(() => {
+  const MemoRoot = useMemo151(() => {
     return React187.memo(Root);
   }, [Root]);
   const [renderError, setRenderError] = useState98(null);
   const clearError = useCallback149(() => {
     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__ */ jsx289(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
@@ -34563,7 +34758,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback150, useContext as useContext97, useMemo as useMemo151, useState as useState99 } from "react";
+import { useCallback as useCallback150, useContext as useContext97, useMemo as useMemo152, useState as useState99 } from "react";
 import { Internals as Internals66 } from "remotion";
 import { jsx as jsx290 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
@@ -34599,7 +34794,7 @@ var PreviewSizeProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo151(() => {
+  const previewSizeCtx = useMemo152(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -34620,7 +34815,7 @@ var PreviewSizeProvider = ({ children }) => {
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback151, useMemo as useMemo152, useState as useState100 } from "react";
+import { useCallback as useCallback151, useMemo as useMemo153, useState as useState100 } from "react";
 import { jsx as jsx291 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState100(() => loadCheckerboardOption());
@@ -34631,7 +34826,7 @@ var CheckerboardProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo152(() => {
+  const checkerboardCtx = useMemo153(() => {
     return {
       checkerboard,
       setCheckerboard
@@ -34644,19 +34839,19 @@ var CheckerboardProvider = ({ children }) => {
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo153, useState as useState101 } from "react";
+import { useMemo as useMemo154, useState as useState101 } from "react";
 import { Internals as Internals67 } from "remotion";
 import { jsx as jsx292 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState101(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState101(1);
-  const mediaVolumeContextValue = useMemo153(() => {
+  const mediaVolumeContextValue = useMemo154(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo153(() => {
+  const setMediaVolumeContextValue = useMemo154(() => {
     return {
       setMediaMuted,
       setMediaVolume
@@ -34672,11 +34867,11 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo154, useState as useState102 } from "react";
+import { useMemo as useMemo155, useState as useState102 } from "react";
 import { jsx as jsx293 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState102(null);
-  const modalsContext = useMemo154(() => {
+  const modalsContext = useMemo155(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
@@ -34689,7 +34884,7 @@ var ModalsProvider = ({ children }) => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect88, useMemo as useMemo155, useState as useState103 } from "react";
+import { useEffect as useEffect88, useMemo as useMemo156, useState as useState103 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -34708,7 +34903,7 @@ var loadMarks = () => {
 import { jsx as jsx294 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState103(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo155(() => {
+  const setTimelineInOutContextValue = useMemo156(() => {
     return {
       setInAndOutFrames
     };
@@ -34726,7 +34921,7 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback152, useMemo as useMemo156, useRef as useRef52, useState as useState104 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo157, useRef as useRef52, useState as useState104 } from "react";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState104(() => loadGuidesList());
@@ -34742,7 +34937,7 @@ var ShowGuidesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo156(() => {
+  const editorShowGuidesCtx = useMemo157(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -34769,7 +34964,7 @@ var ShowGuidesProvider = ({ children }) => {
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo157, useState as useState105 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo158, useState as useState105 } from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState105(() => loadEditorShowRulersOption());
@@ -34780,7 +34975,7 @@ var ShowRulersProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo157(() => {
+  const editorShowRulersCtx = useMemo158(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
@@ -34812,7 +35007,7 @@ var VisualControlsUndoSync = () => {
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback154, useMemo as useMemo158, useState as useState106 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo159, useState as useState106 } from "react";
 import { jsx as jsx297 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState106(() => loadEditorZoomGesturesOption());
@@ -34823,7 +35018,7 @@ var ZoomGesturesProvider = ({ children }) => {
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo158(() => {
+  const editorZoomGesturesCtx = useMemo159(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
@@ -34960,7 +35155,7 @@ var ServerDisconnected = () => {
 };
 
 // src/FastRefreshProvider.tsx
-import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo159, useState as useState107 } from "react";
+import { useCallback as useCallback155, useEffect as useEffect90, useMemo as useMemo160, useState as useState107 } from "react";
 import { jsx as jsx300 } from "react/jsx-runtime";
 var FastRefreshProvider = ({ children }) => {
   const [fastRefreshes, setFastRefreshes] = useState107(0);
@@ -34979,7 +35174,7 @@ var FastRefreshProvider = ({ children }) => {
       }
     }
   }, []);
-  const value = useMemo159(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+  const value = useMemo160(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
   return /* @__PURE__ */ jsx300(FastRefreshContext.Provider, {
     value,
     children
@@ -35154,7 +35349,7 @@ import {
   useContext as useContext100,
   useEffect as useEffect91,
   useImperativeHandle as useImperativeHandle14,
-  useMemo as useMemo160,
+  useMemo as useMemo161,
   useState as useState108
 } from "react";
 import { getInputProps as getInputProps2, Internals as Internals69 } from "remotion";
@@ -35164,20 +35359,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] = useState108({});
-  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);
@@ -35314,13 +35509,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 ?? {}
@@ -35389,7 +35584,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     renderModalComposition,
     renderModalProps
   ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo160(() => {
+  const resolvedConfigsIncludingStaticOnes = useMemo161(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
     });