@remotion/studio 4.0.397 → 4.0.399

package/dist/esm/{chunk-ccmkk1aw.js → chunk-ecq04waf.js}

@@ -10,7 +10,7 @@ import { Internals as Internals65 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React175, { useCallback as useCallback133, useEffect as useEffect79, useMemo as useMemo135 } from "react";
+import React176, { useCallback as useCallback134, useEffect as useEffect80, useMemo as useMemo136 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/colors.ts
@@ -7255,10 +7255,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback90, useContext as useContext57, useEffect as useEffect59 } from "react";
+import { useCallback as useCallback90, useContext as useContext57, useEffect as useEffect60 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback89, useContext as useContext56, useEffect as useEffect58, useMemo as useMemo96 } from "react";
+import { useCallback as useCallback89, useContext as useContext56, useEffect as useEffect59, useMemo as useMemo96 } from "react";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect23, useState as useState29 } from "react";
@@ -10313,7 +10313,7 @@ import {
   createRef as createRef9,
   useCallback as useCallback80,
   useContext as useContext46,
-  useEffect as useEffect49,
+  useEffect as useEffect50,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo90,
   useState as useState55
@@ -10893,7 +10893,7 @@ var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =>
 import React94, {
   useCallback as useCallback68,
   useContext as useContext36,
-  useEffect as useEffect44,
+  useEffect as useEffect45,
   useMemo as useMemo80,
   useState as useState50
 } from "react";
@@ -11288,7 +11288,7 @@ var RenderModalJSONPropsEditor = ({
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaEditor.tsx
-import { useCallback as useCallback66, useEffect as useEffect43, useMemo as useMemo78, useState as useState49 } from "react";
+import { useCallback as useCallback66, useEffect as useEffect44, useMemo as useMemo78, useState as useState49 } from "react";
 import { Internals as Internals30 } from "remotion";
 
 // src/components/RenderModal/SchemaEditor/SchemaErrorMessages.tsx
@@ -12667,7 +12667,7 @@ var ZodArrayEditor = ({
 import { useCallback as useCallback53 } from "react";
 
 // src/components/Checkbox.tsx
-import { useMemo as useMemo67 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo67, useRef as useRef26 } from "react";
 import { jsx as jsx116, jsxs as jsxs54 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -12675,6 +12675,12 @@ var background = {
   width: size2,
   position: "relative"
 };
+var bullet = {
+  width: 10,
+  height: 10,
+  backgroundColor: LIGHT_TEXT,
+  borderRadius: "50%"
+};
 var box = {
   display: "flex",
   justifyContent: "center",
@@ -12687,7 +12693,8 @@ var box = {
   pointerEvents: "none",
   color: "white"
 };
-var Checkbox = ({ checked, onChange, disabled, name }) => {
+var Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
+  const ref = useRef26(null);
   const input2 = useMemo67(() => {
     return {
       appearance: "none",
@@ -12701,10 +12708,16 @@ var Checkbox = ({ checked, onChange, disabled, name }) => {
       margin: 0
     };
   }, [disabled]);
+  useEffect41(() => {
+    if (ref.current) {
+      ref.current.style.setProperty("border-radius", rounded ? "50%" : "0%", "important");
+    }
+  }, [rounded]);
   return /* @__PURE__ */ jsxs54("div", {
     style: background,
     children: [
       /* @__PURE__ */ jsx116("input", {
+        ref,
         style: input2,
         type: "checkbox",
         checked,
@@ -12714,7 +12727,9 @@ var Checkbox = ({ checked, onChange, disabled, name }) => {
       }),
       /* @__PURE__ */ jsx116("div", {
         style: box,
-        children: checked ? /* @__PURE__ */ jsx116(Checkmark, {}) : null
+        children: checked ? rounded ? /* @__PURE__ */ jsx116("div", {
+          style: bullet
+        }) : /* @__PURE__ */ jsx116(Checkmark, {}) : null
       })
     ]
   });
@@ -12793,7 +12808,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React79, { useCallback as useCallback54, useEffect as useEffect41, useMemo as useMemo68, useRef as useRef26, useState as useState44 } from "react";
+import React79, { useCallback as useCallback54, useEffect as useEffect42, useMemo as useMemo68, useRef as useRef27, useState as useState44 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -12812,7 +12827,7 @@ var InputDraggerForwardRefFn = ({
   ...props
 }, ref) => {
   const [inputFallback, setInputFallback] = useState44(false);
-  const fallbackRef = useRef26(null);
+  const fallbackRef = useRef27(null);
   const style8 = useMemo68(() => {
     return {
       ...inputBaseStyle,
@@ -12896,7 +12911,7 @@ var InputDraggerForwardRefFn = ({
       once: true
     });
   }, [_step, _min, _max, value, onValueChange]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (inputFallback) {
       fallbackRef.current?.select();
     }
@@ -12947,10 +12962,10 @@ var InputDragger = React79.forwardRef(InputDraggerForwardRefFn);
 // src/components/NewComposition/RemInputTypeColor.tsx
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect42,
+  useEffect as useEffect43,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo69,
-  useRef as useRef27,
+  useRef as useRef28,
   useState as useState45
 } from "react";
 import { jsx as jsx119 } from "react/jsx-runtime";
@@ -12962,7 +12977,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState45(false);
   const [isHovered, setIsHovered] = useState45(false);
-  const inputRef = useRef27(null);
+  const inputRef = useRef28(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo69(() => {
     return {
@@ -12975,7 +12990,7 @@ var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   useImperativeHandle11(ref, () => {
     return inputRef.current;
   }, []);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!inputRef.current) {
       return;
     }
@@ -14998,7 +15013,7 @@ var SchemaEditor = ({
       childResetRevision: revision
     };
   }, [revision]);
-  useEffect43(() => {
+  useEffect44(() => {
     const bumpRevision = () => {
       setRevision((old) => old + 1);
     };
@@ -15014,7 +15029,7 @@ var SchemaEditor = ({
   const hasChanged = useMemo78(() => {
     return !deepEqual(savedDefaultProps, unsavedDefaultProps);
   }, [savedDefaultProps, unsavedDefaultProps]);
-  useEffect43(() => {
+  useEffect44(() => {
     setUnsavedProps(hasChanged);
   }, [hasChanged]);
   const onQuickSave = useCallback66(() => {
@@ -15024,7 +15039,7 @@ var SchemaEditor = ({
       });
     }
   }, [hasChanged, onSave, showSaveButton, unsavedDefaultProps]);
-  useEffect43(() => {
+  useEffect44(() => {
     const save = keybindings.registerKeybinding({
       event: "keydown",
       key: "s",
@@ -15365,11 +15380,11 @@ var DataEditor = ({
       }));
     }
   }, [readOnlyStudio, unresolvedComposition.id]);
-  useEffect44(() => {
+  useEffect45(() => {
     checkIfCanSaveDefaultProps();
   }, [checkIfCanSaveDefaultProps]);
   const { previewServerState, subscribeToEvent } = useContext36(StudioServerConnectionCtx);
-  useEffect44(() => {
+  useEffect45(() => {
     const unsub = subscribeToEvent("root-file-changed", checkIfCanSaveDefaultProps);
     return () => {
       unsub();
@@ -15559,14 +15574,14 @@ var DataEditor = ({
 };
 
 // src/components/RenderQueue/index.tsx
-import React104, { useContext as useContext42, useEffect as useEffect46, useMemo as useMemo87 } from "react";
+import React104, { useContext as useContext42, useEffect as useEffect47, useMemo as useMemo87 } from "react";
 import { Internals as Internals33 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
   useCallback as useCallback77,
   useContext as useContext41,
-  useEffect as useEffect45,
+  useEffect as useEffect46,
   useMemo as useMemo86,
   useState as useState51
 } from "react";
@@ -16203,7 +16218,7 @@ var RenderQueueItem = ({ job, selected }) => {
     });
     pushUrl(`/outputs/${job.outName}`);
   }, [job, scrollCurrentIntoView, selected, setCanvasContent]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (selected) {
       scrollCurrentIntoView();
     }
@@ -16295,7 +16310,7 @@ var RenderQueue = () => {
   const previousJobCount = React104.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React104.useRef(null);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!divRef.current) {
       return;
     }
@@ -16436,7 +16451,7 @@ var RendersTab = ({ selected, onClick }) => {
 import React107, { useContext as useContext45 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
-import { useCallback as useCallback79, useContext as useContext44, useEffect as useEffect48, useState as useState54 } from "react";
+import { useCallback as useCallback79, useContext as useContext44, useEffect as useEffect49, useState as useState54 } from "react";
 import { Internals as Internals35 } from "remotion";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
@@ -16509,7 +16524,7 @@ var VisualControlHandleHeader = ({ originalFileName }) => {
 };
 
 // src/components/VisualControls/get-original-stack-trace.ts
-import { useEffect as useEffect47, useState as useState53 } from "react";
+import { useEffect as useEffect48, useState as useState53 } from "react";
 
 // src/components/Timeline/TimelineStack/get-stack.ts
 import { SourceMapConsumer as SourceMapConsumer2 } from "source-map";
@@ -16599,7 +16614,7 @@ var getOriginalLocationFromStack = async (stack2, type) => {
 // src/components/VisualControls/get-original-stack-trace.ts
 var useOriginalFileName = (stack2) => {
   const [originalFileName, setOriginalFileName] = useState53({ type: "loading" });
-  useEffect47(() => {
+  useEffect48(() => {
     if (!stack2) {
       return;
     }
@@ -16691,7 +16706,7 @@ var VisualControlHandle = ({ value, keyName }) => {
     keyName,
     zodTypes
   ]);
-  useEffect48(() => {
+  useEffect49(() => {
     setSaving(false);
   }, [fastRefreshes]);
   return /* @__PURE__ */ jsxs75(Fragment21, {
@@ -16844,7 +16859,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       resetUnsaved(e.detail.resetUnsaved);
     }
   }, [resetUnsaved]);
-  useEffect49(() => {
+  useEffect50(() => {
     window.addEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
     return () => {
       window.removeEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
@@ -16897,7 +16912,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext53, useEffect as useEffect56, useRef as useRef30, useState as useState59 } from "react";
+import { useContext as useContext53, useEffect as useEffect57, useRef as useRef31, useState as useState59 } from "react";
 import { Internals as Internals44 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
@@ -16957,10 +16972,10 @@ var CheckboardToggle = () => {
 
 // src/components/FpsCounter.tsx
 import {
-  useEffect as useEffect50,
+  useEffect as useEffect51,
   useLayoutEffect,
   useMemo as useMemo91,
-  useRef as useRef28,
+  useRef as useRef29,
   useState as useState56
 } from "react";
 import { Internals as Internals37 } from "remotion";
@@ -16981,9 +16996,9 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals37.Timeline.useTimelinePosition();
   const [marker, rerender] = useState56({});
   const [fps, setFps] = useState56(0);
-  const previousUpdates = useRef28([]);
-  const fpsRef = useRef28(0);
-  const playingRef = useRef28(playing);
+  const previousUpdates = useRef29([]);
+  const fpsRef = useRef29(0);
+  const playingRef = useRef29(playing);
   useLayoutEffect(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
@@ -17001,7 +17016,7 @@ var FpsCounter = ({ playbackSpeed }) => {
     if (previousUpdates.current.length === 2)
       setFps(fpsRef.current);
   }, [frame2]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (playing) {
       const t = setTimeout(() => {
         rerender({});
@@ -17039,7 +17054,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import { useCallback as useCallback82, useContext as useContext48, useEffect as useEffect51 } from "react";
+import { useCallback as useCallback82, useContext as useContext48, useEffect as useEffect52 } from "react";
 import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx162 } from "react/jsx-runtime";
@@ -17061,7 +17076,7 @@ var FullScreenToggle = () => {
         }
       }));
   }, [setSize]);
-  useEffect51(() => {
+  useEffect52(() => {
     const f = keybindings.registerKeybinding({
       event: "keydown",
       key: "f",
@@ -17175,7 +17190,7 @@ var MuteToggle = ({ muted, setMuted }) => {
 
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals12 } from "@remotion/player";
-import { useCallback as useCallback85, useEffect as useEffect52, useState as useState57 } from "react";
+import { useCallback as useCallback85, useEffect as useEffect53, useState as useState57 } from "react";
 import { Internals as Internals39 } from "remotion";
 
 // src/icons/jump-to-start.tsx
@@ -17298,7 +17313,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     }
   });
   const isStill = useIsStill();
-  useEffect52(() => {
+  useEffect53(() => {
     if (isStill) {
       pause();
     }
@@ -17380,7 +17395,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     seek(outFrame ?? getCurrentDuration() - 1);
   }, [seek, outFrame]);
   const keybindings = useKeybinding();
-  useEffect52(() => {
+  useEffect53(() => {
     const arrowLeft = keybindings.registerKeybinding({
       event: "keydown",
       key: "ArrowLeft",
@@ -17452,7 +17467,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     onEnter,
     onSpace
   ]);
-  useEffect52(() => {
+  useEffect53(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -17534,7 +17549,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/PlaybackKeyboardShortcutsManager.tsx
 import { PlayerInternals as PlayerInternals13 } from "@remotion/player";
-import { useCallback as useCallback86, useEffect as useEffect53 } from "react";
+import { useCallback as useCallback86, useEffect as useEffect54 } from "react";
 var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
   const keybindings = useKeybinding();
   const { play, pause, playing } = PlayerInternals13.usePlayer();
@@ -17572,7 +17587,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     });
     play();
   }, [play, playing, setPlaybackRate]);
-  useEffect53(() => {
+  useEffect54(() => {
     const jKey = keybindings.registerKeybinding({
       event: "keydown",
       key: "j",
@@ -17610,7 +17625,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 };
 
 // src/components/PlaybackRatePersistor.tsx
-import { useContext as useContext49, useEffect as useEffect54 } from "react";
+import { useContext as useContext49, useEffect as useEffect55 } from "react";
 import { Internals as Internals40 } from "remotion";
 
 // src/state/playbackrate.ts
@@ -17632,10 +17647,10 @@ var loadPlaybackRate = () => {
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
   const { setPlaybackRate, playbackRate } = useContext49(Internals40.TimelineContext);
-  useEffect54(() => {
+  useEffect55(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
-  useEffect54(() => {
+  useEffect55(() => {
     persistPlaybackRate(playbackRate);
   }, [playbackRate]);
   return null;
@@ -17717,9 +17732,9 @@ import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
 import {
   useCallback as useCallback87,
   useContext as useContext51,
-  useEffect as useEffect55,
+  useEffect as useEffect56,
   useMemo as useMemo93,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState58
 } from "react";
 import ReactDOM8 from "react-dom";
@@ -17795,8 +17810,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext51(ModalsContext);
   const [renderType, setRenderType] = useState58(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState58(false);
-  const dropdownRef = useRef29(null);
-  const containerRef = useRef29(null);
+  const dropdownRef = useRef30(null);
+  const containerRef = useRef30(null);
   const { currentZIndex } = useZIndex();
   const size4 = PlayerInternals14.useElementSize(dropdownRef, {
     triggerOnWindowResize: true,
@@ -17891,7 +17906,8 @@ var RenderButton = ({
       defaultProps: props[video.id] ?? video.defaultProps,
       inFrameMark: inFrame,
       outFrameMark: outFrame,
-      initialLogLevel: defaults.logLevel
+      initialLogLevel: defaults.logLevel,
+      initialLicenseKey: defaults.publicLicenseKey
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback87(() => {
@@ -17942,7 +17958,7 @@ var RenderButton = ({
       }
     ];
   }, [handleRenderTypeChange]);
-  useEffect55(() => {
+  useEffect56(() => {
     const { current } = dropdownRef;
     if (!current) {
       return;
@@ -18288,14 +18304,14 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { mediaMuted } = useContext53(Internals44.MediaVolumeContext);
   const { setMediaMuted } = useContext53(Internals44.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
-  const previewToolbarRef = useRef30(null);
-  const leftScrollIndicatorRef = useRef30(null);
-  const rightScrollIndicatorRef = useRef30(null);
+  const previewToolbarRef = useRef31(null);
+  const leftScrollIndicatorRef = useRef31(null);
+  const rightScrollIndicatorRef = useRef31(null);
   const isStill = useIsStill();
   const [loop, setLoop] = useState59(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect56(() => {
+  useEffect57(() => {
     if (isMobileLayout && previewToolbarRef.current) {
       const updateScrollableIndicatorProps = (target) => {
         const boundingBox = target.getBoundingClientRect();
@@ -18446,7 +18462,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo94, useRef as useRef31, useState as useState60 } from "react";
+import { useMemo as useMemo94, useRef as useRef32, useState as useState60 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -18501,8 +18517,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState60(initialTimelineFlex ?? defaultFlex);
-  const ref = useRef31(null);
-  const isDragging = useRef31(false);
+  const ref = useRef32(null);
+  const isDragging = useRef32(false);
   const value = useMemo94(() => {
     return {
       flexValue,
@@ -18575,7 +18591,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext55, useEffect as useEffect57, useRef as useRef32, useState as useState61 } from "react";
+import { useContext as useContext55, useEffect as useEffect58, useRef as useRef33, useState as useState61 } from "react";
 import { jsx as jsx179 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -18590,8 +18606,8 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState61(() => Date.now());
-  const ref = useRef32(null);
-  useEffect57(() => {
+  const ref = useRef33(null);
+  useEffect58(() => {
     if (context.isDragging.current) {
       return;
     }
@@ -18674,7 +18690,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
-  useEffect57(() => {
+  useEffect58(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -18761,7 +18777,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect58(() => {
+  useEffect59(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo96(() => ({
@@ -18931,7 +18947,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect59(() => {
+  useEffect60(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -19009,7 +19025,7 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback91,
   useContext as useContext58,
-  useEffect as useEffect60,
+  useEffect as useEffect61,
   useMemo as useMemo97,
   useState as useState62
 } from "react";
@@ -19061,7 +19077,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect60(() => {
+  useEffect61(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -19426,9 +19442,9 @@ import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback93,
   useContext as useContext61,
-  useEffect as useEffect61,
+  useEffect as useEffect62,
   useMemo as useMemo100,
-  useRef as useRef33,
+  useRef as useRef34,
   useState as useState64
 } from "react";
 import { Internals as Internals46, useVideoConfig as useVideoConfig4 } from "remotion";
@@ -19592,7 +19608,7 @@ var Inner2 = () => {
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
-  const scroller = useRef33(null);
+  const scroller = useRef34(null);
   const stopInterval = () => {
     if (scroller.current) {
       clearInterval(scroller.current);
@@ -19857,7 +19873,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -19868,7 +19884,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -19959,7 +19975,7 @@ var Inner2 = () => {
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useRef as useRef36 } from "react";
+import { useRef as useRef37 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import { useCallback as useCallback96, useContext as useContext63, useMemo as useMemo102 } from "react";
@@ -20044,7 +20060,7 @@ import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import {
   useCallback as useCallback95,
   useContext as useContext62,
-  useEffect as useEffect62,
+  useEffect as useEffect63,
   useMemo as useMemo101,
   useState as useState65
 } from "react";
@@ -20133,7 +20149,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!sequence.stack) {
       return;
     }
@@ -20281,16 +20297,16 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext64, useEffect as useEffect64, useMemo as useMemo103, useRef as useRef35 } from "react";
+import { useContext as useContext64, useEffect as useEffect65, useMemo as useMemo103, useRef as useRef36 } from "react";
 import { Internals as Internals49 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import {
   useCallback as useCallback97,
-  useEffect as useEffect63,
+  useEffect as useEffect64,
   useImperativeHandle as useImperativeHandle13,
-  useRef as useRef34
+  useRef as useRef35
 } from "react";
 import { Internals as Internals48, useCurrentFrame } from "remotion";
 import { jsx as jsx190, jsxs as jsxs92 } from "react/jsx-runtime";
@@ -20325,7 +20341,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref = useRef34(null);
+  const ref = useRef35(null);
   const onTextChange = useCallback97((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -20341,7 +20357,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect63(() => {
+  useEffect64(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -20453,8 +20469,8 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef35(null);
-  useEffect64(() => {
+  const ref = useRef36(null);
+  useEffect65(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -20536,7 +20552,7 @@ var container41 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef36(null);
+  const ref = useRef37(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -20561,7 +20577,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext65, useEffect as useEffect65 } from "react";
+import { useContext as useContext65, useEffect as useEffect66 } from "react";
 import { Internals as Internals50 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -20579,7 +20595,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect65(() => {
+  useEffect66(() => {
     if (!video) {
       return;
     }
@@ -20592,7 +20608,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video]);
-  useEffect65(() => {
+  useEffect66(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -20730,7 +20746,7 @@ var getTimelineSequenceLayout = ({
 // src/helpers/use-max-media-duration.ts
 import { getVideoMetadata as getVideoMetadata2 } from "@remotion/media-utils";
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -21160,7 +21176,7 @@ var isNumber = (x) => {
   return typeof x === "number" && !Number.isNaN(x);
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/metadata.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/metadata.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -21211,7 +21227,7 @@ var DEFAULT_TRACK_DISPOSITION = {
   visuallyImpaired: false
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/codec.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/codec.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -21485,7 +21501,7 @@ var parsePcmCodec = (codec) => {
   return { dataType, sampleSize, littleEndian, silentValue };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/codec-data.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/codec-data.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22902,7 +22918,7 @@ var readVorbisComments = (bytes, metadataTags) => {
   }
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22917,7 +22933,7 @@ class Demuxer {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/custom-coder.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/custom-coder.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -22928,7 +22944,7 @@ class Demuxer {
 var customVideoDecoders = [];
 var customAudioDecoders = [];
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/packet.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/packet.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -23060,7 +23076,7 @@ class EncodedPacket {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/sample.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/sample.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -23736,7 +23752,7 @@ var getPlaneConfigs = (format) => {
 };
 var AUDIO_SAMPLE_FORMATS = new Set(["f32", "f32-planar", "s16", "s16-planar", "s32", "s32-planar", "u8", "u8-planar"]);
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/media-sink.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/media-sink.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24690,7 +24706,7 @@ class VideoSampleSink extends BaseMediaSampleSink {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input-track.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/input-track.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24899,7 +24915,7 @@ class InputAudioTrack extends InputTrack {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24917,7 +24933,7 @@ var buildIsobmffMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -24993,7 +25009,7 @@ var readDataBox = (slice) => {
   }
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/isobmff/isobmff-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -27271,7 +27287,7 @@ var sampleTableIsEmpty = (sampleTable) => {
   return sampleTable.sampleSizes.length === 0;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/ebml.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/matroska/ebml.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -27586,7 +27602,7 @@ function assertDefinedSize(size4) {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/matroska-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/matroska/matroska-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -27604,7 +27620,7 @@ var buildMatroskaMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/matroska/matroska-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/matroska/matroska-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -29483,7 +29499,7 @@ class MatroskaAudioTrackBacking extends MatroskaTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/shared/mp3-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/shared/mp3-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -29725,7 +29741,7 @@ var decodeSynchsafe = (synchsafed) => {
   return unsynchsafed;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/id3.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/id3.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30425,7 +30441,7 @@ class Id3V2Reader {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/mp3/mp3-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/mp3/mp3-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30451,7 +30467,7 @@ var readNextFrameHeader = async (reader, startPos, until) => {
   return null;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/mp3/mp3-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/mp3/mp3-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30716,7 +30732,7 @@ class Mp3AudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/ogg/ogg-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30787,7 +30803,7 @@ var buildOggMimeType = (info) => {
   return string;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/ogg/ogg-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -30851,7 +30867,7 @@ var findNextPageHeader = (slice, until) => {
   return false;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/ogg/ogg-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/ogg/ogg-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31511,7 +31527,7 @@ var findPreviousPacketEndPosition = (pageList, startPage, startSegmentIndex) =>
   return { page: previousPage, segmentIndex: previousPage.lacingValues.length - 1 };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/wave/wave-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/wave/wave-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31932,7 +31948,7 @@ class WaveAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/adts/adts-reader.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/adts/adts-reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -31993,7 +32009,7 @@ var readFrameHeader2 = (slice) => {
   };
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/adts/adts-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/adts/adts-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32214,7 +32230,7 @@ class AdtsAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/flac/flac-misc.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/flac/flac-misc.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32349,7 +32365,7 @@ var calculateCrc8 = (data) => {
   return crc;
 };
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/flac/flac-demuxer.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/flac/flac-demuxer.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -32773,7 +32789,7 @@ class FlacAudioTrackBacking {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input-format.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/input-format.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33095,7 +33111,7 @@ var ADTS = /* @__PURE__ */ new AdtsInputFormat;
 var FLAC = /* @__PURE__ */ new FlacInputFormat;
 var ALL_FORMATS = [MP4, QTFF, MATROSKA, WEBM, WAVE, OGG, FLAC, MP3, ADTS];
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/source.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/source.js
 var nodeAlias = (() => ({}));
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
@@ -33629,7 +33645,7 @@ class ReadOrchestrator {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/input.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/input.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33736,7 +33752,7 @@ class InputDisposedError extends Error {
   }
 }
 
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/reader.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/reader.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33954,7 +33970,7 @@ var readAscii = (slice, length) => {
   }
   return str;
 };
-// ../../node_modules/.bun/mediabunny@1.27.2/node_modules/mediabunny/dist/modules/src/index.js
+// ../../node_modules/.bun/mediabunny@1.27.3/node_modules/mediabunny/dist/modules/src/index.js
 /*!
  * Copyright (c) 2025-present, Vanilagy and contributors
  *
@@ -33964,7 +33980,7 @@ var readAscii = (slice, length) => {
  */
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect66, useState as useState66 } from "react";
+import { useEffect as useEffect67, useState as useState66 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -33978,7 +33994,7 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const [maxMediaDuration, setMaxMediaDuration] = useState66(src ? cache.get(src) ?? null : Infinity);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!src) {
       return;
     }
@@ -34008,7 +34024,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect67, useMemo as useMemo106, useRef as useRef37, useState as useState67 } from "react";
+import { useEffect as useEffect68, useMemo as useMemo106, useRef as useRef38, useState as useState67 } from "react";
 import { Internals as Internals51 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -34067,20 +34083,20 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState67(null);
   const [error, setError] = useState67(null);
-  const mountState = useRef37({ isMounted: true });
+  const mountState = useRef38({ isMounted: true });
   const vidConf = Internals51.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const canvas = useRef37(null);
-  useEffect67(() => {
+  const canvas = useRef38(null);
+  useEffect68(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect67(() => {
+  useEffect68(() => {
     if (!canvas.current) {
       return;
     }
@@ -34107,7 +34123,7 @@ var AudioWaveform = ({
     context.strokeStyle = LIGHT_TRANSPARENT;
     context.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect67(() => {
+  useEffect68(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -34282,7 +34298,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect68, useRef as useRef38, useState as useState68 } from "react";
+import { useEffect as useEffect69, useRef as useRef39, useState as useState68 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -34597,15 +34613,15 @@ var fillFrameWhereItFits = ({
 };
 var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   const [error, setError] = useState68(null);
-  const aspectRatio = useRef38(getAspectRatioFromCache(src));
-  useEffect68(() => {
+  const aspectRatio = useRef39(getAspectRatioFromCache(src));
+  useEffect69(() => {
     return () => {
       clearFramesForSrc(src);
     };
   }, [src]);
-  useEffect68(() => {
+  useEffect69(() => {
     if (error) {
       return;
     }
@@ -35058,13 +35074,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext69, useEffect as useEffect69 } from "react";
+import { useContext as useContext69, useEffect as useEffect70 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext69(ModalsContext);
   const { setCheckerboard } = useContext69(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect69(() => {
+  useEffect70(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -35170,7 +35186,7 @@ import { useContext as useContext83 } from "react";
 
 // src/components/InstallPackage.tsx
 import { apiDocs, descriptions, installableMap } from "@remotion/studio-shared";
-import React144, { useCallback as useCallback99, useContext as useContext71, useEffect as useEffect70 } from "react";
+import React144, { useCallback as useCallback99, useContext as useContext71, useEffect as useEffect71 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -35304,7 +35320,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect70(() => {
+  useEffect71(() => {
     if (disabled) {
       return;
     }
@@ -35428,7 +35444,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback101, useContext as useContext74, useMemo as useMemo112 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React145, { useContext as useContext72, useEffect as useEffect71, useMemo as useMemo111 } from "react";
+import React145, { useContext as useContext72, useEffect as useEffect72, useMemo as useMemo111 } from "react";
 import { Internals as Internals55 } from "remotion";
 import { jsx as jsx209, jsxs as jsxs103 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -35452,7 +35468,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals55.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext72(Internals55.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect71(() => {
+  useEffect72(() => {
     const { current } = Internals55.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -35510,7 +35526,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect72, useState as useState69 } from "react";
+import { useCallback as useCallback100, useContext as useContext73, useEffect as useEffect73, useState as useState69 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx210, jsxs as jsxs104 } from "react/jsx-runtime";
@@ -35575,7 +35591,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState69(null);
-  useEffect72(() => {
+  useEffect73(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -35621,7 +35637,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect72(() => {
+  useEffect73(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -35639,7 +35655,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect72(() => {
+  useEffect73(() => {
     if (disabled) {
       return;
     }
@@ -36461,9 +36477,9 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback106,
   useContext as useContext78,
-  useEffect as useEffect74,
+  useEffect as useEffect75,
   useMemo as useMemo117,
-  useRef as useRef40,
+  useRef as useRef41,
   useState as useState74
 } from "react";
 import { Internals as Internals60 } from "remotion";
@@ -37257,7 +37273,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect73, useMemo as useMemo116, useRef as useRef39, useState as useState73 } from "react";
+import { useEffect as useEffect74, useMemo as useMemo116, useRef as useRef40, useState as useState73 } from "react";
 import { jsx as jsx220, jsxs as jsxs113, Fragment as Fragment34 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -37287,9 +37303,9 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState73(false);
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const keybindings = useKeybinding();
-  useEffect73(() => {
+  useEffect74(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -37303,7 +37319,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect73(() => {
+  useEffect74(() => {
     if (!selected) {
       return;
     }
@@ -37320,7 +37336,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect73(() => {
+  useEffect74(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -37534,13 +37550,13 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     };
   });
-  useEffect74(() => {
+  useEffect75(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef40(null);
+  const inputRef = useRef41(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback106(() => {
     return;
@@ -37608,7 +37624,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect74(() => {
+  useEffect75(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -37622,7 +37638,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect74(() => {
+  useEffect75(() => {
     if (mode !== "docs") {
       return;
     }
@@ -37647,7 +37663,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect74(() => {
+  useEffect75(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -38139,10 +38155,10 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback126,
   useContext as useContext81,
-  useEffect as useEffect77,
+  useEffect as useEffect78,
   useMemo as useMemo128,
   useReducer as useReducer2,
-  useRef as useRef42,
+  useRef as useRef43,
   useState as useState80
 } from "react";
 
@@ -38309,7 +38325,7 @@ import { useCallback as useCallback111 } from "react";
 import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback110, useEffect as useEffect75, useMemo as useMemo121, useState as useState77 } from "react";
+import { useCallback as useCallback110, useEffect as useEffect76, useMemo as useMemo121, useState as useState77 } from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -38360,7 +38376,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback110(() => {
     setHovered(false);
   }, []);
-  useEffect75(() => {
+  useEffect76(() => {
     if (!copied) {
       return;
     }
@@ -39682,14 +39698,14 @@ import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { useCallback as useCallback118, useMemo as useMemo123 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext80, useEffect as useEffect76, useRef as useRef41, useState as useState79 } from "react";
+import { useContext as useContext80, useEffect as useEffect77, useRef as useRef42, useState as useState79 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState79(false);
   const { previewServerState: state, subscribeToEvent } = useContext80(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef41("");
+  const currentOutName = useRef42("");
   currentOutName.current = outName;
-  useEffect76(() => {
+  useEffect77(() => {
     if (!clientId) {
       return;
     }
@@ -39705,7 +39721,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect76(() => {
+  useEffect77(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -39722,7 +39738,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect76(() => {
+  useEffect77(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -41276,7 +41292,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef42(true);
+  const isMounted = useRef43(true);
   const [isVideo] = useState80(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -41774,7 +41790,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect77(() => {
+  useEffect78(() => {
     return () => {
       isMounted.current = false;
     };
@@ -41943,7 +41959,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect77(() => {
+  useEffect78(() => {
     if (renderDisabled) {
       return;
     }
@@ -42252,11 +42268,86 @@ var RenderModalWithLoader = (props) => {
 // src/components/RenderModal/WebRenderModal.tsx
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback129, useContext as useContext82, useMemo as useMemo132, useState as useState81 } from "react";
+import { useCallback as useCallback130, useContext as useContext82, useMemo as useMemo133, useState as useState81 } from "react";
+
+// src/icons/certificate.tsx
+import { jsx as jsx256 } from "react/jsx-runtime";
+var CertificateIcon = (props) => /* @__PURE__ */ jsx256("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512",
+  ...props,
+  children: /* @__PURE__ */ jsx256("path", {
+    fill: "currentcolor",
+    d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z"
+  })
+});
+
+// src/components/RenderModal/WebRendererExperimentalBadge.tsx
+import { jsx as jsx257, jsxs as jsxs135 } from "react/jsx-runtime";
+var row8 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var text3 = {
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  color: LIGHT_TEXT
+};
+var icon7 = {
+  width: 14,
+  height: 14,
+  flexShrink: 0,
+  fill: WARNING_COLOR,
+  marginRight: 8
+};
+var link3 = {
+  color: "inherit",
+  textDecoration: "underline",
+  fontSize: 14
+};
+var WebRendererExperimentalBadge = () => {
+  return /* @__PURE__ */ jsxs135("div", {
+    style: row8,
+    children: [
+      /* @__PURE__ */ jsx257(WarningTriangle, {
+        type: "warning",
+        style: icon7
+      }),
+      /* @__PURE__ */ jsxs135("div", {
+        style: text3,
+        children: [
+          "The Remotion Web Renderer is experimental.",
+          " ",
+          /* @__PURE__ */ jsx257("a", {
+            href: "https://github.com/remotion-dev/remotion/issues/5913",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: link3,
+            children: "Track progress on GitHub"
+          }),
+          " ",
+          "and discuss in the",
+          " ",
+          /* @__PURE__ */ jsx257("a", {
+            href: "https://remotion.dev/discord",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: link3,
+            children: "#web-renderer"
+          }),
+          " ",
+          "channel on Discord."
+        ]
+      })
+    ]
+  });
+};
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback127, useMemo as useMemo129 } from "react";
-import { jsx as jsx256, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx258, jsxs as jsxs136 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
 };
@@ -42293,7 +42384,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "No Preference",
         onClick: () => setHardwareAcceleration("no-preference"),
-        leftItem: hardwareAcceleration === "no-preference" ? /* @__PURE__ */ jsx256(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "no-preference" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
         id: "no-preference",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42304,7 +42395,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "Prefer Hardware",
         onClick: () => setHardwareAcceleration("prefer-hardware"),
-        leftItem: hardwareAcceleration === "prefer-hardware" ? /* @__PURE__ */ jsx256(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "prefer-hardware" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
         id: "prefer-hardware",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42315,7 +42406,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "Prefer Software",
         onClick: () => setHardwareAcceleration("prefer-software"),
-        leftItem: hardwareAcceleration === "prefer-software" ? /* @__PURE__ */ jsx256(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "prefer-software" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
         id: "prefer-software",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42325,10 +42416,10 @@ var WebRenderModalAdvanced = ({
       }
     ];
   }, [hardwareAcceleration, setHardwareAcceleration]);
-  return /* @__PURE__ */ jsxs135("div", {
+  return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer,
     children: [
-      /* @__PURE__ */ jsx256(NumberSetting, {
+      /* @__PURE__ */ jsx258(NumberSetting, {
         name: "Delay Render Timeout",
         formatter: (v) => `${v}ms`,
         min: 0,
@@ -42338,24 +42429,24 @@ var WebRenderModalAdvanced = ({
         onValueChanged: setDelayRenderTimeout,
         hint: "delayRenderTimeoutInMillisecondsOption"
       }),
-      /* @__PURE__ */ jsxs135("div", {
+      /* @__PURE__ */ jsxs136("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsxs135("div", {
+          /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
               "Custom @remotion/media cache size ",
-              /* @__PURE__ */ jsx256(Spacing, {
+              /* @__PURE__ */ jsx258(Spacing, {
                 x: 0.5
               }),
-              /* @__PURE__ */ jsx256(OptionExplainerBubble, {
+              /* @__PURE__ */ jsx258(OptionExplainerBubble, {
                 id: "mediaCacheSizeInBytesOption"
               })
             ]
           }),
-          /* @__PURE__ */ jsx256("div", {
+          /* @__PURE__ */ jsx258("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx256(Checkbox, {
+            children: /* @__PURE__ */ jsx258(Checkbox, {
               checked: mediaCacheSizeInBytes !== null,
               onChange: toggleCustomMediaCacheSizeInBytes,
               name: "media-cache-size"
@@ -42363,7 +42454,7 @@ var WebRenderModalAdvanced = ({
           })
         ]
       }),
-      mediaCacheSizeInBytes === null ? null : /* @__PURE__ */ jsx256(NumberSetting, {
+      mediaCacheSizeInBytes === null ? null : /* @__PURE__ */ jsx258(NumberSetting, {
         name: "@remotion/media cache size",
         formatter: (w) => `${w} bytes`,
         min: 0,
@@ -42372,16 +42463,16 @@ var WebRenderModalAdvanced = ({
         value: mediaCacheSizeInBytes,
         onValueChanged: changeMediaCacheSizeInBytes
       }),
-      renderMode === "video" ? /* @__PURE__ */ jsxs135("div", {
+      renderMode === "video" ? /* @__PURE__ */ jsxs136("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx256("div", {
+          /* @__PURE__ */ jsx258("div", {
             style: label5,
             children: "Hardware Acceleration"
           }),
-          /* @__PURE__ */ jsx256("div", {
+          /* @__PURE__ */ jsx258("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx256(Combobox, {
+            children: /* @__PURE__ */ jsx258(Combobox, {
               values: hardwareAccelerationOptions,
               selectedId: hardwareAcceleration,
               title: "Hardware Acceleration"
@@ -42394,16 +42485,16 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { jsx as jsx259 } from "react/jsx-runtime";
 var container60 = {
   flex: 1,
   overflowY: "auto"
 };
 var WebRenderModalAudio = ({ muted, setMuted }) => {
-  return /* @__PURE__ */ jsx257("div", {
+  return /* @__PURE__ */ jsx259("div", {
     style: container60,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
-    children: /* @__PURE__ */ jsx257(MutedSetting, {
+    children: /* @__PURE__ */ jsx259(MutedSetting, {
       enforceAudioTrack: false,
       muted,
       setMuted
@@ -42413,7 +42504,7 @@ var WebRenderModalAudio = ({ muted, setMuted }) => {
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
 import { useMemo as useMemo130 } from "react";
-import { jsx as jsx258, jsxs as jsxs136, Fragment as Fragment45 } from "react/jsx-runtime";
+import { jsx as jsx260, jsxs as jsxs137, Fragment as Fragment45 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
 };
@@ -42466,7 +42557,7 @@ var WebRenderModalBasic = ({
       return {
         label: humanReadableLogLevel(level),
         onClick: () => setLogLevel(level),
-        leftItem: logLevel === level ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: level,
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42481,7 +42572,7 @@ var WebRenderModalBasic = ({
       {
         label: "MP4",
         onClick: () => setContainerFormat("mp4"),
-        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "mp4",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42492,7 +42583,7 @@ var WebRenderModalBasic = ({
       {
         label: "WebM",
         onClick: () => setContainerFormat("webm"),
-        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "webm",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42507,7 +42598,7 @@ var WebRenderModalBasic = ({
       {
         label: "H.264",
         onClick: () => setCodec("h264"),
-        leftItem: codec === "h264" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: codec === "h264" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "h264",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42518,7 +42609,7 @@ var WebRenderModalBasic = ({
       {
         label: "H.265",
         onClick: () => setCodec("h265"),
-        leftItem: codec === "h265" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: codec === "h265" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "h265",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42529,7 +42620,7 @@ var WebRenderModalBasic = ({
       {
         label: "VP8",
         onClick: () => setCodec("vp8"),
-        leftItem: codec === "vp8" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: codec === "vp8" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "vp8",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42540,7 +42631,7 @@ var WebRenderModalBasic = ({
       {
         label: "VP9",
         onClick: () => setCodec("vp9"),
-        leftItem: codec === "vp9" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: codec === "vp9" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "vp9",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42551,7 +42642,7 @@ var WebRenderModalBasic = ({
       {
         label: "AV1",
         onClick: () => setCodec("av1"),
-        leftItem: codec === "av1" ? /* @__PURE__ */ jsx258(Checkmark, {}) : null,
+        leftItem: codec === "av1" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
         id: "av1",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42561,38 +42652,38 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  return /* @__PURE__ */ jsxs136("div", {
+  return /* @__PURE__ */ jsxs137("div", {
     style: tabContainer2,
     children: [
-      renderMode === "still" ? /* @__PURE__ */ jsxs136(Fragment45, {
+      renderMode === "still" ? /* @__PURE__ */ jsxs137(Fragment45, {
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: label5,
                 children: "Format"
               }),
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx258(SegmentedControl, {
+                children: /* @__PURE__ */ jsx260(SegmentedControl, {
                   items: imageFormatOptions,
                   needsWrapping: true
                 })
               })
             ]
           }),
-          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs136("div", {
+          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: label5,
                 children: "Frame"
               }),
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx258(RightAlignInput, {
-                  children: /* @__PURE__ */ jsx258(InputDragger, {
+                children: /* @__PURE__ */ jsx260(RightAlignInput, {
+                  children: /* @__PURE__ */ jsx260(InputDragger, {
                     value: frame2,
                     onTextChange: onFrameChanged,
                     placeholder: `0-${resolvedComposition.durationInFrames - 1}`,
@@ -42609,18 +42700,18 @@ var WebRenderModalBasic = ({
             ]
           }) : null
         ]
-      }) : /* @__PURE__ */ jsxs136(Fragment45, {
+      }) : /* @__PURE__ */ jsxs137(Fragment45, {
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: label5,
                 children: "Container"
               }),
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx258(Combobox, {
+                children: /* @__PURE__ */ jsx260(Combobox, {
                   values: containerOptions,
                   selectedId: container61,
                   title: "Container"
@@ -42628,24 +42719,24 @@ var WebRenderModalBasic = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsxs136("div", {
+              /* @__PURE__ */ jsxs137("div", {
                 style: label5,
                 children: [
                   "Codec",
-                  /* @__PURE__ */ jsx258(Spacing, {
+                  /* @__PURE__ */ jsx260(Spacing, {
                     x: 0.5
                   }),
-                  /* @__PURE__ */ jsx258(OptionExplainerBubble, {
+                  /* @__PURE__ */ jsx260(OptionExplainerBubble, {
                     id: "videoCodecOption"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx258("div", {
+              /* @__PURE__ */ jsx260("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx258(Combobox, {
+                children: /* @__PURE__ */ jsx260(Combobox, {
                   values: codecOptions,
                   selectedId: codec,
                   title: "Codec"
@@ -42653,7 +42744,7 @@ var WebRenderModalBasic = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsx258(FrameRangeSetting, {
+          /* @__PURE__ */ jsx260(FrameRangeSetting, {
             durationInFrames: resolvedComposition.durationInFrames,
             startFrame: startFrame ?? 0,
             endFrame: endFrame ?? resolvedComposition.durationInFrames - 1,
@@ -42662,7 +42753,7 @@ var WebRenderModalBasic = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx258(RenderModalOutputName, {
+      /* @__PURE__ */ jsx260(RenderModalOutputName, {
         existence: false,
         inputStyle: input,
         outName,
@@ -42670,24 +42761,24 @@ var WebRenderModalBasic = ({
         validationMessage,
         label: "Download name"
       }),
-      /* @__PURE__ */ jsxs136("div", {
+      /* @__PURE__ */ jsxs137("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: label5,
             children: [
               "Log Level ",
-              /* @__PURE__ */ jsx258(Spacing, {
+              /* @__PURE__ */ jsx260(Spacing, {
                 x: 0.5
               }),
-              /* @__PURE__ */ jsx258(OptionExplainerBubble, {
+              /* @__PURE__ */ jsx260(OptionExplainerBubble, {
                 id: "logLevelOption"
               })
             ]
           }),
-          /* @__PURE__ */ jsx258("div", {
+          /* @__PURE__ */ jsx260("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx258(Combobox, {
+            children: /* @__PURE__ */ jsx260(Combobox, {
               values: logLevelOptions,
               selectedId: logLevel,
               title: "Log Level"
@@ -42699,12 +42790,286 @@ var WebRenderModalBasic = ({
   });
 };
 
-// src/components/RenderModal/WebRenderModalPicture.tsx
+// src/components/RenderModal/WebRenderModalLicense.tsx
 import { useCallback as useCallback128, useMemo as useMemo131 } from "react";
-import { jsx as jsx259, jsxs as jsxs137 } from "react/jsx-runtime";
+import { jsx as jsx261, jsxs as jsxs138, Fragment as Fragment46 } from "react/jsx-runtime";
+var row9 = {
+  display: "flex",
+  flexDirection: "row",
+  paddingLeft: 16,
+  paddingRight: 16
+};
 var tabContainer3 = {
   flex: 1
 };
+var descriptionStyle = {
+  color: LIGHT_TEXT,
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingTop: 16,
+  paddingBottom: 8,
+  lineHeight: 1.5
+};
+var paddedDescriptionStyle = {
+  color: LIGHT_TEXT,
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  padding: 9,
+  border: "1px solid " + INPUT_BORDER_COLOR_UNHOVERED,
+  borderRadius: 8,
+  lineHeight: 1.5,
+  marginLeft: 16,
+  marginRight: 16
+};
+var descriptionLink = {
+  color: "white",
+  fontSize: 14
+};
+var checkboxLabel = {
+  fontSize: 14,
+  lineHeight: "40px",
+  color: LIGHT_TEXT,
+  flex: 1,
+  fontFamily: "sans-serif",
+  cursor: "pointer",
+  userSelect: "none"
+};
+var inputStyle2 = {
+  minWidth: 250
+};
+var justifyCenter = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  flex: 1
+};
+var codeStyle = {
+  fontSize: 14,
+  fontFamily: "monospace",
+  color: BLUE
+};
+var codeLine = {
+  fontSize: 14,
+  fontFamily: "monospace",
+  color: LIGHT_TEXT,
+  backgroundColor: INPUT_BACKGROUND,
+  padding: 6,
+  borderRadius: 3,
+  marginTop: 6,
+  overflowX: "auto",
+  maxWidth: "100%"
+};
+var codeLineSmall = {
+  ...codeLine,
+  fontSize: 11
+};
+var LICENSE_KEY_LENGTH = 55;
+var LICENSE_KEY_PREFIX = "rm_pub_";
+var validateLicenseKey = (key5) => {
+  if (key5.length === 0) {
+    return { valid: false, message: null };
+  }
+  if (!key5.startsWith(LICENSE_KEY_PREFIX)) {
+    return {
+      valid: false,
+      message: `License key must start with "${LICENSE_KEY_PREFIX}"`
+    };
+  }
+  const afterPrefix = key5.slice(LICENSE_KEY_PREFIX.length);
+  if (!/^[a-zA-Z0-9]*$/.test(afterPrefix)) {
+    return {
+      valid: false,
+      message: "License key must contain only alphanumeric characters after the prefix"
+    };
+  }
+  if (key5.length !== LICENSE_KEY_LENGTH) {
+    return {
+      valid: false,
+      message: `License key must be ${LICENSE_KEY_LENGTH} characters long`
+    };
+  }
+  return { valid: true, message: null };
+};
+var WebRenderModalLicense = ({
+  licenseKey,
+  setLicenseKey,
+  initialPublicLicenseKey
+}) => {
+  const onFreeLicenseChange = useCallback128(() => {
+    setLicenseKey("free-license");
+  }, [setLicenseKey]);
+  const onCompanyLicenseChange = useCallback128(() => {
+    setLicenseKey(initialPublicLicenseKey ?? "");
+  }, [initialPublicLicenseKey, setLicenseKey]);
+  const onLicenseKeyChange = useCallback128((e) => {
+    setLicenseKey(e.target.value);
+  }, [setLicenseKey]);
+  const licenseValidation = useMemo131(() => {
+    if (licenseKey === null || licenseKey === "free-license") {
+      return { valid: true, message: null };
+    }
+    return validateLicenseKey(licenseKey);
+  }, [licenseKey]);
+  return /* @__PURE__ */ jsxs138("div", {
+    style: tabContainer3,
+    children: [
+      /* @__PURE__ */ jsxs138("div", {
+        style: descriptionStyle,
+        children: [
+          "Remotion is free if you are an individual or company with a headcount of 3 or less. See",
+          " ",
+          /* @__PURE__ */ jsx261("a", {
+            style: descriptionLink,
+            href: "https://remotion.dev/license",
+            children: "LICENSE.md"
+          }),
+          "."
+        ]
+      }),
+      /* @__PURE__ */ jsx261("div", {
+        style: row9,
+        children: /* @__PURE__ */ jsxs138("div", {
+          style: justifyCenter,
+          children: [
+            /* @__PURE__ */ jsx261(Checkbox, {
+              checked: licenseKey === "free-license",
+              onChange: onFreeLicenseChange,
+              name: "free-license",
+              rounded: true
+            }),
+            /* @__PURE__ */ jsxs138("div", {
+              style: checkboxLabel,
+              onClick: onFreeLicenseChange,
+              children: [
+                "I am eligible for the Free License, ",
+                "don't",
+                " print a warning"
+              ]
+            })
+          ]
+        })
+      }),
+      licenseKey === "free-license" ? /* @__PURE__ */ jsxs138("div", {
+        style: paddedDescriptionStyle,
+        children: [
+          "Enjoy Remotion! Add the following to",
+          " ",
+          /* @__PURE__ */ jsx261("code", {
+            style: codeStyle,
+            children: "remotion.config.ts"
+          }),
+          " to persist this setting:",
+          /* @__PURE__ */ jsx261("div", {
+            style: codeLine,
+            children: "Config.setPublicLicenseKey('free-license');"
+          })
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx261("div", {
+        style: row9,
+        children: /* @__PURE__ */ jsxs138("div", {
+          style: justifyCenter,
+          children: [
+            /* @__PURE__ */ jsx261(Checkbox, {
+              checked: licenseKey !== "free-license" && licenseKey !== null,
+              onChange: onCompanyLicenseChange,
+              name: "company-license",
+              rounded: true
+            }),
+            /* @__PURE__ */ jsx261("div", {
+              style: checkboxLabel,
+              onClick: onCompanyLicenseChange,
+              children: "I have a Company License"
+            })
+          ]
+        })
+      }),
+      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs138("div", {
+        style: paddedDescriptionStyle,
+        children: [
+          "Add your public license from",
+          " ",
+          /* @__PURE__ */ jsx261("a", {
+            href: "https://remotion.pro/dashboard",
+            target: "_blank",
+            style: descriptionLink,
+            children: "remotion.pro"
+          }),
+          " ",
+          "key below.",
+          /* @__PURE__ */ jsx261(Spacing, {
+            y: 1,
+            block: true
+          }),
+          /* @__PURE__ */ jsx261(RemotionInput, {
+            value: licenseKey,
+            onChange: onLicenseKeyChange,
+            placeholder: "remotion.pro public license key (starts with rm_pub_)",
+            status: licenseValidation.valid || licenseKey.length === 0 ? "ok" : "error",
+            rightAlign: false,
+            style: inputStyle2,
+            autoFocus: true
+          }),
+          licenseValidation.message ? /* @__PURE__ */ jsxs138(Fragment46, {
+            children: [
+              /* @__PURE__ */ jsx261(Spacing, {
+                y: 1,
+                block: true
+              }),
+              /* @__PURE__ */ jsx261(ValidationMessage, {
+                message: licenseValidation.message,
+                align: "flex-start",
+                type: "error"
+              })
+            ]
+          }) : null,
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs138(Fragment46, {
+            children: [
+              /* @__PURE__ */ jsx261(Spacing, {
+                y: 1,
+                block: true
+              }),
+              "Add the following to",
+              " ",
+              /* @__PURE__ */ jsx261("code", {
+                style: codeStyle,
+                children: "remotion.config.ts"
+              }),
+              " to persist this setting:",
+              /* @__PURE__ */ jsx261("div", {
+                style: codeLineSmall,
+                children: "Config.setPublicLicenseKey('" + licenseKey + "');"
+              })
+            ]
+          }) : null
+        ]
+      }) : null,
+      licenseKey === null ? /* @__PURE__ */ jsxs138("div", {
+        style: descriptionStyle,
+        children: [
+          "If you are not eligible for the free license, you need to obtain a",
+          " ",
+          /* @__PURE__ */ jsx261("a", {
+            style: descriptionLink,
+            target: "_blank",
+            href: "https://remotion.pro/license",
+            children: "Company License"
+          }),
+          "."
+        ]
+      }) : null
+    ]
+  });
+};
+
+// src/components/RenderModal/WebRenderModalPicture.tsx
+import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
+import { jsx as jsx262, jsxs as jsxs139 } from "react/jsx-runtime";
+var tabContainer4 = {
+  flex: 1
+};
 var WebRenderModalPicture = ({
   renderMode,
   videoBitrate,
@@ -42714,12 +43079,12 @@ var WebRenderModalPicture = ({
   transparent,
   setTransparent
 }) => {
-  const qualityOptions = useMemo131(() => {
+  const qualityOptions = useMemo132(() => {
     return [
       {
         label: "Very Low",
         onClick: () => setVideoBitrate("very-low"),
-        leftItem: videoBitrate === "very-low" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: videoBitrate === "very-low" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "very-low",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42730,7 +43095,7 @@ var WebRenderModalPicture = ({
       {
         label: "Low",
         onClick: () => setVideoBitrate("low"),
-        leftItem: videoBitrate === "low" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: videoBitrate === "low" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "low",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42741,7 +43106,7 @@ var WebRenderModalPicture = ({
       {
         label: "Medium",
         onClick: () => setVideoBitrate("medium"),
-        leftItem: videoBitrate === "medium" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: videoBitrate === "medium" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "medium",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42752,7 +43117,7 @@ var WebRenderModalPicture = ({
       {
         label: "High",
         onClick: () => setVideoBitrate("high"),
-        leftItem: videoBitrate === "high" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: videoBitrate === "high" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "high",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42763,7 +43128,7 @@ var WebRenderModalPicture = ({
       {
         label: "Very High",
         onClick: () => setVideoBitrate("very-high"),
-        leftItem: videoBitrate === "very-high" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: videoBitrate === "very-high" ? /* @__PURE__ */ jsx262(Checkmark, {}) : null,
         id: "very-high",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42773,25 +43138,25 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback128((e) => {
+  const onTransparentChanged = useCallback129((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
     return null;
   }
-  return /* @__PURE__ */ jsxs137("div", {
-    style: tabContainer3,
+  return /* @__PURE__ */ jsxs139("div", {
+    style: tabContainer4,
     children: [
-      /* @__PURE__ */ jsxs137("div", {
+      /* @__PURE__ */ jsxs139("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx259("div", {
+          /* @__PURE__ */ jsx262("div", {
             style: label5,
             children: "Quality"
           }),
-          /* @__PURE__ */ jsx259("div", {
+          /* @__PURE__ */ jsx262("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx259(Combobox, {
+            children: /* @__PURE__ */ jsx262(Combobox, {
               values: qualityOptions,
               selectedId: videoBitrate,
               title: "Quality"
@@ -42799,7 +43164,7 @@ var WebRenderModalPicture = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx259(NumberSetting, {
+      /* @__PURE__ */ jsx262(NumberSetting, {
         name: "Keyframe Interval",
         formatter: (v) => `${v}s`,
         min: 1,
@@ -42808,16 +43173,16 @@ var WebRenderModalPicture = ({
         value: keyframeIntervalInSeconds,
         onValueChanged: setKeyframeIntervalInSeconds
       }),
-      /* @__PURE__ */ jsxs137("div", {
+      /* @__PURE__ */ jsxs139("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx259("div", {
+          /* @__PURE__ */ jsx262("div", {
             style: label5,
             children: "Transparent"
           }),
-          /* @__PURE__ */ jsx259("div", {
+          /* @__PURE__ */ jsx262("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx259(Checkbox, {
+            children: /* @__PURE__ */ jsx262(Checkbox, {
               checked: transparent,
               onChange: onTransparentChanged,
               name: "transparent"
@@ -42830,7 +43195,7 @@ var WebRenderModalPicture = ({
 };
 
 // src/components/RenderModal/WebRenderModal.tsx
-import { jsx as jsx260, jsxs as jsxs138 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs140 } from "react/jsx-runtime";
 var invalidCharacters2 = ["?", "*", "+", ":", "%"];
 var isValidStillExtension2 = (extension, stillImageFormat) => {
   if (stillImageFormat === "jpeg" && extension === "jpg") {
@@ -42879,7 +43244,8 @@ var WebRenderModal = ({
   defaultProps,
   inFrameMark,
   outFrameMark,
-  initialLogLevel
+  initialLogLevel,
+  initialLicenseKey
 }) => {
   const context = useContext82(ResolvedCompositionContext);
   if (!context) {
@@ -42911,19 +43277,20 @@ var WebRenderModal = ({
   const [renderProgress, setRenderProgress] = useState81(null);
   const [transparent, setTransparent] = useState81(false);
   const [muted, setMuted] = useState81(false);
-  const finalEndFrame = useMemo132(() => {
+  const [licenseKey, setLicenseKey] = useState81(initialLicenseKey);
+  const finalEndFrame = useMemo133(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo132(() => {
+  const finalStartFrame = useMemo133(() => {
     if (startFrame === null) {
       return 0;
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const frameRange = useMemo132(() => {
+  const frameRange = useMemo133(() => {
     if (startFrame === null && endFrame === null) {
       return null;
     }
@@ -42939,21 +43306,21 @@ var WebRenderModal = ({
     });
   });
   const [outName, setOutName] = useState81(() => initialOutName);
-  const setStillFormat = useCallback129((format) => {
+  const setStillFormat = useCallback130((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback129((newContainer) => {
+  const setContainerFormat = useCallback130((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback129((newMode) => {
+  const onRenderModeChange = useCallback130((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -42967,7 +43334,7 @@ var WebRenderModal = ({
       });
     }
   }, [container61, imageFormat]);
-  const renderTabOptions = useMemo132(() => {
+  const renderTabOptions = useMemo133(() => {
     const options = [
       {
         label: "Still",
@@ -42990,10 +43357,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback129((newFrame) => {
+  const onFrameSetDirectly = useCallback130((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback129((e) => {
+  const onFrameChanged = useCallback130((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -43002,10 +43369,10 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback129((e) => {
+  const onOutNameChange = useCallback130((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo132(() => {
+  const outnameValidation = useMemo133(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -43044,7 +43411,7 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container61]);
-  const onRenderStill = useCallback129(async () => {
+  const onRenderStill = useCallback130(async () => {
     const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
@@ -43061,7 +43428,8 @@ var WebRenderModal = ({
       inputProps,
       delayRenderTimeoutInMilliseconds: delayRenderTimeout,
       mediaCacheSizeInBytes,
-      logLevel
+      logLevel,
+      licenseKey: licenseKey ?? undefined
     });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -43085,9 +43453,10 @@ var WebRenderModal = ({
     outName,
     resolvedComposition.defaultProps,
     unresolvedComposition.calculateMetadata,
-    resolvedComposition.id
+    resolvedComposition.id,
+    licenseKey
   ]);
-  const onRenderVideo = useCallback129(async () => {
+  const onRenderVideo = useCallback130(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -43104,7 +43473,7 @@ var WebRenderModal = ({
       delayRenderTimeoutInMilliseconds: delayRenderTimeout,
       mediaCacheSizeInBytes,
       logLevel,
-      codec,
+      videoCodec: codec,
       container: container61,
       videoBitrate,
       hardwareAcceleration,
@@ -43115,7 +43484,8 @@ var WebRenderModal = ({
       },
       transparent,
       muted,
-      outputTarget: "web-fs"
+      outputTarget: "web-fs",
+      licenseKey: licenseKey ?? undefined
     });
     setRenderProgress(null);
     const blob = await getBlob();
@@ -43147,39 +43517,40 @@ var WebRenderModal = ({
     muted,
     resolvedComposition.defaultProps,
     resolvedComposition.id,
-    unresolvedComposition.calculateMetadata
+    unresolvedComposition.calculateMetadata,
+    licenseKey
   ]);
-  const onRender = useCallback129(async () => {
+  const onRender = useCallback130(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
       await onRenderVideo();
     }
   }, [renderMode, onRenderStill, onRenderVideo]);
-  return /* @__PURE__ */ jsxs138("div", {
+  return /* @__PURE__ */ jsxs140("div", {
     style: outerModalStyle,
     children: [
-      /* @__PURE__ */ jsx260(ModalHeader, {
+      /* @__PURE__ */ jsx263(ModalHeader, {
         title: `Render ${resolvedComposition.id}`
       }),
-      /* @__PURE__ */ jsxs138("div", {
+      /* @__PURE__ */ jsxs140("div", {
         style: container59,
         children: [
-          /* @__PURE__ */ jsx260(SegmentedControl, {
+          /* @__PURE__ */ jsx263(SegmentedControl, {
             items: renderTabOptions,
             needsWrapping: false
           }),
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: flexer
           }),
-          /* @__PURE__ */ jsxs138(Button, {
+          /* @__PURE__ */ jsxs140(Button, {
             autoFocus: true,
             onClick: onRender,
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
               renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
-              /* @__PURE__ */ jsx260(ShortcutHint, {
+              /* @__PURE__ */ jsx263(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
               })
@@ -43187,88 +43558,106 @@ var WebRenderModal = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs138("div", {
+      /* @__PURE__ */ jsx263("div", {
+        style: container59,
+        children: /* @__PURE__ */ jsx263(WebRendererExperimentalBadge, {})
+      }),
+      /* @__PURE__ */ jsxs140("div", {
         style: horizontalLayout,
         children: [
-          /* @__PURE__ */ jsxs138("div", {
+          /* @__PURE__ */ jsxs140("div", {
             style: leftSidebar,
             children: [
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "general",
                 onClick: () => setTab("general"),
                 children: [
-                  /* @__PURE__ */ jsx260("div", {
+                  /* @__PURE__ */ jsx263("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx260(FileIcon, {
+                    children: /* @__PURE__ */ jsx263(FileIcon, {
                       style: icon6
                     })
                   }),
                   "General"
                 ]
               }),
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "data",
                 onClick: () => setTab("data"),
                 children: [
-                  /* @__PURE__ */ jsx260("div", {
+                  /* @__PURE__ */ jsx263("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx260(DataIcon, {
+                    children: /* @__PURE__ */ jsx263(DataIcon, {
                       style: icon6
                     })
                   }),
                   "Input Props"
                 ]
               }),
-              renderMode === "video" ? /* @__PURE__ */ jsxs138(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "picture",
                 onClick: () => setTab("picture"),
                 children: [
-                  /* @__PURE__ */ jsx260("div", {
+                  /* @__PURE__ */ jsx263("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx260(PicIcon, {
+                    children: /* @__PURE__ */ jsx263(PicIcon, {
                       style: icon6
                     })
                   }),
                   "Picture"
                 ]
               }) : null,
-              renderMode === "video" ? /* @__PURE__ */ jsxs138(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "audio",
                 onClick: () => setTab("audio"),
                 children: [
-                  /* @__PURE__ */ jsx260("div", {
+                  /* @__PURE__ */ jsx263("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx260(AudioIcon, {
+                    children: /* @__PURE__ */ jsx263(AudioIcon, {
                       style: icon6
                     })
                   }),
                   "Audio"
                 ]
               }) : null,
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "advanced",
                 onClick: () => setTab("advanced"),
                 children: [
-                  /* @__PURE__ */ jsx260("div", {
+                  /* @__PURE__ */ jsx263("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx263(GearIcon, {
+                      style: icon6
+                    })
+                  }),
+                  "Other"
+                ]
+              }),
+              /* @__PURE__ */ jsxs140(VerticalTab, {
+                style: horizontalTab,
+                selected: tab === "license",
+                onClick: () => setTab("license"),
+                children: [
+                  /* @__PURE__ */ jsx263("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx260(FileIcon, {
+                    children: /* @__PURE__ */ jsx263(CertificateIcon, {
                       style: icon6
                     })
                   }),
-                  "Advanced"
+                  "License"
                 ]
               })
             ]
           }),
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: optionsPanel,
             className: VERTICAL_SCROLLBAR_CLASSNAME,
-            children: tab === "general" ? /* @__PURE__ */ jsx260(WebRenderModalBasic, {
+            children: tab === "general" ? /* @__PURE__ */ jsx263(WebRenderModalBasic, {
               renderMode,
               resolvedComposition,
               imageFormat,
@@ -43289,7 +43678,7 @@ var WebRenderModal = ({
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message,
               logLevel,
               setLogLevel
-            }) : tab === "data" ? /* @__PURE__ */ jsx260(DataEditor, {
+            }) : tab === "data" ? /* @__PURE__ */ jsx263(DataEditor, {
               defaultProps: inputProps,
               setDefaultProps: setInputProps,
               unresolvedComposition,
@@ -43298,7 +43687,7 @@ var WebRenderModal = ({
               saving,
               setSaving,
               readOnlyStudio: false
-            }) : tab === "picture" ? /* @__PURE__ */ jsx260(WebRenderModalPicture, {
+            }) : tab === "picture" ? /* @__PURE__ */ jsx263(WebRenderModalPicture, {
               renderMode,
               videoBitrate,
               setVideoBitrate,
@@ -43306,10 +43695,10 @@ var WebRenderModal = ({
               setKeyframeIntervalInSeconds,
               transparent,
               setTransparent
-            }) : tab === "audio" ? /* @__PURE__ */ jsx260(WebRenderModalAudio, {
+            }) : tab === "audio" ? /* @__PURE__ */ jsx263(WebRenderModalAudio, {
               muted,
               setMuted
-            }) : /* @__PURE__ */ jsx260(WebRenderModalAdvanced, {
+            }) : tab === "advanced" ? /* @__PURE__ */ jsx263(WebRenderModalAdvanced, {
               renderMode,
               delayRenderTimeout,
               setDelayRenderTimeout,
@@ -43317,6 +43706,10 @@ var WebRenderModal = ({
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
               setHardwareAcceleration
+            }) : /* @__PURE__ */ jsx263(WebRenderModalLicense, {
+              licenseKey,
+              setLicenseKey,
+              initialPublicLicenseKey: initialLicenseKey
             })
           })
         ]
@@ -43325,10 +43718,10 @@ var WebRenderModal = ({
   });
 };
 var WebRenderModalWithLoader = (props) => {
-  return /* @__PURE__ */ jsx260(DismissableModal, {
-    children: /* @__PURE__ */ jsx260(ResolveCompositionBeforeModal, {
+  return /* @__PURE__ */ jsx263(DismissableModal, {
+    children: /* @__PURE__ */ jsx263(ResolveCompositionBeforeModal, {
       compositionId: props.compositionId,
-      children: /* @__PURE__ */ jsx260(WebRenderModal, {
+      children: /* @__PURE__ */ jsx263(WebRenderModal, {
         ...props
       })
     })
@@ -43336,11 +43729,11 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback132, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback133, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback130, useEffect as useEffect78, useState as useState82 } from "react";
-import { jsx as jsx261, jsxs as jsxs139 } from "react/jsx-runtime";
+import { useCallback as useCallback131, useEffect as useEffect79, useState as useState82 } from "react";
+import { jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
   height: 16,
@@ -43350,7 +43743,7 @@ var buttonContainerStyle = {
   display: "flex",
   minWidth: "114px"
 };
-var copyIcon = /* @__PURE__ */ jsx261("svg", {
+var copyIcon = /* @__PURE__ */ jsx264("svg", {
   "aria-hidden": "true",
   focusable: "false",
   "data-prefix": "far",
@@ -43360,7 +43753,7 @@ var copyIcon = /* @__PURE__ */ jsx261("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512",
   style: iconStyle8,
-  children: /* @__PURE__ */ jsx261("path", {
+  children: /* @__PURE__ */ jsx264("path", {
     fill: "currentColor",
     d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
   })
@@ -43370,30 +43763,30 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
   const [copied, setCopied] = useState82(false);
-  const onClick = useCallback130(() => {
+  const onClick = useCallback131(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect78(() => {
+  useEffect79(() => {
     if (!copied) {
       return;
     }
     const to = setTimeout(() => setCopied(false), 2000);
     return () => clearTimeout(to);
   }, [copied]);
-  return /* @__PURE__ */ jsxs139(Button, {
+  return /* @__PURE__ */ jsxs141(Button, {
     onClick,
     buttonContainerStyle,
     children: [
       copyIcon,
-      /* @__PURE__ */ jsx261(Spacing, {
+      /* @__PURE__ */ jsx264(Spacing, {
         x: 1.5
       }),
       " ",
-      /* @__PURE__ */ jsx261("span", {
+      /* @__PURE__ */ jsx264("span", {
         style: labelStyle5,
         children: copied ? labelWhenCopied : label11
       })
@@ -43402,8 +43795,8 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback131, useMemo as useMemo133, useState as useState83 } from "react";
-import { jsx as jsx262 } from "react/jsx-runtime";
+import { useCallback as useCallback132, useMemo as useMemo134, useState as useState83 } from "react";
+import { jsx as jsx265 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
   height: "11px"
@@ -43416,30 +43809,30 @@ var buttonStyle8 = {
   justifyContent: "center",
   alignItems: "center"
 };
-var OpenIssueButton = ({ link: link3 }) => {
+var OpenIssueButton = ({ link: link4 }) => {
   const [hovered, setHovered] = useState83(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback131(() => {
-    window.open(link3, "_blank");
-  }, [link3]);
-  const svgFillColor = useMemo133(() => {
+  const handleClick = useCallback132(() => {
+    window.open(link4, "_blank");
+  }, [link4]);
+  const svgFillColor = useMemo134(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
-  const openInEditorSvg = /* @__PURE__ */ jsx262("svg", {
+  const openInEditorSvg = /* @__PURE__ */ jsx265("svg", {
     viewBox: "0 0 512 512",
     style: svgStyle3,
-    children: /* @__PURE__ */ jsx262("path", {
+    children: /* @__PURE__ */ jsx265("path", {
       fill: svgFillColor,
       d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
     })
   });
-  const onPointerEnter = useCallback131(() => {
+  const onPointerEnter = useCallback132(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback131(() => {
+  const onPointerLeave = useCallback132(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx262("button", {
+  return /* @__PURE__ */ jsx265("button", {
     title: buttonTooltip,
     type: "button",
     onPointerEnter,
@@ -43451,52 +43844,52 @@ var OpenIssueButton = ({ link: link3 }) => {
 };
 
 // src/components/KnownBugs.tsx
-import { jsx as jsx263, jsxs as jsxs140 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs142 } from "react/jsx-runtime";
 var container61 = {
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 };
-var text3 = {
+var text4 = {
   fontSize: 14,
   flex: 1
 };
 var KnownBugs = ({ bugs }) => {
   const bugElements = bugs.map((bug) => {
-    return /* @__PURE__ */ jsxs140("div", {
+    return /* @__PURE__ */ jsxs142("div", {
       style: container61,
       children: [
-        /* @__PURE__ */ jsxs140("div", {
-          style: text3,
+        /* @__PURE__ */ jsxs142("div", {
+          style: text4,
           children: [
             "\uD83E\uDEB2 ",
             bug.title
           ]
         }),
-        /* @__PURE__ */ jsx263(OpenIssueButton, {
+        /* @__PURE__ */ jsx266(OpenIssueButton, {
           link: bug.link
         })
       ]
     }, bug.description + bug.link);
   });
-  return /* @__PURE__ */ jsx263("div", {
+  return /* @__PURE__ */ jsx266("div", {
     children: bugElements
   });
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx264, jsxs as jsxs141, Fragment as Fragment46 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs143, Fragment as Fragment47 } from "react/jsx-runtime";
 var container62 = {
   padding: 20,
   paddingTop: 0
 };
-var text4 = {
+var text5 = {
   fontSize: 14
 };
 var title7 = {
   paddingTop: 12,
   paddingBottom: 8,
-  ...text4
+  ...text5
 };
 var code = {
   background: SELECTED_BACKGROUND,
@@ -43505,11 +43898,11 @@ var code = {
   marginTop: 10,
   marginBottom: 10
 };
-var link3 = {
+var link4 = {
   fontWeight: "bold",
   color: BLUE,
   textDecoration: "none",
-  ...text4
+  ...text5
 };
 var commands = {
   npm: "npx remotion upgrade",
@@ -43519,26 +43912,26 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo134(() => {
+  const hasKnownBugs = useMemo135(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback132(() => {
+  const onClick = useCallback133(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxs141(DismissableModal, {
+  return /* @__PURE__ */ jsxs143(DismissableModal, {
     children: [
-      /* @__PURE__ */ jsx264(ModalHeader, {
+      /* @__PURE__ */ jsx267(ModalHeader, {
         title: "Update available"
       }),
-      /* @__PURE__ */ jsxs141("div", {
+      /* @__PURE__ */ jsxs143("div", {
         style: container62,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs141(Fragment46, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs143(Fragment47, {
             children: [
-              /* @__PURE__ */ jsxs141("div", {
+              /* @__PURE__ */ jsxs143("div", {
                 style: title7,
                 children: [
                   "The currently installed version ",
@@ -43546,43 +43939,43 @@ var UpdateModal = ({ info, knownBugs }) => {
                   " has the following known bugs:"
                 ]
               }),
-              /* @__PURE__ */ jsx264(KnownBugs, {
+              /* @__PURE__ */ jsx267(KnownBugs, {
                 bugs: knownBugs
               }),
-              /* @__PURE__ */ jsx264("div", {
+              /* @__PURE__ */ jsx267("div", {
                 style: { height: "20px" }
               }),
-              /* @__PURE__ */ jsx264("div", {
-                style: text4,
+              /* @__PURE__ */ jsx267("div", {
+                style: text5,
                 children: "To upgrade, run the following command:"
               })
             ]
-          }) : /* @__PURE__ */ jsx264("div", {
+          }) : /* @__PURE__ */ jsx267("div", {
             style: title7,
             children: "A new update for Remotion is available! Run the following command:"
           }),
-          /* @__PURE__ */ jsxs141(Row, {
+          /* @__PURE__ */ jsxs143(Row, {
             align: "center",
             children: [
-              /* @__PURE__ */ jsx264(Flex, {
-                children: /* @__PURE__ */ jsx264("pre", {
+              /* @__PURE__ */ jsx267(Flex, {
+                children: /* @__PURE__ */ jsx267("pre", {
                   onClick,
                   style: code,
                   children: command
                 })
               }),
-              /* @__PURE__ */ jsx264(Spacing, {
+              /* @__PURE__ */ jsx267(Spacing, {
                 x: 1
               }),
-              /* @__PURE__ */ jsx264(CopyButton, {
+              /* @__PURE__ */ jsx267(CopyButton, {
                 textToCopy: command,
                 label: "Copy",
                 labelWhenCopied: "Copied!"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs141("div", {
-            style: text4,
+          /* @__PURE__ */ jsxs143("div", {
+            style: text5,
             children: [
               "This will upgrade Remotion from ",
               info.currentVersion,
@@ -43592,13 +43985,13 @@ var UpdateModal = ({ info, knownBugs }) => {
               "."
             ]
           }),
-          /* @__PURE__ */ jsxs141("div", {
-            style: text4,
+          /* @__PURE__ */ jsxs143("div", {
+            style: text5,
             children: [
               "Read the",
               " ",
-              /* @__PURE__ */ jsx264("a", {
-                style: link3,
+              /* @__PURE__ */ jsx267("a", {
+                style: link4,
                 target: "_blank",
                 href: "https://github.com/remotion-dev/remotion/releases",
                 children: "Release notes"
@@ -43616,33 +44009,34 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx265, jsxs as jsxs142, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs144, Fragment as Fragment48 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext83(ModalsContext);
   const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs142(Fragment47, {
+  return /* @__PURE__ */ jsxs144(Fragment48, {
     children: [
-      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx265(DuplicateComposition, {
+      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx268(DuplicateComposition, {
         compositionType: modalContextType.compositionType,
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx265(DeleteComposition, {
+      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx268(DeleteComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx265(RenameComposition, {
+      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx268(RenameComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx265(OverrideInputPropsModal, {}),
-      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx265(WebRenderModalWithLoader, {
+      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx268(OverrideInputPropsModal, {}),
+      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx268(WebRenderModalWithLoader, {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
         defaultProps: modalContextType.defaultProps,
         inFrameMark: modalContextType.inFrameMark,
         outFrameMark: modalContextType.outFrameMark,
-        initialLogLevel: modalContextType.initialLogLevel
+        initialLogLevel: modalContextType.initialLogLevel,
+        initialLicenseKey: modalContextType.initialLicenseKey
       }),
-      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx265(RenderModalWithLoader, {
+      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx268(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
         initialDarkMode: modalContextType.initialDarkMode,
         compositionId: modalContextType.compositionId,
@@ -43691,28 +44085,28 @@ var Modals = ({ readOnlyStudio }) => {
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }),
-      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx265(RenderStatusModal, {
+      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx268(RenderStatusModal, {
         jobId: modalContextType.jobId
       }),
-      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx265(UpdateModal, {
+      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx268(UpdateModal, {
         info: modalContextType.info,
         knownBugs: modalContextType.knownBugs
       }),
-      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx265(InstallPackageModal, {
+      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx268(InstallPackageModal, {
         packageManager: modalContextType.packageManager
       }),
-      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx265(QuickSwitcher_default, {
+      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx268(QuickSwitcher_default, {
         readOnlyStudio,
         invocationTimestamp: modalContextType.invocationTimestamp,
         initialMode: modalContextType.mode
       }),
-      /* @__PURE__ */ jsx265(AskAiModal, {})
+      /* @__PURE__ */ jsx268(AskAiModal, {})
     ]
   });
 };
 
 // src/components/Editor.tsx
-import { jsx as jsx266, jsxs as jsxs143 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs145 } from "react/jsx-runtime";
 var background2 = {
   backgroundColor: BACKGROUND,
   display: "flex",
@@ -43728,7 +44122,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect79(() => {
+  useEffect80(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -43742,11 +44136,11 @@ var Editor = ({ Root, readOnlyStudio }) => {
       window.removeEventListener("beforeunload", listenToChanges);
     };
   }, [readOnlyStudio]);
-  const [canvasMounted, setCanvasMounted] = React175.useState(false);
-  const onMounted = useCallback133(() => {
+  const [canvasMounted, setCanvasMounted] = React176.useState(false);
+  const onMounted = useCallback134(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo135(() => {
+  const value = useMemo136(() => {
     if (!size4) {
       return null;
     }
@@ -43755,41 +44149,41 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo135(() => {
-    return React175.memo(Root);
+  const MemoRoot = useMemo136(() => {
+    return React176.memo(Root);
   }, [Root]);
-  return /* @__PURE__ */ jsx266(HigherZIndex, {
+  return /* @__PURE__ */ jsx269(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
-    children: /* @__PURE__ */ jsxs143(TimelineZoomContext, {
+    children: /* @__PURE__ */ jsxs145(TimelineZoomContext, {
       children: [
-        /* @__PURE__ */ jsx266(Internals61.CurrentScaleContext.Provider, {
+        /* @__PURE__ */ jsx269(Internals61.CurrentScaleContext.Provider, {
           value,
-          children: /* @__PURE__ */ jsxs143("div", {
+          children: /* @__PURE__ */ jsxs145("div", {
             style: background2,
             children: [
-              canvasMounted ? /* @__PURE__ */ jsx266(MemoRoot, {}) : null,
-              /* @__PURE__ */ jsxs143(Internals61.CanUseRemotionHooksProvider, {
+              canvasMounted ? /* @__PURE__ */ jsx269(MemoRoot, {}) : null,
+              /* @__PURE__ */ jsxs145(Internals61.CanUseRemotionHooksProvider, {
                 children: [
-                  /* @__PURE__ */ jsx266(EditorContent, {
+                  /* @__PURE__ */ jsx269(EditorContent, {
                     readOnlyStudio,
-                    children: /* @__PURE__ */ jsx266(TopPanel, {
+                    children: /* @__PURE__ */ jsx269(TopPanel, {
                       drawRef,
                       bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS,
                       onMounted,
                       readOnlyStudio
                     })
                   }),
-                  /* @__PURE__ */ jsx266(GlobalKeybindings, {})
+                  /* @__PURE__ */ jsx269(GlobalKeybindings, {})
                 ]
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx266(Modals, {
+        /* @__PURE__ */ jsx269(Modals, {
           readOnlyStudio
         }),
-        /* @__PURE__ */ jsx266(NotificationCenter, {})
+        /* @__PURE__ */ jsx269(NotificationCenter, {})
       ]
     })
   });
@@ -43799,9 +44193,9 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback134, useContext as useContext84, useMemo as useMemo136, useState as useState84 } from "react";
+import { useCallback as useCallback135, useContext as useContext84, useMemo as useMemo137, useState as useState84 } from "react";
 import { Internals as Internals62 } from "remotion";
-import { jsx as jsx267 } from "react/jsx-runtime";
+import { jsx as jsx270 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
   localStorage.setItem(key5, JSON.stringify(option));
@@ -43828,14 +44222,14 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext84(EditorZoomGesturesContext);
-  const setSize = useCallback134((newValue) => {
+  const setSize = useCallback135((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo136(() => {
+  const previewSizeCtx = useMemo137(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -43849,58 +44243,58 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return /* @__PURE__ */ jsx267(Internals62.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx270(Internals62.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback135, useMemo as useMemo137, useState as useState85 } from "react";
-import { jsx as jsx268 } from "react/jsx-runtime";
+import { useCallback as useCallback136, useMemo as useMemo138, useState as useState85 } from "react";
+import { jsx as jsx271 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState85(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback135((newValue) => {
+  const setCheckerboard = useCallback136((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo137(() => {
+  const checkerboardCtx = useMemo138(() => {
     return {
       checkerboard,
       setCheckerboard
     };
   }, [checkerboard, setCheckerboard]);
-  return /* @__PURE__ */ jsx268(CheckerboardContext.Provider, {
+  return /* @__PURE__ */ jsx271(CheckerboardContext.Provider, {
     value: checkerboardCtx,
     children
   });
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo138, useState as useState86 } from "react";
+import { useMemo as useMemo139, useState as useState86 } from "react";
 import { Internals as Internals63 } from "remotion";
-import { jsx as jsx269 } from "react/jsx-runtime";
+import { jsx as jsx272 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState86(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState86(1);
-  const mediaVolumeContextValue = useMemo138(() => {
+  const mediaVolumeContextValue = useMemo139(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo138(() => {
+  const setMediaVolumeContextValue = useMemo139(() => {
     return {
       setMediaMuted,
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx269(Internals63.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx272(Internals63.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx269(Internals63.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx272(Internals63.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -43908,24 +44302,24 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo139, useState as useState87 } from "react";
-import { jsx as jsx270 } from "react/jsx-runtime";
+import { useMemo as useMemo140, useState as useState87 } from "react";
+import { jsx as jsx273 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState87(null);
-  const modalsContext = useMemo139(() => {
+  const modalsContext = useMemo140(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
     };
   }, [modalContextType]);
-  return /* @__PURE__ */ jsx270(ModalsContext.Provider, {
+  return /* @__PURE__ */ jsx273(ModalsContext.Provider, {
     value: modalsContext,
     children
   });
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect80, useMemo as useMemo140, useState as useState88 } from "react";
+import { useEffect as useEffect81, useMemo as useMemo141, useState as useState88 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -43941,20 +44335,20 @@ var loadMarks = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { jsx as jsx271 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState88(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo140(() => {
+  const setTimelineInOutContextValue = useMemo141(() => {
     return {
       setInAndOutFrames
     };
   }, []);
-  useEffect80(() => {
+  useEffect81(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
-  return /* @__PURE__ */ jsx271(TimelineInOutContext.Provider, {
+  return /* @__PURE__ */ jsx274(TimelineInOutContext.Provider, {
     value: inAndOutFrames,
-    children: /* @__PURE__ */ jsx271(SetTimelineInOutContext.Provider, {
+    children: /* @__PURE__ */ jsx274(SetTimelineInOutContext.Provider, {
       value: setTimelineInOutContextValue,
       children
     })
@@ -43962,23 +44356,23 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback136, useMemo as useMemo141, useRef as useRef43, useState as useState89 } from "react";
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { useCallback as useCallback137, useMemo as useMemo142, useRef as useRef44, useState as useState89 } from "react";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState89(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState89(null);
   const [hoveredGuideId, setHoveredGuideId] = useState89(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState89(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef43(false);
-  const shouldDeleteGuideRef = useRef43(false);
-  const setEditorShowGuides = useCallback136((newValue) => {
+  const shouldCreateGuideRef = useRef44(false);
+  const shouldDeleteGuideRef = useRef44(false);
+  const setEditorShowGuides = useCallback137((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo141(() => {
+  const editorShowGuidesCtx = useMemo142(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -43998,82 +44392,82 @@ var ShowGuidesProvider = ({ children }) => {
     selectedGuideId,
     hoveredGuideId
   ]);
-  return /* @__PURE__ */ jsx272(EditorShowGuidesContext.Provider, {
+  return /* @__PURE__ */ jsx275(EditorShowGuidesContext.Provider, {
     value: editorShowGuidesCtx,
     children
   });
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo142, useState as useState90 } from "react";
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { useCallback as useCallback138, useMemo as useMemo143, useState as useState90 } from "react";
+import { jsx as jsx276 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState90(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback137((newValue) => {
+  const setEditorShowRulers = useCallback138((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo142(() => {
+  const editorShowRulersCtx = useMemo143(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
     };
   }, [editorShowRulers, setEditorShowRulers]);
-  return /* @__PURE__ */ jsx273(EditorShowRulersContext.Provider, {
+  return /* @__PURE__ */ jsx276(EditorShowRulersContext.Provider, {
     value: editorShowRulersCtx,
     children
   });
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo143, useState as useState91 } from "react";
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { useCallback as useCallback139, useMemo as useMemo144, useState as useState91 } from "react";
+import { jsx as jsx277 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState91(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback138((newValue) => {
+  const setEditorZoomGestures = useCallback139((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo143(() => {
+  const editorZoomGesturesCtx = useMemo144(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
     };
   }, [editorZoomGestures, setEditorZoomGestures]);
-  return /* @__PURE__ */ jsx274(EditorZoomGesturesContext.Provider, {
+  return /* @__PURE__ */ jsx277(EditorZoomGesturesContext.Provider, {
     value: editorZoomGesturesCtx,
     children
   });
 };
 
 // src/components/EditorContexts.tsx
-import { jsx as jsx275 } from "react/jsx-runtime";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var EditorContexts = ({ children, readOnlyStudio }) => {
-  return /* @__PURE__ */ jsx275(ZodProvider, {
-    children: /* @__PURE__ */ jsx275(VisualControlsProvider, {
-      children: /* @__PURE__ */ jsx275(PreviewServerConnection, {
+  return /* @__PURE__ */ jsx278(ZodProvider, {
+    children: /* @__PURE__ */ jsx278(VisualControlsProvider, {
+      children: /* @__PURE__ */ jsx278(PreviewServerConnection, {
         readOnlyStudio,
-        children: /* @__PURE__ */ jsx275(RenderQueueContextProvider, {
-          children: /* @__PURE__ */ jsx275(KeybindingContextProvider, {
-            children: /* @__PURE__ */ jsx275(CheckerboardProvider, {
-              children: /* @__PURE__ */ jsx275(ZoomGesturesProvider, {
-                children: /* @__PURE__ */ jsx275(ShowRulersProvider, {
-                  children: /* @__PURE__ */ jsx275(ShowGuidesProvider, {
-                    children: /* @__PURE__ */ jsx275(PreviewSizeProvider, {
-                      children: /* @__PURE__ */ jsx275(ModalsProvider, {
-                        children: /* @__PURE__ */ jsx275(MediaVolumeProvider, {
-                          children: /* @__PURE__ */ jsx275(PlayerInternals20.PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx278(RenderQueueContextProvider, {
+          children: /* @__PURE__ */ jsx278(KeybindingContextProvider, {
+            children: /* @__PURE__ */ jsx278(CheckerboardProvider, {
+              children: /* @__PURE__ */ jsx278(ZoomGesturesProvider, {
+                children: /* @__PURE__ */ jsx278(ShowRulersProvider, {
+                  children: /* @__PURE__ */ jsx278(ShowGuidesProvider, {
+                    children: /* @__PURE__ */ jsx278(PreviewSizeProvider, {
+                      children: /* @__PURE__ */ jsx278(ModalsProvider, {
+                        children: /* @__PURE__ */ jsx278(MediaVolumeProvider, {
+                          children: /* @__PURE__ */ jsx278(PlayerInternals20.PlayerEmitterProvider, {
                             currentPlaybackRate: null,
-                            children: /* @__PURE__ */ jsx275(SidebarContextProvider, {
-                              children: /* @__PURE__ */ jsx275(FolderContextProvider, {
-                                children: /* @__PURE__ */ jsx275(HighestZIndexProvider, {
-                                  children: /* @__PURE__ */ jsx275(SetTimelineInOutProvider, {
+                            children: /* @__PURE__ */ jsx278(SidebarContextProvider, {
+                              children: /* @__PURE__ */ jsx278(FolderContextProvider, {
+                                children: /* @__PURE__ */ jsx278(HighestZIndexProvider, {
+                                  children: /* @__PURE__ */ jsx278(SetTimelineInOutProvider, {
                                     children
                                   })
                                 })
@@ -44096,7 +44490,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 
 // src/components/Notifications/ServerDisconnected.tsx
 import { useContext as useContext85 } from "react";
-import { jsx as jsx276, jsxs as jsxs144 } from "react/jsx-runtime";
+import { jsx as jsx279, jsxs as jsxs146 } from "react/jsx-runtime";
 var container63 = {
   position: "fixed",
   justifyContent: "flex-end",
@@ -44141,26 +44535,26 @@ var ServerDisconnected = () => {
   }
   const base64Favicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=";
   fav.setAttribute("href", base64Favicon);
-  return /* @__PURE__ */ jsx276("div", {
+  return /* @__PURE__ */ jsx279("div", {
     style: container63,
     className: "css-reset",
-    children: /* @__PURE__ */ jsxs144("div", {
+    children: /* @__PURE__ */ jsxs146("div", {
       style: message,
       children: [
         "The studio server has disconnected. ",
-        /* @__PURE__ */ jsx276("br", {}),
-        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs144("span", {
+        /* @__PURE__ */ jsx279("br", {}),
+        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs146("span", {
           children: [
             "Run",
             " ",
-            /* @__PURE__ */ jsx276("code", {
+            /* @__PURE__ */ jsx279("code", {
               style: inlineCode,
               children: window.remotion_studioServerCommand
             }),
             " ",
             "to run it again."
           ]
-        }) : /* @__PURE__ */ jsx276("span", {
+        }) : /* @__PURE__ */ jsx279("span", {
           children: "Fast refresh will not work."
         })
       ]
@@ -44257,7 +44651,6 @@ var makeDefaultGlobalCSS = () => {
       inset -1px -1px #555,
       inset 1px -1px #555,
       inset -1px 1px #555;
-    border-radius: 0 !important;
   }
   
   input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
@@ -44326,7 +44719,7 @@ var injectCSS = () => {
 };
 
 // src/Studio.tsx
-import { jsx as jsx277, jsxs as jsxs145 } from "react/jsx-runtime";
+import { jsx as jsx280, jsxs as jsxs147 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
@@ -44334,27 +44727,27 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx277(Internals65.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx280(Internals65.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx277(Internals65.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx280(Internals65.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel,
       numberOfAudioTags: window.remotion_numberOfAudioTags,
       audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-      children: /* @__PURE__ */ jsx277(Internals65.ResolveCompositionConfigInStudio, {
-        children: /* @__PURE__ */ jsxs145(EditorContexts, {
+      children: /* @__PURE__ */ jsx280(Internals65.ResolveCompositionConfigInStudio, {
+        children: /* @__PURE__ */ jsxs147(EditorContexts, {
           readOnlyStudio: readOnly,
           children: [
-            /* @__PURE__ */ jsx277(Editor, {
+            /* @__PURE__ */ jsx280(Editor, {
               readOnlyStudio: readOnly,
               Root: rootComponent
             }),
-            readOnly ? null : createPortal(/* @__PURE__ */ jsx277(ServerDisconnected, {}), getServerDisconnectedDomElement())
+            readOnly ? null : createPortal(/* @__PURE__ */ jsx280(ServerDisconnected, {}), getServerDisconnectedDomElement())
           ]
         })
       })