@remotion/promo-pages 4.0.458 → 4.0.460

package/dist/prompts/PromptsSubmit.js

@@ -45,7 +45,7 @@ __export(exports_vidstack_CZgUA94N, {
   useSignal: () => useSignal,
   useReactScope: () => useReactScope,
   useReactContext: () => useReactContext,
-  useContext: () => useContext45,
+  useContext: () => useContext44,
   uppercaseFirstChar: () => uppercaseFirstChar,
   untrack: () => untrack,
   toggleClass: () => toggleClass,
@@ -92,7 +92,7 @@ __export(exports_vidstack_CZgUA94N, {
   createScope: () => createScope,
   createReactComponent: () => createReactComponent,
   createDisposalBin: () => createDisposalBin,
-  createContext: () => createContext32,
+  createContext: () => createContext33,
   computed: () => computed,
   composeRefs: () => composeRefs3,
   chromecast: () => chromecast,
@@ -612,14 +612,14 @@ function unwrapDeep(fn) {
     value = value.call(this);
   return value;
 }
-function createContext32(provide) {
+function createContext33(provide) {
   return { id: Symbol(), provide };
 }
 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;
 }
@@ -679,7 +679,7 @@ class State {
   }
 }
 function useState41(state) {
-  return useContext45(state);
+  return useContext44(state);
 }
 function camelToKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -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 {
@@ -10487,7 +10487,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     "started",
     "userBehindLiveEdge"
   ]);
-  mediaContext = createContext32();
+  mediaContext = createContext33();
   ADD = Symbol(0);
   REMOVE = Symbol(0);
   RESET = Symbol(0);
@@ -13889,7 +13889,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       this.#showTimerId = -1;
     }
   };
-  tooltipContext = createContext32();
+  tooltipContext = createContext33();
   Tooltip = class Tooltip extends Component {
     static props = {
       showDelay: 700
@@ -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 {
@@ -14514,8 +14514,8 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       this.#observer = undefined;
     }
   };
-  sliderContext = createContext32();
-  sliderObserverContext = createContext32();
+  sliderContext = createContext33();
+  sliderObserverContext = createContext33();
   SliderKeyDirection = {
     Left: -1,
     ArrowLeft: -1,
@@ -14537,7 +14537,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       if (hasProvidedContext(sliderObserverContext)) {
-        this.#observer = useContext45(sliderObserverContext);
+        this.#observer = useContext44(sliderObserverContext);
       }
     }
     onConnect(el) {
@@ -14746,7 +14746,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       this.#updatePointerValue(this.#getPointerValue(event2), event2);
     }, 20, { leading: true });
   };
