@remotion/promo-pages 4.0.431 → 4.0.433

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsShow.js

@@ -40,12 +40,12 @@ __export(exports_vidstack_CZgUA94N, {
   waitTimeout: () => waitTimeout,
   waitIdlePeriod: () => waitIdlePeriod,
   useStateContext: () => useStateContext,
-  useState: () => useState43,
+  useState: () => useState42,
   useSignalRecord: () => useSignalRecord,
   useSignal: () => useSignal,
   useReactScope: () => useReactScope,
   useReactContext: () => useReactContext,
-  useContext: () => useContext45,
+  useContext: () => useContext44,
   uppercaseFirstChar: () => uppercaseFirstChar,
   untrack: () => untrack,
   toggleClass: () => toggleClass,
@@ -619,7 +619,7 @@ function provideContext(context, value, scope = getScope()) {
   const hasProvidedValue = !isUndefined(value);
   setContext(context.id, hasProvidedValue ? value : context.provide?.(), scope);
 }
-function useContext45(context) {
+function useContext44(context) {
   const value = getContext(context.id);
   return value;
 }
@@ -678,8 +678,8 @@ class State {
     }
   }
 }
-function useState43(state) {
-  return useContext45(state);
+function useState42(state) {
+  return useContext44(state);
 }
 function camelToKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -717,7 +717,7 @@ function composeRefs3(...refs) {
   return (node) => refs.forEach((ref) => setRef3(ref, node));
 }
 function createClientComponent(Component2, options2) {
-  const forwardComponent = React54.forwardRef((props, forwardRef14) => {
+  const forwardComponent = React54.forwardRef((props, forwardRef15) => {
     let parentScopeRef = React54.useContext(ReactScopeContext), scopeRef = React54.useRef(null), stateRef = React54.useRef();
     if (!stateRef.current) {
       const state2 = createInternalState(), component = initComponent(Component2, state2, props, parentScopeRef.current);
@@ -740,7 +740,7 @@ function createClientComponent(Component2, options2) {
         attachToHost(state2, state2.el);
       }
       if (!state2.forwardRef) {
-        setRef3(forwardRef14, state2.component);
+        setRef3(forwardRef15, state2.component);
         state2.forwardRef = true;
       }
       return () => detachFromHost(state2);
@@ -1061,7 +1061,7 @@ function createServerComponent(Component2, options2) {
     let scope = React54.useContext(ReactScopeContext), component = createComponent(Component2, {
       props,
       scope: scope.current
-    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef14, ...renderProps } = props;
+    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef15, ...renderProps } = props;
     if (options2.props.size) {
       for (const prop2 of Object.keys(renderProps)) {
         if (!options2.props.has(prop2))
@@ -7061,7 +7061,7 @@ function boundTime(time, store) {
   return Math.min(Math.max(store.seekableStart() + 0.1, clippedTime), store.seekableEnd() - 0.1);
 }
 function useMediaContext() {
-  return useContext45(mediaContext);
+  return useContext44(mediaContext);
 }
 
 class MediaRemoteControl {
@@ -13976,7 +13976,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
         if (!this.connectScope)
           return;
         this.#attach();
-        const tooltip = useContext45(tooltipContext);
+        const tooltip = useContext44(tooltipContext);
         onDispose(() => {
           const button = this.#getButton();
           button && tooltip.detachTrigger(button);
@@ -13984,7 +13984,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }));
     }
     #attach() {
-      const button = this.#getButton(), tooltip = useContext45(tooltipContext);
+      const button = this.#getButton(), tooltip = useContext44(tooltipContext);
       button && tooltip.attachTrigger(button);
     }
     #getButton() {
@@ -14017,7 +14017,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onConnect(el) {
       this.#attach(el);
-      const tooltip = useContext45(tooltipContext);
+      const tooltip = useContext44(tooltipContext);
       onDispose(() => tooltip.detachContent(el));
       onDispose(requestScopedAnimationFrame(() => {
         if (!this.connectScope)
@@ -14026,11 +14026,11 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }));
     }
     #attach(el) {
-      const tooltip = useContext45(tooltipContext);
+      const tooltip = useContext44(tooltipContext);
       tooltip.attachContent(el);
     }
     #watchPlacement() {
-      const { showing } = useContext45(tooltipContext);
+      const { showing } = useContext44(tooltipContext);
       if (!showing())
         return;
       const { placement, offset: mainOffset, alignOffset } = this.$props;
@@ -14041,7 +14041,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       });
     }
     #getTrigger() {
-      return useContext45(tooltipContext).trigger();
+      return useContext44(tooltipContext).trigger();
     }
   };
   ToggleButtonController = class ToggleButtonController extends ViewController {
@@ -14537,7 +14537,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       if (hasProvidedContext(sliderObserverContext)) {
-        this.#observer = useContext45(sliderObserverContext);
+        this.#observer = useContext44(sliderObserverContext);
       }
     }
     onConnect(el) {
@@ -15039,7 +15039,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
   SliderThumbnail = class SliderThumbnail extends Thumbnail {
     #slider;
     onAttach(el) {
-      this.#slider = useState43(Slider.state);
+      this.#slider = useState42(Slider.state);
     }
     getTime() {
       const { duration, clipStartTime } = this.media.$state;
@@ -15066,7 +15066,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       this.#media = useMediaContext();
-      this.#slider = useState43(Slider.state);
+      this.#slider = useState42(Slider.state);
       this.#watchCrossOrigin();
       this.setAttributes({
         "data-loading": this.#isLoading.bind(this),
@@ -15152,8 +15152,8 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     #text;
     #slider;
     onSetup() {
-      this.#slider = useState43(Slider.state);
-      this.#format = useContext45(sliderValueFormatContext);
+      this.#slider = useState42(Slider.state);
+      this.#format = useContext44(sliderValueFormatContext);
       this.#text = computed(this.getValueText.bind(this));
     }
     getValueText() {
@@ -15192,8 +15192,8 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     };
     #slider;
     onSetup() {
-      this.#slider = useContext45(sliderContext);
-      const { active } = useState43(Slider.state);
+      this.#slider = useContext44(sliderContext);
+      const { active } = useState42(Slider.state);
       this.setAttributes({
         "data-visible": active
       });
@@ -15620,7 +15620,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }
     }
     #watchPreviewing() {
-      const player = this.#media.player.el, { preview } = useContext45(sliderContext);
+      const player = this.#media.player.el, { preview } = useContext44(sliderContext);
       player && preview() && setAttribute(player, "data-preview", this.$state.active());
     }
     #seeking(time, event2) {
@@ -15734,7 +15734,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       this.#media = useMediaContext();
-      this.#sliderState = useState43(TimeSlider.state);
+      this.#sliderState = useState42(TimeSlider.state);
     }
     onAttach(el) {
       watchActiveTextTrack(this.#media.textTracks, "chapters", this.#setTrack.bind(this));
@@ -16058,7 +16058,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
         closeMenu: this.close.bind(this)
       });
       if (hasProvidedContext(menuContext)) {
-        this.#parentMenu = useContext45(menuContext);
+        this.#parentMenu = useContext44(menuContext);
       }
       this.#observeSliders();
       this.setAttributes({
@@ -16103,7 +16103,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       this.#transitionCallbacks.clear();
     }
     #observeSliders() {
-      let sliderActiveTimer = -1, parentSliderObserver = hasProvidedContext(sliderObserverContext) ? useContext45(sliderObserverContext) : null;
+      let sliderActiveTimer = -1, parentSliderObserver = hasProvidedContext(sliderObserverContext) ? useContext44(sliderObserverContext) : null;
       provideContext(sliderObserverContext, {
         onDragStart: () => {
           parentSliderObserver?.onDragStart?.();
@@ -16430,7 +16430,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       new FocusVisibleController;
     }
     onSetup() {
-      this.#menu = useContext45(menuContext);
+      this.#menu = useContext44(menuContext);
     }
     onAttach(el) {
       this.#menu.attachMenuButton(this);
@@ -16546,10 +16546,10 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       });
     }
     onAttach(el) {
-      this.#menu = useContext45(menuContext);
+      this.#menu = useContext44(menuContext);
       this.#menu.attachMenuItems(this);
       if (hasProvidedContext(menuPortalContext)) {
-        const portal = useContext45(menuPortalContext);
+        const portal = useContext44(menuPortalContext);
         if (portal) {
           provideContext(menuPortalContext, null);
           portal.attach(el);
@@ -16724,12 +16724,12 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     #onDisconnect() {
       scoped(() => {
-        const group = useContext45(radioControllerContext);
+        const group = useContext44(radioControllerContext);
         group.remove(this.#controller);
       }, this.connectScope);
     }
     #addToGroup() {
-      const group = useContext45(radioControllerContext);
+      const group = useContext44(radioControllerContext);
       group.add(this.#controller);
     }
     #watchValue() {
@@ -17367,7 +17367,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
 });
 
 // ../design/dist/esm/index.mjs
-import { useCallback as useCallback17, useRef as useRef22, useState as useState22 } from "react";
+import { useCallback as useCallback18, useRef as useRef22, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -18709,7 +18709,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React5, { useEffect as useEffect19, useMemo as useMemo34, useState as useState20 } from "react";
+import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState19 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -21486,46 +21486,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import { jsx as jsx8 } from "react/jsx-runtime";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var makeCircle = ({ radius }) => {
-  const instructions = [
-    {
-      type: "M",
-      x: radius,
-      y: 0
-    },
-    {
-      type: "a",
-      rx: radius,
-      ry: radius,
-      xAxisRotation: 0,
-      largeArcFlag: true,
-      sweepFlag: true,
-      dx: 0,
-      dy: radius * 2
-    },
-    {
-      type: "a",
-      rx: radius,
-      ry: radius,
-      xAxisRotation: 0,
-      largeArcFlag: true,
-      sweepFlag: true,
-      dx: 0,
-      dy: -radius * 2
-    },
-    {
-      type: "Z"
-    }
-  ];
-  const path = serializeInstructions(instructions);
-  return {
-    height: radius * 2,
-    width: radius * 2,
-    path,
-    instructions,
-    transformOrigin: `${radius} ${radius}`
-  };
-};
+import { jsx as jsx10 } from "react/jsx-runtime";
 var doesReactSupportTransformOriginProperty = (version2) => {
   if (version2.includes("canary") || version2.includes("experimental")) {
     const last8Chars = parseInt(version2.slice(-8), 10);
@@ -21619,6 +21580,46 @@ var RenderSvg = ({
     ]
   });
 };
+var makeCircle = ({ radius }) => {
+  const instructions = [
+    {
+      type: "M",
+      x: radius,
+      y: 0
+    },
+    {
+      type: "a",
+      rx: radius,
+      ry: radius,
+      xAxisRotation: 0,
+      largeArcFlag: true,
+      sweepFlag: true,
+      dx: 0,
+      dy: radius * 2
+    },
+    {
+      type: "a",
+      rx: radius,
+      ry: radius,
+      xAxisRotation: 0,
+      largeArcFlag: true,
+      sweepFlag: true,
+      dx: 0,
+      dy: -radius * 2
+    },
+    {
+      type: "Z"
+    }
+  ];
+  const path = serializeInstructions(instructions);
+  return {
+    height: radius * 2,
+    width: radius * 2,
+    path,
+    instructions,
+    transformOrigin: `${radius} ${radius}`
+  };
+};
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -21715,7 +21716,7 @@ var Heart = ({
   depthAdjustment = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx4(RenderSvg, {
+  return /* @__PURE__ */ jsx5(RenderSvg, {
     ...makeHeart({
       aspectRatio,
       height,
@@ -23048,41 +23049,41 @@ var extrudeAndTransformElement = (options) => {
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
 import { createContext as createContext2, useContext } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
   useContext as useContext13,
-  useEffect as useEffect2,
-  useMemo as useMemo10,
-  useState as useState5
+  useEffect,
+  useMemo as useMemo11,
+  useState as useState4
 } from "react";
 import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { useContext as useContext11, useMemo as useMemo8 } from "react";
 import { createContext as createContext3 } from "react";
+import { useContext as useContext7, useMemo as useMemo6 } from "react";
 import {
-  createContext as createContext9,
+  createContext as createContext6,
   useLayoutEffect,
-  useMemo as useMemo6,
+  useMemo as useMemo22,
   useRef,
   useState as useState2
 } from "react";
-import { useContext as useContext5, useMemo as useMemo5 } from "react";
-import { useContext as useContext2, useState } from "react";
-import React2 from "react";
-import { useContext as useContext4, useMemo as useMemo4 } from "react";
+import { createContext as createContext5, useCallback, useContext as useContext4 } from "react";
 import { createContext as createContext4 } from "react";
-import { createContext as createContext6, createRef, useContext as useContext3, useMemo as useMemo3 } from "react";
-import React3, {
-  createContext as createContext5,
-  useCallback,
-  useImperativeHandle,
-  useMemo as useMemo22
-} from "react";
+import * as React2 from "react";
+import { useContext as useContext3, useState } from "react";
+import React3 from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-import { createContext as createContext8, useCallback as useCallback2, useContext as useContext7 } from "react";
+import { useContext as useContext6, useMemo as useMemo5 } from "react";
 import { createContext as createContext7 } from "react";
-import * as React4 from "react";
+import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo4 } from "react";
+import React5, {
+  createContext as createContext8,
+  useCallback as useCallback2,
+  useImperativeHandle,
+  useMemo as useMemo3
+} from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 import { useContext as useContext8 } from "react";
 import { createContext as createContext10 } from "react";
@@ -23090,114 +23091,114 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 import { useContext as useContext10 } from "react";
 import { useContext as useContext9, useMemo as useMemo7 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-import { createContext as createContext11, useContext as useContext12, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import { createContext as createContext11, useCallback as useCallback3, useContext as useContext12, useMemo as useMemo9, useRef as useRef2 } from "react";
 import { createContext as createContext12 } from "react";
-import React8, { useCallback as useCallback3, useMemo as useMemo9, useRef as useRef3, useState as useState4 } from "react";
+import React8, { useCallback as useCallback4, useMemo as useMemo10, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect3,
+  useEffect as useEffect2,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
-  useState as useState6
+  useState as useState5
 } from "react";
-import React10, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle2, useRef as useRef4 } from "react";
+import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle2, useRef as useRef4 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
-import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 import {
   createContext as createContext13,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo11,
+  useMemo as useMemo12,
   useRef as useRef6,
-  useState as useState7
+  useState as useState6
 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext27 } from "react";
-import React11, { createContext as createContext14, useMemo as useMemo12 } from "react";
+import { jsx as jsx112 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
+import React11, { createContext as createContext14, useMemo as useMemo13 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { useContext as useContext15 } from "react";
-import { createContext as createContext15, useEffect as useEffect4, useState as useState9 } from "react";
+import { createContext as createContext15, useEffect as useEffect3, useState as useState8 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-import { createContext as createContext16, useMemo as useMemo13, useReducer } from "react";
+import { createContext as createContext16, useMemo as useMemo14, useReducer } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import React17, {
   forwardRef as forwardRef4,
-  useContext as useContext25,
-  useEffect as useEffect11,
+  useContext as useContext24,
+  useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo21,
+  useMemo as useMemo222,
   useRef as useRef14,
-  useState as useState14
+  useState as useState13
 } from "react";
 import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
 import React14, {
   createContext as createContext17,
   createRef as createRef2,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useContext as useContext16,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useRef as useRef7,
-  useState as useState10
+  useState as useState9
 } from "react";
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef8 } from "react";
-import { useContext as useContext19, useEffect as useEffect5, useMemo as useMemo16, useState as useState11 } from "react";
+import { useContext as useContext19, useEffect as useEffect4, useMemo as useMemo17, useState as useState10 } from "react";
 import { useContext as useContext18 } from "react";
 import {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
 } from "react";
-import { useCallback as useCallback8, useMemo as useMemo19, useRef as useRef11 } from "react";
-import { useContext as useContext21, useMemo as useMemo18 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo20, useRef as useRef11 } from "react";
+import { useContext as useContext21, useMemo as useMemo19 } from "react";
 import React15, {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect6,
+  useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef10,
-  useState as useState12
+  useState as useState11
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import React16 from "react";
-import { useEffect as useEffect7, useState as useState13 } from "react";
-import { useEffect as useEffect8, useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect10 } from "react";
-import { createContext as createContext18, useContext as useContext24, useMemo as useMemo20 } from "react";
+import { useEffect as useEffect6, useState as useState12 } from "react";
+import { useEffect as useEffect7, useRef as useRef12 } from "react";
+import { useEffect as useEffect9 } from "react";
+import { createContext as createContext18, useContext as useContext23, useMemo as useMemo21 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext26,
-  useEffect as useEffect12,
+  useContext as useContext25,
+  useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo222,
+  useMemo as useMemo23,
   useRef as useRef15
 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext29, useEffect as useEffect14 } from "react";
+import { Suspense, useContext as useContext28, useEffect as useEffect13 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext19, useContext as useContext28, useEffect as useEffect13, useMemo as useMemo23 } from "react";
+import { createContext as createContext19, useContext as useContext27, useEffect as useEffect12, useMemo as useMemo24 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
-import React20, { useMemo as useMemo24, useRef as useRef16 } from "react";
+import React20, { useMemo as useMemo25, useRef as useRef16 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback12,
-  useContext as useContext30,
+  useCallback as useCallback13,
+  useContext as useContext29,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef17
@@ -23206,59 +23207,61 @@ import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React24 from "react";
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo25,
+  useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState16
+  useState as useState15
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
-import { useMemo as useMemo27 } from "react";
-import { createContext as createContext20, useContext as useContext31, useMemo as useMemo26 } from "react";
+import { useMemo as useMemo28 } from "react";
+import { createContext as createContext20, useContext as useContext30, useMemo as useMemo27 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React27, { createContext as createContext21 } from "react";
-import { useContext as useContext32, useMemo as useMemo28, useState as useState17 } from "react";
-import { useContext as useContext33 } from "react";
-import { useCallback as useCallback15 } from "react";
+import React27 from "react";
+import React28, { createContext as createContext21 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext32 } from "react";
+import { useCallback as useCallback16 } from "react";
 import {
-  useCallback as useCallback14,
-  useContext as useContext34,
-  useEffect as useEffect15,
+  useCallback as useCallback15,
+  useContext as useContext33,
+  useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo29,
-  useState as useState18
+  useMemo as useMemo30,
+  useState as useState17
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, {
+import React30, {
   forwardRef as forwardRef9,
-  useContext as useContext35,
-  useEffect as useEffect17,
+  useContext as useContext34,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState19
+  useState as useState18
 } from "react";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31, { useMemo as useMemo31 } from "react";
+import React32, { forwardRef as forwardRef10, useMemo as useMemo32 } from "react";
+import React33, { useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef10, useMemo as useMemo32 } from "react";
-import React32 from "react";
-import React33, { createContext as createContext22 } from "react";
+import { Children, forwardRef as forwardRef11, useMemo as useMemo34 } from "react";
+import React34 from "react";
+import React35, { createContext as createContext22 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React35 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext37 } from "react";
+import React37 from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback17, useContext as useContext36 } from "react";
 import {
-  forwardRef as forwardRef11,
-  useContext as useContext36,
-  useEffect as useEffect18,
+  forwardRef as forwardRef12,
+  useContext as useContext35,
+  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo33,
+  useMemo as useMemo35,
   useRef as useRef20
 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -23297,7 +23300,7 @@ var IsPlayerContext = createContext2(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx10(IsPlayerContext.Provider, {
+  return /* @__PURE__ */ jsx11(IsPlayerContext.Provider, {
     value: true,
     children
   });
@@ -23308,7 +23311,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.431";
+var VERSION = "4.0.433";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -23429,6 +23432,17 @@ var AbsoluteFillRefForwarding = (props, ref) => {
 };
 var AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 var SequenceContext = createContext3(null);
+var exports_timeline_position_state = {};
+__export2(exports_timeline_position_state, {
+  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelinePosition: () => useTimelinePosition,
+  useTimelineContext: () => useTimelineContext,
+  usePlayingState: () => usePlayingState,
+  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
+  persistCurrentFrame: () => persistCurrentFrame,
+  getInitialFrameState: () => getInitialFrameState,
+  getFrameForComposition: () => getFrameForComposition
+});
 function mulberry32(a) {
   let t = a + 1831565813;
   t = Math.imul(t ^ t >>> 15, t | 1);
@@ -23461,15 +23475,55 @@ var random = (seed, dummy) => {
   }
   throw new Error("random() argument must be a number or a string");
 };
-var exports_timeline_position_state = {};
-__export2(exports_timeline_position_state, {
-  useTimelineSetFrame: () => useTimelineSetFrame,
-  useTimelinePosition: () => useTimelinePosition,
-  usePlayingState: () => usePlayingState,
-  persistCurrentFrame: () => persistCurrentFrame,
-  getInitialFrameState: () => getInitialFrameState,
-  getFrameForComposition: () => getFrameForComposition
-});
+var getErrorStackWithMessage = (error) => {
+  const stack = error.stack ?? "";
+  return stack.startsWith("Error:") ? stack : `${error.message}
+${stack}`;
+};
+var isErrorLike = (err) => {
+  if (err instanceof Error) {
+    return true;
+  }
+  if (err === null) {
+    return false;
+  }
+  if (typeof err !== "object") {
+    return false;
+  }
+  if (!("stack" in err)) {
+    return false;
+  }
+  if (typeof err.stack !== "string") {
+    return false;
+  }
+  if (!("message" in err)) {
+    return false;
+  }
+  if (typeof err.message !== "string") {
+    return false;
+  }
+  return true;
+};
+function cancelRenderInternal(scope, err) {
+  let error;
+  if (isErrorLike(err)) {
+    error = err;
+    if (!error.stack) {
+      error.stack = new Error(error.message).stack;
+    }
+  } else if (typeof err === "string") {
+    error = Error(err);
+  } else {
+    error = Error("Rendering was cancelled");
+  }
+  if (scope) {
+    scope.remotion_cancelledError = getErrorStackWithMessage(error);
+  }
+  throw error;
+}
+function cancelRender(err) {
+  return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
+}
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
@@ -23489,19 +23543,280 @@ var getRemotionEnvironment = () => {
     isClientSideRendering: false
   };
 };
-var RemotionEnvironmentContext = React2.createContext(null);
+var logLevels = ["trace", "verbose", "info", "warn", "error"];
+var getNumberForLogLevel = (level) => {
+  return logLevels.indexOf(level);
+};
+var isEqualOrBelowLogLevel = (currentLevel, level) => {
+  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+var transformArgs = ({
+  args,
+  logLevel,
+  tag
+}) => {
+  const arr = [...args];
+  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+  }
+  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+  }
+  return arr;
+};
+var verbose = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
+    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  }
+};
+var trace = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
+    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
+  }
+};
+var info = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
+    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  }
+};
+var warn = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
+    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  }
+};
+var error = (options, ...args) => {
+  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
+};
+var Log = {
+  trace,
+  verbose,
+  info,
+  warn,
+  error
+};
+if (typeof window !== "undefined") {
+  window.remotion_renderReady = false;
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
+  window.remotion_delayRenderHandles = [];
+}
+var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
+var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
+var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
+var defaultTimeout = 30000;
+var delayRenderInternal = ({
+  scope,
+  environment,
+  label,
+  options
+}) => {
+  if (typeof label !== "string" && label !== null) {
+    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
+  }
+  const handle = Math.random();
+  scope.remotion_delayRenderHandles.push(handle);
+  const called = Error().stack?.replace(/^Error/g, "") ?? "";
+  if (environment.isRendering) {
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy2).join(" ");
+        if (environment.isClientSideRendering) {
+          scope.remotion_cancelledError = getErrorStackWithMessage(Error(message));
+        } else {
+          cancelRenderInternal(scope, Error(message));
+        }
+      }, timeoutToUse)
+    };
+  }
+  scope.remotion_renderReady = false;
+  return handle;
+};
+var continueRenderInternal = ({
+  scope,
+  handle,
+  environment,
+  logLevel
+}) => {
+  if (typeof handle === "undefined") {
+    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
+  }
+  if (typeof handle !== "number") {
+    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
+  }
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
+    if (h === handle) {
+      if (environment.isRendering && scope !== undefined) {
+        if (!scope.remotion_delayRenderTimeouts[handle]) {
+          return false;
+        }
+        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
+        clearTimeout(timeout);
+        const message = [
+          label ? `"${label}"` : "A handle",
+          DELAY_RENDER_CLEAR_TOKEN,
+          `${Date.now() - startTime}ms`
+        ].filter(truthy2).join(" ");
+        Log.verbose({ logLevel, tag: "delayRender()" }, message);
+        delete scope.remotion_delayRenderTimeouts[handle];
+      }
+      return false;
+    }
+    return true;
+  });
+  if (scope.remotion_delayRenderHandles.length === 0) {
+    scope.remotion_renderReady = true;
+  }
+};
+var LogLevelContext = createContext4({
+  logLevel: "info",
+  mountTime: 0
+});
+var useLogLevel = () => {
+  const { logLevel } = React2.useContext(LogLevelContext);
+  if (logLevel === null) {
+    throw new Error("useLogLevel must be used within a LogLevelProvider");
+  }
+  return logLevel;
+};
+var useMountTime = () => {
+  const { mountTime } = React2.useContext(LogLevelContext);
+  if (mountTime === null) {
+    throw new Error("useMountTime must be used within a LogLevelProvider");
+  }
+  return mountTime;
+};
+var RemotionEnvironmentContext = React3.createContext(null);
 var useRemotionEnvironment = () => {
-  const context = useContext2(RemotionEnvironmentContext);
+  const context = useContext3(RemotionEnvironmentContext);
   const [env] = useState(() => getRemotionEnvironment());
   return context ?? env;
 };
-var CompositionManager = createContext4({
+var DelayRenderContextType = createContext5(null);
+var useDelayRender = () => {
+  const environment = useRemotionEnvironment();
+  const scope = useContext4(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const logLevel = useLogLevel();
+  const delayRender2 = useCallback((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
+    return delayRenderInternal({
+      scope,
+      environment,
+      label: label ?? null,
+      options: options ?? {}
+    });
+  }, [environment, scope]);
+  const continueRender2 = useCallback((handle) => {
+    if (!scope) {
+      return;
+    }
+    continueRenderInternal({
+      scope,
+      handle,
+      environment,
+      logLevel
+    });
+  }, [environment, logLevel, scope]);
+  const cancelRender2 = useCallback((err) => {
+    return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
+  }, [scope]);
+  return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
+};
+var SetTimelineContext = createContext6({
+  setFrame: () => {
+    throw new Error("default");
+  },
+  setPlaying: () => {
+    throw new Error("default");
+  }
+});
+var TimelineContext = createContext6(null);
+var AbsoluteTimeContext = createContext6(null);
+var TimelineContextProvider = ({ children, frameState }) => {
+  const [playing, setPlaying] = useState2(false);
+  const imperativePlaying = useRef(false);
+  const [playbackRate, setPlaybackRate] = useState2(1);
+  const audioAndVideoTags = useRef([]);
+  const [remotionRootId] = useState2(() => String(random(null)));
+  const [_frame, setFrame] = useState2(() => getInitialFrameState());
+  const frame = frameState ?? _frame;
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  if (typeof window !== "undefined") {
+    useLayoutEffect(() => {
+      window.remotion_setFrame = (f, composition, attempt) => {
+        window.remotion_attempt = attempt;
+        const id = delayRender2(`Setting the current frame to ${f}`);
+        let asyncUpdate = true;
+        setFrame((s) => {
+          const currentFrame = s[composition] ?? window.remotion_initialFrame;
+          if (currentFrame === f) {
+            asyncUpdate = false;
+            return s;
+          }
+          return {
+            ...s,
+            [composition]: f
+          };
+        });
+        if (asyncUpdate) {
+          requestAnimationFrame(() => continueRender2(id));
+        } else {
+          continueRender2(id);
+        }
+      };
+      window.remotion_isPlayer = false;
+    }, [continueRender2, delayRender2]);
+  }
+  const timelineContextValue = useMemo22(() => {
+    return {
+      frame,
+      playing,
+      imperativePlaying,
+      rootId: remotionRootId,
+      playbackRate,
+      setPlaybackRate,
+      audioAndVideoTags
+    };
+  }, [frame, playbackRate, playing, remotionRootId]);
+  const setTimelineContextValue = useMemo22(() => {
+    return {
+      setFrame,
+      setPlaying
+    };
+  }, []);
+  return /* @__PURE__ */ jsx32(AbsoluteTimeContext.Provider, {
+    value: timelineContextValue,
+    children: /* @__PURE__ */ jsx32(TimelineContext.Provider, {
+      value: timelineContextValue,
+      children: /* @__PURE__ */ jsx32(SetTimelineContext.Provider, {
+        value: setTimelineContextValue,
+        children
+      })
+    })
+  });
+};
+var CompositionManager = createContext7({
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   canvasContent: null
 });
-var CompositionSetters = createContext4({
+var CompositionSetters = createContext7({
   registerComposition: () => {
     return;
   },
@@ -23635,7 +23950,7 @@ var getInputProps = () => {
   const parsed = deserializeJSONWithSpecialTypes(param);
   return parsed;
 };
-var EditorPropsContext = createContext5({
+var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
@@ -23644,11 +23959,11 @@ var EditorPropsContext = createContext5({
     throw new Error("Not implemented");
   }
 });
-var editorPropsProviderRef = React3.createRef();
-var timeValueRef = React3.createRef();
+var editorPropsProviderRef = React5.createRef();
+var timeValueRef = React5.createRef();
 var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React3.useState({});
-  const updateProps = useCallback(({
+  const [props, setProps] = React5.useState({});
+  const updateProps = useCallback2(({
     defaultProps,
     id,
     newProps
@@ -23660,7 +23975,7 @@ var EditorPropsProvider = ({ children }) => {
       };
     });
   }, []);
-  const resetUnsaved = useCallback((compositionId) => {
+  const resetUnsaved = useCallback2((compositionId) => {
     setProps((prev) => {
       if (prev[compositionId]) {
         const newProps = { ...prev };
@@ -23676,10 +23991,10 @@ var EditorPropsProvider = ({ children }) => {
       setProps
     };
   }, [props]);
-  const ctx = useMemo22(() => {
+  const ctx = useMemo3(() => {
     return { props, updateProps, resetUnsaved };
   }, [props, resetUnsaved, updateProps]);
-  return /* @__PURE__ */ jsx32(EditorPropsContext.Provider, {
+  return /* @__PURE__ */ jsx42(EditorPropsContext.Provider, {
     value: ctx,
     children
   });
@@ -23736,24 +24051,24 @@ function validateFps(fps, location2, isGif) {
     throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
   }
 }
-var ResolveCompositionContext = createContext6(null);
+var ResolveCompositionContext = createContext9(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
 var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext3(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext3(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
+  const context = useContext5(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext5(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const compositionId = preferredCompositionId ?? currentComposition;
   const composition = compositions.find((c) => c.id === compositionId);
-  const selectedEditorProps = useMemo3(() => {
+  const selectedEditorProps = useMemo4(() => {
     return composition ? allEditorProps[composition.id] ?? {} : {};
   }, [allEditorProps, composition]);
   const env = useRemotionEnvironment();
-  return useMemo3(() => {
+  return useMemo4(() => {
     if (!composition) {
       return null;
     }
@@ -23813,12 +24128,12 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
   ]);
 };
 var useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext4(CompositionManager);
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext6(CompositionManager);
   const selected = compositions.find((c) => {
     return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
   });
   const resolved = useResolvedVideoConfig(selected?.id ?? null);
-  return useMemo4(() => {
+  return useMemo5(() => {
     if (!resolved) {
       return null;
     }
@@ -23862,9 +24177,8 @@ var getFrameForComposition = (composition) => {
   }
   return window.remotion_initialFrame ?? 0;
 };
-var useTimelinePosition = () => {
+var useTimelinePositionFromContext = (state) => {
   const videoConfig = useVideo();
-  const state = useContext5(TimelineContext);
   const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
@@ -23872,332 +24186,32 @@ var useTimelinePosition = () => {
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
-var useTimelineSetFrame = () => {
-  const { setFrame } = useContext5(SetTimelineContext);
-  return setFrame;
-};
-var usePlayingState = () => {
-  const { playing, imperativePlaying } = useContext5(TimelineContext);
-  const { setPlaying } = useContext5(SetTimelineContext);
-  return useMemo5(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
-};
-var getErrorStackWithMessage = (error) => {
-  const stack = error.stack ?? "";
-  return stack.startsWith("Error:") ? stack : `${error.message}
-${stack}`;
-};
-var isErrorLike = (err) => {
-  if (err instanceof Error) {
-    return true;
-  }
-  if (err === null) {
-    return false;
-  }
-  if (typeof err !== "object") {
-    return false;
-  }
-  if (!("stack" in err)) {
-    return false;
-  }
-  if (typeof err.stack !== "string") {
-    return false;
-  }
-  if (!("message" in err)) {
-    return false;
-  }
-  if (typeof err.message !== "string") {
-    return false;
-  }
-  return true;
-};
-function cancelRenderInternal(scope, err) {
-  let error;
-  if (isErrorLike(err)) {
-    error = err;
-    if (!error.stack) {
-      error.stack = new Error(error.message).stack;
-    }
-  } else if (typeof err === "string") {
-    error = Error(err);
-  } else {
-    error = Error("Rendering was cancelled");
-  }
-  if (scope) {
-    scope.remotion_cancelledError = getErrorStackWithMessage(error);
-  }
-  throw error;
-}
-function cancelRender(err) {
-  return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
-}
-var logLevels = ["trace", "verbose", "info", "warn", "error"];
-var getNumberForLogLevel = (level) => {
-  return logLevels.indexOf(level);
-};
-var isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-};
-var transformArgs = ({
-  args,
-  logLevel,
-  tag
-}) => {
-  const arr = [...args];
-  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
-  }
-  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
-  }
-  return arr;
-};
-var verbose = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
-    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
-  }
-};
-var trace = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
-    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
-  }
-};
-var info = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
-    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
-  }
-};
-var warn = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
-    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
-  }
-};
-var error = (options, ...args) => {
-  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-};
-var Log = {
-  trace,
-  verbose,
-  info,
-  warn,
-  error
-};
-if (typeof window !== "undefined") {
-  window.remotion_renderReady = false;
-  if (!window.remotion_delayRenderTimeouts) {
-    window.remotion_delayRenderTimeouts = {};
-  }
-  window.remotion_delayRenderHandles = [];
-}
-var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
-var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
-var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
-var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
-var defaultTimeout = 30000;
-var delayRenderInternal = ({
-  scope,
-  environment,
-  label,
-  options
-}) => {
-  if (typeof label !== "string" && label !== null) {
-    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
-  }
-  const handle = Math.random();
-  scope.remotion_delayRenderHandles.push(handle);
-  const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
-    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-    scope.remotion_delayRenderTimeouts[handle] = {
-      label: label ?? null,
-      startTime: Date.now(),
-      timeout: setTimeout(() => {
-        const message = [
-          `A delayRender()`,
-          label ? `"${label}"` : null,
-          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-          DELAY_RENDER_CALLSTACK_TOKEN,
-          called
-        ].filter(truthy2).join(" ");
-        if (environment.isClientSideRendering) {
-          scope.remotion_cancelledError = getErrorStackWithMessage(Error(message));
-        } else {
-          cancelRenderInternal(scope, Error(message));
-        }
-      }, timeoutToUse)
-    };
-  }
-  scope.remotion_renderReady = false;
-  return handle;
-};
-var continueRenderInternal = ({
-  scope,
-  handle,
-  environment,
-  logLevel
-}) => {
-  if (typeof handle === "undefined") {
-    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
-  }
-  if (typeof handle !== "number") {
-    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
-  }
-  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering && scope !== undefined) {
-        if (!scope.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label ? `"${label}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy2).join(" ");
-        Log.verbose({ logLevel, tag: "delayRender()" }, message);
-        delete scope.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
-    }
-    return true;
-  });
-  if (scope.remotion_delayRenderHandles.length === 0) {
-    scope.remotion_renderReady = true;
+var useTimelineContext = () => {
+  const state = useContext7(TimelineContext);
+  if (state === null) {
+    throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
+  return state;
 };
-var LogLevelContext = createContext7({
-  logLevel: "info",
-  mountTime: 0
-});
-var useLogLevel = () => {
-  const { logLevel } = React4.useContext(LogLevelContext);
-  if (logLevel === null) {
-    throw new Error("useLogLevel must be used within a LogLevelProvider");
-  }
-  return logLevel;
+var useTimelinePosition = () => {
+  const state = useTimelineContext();
+  return useTimelinePositionFromContext(state);
 };
-var useMountTime = () => {
-  const { mountTime } = React4.useContext(LogLevelContext);
-  if (mountTime === null) {
-    throw new Error("useMountTime must be used within a LogLevelProvider");
+var useAbsoluteTimelinePosition = () => {
+  const state = useContext7(AbsoluteTimeContext);
+  if (state === null) {
+    throw new Error("AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
-  return mountTime;
+  return useTimelinePositionFromContext(state);
 };
-var DelayRenderContextType = createContext8(null);
-var useDelayRender = () => {
-  const environment = useRemotionEnvironment();
-  const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
-  const logLevel = useLogLevel();
-  const delayRender2 = useCallback2((label, options) => {
-    if (!scope) {
-      return Math.random();
-    }
-    return delayRenderInternal({
-      scope,
-      environment,
-      label: label ?? null,
-      options: options ?? {}
-    });
-  }, [environment, scope]);
-  const continueRender2 = useCallback2((handle) => {
-    if (!scope) {
-      return;
-    }
-    continueRenderInternal({
-      scope,
-      handle,
-      environment,
-      logLevel
-    });
-  }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback2((err) => {
-    return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
-  }, [scope]);
-  return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
+var useTimelineSetFrame = () => {
+  const { setFrame } = useContext7(SetTimelineContext);
+  return setFrame;
 };
-var SetTimelineContext = createContext9({
-  setFrame: () => {
-    throw new Error("default");
-  },
-  setPlaying: () => {
-    throw new Error("default");
-  }
-});
-var TimelineContext = createContext9({
-  frame: {},
-  playing: false,
-  playbackRate: 1,
-  rootId: "",
-  imperativePlaying: {
-    current: false
-  },
-  setPlaybackRate: () => {
-    throw new Error("default");
-  },
-  audioAndVideoTags: { current: [] }
-});
-var TimelineContextProvider = ({ children, frameState }) => {
-  const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef(false);
-  const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
-  const [_frame, setFrame] = useState2(() => getInitialFrameState());
-  const frame = frameState ?? _frame;
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  if (typeof window !== "undefined") {
-    useLayoutEffect(() => {
-      window.remotion_setFrame = (f, composition, attempt) => {
-        window.remotion_attempt = attempt;
-        const id = delayRender2(`Setting the current frame to ${f}`);
-        let asyncUpdate = true;
-        setFrame((s) => {
-          const currentFrame = s[composition] ?? window.remotion_initialFrame;
-          if (currentFrame === f) {
-            asyncUpdate = false;
-            return s;
-          }
-          return {
-            ...s,
-            [composition]: f
-          };
-        });
-        if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender2(id));
-        } else {
-          continueRender2(id);
-        }
-      };
-      window.remotion_isPlayer = false;
-    }, [continueRender2, delayRender2]);
-  }
-  const timelineContextValue = useMemo6(() => {
-    return {
-      frame,
-      playing,
-      imperativePlaying,
-      rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
-      audioAndVideoTags
-    };
-  }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo6(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, []);
-  return /* @__PURE__ */ jsx42(TimelineContext.Provider, {
-    value: timelineContextValue,
-    children: /* @__PURE__ */ jsx42(SetTimelineContext.Provider, {
-      value: setTimelineContextValue,
-      children
-    })
-  });
+var usePlayingState = () => {
+  const { playing, imperativePlaying } = useTimelineContext();
+  const { setPlaying } = useContext7(SetTimelineContext);
+  return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 var CanUseRemotionHooks = createContext10(false);
 var CanUseRemotionHooksProvider = ({ children }) => {
@@ -24306,7 +24320,7 @@ var Freeze = ({
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext11(TimelineContext);
+  const timelineContext = useTimelineContext();
   const sequenceContext = useContext11(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const timelineValue = useMemo8(() => {
@@ -24347,18 +24361,36 @@ var Freeze = ({
 var NonceContext = createContext11({
   getNonce: () => 0
 });
+var fastRefreshNonce = 0;
+try {
+  if (typeof __webpack_module__ !== "undefined") {
+    if (__webpack_module__.hot) {
+      __webpack_module__.hot.addStatusHandler((status) => {
+        if (status === "idle") {
+          fastRefreshNonce++;
+        }
+      });
+    }
+  }
+} catch {}
 var useNonce = () => {
   const context = useContext12(NonceContext);
-  const [nonce, setNonce] = useState3(() => context.getNonce());
-  const lastContext = useRef2(context);
-  useEffect(() => {
-    if (lastContext.current === context) {
-      return;
+  const nonce = context.getNonce();
+  const nonceRef = useRef2(nonce);
+  nonceRef.current = nonce;
+  const history = useRef2([[fastRefreshNonce, nonce]]);
+  const get = useCallback3(() => {
+    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+      history.current = [
+        ...history.current,
+        [fastRefreshNonce, nonceRef.current]
+      ];
     }
-    lastContext.current = context;
-    setNonce(context.getNonce);
-  }, [context]);
-  return nonce;
+    return history.current;
+  }, [history]);
+  return useMemo9(() => {
+    return { get };
+  }, [get]);
 };
 var PremountContext = createContext12({
   premountFramesRemaining: 0,
@@ -24379,22 +24411,28 @@ var SequenceVisibilityToggleContext = React8.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var SequenceControlOverrideContext = React8.createContext({
-  overrides: {},
-  setOverride: () => {
-    throw new Error("SequenceControlOverrideContext not initialized");
+var VisualModeOverridesContext = React8.createContext({
+  dragOverrides: {},
+  setDragOverrides: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
   },
-  clearOverrides: () => {
-    throw new Error("SequenceControlOverrideContext not initialized");
-  }
+  clearDragOverrides: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
+  },
+  codeValues: {},
+  setCodeValues: () => {
+    throw new Error("VisualModeOverridesContext not initialized");
+  },
+  visualModeEnabled: false
 });
-var SequenceManagerProvider = ({ children }) => {
-  const [sequences, setSequences] = useState4([]);
-  const [hidden, setHidden] = useState4({});
-  const [controlOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef3(controlOverrides);
-  controlOverridesRef.current = controlOverrides;
-  const setOverride = useCallback3((sequenceId, key, value) => {
+var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
+  const [sequences, setSequences] = useState3([]);
+  const [hidden, setHidden] = useState3({});
+  const [dragOverrides, setControlOverrides] = useState3({});
+  const controlOverridesRef = useRef3(dragOverrides);
+  controlOverridesRef.current = dragOverrides;
+  const [codeValues, setCodeValuesMapState] = useState3({});
+  const setDragOverrides = useCallback4((sequenceId, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
       [sequenceId]: {
@@ -24403,7 +24441,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     }));
   }, []);
-  const clearOverrides = useCallback3((sequenceId) => {
+  const clearDragOverrides = useCallback4((sequenceId) => {
     setControlOverrides((prev) => {
       if (!prev[sequenceId]) {
         return prev;
@@ -24413,39 +24451,65 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const registerSequence = useCallback3((seq) => {
+  const setCodeValues = useCallback4((sequenceId, values) => {
+    setCodeValuesMapState((prev) => {
+      if (prev[sequenceId] === values) {
+        return prev;
+      }
+      if (values === null) {
+        if (!(sequenceId in prev)) {
+          return prev;
+        }
+        const next = { ...prev };
+        delete next[sequenceId];
+        return next;
+      }
+      return { ...prev, [sequenceId]: values };
+    });
+  }, []);
+  const registerSequence = useCallback4((seq) => {
     setSequences((seqs) => {
       return [...seqs, seq];
     });
   }, []);
-  const unregisterSequence = useCallback3((seq) => {
+  const unregisterSequence = useCallback4((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo9(() => {
+  const sequenceContext = useMemo10(() => {
     return {
       registerSequence,
       sequences,
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence]);
-  const hiddenContext = useMemo9(() => {
+  const hiddenContext = useMemo10(() => {
     return {
       hidden,
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo9(() => {
+  const overrideContext = useMemo10(() => {
     return {
-      overrides: controlOverrides,
-      setOverride,
-      clearOverrides
+      visualModeEnabled,
+      dragOverrides,
+      setDragOverrides,
+      clearDragOverrides,
+      codeValues,
+      setCodeValues
     };
-  }, [controlOverrides, setOverride, clearOverrides]);
+  }, [
+    visualModeEnabled,
+    dragOverrides,
+    setDragOverrides,
+    clearDragOverrides,
+    codeValues,
+    setCodeValues
+  ]);
   return /* @__PURE__ */ jsx72(SequenceManager.Provider, {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx72(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx72(SequenceControlOverrideContext.Provider, {
+      children: /* @__PURE__ */ jsx72(VisualModeOverridesContext.Provider, {
         value: overrideContext,
         children
       })
@@ -24469,9 +24533,9 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
+  const [id] = useState4(() => String(Math.random()));
   const parentSequence = useContext13(SequenceContext);
-  const { rootId } = useContext13(TimelineContext);
+  const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -24498,13 +24562,13 @@ var RegularSequenceRefForwardingFunction = ({
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext13(SequenceManager);
   const { hidden } = useContext13(SequenceVisibilityToggleContext);
-  const premounting = useMemo10(() => {
+  const premounting = useMemo11(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo10(() => {
+  const postmounting = useMemo11(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo10(() => {
+  const contextValue = useMemo11(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -24531,12 +24595,12 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo10(() => {
+  const timelineClipName = useMemo11(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  useEffect2(() => {
+  useEffect(() => {
     if (!env.isStudio) {
       return;
     }
@@ -24549,7 +24613,7 @@ var RegularSequenceRefForwardingFunction = ({
       type: "sequence",
       rootId,
       showInTimeline,
-      nonce,
+      nonce: nonce.get(),
       loopDisplay,
       stack: stack ?? inheritedStack,
       premountDisplay: premountDisplay ?? null,
@@ -24583,7 +24647,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo10(() => {
+  const defaultStyle = useMemo11(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -24610,7 +24674,8 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const frame = useCurrentFrame();
+  const parentPremountContext = useContext13(PremountContext);
+  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
@@ -24629,7 +24694,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo10(() => {
+  const style = useMemo11(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -24644,10 +24709,9 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  const parentPremountContext = useContext13(PremountContext);
-  const { playing } = useContext13(TimelineContext);
-  const premountFramesRemaining = parentPremountContext.premountFramesRemaining + (premountingActive ? from - frame : 0);
-  const premountContextValue = useMemo10(() => {
+  const { playing } = useTimelineContext();
+  const premountFramesRemaining = premountingActive ? from - frame : 0;
+  const premountContextValue = useMemo11(() => {
     return {
       premountFramesRemaining,
       playing: parentPremountContext.playing || playing
@@ -24742,7 +24806,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef4(null);
-  const draw = useCallback4((imageData) => {
+  const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -24945,7 +25009,7 @@ var AnimatedImage = forwardRef3(({
   ...props
 }, canvasRef) => {
   const mountState = useRef5({ isMounted: true });
-  useEffect3(() => {
+  useEffect2(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
@@ -24953,9 +25017,9 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState6(null);
+  const [imageDecoder, setImageDecoder] = useState5(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState5(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
@@ -24969,8 +25033,8 @@ var AnimatedImage = forwardRef3(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState6(() => loopBehavior);
-  useEffect3(() => {
+  const [initialLoopBehavior] = useState5(() => loopBehavior);
+  useEffect2(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -25080,9 +25144,9 @@ var RenderAssetManager = createContext13({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState7([]);
+  const [renderAssets, setRenderAssets] = useState6([]);
   const renderAssetsRef = useRef6([]);
-  const registerRenderAsset = useCallback5((renderAsset) => {
+  const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -25099,7 +25163,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback5((id) => {
+  const unregisterRenderAsset = useCallback6((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -25113,14 +25177,14 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo11(() => {
+  const contextValue = useMemo12(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx112(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -25130,7 +25194,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState8(() => {
+  const [id] = useState7(() => {
     return String(Math.random());
   });
   useLayoutEffect4(() => {
@@ -25235,14 +25299,14 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo12(() => {
+  const loopDisplay = useMemo13(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo12(() => {
+  const loopContext = useMemo13(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -25279,8 +25343,8 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState9(() => preloads);
-  useEffect4(() => {
+  const [_preloads, _setPreloads] = useState8(() => preloads);
+  useEffect3(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -25600,7 +25664,7 @@ var DurationsContext = createContext16({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo13(() => {
+  const value = useMemo14(() => {
     return {
       durations,
       setDurations
@@ -25734,7 +25798,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const audioContext = useMemo14(() => {
+  const audioContext = useMemo15(() => {
     if (env.isRendering) {
       return null;
     }
@@ -25781,7 +25845,7 @@ var didPropChange = (key, newProp, prevProp) => {
 var SharedAudioContext = createContext17(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
   const audios = useRef7([]);
-  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
@@ -25791,7 +25855,64 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     latencyHint: audioLatencyHint,
     audioEnabled
   });
-  const refs = useMemo15(() => {
+  const audioSyncAnchor = useMemo16(() => ({ value: 0 }), []);
+  const prevEndTimes = useRef7({ scheduledEndTime: null, mediaEndTime: null });
+  const scheduleAudioNode = useMemo16(() => {
+    return ({
+      node,
+      mediaTimestamp,
+      targetTime,
+      currentTime,
+      sequenceEndTime,
+      sequenceStartTime,
+      debugAudioScheduling
+    }) => {
+      if (!audioContext) {
+        throw new Error("Audio context not found");
+      }
+      const bufferDuration = node.buffer?.duration ?? 0;
+      const unclampedMediaEndTime = mediaTimestamp + bufferDuration;
+      const needsTrimEnd = unclampedMediaEndTime > sequenceEndTime;
+      const needsTrimStart = mediaTimestamp < sequenceStartTime;
+      const offsetBecauseOfTrim = needsTrimStart ? sequenceStartTime - mediaTimestamp : 0;
+      const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime : 0;
+      const offset = offsetBecauseOfTrim + offsetBecauseOfTooLate;
+      const duration = needsTrimEnd ? bufferDuration - Math.max(0, unclampedMediaEndTime - sequenceEndTime) - offset : bufferDuration - offset;
+      const scheduledTime = targetTime + currentTime + offset;
+      if (offset < 0) {
+        throw new Error("offset < 0: " + JSON.stringify({
+          offset,
+          targetTime,
+          currentTime,
+          offsetBecauseOfTrim,
+          offsetBecauseOfTooLate
+        }));
+      }
+      if (duration > 0) {
+        node.start(scheduledTime, offset, duration);
+      }
+      const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
+      const mediaTime = mediaTimestamp + offset;
+      const mediaEndTime = mediaTime + duration;
+      const latency = audioContext.baseLatency + audioContext.outputLatency;
+      const timeDiff = scheduledTime - currentTime - latency;
+      const prev = prevEndTimes.current;
+      const scheduledMismatch = prev.scheduledEndTime !== null && Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
+      const mediaMismatch = prev.mediaEndTime !== null && Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
+      if (debugAudioScheduling) {
+        Log.info({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + audioContext.state);
+      }
+      prev.scheduledEndTime = scheduledEndTime;
+      prev.mediaEndTime = mediaEndTime;
+      return duration > 0 ? {
+        type: "started",
+        scheduledTime
+      } : {
+        type: "not-started"
+      };
+    };
+  }, [audioContext, logLevel]);
+  const refs = useMemo16(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -25815,7 +25936,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     };
   }, [refs]);
   const takenAudios = useRef7(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback6(() => {
+  const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -25836,7 +25957,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     });
   }, [refs]);
-  const registerAudio = useCallback6((options) => {
+  const registerAudio = useCallback7((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -25865,7 +25986,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback6((id) => {
+  const unregisterAudio = useCallback7((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -25876,7 +25997,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback6(({
+  const updateAudio = useCallback7(({
     aud,
     audioId,
     id,
@@ -25912,7 +26033,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback6(() => {
+  const playAllAudios = useCallback7(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -25930,14 +26051,16 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo15(() => {
+  const value = useMemo16(() => {
     return {
       registerAudio,
       unregisterAudio,
       updateAudio,
       playAllAudios,
       numberOfAudioTags,
-      audioContext
+      audioContext,
+      audioSyncAnchor,
+      scheduleAudioNode
     };
   }, [
     numberOfAudioTags,
@@ -25945,7 +26068,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     registerAudio,
     unregisterAudio,
     updateAudio,
-    audioContext
+    audioContext,
+    audioSyncAnchor,
+    scheduleAudioNode
   ]);
   return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
     value,
@@ -25968,7 +26093,7 @@ var useSharedAudio = ({
   postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
-  const [elem] = useState10(() => {
+  const [elem] = useState9(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
@@ -26262,7 +26387,7 @@ var useBasicMediaInTimeline = ({
   const startsAt = useMediaStartsAt();
   const parentSequence = useContext19(SequenceContext);
   const videoConfig = useVideoConfig();
-  const [initialVolume] = useState11(() => volume);
+  const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
     mediaDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
@@ -26270,7 +26395,7 @@ var useBasicMediaInTimeline = ({
     trimAfter
   });
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
-  const volumes = useMemo16(() => {
+  const volumes = useMemo17(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -26282,14 +26407,14 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useContext19(TimelineContext);
+  const { rootId } = useTimelineContext();
   const env = useRemotionEnvironment();
   return {
     volumes,
@@ -26336,7 +26461,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect5(() => {
+  useEffect4(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -26357,7 +26482,7 @@ var useMediaInTimeline = ({
       rootId,
       volume: volumes,
       showInTimeline: true,
-      nonce,
+      nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
       doesVolumeChange,
       loopDisplay,
@@ -26394,13 +26519,13 @@ var useMediaInTimeline = ({
   ]);
 };
 var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState12([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
+  const [blocks, setBlocks] = useState11([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState11([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef10(false);
-  const addBlock = useCallback7((block) => {
+  const addBlock = useCallback8((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -26421,7 +26546,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback7((callback) => {
+  const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -26429,7 +26554,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback7((callback) => {
+  const listenForResume = useCallback8((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -26437,7 +26562,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     if (rendering) {
       return;
     }
@@ -26467,7 +26592,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo17(() => {
+  return useMemo18(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -26481,8 +26606,8 @@ var BufferingProvider = ({ children }) => {
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
-  useEffect6(() => {
+  const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
+  useEffect5(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -26505,7 +26630,7 @@ var useIsPlayerBuffering = (bufferManager) => {
 var useBufferState = () => {
   const buffer = useContext21(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo18(() => ({
+  return useMemo19(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -26531,7 +26656,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef11(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback8((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -26602,7 +26727,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo19(() => {
+  return useMemo20(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -26650,8 +26775,8 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState13(false);
-  useEffect7(() => {
+  const [isBuffering, setIsBuffering] = useState12(false);
+  useEffect6(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -26784,7 +26909,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef12(null);
-  useEffect8(() => {
+  useEffect7(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -27004,7 +27129,7 @@ var useMediaPlayback = ({
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useContext22(TimelineContext);
+  const { playbackRate: globalPlaybackRate } = useTimelineContext();
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
@@ -27019,7 +27144,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef13({});
-  const onVariableFpsVideoDetected = useCallback9(() => {
+  const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
     }
@@ -27070,7 +27195,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect9(() => {
+  useEffect8(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -27115,7 +27240,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect9(() => {
+  useEffect8(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -27240,11 +27365,11 @@ var useMediaTag = ({
   isPremounting,
   isPostmounting
 }) => {
-  const { audioAndVideoTags, imperativePlaying } = useContext23(TimelineContext);
+  const { audioAndVideoTags, imperativePlaying } = useTimelineContext();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect10(() => {
+  useEffect9(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -27296,16 +27421,16 @@ var SetMediaVolumeContext = createContext18({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext24(MediaVolumeContext);
-  const { setMediaVolume } = useContext24(SetMediaVolumeContext);
-  return useMemo20(() => {
+  const { mediaVolume } = useContext23(MediaVolumeContext);
+  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
+  return useMemo21(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext24(MediaVolumeContext);
-  const { setMediaMuted } = useContext24(SetMediaVolumeContext);
-  return useMemo20(() => {
+  const { mediaMuted } = useContext23(MediaVolumeContext);
+  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
+  return useMemo21(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -27315,7 +27440,7 @@ var warnAboutTooHighVolume = (volume) => {
   }
 };
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -27354,13 +27479,13 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext25(SequenceVisibilityToggleContext);
+  const { hidden } = useContext24(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext25(SequenceContext);
-  const [timelineId] = useState14(() => String(Math.random()));
+  const sequenceContext = useContext24(SequenceContext);
+  const [timelineId] = useState13(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -27373,7 +27498,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo21(() => {
+  const propsToPass = useMemo222(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -27391,7 +27516,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo21(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo222(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -27463,7 +27588,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef14(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect11(() => {
+  useEffect10(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -27514,10 +27639,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext26(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext26(RenderAssetManager);
+  const sequenceContext = useContext25(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo222(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo23(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -27532,7 +27657,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -27624,7 +27749,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext27(SharedAudioContext);
+  const audioContext = useContext26(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -27643,12 +27768,12 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext27(DurationsContext);
+  const { durations, setDurations } = useContext26(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback10((e) => {
+  const onError = useCallback11((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -27662,7 +27787,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback10((src, durationInSeconds) => {
+  const onDuration = useCallback11((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -27836,7 +27961,7 @@ var useLazyComponent = ({
   if ("component" in compProps) {
     componentRef.current = compProps.component;
   }
-  const lazy = useMemo24(() => {
+  const lazy = useMemo25(() => {
     if ("component" in compProps) {
       if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
@@ -27881,7 +28006,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 };
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect14(() => {
+  useEffect13(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -27897,7 +28022,7 @@ var InnerComposition = ({
   schema,
   ...compProps
 }) => {
-  const compManager = useContext29(CompositionSetters);
+  const compManager = useContext28(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -27908,7 +28033,7 @@ var InnerComposition = ({
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext29(CanUseRemotionHooks);
+  const canUseComposition = useContext28(CanUseRemotionHooks);
   if (typeof window !== "undefined") {
     window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
   }
@@ -27918,8 +28043,8 @@ var InnerComposition = ({
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext29(FolderContext);
-  useEffect14(() => {
+  const { folderName, parentName } = useContext28(FolderContext);
+  useEffect13(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -27934,7 +28059,7 @@ var InnerComposition = ({
       folderName,
       component: lazy,
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      nonce,
+      nonce: nonce.get(),
       parentFolderName: parentName,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null
@@ -27958,7 +28083,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect14(() => {
+  useEffect13(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -27997,7 +28122,7 @@ var InnerComposition = ({
   return null;
 };
 var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext29(CompositionSetters);
+  const { onlyRenderComposition } = useContext28(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -28015,15 +28140,15 @@ var IFrameRefForwarding = ({
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState14(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback11((e) => {
+  const didLoad = useCallback12((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback11((e) => {
+  const didGetError = useCallback12((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -28057,7 +28182,7 @@ var ImgRefForwarding = ({
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -28069,7 +28194,7 @@ var ImgRefForwarding = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback12((timeout) => {
+  const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -28086,7 +28211,8 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback12((e) => {
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const didGetError = useCallback13((e) => {
     if (!errors.current) {
       return;
     }
@@ -28101,9 +28227,10 @@ var ImgRefForwarding = ({
       retryIn(backoff);
       return;
     }
-    cancelRender("Error loading image with src: " + imageRef.current?.src);
-  }, [maxRetries, onError, retryIn]);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+    try {
+      cancelRender2("Error loading image with src: " + imageRef.current?.src);
+    } catch {}
+  }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
@@ -28148,7 +28275,7 @@ var ImgRefForwarding = ({
       current.src = actualSrc;
       current.decode().then(onComplete).catch((err) => {
         console.warn(err);
-        if (current.complete) {
+        if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
           onComplete();
         } else {
           current.addEventListener("load", onComplete);
@@ -28196,43 +28323,43 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState16([]);
-  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
-  const [compositions, setCompositions] = useState16(initialCompositions);
+  const [folders, setFolders] = useState15([]);
+  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
+  const [compositions, setCompositions] = useState15(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
-  const updateCompositions = useCallback13((updateComps) => {
+  const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback13((comp) => {
+  const registerComposition = useCallback14((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
       }
-      const value = [...comps, comp].slice().sort((a2, b2) => a2.nonce - b2.nonce);
-      return value;
+      return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback13((id) => {
+  const unregisterComposition = useCallback14((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback13((name, parent) => {
+  const registerFolder = useCallback14((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
         {
           name,
-          parent
+          parent,
+          nonce
         }
       ];
     });
   }, []);
-  const unregisterFolder = useCallback13((name, parent) => {
+  const unregisterFolder = useCallback14((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -28242,7 +28369,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const updateCompositionDefaultProps = useCallback13((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
         if (c2.id === id) {
@@ -28256,7 +28383,7 @@ var CompositionManagerProvider = ({
       return updated;
     });
   }, []);
-  const compositionManagerSetters = useMemo25(() => {
+  const compositionManagerSetters = useMemo26(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -28274,7 +28401,7 @@ var CompositionManagerProvider = ({
     updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo25(() => {
+  const compositionManagerContextValue = useMemo26(() => {
     return {
       compositions,
       folders,
@@ -28348,6 +28475,27 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
@@ -28372,7 +28520,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext20(null);
 var useVideoEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext30(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -28382,7 +28530,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext30(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -28396,7 +28544,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo26(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo27(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
     value,
     children
@@ -28410,15 +28558,15 @@ var RemotionRootContexts = ({
   videoEnabled,
   audioEnabled,
   frameState,
-  nonceContextSeed
+  visualModeEnabled
 }) => {
-  const nonceContext = useMemo27(() => {
+  const nonceContext = useMemo28(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
-  }, [nonceContextSeed]);
-  const logging = useMemo27(() => {
+  }, []);
+  const logging = useMemo28(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
@@ -28433,6 +28581,7 @@ var RemotionRootContexts = ({
           children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
             children: /* @__PURE__ */ jsx27(PrefetchProvider, {
               children: /* @__PURE__ */ jsx27(SequenceManagerProvider, {
+                visualModeEnabled,
                 children: /* @__PURE__ */ jsx27(SharedAudioContextProvider, {
                   numberOfAudioTags,
                   audioLatencyHint,
@@ -28615,6 +28764,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
+var SequenceStackTracesUpdateContext = React27.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -28640,7 +28790,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React27.createContext(null);
+var CurrentScaleContext = React28.createContext(null);
 var PreviewSizeContext = createContext21({
   setSize: () => {
     return;
@@ -28666,7 +28816,7 @@ var calculateScale = ({
 };
 var useSchema = (schema, currentValue) => {
   const env = useRemotionEnvironment();
-  const earlyReturn = useMemo28(() => {
+  const earlyReturn = useMemo29(() => {
     if (!env.isStudio || env.isReadOnlyStudio) {
       return {
         controls: undefined,
@@ -28678,35 +28828,64 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState17(() => String(Math.random()));
-  const { overrides } = useContext32(SequenceControlOverrideContext);
-  return useMemo28(() => {
+  const [overrideId] = useState16(() => String(Math.random()));
+  const {
+    visualModeEnabled,
+    dragOverrides: overrides,
+    codeValues
+  } = useContext31(VisualModeOverridesContext);
+  const controls = useMemo29(() => {
+    if (!visualModeEnabled) {
+      return;
+    }
     if (schema === null || currentValue === null) {
+      return;
+    }
+    return {
+      schema,
+      currentValue,
+      overrideId
+    };
+  }, [schema, currentValue, overrideId, visualModeEnabled]);
+  return useMemo29(() => {
+    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
       return {
         controls: undefined,
         values: currentValue ?? {}
       };
     }
     const overrideValues = overrides[overrideId] ?? {};
-    const merged = { ...currentValue };
-    for (const key of Object.keys(overrideValues)) {
-      if (key in merged) {
-        merged[key] = overrideValues[key];
-      }
+    const propStatus = codeValues[overrideId];
+    const currentValueKeys = Object.keys(currentValue);
+    const keysToUpdate = new Set(currentValueKeys).values();
+    const merged = {};
+    for (const key of keysToUpdate) {
+      const codeValueStatus = propStatus?.[key] ?? null;
+      merged[key] = getEffectiveVisualModeValue({
+        codeValue: codeValueStatus,
+        runtimeValue: currentValue[key],
+        dragOverrideValue: overrideValues[key],
+        defaultValue: schema[key]?.default,
+        shouldResortToDefaultValueIfUndefined: false
+      });
     }
     return {
-      controls: {
-        schema,
-        currentValue,
-        overrideId
-      },
+      controls,
       values: merged
     };
-  }, [schema, currentValue, overrides, overrideId]);
+  }, [
+    controls,
+    currentValue,
+    overrideId,
+    overrides,
+    codeValues,
+    schema,
+    visualModeEnabled
+  ]);
 };
 var useSequenceControlOverride = (key) => {
-  const seqContext = useContext33(SequenceContext);
-  const { overrides } = useContext33(SequenceControlOverrideContext);
+  const seqContext = useContext32(SequenceContext);
+  const { dragOverrides: overrides } = useContext32(VisualModeOverridesContext);
   if (!seqContext) {
     return;
   }
@@ -28743,13 +28922,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo29(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo30(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -28764,7 +28943,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -28804,14 +28983,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo29(() => {
+  const currentTime = useMemo30(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo29(() => {
+  const actualSrc = useMemo30(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -28819,7 +28998,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState18(null);
+  const [imageSrc, setImageSrc] = useState17(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -28892,17 +29071,17 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback14(() => {
+  const onErr = useCallback15(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo29(() => {
+  const className = useMemo30(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback14((img) => {
+  const onImageFrame = useCallback15((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -28925,7 +29104,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect16(() => {
+  useEffect15(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -28948,12 +29127,12 @@ var useEmitVideoFrame = ({
   }, [onVideoFrame, ref]);
 };
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext35(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef19(null);
-  const sharedSource = useMemo30(() => {
+  const sharedSource = useMemo31(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -28962,7 +29141,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React29.useInsertionEffect ?? React29.useLayoutEffect;
+  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -29004,11 +29183,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext35(SequenceContext);
-  const { hidden } = useContext35(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState19(() => String(Math.random()));
+  const [timelineId] = useState18(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -29074,13 +29253,13 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState19(() => playbackLogging({
+  useState18(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
     mountTime
   }));
-  useEffect17(() => {
+  useEffect16(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -29111,7 +29290,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef19(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect17(() => {
+  useEffect16(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -29128,7 +29307,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect17(() => {
+  useEffect16(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -29139,7 +29318,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo30(() => {
+  const actualStyle = useMemo31(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -29179,7 +29358,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback15(() => {
+  const onDuration = useCallback16(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -29320,20 +29499,82 @@ var OffthreadVideo = ({
 };
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+var getNestedValue = (obj, key) => {
+  const parts = key.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== "object")
+      return;
+    current = current[part];
+  }
+  return current;
+};
+var mergeValues = (props2, values, schemaKeys) => {
+  const merged = { ...props2 };
+  for (const key of schemaKeys) {
+    const value = values[key];
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      merged[key] = value;
+      continue;
+    }
+    let current = merged;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] === "object" && current[part] !== null) {
+        current[part] = { ...current[part] };
+      } else {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  return merged;
+};
+var wrapInSchema = (Component, schema) => {
+  const schemaKeys = Object.keys(schema);
+  const Wrapped = forwardRef10((props2, ref) => {
+    const env = useRemotionEnvironment();
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
+      return React32.createElement(Component, {
+        ...props2,
+        controls: null,
+        ref
+      });
+    }
+    const schemaInput = useMemo32(() => {
+      const input = {};
+      for (const key of schemaKeys) {
+        input[key] = getNestedValue(props2, key);
+      }
+      return input;
+    }, schemaKeys.map((key) => getNestedValue(props2, key)));
+    const { controls, values } = useSchema(schema, schemaInput);
+    const mergedProps = mergeValues(props2, values, schemaKeys);
+    return React32.createElement(Component, {
+      ...mergedProps,
+      controls,
+      ref
+    });
+  });
+  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
+};
 function useRemotionContexts() {
-  const compositionManagerCtx = React31.useContext(CompositionManager);
-  const timelineContext = React31.useContext(TimelineContext);
-  const setTimelineContext = React31.useContext(SetTimelineContext);
-  const sequenceContext = React31.useContext(SequenceContext);
-  const nonceContext = React31.useContext(NonceContext);
-  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
-  const preloadContext = React31.useContext(PreloadContext);
-  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
-  const sequenceManagerContext = React31.useContext(SequenceManager);
-  const bufferManagerContext = React31.useContext(BufferingContextReact);
-  const logLevelContext = React31.useContext(LogLevelContext);
-  return useMemo31(() => ({
+  const compositionManagerCtx = React33.useContext(CompositionManager);
+  const timelineContext = React33.useContext(TimelineContext);
+  const setTimelineContext = React33.useContext(SetTimelineContext);
+  const sequenceContext = React33.useContext(SequenceContext);
+  const nonceContext = React33.useContext(NonceContext);
+  const canUseRemotionHooksContext = React33.useContext(CanUseRemotionHooks);
+  const preloadContext = React33.useContext(PreloadContext);
+  const resolveCompositionContext = React33.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React33.useContext(RenderAssetManager);
+  const sequenceManagerContext = React33.useContext(SequenceManager);
+  const bufferManagerContext = React33.useContext(BufferingContextReact);
+  const logLevelContext = React33.useContext(LogLevelContext);
+  return useMemo33(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -29407,6 +29648,7 @@ var Internals = {
   useUnsafeVideoConfig,
   useFrameForVolumeProp,
   useTimelinePosition,
+  useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
   Timeline: exports_timeline_position_state,
@@ -29416,10 +29658,12 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  SequenceControlOverrideContext,
+  VisualModeOverridesContext,
   SequenceManager,
+  SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
   useSchema,
+  wrapInSchema,
   useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
@@ -29467,6 +29711,7 @@ var Internals = {
   REMOTION_STUDIO_CONTAINER_ELEMENT,
   RenderAssetManager,
   persistCurrentFrame,
+  useTimelineContext,
   useTimelineSetFrame,
   isIosSafari,
   WATCH_REMOTION_STATIC_FILES,
@@ -29501,7 +29746,9 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
-  RenderAssetManagerProvider
+  AbsoluteTimeContext,
+  RenderAssetManagerProvider,
+  getEffectiveVisualModeValue
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -29530,9 +29777,9 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React32.Children.toArray(children);
+  const childrenArray = React34.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React32.Fragment) {
+    if (child.type === React34.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -29553,7 +29800,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React35.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -29564,9 +29811,9 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
-  const childrenValue = useMemo32(() => {
+  const childrenValue = useMemo34(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -30099,14 +30346,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef20(null);
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
-  const id = useMemo33(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const id = useMemo35(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -30121,7 +30368,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -30164,7 +30411,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -30288,7 +30535,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -30309,7 +30556,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext37(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -30317,10 +30564,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback16((src, durationInSeconds) => {
+  const onDuration = useCallback17((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback16(() => {}, []);
+  const onVideoFrame = useCallback17(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -30393,7 +30640,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef12(VideoForwardingFunction);
+var Html5Video = forwardRef13(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -30433,8 +30680,8 @@ import { jsx as jsx83 } from "react/jsx-runtime";
 import React52 from "react";
 import { jsx as jsx93 } from "react/jsx-runtime";
 import { jsx as jsx103 } from "react/jsx-runtime";
-import { jsx as jsx112 } from "react/jsx-runtime";
-import * as React34 from "react";
+import { jsx as jsx113 } from "react/jsx-runtime";
+import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React9 from "react";
 import * as React6 from "react";
@@ -30473,13 +30720,13 @@ import * as React252 from "react";
 import * as React26 from "react";
 import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React332 from "react";
-import * as React292 from "react";
+import * as React29 from "react";
 import { useState as useState112 } from "react";
 import * as React272 from "react";
-import * as React28 from "react";
+import * as React282 from "react";
 import * as React322 from "react";
-import * as React312 from "react";
-import * as React30 from "react";
+import * as React31 from "react";
+import * as React302 from "react";
 import { Fragment as Fragment62, jsx as jsx232, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
@@ -30491,7 +30738,7 @@ import * as React36 from "react";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React46 from "react";
 import React39 from "react";
-import * as React37 from "react";
+import * as React372 from "react";
 import * as React38 from "react";
 import { Fragment as Fragment22, jsx as jsx272 } from "react/jsx-runtime";
 import { jsx as jsx282 } from "react/jsx-runtime";
@@ -30534,19 +30781,19 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React5.useState({
+  const [state, setState] = React4.useState({
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo34(() => new EventTarget, []);
-  useEffect19(() => {
+  const eventTarget = useMemo36(() => new EventTarget, []);
+  useEffect18(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -30621,8 +30868,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React5.useState(0);
-  React5.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React4.useState(0);
+  React4.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -30685,8 +30932,8 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
-  useEffect19(() => {
+  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  useEffect18(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -30853,7 +31100,7 @@ var Button = ({
   const [dimensions, setDimensions] = useState22(null);
   const ref = useRef22(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback17((e) => {
+  const onPointerEnter = useCallback18((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -31085,11 +31332,11 @@ var Link = ({
   });
 };
 var PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx112("svg", {
+  return /* @__PURE__ */ jsx113("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx112("path", {
+    children: /* @__PURE__ */ jsx113("path", {
       fill: "currentcolor",
       d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
     })
@@ -34258,7 +34505,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React28.createElement(Target, __assign({}, rest));
+  return React282.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -34269,9 +34516,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React292.forwardRef(function(props, parentRef) {
-  var ref = React292.useRef(null);
-  var _a = React292.useState({
+var RemoveScroll = React29.forwardRef(function(props, parentRef) {
+  var ref = React29.useRef(null);
+  var _a = React29.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -34280,7 +34527,7 @@ var RemoveScroll = React292.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React292.createElement(React292.Fragment, null, enabled && React292.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React292.cloneElement(React292.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React292.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React29.createElement(React29.Fragment, null, enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -34348,7 +34595,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React30.useEffect(function() {
+    React302.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -34453,7 +34700,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React312.useEffect(function() {
+  React31.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -34468,10 +34715,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React312.useMemo(function() {
+  var gap = React31.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -34772,9 +35019,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React34.useState(null);
-  const [valueNode, setValueNode] = React34.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
+  const [trigger, setTrigger] = React342.useState(null);
+  const [valueNode, setValueNode] = React342.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React342.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -34786,9 +35033,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React34.useRef(null);
+  const triggerPointerDownPosRef = React342.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React342.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx232(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -34810,10 +35057,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx232(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx232(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React34.useCallback((option) => {
+        onNativeOptionAdd: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React34.useCallback((option) => {
+        onNativeOptionRemove: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -34841,7 +35088,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -34909,7 +35156,7 @@ var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React34.forwardRef((props, forwardedRef) => {
+var SelectValue = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -34927,7 +35174,7 @@ var SelectValue = React34.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React34.forwardRef((props, forwardedRef) => {
+var SelectIcon = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -34938,9 +35185,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React34.forwardRef((props, forwardedRef) => {
+var SelectContent = React342.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React34.useState();
+  const [fragment, setFragment] = React342.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -34954,7 +35201,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -34974,20 +35221,20 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React34.useState(null);
-  const [viewport, setViewport] = React34.useState(null);
+  const [content, setContent] = React342.useState(null);
+  const [viewport, setViewport] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React34.useState(null);
-  const [selectedItemText, setSelectedItemText] = React34.useState(null);
+  const [selectedItem, setSelectedItem] = React342.useState(null);
+  const [selectedItemText, setSelectedItemText] = React342.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React34.useState(false);
-  const firstValidItemFoundRef = React34.useRef(false);
-  React34.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React342.useState(false);
+  const firstValidItemFoundRef = React342.useRef(false);
+  React342.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React34.useCallback((candidates) => {
+  const focusFirst2 = React342.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -35004,14 +35251,14 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React34.useEffect(() => {
+  const focusSelectedItem = React342.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React342.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event2) => {
@@ -35041,7 +35288,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -35058,7 +35305,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React34.useCallback((node, value, disabled) => {
+  const itemRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -35067,8 +35314,8 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
+  const handleItemLeave = React342.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -35163,18 +35410,18 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React34.useState(null);
-  const [content, setContent] = React34.useState(null);
+  const [contentWrapper, setContentWrapper] = React342.useState(null);
+  const [content, setContent] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React34.useRef(false);
-  const shouldRepositionRef = React34.useRef(true);
+  const shouldExpandOnScrollRef = React342.useRef(false);
+  const shouldRepositionRef = React342.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React34.useCallback(() => {
+  const position = React342.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -35255,12 +35502,12 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React34.useState();
+  const [contentZIndex, setContentZIndex] = React342.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React34.useCallback((node) => {
+  const handleScrollButtonChange = React342.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -35294,7 +35541,7 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -35324,12 +35571,12 @@ var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React34.forwardRef((props, forwardedRef) => {
+var SelectViewport = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React34.useRef(0);
+  const prevScrollTopRef = React342.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment62, { children: [
     /* @__PURE__ */ jsx232("style", {
       dangerouslySetInnerHTML: {
@@ -35378,14 +35625,14 @@ var SelectViewport = React34.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React34.forwardRef((props, forwardedRef) => {
+var SelectGroup = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx232(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx232(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React34.forwardRef((props, forwardedRef) => {
+var SelectLabel = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx232(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -35393,7 +35640,7 @@ var SelectLabel = React34.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React34.forwardRef((props, forwardedRef) => {
+var SelectItem = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -35404,8 +35651,8 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React34.useState(false);
+  const [textValue, setTextValue] = React342.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -35423,7 +35670,7 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React34.useCallback((node) => {
+    onItemTextChange: React342.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx232(Collection.ItemSlot, {
@@ -35472,16 +35719,16 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React34.forwardRef((props, forwardedRef) => {
+var SelectItemText = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React34.useState(null);
+  const [itemTextNode, setItemTextNode] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx232("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx232("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -35494,17 +35741,17 @@ var SelectItemText = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React34.useState(false);
+  const [canScrollUp, setCanScrollUp] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -35532,10 +35779,10 @@ var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React34.useState(false);
+  const [canScrollDown, setCanScrollDown] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -35563,18 +35810,18 @@ var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React34.useRef(null);
+  const autoScrollTimerRef = React342.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React34.useCallback(() => {
+  const clearAutoScrollTimer = React342.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -35603,13 +35850,13 @@ var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx232(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React34.forwardRef((props, forwardedRef) => {
+var SelectArrow = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -35620,12 +35867,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React342.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React34.useRef(null);
+  const ref = React342.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -35641,9 +35888,9 @@ var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React34.useRef("");
-  const timerRef = React34.useRef(0);
-  const handleTypeaheadSearch = React34.useCallback((key) => {
+  const searchRef = React342.useRef("");
+  const timerRef = React342.useRef(0);
+  const handleTypeaheadSearch = React342.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -35653,11 +35900,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React34.useCallback(() => {
+  const resetTypeahead = React342.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -35936,7 +36183,7 @@ function composeRefs2(...refs) {
   };
 }
 function useComposedRefs2(...refs) {
-  return React37.useCallback(composeRefs2(...refs), refs);
+  return React372.useCallback(composeRefs2(...refs), refs);
 }
 function createSlot(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone(ownerName);
@@ -36991,7 +37238,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/prompts/CopyPromptButton.tsx
-import { useCallback as useCallback29, useState as useState39 } from "react";
+import { useCallback as useCallback30, useState as useState38 } from "react";
 
 // src/components/prompts/ClipboardIcon.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -37011,8 +37258,8 @@ var ClipboardIcon = ({ size: size4 = 16, color = "currentColor" }) => {
 // src/components/prompts/CopyPromptButton.tsx
 import { jsx as jsx39, jsxs as jsxs6 } from "react/jsx-runtime";
 var CopyPromptButton = ({ prompt }) => {
-  const [copied, setCopied] = useState39(false);
-  const onCopy = useCallback29(() => {
+  const [copied, setCopied] = useState38(false);
+  const onCopy = useCallback30(() => {
     navigator.clipboard.writeText(prompt);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
@@ -37041,7 +37288,7 @@ var CopyPromptButton = ({ prompt }) => {
 };
 
 // src/components/prompts/LikeButton.tsx
-import { useCallback as useCallback31, useEffect as useEffect40, useState as useState41 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect39, useState as useState40 } from "react";
 
 // src/components/prompts/config.ts
 var REMOTION_PRO_ORIGIN = "https://www.remotion.pro";
@@ -37118,13 +37365,13 @@ var getRelativeTime = (dateStr) => {
 };
 
 // src/components/prompts/use-heart-animation.ts
-import { useCallback as useCallback30, useRef as useRef38, useState as useState40 } from "react";
+import { useCallback as useCallback31, useRef as useRef38, useState as useState39 } from "react";
 var DURATION = 300;
 var useHeartAnimation = () => {
-  const [scale, setScale] = useState40(1);
-  const [roundness, setRoundness] = useState40(0.09);
+  const [scale, setScale] = useState39(1);
+  const [roundness, setRoundness] = useState39(0.09);
   const rafRef = useRef38(0);
-  const animate = useCallback30(() => {
+  const animate = useCallback31(() => {
     cancelAnimationFrame(rafRef.current);
     const start = performance.now();
     const tick = (now) => {
@@ -37149,13 +37396,13 @@ var useHeartAnimation = () => {
 // src/components/prompts/LikeButton.tsx
 import { jsx as jsx40, jsxs as jsxs8 } from "react/jsx-runtime";
 var LikeButton = ({ submissionId, initialLikeCount }) => {
-  const [liked, setLiked] = useState41(false);
-  const [likeCount, setLikeCount] = useState41(initialLikeCount);
+  const [liked, setLiked] = useState40(false);
+  const [likeCount, setLikeCount] = useState40(initialLikeCount);
   const { scale, roundness, animate } = useHeartAnimation();
-  useEffect40(() => {
+  useEffect39(() => {
     setLiked(getLikedIds().has(submissionId));
   }, [submissionId]);
-  const onClick = useCallback31(async () => {
+  const onClick = useCallback32(async () => {
     if (liked) {
       setLiked(false);
       setLikeCount((c) => c - 1);
@@ -37228,80 +37475,80 @@ function useMediaContext2() {
 var AirPlayButtonBridge = createReactComponent(AirPlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(AirPlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 AirPlayButton2.displayName = "AirPlayButton";
 var PlayButtonBridge = createReactComponent(PlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(PlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 PlayButton2.displayName = "PlayButton";
 var CaptionButtonBridge = createReactComponent(CaptionButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(CaptionButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 CaptionButton2.displayName = "CaptionButton";
 var FullscreenButtonBridge = createReactComponent(FullscreenButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(FullscreenButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 FullscreenButton2.displayName = "FullscreenButton";
 var MuteButtonBridge = createReactComponent(MuteButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(MuteButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 MuteButton2.displayName = "MuteButton";
 var PIPButtonBridge = createReactComponent(PIPButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(PIPButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 PIPButton2.displayName = "PIPButton";
 var SeekButtonBridge = createReactComponent(SeekButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(SeekButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 SeekButton2.displayName = "SeekButton";
 var LiveButtonBridge = createReactComponent(LiveButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(LiveButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 LiveButton2.displayName = "LiveButton";
@@ -37316,42 +37563,42 @@ var SliderValueBridge = createReactComponent(SliderValueInstance);
 var SliderBridge = createReactComponent(SliderInstance, {
   events: sliderCallbacks
 });
-var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$5.displayName = "Slider";
-var Thumb = React56.forwardRef((props, forwardRef14) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }));
+var Thumb = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
 Thumb.displayName = "SliderThumb";
-var Track = React56.forwardRef((props, forwardRef14) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }));
+var Track = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
 Track.displayName = "SliderTrack";
-var TrackFill = React56.forwardRef((props, forwardRef14) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }));
+var TrackFill = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
 TrackFill.displayName = "SliderTrackFill";
 var PreviewBridge = createReactComponent(SliderPreviewInstance);
-var Preview = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Preview = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(PreviewBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Preview.displayName = "SliderPreview";
-var Value2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Value2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(SliderValueBridge, { ...props }, (props2, instance) => {
     const $text = useSignal(() => instance.getValueText(), instance);
-    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef14 }, $text, children);
+    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef15 }, $text, children);
   });
 });
 Value2.displayName = "SliderValue";
-var Steps = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Steps = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   const $min = useSliderState("min"), $max = useSliderState("max"), $step = useSliderState("step"), steps = ($max - $min) / $step;
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }, Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step)));
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step)));
 });
 Steps.displayName = "SliderSteps";
 var VolumeSliderBridge = createReactComponent(VolumeSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$4 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$4 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$4.displayName = "VolumeSlider";
 function createVTTCue(startTime = 0, endTime = 0, text = "") {
@@ -37375,20 +37622,20 @@ function appendParamsToURL2(baseUrl, params) {
   return url.toString();
 }
 var ThumbnailBridge = createReactComponent(ThumbnailInstance);
-var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(ThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Root$3.displayName = "Thumbnail";
-var Img2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Img2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   const { src, img, crossOrigin } = useStateContext(ThumbnailInstance.state), $src = useSignal(src), $crossOrigin = useSignal(crossOrigin);
   return /* @__PURE__ */ React56.createElement(Primitive3.img, {
     crossOrigin: $crossOrigin,
     ...props,
     src: $src || undefined,
-    ref: composeRefs3(img.set, forwardRef14)
+    ref: composeRefs3(img.set, forwardRef15)
   }, children);
 });
 Img2.displayName = "ThumbnailImg";
@@ -37400,16 +37647,16 @@ var TimeSliderBridge = createReactComponent(TimeSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   const $chapters = React56.useMemo(() => signal(null), []);
-  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
+  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
 });
 Root$2.displayName = "TimeSlider";
 var SliderChaptersBridge = createReactComponent(SliderChaptersInstance);
-var Chapters = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Chapters = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(SliderChaptersBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, /* @__PURE__ */ React56.createElement(ChapterTracks, { instance }, children)));
 });
 Chapters.displayName = "SliderChapters";
@@ -37434,7 +37681,7 @@ function ChapterTracks({ instance, children }) {
   });
 }
 ChapterTracks.displayName = "SliderChapterTracks";
-var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   const { $chapters } = React56.useContext(TimeSliderContext), [title, setTitle] = React56.useState();
   React56.useEffect(() => {
     return effect(() => {
@@ -37442,14 +37689,14 @@ var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef14) =>
       setTitle(cue?.text || "");
     });
   }, []);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }, title, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, title, children);
 });
 ChapterTitle.displayName = "SliderChapterTitle";
-var Progress = React56.forwardRef((props, forwardRef14) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }));
+var Progress = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
 Progress.displayName = "SliderProgress";
 var SliderThumbnailBridge = createReactComponent(SliderThumbnailInstance);
-var ThumbnailRoot = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(SliderThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: composeRefs3(props2.ref, forwardRef14) }, children));
+var ThumbnailRoot = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(SliderThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: composeRefs3(props2.ref, forwardRef15) }, children));
 });
 ThumbnailRoot.displayName = "SliderThumbnail";
 var Thumbnail2 = {
@@ -37459,15 +37706,15 @@ var Thumbnail2 = {
 var VideoBridge = createReactComponent(SliderVideoInstance, {
   events: ["onCanPlay", "onError"]
 });
-var Video = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Video = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(VideoBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(VideoProvider2, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Video.displayName = "SliderVideo";
-var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef14) => {
+var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef15) => {
   const { canLoad } = useStateContext(mediaState), { src, video, crossOrigin } = instance.$state, $src = useSignal(src), $canLoad = useSignal(canLoad), $crossOrigin = useSignal(crossOrigin);
   return /* @__PURE__ */ React56.createElement(Primitive3.video, {
     style: { maxWidth: "unset" },
@@ -37477,24 +37724,24 @@ var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwa
     playsInline: true,
     preload: $canLoad ? "auto" : "none",
     crossOrigin: $crossOrigin || undefined,
-    ref: composeRefs3(video.set, forwardRef14)
+    ref: composeRefs3(video.set, forwardRef15)
   }, children);
 });
 VideoProvider2.displayName = "SliderVideoProvider";
 var RadioGroupBridge = createReactComponent(RadioGroupInstance, {
   events: ["onChange"]
 });
-var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$1.displayName = "RadioGroup";
 var ItemBridge$1 = createReactComponent(RadioInstance, {
   events: ["onChange", "onSelect"]
 });
-var Item$1 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Item$1 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge$1, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Item$1.displayName = "RadioItem";
@@ -37502,8 +37749,8 @@ var MenuBridge = createReactComponent(MenuInstance, {
   events: ["onOpen", "onClose"],
   domEventsRegex: /^onMedia/
 });
-var Root4 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef14 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
+var Root4 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef15 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
     style: { display: !instance.isSubmenu ? "contents" : undefined, ...props2.style }
   }, children));
@@ -37512,14 +37759,14 @@ Root4.displayName = "Menu";
 var ButtonBridge = createReactComponent(MenuButtonInstance, {
   events: ["onSelect"]
 });
-var Button2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Button2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(ButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Button2.displayName = "MenuButton";
-var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef14) => {
+var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef15) => {
   let fullscreen = useMediaState("fullscreen"), shouldPortal = disabled === "fullscreen" ? !fullscreen : !disabled;
   const target = React56.useMemo(() => {
     if (IS_SERVER3)
@@ -37530,45 +37777,45 @@ var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = fal
   return !target || !shouldPortal ? children : createPortal3(/* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props,
     style: { display: "contents", ...props.style },
-    ref: forwardRef14
+    ref: forwardRef15
   }, children), target);
 });
 Portal3.displayName = "MenuPortal";
 var ItemsBridge = createReactComponent(MenuItemsInstance);
-var Items = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Items = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(ItemsBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Items.displayName = "MenuItems";
 var ItemBridge = createReactComponent(MenuItemInstance);
-var Item3 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Item3 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Item3.displayName = "MenuItem";
 var GestureBridge = createReactComponent(GestureInstance, {
   events: ["onWillTrigger", "onTrigger"]
 });
-var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Gesture2.displayName = "Gesture";
 var TimeBridge = createReactComponent(TimeInstance);
-var Time2 = React56.forwardRef(({ children, ...props }, forwardRef14) => {
+var Time2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React56.createElement(TimeBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(TimeText, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Time2.displayName = "Time";
-var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef14) => {
+var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef15) => {
   const { timeText } = instance.$state, $timeText = useSignal(timeText);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef14 }, $timeText, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, $timeText, children);
 });
 TimeText.displayName = "TimeText";
 function useMediaPlayer() {
@@ -37672,27 +37919,27 @@ function getTrackValue(track) {
 var MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
   events: ["onChange"]
 });
-var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef14) => {
+var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
     style: { display: "contents", ...style },
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 MediaAnnouncer2.displayName = "MediaAnnouncer";
 var ControlsBridge = createReactComponent(ControlsInstance);
-var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Root$52.displayName = "Controls";
 var ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
-var Group = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var Group = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Group.displayName = "ControlsGroup";
@@ -37702,28 +37949,28 @@ function Root$42({ children, ...props }) {
 }
 Root$42.displayName = "Tooltip";
 var TriggerBridge = createReactComponent(TooltipTriggerInstance);
-var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Trigger3.displayName = "TooltipTrigger";
 var ContentBridge = createReactComponent(TooltipContentInstance);
-var Content4 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var Content4 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Content4.displayName = "TooltipContent";
 var GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 GoogleCastButton2.displayName = "GoogleCastButton";
@@ -37731,29 +37978,29 @@ var QualitySliderBridge = createReactComponent(QualitySliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$32.displayName = "QualitySlider";
 var AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$22 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$22 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$22.displayName = "AudioGainSlider";
 var SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$12 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$12 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$12.displayName = "SpeedSlider";
-var Title = React57.forwardRef(({ children, ...props }, forwardRef14) => {
+var Title = React57.forwardRef(({ children, ...props }, forwardRef15) => {
   const $title = useMediaState("title");
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef14 }, $title, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef15 }, $title, children);
 });
 Title.displayName = "Title";
 function useActiveTextCues(track) {
@@ -37783,17 +38030,17 @@ function useChapterTitle() {
   const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
   return $cues[0]?.text || "";
 }
-var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef14) => {
+var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef15) => {
   const $chapterTitle = useChapterTitle();
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef14 }, $chapterTitle || defaultText, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef15 }, $chapterTitle || defaultText, children);
 });
 ChapterTitle2.displayName = "ChapterTitle";
 var CaptionsBridge = createReactComponent(CaptionsInstance);
-var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef14) => {
-  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef14 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Captions2.displayName = "Captions";
-var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef14) => {
+var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React57.createElement("svg", {
     width: size5,
     height: size5,
@@ -37802,7 +38049,7 @@ var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwar
     "aria-hidden": "true",
     "data-part": "root",
     ...props,
-    ref: forwardRef14
+    ref: forwardRef15
   }, children);
 });
 var Track2 = React57.forwardRef(({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React57.createElement("circle", {
@@ -38079,7 +38326,7 @@ class AudioGainRadioGroup extends Component {
   onSetup() {
     this.#media = useMediaContext();
     if (hasProvidedContext(menuContext)) {
-      this.#menu = useContext45(menuContext);
+      this.#menu = useContext44(menuContext);
     }
   }
   onConnect(el) {
@@ -38185,11 +38432,11 @@ var MediaPlayerBridge = createReactComponent(MediaPlayerInstance, {
   eventsRegex: /^onHls/,
   domEventsRegex: /^onMedia/
 });
-var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef14) => {
+var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React59.createElement(MediaPlayerBridge, {
     ...props,
     src: props.src,
-    ref: forwardRef14,
+    ref: forwardRef15,
     style: {
       aspectRatio,
       ...props.style
@@ -38198,9 +38445,9 @@ var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forw
 });
 MediaPlayer2.displayName = "MediaPlayer";
 var MediaProviderBridge = createReactComponent(MediaProviderInstance);
-var MediaProvider2 = React59.forwardRef(({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef14) => {
+var MediaProvider2 = React59.forwardRef(({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef15) => {
   const reactLoaders = React59.useMemo(() => loaders.map((Loader) => new Loader), loaders);
-  return /* @__PURE__ */ React59.createElement(MediaProviderBridge, { ...props, loaders: reactLoaders, ref: forwardRef14 }, (props2, instance) => /* @__PURE__ */ React59.createElement("div", { ...props2 }, /* @__PURE__ */ React59.createElement(MediaOutlet, { provider: instance, mediaProps, iframeProps }), children));
+  return /* @__PURE__ */ React59.createElement(MediaProviderBridge, { ...props, loaders: reactLoaders, ref: forwardRef15 }, (props2, instance) => /* @__PURE__ */ React59.createElement("div", { ...props2 }, /* @__PURE__ */ React59.createElement(MediaOutlet, { provider: instance, mediaProps, iframeProps }), children));
 });
 MediaProvider2.displayName = "MediaProvider";
 function MediaOutlet({ provider: provider2, mediaProps, iframeProps }) {
@@ -38270,48 +38517,48 @@ function Track3({ lang, ...props }) {
 }
 Track3.displayName = "Track";
 var ToggleButtonBridge = createReactComponent(ToggleButtonInstance);
-var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef14) => {
+var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React59.createElement(ToggleButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React59.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 ToggleButton2.displayName = "ToggleButton";
 var PosterBridge = createReactComponent(PosterInstance);
-var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef14) => {
+var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React59.createElement(PosterBridge, {
     src: props.asChild && React59.isValidElement(children) ? children.props.src : undefined,
     ...props
   }, (props2, instance) => /* @__PURE__ */ React59.createElement(PosterImg, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef14)
+    ref: composeRefs3(props2.ref, forwardRef15)
   }, children));
 });
 Poster2.displayName = "Poster";
-var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef14) => {
+var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef15) => {
   const { src, img, alt, crossOrigin, hidden } = instance.$state, $src = useSignal(src), $alt = useSignal(alt), $crossOrigin = useSignal(crossOrigin), $hidden = useSignal(hidden);
   return /* @__PURE__ */ React59.createElement(Primitive3.img, {
     ...props,
     src: $src || undefined,
     alt: $alt || undefined,
     crossOrigin: $crossOrigin || undefined,
-    ref: composeRefs3(img.set, forwardRef14),
+    ref: composeRefs3(img.set, forwardRef15),
     style: { display: $hidden ? "none" : undefined }
   }, children);
 });
 PosterImg.displayName = "PosterImg";
-var Root7 = React59.forwardRef(({ children, ...props }, forwardRef14) => {
+var Root7 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
   return /* @__PURE__ */ React59.createElement(Primitive3.div, {
     translate: "yes",
     "aria-live": "off",
     "aria-atomic": "true",
     ...props,
-    ref: forwardRef14
+    ref: forwardRef15
   }, children);
 });
 Root7.displayName = "Caption";
-var Text = React59.forwardRef((props, forwardRef14) => {
+var Text = React59.forwardRef((props, forwardRef15) => {
   const textTrack = useMediaState("textTrack"), [activeCue, setActiveCue] = React59.useState();
   React59.useEffect(() => {
     if (!textTrack)
@@ -38331,7 +38578,7 @@ var Text = React59.forwardRef((props, forwardRef14) => {
     dangerouslySetInnerHTML: {
       __html: activeCue?.text || ""
     },
-    ref: forwardRef14
+    ref: forwardRef15
   });
 });
 Text.displayName = "CaptionText";
@@ -38481,7 +38728,7 @@ function createDefaultMediaLayout({
     thumbnails = null,
     translations,
     ...props
-  }, forwardRef14) => {
+  }, forwardRef15) => {
     const media = useMediaContext2(), $load = useSignal(media.$props.load), $canLoad = useMediaState("canLoad"), $viewType = useMediaState("viewType"), $streamType = useMediaState("streamType"), $smallWhen = createComputed(() => {
       return isBoolean(smallLayoutWhen) ? smallLayoutWhen : smallLayoutWhen(media.player.state);
     }, [smallLayoutWhen]), userPrefersAnnouncements = createSignal(true), userPrefersKeyboardAnimations = createSignal(true), isMatch = $viewType === type, isSmallLayout = $smallWhen(), isForcedLayout = isBoolean(smallLayoutWhen), isLoadLayout = $load === "play" && !$canLoad, canRender = $canLoad || isForcedLayout || isLoadLayout, colorSchemeClass = useColorSchemeClass(colorScheme), layoutEl = createSignal(null);
@@ -38494,7 +38741,7 @@ function createDefaultMediaLayout({
       "data-lg": !isSmallLayout ? "" : null,
       "data-size": isSmallLayout ? "sm" : "lg",
       "data-no-scrub-gesture": noScrubGesture ? "" : null,
-      ref: composeRefs3(layoutEl.set, forwardRef14)
+      ref: composeRefs3(layoutEl.set, forwardRef15)
     }, canRender && isMatch ? /* @__PURE__ */ React61.createElement(DefaultLayoutContext.Provider, {
       value: {
         disableTimeSlider,
@@ -38555,9 +38802,9 @@ function DefaultPlayButton({ tooltip }) {
   return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $paused ? playText : pauseText, placement: tooltip }, /* @__PURE__ */ React61.createElement(PlayButton2, { className: "vds-play-button vds-button", "aria-label": playText }, $ended ? /* @__PURE__ */ React61.createElement(Icons.PlayButton.Replay, { className: "vds-icon" }) : $paused ? /* @__PURE__ */ React61.createElement(Icons.PlayButton.Play, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.PlayButton.Pause, { className: "vds-icon" })));
 }
 DefaultPlayButton.displayName = "DefaultPlayButton";
-var DefaultMuteButton = React61.forwardRef(({ tooltip }, forwardRef14) => {
+var DefaultMuteButton = React61.forwardRef(({ tooltip }, forwardRef15) => {
   const { icons: Icons } = useDefaultLayoutContext(), muteText = useDefaultLayoutWord("Mute"), unmuteText = useDefaultLayoutWord("Unmute"), $muted = useMediaState("muted"), $volume = useMediaState("volume");
-  return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React61.createElement(MuteButton2, { className: "vds-mute-button vds-button", "aria-label": muteText, ref: forwardRef14 }, $muted || $volume == 0 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : $volume < 0.5 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
+  return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React61.createElement(MuteButton2, { className: "vds-mute-button vds-button", "aria-label": muteText, ref: forwardRef15 }, $muted || $volume == 0 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : $volume < 0.5 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
 });
 DefaultMuteButton.displayName = "DefaultMuteButton";
 function DefaultCaptionButton({ tooltip }) {
@@ -39333,7 +39580,7 @@ function DefaultTimeSlider() {
   }, /* @__PURE__ */ React61.createElement(Chapters, {
     className: "vds-slider-chapters",
     disabled: width < sliderChaptersMinWidth
-  }, (cues, forwardRef14) => cues.map((cue) => /* @__PURE__ */ React61.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef14 }, /* @__PURE__ */ React61.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React61.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React61.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React61.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React61.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React61.createElement(Thumbnail2.Root, {
+  }, (cues, forwardRef15) => cues.map((cue) => /* @__PURE__ */ React61.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef15 }, /* @__PURE__ */ React61.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React61.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React61.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React61.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React61.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React61.createElement(Thumbnail2.Root, {
     src: thumbnails,
     className: "vds-slider-thumbnail vds-thumbnail"
   }, /* @__PURE__ */ React61.createElement(Thumbnail2.Img, null)) : $RemotionSliderThumbnail && isRemotionSrc($src) ? /* @__PURE__ */ React61.createElement($RemotionSliderThumbnail, { className: "vds-slider-thumbnail vds-thumbnail" }) : null, /* @__PURE__ */ React61.createElement(ChapterTitle, { className: "vds-slider-chapter-title" }), /* @__PURE__ */ React61.createElement(Value2, { className: "vds-slider-value" })));
@@ -39437,7 +39684,7 @@ function AudioTitle({ title, chapterTitle }) {
   return /* @__PURE__ */ React61.createElement("span", { className: "vds-title-text" }, slot(slots, "title", title), slot(slots, "chapterTitle", /* @__PURE__ */ React61.createElement("span", { className: "vds-chapter-title" }, chapterTitle)));
 }
 AudioTitle.displayName = "AudioTitle";
-var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, forwardRef14) => {
+var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, forwardRef15) => {
   const [visible, setVisible] = React61.useState(false), [Icon4, setIcon] = React61.useState(null), [count4, setCount] = React61.useState(0), $lastKeyboardAction = useMediaState("lastKeyboardAction");
   React61.useEffect(() => {
     setCount((n2) => n2 + 1);
@@ -39464,12 +39711,12 @@ var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, for
     ...props,
     className,
     "data-action": actionDataAttr,
-    ref: forwardRef14
+    ref: forwardRef15
   }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-text-wrapper" }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-text" }, $text)), /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-bezel", key: count4 }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-icon" }, /* @__PURE__ */ React61.createElement(Icon4, null)))) : null;
 });
 DefaultKeyboardDisplay.displayName = "DefaultKeyboardDisplay";
 function getText() {
-  const { $state } = useContext45(mediaContext), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
+  const { $state } = useContext44(mediaContext), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
   switch (action) {
     case "toggleMuted":
       return $state.muted() ? "0%" : getVolumeText($state.volume(), audioGain);
@@ -39484,7 +39731,7 @@ function getVolumeText(volume, gain) {
   return `${Math.round(volume * gain * 100)}%`;
 }
 function getIcon(Icons) {
-  const { $state } = useContext45(mediaContext), action = $state.lastKeyboardAction()?.action;
+  const { $state } = useContext44(mediaContext), action = $state.lastKeyboardAction()?.action;
   switch (action) {
     case "togglePaused":
       return !$state.paused() ? Icons.Play : Icons.Pause;
@@ -39676,10 +39923,10 @@ import"react-dom";
 "use client";
 
 // src/components/prompts/MuxPlayer.tsx
-import { useCallback as useCallback33 } from "react";
+import { useCallback as useCallback34 } from "react";
 import { jsx as jsx41, jsxs as jsxs9 } from "react/jsx-runtime";
 var MuxPlayer = ({ playbackId, title, rounded = true }) => {
-  const onProviderChange = useCallback33((provider2, _e) => {
+  const onProviderChange = useCallback34((provider2, _e) => {
     if (isHLSProvider(provider2)) {
       provider2.library = () => import("hls.js");
     }