-  sliderValueFormatContext = createContext32(() => ({}));
+  sliderValueFormatContext = createContext33(() => ({}));
   SliderController = class SliderController extends ViewController {
     static props = {
       hidden: false,
@@ -15153,7 +15153,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     #slider;
     onSetup() {
       this.#slider = useState41(Slider.state);
-      this.#format = useContext45(sliderValueFormatContext);
+      this.#format = useContext44(sliderValueFormatContext);
       this.#text = computed(this.getValueText.bind(this));
     }
     getValueText() {
@@ -15192,7 +15192,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     };
     #slider;
     onSetup() {
-      this.#slider = useContext45(sliderContext);
+      this.#slider = useContext44(sliderContext);
       const { active } = useState41(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) {
@@ -15974,7 +15974,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
   prop(sliderchapters__proto, "activeCue");
   prop(sliderchapters__proto, "activePointerCue");
   method(sliderchapters__proto, "setRefs");
-  menuContext = createContext32();
+  menuContext = createContext33();
   FOCUSABLE_ELEMENTS_SELECTOR = /* @__PURE__ */ [
     "a[href]",
     "[tabindex]",
@@ -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);
@@ -16529,7 +16529,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       return selector ? document.querySelector(selector) : document.body;
     }
   };
-  menuPortalContext = createContext32();
+  menuPortalContext = createContext33();
   MenuItems = class MenuItems extends Component {
     static props = {
       placement: null,
@@ -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);
@@ -16591,7 +16591,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       return this.#menu.button();
     }
   };
-  radioControllerContext = createContext32();
+  radioControllerContext = createContext33();
   RadioGroupController = class RadioGroupController extends ViewController {
     #group = /* @__PURE__ */ new Set;
     #value = signal("");
@@ -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() {
@@ -18712,7 +18712,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo38, useState as useState23 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo38, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -23107,6 +23107,7 @@ import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
 import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
+import { createContext as createContext15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -23120,7 +23121,7 @@ import React15, { useCallback as useCallback6, useImperativeHandle, useRef as us
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
-  createContext as createContext15,
+  createContext as createContext16,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
   useContext as useContext17,
@@ -23132,7 +23133,7 @@ import {
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
-  createContext as createContext16,
+  createContext as createContext17,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
@@ -23142,17 +23143,17 @@ import {
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React17, { createContext as createContext17, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
-import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
+import { createContext as createContext19, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
   useContext as useContext28,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
   useRef as useRef18,
@@ -23160,7 +23161,7 @@ import React23, {
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
-  createContext as createContext20,
+  createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
   useContext as useContext20,
@@ -23168,15 +23169,15 @@ import React20, {
   useRef as useRef11,
   useState as useState12
 } from "react";
-import { useEffect as useEffect8, useMemo as useMemo21 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect9, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
 import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
   useContext as useContext26,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
@@ -23185,7 +23186,7 @@ import { useContext as useContext25, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo24,
   useRef as useRef14,
@@ -23193,15 +23194,15 @@ import React21, {
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
-import { useEffect as useEffect11, useState as useState15 } from "react";
-import { useEffect as useEffect12, useRef as useRef16 } from "react";
-import { useEffect as useEffect14 } from "react";
-import { createContext as createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
+import { useEffect as useEffect10, useState as useState15 } from "react";
+import { useEffect as useEffect11, useRef as useRef16 } from "react";
+import { useEffect as useEffect13 } from "react";
+import { createContext as createContext22, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
   useContext as useContext29,
-  useEffect as useEffect16,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
@@ -23232,17 +23233,16 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo322 } from "react";
-import { createContext as createContext22, useContext as useContext32, useMemo as useMemo31 } from "react";
+import { createContext as createContext23, useContext as useContext32, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
-import React32, { createContext as createContext23 } from "react";
-import { useContext as useContext33 } from "react";
+import React32, { createContext as createContext24 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext34,
-  useEffect as useEffect17,
+  useContext as useContext33,
+  useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useState as useState20
@@ -23250,29 +23250,29 @@ import {
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext35,
-  useEffect as useEffect19,
+  useContext as useContext34,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
   useRef as useRef22,
   useState as useState21
 } from "react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import React36, { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
 import React37 from "react";
-import React38, { createContext as createContext24 } from "react";
+import React38, { createContext as createContext25 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext36,
-  useEffect as useEffect20,
+  useContext as useContext35,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo37,
@@ -24809,7 +24809,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.458";
+var VERSION = "4.0.460";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -25028,6 +25028,9 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var nodePathToString = (nodePath) => {
+  return nodePath.join(".");
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -25043,19 +25046,48 @@ var SequenceVisibilityToggleContext = React12.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React12.createContext({
-  dragOverrides: {},
+var getCodeValues = (codeValues, nodePath) => {
+  const status = codeValues[nodePathToString(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var getIsJsxInMapCallback = (codeValues, nodePath) => {
+  const status = codeValues[nodePathToString(nodePath)];
+  if (!status) {
+    return false;
+  }
+  if (!status.canUpdate) {
+    return false;
+  }
+  return status.jsxInMapCallback;
+};
+var VisualModeGettersContext = React12.createContext({
+  getDragOverrides: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  getCodeValues: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  getIsJsxInMapCallback: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  visualModeEnabled: false
+});
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
   clearDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
-  codeValues: {},
   setCodeValues: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
-  },
-  visualModeEnabled: false
+    throw new Error("VisualModeSettersContext not initialized");
+  }
 });
 var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const [sequences, setSequences] = useState4([]);
@@ -25064,39 +25096,33 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const controlOverridesRef = useRef6(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState4({});
-  const setDragOverrides = useCallback5((sequenceId, key, value) => {
+  const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
-      [sequenceId]: {
-        ...prev[sequenceId],
+      [nodePathToString(nodePath)]: {
+        ...prev[nodePathToString(nodePath)],
         [key]: value
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback5((sequenceId) => {
+  const clearDragOverrides = useCallback5((nodePath) => {
     setControlOverrides((prev) => {
-      if (!prev[sequenceId]) {
+      const key = nodePathToString(nodePath);
+      if (!prev[key]) {
         return prev;
       }
       const next = { ...prev };
-      delete next[sequenceId];
+      delete next[key];
       return next;
     });
   }, []);
-  const setCodeValues = useCallback5((sequenceId, values) => {
+  const setCodeValues = useCallback5((nodePath, values) => {
     setCodeValuesMapState((prev) => {
-      if (prev[sequenceId] === values) {
+      const key = nodePathToString(nodePath);
+      if (prev[key] === values) {
         return prev;
       }
-      if (values === null) {
-        if (!(sequenceId in prev)) {
-          return prev;
-        }
-        const next = { ...prev };
-        delete next[sequenceId];
-        return next;
-      }
-      return { ...prev, [sequenceId]: values };
+      return { ...prev, [key]: values };
     });
   }, []);
   const registerSequence = useCallback5((seq) => {
@@ -25120,30 +25146,31 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo14(() => {
+  const gettersContext = useMemo14(() => {
     return {
       visualModeEnabled,
-      dragOverrides,
+      getDragOverrides: (nodePath) => dragOverrides[nodePathToString(nodePath)] ?? {},
+      getCodeValues: (nodePath) => getCodeValues(codeValues, nodePath),
+      getIsJsxInMapCallback: (nodePath) => getIsJsxInMapCallback(codeValues, nodePath)
+    };
+  }, [visualModeEnabled, dragOverrides, codeValues]);
+  const settersContext = useMemo14(() => {
+    return {
       setDragOverrides,
       clearDragOverrides,
-      codeValues,
       setCodeValues
     };
-  }, [
-    visualModeEnabled,
-    dragOverrides,
-    setDragOverrides,
-    clearDragOverrides,
-    codeValues,
-    setCodeValues
-  ]);
+  }, [setDragOverrides, clearDragOverrides, setCodeValues]);
   return /* @__PURE__ */ jsx112(SequenceManager.Provider, {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx112(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx112(VisualModeOverridesContext.Provider, {
-        value: overrideContext,
-        children
+      children: /* @__PURE__ */ jsx112(VisualModeGettersContext.Provider, {
+        value: gettersContext,
+        children: /* @__PURE__ */ jsx112(VisualModeSettersContext.Provider, {
+          value: settersContext,
+          children
+        })
       })
     })
   });
@@ -25188,6 +25215,14 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var OverrideIdsToNodePathsGettersContext = createContext15({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext15({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
 var getEffectiveVisualModeValue = ({
   codeValue,
   runtimeValue,
@@ -25292,6 +25327,7 @@ var mergeValues = ({
   }
   return merged;
 };
+var stackToOverrideMap = {};
 var wrapInSchema = (Component, schema) => {
   if (typeof process === "undefined" || !process.env?.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
     return Component;
@@ -25300,7 +25336,8 @@ var wrapInSchema = (Component, schema) => {
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    const { visualModeEnabled, dragOverrides, codeValues } = useContext15(VisualModeOverridesContext);
+    const { visualModeEnabled, getDragOverrides, getCodeValues: getCodeValues2 } = useContext15(VisualModeGettersContext);
+    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
       return React13.createElement(Component, {
         ...props,
@@ -25314,7 +25351,20 @@ var wrapInSchema = (Component, schema) => {
         ref
       });
     }
-    const [overrideId] = useState5(() => String(Math.random()));
+    const [overrideId] = useState5(() => {
+      const { stack } = props;
+      if (!stack) {
+        return String(Math.random());
+      }
+      const existingOverrideId = stackToOverrideMap[stack];
+      if (existingOverrideId) {
+        return existingOverrideId;
+      }
+      const newOverrideId = String(Math.random());
+      stackToOverrideMap[stack] = newOverrideId;
+      return newOverrideId;
+    });
+    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
     const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo15(() => {
@@ -25328,10 +25378,15 @@ var wrapInSchema = (Component, schema) => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
-        overrideValues: dragOverrides[overrideId] ?? {},
-        propStatus: codeValues[overrideId]
+        overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+        propStatus: nodePath === null ? undefined : getCodeValues2(nodePath)
       });
-    }, [currentRuntimeValueDotNotation, dragOverrides, overrideId, codeValues]);
+    }, [
+      currentRuntimeValueDotNotation,
+      getDragOverrides,
+      nodePath,
+      getCodeValues2
+    ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
@@ -25995,7 +26050,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext15(false);
+var HtmlInCanvasAncestorContext = createContext16(false);
 var HtmlInCanvasInner = forwardRef5(({
   width,
   height,
@@ -26212,7 +26267,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext16({
+var RenderAssetManager = createContext17({
   registerRenderAsset: () => {
     return;
   },
@@ -26350,7 +26405,7 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext17(null);
+var LoopContext = createContext18(null);
 var useLoop = () => {
   return React17.useContext(LoopContext);
 };
@@ -26421,7 +26476,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext18({});
+var PreloadContext = createContext19({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -26742,7 +26797,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext19({
+var DurationsContext = createContext20({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -26908,11 +26963,6 @@ var useSingletonAudioContext = ({
       gainNode
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
-  useEffect8(() => {
-    return () => {
-      context?.audioContext?.close();
-    };
-  }, [context]);
   return context;
 };
 var waitUntilActuallyResumed = (audioContext, logLevel) => {
@@ -26961,8 +27011,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext20(null);
-var SharedAudioTagsContext = createContext20(null);
+var SharedAudioContext = createContext21(null);
+var SharedAudioTagsContext = createContext21(null);
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -27007,8 +27057,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       if (!ctxAndGain) {
         throw new Error("Audio context not found");
       }
+      const saveForLater = ctxAndGain.audioContext.state === "suspended" && !isResuming.current;
       if (duration > 0) {
-        if (ctxAndGain.audioContext.state === "suspended") {
+        if (saveForLater) {
           nodesToResume.current.set(node, {
             scheduledTime,
             offset,
@@ -27026,7 +27077,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       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;
-      Log.verbose({ 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=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "");
+      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %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), "actualcurrent=" + ctxAndGain.audioContext.currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "", "action=" + (saveForLater ? "schedule" : "start"), "");
       prev.scheduledEndTime = scheduledEndTime;
       prev.mediaEndTime = mediaEndTime;
       return duration > 0 ? {
@@ -27046,6 +27097,13 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = true;
+    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+    nodesToResume.current.forEach((r2, node) => {
+      node.start(r2.scheduledTime, r2.offset, r2.duration);
+    });
+    nodesToResume.current.clear();
     const resumePromise = ctxAndGain.audioContext.resume();
     isResuming.current = new Promise((resolve) => {
       waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
@@ -27056,11 +27114,6 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     }).finally(() => {
       isResuming.current = null;
     });
-    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    nodesToResume.current.forEach((r2, node) => node.start(r2.scheduledTime, r2.offset, r2.duration));
-    nodesToResume.current.clear();
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
@@ -27643,7 +27696,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect9(() => {
+  useEffect8(() => {
     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`);
     }
@@ -27706,7 +27759,7 @@ var useImageInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -27789,7 +27842,7 @@ var useMediaInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -27862,9 +27915,14 @@ var useBufferManager = (logLevel, mountTime) => {
         }
       };
     }
+    let unblocked = false;
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
+        if (unblocked) {
+          return;
+        }
+        unblocked = true;
         setBlocks((b) => {
           const newArr = b.filter((bx) => bx !== block);
           if (newArr.length === b.length) {
@@ -27891,7 +27949,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (rendering) {
       return;
     }
@@ -27936,7 +27994,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
-  useEffect10(() => {
+  useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -27958,18 +28016,30 @@ var useIsPlayerBuffering = (bufferManager) => {
 };
 var useBufferState = () => {
   const buffer = useContext25(BufferingContextReact);
+  const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo25(() => ({
     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");
       }
+      Log.trace({ logLevel, tag: "[buffer-state]" }, "Adding buffer handle", new Error().stack);
       const { unblock } = addBlock({
         id: String(Math.random())
       });
-      return { unblock };
+      let unblocked = false;
+      return {
+        unblock: () => {
+          if (unblocked) {
+            return;
+          }
+          unblocked = true;
+          Log.trace({ logLevel, tag: "[buffer-state]" }, "Removing buffer handle");
+          unblock();
+        }
+      };
     }
-  }), [addBlock]);
+  }), [addBlock, logLevel]);
 };
 var isSafariWebkit = () => {
   const isSafari2 = /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
@@ -28105,7 +28175,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState15(false);
-  useEffect11(() => {
+  useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -28238,7 +28308,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef16(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -28524,7 +28594,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect13(() => {
+  useEffect12(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -28569,7 +28639,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect13(() => {
+  useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -28698,7 +28768,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect14(() => {
+  useEffect13(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -28737,11 +28807,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext21({
+var MediaVolumeContext = createContext22({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext21({
+var SetMediaVolumeContext = createContext22({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -28917,7 +28987,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef18(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect15(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -28986,7 +29056,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -29575,7 +29645,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext22(null);
+var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
   const context = useContext32(MediaEnabledContext);
   if (!context) {
@@ -29857,7 +29927,7 @@ var setupEnvVariables = () => {
   });
 };
 var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext23({
+var PreviewSizeContext = createContext24({
   setSize: () => {
     return;
   },
@@ -29880,14 +29950,6 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var useSequenceControlOverride = (key) => {
-  const seqContext = useContext33(SequenceContext);
-  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
-  if (!seqContext) {
-    return;
-  }
-  return overrides[seqContext.id]?.[key];
-};
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -29919,9 +29981,9 @@ 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>.");
   }
@@ -29940,7 +30002,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -30101,7 +30163,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect17(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -30133,7 +30195,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext35(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -30189,8 +30251,8 @@ 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] = useState21(() => String(Math.random()));
@@ -30265,7 +30327,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -30308,7 +30370,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef22(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -30325,7 +30387,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -30614,7 +30676,8 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeOverridesContext,
+  VisualModeGettersContext,
+  VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
@@ -30623,7 +30686,6 @@ var Internals = {
   sequenceStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
-  useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
   useVideo,
@@ -30716,7 +30778,9 @@ var Internals = {
   useMemoizedEffects,
   defineEffect,
   createDescriptor,
-  computeEffectiveSchemaValuesDotNotation
+  computeEffectiveSchemaValuesDotNotation,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -30754,7 +30818,7 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext24(false);
+var IsInsideSeriesContext = createContext25(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
     value: true,
@@ -30796,9 +30860,6 @@ var SeriesInner = (props2) => {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
       const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      if (!castedChild?.props.children) {
-        throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
-      }
       const durationInFramesProp = castedChild.props.durationInFrames;
       const {
         durationInFrames,
@@ -31314,13 +31375,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(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 { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -31336,7 +31397,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -31379,7 +31440,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -31530,7 +31591,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");
   }
@@ -31900,7 +31961,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo38(() => new EventTarget, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -32047,7 +32108,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
-  useEffect21(() => {
+  useEffect20(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -38346,7 +38407,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/prompts/PromptsSubmit.tsx
-import { useCallback as useCallback35, useEffect as useEffect46, useRef as useRef45, useState as useState47 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect47, useRef as useRef45, useState as useState47 } from "react";
 
 // src/components/prompts/config.ts
 var REMOTION_PRO_ORIGIN = "https://www.remotion.pro";
@@ -39225,7 +39286,7 @@ class AudioGainRadioGroup extends Component {
   onSetup() {
     this.#media = useMediaContext();
     if (hasProvidedContext(menuContext)) {
-      this.#menu = useContext45(menuContext);
+      this.#menu = useContext44(menuContext);
     }
   }
   onConnect(el) {
@@ -40615,7 +40676,7 @@ var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, for
 });
 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);
@@ -40630,7 +40691,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;
@@ -40915,7 +40976,7 @@ var PromptsSubmitPage = () => {
   });
   const [isDragging, setIsDragging] = useState47(false);
   const pollRef = useRef45(null);
-  useEffect46(() => {
+  useEffect47(() => {
     return () => {
       if (pollRef.current)
         clearInterval(pollRef.current);